Given that one of our most recent website builds was an e-commerce shop, we thought it appropriate to do a Focus post on a website of this kind. So, in our second Website Focus, we look at a French e-commerce store that sells a range of trendy and comfortable sportswear socks. Meet Archiduchesse.

Home Page

There is no messing around on this site. The front page immediately shows you what’s on offer with thumbnail images of the socks. More than that, they are colour co-ordinated so that there’s a beautiful transition through all the colours of the rainbow. Starting with a deep red item that fades gradually into pinks, then purple, through to blue and so on. It’s instantly noticeable and very pleasing on the eye. The designer of the site also very cleverly matches the tone of the shopping basket in the top right corner to that of the first red and pink socks, giving a nice tight-knit (:P) feel.

Visual flow makes the site very easy on the eye

But it doesn’t stop there. Even the size tabs beneath each image are matched to the colours of the products. This is a beautiful effect with the only slight drawback being that on lighter coloured garments the text colour doesn’t change to complement it. In some instances you can end up with white text on a light cream background, which can be slightly awkward to read. Overall though, the effect is very satisfying.

Not only do the tags show the available sizes in UK, European or US metrics (depending on what version of the site you’ve selected), but they are also only fully extended if the item is in stock in that size. If it isn’t, the tab is retracted. Clicking on the tab adds the product straight to your basket in the chosen size. Small but useful usability features.

Stock info displayed through tabs

The site also uses the classic tab effect for the main navigation. Something everyone is familiar with. But it’s extended further by using descriptive icons to represent the types of socks on offer.

Info Pages

When you reach the Info pages, you are presented with an image slider that displays images of the products at various stages of production. You feel like you’re getting an insight into what goes on behind the scenes, which is a good way to generate trust with your customers. Apart from this, there is little else on the page but the company’s mission statement. While I’m not a big fan of mission statements on websites, as long as they are as readable and user-friendly as this one, you can just about get away with it.

While the info page is bold and alluring in its simplicity, as a genuine shopper you’d still expect to find all the information regarding delivery and returns etc here. At least links to the appropriate pages. Instead this is all located in the footer, an area not as well recognised for housing important related info as the sidebar or main content area of the page itself.

However, in the footer, the links to the various delivery and contact details are displayed very nicely through monotone images that change colour on hover. The designer of the site has cleverly used one large image sprite in place of 6 smaller ones. This is a technique used to reduce the load time of the images and remove any split-second flickering that occurs when a user hovers over an image and is forced to wait while the hover-state image is downloaded.

Cool hover effect on footer images

Single Product Page

The single product pages are what really sell the products on this site. There is some excellent photography and a solid theme throughout. Each product has very similar shots – the product draped casually across a wooden model, the product as they would look as worn on a person, and then the product with the packaging that it comes in. They are slightly unconventional in that some photos only show part of the products and at extreme closeup, but for a product that relies largely on the aesthetic of comfort and texture, an obvious and appropriate technique.

Individual product pages show beautiful detail

The lighting is perfect – enough to show the products in great detail, and good enough to be able to stick the product text right on top of the image. No need for boxing out the text. A very nice technique, but only achievable with good understanding and co-operation of your photographer!

Again, the accompanying tags and tabs match each product’s colour. Excellent consistency.

Conclusion

Simple to navigate and gets straight to the point. The site focuses heavily on imagery and lets the products sell themselves. On top of that, they explain the reasoning behind their decision to sell directly to the consumer.

Archiduchesse pride themselves on their direct approach to selling – cutting out the middlemen and selling straight to the consumer. This is done to remove any costs involved with dealing with third parties such as wholesalers and retailers, and to counter the higher-than-average manufacturing costs in France. You get the feeling that if you bought from them, you wouldn’t just be getting a nice product, but you’d also be helping out a brave and independent little company as well. Rather than a large, faceless corporation. The whole brand has that safe and homely feel, and it’s aided by the neutral but satisfying design of the site. Most importantly of all – it makes you want to buy the products.

This is a new feature in our Thoughts section that I’m hoping to maintain and build on reasonably regularly. I’ve grown a bit bored of the common listicle post. You know the ones. 50 websites that use photographic backgrounds. 70 websites that use big, bold typography. 1000 websites that will increase the length of your toenails.

Listicle posts can be great for a quick source of inspiration, but sometimes you want a little more. Sometimes you want to know why the author thinks a particular website stands out from the crowd. A little more info than a name, an image and a link. So in these Focus posts I’ll be attempting to look a little deeper using just one website at a time. Today I’m going to focus on Cristiana Bardeanu’s 84 Colors website.

The 84 Colors website is all about personality. It has been around in its current state for a good couple of years now, but it has such a professional finish to it that it has stood the test of time extremely well and even now, manages to look fresh and modern. Cristiana’s website is extremely unique and it’s her level of detail and consistency of the nature theme that makes it fascinating. Below are just of a few of things that I’ve picked out as inspiring elements of her site that help show it off as one of the more impressive online portfolios. Cristiana is an artist, clearly and plainly.

Menu item hints

Menu items offer little hints

Each item in the main navbar has it’s own little hint that pops up when you hover over them with a little arrow and a small indication of what each page contains. Not essential, given the obviousness of the links, but a nice touch all the same.

Subtle use of Flash

Flash is used subtly and sparingly

I’m not a big fan of Flash in websites. But the 84 Colors website manages to seamlessly blend two very subtle areas of Flash into the rest of the site. These elements are so well implemented that they are almost hard to notice at first glance. If you can’t see which bits I’m talking about, take a look at the leaves in the top right of the page and the leaves and squirrel to the left. Perfect execution and another nice touch.

Good use of fonts throughout the site

Portfolio links use nice font

Cristiana uses a combination of attractive fonts and appropriate typography all through her website. Lucida Sans seems to be the most prominent typeface used and it’s used in every way you can think of. Large, small, bolded, italicised. I particularly like the way it is used on the Previous Project and Next Project links in the Portfolio pages. Another example of the great level of detail employed in this site.

Consistent theme

Elements of nature throughout the site

Lots of websites attempt the natural/environmentally friendly theme. Not all of them pull it off quite as stylishly as 84 Colors. There are plenty of little additions – grass, a squirrel, a butterfly, flowers, leaves, a spider and some nice textured background effects that collectively make this site so interesting to look at.

Bonus: a personal touch

A bold but commendable move

It’s refreshing to see a designer with the confidence to be open about ‘failed projects’. Though in this case I’m not sure failure comes into it. Cristana has enough confidence in her work to show the world what she can do, and how sometimes the client isn’t always right. It’s done with taste and grace, and no sign of bitterness or regret. Nicely done.

Conclusion

Out of all of these beautiful touches, the thing I enjoy most about this site, is Cristiana’s use of typography. I’m not a huge typography nut like some designers, but in this particular site I find it extremely easy to identify the different sections based on the typography and fonts alone, which is a definite indication of type being used properly. Good use of bolding, italics and a consistent colour palette make that all possible.

All of the details and all of the thought that has gone into the build and design of 84 Colors make for a very complete website that is hard to take your eyes off. It makes you wonder how people can still have a misplaced sense of importance when it comes to design. And this is why 84 Colors is the first site I have chosen to focus on.