DESIGNfor

Non-Designersby Dave Hall

No nonsense approach to designing things whenyou should be doing something else.

Are you depressed aboutyour design skills?

Panic attacks overthat presentation?

Looking down the abyssof artistic failure?

Well, it’s not that bad.The reality is, you come to work in the morning and suddenly you are told to create an ad to promote your new service on LinkedIn.

What is your first thought?“He’s too busy trying to create art. This is just so annoying.”

“Where is that that prima donna designer when I need him? Off again on holiday.”

“It’s going to take me ages to try and design this. Why me exactly?”

Some of this is true.

But the ability to do a little design is important.

I’m sure everyone has needed to create a wedding invite, website banner, flyer for the sports club or “wanted” ad for the local paper.

A LITTLEbackground

My story has two slides.

I’d love to say that I was curious about the world of design around me from an early age.

But clearly I wasn’t enabled. I could hardly move.

In general, people think that to be a good designer, you need years’ of experience in design and possibly a Masters in Visual Communication.

I have no formal training in design, although I loved art in school. I became a writer in advertising before finding a love for design.

I wrote ad copy, blurb for brochures, nice words to convince people that they needed something they usually didn’t.

One thing I did learn was the art of storytelling. That’s one of the defining features of great design.

So, anyone can learn to design.

WHO AM I?

WHAT ISbad design?

I think it’s more fun to ask this first.

Arrggghhhh! I’m blinded!Arrggghhhh! I’m blinded!

I’ve also lost the use of my legs through

shock!

I’ve also lost the use of my legs through

shock!

So bad design is Unbalanced

Cluttered

Unfocused

Bad design is something that fails to communicate clearly.

GOODdesign

Let’s find out how to start creating it.

Design should go unnoticed. When it comes together, information should be understood clearly.

Bad design makes us quint, sigh, and causes irritation.

I am not going to force you through design theory, but sometimes a little background is interesting.

These are the tools and principles I think are most important for anyone who needs to do basic design work on a daily basis.

GOOD DESIGN

The elements of designThese are the basic building blocks of drawing, design, painting and any visual medium.

Colour

Shape

Texture

Space

Form

The principles of designThese principles are applied to the elements of design to create a full design.

BalanceEmphasis MovementPatternRepetitionProportionRhythmVarietyUnity

In the next five sections, we will be looking at five golden rules to guide you, a mixture of the elements and principles of design. These rules apply to both digital and print work. If you are creating a website or simple flyer, these rules are relevant.

This is not an exhaustive look at the practice of design, but a quick way of improving your designs without having to go back to university.

WHITEspace

The number one rule that is broken.

1

Music is in the spacebetween the notes.

French composer, Erik Satie

“

First things first. This is the rule I see being broken more than any other.

For some reason, you fear ‘white space’. Too much space in a design, and the ‘boss’ suspects that there is something being wasted. Surely you really need to eke out every millimetre of real estate to get ‘bang for buck’?

Erik Satie had said something very profound when he talked about music being in between the space of the notes.

White space is essential to strong design, so ignore the ‘bang for buck’ brigade.

Designers use white space to create a feeling of sophistication and elegance.

Space creates tension around objects and gives these objects resonance.

It produces a strong visual frame around your message, which importantly, makes this message stand out above the clutter.

WHITE SPACE

See all that lovely white? Apple makes good use of white space throughout their website. It makes their product shots stand out and gives a sense of refinement.

Possibly the most famous use of white space in advertising. It creates tension and brings this page alive. Your eye is brought on a journey.

Bad Good

Cramped and no room to breath. I feel I’m in a design prison of my own making.

Ah that’s much better. Looks more elegant. I’m not ashamed anymore.

Embrace the space

Do not be afraid of white space, no matter what anyone tells you.

If it’s the first thing you do, start using it.

CORRECTtypography

The art and technique of arranging type.

2

Oh dear! More beautiesat boredpal.com.

Make it easy to read.

Roger Black, Designer.

“

TYPOGRAPHY

Typography, the act of arranging type, is so central to print and web design, that we can take it for granted.

You work with typography everyday when you use tools like Word or PowerPoint.

Typography is the most important tool to use, but it is also one of the easiest to get wrong.

Knowing some basic rules would not only improve your sense of design, but also your a sense of well being.

So what do you use? A Serif or Sans Serif typeface? What weight and what type size?

There are other considerations to getting type right. Kerning, line height, alignment. Let’s investigate.

Serif Sans Serif

GeorgiaCambria

Times New Roman

Arial/Helvetica

Calibri

Verdana

System fonts that are good to use

Josef Muller-Brockmann was the godfather of stripped back typography.

Just using words, it’s amazing how powerful this poster is in communicating the message.

A nice example of a business card that uses typography to great effect.

Using different weights, styles and variations can create an interesting layout.

This is using Georgia for the headline at 21px.

This body text is set in Arial. It is set at 12px with

a line height of 1.5. The Georgia of the headline

gives some contrast and makes the text more

interesting. Arial is a readable typeface. It’s not

exciting, but at least readable and available on all

machines. Line height is calculated as 1.5 times

the font size. So 18px is the line height.

An example

Font or typeface? As you might notice, I do not use the term font. “Aren’t you being a bit pedantic?” Well yes.

Microsoft Word originally made the word typeface mean font to many people.

Font means grouping of typefaces that have similar characteristics and is used more as technical term.

A typeface like Times, refers to an individual family member of that font.

So a font is what you use, a typeface is what you see. But it probably doesn’t really matter to you in the long run. Don’t sweat it.

Use two typefaces

Select typefaces that feels suitable to the content. Something corporate, use Times, more informal, use Cambria.

At most you should only be using two typefaces in a design. Any more creates confusion in the viewer and creates a feeling of inconsistency. Legibility is key.

So use two contrasting typefaces for visual interest. Use a Serif like Georgia for headings and a Sans Serif like Helvetica for body text.

For clarity, it is best to use left or center alignment. Right alignment can be hard to read and doesn’t make much sense in content dense material.

Use left alignment for text if there are many paragraphs.

Use center if you have a heading and a line of text. For example in a title slide of simple banner ad.

Align text either left or center

Typographic scale

I go with Robert Bringhurst in ‘The Elements of Typographic Style’ when he talks about the classical scale of type.

Stick with this classical scale. It’s tried and tested.

In points — 10, 12, 14, 16, 21, 24, 36, 48, 60, 72.

A good starting point is 12–16pt for body text on the web and 12pt for print. 28pt for headlines.

Watch your line length

Try to keep your paragraph length between 45 to 75 characters.

66 characters per line is widely regarded as ideal.

Do not make your lines too short, as it is hard to scan, since the eye needs to jump back and forth too often.

Watch your line height

Line height is the space in between lines of text.

The space between the lines should be about 140% - 150% of the type size.

So if your body text is 16pt, your line height should be around 24pt.

It’s not always easy to set line height in certain software programs, so just be aware your lines of text don’t look cramped vertically.

Punctuation please Two punctuation mistakes that annoy me. Improper use of quotes and dashes. Yes it’s pedantic!

When using quote marks:

“” ""not (these are inch marks)Use

When using dashes:

Hyphen “-” connects two things that are intimately related. e.g., tie-in, two-thirds.

En dash “–” connects things that are related to each other by distance, as in the May–September.

Em dash “—” for a pause in thought and can take the place of commas, parentheses, or colons.

How to create dashes on the keyboard

Grids &alignment

The best way to layout your design and keep it neat.

3

This is how it might feel to live in a cramped layout. ctrak.

A grid is like underwear, you wear it but it’s not to be exposed.

Massimo Vignelli

“

GRIDS & ALIGNMENT

Correct alignment makes your design more cohesive and visually appealing. It also makes it easier for readers to scan over a page.

Grids act as guides for the placement of elements in a design. They come into play and go hand in hand with alignment. A grid creates balance in a design. It is the invisible underlying structure of a design.

Think about drawing on graph paper, where everything you put own, text and images, adheres to the grid.

Everything should align on your design, from text to images. Some find the grid invaluable to harmonious design, while others find it limiting and constricting.

But if you're a beginner, grids will save you valuable time and headaches. It allows your imagination to roam, as it frees you from worrying about where to place elements on the page.

Obviously when you are confident, you can always break free of the conventions and flaunt yourself a little.

This is what a complicated grid system looks like. There are a lot of layout possibilities.

Another interesting layout from Digest magazine, designed by Elliot Jay Stocks.

A grid can be as simple as a single column. Everything aligns to the left.

It’s clean and clear.

Bad Better

Trying to use different alignments can cause your design to look inelegant.

Just keep it simple. Align everything to the left and objects can be aligned vertically to the top of text.

Headline Headline

Stay on the grid If your design is wide and you have a lot of text, use two or more columns to break up the composition and keep line lengths from being too long.

Just remember to have enough space between your columns, which are called gutters, and keep everything aligned to the grid.

One column Use one column if your design is a small ad or brochure.

Multi-column Use multi-columns if your design is a larger editorial piece or wide webpage.

THE POWERof contrast

Making objects look different from one another.

4

Via Megatron_Griffin

A curve does not exist in its full power until contrasted with a

straight line.

Robert Henri, Painter

“

Contrast between design elements can make a design stand out and get noticed.

Contrast on a page draws our eyes to it. It creates interest in the design. If there is interest, readers will be drawn in.

It also most importantly establishes a hierarchy of information within a design.

So a heading is larger than body text. The main image of an article will be larger and more prominent than smaller thumbnail images that are of secondary importance.

Contrast can be added through typeface choices, colors, shapes, sizes, space, and images.

Black and white, big and small are obvious types of contrast.

CONTRAST

The Mad Men campaign design are as high contrast as you can get. Again, only two colours needed. Hard to ignore.

This light text on a dark background is good contrast. This is also a good example of text overlaid on an image which we will cover later.

From Last Bits on Dribble

Bad Good

This is bland. Nothing pops. The red adds an extra dimension to the design.

Colour contrast

Black and white have high contrast. Yellow on blue creates high contrast as they are opposite each other in the colour wheel.

A strong coloured image against a plain white background create interest and contrast.

Size contrast

This can be one of the most exciting parts of design.

A simple way to create visual interest is to use different type sizes to create contrast.

Shape contrast

Why not use circle instead of boxes when putting shapes on a page?

COLOURand images

Making your design pop.

5

Caption

Colour is like food for the spirit— plus it’s not addictive or

fattening.

Isaac Mizrahi, Fashion Designer

“

Using colour and imagery is a central part to your design process. It can bring life to a design.

Text alone can convey a lot, but if your design needs to stand out in the sea that is the online news feed of a social network, then a splash of colour and well chosen image can make some impact.

Colour communicates meaning, so we need to be aware of what meaning we want to convey when we choose a specific colour.

Cultural differences mean that one colour that tries to convey warmth, might convey sadness in another culture.

It’s not enough for a designer to use a colour simply because he or she likes that colour.

Choosing a colour scheme is an important part of your toolkit.

When it comes to choosing images, it is important to recognise the colours in the images you use.

Massimo Vignelli recommend that “There are times for strong primary colors and times for subtle pastel colors; there are times for just black and white; and times where rich browns and hearty colors work more appropriately to the task at hand.”

COLOUR AND IMAGES

Saul Bass was a master at using minimalist colour palettes especially in his early movie posters.

Colour can be used simply.

Designer Reid Miles and photographer Francis Wolff worked together for years at Blue Note Records in the 50s and 60s. They created some beautifully simple album covers.

What sets them apart are the colours over rich imagery. Read Miles used a limited palette of colours to powerful effect.

Striking two colour business card. You can’t get more striking than this, black on yellow. Obviously your palette needs to complement the character of the brand.

The rule of thirdsand images

Pick images that are visually interesting. The rule of thirds is used by the best photographers to compose their shots, putting the focus of attention in one of the four points, where lines intersect.

This causes the eye to travel. Make sure your images have some visual interest like this.

Text friendly photos If your are creating a banner that needs text over an image, choose background photos that have room and contrast for text.

It is good to use white text on a dark image.

Put the product shotto the side of text

If you need to show a product shot, why not place it to the left or right of text. Then use a background image that is blurred to create some texture.

Text with background layer

My least favourite text layout, but can be used if you have a troublesome image.

A word on using stock imagery

Time is short and it can be expensive getting good stock imagery, especially people shots. It can be the hardest of all design issues, and we have all fallen into the trap of using images that reeks of cheese.

It comes down to choosing imagery that looks real. The less posed the better in my opinion. Aim for reportage style. It’s not easy, but please try.

Bad stock image Better stock image

There is a space reserved in hell for people who continually use crap like this.

This is more like it. Nothing too posed. There’s no pearly whites on show or mugging at the camera. Real people if possible. Why not take your own?

PUTTING ITinto practice

Let’s see how it all comes together in something you do every day at Zartis.

6

Some good examples of promos

Colour and branding

Primary

#00a0c6For buttons/links

#00c78b

For body text

#121212

Font selection When using Canva use ‘Open Sans’ typeface.

For body text‘Open Sans Regular’.

For headings‘Open Sans Extra Bold’ or ‘Open Sans Light’.

For extra styling‘Arvo’ (a slab serif) for headings if you are feeling creative.

Logo placement

Download logos

Best if square or portraitUse centered logo if text is centered.

If landscapeText can be left aligned.

If landscapeText can be left aligned.

ToolsThese are apps that you can use right now to create great designs.

Create designs with Canva

Edit images with Pixlr

Pick colours with Adobe color

Free stock images at Pexels

ReferencesThese are the bibles of design and content.

Thinking with Type

The Vignelli Canon

Guardian Style Guide