Category Archives: Ecommerce

Ecommerce in web design: a great showcase of web ecommerce examples, effective online ecommerce designs, nice shopping carts and inspirational solutions for a top ecommerce websites at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Add to cart button with animation


Heppo.se is a Swedish ecommerce website (unfortunately, there isn’t yet an English version) with a sleek, edgy layout: though there are many reasons to be fond of this website, the motivation for having it showcased on Web & Patterns is its add-to-cart button.
When you click on it, a bright, trasparent rectangle appears above it and moves quickly over the page towards the cart area (top right corner), shrinking and fading.
This is obviously a minor feature, but it really shows a deep attention and care about the design of an effective user experience.

Mega Drop-Down Menu from B&Q

Even if mega drop-down menu perform better than the regular ones (at least according to this Jackob Nielsen’s study), I still don’t love them.

Except for cases like this, when, huge panels makes me understand at a glance the whole website’s taxonomy, sparing me the time of browsing endlessly from a level to another and providing a more pleasant user experience.

Orlebar Brown simple product fact sheet

orlebarbrown-inspiring-factsheet-layout
If you think that ecommerce web sites aim is to convert browsers into buyers, crafting simple, functional and friendly fact sheet pages is a key factor to your business success.

So, I really liked this layout from Orlebar Brown online shop, where a few options are neatly separated by big red bullets and a numbered list suggests a required order of customization.

Kiehl’s outstanding ecommerce layout

kiehls-inspiring-ecommerce-website

Kiehl’s online store is one of the most accurate and fully equipped ecommerce website I’ve ever seen.

You can find:

  • a neatly separated sign in area;
  • a global website navigation;
  • a products tabbed navigation;
  • a simple breadcrumb trail;
  • a facet navigation duplicated: on the top as drop down menu, on the left as checkbox choices;
  • detailed product listing with quick shop (it means add to cart actually) and learn more buttons;
  • a double tabbed shopping bag: one for choosing your sample, the other for checking out your cart.

In particular I think the drop down shopping bag it’s well designed: you can see products appearing in your sample bag as you choose them, how many samples are left, and photographs of items you’ve aready selected. In the cart box, there’s a complimentary shipping information box and you’re constantly reminded to sign-in or register .

Typetogether minimalist and classy ecommerce website

typetogether-foundry-minimal-ecommerce-website

I’m a typomaniac, I confess, and my favorites ecommerce websites are most of all digital foundries’ websites.

Usually this kind of website displays clean, sophisticated layout grids with minimal graphics elements such as horizontal dividers and flat geometrical buttons.

Big headings and wide, spacious whitespaces (which basically means removing all the graphic overbearing elements from the page) are the most common trick for making your beautiful and precious digital merchandise pop out:  in this impeccable, squared presentations cart usually are represented as coloured boxes which are able to stand out because of their strong contrast with the surrounding white background.

Muji Japan online store

muji-japanese-ecommerce-website

Even if language is unfathomable for us and online translators are of any help, we do love this clean, minimal red and white product page from Muji Japan online store. Every block is squared, lines are perpendicular and every details is finely designed in an accurate, minimalist way: for example the beige and red callout box, with its thick red horizontal lines, really pops out in contrast with the dominating white and so does the red box on the top right.

Besides, we think that the little icons on the left side (e.g. the blue dress) showing the shop categories, are really cute.

10 Great Ecommerce Websites for your Christmas gifts

Christmas time is coming and since Santa last year has been quite generous with us, we think this time we could help giving him some tips.

So we’ve collected ten great online shop, with inspiring layouts too, where you may find some ideas for your gifts and some snips of beautiful web design interfaces too.

1.The Cold Feet Friend

hunter-inspiring-ecommerce-website-cart
Don’t let your friends get cold feet this year and give a look at Hunter Boots website. You will also find a nice product page with an useful magnification system.

2. Make a Designer Happy

keep-cal-gallery-inspiring-ecommerce-website-cart
Buy him/her something at Keep Calm Gallery (not necessarily a Keep Calm gadget, mugs are gorgeous too). The product grid is great with different available views.

3. For the Restless ones

lonelyplanet-gallery-inspiring-ecommerce-website-cart
For your restless friends, who keep on wandering all across the planet and seem never to stop, you should buy a Lonely Planet guide. It’s a good augury too. We loved as well the whole navigation system of Lonely Planet’s website: check for example the destination map page.

4. For the best Friend

threadless-gallery-inspiring-ecommerce-website-cart
At least, you have to buy two t-shirts for your best friend because Threadless tees are so cool that one is not enough. Every website’s page is quite interesting but we mostly appreciate the clearness of the checkout page.

5. A customized pair of shoes

nike-inspiring-ecommerce-website-cart
On Nike store you can customize, with a flash tool called NikeId, colors and material of any pair of shoes and make your presents unique. That’s brilliant.

6. For the Geek ones

dada-gallery-inspiring-ecommerce-website-cart
We know for sure there are plenty of geeks among us and obviously we are design freaks too. So we fell immediately in love with Dadadastudio‘s ecommerce website where you can buy bread shoes or pangrams bags with your favorite font on it. But hurry up cause some items are already sold out.

7. Women Only

urban-originals-gallery-inspiring-ecommerce-website-cart
Unfortunately. Because we think Urban Originals is a great ecommerce website with a classy palette, nice graphics, smooth Flash transitions, clean typography. Not to mention the bargains you can make there.

8. Some Friends may already have everything…

madsen-gallery-inspiring-ecommerce-website-cart
So, we’re sure they need a cargo bike to move all their stuff around. You can buy one at Madsen online shop, which, by the way, displays beautifully styled buttons.

9. Some Apple Magic won’t hurt

apple-inspiring-ecommerce-website-cart
Could Apple Magic mouse add something to the magic of Christmas? We don’t know yet but we’re willing to give it a try. Otherwise we’ll simply enjoy the clean, light freshness of Apple Store products sheet.

10. If you still haven’t got any clue

etsy-inspiring-ecommerce-website-cart
In the end, if you didn’t get so far any clue about your Christmas presents you should give a glance at Etsy. You’ll find a ton of superb ideas browsing the vast range of this website’s categories. The navigations is basic, but clear and intuitive.

So here it ends our round-up about ecommerce websites: we really hope you’ve enjoyed our post and, whether you celebrate Christmas or not, may you all have a beautiful, peaceful, inspiring time!

A creative ecommerce website selling Champagne

plusdebulles-creative-ecommerce-website

Let’s have a toast for our newborn inspirational category: Ecommerce websites. From now on we’re going to collect everything related to ecommerce and online shopping: buttons, carts, listing, copywriting…

For a start, here you are Plus de bulles websites, where you can find  a nice crate-like cart (on the top left), a slideshow that displays the new entries or the sommelier’s suggestions and a poll-like wizard that will help you to choose the champagne brand that will suit you better.

Have a fizzy time!