from flab to fab! design secrets for overweight interfaces

Design secrets for 

overweight interfaces 

Overweight = high density 

1.  Lack of space 2.  Too many choices 3.  In6mida6ng 

4.  Hard to design 5.  Not sexy 

Problems 

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? 

Because it’s never too late  to improve the outcome 

Why love your interface? 

Design secret #2 

cool/muted  warm/saturated 

Restraint 

Restraint 

Balance 

Restraint 

Balance 

Meaning 

Out of balance 

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

Color 

Design secret #3 

Placement 

Contrast 

Placement 

Focus on tasks 

1.  Unskilled design 2.  Poli6cs 3.  Fallacy of “more is bePer” 

4.  Organiza6on lacks focus 

Why do interfaces lack an anchor? 

“Logic is wrong.” 

Alan Cooper says: 

“treasure hunt” 

“hero image” 

1.  Placement & contrast 

2.  Tell users what to care about 3.  Don’t design a treasure hunt 

Create a strong anchor 

Design secret #4 

The “brick wall” interface 

Boxes are flush 

Light, 1‐pixel rules 

Borderless backgrounds 

Drop shadow boxes 

Horizontal terraces 

Bad  Better Even better

Original 

Vary box styles 

Efficient, but disorganized 

Create terraces 

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

De‐boxify 

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 

1.  Details add up 2.  Everything should look inten6onal 

Sweat the details 

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

Pick any combina]on 

Good news! 

Here to stay 

Hugs! 

Kim Bieler   @feadog    kim@aptmediainc.com