Trends in minimalist e-Commerce design

5,367 views

Published on

A survey and short history of minimalism and its impact on current e-Commerce design trends. 9 trends and 30 website samples that do it right. presented at the Internet Retailer Web Design and Usability Conference 2013

Published in: Technology

Trends in minimalist e-Commerce design

  1. 1. When less is more: Tips in minimalist web design from 30 sites in 45 minutesStuart SilversteinUser Experience Consultant
  2. 2. What is minimalism?
  3. 3. What is the aim of minimalism?
  4. 4. Minimalist design: • helps you and your users focus only on what is important by removing all distraction • gives your users a feeling of relaxation & space • maximizes impact by removing all extraneous elements • connects with an emotional desire • uses space and geometry to instruct and guide users • engages users by making them think • creates the sensation of value • but most of all...
  5. 5. Minimalist design embraces simplicity.
  6. 6. Who can benefit from minimalist design?
  7. 7. Any company wishing to emphase design as part of its value proposition:
  8. 8. 9 trends in Minimalist web design:
  9. 9. Big, luscious imagery
  10. 10. 1. suitsupply.com - Unique style for photography2. lilybalou.be - Minimize navigation size3. us.vanmoof.com - Full screen background images4. manufacturedessai.it - Emulate a magazine layout
  11. 11. Minimal UI and Ornamentation
  12. 12. 5. apple.com - Forked navigiation6. shopshoeguru.com - Free-floating products7. shopbop.com - Type for navigation8. ruelala.com - Content as navigation
  13. 13. • BONUS: Fab ipad app - Content as navigation
  14. 14. Balanced typography
  15. 15. 9. boredofsouthsea.co.uk - Type clarifies calls to action10. iwc.com - Dynamic type for interest11. fossil.com - Simple typesetting for clarity
  16. 16. Hiding everything
  17. 17. 12. nixon.com - Interactive elements for multiple uses13. uniqlo.com - Scroll to encourage discovery14. makr.com - Hide labels and text & consoldate your pages
  18. 18. Graceful Responsiveness
  19. 19. 15. tattly.com - Lack of ornamention makes responsive easier16. fivesimplesteps.com - Simplicity in grid design creates graceful degradation17. indochino.com - Big imagery allows you to scale up as well as scale down.
  20. 20. Continous Scroll
  21. 21. 18. community.saucony.com/kinvara3 - Continous scroll to tell a story19. bagigia.com - Parallax scroll20. nike.com/jumpman23/aj2012/- Add physicality
  22. 22. Whitespace... without using white
  23. 23. 21. us.burberry.com/store - Black22. nittygrittystore.com - Off white23. lexingtoncompany.com - Neutrals
  24. 24. • BONUS: fossil.com (circa 2012) - brown/wood colors
  25. 25. Illustrative flourish
  26. 26. 24. shopredvelvet.com - Quirky fonts in minimalist style25. sassyduck.com.au - Scripty or Hand Lettered type or illustration for key messaging26. urbanoutfitters.com - Sparce hand drawn backgrounds27. anthropologie.com - Hand drawn details
  27. 27. Horizontal Rhythm
  28. 28. 28. tinkeringmonkey.com - Add a full size hero as an anchor29. quirky.com/shop - Top borders emphasize strips30. momentskis.com - Use large elements
  29. 29. Parting thoughts...9 Trends1. big, luscious photography2. minimal UI and ornamentation3. balanced typography4. hide everything5. graceful responsiveness6. continous scroll7. whitepace without using white8. illustrative flourish9. horizontal rhythm
  30. 30. Thank you!
  31. 31. Questions/Comments:Stuart Silversteinstuart@stuartsilverstein.com(818) 763-3256www.stuartsilverstein.com

×