The document provides an overview of visual design principles for visual designers. It discusses how visual designers use elements like hierarchy, contrast, consistency, proximity, alignment, typography, line, shape, space, color, texture and depth to fulfill a client's creative brief and business requirements. The designer considers the purpose, audience, message and how success will be measured. They also work from wireframes created by information architects to take users through processes and promote brands while meeting user needs.

1. Visual design 101
Elaine Chen, SapientNitro
November 13, 2014

2. Who am I?

3. So what does a visual designer do?
It’s not just about
making things pretty.

4. The visual designer uses the elements
and principles of visual design to
fulfill the client’s creative brief and
business requirements.

5. The creative brief usually includes:
• The purpose of the project
• The intended audience
• The message being delivered
• Notes on the look, feel and tone
• How success will be measured
5

6. Examples of business requirements:
• Selling a product
• Taking a user through a process, like an application or
ecommerce transaction
• Brand awareness and promotion
6

7. Traditionally, the visual designer works from
wireframes created by an information
architect (IA) or UX/UI designer.
7
IA VD
Back Submit Cancel
Name
Email address
Phone no.
Contact Info
Name
Email address
Phone no.
Contact Info
< Back SUBMIT CANCEL

8. Before you get started…

9. Who are your users?
Do they have any unique needs?

10. How will the user interact with the interface?
10
Mouse Touchscreen Other

11. Where will they interact with it?
11
Consider environmental factors.

12. At the screen level…
• What are the user’s needs?
• What is the most important thing on the screen?
• What do you want the user to do?
• What is the emotional response you want to evoke?
12

13. Good design should answer all these
questions—and also make the app
look like a unified whole.

14. So how do we communicate
these things?

15. 1. Hierarchy

16. 16
What is the most important thing on the screen?
What is the least important?

17. Contrast

18. 18
You can use weight, shape,
value, scale and/or colour to
achieve contrast.
STEP 1
We can have lots of fun.

19. Consistency

20. 20
STEP 2
There’s so much we can do.
STEP 1
We can have lots of fun.

21. Proximity

22. Proximity visually relates elements to
one another.
22
STEP 1
We can have lots of fun.
STEP 2
There’s so much we can do.
STEP 3
It’s just you and me.
STEP 4
I can give you more.

23. Alignment

24. 24

25. 25

26. 26
Left-aligned
text and
graphics help
the eye flow
down the
page.
Right-aligned
text is difficult to
read because of
the jagged
starting edges.
So is center-aligned
text, especially for
longer paragraphs
of text.
Right
alignment
Center
alignment
Left
alignment

27. Typography

28. 28
Rule of thumb
No more than two fonts, and they should be contrasting.

29. Fonts should be appropriate.
29
The Lord Chamberlain is commanded by
The Queen to invite
Steven Engels
to the Marriage of
His Royal Highness Prince William of Wales, K.G.
with
Miss Catherine Middleton
at Westminster Abbey
on Friday, 29th April, 2011 at 11:00 a.m.

30. But readable.
30
To Sherlock Holmes she is always the woman. I have seldom heard him mention her under any other name. In his eyes she eclipses
and predominates the whole of her sex. It was not that he felt any emotion akin to love for Irene Adler. All emotions, and that one
particularly, were abhorrent to his cold, precise but admirably balanced mind. He was, I take it, the most perfect reasoning and
observing machine that the world has seen, but as a lover he would have placed himself in a false position. He never spoke of the softer
passions, save with a gibe and a sneer. They were admirable things for the observer—excellent for drawing the veil from men’s motives
and actions. But for the trained reasoner to admit such intrusions into his own delicate and finely adjusted temperament was to introduce
a distracting factor which might throw a doubt upon all his mental results. Grit in a sensitive instrument, or a crack in one of his own
high-power lenses, would not be more disturbing than a strong emotion in a nature such as his. And yet there was but one woman to
him, and that woman was the late Irene Adler, of dubious and questionable memory.
!
I had seen little of Holmes lately. My marriage had drifted us away from each other. My own complete happiness, and the home-
centred interests which rise up around the man who first finds himself master of his own establishment, were sufficient to absorb all my
attention, while Holmes, who loathed every form of society with his whole Bohemian soul, remained in our lodgings in Baker Street,
buried among his old books, and alternating from week to week between cocaine and ambition, the drowsiness of the drug, and the fierce
energy of his own keen nature. He was still, as ever, deeply attracted by the study of crime, and occupied his immense faculties and
extraordinary powers of observation in following out those clues, and clearing up those mysteries which had been abandoned as hopeless by
the official police. From time to time I heard some vague account of his doings: of his summons to Odessa in the case of the Trepoff
murder, of his clearing up of the singular tragedy of the Atkinson brothers at Trincomalee, and finally of the mission which he had
accomplished so delicately and successfully for the reigning family of Holland. Beyond these signs of his activity, however, which I
merely shared with all the readers of the daily press, I knew little of my former friend and companion.

31. 31
Everyone loves to hate Comic Sans.
Also Impact.
(Sometimes Tekton too.)
(Okay and also Papyrus.)

32. Line

33. Line
33
Sometimes you need a line.

34. Line
34
Sometimes you need a line.

35. Line
35
Sometimes you need
a line.
Sometimes a line helps
separate things of equal
importance.

36. Line
36
Sometimes you need
a line.
Sometimes a line helps
separate things of equal
importance.
Weight and style matter.

37. Shape

38. Shapes can help organize information.
38
But use sparingly.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Nulla aliquet
sapien ligula, in lacinia turpis laoreet a. Etiam
nec egestas nisi. Aenean laoreet consectetur
eros id euismod. Curabitur tempus lacus nisi,
nec scelerisque orci laoreet nec. In bibendum
ex vel ligula fermentum tincidunt.
Phasellus bibendum
Ut velit vitae venenatis. Mauris elementum,
lorem vitae fringilla ultricies, leo ipsum posuere
mauris, luctus rutrum felis risus non lorem.
Nulla ut condimentum leo.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Nulla aliquet
sapien ligula, in lacinia turpis laoreet a. Etiam
nec egestas nisi. Aenean laoreet consectetur
eros id euismod. Curabitur tempus lacus nisi,
nec scelerisque orci laoreet nec. In bibendum
ex vel ligula fermentum tincidunt.
Phasellus bibendum
Ut velit vitae venenatis. Mauris elementum,
lorem vitae fringilla ultricies, leo ipsum posuere
mauris, luctus rutrum felis risus non lorem.
Nulla ut condimentum leo.

39. Squares vs. circles
39
Rigid, formal, modern Soft, organic, friendly
Steve Engels
Senior Lecturer, Department
of Computer Science,
University of Toronto
Steve Engels
Senior Lecturer, Department
of Computer Science,
University of Toronto

40. Shapes can add meaning.
40
Put something in an
unusual shape, and all
people will see is the
shape and not the content.

41. Whitespace

42. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in
his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he
could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding
was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully
thin compared with the size of the rest of him, waved about helplessly as he looked. "What's
happened to me?" he thought. It wasn't a dream. His room, a proper human room although a
little too small, lay peacefully between its four familiar walls. A collection of textile samples lay
spread out on the table - Samsa was a travelling salesman - and above it there hung a picture
that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It
showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that
covered the whole of her lower arm towards the viewer. Gregor then turned to look out the
window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel
quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but
that was something he was unable to do because he was used to sleeping on his right, and in his
present state couldn't get into that position. However hard he threw himself onto his right, he
always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that
he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild,
dull pain there that he had never felt before."Oh, God", he thought, "what a strenuous career it
is that I've chosen! Travelling day in and day out. Doing business like this takes much more effort
than doing your own business at home, and on top of that there's the curse of travelling, worries
about making train connections, bad and irregular food, contact with different people all the time
so that you can never get to know anyone or become friendly with them. It can all go to Hell!"
He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard
so that he could lift his head better; found where the itch was, and saw that it was covered with
lots of little white spots which he didn't know what to make of; and when he tried to feel the

43. Colour

44. Colour wheel
44

45. Colour wheel
45
Primary colours Secondary colours are
created by mixing
primary colours
together.
Tertiary colours are
created by mixing a
primary colour with the
secondary colour next to
it in the wheel.
red, yellow, blue
orange, green, violet
yellow-orange, red-orange, red-
violet, blue-violet, blue-green,
yellow-green

46. Colour schemes
46
Monochromatic Analogous TriadComplementary

47. Colour context
47
Warm colours tend to
stand out more than
cool colours.
Different background
colours can affect how
a foreground colour is
perceived.

48. Keep it readable.

49. Colour can convey mood and meaning.
49
Remember that meaning
can differ culturally.

50. Ways to create or explore colour themes:
• Adobe Color (color.adobe.com)
• Pinterest (especially home decorating boards)
• Use the Photoshop eyedropper tool to extract colors
from a photo or picture you like
50

51. 51
What can I click on?

52. Texture and pattern

53. (But don’t be distracting.)

54. Depth

55. In summary:
• Hierarchy
• Contrast
• Consistency
• Proximity
• Alignment
• Typography
• Line
• Shape
• Space
• Colour
• Texture
• Depth
55
Requirements
(business requirements
and user needs)
(And okay,
you can make
it pretty too.)

56. Less is more.

57. Thank you!