Visual communication principle: harmony

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which best describes harmony in a visual design?

A Every element looks as different as possible to stand out

B Elements work together so the design feels unified and pleasing

2. A dashboard uses a blue and teal palette for every chart. What does this show?

A A lack of harmony

B Harmony through matching colours

3. Which design shows more harmony?

A All buttons are rounded rectangles in the same style

B Buttons are mixed: stars, triangles, circles and sharp boxes

4. A slide uses a bright red heading, neon green body text and a purple background. What is the problem?

A The colours clash, so harmony is reduced

B The colours create strong harmony

5. Which is an example of a consistent style that supports harmony?

A Using the same font, icon style and colour scheme on every screen

B Changing the font and icon style on every screen

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1harmony		AMatching colours and shapes that belong together, giving the visual a harmonious look.
2colours: blue, light blue, white; shapes: all rounded		BThe elements of a design work together so it feels unified and pleasing rather than clashing.
3A consistent style keeps harmony by using the same fonts, colours and icon style on every part of a dashboard.		CClashing colours, shapes and fonts with no shared style, so the design lacks harmony.
4Matching shapes helps harmony because every chart element uses the same rounded look.		Dfont: Arial; icons: outline; palette: 3 colours
5Title: red serif; Buttons: neon green square; Charts: purple comic font		EThe style is inconsistent across pages, so the visualisation feels disjointed and not harmonious.
6Page 1: flat blue icons; Page 2: 3D red icons; Page 3: sketch icons		Fborder-radius: 8px; /* all buttons and cards */

Definitions

harmony

Fill in the Blanks

Complete each line of code by filling in the missing parts.

h1, h2, p { ___________: Arial; }

.btn, .card { _____________: 8px; }

:root { --main: #1a4d8f; } h1 { color: ___(--main); }

:root { ______: #1a4d8f; } a { color: var(--main); }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .card (

B color: #1B4F72;

C border: 2px solid #1B4F72;

D }

Question 2

A h1, h2, p {

B font-family Arial;

C color: #1B4F72;

D }

Question 3

A button {

B background: #2E86C1;

C color: white;

D border-radius: round;

E }

Question 4

A set primary ← "#1B4F72"

B set headingColour ← primary

C set buttonColour ← "#FF0000"

D set borderColour ← primary

Question 5

A for each button in page

B set button.radius ← random()

C set button.colour ← primary

D end for

Answer Key

Visual communication principle: harmony

Section A: Quick Questions

B — Elements work together so the design feels unified and pleasing

B — Harmony through matching colours

A — All buttons are rounded rectangles in the same style

A — The colours clash, so harmony is reduced

A — Using the same font, icon style and colour scheme on every screen

Section B: Match the Pairs

harmony → The elements of a design work together so it feels unified and pleasing rather than clashing.

colours: blue, light blue, white; shapes: all rounded → Matching colours and shapes that belong together, giving the visual a harmonious look.

A consistent style keeps harmony by using the same fonts, colours and icon style on every part of a dashboard. → font: Arial; icons: outline; palette: 3 colours

Matching shapes helps harmony because every chart element uses the same rounded look. → border-radius: 8px; /* all buttons and cards */

Title: red serif; Buttons: neon green square; Charts: purple comic font → Clashing colours, shapes and fonts with no shared style, so the design lacks harmony.

Page 1: flat blue icons; Page 2: 3D red icons; Page 3: sketch icons → The style is inconsistent across pages, so the visualisation feels disjointed and not harmonious.

Section C: Definitions

harmony — Harmony is when the elements of a design, such as colours, shapes and style, work together so the visual feels unified and pleasing rather than clashing.

Section D: Fill in the Blanks

h1, h2, p { font-family: Arial; }

.btn, .card { border-radius: 8px; }

:root { --main: #1a4d8f; }
h1 { color: var(--main); }

<link rel="stylesheet" href="style.css">

:root { --main: #1a4d8f; }
a { color: var(--main); }

Section E: Spot the Error

A — A CSS rule opens its declarations with a curly bracket. Line 1 should be .card { so the matching colours on the card are applied and the design looks unified.

B — A CSS declaration needs a colon between the property and its value. It should be font-family: Arial; so every text element shares one font, which keeps the style consistent.

D — border-radius needs a length such as 8px, not the word round. Using the same rounded corner size on every button keeps the shapes in harmony.

C — Hard-coding a clashing red breaks the colour scheme. It should be set buttonColour ← primary so the buttons match the other elements and the design stays in harmony.

B — A random radius gives every button a different shape. It should be a fixed value such as 8 so all the shapes match and the style stays consistent.