What Developers Need To Know

About Visual Design

@Ben_HallBen@BenHall.me.uk

Blog.BenHal l .me.uk

What Developers Need To Know

About Visual Design

@Ben_Hall

Ben@BenHall.me.uk

Blog.BenHall.me.uk

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

@Ben_Hall

Ben@BenHall.me.uk

Blog.BenHall.me.uk