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.

What Developers Need To Know About Visual Design

3,480 views

Published on

Presentation from DDDEA, Cambridge delivered on 13th September 2014.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

What Developers Need To Know About Visual Design

  1. 1. @Ben_Hall Ben@BenHal l .me.uk Blog.BenHal l .me.uk
  2. 2. What Developers Need To Know About Visual Design @Ben_Hal l Ben@BenHal l .me.uk Blog.BenHal l .me.uk
  3. 3. Who exactly is Ben Hall? I am not a designer Ocelot Uproar
  4. 4. Follow me and my drunken activities @Ben_Hall
  5. 5. Key Topics 1. Layout 2. Images & Icons 3. Colours 4. Typography 5. Feedback
  6. 6. Why design matters?
  7. 7. At tract ive things work bet ter http://www.jnd.org/dn.mss/CH01.pdf
  8. 8. Emot ional react ion http://www.jnd.org/dn.mss/emotion_design_at.html
  9. 9. O p i n i o n a r e f o r m e d b e f o r e w e ’ v e e v e n r e a l i s e d Preconceived expectat ions
  10. 10. Resul t === inf luence / credi tabi l i ty
  11. 11. Sof tware Craf tsmanship “ R a i s i n g t h e b a r o f p r o f e s s i o n a l s o f t w a r e d e v e l o p m e n t ”
  12. 12. In Startup, everyone should be a designer
  13. 13. Pa t t e r n s , Pr a c t i c e s , He r e t i c s , Ru l e s , L o g i c . TDD, Fe e d b a c k Cy c l e s . Design is very simi lar to code
  14. 14. h t t p s : / /me d i um. c om/ t h e - y e a r - o f - t h e - l o o k i n g - g l a s s / j u n i o r - d e s i g n e r s -vs- s e n i o r - d e s i g n e r s - f b e 4 8 3 d 3 b 5 1 e Junior Designers vs. Senior Designers
  15. 15. Layout
  16. 16. The right side of the brain looks at visual reference as a whole then works its way into noticing finer details The left side first sees the details and puts them together to form the bigger picture http://blog.usabilla.com/how-the-left-brain-right-brain-theory-improves-the-user-experience/
  17. 17. whi tespace
  18. 18. IF EVERYTHING HAS IT, NOTHING DOES. EMPHASIS
  19. 19. I f e v e r y t h i n g h a s i t , n o t h i n g d o e s . Emphasis
  20. 20. I f e v e r y t h i n g h a s i t , n o t h i n g d o e s . Emphasis
  21. 21. Golden rat io Two quantities are in the golden ratio if their ratio is the same as the ratio of their sum to the larger of the two quantities
  22. 22. 1.61803398875
  23. 23. Twi t ter as an app example
  24. 24. Round v square http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/
  25. 25. ”RECENTABLES WITH CORNERS ARE EVERYWHERE!” Steve Jobs
  26. 26. Re a l l i f e i s n ’ t s q u a r e - Road signs
  27. 27. Sharp corners take our focus outside the rectangle
  28. 28. Rounded corners take our focus inside the rectangle
  29. 29. Windows 8
  30. 30. Sketch layouts unt i l natural
  31. 31. Copy / clone to learn & train brain.
  32. 32. Images & Icons Picture is wor th a thousand words. N o o n e r e a d s o n t h e i n t e r n e t s o… A good picture is pr iceless.
  33. 33. Recogni t ion
  34. 34. *REAL LY* imp o r t a n t o n mo b i l e ? Consistency. What does the user expect?
  35. 35. Spacing and layout mat ters
  36. 36. Great images create Desi re and expression
  37. 37. Stock photography
  38. 38. Def ine colour scheme for si te kuler.adobe.com
  39. 39. Blurry images as backgrounds
  40. 40. DRIVE USER ATTENTION
  41. 41. DRIVE USER ATTENTION
  42. 42. Accelerators
  43. 43. Opt imise images for download
  44. 44. Responsive icons?
  45. 45. COLOURS
  46. 46. Complementary color scheme Analogous color scheme Triadic color scheme Split-Complementary color scheme Rectangle (tetradic) color scheme Square color scheme http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
  47. 47. BUILD PASSED INFO: DID YOU KNOW… WARNING: 10 HOURS LEFT WHAT ARE YOU TRYING TO ACHIEVE? S TOP T H I N K I NG “ R E D ” A N D “ E R ROR ” TO C A P U T R E ATTENTION
  48. 48. Typography
  49. 49. Massively creat ive
  50. 50. Works of art
  51. 51. Mo s t imp o r t a n t a s p e c t o f d e s i g n " In some ways, the most di ff icul t par t of design process is f inding the ini t ial inspi rat ion to make a font " ~ Karen Cheng
  52. 52. "Typefaces, l ike people, have thei r own personal i ty" - Core Brand
  53. 53. More engaging and compel l ing content
  54. 54. Looks Bet ter = Works Bet ter.
  55. 55. Dangerous
  56. 56. http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
  57. 57. http://i.imgur.com/MPSSfXj.jpg
  58. 58. Font weight – not just 100-900 https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
  59. 59. WHY IS ALL CAPS SHOUTING?
  60. 60. Experiment lots
  61. 61. Do n ’ t u s e mo r e t h a n t h r e e
  62. 62. Respond to touch EVENTS
  63. 63. Progress bars – cloudf lare example
  64. 64. Help users make the right choice in the f i rst place
  65. 65. Undo.
  66. 66. Usabi l i ty tests
  67. 67. Ev e r y o n e wi l l s a y y e s ! ! ! Pe o p l e a r e awe s ome . No t a s k i n g “ d o y o u l i k e t h i s ? ”
  68. 68. Chance to learn. Ask more than you talk. I t ’s l i k e a d a t e
  69. 69. Other people SPOT mistakes EASIER than the creator.
  70. 70. “Oh y e a h , o f c o u r s e , I d i d n ’ t n o t i c e ”
  71. 71. New startup! ! !
  72. 72. AND FINALLY
  73. 73. • Layout , Images, Colours, Typography, Feedback • J u s t l i k e c o d e… C o p y, Te s t , I terate, Feedback, Play. • Sign up to. . . TBC. Ask me. • Tweet me for sl ides @Ben_Hal l

×