what designs need to know about visual design
DESCRIPTION
Presentation from Oredev 2014, Malmo. Delivered on 5th November 2014TRANSCRIPT
![Page 3: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/3.jpg)
Who exactly is Ben Hall?
I am not a designer
Ocelot Uproar
![Page 4: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/4.jpg)
Follow me
and my
drunken activities
@Ben_Hall
![Page 5: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/5.jpg)
Key Topics
1. Layout
2. Images & Icons
3. Colours
4. Typography
5. Feedback
![Page 6: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/6.jpg)
Why design matters?
![Page 7: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/7.jpg)
Attractive things work better
http://www.jnd.org/dn.mss/CH01.pdf
![Page 8: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/8.jpg)
Emotional reaction
http://www.jnd.org/dn.mss/emotion_design_at.html
![Page 9: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/9.jpg)
![Page 10: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/10.jpg)
![Page 11: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/11.jpg)
Preconceived expectations
Op in ion a re f o rmed be fo re we ’ve even rea l i sed
![Page 12: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/12.jpg)
![Page 13: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/13.jpg)
Infl uence & Creditability
![Page 14: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/14.jpg)
![Page 15: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/15.jpg)
![Page 16: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/16.jpg)
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 ”
![Page 17: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/17.jpg)
Design is very similar to code
Pa t te rns , Prac t i ces , He re t i c s , Ru les , Log i c . TDD , Feedback Cyc les .
![Page 18: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/18.jpg)
Junior Designers vs. Senior Designers
ht tps : / /med ium.com/ the -year- o f- the - l ook ing -g lass / j un io r-des igne rs -vs - sen io r-des igne rs -fbe483d3b51e
![Page 19: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/19.jpg)
![Page 20: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/20.jpg)
![Page 21: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/21.jpg)
![Page 22: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/22.jpg)
![Page 23: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/23.jpg)
![Page 24: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/24.jpg)
![Page 25: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/25.jpg)
![Page 26: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/26.jpg)
Layout
![Page 27: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/27.jpg)
whitespace
![Page 28: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/28.jpg)
![Page 29: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/29.jpg)
![Page 30: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/30.jpg)
![Page 31: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/31.jpg)
![Page 32: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/32.jpg)
EMPHASIS
IF EVERYTHING HAS IT, NOTHING DOES.
![Page 33: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/33.jpg)
EmphasisI f eve ry th ing has i t , no th ing does .
![Page 34: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/34.jpg)
EmphasisI f eve ry th ing has i t , no th ing does .
![Page 35: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/35.jpg)
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
![Page 36: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/36.jpg)
1.61803398875
![Page 37: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/37.jpg)
![Page 38: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/38.jpg)
Twitter as an app example
![Page 39: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/39.jpg)
![Page 40: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/40.jpg)
Cognitive science
![Page 41: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/41.jpg)
Round v square
http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/
![Page 42: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/42.jpg)
![Page 43: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/43.jpg)
”RECENTABLES
WITH
CORNERS
ARE
EVERYWHERE!”
Steve Jobs
![Page 44: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/44.jpg)
Real life isn’t square - Road signs
![Page 45: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/45.jpg)
Sharp corners take our focus outside the rectangle
![Page 46: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/46.jpg)
Rounded corners take our focus inside the rectangle
![Page 47: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/47.jpg)
Windows 8
![Page 48: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/48.jpg)
Sketch layouts unti l natural. Copy / clone to learn & train brain.
![Page 49: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/49.jpg)
Images & Icons
Pic ture i s wor th a thousand words .
No one reads on the in ternet so… A good p ic ture i s p r ice less .
![Page 50: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/50.jpg)
Recognition
![Page 51: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/51.jpg)
Consistency. What does the user expect?
*REALLY* impor tan t on mob i l e
![Page 52: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/52.jpg)
![Page 53: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/53.jpg)
Spacing and layout matters
![Page 54: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/54.jpg)
![Page 55: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/55.jpg)
![Page 56: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/56.jpg)
![Page 57: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/57.jpg)
![Page 58: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/58.jpg)
Great images create Desire and expression
![Page 59: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/59.jpg)
Stock photography
![Page 60: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/60.jpg)
Stock photography
![Page 61: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/61.jpg)
![Page 62: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/62.jpg)
![Page 63: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/63.jpg)
![Page 64: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/64.jpg)
Defi ne colour scheme for site
kuler.adobe.com
![Page 65: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/65.jpg)
Blurry images as backgrounds
![Page 66: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/66.jpg)
Accelerators
![Page 67: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/67.jpg)
![Page 68: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/68.jpg)
![Page 69: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/69.jpg)
Responsive icons?
![Page 70: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/70.jpg)
COLOURS
![Page 71: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/71.jpg)
![Page 72: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/72.jpg)
![Page 73: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/73.jpg)
STOP THINKING “RED” AND “ERROR” TO CAPUTRE ATTENTION
WHAT ARE YOU TRY ING TO ACH IEVE?
BUILD PASSED
INFO: DID YOU KNOW…
WARNING: 10 HOURS LEFT
![Page 74: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/74.jpg)
![Page 75: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/75.jpg)
![Page 76: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/76.jpg)
Typography
![Page 77: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/77.jpg)
![Page 78: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/78.jpg)
More engaging and
compelling content
![Page 79: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/79.jpg)
Dangerous
![Page 80: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/80.jpg)
http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
![Page 81: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/81.jpg)
Don’t have multiple layers
![Page 82: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/82.jpg)
Experiment lots
![Page 83: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/83.jpg)
![Page 84: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/84.jpg)
![Page 85: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/85.jpg)
Don’t use more than three
![Page 86: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/86.jpg)
![Page 87: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/87.jpg)
![Page 88: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/88.jpg)
![Page 89: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/89.jpg)
Respond to touch EVENTS
![Page 90: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/90.jpg)
Progress bars – cloudfl are example
![Page 91: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/91.jpg)
![Page 92: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/92.jpg)
Twitter over capacity error
![Page 93: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/93.jpg)
Help users make the right choice in the fi rst place
![Page 94: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/94.jpg)
Undo.
![Page 95: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/95.jpg)
![Page 96: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/96.jpg)
Usability tests
![Page 97: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/97.jpg)
Not asking “do you like this?”
Everyone w i l l say yes ! ! ! Peop le a re awesome.
![Page 98: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/98.jpg)
Chance to l ea rn . Ask more than you ta l k .
I t ’ s l i ke a da te
![Page 99: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/99.jpg)
Other people SPOT mistakes EASIER than the creator.
![Page 100: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/100.jpg)
“Oh yeah, of course, I didn’t notice”
![Page 101: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/101.jpg)
JoinScrapbook.com
![Page 102: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/102.jpg)
AND FINALLY
![Page 103: What Designs Need To Know About Visual Design](https://reader035.vdocuments.us/reader035/viewer/2022070322/5590435e1a28ab354a8b464f/html5/thumbnails/103.jpg)
• Layout, Images, Colours, Typography, Feedback
• Just l ike code… Copy, Test, Iterate, Feedback, Play.
• Sign up to... JoinScrapbook.com
• Tweet me for slides @Ben_Hall