Trends in minimalist e-Commerce design

  • 1,427 views
Uploaded 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 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,427
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
26
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. When less is more: Tips in minimalist web design from 30 sites in 45 minutesStuart SilversteinUser Experience Consultant
  • 2. What is minimalism?
  • 3. What is the aim of minimalism?
  • 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. Minimalist design embraces simplicity.
  • 6. Who can benefit from minimalist design?
  • 7. Any company wishing to emphase design as part of its value proposition:
  • 8. 9 trends in Minimalist web design:
  • 9. Big, luscious imagery
  • 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. Minimal UI and Ornamentation
  • 12. 5. apple.com - Forked navigiation6. shopshoeguru.com - Free-floating products7. shopbop.com - Type for navigation8. ruelala.com - Content as navigation
  • 13. • BONUS: Fab ipad app - Content as navigation
  • 14. Balanced typography
  • 15. 9. boredofsouthsea.co.uk - Type clarifies calls to action10. iwc.com - Dynamic type for interest11. fossil.com - Simple typesetting for clarity
  • 16. Hiding everything
  • 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. Graceful Responsiveness
  • 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. Continous Scroll
  • 21. 18. community.saucony.com/kinvara3 - Continous scroll to tell a story19. bagigia.com - Parallax scroll20. nike.com/jumpman23/aj2012/- Add physicality
  • 22. Whitespace... without using white
  • 23. 21. us.burberry.com/store - Black22. nittygrittystore.com - Off white23. lexingtoncompany.com - Neutrals
  • 24. • BONUS: fossil.com (circa 2012) - brown/wood colors
  • 25. Illustrative flourish
  • 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. Horizontal Rhythm
  • 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. 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. Thank you!
  • 31. Questions/Comments:Stuart Silversteinstuart@stuartsilverstein.com(818) 763-3256www.stuartsilverstein.com