← QCE Digital Solutions Unit 2

Visual communication principle: 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.

Part of: QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 134

Understanding Visual communication principle: harmony in QCE Digital Solutions Unit 2

What it does: Repeating one font, one icon style and one small palette is a consistent style, which supports harmony. Applying the same rounded corners to every button and card matches the shapes and so creates harmony. Harmony means the colours, shapes and style fit together as one unified whole rather than clashing. Using a related colour palette across all charts makes the dashboard feel unified. Matching shapes help the elements look like they belong together. Random mixed shapes feel disjointed. Colours that fight each other make a visual feel messy and unpleasant, which is the opposite of harmony. Harmony affects how pleasing and unified the visual feels. It does not change the accuracy of the data.

Common mistakes: 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. 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.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Visual communication principle: harmony to a class →

This module's key terms are also in a printable crossword (Modules 122–139) and word search (Modules 2–139).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which best describes harmony in a visual design?
Every element looks as different as possible to stand outElements work together so the design feels unified and pleasing
Matches
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.
Applying
Meanings
Term
harmony
Meaning
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.
Practice
<style>
Testing
Gaps
h1, h2, p { : Arial; }
Check Answer
Spots
1.card (
2 color: #1B4F72;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Space Turtle' badge — Speed in Zero-G, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

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 ✓
Harmony means the colours, shapes and style fit together as one unified whole rather than clashing.
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 ✓
Using a related colour palette across all charts makes the dashboard feel unified.
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
Matching shapes help the elements look like they belong together. Random mixed shapes feel disjointed.
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
Colours that fight each other make a visual feel messy and unpleasant, which is the opposite of 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
A consistent style repeats the same choices so the whole solution looks unified.

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.

Key Term

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.

Fill in the Blanks

1. h1, h2, p { font-family: Arial; }
Hint: Type the CSS property that sets the typeface, so every heading and paragraph shares one style.
2. .btn, .card { border-radius: 8px; }
Hint: Type the CSS property that rounds corners, so buttons and cards use matching shapes.
3. :root { --main: #1a4d8f; } h1 { color: var(--main); }
Hint: Type the CSS function that reuses a stored colour value, keeping the palette matched.
4. <link rel="stylesheet" href="style.css">
Hint: Type the link type that attaches one shared CSS file so every page has a consistent style.
5. :root { --main: #1a4d8f; } a { color: var(--main); }
Hint: Type the name of the custom property that stores the main colour, as used on the next line.

Spot the Error

Question 1
A .card (
B color: #1B4F72;
C border: 2px solid #1B4F72;
D }
Line 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.
Question 2
A h1, h2, p {
B font-family Arial;
C color: #1B4F72;
D }
Line 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.
Question 3
A button {
B background: #2E86C1;
C color: white;
D border-radius: round;
E }
Line 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.
Question 4
A set primary ← "#1B4F72"
B set headingColour ← primary
C set buttonColour ← "#FF0000"
D set borderColour ← primary
Line 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.
Question 5
A for each button in page
B set button.radius ← random()
C set button.colour ← primary
D end for
Line 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.

Student with a class code? Join your class →