E-Commerce Design

When designing ecommerce websites first and foremost consideration must be usability, and then design. Or, if you prefer, design with usability in mind.

I’ve collected (so far) 10 examples of what I think are great ecommerce web designs from across the board. In no particular order:

Paul Frank

Bright, colourful and straight away in-your-face (but in a good way), PaulFrank.com is fun and playful.

Nike Store

The brightly coloured products offset against the dark background set this all off beautifully. There’s also a great iconic image related to the recent World Cup on the main rotation.

Nicky Clarke

Clean, simple and stylish, the new Nicky Clarke website uses few colours (especially in comparison to sites like Paul Frank!) but doesn’t feel boring in the slightest, just classy and sleek.

The Cheesecake Factory

Not necessarily great for usability or speed, The Cheesecake Factory videos just keep me hooked everytime.

English Cheesecake Company

If you ever get stuck for a present, get onto the English Cheesecake Company – easy to use, a pleasure to be on and… they’re cakes!

Holistero

This design just strikes me everytime I visit it. Products are shown singularly and often brilliantly contrasted against the dark background.

Asos

Not perhaps the best screenshot due to the current sale, but I’ve included Asos anyway as they usually have a stunning homepage design.

Powerskin

Powerskin uses the same simplistic colours that can be seen in Asos, but instead products are at the forefront of the design and straight away you know where you are, and what’s available.

MGM

A large commercial example of Magento at work and also emphasising the important of products is MGM, although I’ll admit I’m not a great fan of the black and gold.

Mama Baby Bliss

Colourful but subtle, Mama Baby Bliss is gentle and feminine that translates it’s caring message beautifully.

Do you know any examples of great ecommerce website design you think should be included? Post a link in the comments with a reason why (or tweet the Magento Fox) – maybe I’ll do an updated list on our ecommerce web design blog in a few weeks!

When developing an e-commerce website, whether you are using Magento or creating a completely bespoke system or even if you are simply making a php-based website, you are always in need of the right tools. When you have the right tools you can do the job better, faster and stronger…maybe not stronger but you get my point. Without these tools you will find yourself lagging behind and getting increasing frustrated with the complexity that is ecommerce website design.

Here on our Magento Blog we aim to help people in all aspects of ecommerce design, whether this is from simple php tips to custom magento attribute callout thingymajigs, we couldn’t have done it without our favourite two developer tools.

One of these you will know – one you may not. Both are highly recommended. Both are free.

FireBug – For Firefox

Every Web developer who uses Firefox knows of the BUG. The big bad bug that makes developing websites that much easier. Firebug gives you a great advantage when designing websites. Including inline element checking, css editing and an in-depth error console. When it comes to php development make sure you check out FirePHP meant for AJAX development (also commonly used in shops).

There is little in this world that can rival the firebug for its expertise in finding our mistakes. No matter how hard you code or how hard you style a site – the bug will always tell you how it is, no sugar coating and no kind words – just the cold hard truth of the matter. Which is exactly how we should take it.

Use this in conjunction with the firefox web developer toolbar and you are laughing!

Web Developer – For Chrome

Not often we give Google chrome a mention…it’s not a bad browser – in fact it is really really good! But it takes an awful lot to nudge our foxy fox from the top spot and I’m not talking about Magento Fox, no, Firefox has been a firm favorite of a lot of peoples computers for the past few years – the fact that it is free and cross-compatible makes it even more popular with the masses.

Web Developer takes into account all of FireBugs features and then some – with a menu that is as clear as crystal. You know what you are getting with Web Developer and I strongly suggest you give it a try. Everything from disabling stylesheets to clearing forms, you can do it all! Edit CSS on the fly and test your browser in different resolutions. All is possible with the Web Developer Extension for Chrome. It is like having all the best features of FireBug combined with the web developer toolbar in one easy installation.

So why doesn’t anyone use it? I personally have no idea – it must be us clingers who prefer the old FireFox to the Shiny Chrome browser…will we ever change our minds or are we simply too wrapped up in the comfort security and simplicity of our beloved fox?

Estimating shipping rates can be a long and intimidating process as you attempt to make sure every shipping possibility is covered. By far the best thing to do in my opinion is to call official shipping rates from the actual companies themselves. Magento has this feature built in, so why not use it if it’s there?

Flat rates, and even worse, table rates leave you open to the fluctuations in actual rates of shipping as they changed based on inflation and other economic movements. It’s not something you want to be caught out on. In addition to the static options like flat or table rates, Magento also offers dynamic retrieval of rates from various products, such as UPS, USPS, FedEx, DHL and more.

There’s a special extension that allows seamless integration of the Royal Mail module that does the same thing. It’s free to install so you might aswell give it a go. If you want to add a little extra for handling and packaging you are also free to do so – just add it into the backend and it will be integrated. It doesn’t appear in the site frontend either.

For a while now, ecommerce has moved further and further towards marketplace sites, where it’s not just the website selling goods to users, but users selling goods to users through the website. The most well known example of an online marketplace is Ebay, where transactions are purely user to user. Sites such as Amazon and Play.com evolved from being purely business to consumer ecommerce sites, due to the growing popularity of user interaction boosted by the Web 2.0 revolution.

It opens up a whole new way to shop online for users because they’re able tobuy items that are not necessarily available in the main store, or there’s the possibility that used items for sale will be available at a lower price. Does this effect the sales of the website’s normal catalog? Possibly, but I think the advantages that user to user selling brings outweighs any potential sales reductions:

• Users need to sign up on the site in order to sell resulting in more user accounts and more opportunity to market new products to them with the data acquired.
• A small percentage of the sale goes to the store anyway. With no other major operating costs other than the space required on the server to advertise the products – it’s a virtually free source of revenue.
• Greater interactivity and more ways to buy will also attract more casual visitors to the site.

There are currently no commercial shopping carts that I am aware of that have this function available to users. It’s likely that startups will not find much success from this type of selling anyway. It seems only trusted and well known brands are able to generate enough users to make it work. In which case, it’s probably unlikely that we’ll see these types of shops making huge successes of themselves with small companies in the short-term, but certainly time will tell.

With a brand new design, e-commercewebdesign.co.uk has relaunched for the third time in an effort to further cement itself as the UK’s top e-commerce web design company. The new design is more in line with other sites owned by the Crear Group, promoting clean, detailed design with usability.

An update to our e-commerce portfolio, as well as a look at our brand new e-commerce packages means that there’s plenty of information about our services available for potential clients to read about.

The new site is currently in its early stages. We will be also using this site to showcase how we are using video, JQuery and a host of other web applications to push ecommerce further than it has ever previously gone.