Web_Designer_UK__May_2018

GET PRO DESIGN SKILLS
COLOUR &
ACCESSIBILITY
Colour and accessibility are key
things to be mindful of, but are too
often forgotten about by designers.
You may be designing something
on your nice shiny iMac with an
incredibly glossy Retina display but
not everyone will have one of
those. Screens render colours
differently and you can count on
older screens having a harder time
telling the difference between
closely matched colours.
Not only that, you have
accessibility considerations
whereby the viewer may have eye
sight difficulties or colour blindness.
Contrast will always save you here
and there are many good guides
to avoid these issues.
Check out Web AIM (Web
Accessibility in Mind) to see how
your chosen colours rate within the
AA and AAA web standards.
SCREENS RENDER
COLOURS
DIFFERENTLY AND
YOU CAN COUNT
ON OLDER
SCREENS HAVING
A HARDER TIME
TELLING THE
DIFFERENCE
CHOOSING COLOURS
1
BEST FIT
Colours can be very
subjective but are
nevertheless important when it comes
to look and feel. The personality of
your project still has a complete hold
of the colours you choose. The first
step would again be to think about
your values and what colours best fit.
It’s best to acknowledge colour
psychology before you start picking
any colour. This is because you can
really influence human behaviour and
perceptions of what is being seen by
the colour used — take warm and cold
colours, for example. Although
obvious, we have the ability to control
a reader’s feelings and behaviour just
by the colours we use.
2
LESS IS MORE
As with text, hierarchy is
important. Having some
ground rules for colour usage
prevents your artwork looking like a
pack of fruit pastilles. Think about
primary, secondary and even tertiary
colours that can be used. There’s no
real limit to how many colours you
can use but less is often more.
Knowing how many colours
you’re planning to use, will help
maintain consistency.
It’s common for more corporaterelated
designs to have less colours
than something perhaps more friendly.
Another thing to be very mindful of
is reserving a single colour for your
call-to-actions and buttons. It’s a good
idea to single out a colour so that links
and buttons are more individual and
user-friendly.
ESSENTIAL RESOURCES
ADOBE COLOR CC
adobe.ly/2wLilqq
Adobe provides a range of rules
that will help discover closely
matched colours from selecting a
primary colour. If you work with
Adobe products, save your
palette to a library to get rid of
copying and pasting.
3
CHOOSING COLOURS
Let’s start by choosing
colours since we now know
the personality and hierarchy. You can
useatoollikeAdobeColorCCtoplay
around with your colour choices. This
tool is simply a colour wheel that gives
youthefreedomtoselectandfind
colour palettes.
Focus on your primary colour first
and play with the rules that Adobe
gives you if you want help finding
other colours. These calculated rules
are a useful headstart but not
restrictive. Once you have selected
your primary colour, work through
selecting your other colours.
Remember accessibility and contrast
in your options.
4
SHADES OF COLOUR
Once you have selected
your colours, there’s a few
COLBLINDOR
bit.ly/1qSSJSu
A great tool to check your design
against colour blindness. You can
safely upload your artwork and
get a feeling of how it is to have a
colour vision handicap.
Five steps to the perfect palette
more things to think about. Lightness
and darkness will be one. Although
you have your chosen colours, there
are no rules to restrict you from using
lighter or darker versions. For example,
we may have a bright blue as our
primary colour and we are using it for
some of our foreground content. We
could darken the same blue (with a
shade of black) for a treatment in the
background. Be mindful of consistency
and not create too many variations of
your colours, but this method will
steer you clear of the fruit pastilles and
help with creating contrasting colours
basedonyourownpalette.
5
TEST AND TRY
Apply, play and change if
necessary. It’s only when
using everything in context that you
can truly gauge if your design is
working. Look back over your values
since this will help validate whether
your creation works.
Create a number of versions and
try new arrangements of colour.
There’s never a single right answer to
any creative project and the process
of experimenting is fun. If you have
options and a history of experiments,
it’s easier to see how your design has
progressed and evolved.
Make sure to get your colour right
WEB AIM COLOUR
CONTRAST CHECKER
bit.ly/2ALPtTp
Usingthistoolwillhelpensure
that your chosen colours meet
accessibility criteria. The AA and
AAA web standards will make
sure that your designs are
compliant and user friendly.
48 _________________________________________________feature