How would you define good website design?

Rob Chettleburgh
By Rob Chettleburgh
27 Aug 2014

Is it enough for a website to be attractive and well laid-out? Is that what we mean by good design? Or is it more subtle and complex?

Of course, like so many things in eCommerce and online marketing, the answer is inevitably subtle and complex. There are general rules about colours, symmetry and composition that you should apply (and sometimes ignore), but the design that will deliver the best results for your client is unique and depends on many factors.

Whenever a customer has to think about what to do next, rather than just doing the most obvious thing, you are damaging your conversion rates.

As a web designer you often find that you don’t have complete freedom in any case. Existing brand guidelines often have to be followed or interpreted so fonts and colours may be pre-determined. You also can’t create something that conflicts with the look and feel of existing marketing material - unless you’ve actually been commissioned to do a rebrand.

Whose taste?

Good design isn’t about coming up with something that you like, and isn’t necessarily about creating something that your client likes (although that’s often helpful), it’s about creating something that appeals to a defined group of customers and provides a strong statement of the brand identity and values.

It’s also about coming up with something that does the best possible job of selling a product or service. It has to be functional as well as nice to look at.

So, principle number 1 is this: if you don’t have a rock-solid understanding of who the customer is for whatever the site is trying to sell (age, gender, interests etc), you’ve lost the battle before it’s begun.

It is just about impossible to over-research the target market for any website. And it’s remarkable how often clients set out to create an eCommerce site without having really nailed the profile and tastes of the target market.

Different colours, different type styles and different graphical styles all appeal to specific people. Understanding what these are has to be your starting point.

For online stores the other factor that will constrain your artistic freedom will be the products that will be displayed.  The aim is always to complement and show off the products; your design should never be competing for attention with the merchandise.

If the products are predominantly grey and beige you might be tempted to use the design to inject a bit of colour into the screen. This wouldn’t be smart.  Similarly, if products tend to come in bright primary colours you have to think about how your design plays a supporting role but without vital navigation and CTA buttons getting lost.

Power tools, for example often come in a range of bright colours. So the Online Power Tools site uses a simple colour scheme with a grey background and a subtle red for navigation and CTAs.

whos_taste-01

Colour

We could probably write several articles about the use of colour and how colour theory comes into website design and eCommerce. But let’s stick with the basics for now.

One difficulty designers always face is that colours work differently on screen compared to printed media. In the online world we deal with red, green and blue. These are the true primary colours that correspond with the colour receptors in your eye.

Yet in primary school we’re all taught that the primary colours are red, blue and yellow. If you want green you have to mix blue and yellow. If you want the physics behind the difference it’s down to how pigments interact to absorb light; so mixing yellow and blue tends to absorb everything except the green that our eyes actually detect. That’s why you hear about additive colour systems (RGB) and subtractive colour systems (CMY).

Don’t get too bound up in this. Printers talk about cyan, magenta and yellow to create different colours and hues, web designers deal in RGB and hexadecimal notations.  It only gets difficult when you try to match on-screen colours to printed media, where there are always variations depending on the device used for printing.

Colours-01

Hue and saturation

We think about warm and cool colours based on our perceptions and experience of the world around us. So we associate reds and oranges with warmth and blues and greens with coolness. 

This matters because there is an emotional connection and reaction going on. And emotions are highly influential in the buying process. 

An extreme example demonstrates the point. While I’ve never carried out the experiment I’m willing to bet that a site for fires or wood-burning stoves would never convert well if it used a lot of blues or greens.

The way we respond to colours and combinations is also affected by culture, age, gender, mood and environment. So choosing the colour palette that appeals most to your target customers isn’t straightforward.

Colour combinations

Colour combinations are often constructed using a colour wheel and the three main approaches are categorised as:

  • Monochromatic (using colours close together on the wheel)
  • Complementary (opposites)
  • Triads (forming a regular triangle on the colour wheel)

There are plenty of tools to help you select combinations. My favourite is Adobe Kuler.

Often, of course, the colour choice is predetermined by existing brand guidelines and you have to work with what you’re given.

Kuler-01

Demographics and colour

Different types of people have different preferences.  This article on the Kissmetrics site goes into a bit more detail about the psychology of colours and conversions: http://blog.kissmetrics.com/psychology-of-color-and-conversions/

The short version is that women like blue, purple and green and men prefer blue, green and black. Remember though, that the question they were asked was about their favourite colour so there’s only an indirect link to eCommerce conversions.

It seems that nobody much likes browns and orange, but several brands seem to use orange quite successfully, including er, Orange.

Yellow represents and induces a heightened mental state and anxiety. This is why it’s used by many brands to look upbeat and young. But be careful – it’s also the colour used on warning signs and high-vis clothing!

And finally, if you’re trading internationally you need to check whether your colour scheme has positive or negative associations in particular countries.

Layout

When it comes to layout, simplicity is always best.  It’s sometimes tempting for people to add sliders, promotional panels, widgets, links, sidebars and all manner of things that visitors might find useful. There’s always a reason for adding them and usually a more powerful reason for leaving them out.

Everything you add ends up competing for your customers’ attention. Too much choice means confusion, page bounces and lost sales.

The standard design pattern is to follow the golden ratio (approx. 1.6 to 1) or the rule of thirds to divide your space. So, if you’re using 2 columns, a 2/3rds 1/3 split on widths is usually more pleasing to the eye than 2 or 3 even columns of equal width.

Remember though that these are guidelines. Sometimes a single column is the best way to hold somebody’s attention if you need to take them through a sequence of information. It can also look quite striking when you execute it well.

White space is your friend

However much love, care and attention you put into designing a web page, your visitors are still going to do the same thing. Once they’ve opened the page they’ll scan around looking for something of interest which hopefully relates to what they previously clicked on.

Using white space liberally and intelligently ensures that their eyes will ‘catch’ where you want them to – on a specific image, piece of content or CTA.

White space often adds a high-quality feel to a website (perhaps through association with glossy magazines) but also works well in eCommerce engine rooms like Amazon.

white_space-01

Navigation

The cleaner and more straightforward your design, the easier it should be for people to navigate through your pages and buying process. With a clean page it’s much easier to use contrast to create navigation buttons and CTAs that really stand out.

The other point with navigation is not to try to be too clever. If people have expectations through experience of where certain things will be it’s usually best to put them there. Sometimes a non-standard positioning can help something stand out but you’re always taking a risk.

Whenever a customer has to think about what to do next, rather than just doing the most obvious thing, you are damaging your conversion rates. Make sure your main navigation options are as up front and obvious as you can make them.

Typography

Font selection and use is another fascinating area. It’s one that could make an entire article by itself – which is why I wrote this, Can typography really make a difference to eCommerce conversions?

Make sure fonts are appropriate for what you’re selling, attractive to your audience, and that you have a contrast between headings and body text. The way you use type can also help highlight key pieces of content and provide visual clues for navigation and clickable content.

Effective use of type gives your content structure and a clear hierarchy, which makes life easy for customers.

Testing

Making life easy is a recurring theme here. And the only way you’ll ever know for sure that you’ve achieved this is through testing and retesting.  From design, through implementation and throughout the live use you have to test how people react to your design and how easy they find it to use. 

As a professional in an eCommerce design agency, the answers you get might offend your pride and might take you places you don’t want to go. But ultimately, you always know that it isn’t what you like or don’t like that matters.

testing-01