What Designs Need To Know About Visual Design
Download as PPTX, PDF0 likes812 views
This document discusses what developers need to know about visual design. It covers key topics like layout, images, colors, typography and feedback. Visual design is important because attractive designs work better by positively influencing opinions and credibility. The document provides examples and recommendations for each design element, emphasizing the importance of testing designs and iterating based on feedback. Developers are encouraged to experiment with design principles like software development best practices.
What Designs Need To Know About Visual Design
- 1. @Ben_Hall Ben@BenHal l .me.uk Blog.BenHal l .me.uk
- 2. What Developers Need To Know About Visual Design @Ben_Hal l Ben@BenHal l .me.uk Blog.BenHal l .me.uk
- 3. Who exactly is Ben Hall? I am not a designer Ocelot Uproar
- 4. Follow me and my drunken activities @Ben_Hall
- 5. Key Topics 1. Layout 2. Images & Icons 3. Colours 4. Typography 5. Feedback
- 7. At tract ive things work bet ter http://www.jnd.org/dn.mss/CH01.pdf
- 8. Emot ional react ion http://www.jnd.org/dn.mss/emotion_design_at.html
- 11. 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
- 13. Inf luence & Credi tabi l i ty
- 16. 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 ”
- 17. 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
- 18. 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
- 26. Layout
- 27. whi tespace
- 32. IF EVERYTHING HAS IT, NOTHING DOES. EMPHASIS
- 33. 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
- 34. 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
- 35. 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
- 36. 1.61803398875
- 38. Twi t ter as an app example
- 41. Round v square http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/
- 43. ”RECENTABLES WITH CORNERS ARE EVERYWHERE!” Steve Jobs
- 44. Re a l l i f e i s n ’ t s q u a r e - Road signs
- 45. Sharp corners take our focus outside the rectangle
- 46. Rounded corners take our focus inside the rectangle
- 47. Windows 8
- 48. Sketch layouts unt i l natural . Copy / clone to learn & t rain brain.
- 49. 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.
- 50. Recogni t ion
- 51. *REAL LY* imp o r t a n t o n mo b i l e Consistency. What does the user expect?
- 53. Spacing and layout mat ters
- 58. Great images create Desi re and expression
- 64. Def ine colour scheme for si te kuler.adobe.com
- 65. Blurry images as backgrounds
- 66. Accelerators
- 70. COLOURS
- 73. 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
- 76. Typography
- 78. More engaging and compel l ing content
- 79. Dangerous
- 81. Don’t have multiple layers
- 82. Experiment lots
- 85. Do n ’ t u s e mo r e t h a n t h r e e
- 89. Respond to touch EVENTS
- 90. Progress bars – cloudf lare example
- 92. Twi t ter over capaci ty error
- 93. Help users make the right choice in the f i rst place
- 94. Undo.
- 96. Usabi l i ty tests
- 97. 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 ? ”
- 98. Chance to learn. Ask more than you talk. I t ’s l i k e a d a t e
- 99. Other people SPOT mistakes EASIER than the creator.
- 100. “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 ”
- 101. JoinScrapbook.com
- 102. AND FINALLY
- 103. • 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. . . JoinScrapbook.com • Tweet me for sl ides @Ben_Hal l
Editor's Notes
- #43: As children we’re told that corners hurt…
- #44: Steve jobs hated corners
- #48: Sadly no-one told Microsoft
- #66: Enhance other content on your page
- #81: 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
- #89: Giving feedback
- #91: Progress bars are key… make them interactive with a video too
- #92: Error messages should be helpful
- #96: Getting feedback