Learning to think "The Designer Way"
•Download as PPTX, PDF•
1 like•2,548 views
This document discusses principles of design and provides tips for creating effective designs. It covers topics like layout, images, color, typography, and feedback. Key points include that attractive designs work better because they create emotional reactions and meet users' expectations. Design is presented as similar to coding, involving patterns, practices, and feedback cycles. Junior and senior designers are compared, with senior designers able to emphasize appropriately and drive user attention. Specific design tips are provided around whitespace, emphasis, the golden ratio, rounded vs square elements, consistency, and optimizing images. Color theory basics and creating engaging typography are also outlined. The importance of usability testing and not just asking for likes is emphasized.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (7)
Similar to Learning to think "The Designer Way"
Similar to Learning to think "The Designer Way" (20)
More from Ben Hall
More from Ben Hall (20)
Recently uploaded
Recently uploaded (20)
Learning to think "The Designer Way"
- 2. Learning to think “The Designer Way” @Ben_Hall Ben@BenHall.me.uk Blog.BenHall.me.uk
- 3. Who exactly is Ben Hall? I am not a designer Ocelot Uproar
- 5. Key Topics 1. Layout 2. Images & Icons 3. Colours 4. Typography 5. Feedback
- 8. Attractive things work better http://www.jnd.org/dn.mss/CH01.pdf
- 10. Preconceived expectations Opinion ar e for med befor e w e’ve even r ealis ed
- 11. Result === influence / creditability
- 14. 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 ”
- 15. In Startup, everyone should be a designer
- 16. 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 .
- 17. 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
- 24. Layout
- 25. 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
- 26. whitespace
- 29. EMPHASIS IF EVERYTHING HAS IT, NOTHING DOES.
- 30. Emphasis If e ve r yth in g h a s it, n o th in g d o e s .
- 31. Emphasis If e ve r yth in g h a s it, n o th in g d o e s .
- 32. 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
- 33. 1.61803398875
- 35. Twitter as an app example
- 41. Real life isn’t square - Road signs
- 42. Sharp corners take our focus outside the rectangle
- 43. Rounded corners take our focus inside the rectangle
- 44. Windows 8
- 45. Copy / clone to learn & train brain.
- 46. Images & Icons Picture is worth a thousand words. No one reads on the internet so… A good picture is priceless.
- 47. Recognition
- 48. Consistency. What does the user expect? *R EALLY* impor tant on mobile ?
- 49. Spacing and layout matters
- 54. Great images create Desire and expression
- 56. Define colour scheme for site kuler.adobe.com
- 57. Blurry images as backgrounds
- 60. Accelerators
- 63. Optimise images for download
- 65. COLOURS
- 69. 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
- 70. 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
- 71. Typography
- 74. Works of art
- 75. "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
- 76. "Typefaces, like people, have their own personality" - Core Brand
- 78. Looks Better = Works Better.
- 79. Dangerous
- 80. http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
- 83. Font weight – not just 100-900 https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
- 84. WHY IS ALL CAPS SHOUTING?
- 85. Experiment lots
- 88. Don’t use more than three
- 91. Respond to touch EVENTS
- 92. Progress bars – cloudflare example
- 94. Help users make the right choice in the first place
- 95. Undo.
- 97. Usability tests
- 98. Not asking “do you like this?” Ever yone w ill s ay yes !!! People ar e aw es ome.
- 99. Chance to learn. Ask more than you talk. It’s like a date
- 100. Other people SPOT mistakes EASIER than the creator.
- 101. “Oh yeah, of course, I didn’t notice”
- 103. AND FINALLY
- 104. • Layout, Images, Colours, Typography, Feedback • Just like code… Copy, Test, Iterate, Feedback, Play. • Sign up to JoinScrapbook.com • Tweet me for slides @Ben_Hall
Editor's Notes
- www2.warnerbros.com/spacejam/movie/jam.htm 1996
- As children we’re told that corners hurt…
- Steve jobs hated corners
- Sadly no-one told Microsoft
- Enhance other content on your page
- Valentica
- Works of art
- This is because the serif make the individual letters more distincitve and easier for our brains to recognise easier. Without the serif, the brain has to spend longer identifying the letter because the shape is less distinctive
- Different font weights will render typefaces specifically created for that weight, unlike the old days where bold could be just an algorithm to fatten a typeface. Obvious uses the numerical value of font-weight to enable the best representation of a typeface.
- Harder to read…
- Giving feedback
- Progress bars are key… make them interactive with a video too
- Error messages should be helpful
- Getting feedback