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

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

6. Why design matters?

8. At tract ive things work bet ter
http://www.jnd.org/dn.mss/CH01.pdf

9. Emot ional react ion
http://www.jnd.org/dn.mss/emotion_design_at.html

10. 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

12. Resul t === inf luence /
credi tabi l i ty

15. 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 ”

16. In Startup, everyone should be
a designer

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

25. Layout

26. 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/

27. whi tespace

30. IF EVERYTHING HAS IT,
NOTHING DOES.
EMPHASIS

31. 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

32. 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

33. 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

34. 1.61803398875

36. Twi t ter as an app example

39. Round v square
http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/

41. ”RECENTABLES
WITH
CORNERS
ARE
EVERYWHERE!”
Steve Jobs

42. Re a l l i f e i s n ’ t s q u a r e - Road
signs

43. Sharp corners take our focus
outside the rectangle

44. Rounded corners take our
focus inside the rectangle

45. Windows 8

46. Sketch layouts unt i l natural

47. Copy / clone to learn & train
brain.

48. 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.

49. Recogni t ion

50. *REAL LY* imp o r t a n t o n mo b i l e
?
Consistency. What does the
user expect?

51. Spacing and layout mat ters

55. Great images create Desi re
and expression

56. Stock photography

57. Def ine colour scheme for si te
kuler.adobe.com

58. Blurry images as backgrounds

59. DRIVE USER ATTENTION

60. DRIVE USER ATTENTION

61. Accelerators

64. Opt imise images for download

65. Responsive icons?

66. COLOURS

68. 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

71. 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

72. Typography

73. Massively
creat ive

75. Works of art

76. 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

77. "Typefaces, l ike people, have thei r
own personal i ty" - Core Brand

78. More engaging
and compel l ing
content

79. Looks Bet ter = Works Bet ter.

80. Dangerous

81. http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk

82. http://i.imgur.com/MPSSfXj.jpg

84. Font weight – not just 100-900
https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06

85. WHY IS ALL CAPS
SHOUTING?

86. Experiment lots

89. Do n ’ t u s e mo r e t h a n t h r e e

92. Respond to touch EVENTS

93. Progress bars – cloudf lare
example

95. Help users make the right
choice in the f i rst place

96. Undo.

98. Usabi l i ty tests

99. 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 ? ”

100. Chance to learn.
Ask more than you talk.
I t ’s l i k e a d a t e

102. Other people SPOT mistakes
EASIER than the creator.

103. “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 ”

104. New startup! ! !

105. AND FINALLY

106. • 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