designing ads billboard example

4 Things to Think About When Designing Ads

Designing ads, whether it is for social media, email campaigns or banner ads online, is something you will be asked to do a lot. There are a few core components of these design requests that you need to keep in mind to keep your ad designs as effective, and beautiful, as possible. Balancing the marketing mission with glorious design is part of the fun, so let’s get cracking.

THE MISSION

As in all aspects of design for marketing, you need to keep the objective of the piece at the centre of your mind when you are designing. It is too tempting as designers to make things look cool (after all, that is what we do) but doesn’t convert it is unlikely to keep your clients coming back for more.

designing ads mission

Keep the messaging used clear and concise, ideally with a single focused message shining out. This helps prevent confusion and makes it more likely viewers will take the desired action.

Size

Depending on your design’s intended destination, the size of your ads will vary. Designing ads that work in their final environment (most likely a social media feed or on a website as a banner ad) is crucial to making sure they are a) seen, b) effective and c) high enough quality to look swish, but not impact the loading time. You can find an excellent set of dimension guidelines here, or get the specifics from your client before you begin.

designing ads billboard example
Photo by Paige Muller on Unsplash

Content & Elements

Understanding the psychology of colour, font and imagery has all be covered in this blog, but keep a reference guide handy when you are beginning to plan out your designs.

designing ads example planning
Have a plan in mind when designing ads

What is the intended feel of the ad? What emotions do your clients what to inspire and more importantly, what actions do they want viewers to take upon seeing the ad? Think about the composition of the photography and image elements used and how they interact with the text and colour schemes. Is there any negative space that could work with text for example?

Colours

Keep it simple, stupid

Every Designer Ever

When using colours in ads remember not to over do it. Like fonts, stick to a restricted number for maximum efficiency and keep in mind the connotations certain colours have. It is also fun to have a play with the contrast of the elements on your design, will your message be more effective with high contrast or are you going for something more subtle?

stock images example header

The BEST Places to Find Kickass Stock Images

Before we delve into the list of places you can find kick ass stock images to use in your design work, one thing needs to be clear:

If you can use your own photos, you should.

Obviously, I am being a massive hypocrite on this post as I am not using a single image I took myself 😇

The price of creating good quality photography is dropping everyday with technology becoming both more affordable and advanced. Understanding the basics of photography and composition also gives you a running chance at producing good quality images which are suitable for your design work.

Licence to Kill

Another benefit of using your own work is avoiding licensing issues. Stock images online will be available for use depending on certain license terms and conditions. You can get a better understanding of the various licensing type here. It is SO important to adhere to these terms and be aware of the legalities involved with using images, especially if you are doing so in the name of a client. Stay on the right side of everyone and your designs will be both beautiful and legal.

Best Places to Find Stock Images

Here are a few of my favourite places to find stock images to use when designing for fun and for clients. Enjoy!

A Note on Royalties

Royalty free images are not necessarily free as you may need to purchase the right to use them. The big benefit with Royalty Free images however is that you don’t need to pay every time it is used.

Don’t Be a Dick

The Universe

For free images you really need to keep an eye on what license the image was released with. Some images require attribution and image credit to the original producer, some don’t. Other images may not require attribution, but you are forbidden to modify or edit. We are all for breaking rules here, but not at the expense of either your client, your reputation or the hard work that someone put into creating the image you are using. We want you to be a rebel, not a dick.

Photo by rawpixel on Unsplash

Colour Theory and Photography

With the whole internet at our finger tips, the number of images you can search for borderlines on the infinite. But when you throw licensing and image quality into the mix, an image can cause your design more harm than good.

Using colour theory when considering your photography choices for a piece makes it more likely that your piece will look composed and professional, rather than something you put together for homework when you were eight. Here are some quick tips to consider colour theory when using photography in your work.

Go for the Contrast

Black and white works well with bold white text, but adding a pop of colour with some geometric elements can also help unite all the elements on the page. It is an oldie, but a goodie.

Colour Schemes

The same colour theory principles discussed here work when considering your use of photography. If the colour scheme you are working with is more monochromatic ( where the colour scheme stems from a single base hue and extends throughout its shades) or other colour harmonies, you can look for high quality images that match that scheme.

colour theory and photography example

Overlay, over lay!

An overlay is a great way to make the colour theory of your chosen photo work with your design. You can create an overlay by adding a translucent colour in a fill layer above your image. This means you can also experiments with different colours easily. You can also adjust the opacity of the image so that the photography elements stand out or fade away, helping you create the right effect for the message your piece is carrying.

colour theory and photography example

Get the Message

Remember, whatever effect you choose to use with colour theory and photography, remember the message you are trying to convey. Sometimes, designers can get a bit carried away with how awesome certain effects look, but if they are not fulfilling the function of the piece, it isn’t doing its job. Play around but if you are working on a client project, stay true to the objective!

write a clear message example

photography and design header image

How to use Typography AND Photography in Design

We all love good photography and we all love pretty type, but you can definitely have too much of a good thing. Here are some basic guidelines for designers to use when working with both typography and photography so that each piece remains effective without overcrowding the design and sending mixed messages.

Find Your Content

Most of the time, the written content of a piece is provided by the client. It is then your job as a designer to match the words to a typeface which carries the message effectively.

typography and photography example

Other times you may have more freedom around the wording. I am pretty lucky in that I started my freelance career as a copywriter so my grasp of the English language is pretty robust. If you are unsure of our wording, experiment with how it looks using typography and photography on the piece. Do you need all those words? Is the balance of the text working for you? What about if you adjust size and weight?

If you are providing the written content for a piece always, always, ALWAYS get the approval of your client before publishing. And get that approval in writing. Ironic? maybe. Necessary? Hell yes.

Think About Your Audience

When pairing typography and photography you need to think about the audience. In fact, in all element of design work you need to think about your audience! Who is the piece aimed at and what is the message you want your work to carry. What action do you want the viewer to take once they have seen your piece?

A heavy metal gig poster will carry a very different message to a magazine advert about adult only holidays for example.

typography and photography example
Unless we are talking about 7000 Tonnes of Metal Cruise obviously. Which goes to show there is a crossover for everything

Less is More

As covered in the Typography blogs, it is always a good idea for designers to stick to one to three fonts when working with text in a design. This helps tie the piece together and also prevents it from becoming overcrowded. This is especially relevant for pieces using typography and photography, as too many elements will compete for the viewers attention and the intended message will be lost.

photography and typography example text

Fight it Out

Remember, the more elements there are to a piece (graphics, typography and photography) the more difficult it is to see them all. Make sure you don’t overcrowd your piece and if you are using a lot, aim for a balanced composition so that each piece completes, not competes, with each other.

Composition and Layout in Photography

A photograph with terrible composition can ruin even the most beautiful of images, so imagine the damage it could cause to your design work.

Eye Up Your Composition

First up, a definition:

Composition describes placement of relative objects and elements in a work of art. 

Photography Life

Great. But what does that actually mean? Composition in photography is essentially the space, layout and focus of a piece in relation to the image’s border. A classic example of bad composition in photography is cutting out someones head, or focusing on the background and having a blurry subject. It just looks bad.

Balanced Vs Unbalanced

An image with good composition tends to feel balanced, which bring a sense of calm and beauty to the eye. Of course, using unbalanced photos in design is possible for certain desired effects, but usually text or other elements are used to counter-balance the image and unite the whole piece. Check out the difference below:

Single Focussed Images

These are created when a subject is placed in the centre of the shot and often have a shallow depth of field so that all the viewer’s attention is focussed in one place. The composition of a Single Focussed Image is ideal for food photography, portraits and headshots, as well as making bold product statements.

Weight a Minute…

Any aspect of an image, in both design and photography, has a visual weight. The composition of an image decides if a subject has a lot of visual weight, or just a little. The more visual weight an element has, the more attention it demands from the viewers eye.

If an item with heavy visual weight is pushed to one side of the design, it has the potential to make the composition feel unbalanced. You can offset this bay cropping the image cleverly or adding other elements to the piece.

Three IS the Magic Number

A handy tip for getting the composition of your images correct is using the rule of thirds.

By dividing your composition with a grid of nine squares (with four intersecting points), you provide a guideline that will balance our subject within the image and, more often than not, create a well composed image that will benefit your design work.

Of course, this isn’t a magic tool or shortcut to great design as you will still have to carefully consider the subject matter of the images used to ensure that they enhance your design and do not ruin the message you are trying to deliver.

Hierarchy feature

Type Hierarchy – Get in line, punk

Type hierarchy helps a piece to flow. Most design briefs are intended to communicate a message and as designers, we want to ensure we are as clear as possible. 

Even if you have a lot to say, you can implement Type Hierarchy to break down the info so the viewer understands the message without feeling overwhelmed. Here’s an example:

Photo by Banter Snaps on Unsplash,  flyer designed with a template from Canva 

A Tale of Two Flyers

The first design is much easier on the eye and offers a range of text sizes and formatting. The second design is all the same size, meaning some messaging is lost and some is much stronger than it needs to be. 

The viewer struggles to understand the message of the piece and is much less likely to take the desired action. Meaning, as a designer, you have kind of let the side down and probably won’t get recommend or hired again. Soz. 

The Basics of Type Hierarchy

Try to include a distinct text style for the following element of your marketing designs and your work will both flow and communicate the message effectively. 

Header

This is the first thing the viewer should see. You can make it stand out by using high contrast (dark on light colour schemes and vice versa), choosing a bold or heavy font variation or just ensuring it is a little bit bigger than the rest. 

Sub Header

This isn’t always necessary but can be useful for adding that little extra detail once you have the viewer’s attention. This should still be prominent, but smaller than the Header. Try using a font from the same typeface family but choose a lighter version. 

Body Text

This is the meat of the messaging, but be careful not to go overboard. Too much Body Text won’t hold a viewer’s attention for long. Keep it short, well spaced and smaller than the other text on the page. This is also a great place to use mixed casing for the text, whereas either all caps or all lowercase works better in Headers and Sub Headers.

Call to Action (CTA)

This is likely the most important part of the design as it inspires the viewer to take action. This means your design is working and your client gets more leads and gives you a Whole Lotta Love.

Any excuse for a Led Zep reference

CTAs should stand out, but not detract from the Header and overall message of the piece. Try making them smaller than the Header, but bigger than the Sub Header. Also experiment with spacing, it is currently really on tend to include websites as a CTA but include lots of space between the individual characters. Be playful but follow these rules loosely for better design results. 

Sans serif feature image

Super Sans-Serif

Sans-Serif fonts are easy to identify, the clue is in the name. Obviously being French speaking here helps a little… oui. 

Sans-Serif = Without Serifs (the tails of letters found extending in Serif fonts.)

Sans-Serif fonts are currently super popular in modern design as they are clean, sleek and modern.

They developed much more recently than Serif fonts due to advent of digital technology. When technology had low screen resolution, the small details that made Serif fonts look so good were lost and just began to look messy or blurred. 

Enter the Sans-Serif font to save the day.

Modern and Minimalist

Sans-Serif fonts are clean and bold, making them ideal for large, attention grabbing headings:

However they are not so great to use when creating large blocks of text, especially if the end result is designed for print. This can be done but it risks being lost as the eye passes over the text. Sans-Serif fonts are good for short blocks of text, so leaflets and one pagers, but if you are formatting a book, stick to Serif typefaces. 

Examples of Sans-Serif 

These fonts are often used in branding and logo design to convey the message the brand using them are up to scratch in the fast moving digital modern world. Google rebranded their font from Serif to Sans Serif to create a logo which was more playful and accessible. 

Here are some examples of other Sans-Serif fonts you probably see everyday but never realised!

sans-serif font examples
Image found on Pinterest

how to use serif fonts example

How to Use Serif Fonts

Now we know the difference between the various font types, it is time to learn their strengths and weaknesses. Starting off with how to use serif fonts.

History of Serif Fonts

Serif fonts are divided into four types as they have been developed over the course of history. Starting with Old Style in the middle ages, to Transitional styles in the mid 1800s, to Didone Modern and Slab Serif used today. Of course all of these font styles are still in use, it just depends on your intention which one you choose.

Old Style

These fonts were created for books and pamphlets, these are easy to read even at small sizes. Old style fonts are useful for larger pieces of body text and can give a historical feeling to a piece.

Old Style Serif fonts include: Minion, Garamond and Palatino.

Transitional

Transitional fonts bridge the gap between Old Style fonts and more modern typefaces. They are still consistent in their thickness ( a defining feature of Old Style fonts) but their endings are much more rounded. Therefore, they have a much softer look.

Transitional Serif fonts include: BaskervilleGeorgia and Times New Roman.

Didone Modern

Emerging in the late 1800s, Didone Modern fonts are highly stylised and make great use of white space when the kerning is increased. The thickness between various character parts are much  more dramatic, so they provide striking font designs used by the likes of Vogue. 

Didone Modern Serif fonts include: DidotBodoni, and Century Schoolbook.

Slab Serif

Slab Serif fonts are bold and striking, ideal for use in posters or to grab attention. The characters and serifs are heavy, thick and block like. This typeface style is designed for use of posters and to catch the eye. They are best for headers, titles and statements. 

Slab Serif fonts include: Rockwell, Memphis and Courier.

The Anatomy of Type

So, now we know the difference between a font and typeface, serif and script, it is time to go a little deeper into understanding the Anatomy of Type so you can both look super professional to clients and also understand what the hell other designers are talking about. 

anatomy of type gif
Yes, fellow designers, I agree…

Common Anatomy of Type Definitions

Baseline

The line the font tracks or rests on. 

Descenders

Any part of lowercase letters which drop below the baseline.

Ascenders

Any part of the character that goes above the x- height of the font.

X-height

This was originally the height of the  lowercase letter ‘x’ in traditional fonts. It refers to the height of lower case letters without their ascenders or descenders, but can vary within font. 

anatomy of type illustration

Tail

The tip of the character, the very end of the descender.

Ears

Any part that sticks out of the side of a letter, usually found in serif or script fonts. 

Loops

Fairly self explanatory. Often found in more cursive or decorative fonts. 

Closed Counter

The area within a letter, for example the inside of  an ‘O’

Cross Bars

The part of a letter which connects, such as the middle of an ‘H’ or ‘A’

These are all parts of the characters and letters which can be fun to play around with when creating designs and logos. Just be careful not to draw too much attention to the anatomy of the type, as it works best when used subtly. 

Further Resources

Check out Adobe’s Glossary of Type Terms for more on the anatomy of type. Canva also provide this wonderfully illustrated guide too.  You don’t need to know them all, but a basic understanding goes a long way when using fonts to their full potential.

typography basics header

Typography Basics 101

A picture paints 1000 words, but get the typography basics of a piece correct and your words will say just as much. 

Typography is the art of technique of displaying words or text in a readable, digestible and appealing way. Get the typography basics right and your messages will be elevated. Get them wrong and you may be saying something completely different from the word meaning itself. 

For example: 

typography basics header

Font vs Typeface

A font is a collection of glyphs (characters, numbers and punctuation). A typeface is a collection of fonts that share similar attributes, but vary in size and weight.

typeography basics typeface font

Font Classifications

So there are billions of fonts out there, but they can be generally grouped into three classifications. Serif. Sans Serif and Script. Fonts can also be extremely Decorative

typography basics font types example

Using Fonts Correctly

The best way to get to grips with typography basics is to practice. The more familiar you become with fonts, typefaces and font connotations, the easier you will find it to navigate which font will work best for you client’s purpose. 

Starting with the basics is great. Then you can also find and experiment with free fonts from websites such as dafont, 1001 Free Fonts and Font Squirrel. You can also purchase fonts from sites such as Creative Market. This ensures you both have the license and rights to use the font, and also sends some well earned money into the designers pocket. We all win.