Summary:

Definitions:

<aside> 💡 Colour theory- This is the study of how colours work together, and how they affect our emotions and perceptions.

</aside>

<aside> 💡 Hue- is the feature of colour that distinguishes it as red, blue green or any other specific colour on the colour wheel.

</aside>

<aside> 💡 Saturation- is the intensity and vibrancy of colour, ranging from fully saturated (vivid) to desaturated (dull).

</aside>

Colour Schemes:

1. Monochromatic- are made up of tints, tones and shades of a single hue.
2. Analogous- are a group of three colours, that are adjacent to each other on the colour wheel.
3. Complementary- are made from two colours, that are opposite each other on the colour wheel.

Example showing monochromatic, analogous and complimentary colours.

Experimenting with Colour Schemes:

We were told to Adobe Colour to explore Monochromatic, Analogous and Complimentary colours.

Example showing experimenting with monochromatic, analogous and complimentary colours.

I really enjoyed this exercise of using Adobe colour, to experiment with colour schemes. It helped me to understand the differences between monochromatic, analogous, and complementary colours, because I was confused about it before.

Mixing Models:

1. RGB (additive):

• Allows you to create colours by mixing red green and blue light.
• More light you add, the brighter the colour mix becomes.
• If you mix all three colours of light, you get pure white light.

Example showing RGB (additive)

2. CMYK (subtractive)

• Stands for Cyan, Magenta, Yellow, Key/Black
• Colours start as white, and each layer added reduces brightness to make the right colour.
• All colours mixed together, make black.

Example showing CMYK (subtractive)

<aside> 💡 Colour Psychology- This is the study of how colours affect perceptions and behaviours.

</aside>

Branding:

• Customer Expectations
• Customer Preferences
• Brand Message
• Competitor Colours
• Consistency

Colour and their meanings

Colour Blindness:

<aside> 💡 This is the inability or decreased ability to see certain colours, or recognise colour differences.

</aside>

Types:

1. Deuteranopia- the inability to see the colour green.
2. Protanopia- the inability to see the colour red.
3. Tritanopia- the inability to see the colour blue
4. Achromatopsia- the inability to see all colours.

Discovering Web Accessibility:

Example showing deuteranopia

Example showing protanopia

Example showing tritanopia

Example showing achromatopsia

Material Design Colour System:

<aside> 💡 It can help you create a colour theme that reflects your brand or style.

</aside>

Colour Usage & Palettes:

• It helps you apply colour to you UI in a significant way.
• You select a primary and secondary colour to represent your brand.
• Dark and light variants of each colour are applied in different ways.

Colours & Themes:

• These are designed to ensure accessible text, and distinguish UI elements and surfaces from one another.

The Material Design palette tool are there to help you pick colours.

Example of primary and secondary palette: 1. Primary colour, 2. Secondary colour 3. Light & dark forms

Parts of the Material Design Colour System:

1. The Baseline

It includes default colours for:

• Primary & secondary colours
• Variants of primary & secondary colours
• Additional UI colours, for example for backgrounds.

Example of a baseline material colour theme

2. Primary Colour:

<aside> 💡 This is the colour displayed most frequently across your app screen.

</aside>

3. Distinguish UI Elements:

• To create contrast between UI elements, for example top app bar, you can use dark forms of primary colours.
• Used to recognise elements within a component, for example icon in the bottom right corner.

Example of UI uses a primary colour and two primary variants.

4. Secondary Colours:

• It provides more ways to distinguish your product.
• It’s optional and should be should applied rarely to certain parts of UI.

Best for:

• Floating action buttons
• Selection controls, for example sliders
• Highlighting selected text
• Progress bars
• Links and headlines

Dark & Light Secondary Variants:

• A colour theme can use your primary colour, secondary colour and dark and light variants of each colour.

Example of UI uses colour theme with primary colour, primary variant and secondary colour.

Colour Systems:

1. Pantone Colour Matching System (PMS)-

This is a colour standardisation system that helps in colour identification and matching.

• It uses the Pantone numbering system to identify colours.

• These numbers consist of a three or four digit number followed by the letter C (coated), U (uncoated or M (matte).

• It consists of around 1,114 colours. It helps to avoid colour variability’s between different types of print and digital media.

  

  Example of PMS

Text & Colour:

• Use the correct colour contrast for text and background.
• Making sure the text is legible against the background colour.
• Using colours that fit well together.

We were told to pick a band to design a poster, using a 60 pixel grid dividing into one plane, three planes, and two five planes. We had to use visual hierarchy, image, a play button at the bottom, and three buttons at the top.

Using Adobe Colour ‘Lab’ to get the colours for my typeface

I found making a poster using Adobe colour “lab” really accurate and useful to find colour within an image.

Using concert/band info to create a typeface

I chose Picture This, I experimented with moving the colours with lightest to darkest in the first one, and darker to lightest in the second one. I think the last one works best because it’s easier to read the body text against the lighter colour.

Colour & Culture:

• The behaviour of humans have a different impact and reflect on the cultural aspect of humans.
• Asian, Middle East, European and American culture has rich values that make people who’re living there unique.
• They keep colours to show value of each different culture.
• Some, religion plays a big role influencing factor.

Graph showing differences and similarities in cultures with colour and meaning.

https://www.figma.com/file/co2VUFduCT6oMMpfqn74pF/Colour-Theory?type=design&node-id=0%3A1&mode=design&t=YouzQ1jA3Gh8mrDX-1

Reflection:

References: