Lesson Note: Colour Theory, Typography & Basic Layouts

Session Objectives

By the end of this session, learners should be able to:

• Understand the fundamentals of colour theory and apply it in UI design.

• Identify different typography principles and use them effectively in digital products.

• Apply basic layout structures to create balance, hierarchy, and readability in designs.

1. Colour Theory in UI Design

• Primary, Secondary, and Tertiary Colours

  • Primary (Red, Blue, Yellow) → cannot be made from mixing other colours.

  • Secondary (Green, Orange, Purple) → from mixing primaries.

  • Tertiary → mix of secondary + primary.

• Colour Harmonies

  • Complementary (opposite on the wheel) → contrast.

  • Analogous (next to each other) → harmony.

  • Triadic (three evenly spaced) → vibrant balance.

  • Monochromatic → different shades/tints of one colour.

• Psychology of Colours

  • Red: urgency, passion, danger.

  • Blue: trust, calm, corporate.

  • Green: growth, health, finance.

  • Yellow: energy, optimism.

  • Black/White/Gray: neutrality, elegance, professionalism.

• Practical Application in UI

  • Use accent colours for CTAs (buttons).

  • Maintain consistent palette for branding.

  • Ensure contrast ratios for accessibility (WCAG guidelines).

2. Typography Basics

• Typefaces & Font Families

  • Serif: professional, traditional (e.g., Times New Roman).

  • Sans-serif: clean, modern (e.g., Helvetica).

  • Display: decorative, for headings.

  • Monospace: technical, code-based contexts.

• Typography Principles

  • Hierarchy: Use font size/weight/colour to show importance.

  • Readability: Clear spacing, line height, and contrast.

  • Consistency: Stick to 2–3 typefaces max.

  • Alignment: Left-aligned for text-heavy content, centered for titles.

• Practical Application in UI

  • Headings: Large, bold.

  • Body: Medium, regular weight, readable.

  • Captions/Labels: Smaller, light or medium weight.

  • Avoid too many fonts → creates clutter.

3. Basic Layouts

• Design Principles

  • Balance: symmetrical vs asymmetrical design.

  • Alignment: ensures order and structure.

  • White Space (Negative Space): avoids clutter, enhances focus.

  • Proximity: grouping related items together.

  • Contrast: distinguishes different sections.

• Common Layouts

  • Single Column Layout → great for mobile screens.

  • Grid Layout → used in dashboards, galleries.

  • Z-Pattern Layout → scanning web content.

  • F-Pattern Layout → text-heavy sites.

• Practical UI Layout Tips

  • Stick to an 8px or 4px spacing system for consistency.

  • Use grids in Figma for alignment.

  • Apply margins and paddings for breathing space.

4. Activities

1. Colour Palette Exercise

   • Students pick a brand and create a 3–5 colour palette using Figma or Coolors.co.

   • Justify why each colour was chosen.

2. Typography Practice

   • Redesign a blog post preview with proper headings, body text, and captions.

   • Students must apply hierarchy and alignment principles.

3. Layout Challenge

   • Design a simple landing page section with:

     • Header

     • Hero text

     • CTA button

     • Image