Tuesday 5 January 2010

Live Client - Clarks website design analysis

Alongside the natural aspect of body health for Footworks, feet are also the other important component. As an interesting side, I decided to look at Clarks shoes. I feel lessons could be learnt about how they sell and present feet products, aka shoes!


The homepage is full of content, all vying for the users attention. There is a traffic light colour scheme attracting you to attention to certain focal points on the site. Furthermore, punchy typeface Rockwell is used, bold in its stature, which stands out from not being the regular Georgia or Arial.

The navigation flips between a Spry enabled top bar, and a left hand vertical list system. On a page, these left hand links vary from being noticeable to unnoticeable. By outlining and colouring these left hand links they would instantly become more click-friendly.


--

Importantly, the heading/logo for Clarks pales into insignificance here. The pale blue mountain sky line image proves largely unnoticeable, in comparison with the bright colours elsewhere. In fact, these bright colours appear inconsistent. In fact, the rest of the site seems to try different designs to suit the section it is serving. This variety is not always good.


I really like this type of large image background. The sky blue Clarks heading flows naturally down into the picture and makes for an inventive viewing experience. The green and orange coloured heading is instantly noticeable, proving its effectiveness as a heading. Unfortunately, the textual content lower down the page is then merely placed on the screen in a random coloured box and one not.



Again, I like this use of heading leading into the body of the site. It's inventive and catches your attention by being different. The New Arrival section is graphically represented with abstract use of the text in the heading, however, it fails to ensure the existing site components remain visible. Due to sharing similar colour properties, you cannot really see the navigation options here.

Elsewhere, however, the site opts for rather dull, pale colours. These I feel work for the image of Clarks, a refined British shoemaker, yet doesn't successfully transfer online. It proves uninspiring to look at compared to the previous pages.


I believe this could be remedied by increasing the saturation of colours on the page. Nonetheless, from the history page I like the sectional strips with headings at the end. These help break up the page whilst reading.

--

The footer here is much more comprehensive in informing of the sites information. You get the shop category, about Clarks, customer services, store locator, help.


These work better by offering more specific sections within the categories. Rather than having to guess where you would find out the store opening hours, instead, by being able to see what is in each category, you find the answer quicker. The user will appreciate this sort of efficiency.

However, if I was to offer any suggestion, it would be to better form the footer's content. It does appear a little tightly packed and so requires more attention to find what you are looking for. I prefer thehut.com's laying out:


--

In all, I have learnt that a visual consistency is important in building a good site. Yes, you can specify the design more on particular category, however it should compliment and continue the existing arching design scheme. Large attractive images, that lead into the body of the site work really well, being unique and drawing the eye down into the important content of the site. Furthermore, the use of alternate typefaces oncemore draw the eye, as familiar fonts could now be perceived as samey.

Meanwhile, it is important to keep all site components visible; navigation being an important one. Furthermore, using stronger colours work better in a larger design scheme, as otherwise content can go unnoticed. Also, a well spaced, expanded footer can prove useful by revealing other sections of interest at the site and aiding the user's locating of these.

@

No comments: