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:
- Monochromatic- are made up of tints, tones and shades of a single hue.
- Analogous- are a group of three colours, that are adjacent to each other on the colour wheel.
- 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:
- Deuteranopia- the inability to see the colour green.
- Protanopia- the inability to see the colour red.
- Tritanopia- the inability to see the colour blue
- 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