trends in minimalist e-commerce design
DESCRIPTION
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 2013TRANSCRIPT
When less is more: Tips in minimalist web design from 30 sites in 45 minutes
Stuart SilversteinUser Experience Consultant
What is minimalism?
What is the aim of minimalism?
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...
Minimalist design embraces simplicity.
Who can benefit from minimalist design?
Any company wishing to emphase design as part of its value proposition:
9 trends in Minimalist web design:
Big, luscious imagery
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
Minimal UI and Ornamentation
5. apple.com - Forked navigiation
6. shopshoeguru.com - Free-floating products
7. shopbop.com - Type for navigation
8. ruelala.com - Content as navigation
• BONUS: Fab ipad app - Content as navigation
Balanced typography
9. boredofsouthsea.co.uk - Type clarifies calls to action
10. iwc.com - Dynamic type for interest
11. fossil.com - Simple typesetting for clarity
Hiding everything
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
Graceful Responsiveness
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.
Continous Scroll
18. community.saucony.com/kinvara3 - Continous scroll to tell a story
19. bagigia.com - Parallax scroll
20. nike.com/jumpman23/aj2012/- Add physicality
Whitespace... without using white
21. us.burberry.com/store - Black
22. nittygrittystore.com - Off white
23. lexingtoncompany.com - Neutrals
• BONUS: fossil.com (circa 2012) - brown/wood colors
Illustrative flourish
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
Horizontal Rhythm
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
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
Thank you!
