Visual communication element: proportion

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which statement best describes proportion in a visual design?

A The relationship in size between the parts of a design and the whole

B The number of colours used in a design

2. A dashboard shows a tiny chart and a huge logo. What is the proportion problem?

A The logo is too large relative to the chart, which is the important data

B The chart uses too many colours

3. Which choice uses proportion to show that a heading is more important than body text?

A Make the heading the same size as the body text

B Make the heading much larger than the body text

4. True or false: Proportion only depends on the exact pixel size of one element on its own.

A True: only one element's pixel size matters

B False: it depends on size compared with other elements and the whole

5. A student enlarges a photo on a poster so it is much bigger than the title and the data. Which element has been changed?

A Proportion (relative size of the elements)

B Data validation

Match the Pairs

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

Left column		Right column
1proportion		Aimg { width: 25%; }
2width: 70%; (main chart) and width: 30%; (legend)		BThe relationship in size between the parts of a design and the whole
3A title that is much larger than the body text shows a strong difference in proportion		CThe heading is smaller than the body text, so the proportions are reversed and the important element looks least important.
4Keeping an image in proportion to the page by sizing it as a share of the whole		Dh1 { font-size: 48px; } p { font-size: 16px; }
5h1 { font-size: 12px; } p { font-size: 30px; }		EThe logo takes up almost the whole width while the main chart is tiny, so the proportions do not match what matters most.
6#logo { width: 90%; } #chart { width: 10%; }		FThe chart is given a larger share of the layout than the legend, so it looks more important

Definitions

proportion

Fill in the Blanks

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

.sidebar { _____: 25%; }

.main { width: 75_; }

h1 { font-size: 2__; }

.icon { width: 5%; ______: auto; }

.card { ____________: 16 / 9; }

Spot the Error

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

Question 1

A h1 { font-size: 32px; }

B p { font-size: 16px; }

C small { font-size: 40px; }

Question 2

A .page { width: 100%; }

B .sidebar { width: 80%; }

C .main { width: 75%; }

Question 3

A .logo { width: 120px; }

B .banner { width: 60px; }

C .icon { width: 24px; }

Question 4

A .hero {

B height: 500vh;

C width: 100%;

D }

Question 5

A h1 { font-size: 0.5em; }

B h2 { font-size: 1.5em; }

C p { font-size: 1em; }

Answer Key

Visual communication element: proportion

Section A: Quick Questions

A — The relationship in size between the parts of a design and the whole

A — The logo is too large relative to the chart, which is the important data

B — Make the heading much larger than the body text

B — False: it depends on size compared with other elements and the whole

A — Proportion (relative size of the elements)

Section B: Match the Pairs

proportion → The relationship in size between the parts of a design and the whole

width: 70%; (main chart) and width: 30%; (legend) → The chart is given a larger share of the layout than the legend, so it looks more important

A title that is much larger than the body text shows a strong difference in proportion → h1 { font-size: 48px; } p { font-size: 16px; }

Keeping an image in proportion to the page by sizing it as a share of the whole → img { width: 25%; }

h1 { font-size: 12px; } p { font-size: 30px; } → The heading is smaller than the body text, so the proportions are reversed and the important element looks least important.

#logo { width: 90%; } #chart { width: 10%; } → The logo takes up almost the whole width while the main chart is tiny, so the proportions do not match what matters most.

Section C: Definitions

proportion — The relationship in size between the parts of a design and the whole, such as how large one element is compared with the others around it.

Section D: Fill in the Blanks

.sidebar { width: 25%; }

.main { width: 75%; }

h1 { font-size: 2em; }

.icon { width: 5%; height: auto; }

.card { aspect-ratio: 16 / 9; }

Section E: Spot the Error

C — The small text is now bigger than the heading, so the relative sizes no longer match their importance. Small text should be smaller than body text, for example 12px.

B — A sidebar at 80% dominates the page and, with the 75% main area, adds up to more than the whole. It should be a small part of the whole, such as 25%.

B — The banner is meant to be the largest element, but 60px makes it smaller than the logo. Its size should be much larger, such as 600px, to keep the proportions right.

B — 500vh makes the hero section five times taller than the screen, so it overwhelms the page. A proportion of the screen such as 50vh keeps it in balance.

A — The main heading is now smaller than the paragraph text, so the relative sizes are wrong. The h1 should be the largest, for example 2em.