A Bit Gamey

Share this post

How colour enhances my products

abitgamey.substack.com

Discover more from A Bit Gamey

Sunday blog looking over Phil Martin's shoulder as he attempts to develop fun and useful mobile apps.
Continue reading
Sign in

How colour enhances my products

Colours communicate meaning

Phil Martin
Sep 17, 2023
3
Share this post

How colour enhances my products

abitgamey.substack.com
Share
Article voiceover
1×
0:00
-6:07
Audio playback is not supported on your browser. Please upgrade.

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:

  1. Use a limited colour palette. This helps create a cohesive and visually appealing design.

  2. Use contrasting colours to create visual interest, e.g. light background with dark text or vice versa.

  3. Sparingly, use colour to highlight important information, e.g. use different colour for buttons and labels.

  4. Create a sense of hierarchy with colour. Use darker colours for more important elements and lighter colours for less important elements.

  5. Group related elements together using the same colour.

  6. Use colours in a consistent way.

  7. Align with a brand identity.

  8. 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…

How Colour Enhances my Products

3
Share this post

How colour enhances my products

abitgamey.substack.com
Share
Previous
Next
Comments
Top
New
Community

No posts

Ready for more?

© 2023 Phil Martin
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing