Slides from my IA Summit 2011 talk

1. Design secrets for
overweight interfaces

2. Overweight = high density

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

6. Design secret #1

8. Flickr: Art Comments

10. Wireframe from hell

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

12. Out of control

13. What’s the use?

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

15. Design secret #2

25. cool/muted warm/saturated

26. Restraint

27. Restraint
Balance

28. Restraint
Balance
Meaning

29. Out of balance

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

38. Design secret #3

47. Placement

48. Placement
Contrast

52. Focus on tasks

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

59. Alan Cooper says:
“Logic is wrong.”

60. “treasure hunt”

62. “hero image”

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

65. Design secret #4

66. The “brick wall” interface

70. Boxes are flush

71. Light, 1‐pixel rules

72. Borderless backgrounds

73. Drop shadow boxes

74. Horizontal terraces

75. Bad Better Even better

79. Original

83. Vary box styles

86. Efficient, but disorganized

87. Create terraces

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

92. Design secret #5

94. Inconsistent margins

95. Inconsistent bullet styles

96. Spacing issues

97. Sloppy housekeeping

106. S]ck to the grid

107. Original

109. Make spacing consistent

110. Original

112. Sweat the details

113. Original

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

118. 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

119. Good news!

120. Here to stay

121. Hugs!

122. Kim Bieler @feadog kim@aptmediainc.com