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.

@

Live Client - Body Shop website analysis

As Footworks by Sue is a body health company, one of the first mass-market companies I thought of was the Body Shop. This forms a worthwhile reference point for building the logos and site design.

The Body Shop pride themselves on natural and ethical products. As a result, their visual identity reflects a natural theme.

The colours are vivid, fresh and mostly, non artificial. Green is the predominant hue on the site, this having direct associations with nature.

Furthermore, the site is predominantly image based, and quite reasonably sized images at that. These instantly draw the eye and sell the products much quicker than textual information.

--

Navigation is served by a typical horizontal bar across the top of the page. There are two levels of navigation, one for wider Body Shop services, whilst the lower bar, coloured in a bright green bar serve the sales for the site.

The Spry menus allow much easier categorising and locating of content, whilst also limiting the amount of clicking required. There is an alternate search box which will aid users who cannot immediately locate what they are looking for, this ultimately accommodating the range of user inputs.

Interestingly, whilst most sites nowadays are expanding their footer's real estate, the Body Shop have opted for a fairly minimal option, which features links that could be deemed surplus: careers, terms and conditions. This may be simply the trappings of an older design, as once a user reaches the bottom of a page it is now customary to offer a repeated set of links to maintain interest in the site.

--

Elsewhere in the site, away from their online shop, I found a hover effect I particularly liked.

As with the front page, a price tag or speech bubble seems to be employed on the site. What relevance this has for the inners of the site I cannot really ascertain, but I like the innovative ways in which sites now provide additional information through the use of hovers.

I will try and incorporate this in the Footworks site.

--

Meanwhile, I am a little unsure of the colour choices within the site.

The fresh green seems a natural choice, yet inside, they use a bright turquoise colour alongside. The harmony of these colours isn't quite right. Contrasting colours can be used to effect, yet it just seems a little jarring at first, here.

--

In terms of interactivity, it would seem a little shoehorned if the site was trying to offer something really flashy. After all, the site is trying to inform about and sell natural products.

Consequently, the site uses a slightly more enhanced version of a gallery to impart information, with added interactive elements.

A soft glowing hover effect is executed when the mouse goes over the small photograph clipping. Upon clicking, this then reveals more information.

I like this, as it includes the natural styling of the parent site, informs in a slightly different manner and would be something I could implement and achieve.

The user would likely be interested by the alternate presentation, and the option, for instance, to see the lip stick on the model of their choosing, gives a visual representation that would appeal to a female audience. Everything fades on and off the screen and appears aesthetically pleasing.

I will likely consider doing an interactive piece of this kind for Footworks. It provides something interesting to "play" with, whilst simultaneously providing information.

--

Overall, I like the Body Shop for it's maintaining of a natural theme, the aesthetically pleasing interactive piece and experimental use of hover effects. Lessons have been learnt about footers and colour schemes.

@

Live Client - Logo #4

I decided to continue with the logo creation process, this being design #4.

I thought a good start was to be imaginative with footprints. This then evolved to a fingerprint font I have called Fingerprints Inside.

Again, I opted for off-green colours which help form the natural feel sought after and in general, appear quite fresh. The leaf item I used to try and add some interest to the background.

However, the fingerprints I find not to work as well as I would have hoped. The several layers of various colours and gradients make for a slightly uncomfortable look too, so I continued developing.

I went back to basics and actually like the simplicity of the interim design:

As mentioned before, Rockwell is a popular typeface online for contemporary design. As a result, I tried to work a combination of Rockwell type fonts. This design could always prove a good fallback should nothing work for the client whatsoever.

Taking it on, I decided to try and continue natural by adding an alternate leaf. Over this I then added quite eye catching, fresh colours.

OK, the leaf has nothing to do with feet, but it gives a flowing delicacy to the logo and the gradient is bright and nicely sets up the true green found in 'works'. Plus, the Body Shop features nature as a good visual metaphor, so I don't see why the leaf should be completely ruled out.

--

I may try and develop this type of design further, pushing oncemore at a foot image, which should help build a better understanding for a viewer. In the meantime, I'm meeting with Sue next week where we can discuss the site design more.

@

Sweet Tweet

How cool are these? Very current and sure to send you hyper with the blue coloured E-numbers.

Another example of geek-chic entering mainstream life.

@

Live client - Logo #3

The third logo idea was inspired by Wii Fit.

Taking the silhouette as the dominant shape in the image, I tried to assemble the words around the picture.

Adding a colour gradient instantly altered the feel of the logo. Black on white proves quite a strong piece, but lacks some of the qualities that colour can add. Referencing Wii Fit, I tried a mid green colour.

This then progressed to trying another alternate colour, this time purple, which would set apart Footworks by Sue from the other regular foot health practitioners. It works somewhat but isn't perfect. Again, I don't think the hue does it justice in terms of what message the logo is trying to impart.

I like the large typeface Aarrgh, which holds its own on the page. It is clearly legible and alongside the graphic should form an understandable logo to a viewer. The subtle grey gradient is a contemporary technique used throughout web graphics nowadays.

----

All three of the logos will be tendered to my client now, and thereafter refined building on suggestions.

@

Live Client - Logo #2

The second logo design attempts to pursue a more traditional foot themed look. Being green it should provide connotations with natural, earthy things, whilst the circle in which the text sits reminds me of the lid of a product you would get from the Body Shop.

Interestingly, it was through the research of the Body Shop that I found the typeface they use for their marketing, TrashHand. I like the scribbly nature, it helps build the look of a personal, non-mass market company.

I decided to insert the footprint graphic so that it adds a little character to the logo, and helps reinforce the nature of the company. The logo with a complete foot works better than the first, I believe.

The only area I believed in need of a little more attention was 'Sue'. I had attempted to continue the personal look by employing a handwritten typeface, yet these didn't quite fit with the 'Footworks' heading above.

I liked the outer glow in the first iteration, which highlights and emphasises Sue's name, but it could have done with toning down a little, so I did. This has provided me with the latest revision of logo design #2.

@

Live Client - Logo #1

The first look I went for was quite simple, but inspired by the now popular Rockwell typeface.

Clarks have recently been using this a lot and so I thought that if people could associate a renowned shoe maker with this brand then it would be complimentary.

Initially I envisioned a sort of credit card shaped logo with a subtle, but nice gradient effect. The handwriting typeface I thought adds the feminine, personal touch that Footworks by Sue will provide.

I switched through a variety of colours to see what could be gained. Of them all, I think the last is very much akin to that of Spotify, whilst the blues did admittedly look OK, but feel somewhat colder and cooler. The website needs to be inviting so these would not fit.

I altered the shape to a square and lowered the text. This box form now gives a stronger presence, being solid and the equal "white-space" above and below the company name creates an aesthetic balance.

Notably, it was requested that the site didn't appear too flowery, so although I tried the pink, it was just for reference. Indeed I felt it would be more suited to a box of chocolates type of product/look.

A little more refinement has brought me onto a potential logo that I am happy with. The orange is bright, and would draw attention on the page. Furthermore, compared with the blues, it feels a lot warmer and thereby more inviting. I think I like this design also as it is not something that you would expect for a reflexology/pedicure type service, where clinical or medical jade green is common.

@