# Week 3: UI Design Elements - Colour

Last week we learnt about design principles to create wholesome interfaces. We also explored layouts and grids to balance interfaces. This week we will explore the elements that create aesthetic visual designs. The key elements of UI design include:

Colour: The use of colours to draw attention, convey meaning, and create a pleasing aesthetic.
Typography: The style and appearance of text, including font choice, size, spacing, and colour.
Imagery: The use of icons, illustrations, photos, and other graphics to enhance the interface and provide visual context.

# Colour:

Colour is a powerful visual element that can evoke emotions, convey meaning, and create visual interest. Designers use colour theory principles such as hue, saturation, value, complementary colours, and colour harmonies to create effective colour schemes that reinforce the brand, guide users, and enhance aesthetics.

Colour theory is a foundational aspect of UI design, guiding how colours are chosen and combined to create visually appealing and effective interfaces.

# Colour Wheel:

The colour wheel is a circular diagram of colours arranged by their chromatic relationship. It helps designers understand the relationships between colours and how they can be combined.

Primary Colours: Red, blue, and yellow. These colours cannot be created by mixing other colours.
Secondary Colours: Green, orange, and purple. These are created by mixing two primary colours.
Tertiary Colours: These are created by mixing a primary colour with a secondary colour, resulting in hues like red-orange and blue-green.

# Colour Harmony:

Colour harmony involves combining colours in a way that is pleasing to the eye. It ensures that the colours used in the UI design work well together and create a balanced, harmonious look.

Complementary Colours: Colours opposite each other on the colour wheel (e.g., red and green). They create high contrast and can make elements stand out.
Analogous Colours: Colours next to each other on the colour wheel (e.g., blue, blue-green, and green). They create a cohesive and serene design.
Triadic Colours: Three colours evenly spaced around the colour wheel (e.g., red, yellow, blue). This scheme provides vibrant and balanced contrast.
Split-Complementary Colours: A base colour and the two colours adjacent to its complementary colour (e.g., blue with yellow-orange and red-orange). It offers strong visual contrast with less tension than a complementary scheme.

# Psychology of Colour

Different colours evoke different emotions and reactions. Understanding the psychology of colour helps in choosing the right colours for a UI that aligns with the desired user experience.

Red: Energy, passion, urgency (e.g., for alerts and notifications).
Blue: Trust, calmness, professionalism (e.g., for corporate and financial applications).
Green: Growth, tranquility, health (e.g., for eco-friendly products or wellness apps).
Yellow: Happiness, attention, caution (e.g., for highlights and warnings).
Black: Elegance, power, sophistication (e.g., for luxury brands and dark modes).
White: Cleanliness, simplicity, purity (e.g., for minimalist designs and backgrounds).

# Warm and Cool Colours

Warm Colours: Reds, oranges, and yellows. They evoke warmth and energy and can create a sense of urgency or attention.
Cool Colours: Blues, greens, and purples. They are calming and soothing, often used to create a professional and trustworthy feel.

# Accessibility Conisiderations

Designing with accessibility in mind ensures that the interface is usable by people with different abilities.

Colour Blindness: Consider common types of colour blindness (e.g., red-green) and ensure critical information is not conveyed by colour alone.
Assistive Technologies: Ensure compatibility with tools like screen readers by using colour in combination with other visual cues (e.g., icons, patterns).

# Contrast and Readability

Ensuring sufficient contrast between text and background is crucial for readability and accessibility. Poor contrast can make text difficult to read, especially for users with visual impairments.

Contrast Ratios: Following WCAG guidelines (opens new window), which recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Text and Background: Choosing colour combinations that enhance readability and do not strain the eyes.

# Colour Consistency

Maintaining consistency in colour usage across the UI helps create a cohesive and professional look.

Colour Palettes: Developing a consistent colour palette that aligns with the brand identity.
Repetition: Using the same colours for similar elements (e.g., buttons, links) to help users quickly recognize functionality.

# Current Trends and Innovations

Staying updated with current trends in colour usage can help keep the design fresh and modern.

Dark Mode: Increasingly popular for its reduced eye strain and battery-saving benefits.
Gradients: Using gradients for backgrounds, buttons, and other elements to add depth and interest.
Minimalism: Favouring simple, clean designs with limited colour palettes to enhance usability and focus.
Figma Colours: moving from styles to variables to allow change of modes and themes