Getting the Mood Right for Your Website

Getting a good consistent design is often about choosing the right mood to fit your design, and sticking with it. This tutorial helps you choose that mood.

The mood of your site is all important, but its implementation is very subjective. There are ways, though, to give yourself a fighting chance at getting it right. This tutorial will attempt to explain how!

The nature of this will mean attempting to explain mood using words like "grumpy" or "cheerful". Bear with us — it's the only way!

To get the feel of the mood, you really have to see the whole thing in action, so we've littered the text with example sites.

Choose your mood

The first thing to do is pin down what the basic message you're trying to convey is. This sounds easy, but it can be a real pain!

For a personal homepage or blog, for instance, the message you're conveying at its basic level is your personality, which can be tricky. You have to look at the content of the site or blog, and try to grasp the essential elements of your personality. (Obviously, using this technique, you can lie quite easily!) Here's a great example of a non-corporate blog with a definite mood: Design*Sponge.

Corporate websites for firms are in many ways easier. They tend to be quite restrained, and take fewer risks. They are there to give confidence to the surfer that this firm is the one out of many to be trusted to give them what they need.

Firms will also often have an existing look in their printed material that they will want reflected in their site, or indeed a set of prescriptive guidelines set out in a brand book. Many designers find the guidelines constraining, but they can actually be a very good thing, since development is faster if the feel of the site is pre-defined.

Of course, some firms (like Nike for example) want to seen as risk takers, especially those appealing to a younger demographic, and these companies actively want to be surprised by design work presented to them. Knowing when to "push" a brand and when to simply follow the guidelines is half the battle.

OK, we'll assume that you've chosen a basic mood — here's how to get there!

Background colours

The background colour of a site is one of the most important decisions to take.

  • Black (and other "dark" colours) essentially says, "I am the law, kneel before the slickness and general brilliance of my work". It also conveys a sense of slight oppression, a level of "downness" and a general subversive edge — so use with caution!
  • White (and other "light" colours) conveys a sense of airiness, and of space.
  • Primary colours feel youthful and vigorous.
  • Muted tones feel welcoming and calm.

A quick tip. To make a site look quite pro, use either black or white as the background colour rather than anything else! Also, a dark grey can make a softer statement than pure black.

Warm or cold colours?

Without getting too "interior design" on you, this is an important point. Cold colours (blues, greens etc) provoke a sense of being quite "down", while warm colours (reds, oranges, yellows) are inviting and more cheerful.

For instance, if you combine a cold colour with a black background, you're definitely sending a pretty miserable message. Conversely, if you put warm colours such as reds and oranges on the black, you are giving the impression of "I'm cool, but I'm a loving, giving person" — it's also quite "fireside" and inviting. Experiment with different backgrounds and colours on top to see what we're getting at here!

One book I use all the time is Color Index (buy from Amazon.com | Amazon.co.uk) — it contains over 1,100 different colour combinations, and uses moods such as "retro" to describe them. This makes choosing the right mood for your site that much easier!

Subtleties

Once the basic mood is set by the use of colour, you have to contemplate the subtleties of what you're saying. Are you getting at something quite techno, grungy, corporate, quiet, cheerful, modern etc.?

Often the best way to approach this is with use of fonts. Whether you have them as images or defined in CSS, fonts can give you the look you're after.

Corporate sites often use serifed fonts (Times, etc) to convey tradition and solidness, whereas more modern sites tend to use nonserifed fonts (Arial, Helvetica, etc), which also look best when doing small text, by the way. Recently there's been a trend back towards serif fonts, especially Georgia, which looks lovely when used with lots of white space.

The place to use more "experimental" fonts is in headings and titles, not in the body of your text. This is because they're generally harder to read than straight serif or sans-serif.

If you're going for a grungy feel, for instance, then use a font that is deformed and generally messed with. One of the best places to get these is the excellent T-26 font house from Chicago, and their site is rife with deformed and screwy fonts! There are free font sites around as well, that have some excellent examples. It's always worth trying to find some different fonts to everyone else, since it lends originality to the site.

A neat trick to give a mood of modern yet corporate is to mix serif and nonserif in the layout of a page — for example:

Serif and nonserif

These muted colours and mixed fonts give the layout a modern and relaxed feel.

A last word...

We've tried to point you towards certain ideas here, and they are tried and trusted methods, but they are not the only truth, just pointers. If you have something you think is cool, ignore all advice and go with it!

To get interesting results, combining your moods is a good bet; for example, warm colours with nonserif fonts on black are lovely, as are cold colours with big serifs on white. Try to preserve a feel throughout a site, though. Try experimenting with all this, and remember: rules are there to be broken (sometimes)!

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page