Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design 101 - a quick start guide

A copy of a presentation I gave, with the confidential information removed.

  • Login to see the comments

Design 101 - a quick start guide

  1. 1. Design 101 A quick start guide for developers everyone
  2. 2. ● Why you need design skills ● Design principles
  3. 3. ‘I am a programmer. I am not a designer.’ This statement, meant to empathise with a target audience of developers, is exactly the myth that we need to stop perpetuating. If you are a programmer, the work that you do contributes directly to the experience that the people using your product will have. Whether you know it or not, you are a designer. Whether you know it or not, the work you do affects the design of the site or application you are building. If you are aware of this fact, you can make a conscious effort to affect the design in line with the needs of your users. If you are not aware of it, you will still be impacting the design of the product, however you will be doing so without realising it and without thinking about the people who will ultimately be using your product. extract: http://aralbalkan.com/notes/design-is-not-veneer/
  4. 4. Why does bad design happen to good code? ● Released without designers seeing it. ● Devs look at things differently. ● Don’t get taught how to design.
  5. 5. What are you going to learn? ● Identify patterns within the applications and understand why they are used. ● Learn to critique design properly ○ Using science and visual psychological principles ○ Beyond just “opinions” ○ Separate Form from Function and critique both separately. ● Understand why consistency matters to users. ● Collaborate more effectively, and feedback with more considered views ● Produce higher quality UI ● Learn to notice, seek and remember
  6. 6. Why are we doing this? ● Spot flaws in the UI and fix them before they ship, or point them out in code reviews. ● Champion good design within your team.Understand the difference between extending the design standards rather than breaking them ● Know when NOT to innovate ● Change company culture to improve the user experience ● Devs outnumber designers so inevitable devs will do design
  7. 7. Design is... ● NOT a veneer ● NOT added later ● NOT magic fairy dust ● NOT colouring in ● NOT art. “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs
  8. 8. Design is... ● Problem solving ● Attention to detail ● Planning ● Decision making ● Evolved ● Integral ● Simplicity “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs
  9. 9. Design is... … a skill you can learn
  10. 10. Design principles
  11. 11. Contrast Repetition Alignment Proximity Also hierarchy,dominance, ratios, pattern recognition, closure.
  12. 12. Contrast
  13. 13. Creates hierarchy, balance, dynamics and rhythm.
  14. 14. Contrast If items are meant to be grouped, don’t just make them similar make the identical. If things aren’t meant to be grouped but look similar - make them very different.
  15. 15. Green is more visible - has better contrast. But red is more important! Clash of the titans.
  16. 16. Repetition
  17. 17. We are always looking for patterns (even when there are none) Apophenia - finding patterns in meaningless data
  18. 18. The pattern becomes what we see. We overlook what isn’t in the pattern. Especially if there is a lot of information to process.
  19. 19. Spot the difference We have a very strong ability to see the exception in a pattern if it differs in specific ways. Gestalt - the mind understands external stimuli as whole rather than the sum of their parts.
  20. 20. Shape Colour Size
  21. 21. Hue Space Line weight
  22. 22. Pattern interruption ○ Grabs the users attention ○ Causes confusion and panic ○ Prevents the user completing a task
  23. 23. Details matter
  24. 24. ● Colours ● Spacing ● Shapes ● Line thickness ● Fonts ● Icons
  25. 25. ● Colours - call to actions, primary buttons ● Spacing - break up information in forms ● Shapes - create patterns ● Line thickness - choose one ● Fonts - less is more ● Icons - no icon salad
  26. 26. Alignment
  27. 27. Grids Grids in graphic design refers to a series of intersecting horizontal and vertical lines that are used to structure content on a page. Their roots are in traditional typography for typesetting books but they can be used for placement of any graphic design element in print, web or multimedia. Grids act as a framework that a designer can use to organize content in a rational manner. Fibonacci - mathematical sequence which is used to create the golden ratio used in aesthetics
  28. 28. Alignment ● Reduces cognitive load ● Flow - lines for eye to follow ● The brain fills the gaps to create closure
  29. 29. Alignment ● Connect elements with each other ● Use the grid layout system ● Reduce the number of alignment points to a bare minimum
  30. 30. ProximityWhitespace
  31. 31. Busy and loud = Bargain!
  32. 32. or a website from the 90’s
  33. 33. Space = clarity and quality
  34. 34. Proximity ● Grouping and ungrouping ● Creates context and structure
  35. 35. Proximity ● Create smaller visual units ● Make it easier to complete small tasks ● Separate unrelated elements ● Don’t force users to hunt for related elements
  36. 36. Example Where’s Wally? the primary action?
  37. 37. Just wrong!
  38. 38. Some things are just wrong! Multiple layers of tabs...
  39. 39. Some things are just WRONG! Centre alignment...
  40. 40. Some things are just WRONG! Mystery meat
  41. 41. Some things are just WRONG! Don’t scare people
  42. 42. Your turn. “We got nukes, we got knives, we got sharp sticks.”
  43. 43. Contrast Repetition Alignment Proximity
  44. 44. Want to know more?
  45. 45. Thanks Questions?

×