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 [email protected]
