Visual design 101Elaine Chen, SapientNitro

November 13, 2014

Who am I?

So what does a visual designer do?

It’s not just about making things pretty.

The visual designer uses the elements and principles of visual design to

fulfill the client’s creative brief and business requirements.

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

Examples of business requirements:

• Selling a product

• Taking a user through a process, like an application or ecommerce transaction

• Brand awareness and promotion

6

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

Before you get started…

Who are your users?

Do they have any unique needs?

How will the user interact with the interface?

10

Mouse Touchscreen Other

Where will they interact with it?

11

Consider environmental factors.

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

Good design should answer all these questions—and also make the app

look like a unified whole.

So how do we communicate these things?

1. Hierarchy

16

What is the most important thing on the screen?

What is the least important?

Contrast

18

You can use weight, shape, value, scale and/or colour to achieve contrast.

STEP 1We can have lots of fun.

Consistency

20

STEP 2There’s so much we can do.

STEP 1We can have lots of fun.

Proximity

Proximity visually relates elements to one another.

22

STEP 1We can have lots of fun.

STEP 2There’s so much we can do.

STEP 3It’s just you and me.

STEP 4I can give you more.

Alignment

24

25

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

Typography

28

Rule of thumbNo more than two fonts, and they should be contrasting.

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.

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

Everyone loves to hate Comic Sans.

Also Impact.(Sometimes Tekton too.)

(Okay and also Papyrus.)

Line

Line

33

Sometimes you need a line.

Line

34

Sometimes you need a line.

Line

35

Sometimes you need a line.

Sometimes a line helps separate things of equal importance.

Line

36

Sometimes you need a line.

Sometimes a line helps separate things of equal importance.

Weight and style matter.

Shape

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.

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

Shapes can add meaning.

40

Put something in an unusual shape, and all people will see is the shape and not the content.

Whitespace

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 place with one of his legs he drew it quickly back because as soon as he touched it he was

Colour

Colour wheel

44

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

Colour schemes

46

Monochromatic Analogous TriadComplementary

Colour context

47

Warm colours tend to stand out more than cool colours.

Different background colours can affect how a foreground colour is perceived.

Keep it readable.

Colour can convey mood and meaning.

49

Remember that meaning can differ culturally.

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

What can I click on?

Texture and pattern

(But don’t be distracting.)

Depth

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

Less is more.

Thank you!