USING COLOUR FOR WEBSITE DESIGN

Using Colour on your Fashion e-Commerce Website

Colour and composition work together in designs and images to create something visual that provokes an emotional response. Design refers to anything from the print on a fabric to the photography and the website where the photography is placed.

Seeing Colour in Real Life, and on a Screen

When we see an object in the real world (rather than on a screen) we are seeing reflected light – the brightness (quantity) and colour temperature (quality) effect how we perceive the colour of what we are looking at. The way our brain processes visual information also means that we ‘see’ something that isn’t real, for example, when looking at the Shades of Grey chart below it looks like the the grey shades of each square are darker on the right and lighter on the left – this is because they are being compared to the shade next to them, the squares are not gradients, but one solid colour. These type of illusions generally don’t cause problems in design but it’s good to be aware of then when planning the design of the website and images that show products.

Brand & Website Colours

Very often fashion websites have a white background, with the main text in black, and grey as an accent or compliment. This neutral scheme simply allows the pictures of the garments and accessories to stand out and not compete for the viewers attention. Even with this basic colour palette the style can be powerful and communicated the brand aesthetic without ambiguity.

Pair this palette with lots of white space and it feels pared down and luxurious, or fill the landing page with colourful images overlaid with text for impact – Zara does this well. Colours look and ‘feel’ different in the context of other colours. This simple palette is a failsafe option.

A simple and effective way to add the brand colour is with the logo and accents on the site. The Chloe website is a good example of this with the use of the beige brand colour in small amounts throughout the site. Bright colours are often used for short term events such as ‘Sales’ or special offers – red is often used as it draws the eye and is the colour of the ‘Sale’ sign.

Photography & Colour

When showing clothing and accessories online it makes sense to make the product centre of attention by using the photography to do this. How colour is used in the photographs depends on you brand or collection aesthetic. Colours can change over collections and seasons, but the brand needs to send out the message consistently or the results will be confusing to the viewer.

With studio photography the background can be any colour you choose. Usually Colorama background paper rolls are used and can creating a seamless background, although they are sometimes used dropped to the floor showing definition between wall and floor. Walls / backdrops can be painted to reproduce a particular colour. Paint colours can be easily matched in decorator and DIY shops.

In the studio, using artificial light, we have full control over the colour and light and can consistently reproduce looks, but when shooting on location or outdoors using available light it is very different.

The Couture Gallery London

The Couture Gallery boutique in Kensington creates bespoke, show stopping bridal gowns by Danish designer Britta Kjerkgaard.

For shooting this beautiful collection a mid-grey Colorama background paper in ‘Cloud Grey’ was chosen. The grey provides a neutral backdrop to all the textures and beauty of the elaborate dresses shine through.

The shop and website branding use grey accents maintaining the neutral theme throughout, the results are very elegant and focus it firmly on the beautiful gowns.

www.thecouturegallery.com

Harper Scout Beach

Independent brand Harper Scout Beach designs and sells beautiful resort wear. Designers Corinne and Lucy have created a a super desirable look in the 2019 Muse Collection.

For the studio shots a warm background Colorama was chosen in ‘Oyster’. This warm neutral is reminiscent of sand and sunshine, it also tones well with the orange brand logo.

www.harperscout.com

Seeing Colour in Real Life, and on a Screen

Brand & Website Colours

Very often fashion website have a white background, with the main text in black, and grey as an accent or compliment. This neutral scheme simply allows the pictures of the garments and accessories to stand out and not compete for the viewers attention. Even with this basic colour palette the style can be powerful and communicated the brand aesthetic without ambiguity.

Photography & Colour

The Effect of Weather & The Seasons

The UK is know for its dull weather – grey clouds which cast a grey light. The light diffused through the clouds is often very soft – that is, shadows are minimal and contrast is low. This has the benefit of reproducing a wide range of tones in photographs, thinking in black and white, this includes many shades of grey between – lovely for black and white portraits (when used from the front, not top of the subject) and minimalist landscapes with graduated tones and interesting shapes. When it comes to colour – think about what people wear on a daily basis, and traditional British fabrics lots of black, grey, navy, moss green, camel and muted colours, these colours are complimented with the light and create a pleasing, natural image. Conversely, think about bright colours, sunshine brings out strong colours and pastels which can be muddied by heavy grey clouds. Around ‘party season’ Christmas and New Year we heavily rely on artificial light as there is so little natural light with short days and often thick cloud. In soft artificial light, warm rich darker colours look good – burgundy, burnt orange, etc. these are complemented by the lighting whereas pastels look dull in this type of lighting. Of course these are generalisations about colour and light, and sometimes we want to intentionally create interest or tension by using what we know to create something contrasting, by juxtaposing in an attention grabbing way.

If you have any comments or questions or have a topic for an article, please get in touch.