From Flab to Fab! Design Secrets for Overweight Interfaces

Download From Flab to Fab! Design Secrets for Overweight Interfaces

Post on 01-Jul-2015

4.317 views

Category:

Design

2 download

DESCRIPTION

Slides from my IA Summit 2011 talk

TRANSCRIPT

  • 1. Designsecretsforoverweightinterfaces

2. Overweight=highdensity 3. Problems1. Lackofspace2. Toomanychoices3. In6mida6ng4. Hardtodesign5. Notsexy 4. Designsecret#1 5. Flickr:ArtComments 6. Wireframefromhell 7. DontletthishappentoyourinterfaceFlickr:djprybyl 8. Outofcontrol 9. Whatstheuse? 10. Whyloveyourinterface?Becauseitsnevertoolate toimprovetheoutcome 11. Designsecret#2 12. cool/muted warm/saturated 13. Restraint 14. RestraintBalance 15. RestraintBalanceMeaning 16. Outofbalance 17. Color1. Neutralbasecolor+6nts2. Strongaccentcolor3. Restraint,balance&meaning 18. Designsecret#3 19. Placement 20. PlacementContrast 21. Focusontasks 22. Whydointerfaceslackananchor?1. Unskilleddesign2. Poli6cs3. FallacyofmoreisbePer4. Organiza6onlacksfocus 23. AlanCoopersays:Logiciswrong. 24. treasurehunt 25. heroimage 26. Createastronganchor1. Placement&contrast2. Telluserswhattocareabout3. Dontdesignatreasurehunt 27. Designsecret#4 28. Thebrickwallinterface 29. Boxesareush 30. Light,1pixelrules 31. Borderlessbackgrounds 32. Dropshadowboxes 33. Horizontalterraces 34. Bad Better Even better 35. Original 36. Varyboxstyles 37. Ecient,butdisorganized 38. Createterraces 39. Deboxify1. Reducevisualnoise2. Varyboxstyles3. Createhorizontalterraces 40. Designsecret#5 41. Inconsistentmargins 42. Inconsistentbulletstyles 43. Spacingissues 44. Sloppyhousekeeping 45. S]cktothegrid 46. Original 47. Makespacingconsistent 48. Original 49. Sweatthedetails 50. Original 51. Sweatthedetails1. Detailsaddup2. Everythingshouldlookinten6onal 52. Pickanycombina]on1. Loveyourinterface2. Neutral6nts,strongaccent3. Createastronganchor4. Deboxify5. Sweatthedetails 53. Goodnews! 54. Heretostay 55. Hugs! 56. KimBieler@feadogkim@aptmediainc.com