VD 101

513 views

Published on

The presentation I gave on visual design basics to a U of T comp sci class.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
513
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

VD 101

  1. 1. Visual design 101 Elaine Chen, SapientNitro November 13, 2014
  2. 2. Who am I?
  3. 3. So what does a visual designer do? It’s not just about making things pretty.
  4. 4. The visual designer uses the elements and principles of visual design to fulfill the client’s creative brief and business requirements.
  5. 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. 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. 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. 8. Before you get started…
  9. 9. Who are your users? Do they have any unique needs?
  10. 10. How will the user interact with the interface? 10 Mouse Touchscreen Other
  11. 11. Where will they interact with it? 11 Consider environmental factors.
  12. 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. 13. Good design should answer all these questions—and also make the app look like a unified whole.
  14. 14. So how do we communicate these things?
  15. 15. 1. Hierarchy
  16. 16. 16 What is the most important thing on the screen? What is the least important?
  17. 17. Contrast
  18. 18. 18 You can use weight, shape, value, scale and/or colour to achieve contrast. STEP 1 We can have lots of fun.
  19. 19. Consistency
  20. 20. 20 STEP 2 There’s so much we can do. STEP 1 We can have lots of fun.
  21. 21. Proximity
  22. 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. 23. Alignment
  24. 24. 24
  25. 25. 25
  26. 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. 27. Typography
  28. 28. 28 Rule of thumb No more than two fonts, and they should be contrasting.
  29. 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. 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. 31 Everyone loves to hate Comic Sans. Also Impact. (Sometimes Tekton too.) (Okay and also Papyrus.)
  32. 32. Line
  33. 33. Line 33 Sometimes you need a line.
  34. 34. Line 34 Sometimes you need a line.
  35. 35. Line 35 Sometimes you need a line. Sometimes a line helps separate things of equal importance.
  36. 36. Line 36 Sometimes you need a line. Sometimes a line helps separate things of equal importance. Weight and style matter.
  37. 37. Shape
  38. 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. 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. 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. 41. Whitespace
  42. 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. 43. Colour
  44. 44. Colour wheel 44
  45. 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. 46. Colour schemes 46 Monochromatic Analogous TriadComplementary
  47. 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. 48. Keep it readable.
  49. 49. Colour can convey mood and meaning. 49 Remember that meaning can differ culturally.
  50. 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. 51 What can I click on?
  52. 52. Texture and pattern
  53. 53. (But don’t be distracting.)
  54. 54. Depth
  55. 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. 56. Less is more.
  57. 57. Thank you!

×