What Developers Need To Know About Visual Design
107
description
Presentation from DDDEA, Cambridge delivered on 13th September 2014.
Transcript of What Developers Need To Know About Visual Design
Who exactly is Ben Hall?
I am not a designer
Ocelot Uproar
Follow me
and my
drunken activities
@Ben_Hall
Key Topics
1. Layout
2. Images & Icons
3. Colours
4. Typography
5. Feedback
Why design matters?
Attractive things work better
http://www.jnd.org/dn.mss/CH01.pdf
Emotional reaction
http://www.jnd.org/dn.mss/emotion_design_at.html
Preconceived expectations
Op in ion a re f o rmed be fo re we ’ve even rea l i sed
Result === infl uence / creditability
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 ”
In Startup, everyone should be a designer
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 .
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
Layout
http://blog.usabilla.com/how-the-left-brain-right-brain-theory-improves-the-user-experience/
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
whitespace
EMPHASIS
IF EVERYTHING HAS IT, NOTHING DOES.
EmphasisI f eve ry th ing has i t , no th ing does .
EmphasisI f eve ry th ing has i t , no th ing does .
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
1.61803398875
Twitter as an app example
Cognitive science
Round v square
http://blog.benhall.me.uk/2014/05/why-do-round-avatars-look-better-than-square/
”RECENTABLES
WITH
CORNERS
ARE
EVERYWHERE!”
Steve Jobs
Real life isn’t square - Road signs
Sharp corners take our focus outside the rectangle
Rounded corners take our focus inside the rectangle
Windows 8
Sketch layouts until natural
Copy / clone to learn & train brain.
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 .
Recognition
Consistency. What does the user expect?
*REALLY* impor tan t on mob i l e
?
Spacing and layout matters
Great images create Desire and expression
Stock photography
Defi ne colour scheme for site
kuler.adobe.com
Blurry images as backgrounds
DRIVE USER ATTENTION
DRIVE USER ATTENTION
Accelerators
Optimise images for download
Responsive icons?
COLOURS
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
Complementary color scheme Analogous color scheme
Triadic color scheme Split-Complementary color scheme
Rectangle (tetradic) color scheme Square color scheme
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
Typography
Massively creative
Works of art
" In some ways , the most d iffi cu l t par t o f des ign p rocess i s fi nd ing the in i t i a l i nsp i ra t ion to make a fon t " ~ Karen Cheng
Most impor tan t aspec t o f des ign
"Typefaces, l ike people, have their own personality" - Core Brand
More engaging and
compelling content
Looks Better = Works Better.
Dangerous
http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
http://i.imgur.com/MPSSfXj.jpg
Font weight – not just 100-900
https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
WHY IS ALL CAPS SHOUTING?
Experiment lots
Don’t use more than three
Respond to touch EVENTS
Progress bars – cloudfl are example
Help users make the right choice in the fi rst place
Undo.
Usability tests
Not asking “do you like this?”
Everyone w i l l say yes ! ! ! Peop le a re awesome.
Chance to l ea rn . Ask more than you ta l k .
I t ’ s l i ke a da te
Other people SPOT mistakes EASIER than the creator.
“Oh yeah, of course, I didn’t notice”
New startup!!!
AND FINALLY
• Layout, Images, Colours, Typography, Feedback
• Just l ike code… Copy, Test, Iterate, Feedback, Play.
• Sign up to... TBC. Ask me.
• Tweet me for slides @Ben_Hall
