Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Showcase of Beautiful (or Creative) E-Commerce Websites

Designers are constantly striving to create eye-catching designs without losing the usability features that add significant importance to the experience of online shopping. Today’s showcase presents a variety of websites with elegant design solutions and innovative design techniques. We have analyzed the designs and now discuss their advantages and disadvantages in this review. [Updated March/15/2017]

We also suggest improvements and further ideas that could help improve shopping experience on these sites. Hopefully, you can learn something useful from our thoughts.

Further Reading on SmashingMag: Link

With clothing inspired by ’50s and ’60s fashion, pin-up girls and vintage culture, Heartbreaker’s design nicely fits the company’s profile, with its pastels and retro textures. Good use of dotted and dashed borders, which separate the various elements rather delicately. Notice how well the designers keep the vintage theme across the product and category pages, with nice attention to detail for the credit card icons in the footer.

Hunter’s Wines is an online wine store. The front page introduces some dynamics in its grid by placing text blocks next to each other in a somewhat chaotic manner. Notice how well the design separates sections of the pages by using yellow color in the background of the wine bottles. Product pages contain an interactive, sophisticated search filter, backed by a pastel color scheme and beautiful typography that nicely fits the overall feel of the site. The color of the text on call-to-action buttons could be improved.

Also, we have doubts about some elements on the page. A symbol under the wine bottles doesn’t really have any purpose and the arrow in the right upper corner of sections in product pages doesn’t seem to work properly. Overall, a very nice design which could use just a bit of rethinking to improve the shopping experience.

Sassy Duck is a young fashion-forward handbag brand that creates luscious accessories for the modern woman. This website literally elicits a hunger for those female accessories. Again, large product photography is striking on the website, trying to evoke an emotional response from the site’s visitors. It’s interesting that the overview pages do not contain prices — they are displayed only once the visitor hovers over the product image. The call-to-action buttons could use some :hover, :focus and :active states to make the buttons a bit more responsive. The horizontal product navigation pans across as the mouse nears the edge of the page. A nice example of how an e-commerce website can work with a minimal amount of text.

Probably the most eye-catching detail in Telegramme Studio’s design is vivid, high-resolution product typograrphy displayed in the horizontal slideshow in the upper area of the front page. The slideshow might be moving a bit too quickly for some visitors. The grid remains consistent across the pages, always focusing on the designs produced by the agency. A nice example of a site on which high quality product shots are integral to each page.

Oi Polloi is small retail store based in the Northern Quarter, Manchester, UK. This website design is (again) in retro style, supported by the typewriter-style typograph and old print-style textures. They capture the Oi Polloi brand well. The navigation menu is a good old drop-down which doesn’t quite work, especially because the page has six of them on top. This requires a bit more clicks than you’re used to on an e-commerce website. When you roll over an item on a product page, a tooltip provides details about available (and unavailable) colours and sizes. It might be useful including these options in the search as well.

A Modern Eden sells posters and iPhone applications. The design also features a large horizontal slideshow area on which all illustrations have a nice shadow to make them look a bit more realistic. The fonts used are chosen carefully and used consistenly throughout the design. The shopping basket ribbon placed next to the main navigation in the right upper corner is a nice touch. Product pages are nicely designed, with attractive green call-to-action buttons. It’s interesting how the designers display the price tag: it’s put somewhat above the product item’s title with a red circle in the background.

Sky’s Guide is a wonderful example of what a service website can look like with a quality set of textures and images. The choice of colors for design elements and body copy nicely complements the theme of the website and logo of the company (dark red and light brown). Call-to-action buttons are carefully designed to stand out against other elements and capture the user’s attention.

Notice a simple yet striking grid in the footer and a consistent use of fonts across the site. However, the site misses subtle hover effects to make the experience a bit more responsive. The font size of some texts on the site could be increased as well.

Patrik Ervell demonstrates innovation at its finest. Category pages present a Flash video of the clothes being modelled on an actual male model, giving the customer a sense for how the clothing would actually look on them. The website also gracefully degrades to static images for browsers without Flash support. A very interesting take on the modern clothing website, and good use of white space. Unfortunately, the product page does not have a Flash video, although it might be a bit annoying if it did. The typography could be improved a bit to make the texts more readable and more pleasing to read.

Designer fashion outlet Matthew Williamson demonstrates good use of fonts, contrast and high-quality images. The product pages allow users to zoom in and out to take a closer look at the shop items. Also, the product page provides a size guide, a delivery guide, a return guide for customers as well as comprehensive product details. The website does not feel particularly dynamic, though; the sidebar navigation has to reanimate after each page load. The splash page isn’t necessary, either. An example of how beautiful imagery doesn’t quite work when overall usability of the website isn’t good enough.

The Paul Smith website has an elegant design that emphasizes the quality of the brand. There is something quite appealing about the simple navigation at the top, especially the logo and colored horizontal stripes. The main shop page has a bottom-top navigation (instead of the traditional drop-down) which is not quite intuitive at the first glance. What is striking is that each product page has plenty of high-quality product images which is unfortunately not that usual on e-commerce websites.

Chicago L-Shirts is big and bold on Helvetica and the dark processed vintage illustrations. The website is unique and hits you straight away with the featured product on sale, which fills the entire background. What’s interesting is that the shop doesn’t really have an overview page on which all t-shirts would be presented. Instead, the visitor has to navigate using “Prev” and “Next” links. And actually, it works quite well, because there are not so many t-shirts to browse through. A nice example of a shop which makes sure that every product page has a strong photographic presence. Unfortunately, arrows in the navigation aren’t clickable and different views (e.g. side view) of every t-shirt isn’t available.

WK Studio sells various stationary, t-shirts and children’s clothing. The color scheme is warm and friendly, and so is the stylish navigation and large product previews. Built on the BigCartel shopping cart, the shopping experience is pleasurable for a small store. Notice the lovely price tags shaped in the form of the heart which is an essential part of the studio’s logo. The color and typography of the body copy could be improved, and so could the typography. Very simple design that doesn’t look too simple because of the very well thought-out style and theme of the site.

Probably the most striking attribute of this website is its playfulness. The typography is inviting and attractive and makes the reading experience pleasurable. The navigation menu on the top is very simple, but nice; subtle use of texture fits nicely to the style of the website. Also, notice the dashed horizontal line on the top and the decorative ellipses spinned in the footer of the page. When you hover on an item on the products overview page, two additional navigation options appear: “More info” and “+ Cart” which is a nice example of a context-sensitive navigation. Great use of subtle colors, textures and bold fonts bring out the tastiness of the freshly baked bread and confectioneries offered at Marie Catrib’s.

The landing page for Sanctuary T really helps to sell the brand and welcome customers. Best-selling teas are beautifully listed underneath the large eye-catching slideshow. New products are introduced using striking, pleasing and eye-catching illustrations. The site uses many colors (7 on the front page), and although they do fight for user’s attention, they actually never really get in the way. The typography is pleasant and inviting, however, mostly images are used to embed the fonts on the pages (and sometimes, Cufón is used). Notice how wonderfully the designers use tea cups to display the rating of every tea. Sanctuary T is a prime example of a website that brings the best out of square-edge elements and white space dividers.

There is certainly a lot to like about this website: the blended shades of blues, contrasting orange highlights, delicately patterned borders (complemented with an equally elegant choice of typography) and the subtle shadows on the roll-over navigation tabs. The design shows a lot of attention to small details, be it texture in the background or a “telephone” icon in the footer which works very well with the style of the site. The mega drop-down menu looks nice and stands out on hover. The page has a lot of whitespace, especially on overview pages and product pages and makes the shopping experience lightweight and easy.

Grenson is exemplary for a very strong and consistent grid layout. The design is accentuated with red highlights. The most striking element of the website is the roll-over product previews on single product pages, which automatically zooms in and pans to wherever the mouse is. It’s quite a nice touch and removes the extra clicks required to zoom and pan. A clean and good design without distractions and unnecessary trickery.

Cow&Co demonstrates good use of interactive elements in the filtered navigation to make page selection a little more interesting. Adding items to the basket is quick and easy, and a lot of the navigation occurs without having to reload the page. The designers of the shop do not highlight “Add to basket” buttons, although it would actually make it just a bit easier if the buttons would stand out a bit more. The interesting part is that when you click on a product image on the overview page, the details are displayed on the right, without the page being reloaded. It’s hard to say if it’s a good idea or not: this behvaior might be a bit confusing for visitors who wouldn’t be able to locate the detail page. It would be useful to highlight it in some way when it appears after the click, though.

Dark Sky’s website shows how dots can be used to build and structure the layout of the page. The typography is just wonderful: attractive, yet not too eye-catching to distract. Notice the whitespace in the vertical grid layout and on the product pages. Call-to-action-buttons have the same background color as many other elements on the page which may be a bit confusing at first. However, other colors probably wouldn’t work that well together with other elements.

By itself, RFRM would be a very simple and not that remarkable website with handmade, vintage inspired jewelry. What sets this online shop apart from other sites is that the centrepiece of the website is the large window, or “hole,” that exposes the background layer image below. When you scroll the website, it feels like you’re looking out of the window — which looks very interesting and unusual.

This website doesn’t look remarkable, but it uses a nice design technique that helps it stand out. Each product page has a large seamless header that creates a large frame for the product. This allows for large product shots of background images that can be used on each page. Interesting idea that may find its place in your e-commerce website as well. The downside of the design is the not so comforable navigation: all navigation items are always hidden in the horizontal navigation on the top of every page.

This website of an upcoming app for iPhone or iPod touch has been discussed a lot over the last months, and rightly so. The site is a remarkable example of how an original, innovative design can bring a lot of attention to the site that actually hasn’t been released yet. As you scroll the page down, Ben the Bodyguard is following you through the city, leaving comments about the neighbourhood and services he provides. There are also some tricks which become apparent if you try resizing your browser. Ben’s path ends at the e-mail subscription box. Wonderful idea, wonderfully executed. A wonderful example of storytelling. The Web could use more websites like this one.

In Conclusion Link

It goes without saying: large high quality product shots are a key element of success on e-commerce websites. JavaScript-based image slideshows of products, elegant rich typography and meaningful use of white space all enhance the shopping experience and increase conversion rates.

Some good websites experiment with innovative design techniques, yet all good websites pay a lot of attention to the look and feel of every single design element, be it a shopping cart, search box or headings. We are looking forward to more beautiful and usable e-commerce websites appearing online in the months to come.

Further Reading Link

(al) (vf) (ik)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6

↑ Back to top Tweet itShare on Facebook

Scotty Vernon is a creative designer with 7 year's experience; a geek, massive digital junkie, music lover and social media fanatic. I love great design, funky interface animations, and cutting edge technology and get easily excited about anything that combines all three! You can follow me on Twitter.

  1. 1

    I love the Ben the Bodyguard site, its a true example of where the future of web design should be headed, quality. Great collection of E-Commerce Websites though, nice post.

  2. 2

    The examples are all definitely well designed, but to be honest what makes them stand out is the impressive photography. These minimilist styles depend so heavily on the photography that they would actually look like just an average wordpress theme without it.

    • 3

      I totally agree.

      There is never enough credit given to the photographers who make sites like these shine. Plus, many clients simply can’t afford professional quality photography, or would rather put what cash they do have toward enhanced functionality. Increasingly, clients are looking for sites they can update themselves, which often means photography that can’t support this type of design.

      Don’t get me wrong, I love this type of design/art direction, and when it can be supported with the right photography it’s fantastic, but I would be more impressed to see designs that did great things with thin budgets, or with a client’s amateur photography.

      • 4

        I totally agree. My first Ecommerce site looked fantastic with the products photographed professionally and the backgrounds matching the style and colour scheme of the site.

        After a couple of weeks of the client taking photos of his products propped up against a cardboard box, held at arms length or against the side of a tank (it is a military spares shop) the design started to look a little less impressive. ;-)

        High quality product photography is key to a retail site.

  3. 5

    Very good looking and effective designs. Ben the Bodyguard website looks great and very different. Love this concept.

  4. 6

    Great looking eCommerce websites, but I doubt the conversion rates are great for some of them. Being “different” and “unique” in eCommerce = fewer sales (generally).

  5. 7

    Personally, I’d like to shoot myself with a bow and arrow when I try scrolling in Oi Polloi’s brand navigation menu.

    • 8

      Not only is your comment generally unhelpful (what is wrong about it – be critical but be fair), but the whole concept of shooting yourself with a bow and arrow would require some impressive arm length and dexterity.

      • 9

        Dear Mr. Ward,

        First of all, I would like to extend my utmost apologies if I have offended you in any way.

        I am sad to say that I had forgotten about the uptight and generally unhumorous way commenting should be made on Smashing. Thanks for reminding me of this, and thanks for reminding me of why I stopped coming here in the first place. Big help!

        Also, thank you again for pointing out how shooting oneself with a bow and arrow is hard. That was not at all the intended meaning of it. I am now well aware of the fact that it is more or less impossible to do that. Silly me.

        The fact remains though. Oi Polloi’s brand drop-down menu is just that, a drop-down menu. With a scrollbar. And we all know what scrollbars are for, don’t we? Scrolling! Of course! And what does nearly every computer mouse and laptop trackpad in existence currently have? A scrolling mechanism. Included so you don’t actually have to reach for that draggable block or arrow to move up and down lists.

        Another serious usability miss with Oi Polloi’s scrollbar is, that like in 95% of all other scrollbars, you actually can’t click in a “void” to jump to the position. But who needs that, right? It’s simpler to relearn peoples habits and make them drag the draggabe block! It’s named draggable for a reason, right?

        Now, I am well aware of this comment being totally boring and really not that funny. I am probably the only one laughing when I think of it. But I really, really, do hope Vitaly and Sven will commend you in some way for your comment. It is people like you who drives such a thriving and expanding community forward.

        Yours forever,


  6. 10

    Thanks for the article

    I noticed that when I visited the cow&co site, as I scrolled down the page I thought to myself ‘this is a nice layout – man it would be cool if it just kept scrolling’. Then as I reached the bottom, the page automatically created more page content to scroll through…

    I like when that happens.

  7. 11

    Excellent work with high quality photography, I may note. Many people think great design but crap photography works and they are mistaken.

    Excellent post.

  8. 12

    Some feedback regarding this article

    – Telegramme Studio

    When a product is purchased it take the user redirected to another tab which shows the the PayPal page and there is no option for the user to continue shopping . If the user wishes to add another product to the cart then each product does not get added to the existing order placed.

    The site make be top trumps on the creative aspects and design ,but it falters on the shopping cart functionality.

    – Oi polloi

    -The Share this function could have been done better . The drop down overlaps with the site in the background

    -The mouse over images in the product gallery are not consistent and need to all display the same image

    -The inner pages i.e. shipping,FAQ’s, contact , feedback all look like dumps from wordpad . Very unattractive . Looks like all the creative juice got spend on the other pages and this must have been done in the 11th hour.

    I haven’t reviewed all the sites yet so more comments will follow

  9. 13

    Jesse Stewart

    January 25, 2011 9:42 pm

    Thank you Smashing Magazine for the feature. I’m the desiger that did Heartbreaker Fashion. I’m glad you liked it!

  10. 14

    Further comments

    * Patrick Ervell

    – Very nice flash header to show categories, but why is the male model not smiling?

    – Zoom in function – Image is blurry

    * W+ K studio

    – syntax Error while adding product to the cart . Same problem with adding products to cart . PayPal integration needs to be changes to match Chicago l shirts process.

  11. 15

    @Smashing Magazine : thanks for the great articles
    @Chiles: no need for you to comment about the sites since this article talks about how creative the design is.
    More credits to the photographer for very stunning photos.

    • 16

      @Kim – Its just my observation . If you are the admin of these sites take notes, otherwise go powder your nose

  12. 17

    Some of these websites built by Magento. Surprisingly the designers made it look like unMagento. Wow. Nice post.

  13. 18

    Jeroen Marechal

    January 26, 2011 3:16 am

    Nice list! This one is also worth mentioning –

  14. 19

    Glad to see Heartbreaker Fashion mentioned. They used Magento. The site looks really nice. I wonder if any of these were made using Drupal + Ubercart.

  15. 20

    No full flash solutions :(

  16. 21

    DazzleCat Digital Agency

    January 26, 2011 7:45 am

    I wasn’t aware of the Ben the bodyguard website..very effective… selling you something without you even realising

  17. 22

    I love many of them, great collection! thanks!

  18. 23

    That is a truly well-designed website. Love it !
    Can you keep me updated ?

  19. 24

    Kemal Delalić

    January 26, 2011 4:25 pm

    I just love how Ben the Bodyguard tells the story while converting visitors to clients, so epic!

  20. 25

    I think this is a great collection of beautiful/creative eComm sites, just like the posts says they are.

    I would add the caveat that they are very specialized sites. Most of these sites a.) appeal to a particularly young, hip, artsy, web-saavy demographic, b.) have a very limited number of products, and/or c.) don’t use industry standards (such as prominent calls to actions, displaying prices, using Flash, etc.).

    Going against the grain can be a good thing – and makes for a much ‘prettier’ site – but most eComm owners I know mainly care about performance. I’m not saying that all of these sites don’t convert, but I bet most of them aren’t converting as well as they could be.

  21. 26

    Patent Application

    January 27, 2011 12:51 am

    Here is the list of 10 awesome websites

    Ecto Machine
    Sprout Box
    Nicolas Will
    Hugs For Monster
    The Toke
    Creative People

  22. 27

    What font is in the “COW TEMPLATE” in the logo and he “C IS FOR COW ?”

  23. 28

    Thanks for sharing this post.I like this post.It contains good examples of showcase of beautiful and fresh ecommerce websites.

  24. 29

    Loving the clothes store with the .swf’s to classify the categories! Very Clever stuff! It’s nice to see some interactivity in Ecom stores, getting a tad bored of the generic static pages!

    Great post as usual, keep up the good work!

  25. 30

    Nice post, I especially like the design of Heartbreaker fashion (being a Magento store) and the integration of the category and product page on Sassy Duck and Hunter Wines.

  26. 32

    The websites featured here looks great! Personally, I find setting up an ecommerce website to be really time-consuming. There are a lot to be done on the back-end. I think I’ll stick with wordpress and shopperpress for now. You still need to set it up but I find it easier than say, Zen-cart.

  27. 33

    I find this e-commerce website to be clean, easy to navigate and very creatively uses the shopping cart. I believe it’s made with Drupal. Designed by Madis from addventures on the east coast. Simple is good.

  28. 34

    A great selection of beautiful designs. There are however some usability and UX issues on several of these great sites, that would make a normal consumer leave and abort the website.

    For example the Grenson website, although very clean and great photography, I could not find any size 13. The advanced search feature did not give that option and after looking at 5 shoes, of which none had my size, I got frustrated and left the site.

    I know we are discussing design here, but Usability and Conversions should always be kept in mind.

  29. 35

    Very nice designs! Thanks for posting!

  30. 36

    Francis Thibault

    January 31, 2011 5:51 am

    I’d like to add Check their specific tea page. very well done

  31. 37

    Activo / Ron Peled

    January 31, 2011 9:48 am

    In most of these websites, the aesthetics comes from the pictures as much as it does from the details of the actual templates of the eCommerce websites. That is why a good designer with overall sense of balance is what makes a website stand out. Good list of websites, I particularly loved the first one with the 50’s-60’s style. Awesome!

  32. 38

    Nice list of ecommerce sites. Truly inspirational to make typical boring ecommerce site to a nice attractive design.

  33. 39


    February 1, 2011 4:22 am

    Lovely work – I’d be interested to read some more in depth case studies on a couple of these sites on how they balanced functionality of the site with integration of the ecommerce and why they chose they ecom solution

  34. 40

    I just LOVE the Heartbreaker Fashion Website design, it’s so girlish!

  35. 41

    So, here I am, checking out design and layout, colors ect.. then BAM! I get sucked in by GRENSON shoes. My new fav’s, MUST HAVE’s.

  36. 42

    Lol @ oipolloi.

    The fact that people would actually ‘like’ a facebook page in an attempt to win a £50 gift voucher goes a long way to illustrating the very sad and sorry state of society today.

  37. 43

    Nice collection of designs here.

    We recently launched a unique and creative way to shop for gifts online:

    I’d be really interested to hear anyone’s feedback on the design and usability of our site.

  38. 44

    who designed the Hunter’s Wines website.
    it would be nice if you credited the designers in an article like this

  39. 45

    Abnormally well written piece

  40. 46

    Very Creative websites showcase in fact.

  41. 47

    Totally agree!

  42. 48

    It goes without saying: large high quality product shots are a key element of success on e-commerce websites. JavaScript-based image slideshows of products, elegant rich


↑ Back to top