How colour enhances my products
Discover more from A Bit Gamey
How colour enhances my products
Colours communicate meaning
A newly qualified driver stopped at red traffic lights. Shortly after, a police car pulled up behind, unsettling the new driver. In due course, the lights changed to amber then green. However, the flustered new driver failed to engage the gears and pull away before the lights returned to red. As tensions raised, the process repeated with the lights again returning to red. The policeman exited his car and went to have a word with the new driver. The nervous young driver wound down their window. The policeman said, I’m sorry we do not to have a colour to your liking. Is there a particular one you are waiting for?
🖍️ Use of colour
Colours, like features, follow the changes of emotion. - Pablo Picasso
When considering how to use colour in a product I am developing, there are three key factors I bear in mind. First, who is the target audience? I think about their age, gender, interests and cultural background. Second, what’s the purpose of the product? What does it do and how should users feel? Third, how do colours support the product’s brand identity and design?
🧭 Guidelines
There’s a reason we don’t see the world in black and white. - Celerie Kemble
Colour is a powerful tool that can be used to create a variety of effects in product’s design. When used effectively, colour helps to attract attention, create a sense of mood or atmosphere, convey meaning and guide users through the product. It also makes the product more visually appealing. The Four Visual Design Principles are: Proximity, Alignment, Repetition and Contrast (including the use of colour).
When incorporating colour into my spreadsheets, apps or websites, I bear the following principles in mind:
Use a limited colour palette. This helps create a cohesive and visually appealing design.
Use contrasting colours to create visual interest, e.g. light background with dark text or vice versa.
Sparingly, use colour to highlight important information, e.g. use different colour for buttons and labels.
Create a sense of hierarchy with colour. Use darker colours for more important elements and lighter colours for less important elements.
Group related elements together using the same colour.
Use colours in a consistent way.
Align with a brand identity.
Use darker colours covey authority and trustworthiness and lighter colours convey fun.
👨💻 Technical specification of colours
When specifying colours in code, there are a few different formats that can be used. The specific format that you use will depend on the programming language being used. The most common formats are:
Hex code: This is a six-digit code that represents the colour's red, green, and blue (RGB) values. For example, the hex code for red is `#FF0000`.
RGB value: This is a three-digit code that represents the colour's red, green, and blue (RGB) values, each value ranging from 0 to 255. For example, the RGB value for red is `255, 0, 0`.
🎨 Colour palette selection
When it rains, look for rainbows; when it’s dark, look for stars. - Oscar Wilde
Constructing colour palettes is one of the most enjoyable aspects of web and app design for me. Websites and books help enormously.
Websites I enjoy using are:
Adobe Color (formerly Kuler): Enables users to create and save their own colour palettes plus get inspiration from others.
Coolors: Allows users to generate random colour palettes. Also, create and share your own.
Colour Lovers: Explore millions of user-created colour palettes.
Books I find particularly useful are:
2000 Colour Combinations by Gareth Lewis: For graphic, web, textile and craft designers. I use colour palettes from this book in my tile matching games, Scarper, including the one at the top of this post.
100 Years of Colour by Katie Greenwood: Beautiful images and inspirational palettes from a century of innovative art, illustration and design. Each year has its own colour palette.
Designer Dictionary of Colour by Sean Adams. Explores thirty colours used in art and graphic design.
➕ Other resources
Guide to Colour Theory talk by DesignerUp
Four Icon Design Tips post by Phil Martin
Branding Our Apps post by Phil Martin
Perception of colour is context dependant and in the head of the beholder. In 2015, a picture of a stripy dress posted on social media caused much heated debate. Was it blue and black or white and gold? Here’s the dress, to ruin your life all over again.
Have fun with colour.
Phil…
