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.

Learning to think "The Designer Way"

2,218 views

Published on

Presented on 26th September at DevDay 2014, Krakow Poland.

Published in: Design
  • Be the first to comment

Learning to think "The Designer Way"

  1. 1. @Ben_Hall Ben@BenHall.me.uk Blog.BenHall.me.uk
  2. 2. Learning to think “The Designer Way” @Ben_Hall Ben@BenHall.me.uk Blog.BenHall.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. Attractive things work better http://www.jnd.org/dn.mss/CH01.pdf
  8. 8. Emotional reaction http://www.jnd.org/dn.mss/emotion_design_at.html
  9. 9. Preconceived expectations Opinion ar e for med befor e w e’ve even r ealis ed
  10. 10. Result === influence / creditability
  11. 11. Software Craftsmanship “ 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. Design is very similar to code Patter ns , Pr ac tic es , H er etic s , R ules , Logic . TD D , Feedbac k C yc les .
  14. 14. Junior Designers vs. Senior Designers https :// medium.c om /the -ye a r- of-the -lo o kin g - glas s /junior - d es ig n er s-vs -senior-designers - fbe483d3b51e
  15. 15. Layout
  16. 16. http://blog.usabilla.com/how-the-left-brain-right-brain-theory-improves-the-user-experience/ 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
  17. 17. whitespace
  18. 18. EMPHASIS IF EVERYTHING HAS IT, NOTHING DOES.
  19. 19. Emphasis If e ve r yth in g h a s it, n o th in g d o e s .
  20. 20. Emphasis If e ve r yth in g h a s it, n o th in g d o e s .
  21. 21. 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 Golden ratio
  22. 22. 1.61803398875
  23. 23. Twitter 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. Real life isn’t square - 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. Copy / clone to learn & train brain.
  31. 31. Images & Icons Picture is worth a thousand words. No one reads on the internet so… A good picture is priceless.
  32. 32. Recognition
  33. 33. Consistency. What does the user expect? *R EALLY* impor tant on mobile ?
  34. 34. Spacing and layout matters
  35. 35. Great images create Desire and expression
  36. 36. Stock photography
  37. 37. Define colour scheme for site kuler.adobe.com
  38. 38. Blurry images as backgrounds
  39. 39. DRIVE USER ATTENTION
  40. 40. DRIVE USER ATTENTION
  41. 41. Accelerators
  42. 42. Optimise images for download
  43. 43. Responsive icons?
  44. 44. COLOURS
  45. 45. http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm Complementary color scheme Analogous color scheme Triadic color scheme Split-Complementary color scheme Rectangle (tetradic) color scheme Square color scheme
  46. 46. STOP THINKING “RED” AND “ERROR” TO CAPUTRE ATTENTION W H AT AR E YOU TRYIN G TO AC H IEVE? BUILD PASSED INFO: DID YOU KNOW… WARNING: 10 HOURS LEFT
  47. 47. Typography
  48. 48. Massively creative
  49. 49. Works of art
  50. 50. "In some ways, the most difficult part of design process is finding the initial inspiration to make a font" ~ Karen Cheng Mos t impor tant as pec t of d e s ig n
  51. 51. "Typefaces, like people, have their own personality" - Core Brand
  52. 52. More engaging and compelling content
  53. 53. Looks Better = Works Better.
  54. 54. Dangerous
  55. 55. http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
  56. 56. http://i.imgur.com/MPSSfXj.jpg
  57. 57. Font weight – not just 100-900 https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
  58. 58. WHY IS ALL CAPS SHOUTING?
  59. 59. Experiment lots
  60. 60. Don’t use more than three
  61. 61. Respond to touch EVENTS
  62. 62. Progress bars – cloudflare example
  63. 63. Help users make the right choice in the first place
  64. 64. Undo.
  65. 65. Usability tests
  66. 66. Not asking “do you like this?” Ever yone w ill s ay yes !!! People ar e aw es ome.
  67. 67. Chance to learn. Ask more than you talk. It’s like a date
  68. 68. Other people SPOT mistakes EASIER than the creator.
  69. 69. “Oh yeah, of course, I didn’t notice”
  70. 70. New Product!!! JoinScrapbook.com
  71. 71. AND FINALLY
  72. 72. • Layout, Images, Colours, Typography, Feedback • Just like code… Copy, Test, Iterate, Feedback, Play. • Sign up to JoinScrapbook.com • Tweet me for slides @Ben_Hall

×