Digital Marketing Essentials · Chapter 2 · Class 3

Principles of good web design

Design that helps people act.

Digital Marketing Program · Canadian College

Class 3 · 2 hours

Today's plan

By the end of class you can

Explain why conversion is the real test of design.

Name six principles of good web design.

Audit a real homepage and suggest fixes.

01

Why design matters

Your website is the home of your brand online.

01 · The website

The most important digital platform

For almost any business, it's the website.

Apple's homepage in 2017 showing iPhone 8 and iPhone X

Apple.com homepage, 2017 (from the course slides).

You own it

Social media rules can change. Your website is yours.

Everything leads there

Ads, posts, emails and searches send people to it.

Open 24/7

It sells, books and answers questions all day.

Source: Course slides, Principles of Good Web Design, Canadian College.

01 · Quality

Looks vs. results

A cluttered 2010s tourism website with many coloured buttons

ChesterTourist.com, an example from the course slides.

1

We usually judge a website first by its visual appeal.

2

But a beautiful site can still fail, and a plain site can sell a lot.

3

The ultimate measure of quality: its ability to drive conversions.

Source: Course slides, Principles of Good Web Design, Canadian College.

01 · Canada · 2026

Design for mobile too

1

Almost half of web page views in Canada come from phones.

2

Small screens, thumbs, short attention: every principle matters more.

3

Speed counts. Google's target: the main content loads in 2.5 seconds or less.

48%of Canadian page views on mobile

Sources: StatCounter Global Stats, desktop vs. mobile market share, Canada, September 2026 (desktop 52.2%, mobile 47.8%); Google Search Central, "Understanding Core Web Vitals" (LCP ≤ 2.5 s).

01 · Quick check

Quick check

What should be the ultimate measure of a website's quality?

Looks matter, but the real test is whether visitors take the action you want.

Why is the website a business's most important digital platform?

Ads, posts and emails all lead to the website, and the business controls it.

About what share of page views in Canada come from mobile phones?

StatCounter, September 2026: 47.8% mobile, 52.2% desktop.

02

Design for conversion

Every decision, with the end goal in mind.

02 · The mindset

Start with the end goal

Ask: does this design maximize the conversion rate?

A man looking closely at his laptop screen
1

Every decision

Colours, photos, buttons and text all serve one goal.

2

No magic formula

There is no single "perfect" design for every site.

3

Principles + experience

Follow proven principles, then test and learn from real users.

Source: Course slides, Principles of Good Web Design, Canadian College.

02 · Usability

"Don't make me think"

The famous rule from Steve Krug's usability book.

1

The average user should find what they want, or do what they came to do…

2

…without too much thought…

3

…and without wrong clicks.

Cover of Don't Make Me Think, Revisited by Steve Krug

First published 2000; 3rd edition "Revisited".

Sources: Course slides, Principles of Good Web Design; Steve Krug, Don't Make Me Think, Revisited: A Common Sense Approach to Web and Mobile Usability, 3rd ed. (New Riders/Pearson).

02 · Activity

Try it: the five-second test

Look at the page for 5 seconds. Then answer from memory.

maplesmiledental.example
ServicesTeamReviewsContact

Gentle dental care in Burnaby

New patients welcome. Direct billing to your insurance.

Book a free consult
★ 4.9 · 600 reviewsOpen SaturdaysNear Metrotown

Ready?

The page will appear for 5 seconds.

5

The questions appear when the time is up.

1

What does this business offer?

2

Who is it for, and where?

3

What should you do next?

Illustration: an invented business. The five-second test is a common usability method.

02 · Scanning

A billboard, not a brochure

People scan web pages. They rarely read every word.

A roofing company website with long paragraphs of text

Brochure ✕

A wall of text. Users must read to find the point.

A construction website with a large photo, short headline and buttons

Billboard ✓

One big message and one clear action, readable in seconds.

Sources: Course slides (Bill West Roofing and "Constructo" theme screenshots); Nielsen Norman Group, "F-Shaped Pattern of Reading on the Web" (2006, updated 2017).

03

Six design principles

A checklist you can use on any website.

03 · Principles 1–3

Principles 1–3

Tap each card.

Sources: Course slides, Principles of Good Web Design; Laws of UX, "Jakob's Law".

03 · Principles 2–3 in action

Hierarchy and areas in action

Apple's homepage showing iPhone 11 Pro large at the top

Apple.com, 2019: the newest product is biggest and first.

A long apartment website page divided into clear sections

Clear areas, top to bottom

Hero headline + main button
Services what we offer
Photo gallery see the clinic
Reviews ★ 4.9 from patients
Pricing clear costs
Contact map, hours, button

Source: Course slides, Principles of Good Web Design (Apple homepage and apartment website examples).

03 · Principles 4–6

Principles 4–6

Tap each card.

Sources: Course slides, Principles of Good Web Design; W3C, WCAG 2.2 (Oct. 5, 2023).

03 · Principles 4–5 in action

One page, one action

A car landing page with the same Book your test button at the top and bottom
1

One goal: book a test drive. The same button appears twice.

2

The button looks clickable: colour, shape, and an action word.

3

A small reason to act now: a discount for booking.

Car landing page example from the course slides.

03 · Principle 6 · What's new

Accessibility helps everyone

1

The global standard is WCAG 2.2 (Web Content Accessibility Guidelines), from 2023.

2

Normal text needs a contrast ratio of at least 4.5:1 with its background.

3

Add alt text (= a short description) to images for screen readers.

4.5:1minimum contrast for normal text

Sources: W3C Web Accessibility Initiative, "WCAG 2.2 is a W3C Recommendation" (Oct. 5, 2023; 9 new success criteria); WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum).

03 · Game

Helps or hurts conversion?

Drag each card into a box, or tap a card and then tap a box.

Music that plays automatically
One clear "Book now" button
Five pop-ups in the first minute
Logo top-left that links home
Light grey text on a white background
Reviews placed next to the price

Helps

Hurts

Review · Glossary

Words from today

Usability · how easy a site is to use

Conversion · the action you want

Owned media · channels you control

Scanning · looking quickly for key words

F-pattern · how eyes scan a page

Conventions · the usual way sites work

Visual hierarchy · important = bigger, higher

Hero · the top section of a page

CTA · call to action, like "Book now"

Landing page · one page, one goal

A/B test · compare two versions

Accessibility · usable by everyone

WCAG · accessibility guidelines

Contrast · difference between text and background

Alt text · a description of an image

Core Web Vitals · Google's speed and stability scores

In-class assignment · 40 min · Individual

Homepage design audit

Audit the homepage of one real Canadian business.

1

5-second test

What, for whom, and what to do next?

2

Score 6 principles

1 to 5 each, with evidence. Check mobile too.

3

Top 3 fixes

Ranked by impact on conversions.

Ideas for websites

a local restauranta dental clinica roofing companya hair salona language schoola car dealeror your own choice
Individual work No AI tools Upload a Word file or PDF

In-class assignment · Steps

Your steps

1
5 min

Choose and test: pick the website, note its type and main conversion, do the 5-second test.

2
15 min

Score the 6 principles from 1 to 5. Write one piece of evidence for each.

3
5 min

Mobile check: open it on your phone. Take 2 screenshots.

4
12 min

Top 3 fixes, save and upload: DME3_FirstName_LastName

Time left

40:00

Many thanks

Take these home

1

Good design is design that converts, not only design that looks nice.

2

Don't make me think: a billboard, not a brochure.

3

Use the six principles as your checklist, on desktop and mobile.