Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

From Flab to Fab! Design Secrets for Overweight Interfaces

5,182 views

Published on

Slides from my IA Summit 2011 talk

Published in: Design

From Flab to Fab! Design Secrets for Overweight Interfaces

  1. 1. Design secrets for  overweight interfaces 
  2. 2. Overweight = high density 
  3. 3. Problems 1.  Lack of space 2.  Too many choices 3.  In6mida6ng 4.  Hard to design 5.  Not sexy 
  4. 4. Design secret #1 
  5. 5. Flickr: Art Comments 
  6. 6. Wireframe from hell 
  7. 7. Don’t let this happen to your interface Flickr: djprybyl 
  8. 8. Out of control 
  9. 9. What’s the use? 
  10. 10. Why love your interface? Because it’s never too late   to improve the outcome 
  11. 11. Design secret #2 
  12. 12. cool/muted  warm/saturated 
  13. 13. Restraint 
  14. 14. Restraint Balance 
  15. 15. Restraint Balance Meaning 
  16. 16. Out of balance 
  17. 17. Color 1.  Neutral base color + 6nts 2.  Strong accent color 3.  Restraint, balance & meaning 
  18. 18. Design secret #3 
  19. 19. Placement 
  20. 20. Placement Contrast 
  21. 21. Focus on tasks 
  22. 22. Why do interfaces lack an anchor? 1.  Unskilled design 2.  Poli6cs 3.  Fallacy of “more is bePer” 4.  Organiza6on lacks focus 
  23. 23. Alan Cooper says: “Logic is wrong.” 
  24. 24. “treasure hunt” 
  25. 25. “hero image” 
  26. 26. Create a strong anchor 1.  Placement & contrast 2.  Tell users what to care about 3.  Don’t design a treasure hunt 
  27. 27. Design secret #4 
  28. 28. The “brick wall” interface 
  29. 29. Boxes are flush 
  30. 30. Light, 1‐pixel rules 
  31. 31. Borderless backgrounds 
  32. 32. Drop shadow boxes 
  33. 33. Horizontal terraces 
  34. 34. Bad  Better Even better
  35. 35. Original 
  36. 36. Vary box styles 
  37. 37. Efficient, but disorganized 
  38. 38. Create terraces 
  39. 39. De‐boxify 1.  Reduce visual noise 2.  Vary box styles 3.  Create horizontal terraces 
  40. 40. Design secret #5 
  41. 41. Inconsistent margins 
  42. 42. Inconsistent bullet styles 
  43. 43. Spacing issues 
  44. 44. Sloppy housekeeping 
  45. 45. S]ck to the grid 
  46. 46. Original 
  47. 47. Make spacing consistent 
  48. 48. Original 
  49. 49. Sweat the details 
  50. 50. Original 
  51. 51. Sweat the details 1.  Details add up 2.  Everything should look inten6onal 
  52. 52. 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 
  53. 53. Good news! 
  54. 54. Here to stay 
  55. 55. Hugs! 
  56. 56. Kim Bieler   @feadog    kim@aptmediainc.com 

×