Are you depressed about your design skills? Panic attacks over that presentation? Looking down the abyss of artistic failure? Well, it’s not that bad. All you need are a few basic principles to help you through.

1. DESIGN
for
Non-Designers
by David Hall
Five visual principles to guide you

2. Are you depressed about
your design skills?
Panic attacks over
that presentation?
Looking down the abyss
of artistic failure?

3. 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?”

4. 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.

5. A LITTLE
background
My story has two slides.

6. 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.

7. 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?

8. WHAT IS
bad design?
I think it’s more fun to ask this first.

10. Arrggghhhh!
I’m blinded!
Arrggghhhh!
I’m blinded!

11. I’ve also lost the use of
my legs through shock!
I’ve also lost the use of
my legs through shock!

12. So bad design is Unbalanced
Cluttered
Unfocused
Bad design is something that
fails to communicate clearly.

13. GOOD
design
Let’s find out how to start creating it.

14. 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

15. The elements of design
These are the basic building blocks of drawing,
design, painting and any visual medium.
Colour
Shape
Texture
Space
Form

16. The principles of design
These principles are applied to the elements of
design to create a full design.
Balance
Emphasis
Movement
Pattern
Repetition
Proportion
Rhythm
Variety
Unity

17. 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.

18. WHITE
space
The number one rule that is broken.
1

20. Music is in the space
between the notes.
French composer, Erik Satie
“

21. 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

22. 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.

23. Oh dear! More beauties
at boredpal.com.

24. 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.

25. 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.

26. 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.

27. CORRECT
typography
The art and technique of arranging type.
2

28. Make it easy to read.
Roger Black, Designer.
“

29. 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.

30. Serif Sans Serif

31. Georgia
Cambria
Times New Roman
Arial/Helvetica
Calibri
Verdana
System fonts that are good to use

32. 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.

33. A nice example of a business card that uses
typography to great effect.
Using different weights, styles and variations
can create an interesting layout.

34. 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

35. 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.

36. 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.

37. 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

38. 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.

39. 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.

40. 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.

41. 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

42. Grids &
alignment
The best way to layout your design and keep it neat.
3

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

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

45. 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.

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

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

48. A grid can be as simple as a single
column. Everything aligns to the left.
It’s clean and clear.

49. 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

50. 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.

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

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

53. THE POWER
of contrast
Making objects look different from one another.
4

54. Via Megatron_Griffin

55. A curve does not exist in its full power
until contrasted with a straight line.
Robert Henri, Painter
“

56. 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

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

58. 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

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

60. 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.

61. 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.

62. Shape contrast
Why not use circle instead of boxes when putting
shapes on a page?

63. COLOUR
and images
Making your design pop.
5

64. Caption

65. Colour is like food for the spirit
— plus it’s not addictive or fattening.
Isaac Mizrahi, Fashion Designer
“

66. 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

67. Saul Bass was a master at using minimalist colour
palettes especially in his early movie posters.
Colour can be used simply.

68. 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.

69. 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.

70. The rule of thirds
and 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.

71. 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.

72. Put the product shot
to 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.

73. Text with
background layer
My least favourite text layout, but can be used if you
have a troublesome image.

74. 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.

75. 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?

76. PUTTING IT
into practice
Let’s see how it all comes together in something you do every day at Zartis.
6

77. Some good examples of promos

85. Colour and branding
Primary
#00a0c6
For buttons/links
#00c78b
For body text
#121212

86. 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.

87. Logo placement
Download logos
Best if square or portrait
Use centered logo if text is centered.
If landscape
Text can be left aligned.
If landscape
Text can be left aligned.

88. Tools
These 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

89. References
These are the bibles of design and content.
Thinking with Type
The Vignelli Canon
Guardian Style Guide