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

1. When less is more:
Tips in minimalist web
design from 30 sites in
45 minutes
Stuart Silverstein
User Experience Consultant

2. What is minimalism?

14. What is the aim of minimalism?

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

16. Minimalist design embraces simplicity.

17. Who can benefit from minimalist design?

18. Any company wishing to emphase design as part of its value proposition:

19. 9 trends in Minimalist web design:

20. Big, luscious imagery

21. 1. suitsupply.com - Unique style for photography
2. lilybalou.be - Minimize navigation size
3. us.vanmoof.com - Full screen background images
4. manufacturedessai.it - Emulate a magazine layout

22. Minimal UI and Ornamentation

23. 5. apple.com - Forked navigiation
6. shopshoeguru.com - Free-floating products
7. shopbop.com - Type for navigation
8. ruelala.com - Content as navigation

24. • BONUS: Fab ipad app - Content as navigation

25. Balanced typography

26. 9. boredofsouthsea.co.uk - Type clarifies calls to action
10. iwc.com - Dynamic type for interest
11. fossil.com - Simple typesetting for clarity

27. Hiding everything

28. 12. nixon.com - Interactive elements for multiple uses
13. uniqlo.com - Scroll to encourage discovery
14. makr.com - Hide labels and text & consoldate your pages

29. Graceful Responsiveness

30. 15. tattly.com - Lack of ornamention makes responsive easier
16. fivesimplesteps.com - Simplicity in grid design creates graceful degradation
17. indochino.com - Big imagery allows you to scale up as well as scale down.

31. Continous Scroll

32. 18. community.saucony.com/kinvara3 - Continous scroll to tell a story
19. bagigia.com - Parallax scroll
20. nike.com/jumpman23/aj2012/- Add physicality

33. Whitespace... without using white

34. 21. us.burberry.com/store - Black
22. nittygrittystore.com - Off white
23. lexingtoncompany.com - Neutrals

35. • BONUS: fossil.com (circa 2012) - brown/wood colors

36. Illustrative flourish

37. 24. shopredvelvet.com - Quirky fonts in minimalist style
25. sassyduck.com.au - Scripty or Hand Lettered type or illustration for key messaging
26. urbanoutfitters.com - Sparce hand drawn backgrounds
27. anthropologie.com - Hand drawn details

38. Horizontal Rhythm

39. 28. tinkeringmonkey.com - Add a full size hero as an anchor
29. quirky.com/shop - Top borders emphasize strips
30. momentskis.com - Use large elements

40. Parting thoughts...
9 Trends
1. big, luscious photography
2. minimal UI and ornamentation
3. balanced typography
4. hide everything
5. graceful responsiveness
6. continous scroll
7. whitepace without using white
8. illustrative flourish
9. horizontal rhythm

41. Thank you!

42. Questions/Comments:
Stuart Silverstein
stuart@stuartsilverstein.com
(818) 763-3256
www.stuartsilverstein.com