Designing With Colour.pdf

Planning & Design

Designing With Colour

When designing your website, one of the most important

factors to consider is colour. Choose wisely and you’ll attract

the attention of your target audience, set the appropriate

mood, and send the right message. Choose unwisely and you’ll

turn users away—no matter how professional your layout or

how interesting your content.

But how do you select a colour palette that’s right for your

site? In this tutorial, we’ll demystify the process and show you a

few different ways to find the perfect colour for your projects.

You’ll learn how to:

Create a colour scheme from a photograph.

Use colour theory to create a range of palettes.

Planning & Design

Designing With Colour

While the use of colour is quite personal, our aim is to help you choose

colours that are not only visually pleasing but also reflect the content of

your publication.

Choosing colours

Designers use many different methods to choose colours for their

documents and websites. In the following example, we based our colour

scheme on an image that we wanted to use on the Master page of our site.

As mentioned previously, you might also take colours from a company

logo or some other ‘signature’ image.

Alternatively, you could use an image that does not appear on the site, but

which contains a range of colours you find particularly attractive and which

portrays the mood and message you want

your site to convey to your audience.

If you want a more structured approach,

you can even employ a little basic colour

theory! A quick Internet search will

provide you with lots of information on

this subject—try searching on “use of

colour in Web design” for example.

In this section, we’ll step you through the

following approaches:

Example 1: Find an image or photograph that portrays the mood or

message of the document or site—this may not necessarily be related to

the content—then choose a range of colours from the image.

Example 2: Choose a ‘base’ colour (you can take this from an image that

will feature in your publication), then use colour theory to find colours

that harmonize with it.

Don’t underestimate the

importance of colour choice

when designing your website.

No matter how professional your

layout or how interesting your

content, incorrect use of colour

can result in pages that are ugly

and/or difficult to read.

Planning & Design

Designing With Colour

Example 1: Using an image or photograph

Suppose we’re creating a brochure for a health spa. The first thing we

need to do is think about the image we want to portray. We associate

health spas with calmness and tranquility—it makes sense, therefore, not

to use harsh or vibrant colours in our layouts.

1 Choose a few images that suit the mood. You could use a photograph,

or an image found on the Internet or in a book or magazine (you’ll

need to scan the image so that you can open it on your computer).

The colour palettes of the following photographs all reflect the mood

we want our brochure to convey.

Looking at these images, it’s obvious that they fall into two distinct

groups: one group contains various shades of blue along with natural

and more muted tones; in the other group, softer earth tones

predominate.

2 At this point, you (or your client) must decide which colour palette to

use. For this tutorial, we’ll assume that our health spa client prefers the

muted tones of the ‘pebbles’ close-up photo.

3 You can now follow the procedure outlined in the Colour Schemes

tutorial to create your custom colour scheme (see Creating custom

colour schemes from scratch ).

Planning & Design

Designing With Colour

We suggest you start by creating lots of

squares and fill them with a range of

colours from the image.

When you have a

good selection

from which to

choose, play

around with the

swatches and try

different groupings

before settling on

your final five

scheme colours.

4 If the choice is not obvious to you, create several different schemes

using variations of your colour swatches. You can then switch between

schemes to see how the look and feel of the publication changes.

Can’t decide which colour palette to use? It’s a good idea to create a WebPlus colour

scheme for each palette, and then ‘mock up’ a page using each scheme.

You might also do this if you’re designing a site for a client and want to present them with

a few options from which to choose.

Planning & Design

Designing With Colour

Example 2: Using colour theory

This method starts with the selection of a ‘base’ colour. You can choose

any colour you prefer.

In our example, we’ll take our base colour from a photograph that will

feature on the website of a fictitious holiday company.

1 Follow the procedure outlined in the Colour Schemes tutorial to extract

a wide range of colours from your image.

Don’t forget to add the Median

adjustment first in PhotoLab , to

create blocks of colour to work with.

Start with the ‘big’ colours. These are

the ones you see first when you

glance at the image: skin, hair, and

shirt. Then extract the ‘small’

colours—mouth, eyes, highlights and

shadows.

You need a good range of colours,

but don’t overdo it or you’ll

find it difficult to make your

selection. You might only

extract eight or ten colours,

or you might find you need

more. The exact number will

vary depending on your image.

2 Group your results by colour, then

sort each colour group by value from

dark to light, deleting any colours that

are too similar.

3 Select any one of your colours as your ‘base.’ Locate the colour on the

colour wheel to determine whether it is warm or cool, and to see its

relationship to other colours.

Our warm colours are found in the red areas of girl’s shirt, and in

her hair and skin tones. Choose from these colours if your aim is to

give a softer, gentler look and feel to your publication.

Our cool colours are derived from the blue and white areas of the

shirt, and from the eyes. These colours are generally used when a

more serious or business-like approach is required.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: