How to design an e-commerce website

Nowadays, the online medium has become very important and no one can ignore it, as there is almost nothing that can be done in the real world without being able to do it online as well. An important aspect regarding the Internet is its financial potential and the supreme proof is the annual amount of money invested in it, which is in a constant rise and paradoxically it seems that the global crisis has speed up this process. The concept of “e-commerce” is widely spread but its history is very short (in fact, is there any history, we are talking only about few years!). Any online store presents many things in common with the real stores and the main element is the necessity of selling in order to obtain profit, which is the finality of any commercial existence. Definitely, there are many advantages in having an online store than a usual one but there are also some disadvantages. Being a designer, I have asked myself how to realize a better design for this kind of online activity and I want to share my opinions with you and, obviously, to learn something new from the readers.

The layout of an e-commerce website isn’t special nor does it have some features which make it more complicated but it has a clear purpose: it should sell. This statement might not be saying anything to a designer but thinking in a logical manner the result must be valid and important. First of all, an e-commerce website should sell the products to the visitors so to be successful you need traffic; a well done layout attracts the attention of the visitors and here comes the first major rule of creating a good e-commerce website:

1. The overall design should be matching the products

how-to-design-an-e-commerce-website-overall-design

Any website needs a good design and this category (the one of e-commerce websites) follows this rule but it also has to reflect the main features of the seller. The power of example is great (Cicero said): think of a design for an online store which sells women clothes and one which sells DJ’s equipment: the first one needs a very fine color scheme, huge collection of images with no highly complicated menus while the second should be modern, almost sci-fi, with powerful color schemes and many technical details. These are different and thus they need different approaches.

2. The design should emphasize the products

how-to-design-an-e-commerce-website-emphasize-the-products
The specificity of the e-commerce websites is the fact that the design shouldn’t highlight only the content as in other online presences, it should put the products in the spotlight and this means using a lot of text and images. Any designer should know that a good design is the one which isn’t necessarily noticed but makes the navigation easily and subtle. If the client is the one who is always right then here the product is the only one which matters. A lot of websites have lost many clients because the products aren’t highlighted enough or the images of these aren’t relevant, but here comes another great rule to keep in mind:

3. High quality images attract high quality clients

how-to-design-an-e-commerce-website-high-quality
Marketers have studied the ways of making an online store more efficient and more profitable and one of the main reasons of the loss of sales was the lack of information about the products. We all know that a hundred words is the equivalent of a single image and this statement is taken into account when designing a commercial layout. The relevant images, showing many perspectives should replace the natural touch in a mall or hypermarket in a successful manner and this is difficult…you believe in what you see, don’t you?…and an image can’t replace your eyes. In order to gain clients and to make them buy and not just visit, the high quality images of your goods are a must and the bankruptcy is near if someone neglects it.

4.Usability and accessibility are vital

how-to-design-an-e-commerce-website-universal-accesibil
An e-commerce website needs a layout which should help the potential customers in any situation else they will be naturally attracted by other shops. Nothing can be more disastrous than a layout where it is hard to find the shopping cart or one in which the information about the shipping is missing. When somebody creates the design of an online store the usability and the accessibility are the major facts to keep in mind; some specialists considers that even the aesthetics may be ignored but not these. The sales are in direct relationship with how accessible and universal a website is and, clearly, it is decisive. A FAQ and a contact page are signs that the website is serious as the help of these is invaluable.
These are various metric systems in each country and, in order to have more clients, all the dimensions should be offered to satisfy any preferences. These should be visible and easy to understand and, eventually, to transform for people from all around the world and it means that the written content should pay attention to this kind of audience. Online stores with local public target shouldn’t worry too much about the universality factor but it is highly recommended to pay attention to it.

5.The navigation menu is the key of success

how-to-design-an-e-commerce-website-navigational-menu
Usually, people visiting an online store aren’t very decided to buy something; they check all the products, see others even check out other similar stores and finally they make a decision. They navigate the entire website and they always need to know where they are and how to get to another category. In this case, a functional and well established navigational menu is required and nothing can scare away your potential customers than a complicated or difficult to use menu.
Anyway, every online shop has its specificity and a general tip remains a generality and nothing more. A solution to understanding better what an e-commerce website should be like and how to design it is to see the best examples. Here are only some of them but surely, there are many others also extremely interesting. Please, if you know other cool layouts of online stores, put them in a comment!

Saddle back leather


how-to-design-an-e-commerce-website-examples

Atom bicycles

how-to-design-an-e-commerce-website-example-2

Nineteen47

how-to-design-an-e-commerce-website-example-3

True religion brand jeans

how-to-design-an-e-commerce-website-example-4

Toobydoo

how-to-design-an-e-commerce-website-example-5

White house black market

how-to-design-an-e-commerce-website-example-6

Putuka

how-to-design-an-e-commerce-website-example-7

Morphica

how-to-design-an-e-commerce-website-example-12

Free people

how-to-design-an-e-commerce-website-example-13

Here itself

how-to-design-an-e-commerce-website-examples-14

A better tomorrow

how-to-design-an-e-commerce-website-example-14

Galante

How-to-design-an-e-commerce-website-examples-15

Whether you are interested in 642-374 or looking for 646-578, using 646-671 passes your certification exam on first try of 642-681, 642-583 is a superb job.

Daniel Pintilie works for landing page optimization Company Invesp and enjoys writing on conversion rate optimization , landing pages and affiliate marketing.

 
Inspired Mag recommends Elegant Themes - 69 brilliant WordPress themes for only $39!
Backup Buddy

Each of the 69 premium WordPress themes from Elegant Themes comes expertly coded in valid XHTML and CSS, and all are made compatible with the latest version of WordPres. Eeach template performs flawlessly in each of the most widely used browsers to ensure maximum functionality. Furthermore, all sidebars are made widget ready for your convenience.

  • Cross-browser compatibility guaranteed
  • Intuitive theme options page gives you control
  • A focus on support and community
  • Frequent theme additions and upgrades
Find out more about Elegant Themes

Comments

  • Hi Daniel,

    Nice article!! What’s your professional opinion on Galante? We always advice customers to stick with some conventions, like navigation top or left (not right). Obviously for design purposes Galante made this choice, but isn’t it adding navigation complexity?

    Thanks for the inspiration!

  • TheAL April 16, 2011

    Step 1: Install Drupal 6.x
    Step 2: Install Ubercart
    Step 3: Theme
    Step 4: Rock out w/ your dock icons out

    j/k. Def appreciate the article. Though, a lot of projects I do all involve 1 and 2 to some extent.

Leave a Reply

Trackbacks

Hosted By

9,542 Friends & Subscribers

Newsletter

Signup for our newsletter

Ads

Ads 2

Recent Comments

  • Rajat Goyal: Hey Guys, Any news on announcing the winners for this contest? It’s been way more than a week...
  • Sammantha Lindgren: I would be ecstatic about winning a shopify package. I would be able to start my online store of...
  • John: I want to win as it will help me get out of this god for saken office full off dull individuals who have...
  • Emma Szasz: I will make a store where people can upload their clothes and borrow them to others for a small amount of...
  • Meme: I would like to win the Shopify deal so I can upgrade from zen cart which is quite difficult to use in some...
  • Elliot: Because we have been using such an archaic system for ecommerce for so long and I am yearning for the...
  • Kristin M.: This would be so helpful for selling tees, digital products, and my artwork! Great giveaway.
  • Codemunkys: we love Shopify! we are big evangelists of their services … we’d like to set up a shop...
  • Chris: I use shopify now and love it, I want to start a clothing company and would love this prize.
  • Alex Meade: Would be very helpful in getting my little bike business started!
  • Rune Toldam: I will make a successful online store, selling things kissed by beautiful girls under the full moon. I...

skyscraper

Evanto

Smashing Network