From Flab to Fab! Design Secrets for Overweight Interfaces

Design secrets for overweight interfaces

Overweight = high density

Problems 1.  Lack of space 2.  Too many choices 3.  In6mida6ng 4.  Hard to design 5.  Not sexy

Design secret #1

Flickr: Art Comments

Wireframe from hell

Don’t let this happen to your interface Flickr: djprybyl

Out of control

What’s the use?

Why love your interface? Because it’s never too late to improve the outcome

Design secret #2

cool/muted warm/saturated

Restraint

Restraint Balance

Restraint Balance Meaning

Out of balance

Color 1.  Neutral base color + 6nts 2.  Strong accent color 3.  Restraint, balance & meaning

Design secret #3

Placement

Placement Contrast

Focus on tasks

Why do interfaces lack an anchor? 1.  Unskilled design 2.  Poli6cs 3.  Fallacy of “more is bePer” 4.  Organiza6on lacks focus

Alan Cooper says: “Logic is wrong.”

“treasure hunt”

“hero image”

Create a strong anchor 1.  Placement & contrast 2.  Tell users what to care about 3.  Don’t design a treasure hunt

Design secret #4

The “brick wall” interface

Boxes are ﬂush

Light, 1‐pixel rules

Borderless backgrounds

Drop shadow boxes

Horizontal terraces

Bad Better Even better

Original

Vary box styles

Eﬃcient, but disorganized

Create terraces

De‐boxify 1.  Reduce visual noise 2.  Vary box styles 3.  Create horizontal terraces

Design secret #5

Inconsistent margins

Inconsistent bullet styles

Spacing issues

Sloppy housekeeping

S]ck to the grid

Original

Make spacing consistent

Original

Sweat the details

Original

Sweat the details 1.  Details add up 2.  Everything should look inten6onal

Pick any combina]on 1.  Love your interface 2.  Neutral 6nts, strong accent 3.  Create a strong anchor 4.  De‐boxify 5.  Sweat the details

Good news!

Here to stay

Kim Bieler @feadog kim@aptmediainc.com

http://library.iasummit.org	44
http://kateboardman.me.uk	33
http://speakerrate.com	10
http://elearn3.utm.my	10
http://www.linkedin.com	8
http://elearn2.utm.my	7
http://elearn1.utm.my	4
http://sprmario.posterous.com	4
http://www.slideshare.net	2
https://p.yammer.com	2
http://paper.li	1
url_unknown	1
http://twitter.com	1

From Flab to Fab! Design Secrets for Overweight Interfaces

by Kim Bieler

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 127

Statistics