From Flab to Fab! Design Secrets for Overweight Interfaces

5,038 views

Published on

Slides from my IA Summit 2011 talk

Published in: Design
3 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total views
5,038
On SlideShare
0
From Embeds
0
Number of Embeds
161
Actions
Shares
0
Downloads
105
Comments
3
Likes
28
Embeds 0
No embeds

No notes for slide

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 

×