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 Designs Need To Know About Visual Design

711 views

Published on

Presentation from Oredev 2014, Malmo. Delivered on 5th November 2014

Published in: Design
  • Be the first to like this

What Designs 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. 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. 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
  13. 13. 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
  14. 14. Layout
  15. 15. whi tespace
  16. 16. IF EVERYTHING HAS IT, NOTHING DOES. EMPHASIS
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 1.61803398875
  21. 21. Twi t ter as an app example
  22. 22. Round v square http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/
  23. 23. ”RECENTABLES WITH CORNERS ARE EVERYWHERE!” Steve Jobs
  24. 24. Re a l l i f e i s n ’ t s q u a r e - Road signs
  25. 25. Sharp corners take our focus outside the rectangle
  26. 26. Rounded corners take our focus inside the rectangle
  27. 27. Windows 8
  28. 28. Sketch layouts unt i l natural . Copy / clone to learn & t rain brain.
  29. 29. 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.
  30. 30. Recogni t ion
  31. 31. *REAL LY* imp o r t a n t o n mo b i l e Consistency. What does the user expect?
  32. 32. Spacing and layout mat ters
  33. 33. Great images create Desi re and expression
  34. 34. Stock photography
  35. 35. Stock photography
  36. 36. Def ine colour scheme for si te kuler.adobe.com
  37. 37. Blurry images as backgrounds
  38. 38. Accelerators
  39. 39. Responsive icons?
  40. 40. COLOURS
  41. 41. 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
  42. 42. Typography
  43. 43. More engaging and compel l ing content
  44. 44. Dangerous
  45. 45. http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
  46. 46. Don’t have multiple layers
  47. 47. Experiment lots
  48. 48. Do n ’ t u s e mo r e t h a n t h r e e
  49. 49. Respond to touch EVENTS
  50. 50. Progress bars – cloudf lare example
  51. 51. Twi t ter over capaci ty error
  52. 52. Help users make the right choice in the f i rst place
  53. 53. Undo.
  54. 54. Usabi l i ty tests
  55. 55. 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 ? ”
  56. 56. Chance to learn. Ask more than you talk. I t ’s l i k e a d a t e
  57. 57. Other people SPOT mistakes EASIER than the creator.
  58. 58. “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 ”
  59. 59. JoinScrapbook.com
  60. 60. AND FINALLY
  61. 61. • 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

×