Banner Design Academy

Welcome to the first Banner Ad Academy of the galaxy.
At Bannersnack we’ve gathered the best know-how in the industry so you can know how to design banner ads like a pro.
Ready? Set! Click the Call-To-Action button!

Chapter 3: Four Design Principles In Banner Ads

Good design looks simple, smart and effortless.

Good design follows these four graphic design principles. There are a few variations as to how many design principles there are. Some list four, others five and some go up to 8.

Still, with these four principles (also known as CRAP design principles) are the basis of any good design.

Follow these and you’re on the safe side:

1. Contrast

When all the items on your design are pretty much the same – size, shape, color – it gets harder to notice anything.

This is where contrast comes into play.

According to this principle, the reader should be able to easily distinguish elements from one another and to distinguish the important information in your design.

Contrast is what makes your banner stand out and attract visual attention.

You can create contrast in a number of ways: color, size, font weight, typefaces, spacing or placement for example. The bigger the difference between elements in your banner, the better the contrast principle is applied.

For example, with text: if you chose 10 points, 11 points won’t make much of a difference. Go with bigger sizes, for example 10 and 15 points to apply the contrast principle correctly. The same with colors – colors that are too similar, like red and orange won’t create a lot of contrast. Orange and blue on the other hand will.

2. Repetition

If contrast makes elements on your banner get noticed, repetition brings organization and structure to your design.

According to the repetition principle, you need to repeat an aspect of your design throughout your work.

Repetition helps bring unity and consistency to a design by using elements that fill in the dots and connect different parts of your design. It helps develop organization and strengthens your design unity.

Repetition can take many forms: using the same font, the same size, the same contrast, texture, color or the same graphical element (logo, bullet or clip art for example).

Place logos in the same place, use the same size rapport across your banner, don’t choose colors or contrasts that are too different.

3. Alignment

Alignment makes the difference between a design that’s easy to understand and one where you’re left guessing about what it is trying to convey.

According to the alignment principle, nothing should be placed randomly or arbitrarily within your design. Type, images, buttons – all the elements on your banner should be have a visual connection to some of the other elements in your banner.

When elements are placed randomly, your banner looks sloppy and the design looks scattered and unprofessional. More, the user will be confused and will need to work harder to understand what you’re trying to say. That in turn decreases the likelihood of an actual click.

Proper alignment increases the feeling of a stronger cohesive unit. It gives your design strength and balance and lends a clean, trustworthy look.

Also, make sure to use alignment consistently in your banner design. If you’ve aligned some elements on the right, align the rest on the right as well. Stay clear of justified as much as possible.

4. Proximity

When elements that complement one another are scattered all over, it is harder for the user to understand what you’re trying to say.

Use proximity to group related things together and to organize your design.

According to the proximity principle, items that are similar or related to one another should be grouped accordingly. This way, they form a visual whole rather than several distinct, scattered groups.

This in turn, organizes elements and the information in your design, making it less cluttered, easier to read and understand.

 

 

Besides those, here are a few other things to keep in mind:

a. Don’t overcrowd your design.

While the four principles above give you an idea about what you should do, they don’t tell you what you should stay clear of.

Don’t add too much text or too many elements to your design – it will make your banner look overcrowded and unprofessional. If you think all the information is necessary, split it across two or more slides. But whatever you do – don’t try to fit it all in one small rectangle.

b. If you’re creating animated banners or banners with more than one slide, keep an eye out for unity.

Make sure that the slides are consistent and look connected visually.

Back to Chapter 2 Continue to Chapter 4