Learning to think “The Designer

Way”

@Ben_HallBen@BenHall.me.uk

Blog.BenHal l .me.uk

Learning to think “The Designer Way”

@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

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

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 Product!!!

Jo inScrapbook.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