6 Design Principles: How to use them in your banners

Design is everywhere. You can’t escape it. But lets be clear, not all design is good design. Ever picked up a menu at a restaurant and been so bewildered you’ve just gone for the special? That’s bad design. Ever gone to throw out your junk mail to have something catch your eye? That’s good design.

But what makes good design? Unfortunately there is no secret formula and learning this craft instinctively takes years of work and study (as we at Exact Abacus know!). There is, however, some design principles, that if you master, will stand you in good stead for creating beautifully designed masterpieces. Let’s take a look at what they are and how these principles can benefit your banner designs.

We will look at Hierarchy, Balance, Proportion, Proximity, Similarity/Contrast, Harmony.


1 Hierarchy

Hierarchy, I personally think is a huge factor in whether a design works or not. My process is to jot down all the elements that need to be included in your design and then go through and put them in order of importance.

For example, in your eCommerce website banner you may want to push a specific product. So the elements we’ll use will be:
USP
Product title
Description
Call to action
Supporting imagery

We want to add importance as follows:
1- USP
4- Product title
5- Description
2- Call to action
3- Supporting imagery

This doesn’t mean we should reorder them as it wouldn’t make sense to have a description below a link to purchase, but we can emphasise hierarchy with the use of colours, typography, size etc. The aim is for the customer to see all the key elements in priority order.

Below is an example on how just altering sizes can give priority to specific elements.
hierarchy example

When you combine this with typography and colour you can see where we are directing the customer to look…
hierarchy eye tracker


2 Balance and symmetry

Wikipedia describes balance as a state of equalized tension and equilibrium, which may not always be calm. Try to see your design like a see-saw as you’ll need to add elements onto your design whilst maintaining the balance.

Balance also applies with images and typography. Having headings in 70pt and your body copy in 12pt is going to look very unbalanced as well as using very busy imagery against a very simple one.

You can see on the examples above how the text is balanced with the imagery, it is not so much being symmetrical than having a focal point that hold a similar weight spread across your design. This is also commonly exploited to create feelings of vastness.

See below for some examples. The red line indicated where the weight of your ‘balance seesaw’ rests. As you can see placing all of your content to the right would topple it over. This is a good rule of thumb to follow to get used to the theory but with all design ‘once you learn the rules you can break them’ and there are plenty of exceptions out there.

balance example

Below you can see how imagery can upset the balance of a design by pulling focus. Even by using imagery with a different saturation can unbalance your design. This can also happen with busy imagery too simple or colour palettes within the imagery. Again the red line signifies where the weight of the design falls.
balance in imagery


3 Proportion

Proportion looks at how the elements you use relate to each other and their surroundings. One way to use proportion in your banners is to pull focus onto a product. You can see proportion used a lot in interiors with over-sized lamps and even in fashion where bags are made extra large to make the owner look smaller.

proportion in fashion and interiors
proportion banner example


4 Proximity

When we look at a good design, proximity has 2 jobs; It groups information that is relevant to each other together and it also ensures the message is understood by spacing out content so it doesn’t become a blur of information.

webdesignerdepot.com look into this concept in depth and have a great example of how this works on a business card…

proximity example


5 Similarity / Contrast

By using similarity – whether it’s across your banners or just on the one – you can create consistency and make it easy for your customers to digest your messages. On the other hand you can use contrast to catch the viewers attention and direct it where you want it to go.

This principle doesn’t just apply to layout but colours, imagery (as seen in ‘balance’) and typography. Below you can see how you can either use the same font or a completely contrasting one and still have a legible and cohesive design. When using this effect in typography you will notice that high contrast works well but if you use relatively similar fonts, say Helvetica and Arial, then the reader may start noticing the small differences and break up their reading flow.

similarity example

tl;dr

Hopefully these few pointers will help you on the way to making higher converting banners by…
• Positioning relevant content together
• Playing with proportions to draw focus to selected areas
• Use contrast to add more friction to your design
• Use similarity to create clear and recognisable features
• Try to balance your design using layout as if it was a seesaw

For some further reading:
http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
http://en.wikipedia.org/wiki/Design_elements_and_principles

http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
http://learndesignprinciples.com/

by Jennifer McMillen on 24/03/2015

Let's talk

We're here to help. Send us a message and we'll get back to you as soon as possible.

Get in touch

Guides and Resources

View Resource Library