Week 5: Website Design

by | Oct 6, 2025 | Website Design Class

Design Principles: Color, Typography & White Space

Students will learn how to activate the Divi theme, navigate the Divi Builder interface, and create their first basic page layout.

Scripture

Exodus 35:35 (HCSB) – “He has filled them with skill to do all the work of a gem cutter, a designer, an embroiderer in blue, purple, and scarlet yarn, and fine linen, and a weaver. They can do every kind of craft and design artistic designs.”

→ Tie-in: God values beauty and creativity in design — we’ll use that same care and intentionality for our websites.

Website Structure Basics

Review from Week 2
  • Ask:

    • Did you revise your Home page using sections, rows, and modules?

    • What layout choice made the biggest difference in your design?

Review any About page plans students have started.

Introduction to Design Principles
    • Why design matters: Good design keeps visitors engaged and communicates professionalism.

    • Key principles we’ll focus on:

      1. Color theory

      2. Typography

      3. White space
    Color Theory
    • Basic terms: Primary, secondary, complementary, monochromatic, analogous.

    • How to choose a color palette:

      • Start with 1–2 main colors + 2–3 accent/neutral colors.

      • Consider mood, brand personality, and audience.

    • Tools for choosing colors:

      • coolors.co

      • Adobe Color Wheel

    Class mini-activity: Students choose a color palette for their site and save it.

    Typography Basics
    • Difference between serif and sans-serif fonts.

    • Choosing 2–3 complementary fonts for:

      • Headings

      • Body text

      • Accents

    • Divi’s font controls: size, weight, spacing, and alignment.

    Tip: Readability over style — don’t sacrifice clarity.

    White Space & Balance
    • White space = breathing room for your design.

    • Helps guide the eye and prevent clutter.

    Use padding and margins in Divi to create balance.

    Class Activity – Apply Design Choices
    • Students:

      1. Apply their chosen color palette site-wide in Divi.

      2. Set consistent fonts for headings and body text.

      3. Adjust margins/padding to create a clean, balanced look.

    Teacher circulates to help match design principles with each student’s vision.

    Homework

    Homework:

    1. Finalize your site-wide color palette and fonts.

    2. Apply your design choices to both your Home page and About page.

    Upload final About page text and images into Divi.