Presentation from Oredev 2014, Malmo. Delivered on 5th November 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?

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

59. Stock photography

60. Stock photography

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

65. Blurry images as backgrounds

66. Accelerators

69. Responsive icons?

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

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

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