{"id":139699,"date":"2016-07-14T11:00:46","date_gmt":"2016-07-14T16:00:46","guid":{"rendered":"https:\/\/getflywheel.com\/?p=18014"},"modified":"2024-01-03T01:17:27","modified_gmt":"2024-01-03T07:17:27","slug":"20-design-elements-and-principles-every-designer-should-know","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/20-design-elements-and-principles-every-designer-should-know\/","title":{"rendered":"20 Design Elements and Principles Every Designer Should Know"},"content":{"rendered":"\n

There was a time when design was too controlled. Too patterned. Too safe.<\/p>\n\n\n\n

But evolution is inevitable, and designers started to experiment a little more.<\/p>\n\n\n\n

From there, designs became bolder and better. Designers started to dig deeper into the science behind their audience\u2019s behavior, allowing them to become flexible to what the market demanded.<\/p>\n\n\n\n

Today, design has become more than just patterns and trends. It has become a lifestyle. Something that is carefully weaved into every human reaction and routine. And beneath the intricacies that come with this lifestyle lie 20 different design principles that make this world a more creative, beautiful place to live in.<\/p>\n\n\n\n

Let\u2019s take a look at those principles, and tips for harnessing them in your designs.<\/p>\n\n\n\n

Lines<\/h2>\n\n\n\n
\"The<\/figure>\n\n\n\n

Look anywhere around you and you\u2019ll see lines. The edges of your computer screen. The sides of each key on your keyboard. Even the letters on those keys are made up of lines, some of them straight, some of them curved, some of them slanted.<\/p>\n\n\n\n

That\u2019s exactly how important lines are. Without them, everything would just blend into each other infinitely, making the world a single blob.<\/p>\n\n\n\n

What makes lines even more amazing, aside from the fact that they define everything\u2019s form, is the fact that they also translate into emotions and ideas that solicit equivalent reactions. Put a squiggly line beside a straight vertical line, for example, and you\u2019ll start thinking of order and strength on one side and chaos and confusion on the other. <\/p>\n\n\n\n

This can be very useful if you\u2019re prompting your audience to respond to certain calls to action. The moment their moods and emotions have been set, it\u2019s easier to just cruise through your call to action.<\/p>\n\n\n\n

Another role that lines play in web design is the fact that they lead the eyes of the audience towards each page\u2019s focal points. For example, strong leading lines under the name of the brand in a sea of other smaller text will help that name stand out.<\/p>\n\n\n\n

Scale<\/h2>\n\n\n\n
\"A<\/figure>\n\n\n\n

Scale defines how you will size different elements in a single design. It basically brings logic into a piece, or takes it away. For example, if you were to draw an ant right next to a dog, it would only make sense that you make the dog a whole lot larger than the ant (unless the design dictates that you veer away from reality).<\/p>\n\n\n\n

Scale is also the best way for you to create drama. As hinted above, there will be instances when you will have to step away from realism and create stunning effects by sizing some elements significantly smaller or larger than others.<\/p>\n\n\n\n

Scaling is also a great way to emphasize hierarchy. Take movie posters, for instance. Actors with major roles usually have their pictures standing out above the rest, not because they\u2019re taller or bigger than the supporting actors, but because their characters are more important.<\/p>\n\n\n\n

Now, let\u2019s say you\u2019re working on something that features a lot of text, and not a lot of pictures. Scaling still proves to be the best way for you to emphasize some details over the others. Statistics, for example, can be scaled up significantly to draw the eyes of the audience straight to that piece of data.<\/p>\n\n\n\n

Color<\/h2>\n\n\n\n
\"Colorful<\/figure>\n\n\n\n

It\u2019s unbelievable how much impact color has on everything. There\u2019s been study after study about color\u2019s effects not only on a person\u2019s moods and emotions but on their reactions and buying decisions as well.<\/p>\n\n\n\n

Can you imagine seeing an environmental company using nothing but black and white for their brand? Or a business that wants to exude a professional aura and traditional values using bright neon colors? That, I think, is enough explanation that shows what role color plays in design.<\/p>\n\n\n\n

Consistency<\/h2>\n\n\n\n
\"A<\/figure>\n\n\n\n

When you think about Coca-Cola, do you imagine the colors green or blue? Probably not\u2014your mind automatically jumps to the color red.<\/p>\n\n\n\n

This is what consistency is all about.<\/p>\n\n\n\n

Designing for a brand is all about consistency. It is all about using the exact same shades, tones, and tints of the exact same color, as well as the exact same font types. Office reports, billboards, banner ads\u2014every single thing associated with the brand should  always be consistent. After all, if Coca-Cola changed their color scheme every year or so, do you think it would still bring about the same brand recall that it has now? I think not.<\/p>\n\n\n\n

White Space<\/h2>\n\n\n\n
\"Stacks
Frame Inc. Business Cards<\/a><\/figcaption><\/figure>\n\n\n\n

White space doesn\u2019t necessarily mean that it\u2019s white, but it does always mean the same thing no matter what color it may be. It is the unused space between your elements, that negative space that a lot of designers go crazy about.<\/p>\n\n\n\n

To some, all that unused space seems to be such a waste. But wait until you use that space to your advantage by strategically leaving it blank. You can open up a whole new level of creativity that would blow your audience\u2019s minds away.<\/p>\n\n\n\n

Don\u2019t believe me? Check out MC Escher\u2019s Sky and Water and you\u2019ll get exactly what I mean.<\/p>\n\n\n\n

Symmetry<\/h2>\n\n\n\n
\"A
Ares Patch by Garrett Godsey<\/a><\/figcaption><\/figure>\n\n\n\n

Did you know that your eyes are naturally drawn to anything symmetrical? This is the concept that brands like Target and Chanel took advantage of, making their logos incredibly memorable.<\/p>\n\n\n\n

Symmetry is one thing that brings a sense of balance and order to any design. It may not be that obvious sometimes, but for every great piece of art comes a unique way of forming symmetry to please the eye.<\/p>\n\n\n\n

Opacity<\/h2>\n\n\n\n
\"A<\/figure>\n\n\n\n

A design element\u2019s opacity shows how \u2018see through\u2019 it is. It dictates how transparent everything is. Anything that has lower opacity is basically lighter, while elements that have higher opacity are more solid to the eye.<\/p>\n\n\n\n

Opacity can help you lay different elements on top of each other without completely eliminating the presence of those underneath. It is also used to add a sense of movement to an image.<\/p>\n\n\n\n

Texture<\/h2>\n\n\n\n
\"Blue<\/figure>\n\n\n\n

Without texture, any design could look blank and plain. Add some texture in and the design comes alive, making it seem like it\u2019s ready to pop out of the screen or the surface it\u2019s printed on.<\/p>\n\n\n\n

This does not mean that every piece of design requires texture. There will always be design projects that would look better when they\u2019re clean and sharp. However, there will also be instances where a little texture wouldn\u2019t hurt.<\/p>\n\n\n\n

You can jazz up your design\u2019s texture by adding a background that adds depth to the surface. You can also try embossing some elements.<\/p>\n\n\n\n

Balance<\/h2>\n\n\n\n
\"Pen
Tap by Eddie Lobanovskiy<\/a><\/figcaption><\/figure>\n\n\n\n

Balance may sometimes be confused with symmetry, but they are actually two different things. When things are symmetrical, each element might end on the same margin or there might be the same number of elements on either side of a page. While this usually results in a sense of balance, you can also achieve that feeling without using a symmetrical design.<\/p>\n\n\n\n

Say, for example, you\u2019d like to design an about page with some text and an image. You can find a sense of balance with a two-column layout even though the text is not an identical element to the image.<\/p>\n\n\n\n

Balance is just something that makes a piece of design look complete. When an image is unbalanced, it may look half-baked, or worse, uninspired.<\/p>\n\n\n\n

Hierarchy<\/h2>\n\n\n\n
\"Two
Hierarchy by Melanie Taube<\/a><\/figcaption><\/figure>\n\n\n\n

Hierarchy shows which elements are more important over everything else. This does not mean that the elements at the end of the hierarchy (the bottom feeders, so to speak) are things you can do without. After all, without the elements on the other end of the hierarchy, you wouldn\u2019t be able to get the amount of impact that you\u2019re aiming for.<\/p>\n\n\n\n

Hierarchy can be expressed in so many different ways aside from scaling. You can use brighter colors for those at the top of the food chain, with the color getting lighter as you move further down.<\/p>\n\n\n\n

Contrast<\/h2>\n\n\n\n
\"Palm<\/figure>\n\n\n\n

Contrast is the rule of opposites. It basically distinguishes light from dark, big versus small. For designers who are always aiming to make an element or two pop out of their design, contrast is usually one of the approaches they use.<\/p>\n\n\n\n

But contrast goes way deeper than just aesthetics. Contrast also affects readability. Use two colors that are almost the same for the text and the background and you\u2019ll probably scratch your eyes out trying to read what the text says. By using two colors with a high contrast, your eyes will immediately see what they are supposed to see.<\/p>\n\n\n\n

Framing<\/h2>\n\n\n\n
\"Drawing
The best camera is the one you have with you by Sean McCabe<\/figcaption><\/figure>\n\n\n\n

See how a frame puts a boundary around pictures you put in it? That\u2019s exactly what framing is for. It basically shows you what should and should not be part of the picture.<\/p>\n\n\n\n

Box outlines, margins\u2014all these are forms of framing. It also allows you to highlight certain elements over the others, like a single quote in the middle of a page filled with text.<\/p>\n\n\n\n

You can also be creative and use other things for your frame aside from the usual lines and margins. For example, a beach-themed poster could use shells lined up around the text to effectively frame them.<\/p>\n\n\n\n

Grid<\/h2>\n\n\n\n
\"Open<\/figure>\n\n\n\n

Trying to align things on a blank space can be tough, which is why grids are very important in design.<\/p>\n\n\n\n

Grids help designers align and arrange elements. A perfect example of this would be the columns on a magazine page or a newspaper. Can you imagine having all that text randomly placed without the guidance of a grid? It would be a disaster to try to make sense of.<\/p>\n\n\n\n

On the other hand, if you\u2019re going for a design that\u2019s a little less rigid, breaking the grid is a wonderful way to instantly create a sense of chaos. Our eyes tend to naturally look for the layout and the grid of a design, so busting out of that structure will help create a sense of disorder.<\/p>\n\n\n\n

Spontaneity<\/h2>\n\n\n\n
\"Person<\/figure>\n\n\n\n

Sure, sure. We need balance. We need symmetry. Follow the grid. Use lines to frame it. But all this does not mean that everything should be done according to the manual. Sometimes, a little bit of crazy is also necessary to create amazing design.<\/p>\n\n\n\n

Just because you already have a clear division between columns and rows does not mean that you can\u2019t suddenly place a quote in the middle without following the existing frames. If that\u2019s the best way for that line to stand out, then so be it.<\/p>\n\n\n\n

As you\u2019re designing, take a break from your \u201crules\u201d and find room for a little spontaneity \u2013 something unexpected. This might be just the thing your design needs.<\/p>\n\n\n\n

Direction<\/h2>\n\n\n\n
\"Bike
Spiral Artcrank Design by Allan Peters<\/a><\/figcaption><\/figure>\n\n\n\n

This can also be referred to as visual or graphic cues. Place an image of someone pointing towards your call-to-action button and almost every single reader\u2019s eyes will immediately go straight to that button.<\/p>\n\n\n\n

Of course, the eyes also follow certain patterns as they look over a page. Studies show, for example, that the most common patterns the eyes follow would be an E, an F, or a Z shape. This is why it is best to place the most important content on the top left of the page, as the eyes\u2019 natural instinct would be to move from the top left to the top right first.<\/p>\n\n\n\n

Rules<\/h2>\n\n\n\n

Yes, although creativity is often spontaneous, there are still a lot of design rules that you should follow. But then again, breaking these rules every so often would also push you to create surprisingly beautiful pieces.<\/p>\n\n\n\n

So how do you know when to follow the rules and when to break them?<\/p>\n\n\n\n

First, you have to be well-versed with the basics so that you know exactly what you\u2019re breaking. Then, make sure breaking the rules corresponds to the point that you\u2019re trying to make.<\/p>\n\n\n\n

Movement<\/h2>\n\n\n\n
\"Man<\/figure>\n\n\n\n

You don\u2019t need magic to create movement on printed design. There are so many effects you can use that would allow you to give the impression that an image is moving.<\/p>\n\n\n\n

On an image of a kid riding his bike, for example, you can blur the rest of the image around him to show that he\u2019s just whizzing by everything he passes. You can also use motion lines, as well as wave effects. You can also use opacity to give the optical illusion of movement, as with this logo designed by Vladimir Mirzoyan above.<\/p>\n\n\n\n

Depth<\/h2>\n\n\n\n
\"Looking<\/figure>\n\n\n\n

Sure, flat designs have been all the rage for a couple of years now. You have to admit though that adding depth to some of your designs still fits better. After all, how amazing is it that something physically two-dimensional can actually seem like it\u2019s popping right out of a page?<\/p>\n\n\n\n

There are several techniques you can use to create depth in your designs, such as:<\/p>\n\n\n\n