This is a site that is getting ready to launch for a company that sells fish oil supplements online. *Designers please be informed that this is an e-commerce site, not a portfolio site. So, it has to remain functional for users shopping, yet carry a clean, branded feel. This seems to be one of the biggest challenges for designers and clients during the design process of a site for ecommerce. Its a constant battle/balance between usability and aesthetic value.

Look at the ‘Before’

The original site had a complete lack of visual hierarchy; all elements seem to compete with each other which completely waters down any sort of focal point or main point of interest.

Here is the ‘During’

Here is the ‘After’

As a web designer for e-commerce, I face many challenges and what it comes down to is best described through this analogy; you wouldn’t design a car without brakes, if you did, well…we all know that the car would certainly fail, the customer would be very unhappy, and might not live to share the experience. So, I do my best with consideration to every party in need. Throw in SEO experts, budget details and developers and creating a site for ecommerce is truly a collaborative process like none other.

Grid:

After I found the ‘right’ type for the site, I started to lay the site out based on a modular grid system, with the hope that the spacial balance of the grid would give the client and easy and semantically-correct style guide to populate content with. This cascades into how the site layout was formulated, and spacial relationships such as line length for readability on content areas and spacial balance for things like product detail pages. It’s all built off of the same grid with very little deviation from the modular scale I was working from.

Typography:

I used a font that carried a feel of Iceland to me that was available through the Google Font API, ‘Caudex’. I liked it’s angular lines and to me it just felt like it had an Icelandic/nordic tone. Type definitely brings a personality all of its own to a site design. I set up a style guide for the client, so they could see what certain tags look like for styling content.

Style Guide for Client Content

A style guide was provided for content population using global styles, and to make it simple for search engines to crawl and interpret information on the site.

Color:

I like to keep sites clean and light, especially for this one. Iceland is all about clean, healthy living, as Icelandic people are some of the healthiest people on the planet. So, overall, I tried to keep it light, bright and clean-feeling.

Imagery:

I have to admit, it’s kind of canned. I really wish we could have stuck with the school of fish, as it tied directly into the product ingredients more and brought a more organic connectivity to source and nature into the fold.

Styling:

I tried to keep elements as consistent as possible; I completely re-tooled the checkout overview page using buttons and elements that were familiar from previous pages;

Interior Page Layouts and the Cascade

Shopping Cart Overview Page

Styles cascade into the shopping cart checkout page.

Content Areas – News, About Us Pages

Styles also cascade nicely into library or 'news' content areas of the site.

Product Detail Page

Product detail page.

So, there it is, I’d love to hear from the Smashing audience on where I missed or if the same underlying feelings I’ve had exist amongst a crowd of seasoned peers. The site is currently live, take it for a test drive here. Anyhow, please dish If you were wondering about what’s under the hood, this site was built on the AspDotNetStorefront platform, which provides an excellent balance between all the complexities of an e-commerce website; price, seo, functionality and extensibility.