Embed Size (px)
DESCRIPTION
Presentation from Oredev 2014, Malmo. Delivered on 5th November 2014
Citation preview
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
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 ”
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
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 unti l 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
Stock photography
Defi ne colour scheme for site
kuler.adobe.com
Blurry images as backgrounds
Accelerators
Responsive icons?
COLOURS
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
More engaging and
compelling content
Dangerous
http://www.buzzfeed.com/hnigatu/the-difference-between-serif-and-sans-serif-explained-in-one#2fnobkk
Don’t have multiple layers
Experiment lots
Don’t use more than three
Respond to touch EVENTS
Progress bars – cloudfl are example
Twitter over capacity error
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”
JoinScrapbook.com
AND FINALLY
• 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
![What You Need to Know About Paid Search [Visual Summary]](https://img.pdfslide.us/doc/110x75/55d54557bb61eb6d588b45fe/what-you-need-to-know-about-paid-search-visual-summary.jpg)
