Elements of visual communication: line, shape and texture

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A designer adds a thin line running from a headline down to a 'Sign up' button. What is the line's main job?

A It adds a rough, physical feel to the page

B It leads the viewer's eye from the headline to the button

2. Which choice uses SHAPE to give meaning?

A A red octagon on a stop warning

B A dotted line running along the page edge

3. A designer wants a flat button to look raised and touchable. Which element should they add?

A Texture, such as a subtle shadow and grain

B Line, such as a long arrow pointing away

4. True or false: line, shape and texture work alone, so a designer should never combine them with colour, type or space.

A False: they are combined with colour, type and space

B True: each element must be used on its own

5. Which is the better use of shape to suggest a friendly, approachable app for young children?

A Sharp, narrow triangles and jagged edges

B Soft, rounded circles and curved corners

Match the Pairs

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

Left column		Right column
1border-bottom: 2px solid #333;		A<hr style="width: 80%;">
2border-radius: 50%;		BThe shapes do not match the message: sharp angular shapes feel tense and aggressive, so rounded shapes and curves should be used for calm
3Texture adds depth to a flat design by giving a surface a tactile, layered look		Cbox-shadow: 4px 4px 8px gray;
4A line can lead the viewer's eye across the screen towards a key item		DStrong texture behind text makes it hard to read, so keep texture subtle or use it only on backgrounds and large areas
5Using only sharp triangles and spikes for a calm meditation app		EAdds a line under an element that separates content and leads the eye along the page
6A busy, heavy texture placed behind all of the body text on a page		FTurns a square image or box into a circle, using shape to make it feel friendly and soft

Definitions

line, shape, texture

Fill in the Blanks

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

h2 { border-bottom: 3px _____ #333; }

a.nav { text-decoration: _________; }

.circle { border-radius: ___; }

.btn { _____________: 8px; }

.paper { background-image: ___(grain.png); }

Spot the Error

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

Question 1

A .divider {

B border-top: 2px line #333;

C width: 100%;

D }

Question 2

A .avatar {

B border-radius: 50;

C width: 80px;

D height: 80px;

E }

Question 3

A .hero {

B color: white;

C background: url(wood.png);

D background-repeat: tile;

E }

Question 4

A .button {

B background: #ddd;

C box-shadow = 0 4px 6px #888;

D }

Question 5

A <svg width="100" height="100">

B <rect width="80" height="80"

C fill="teal" />

D </div>

Answer Key

Elements of visual communication: line, shape and texture

Section A: Quick Questions

B — It leads the viewer's eye from the headline to the button

A — A red octagon on a stop warning

A — Texture, such as a subtle shadow and grain

A — False: they are combined with colour, type and space

B — Soft, rounded circles and curved corners

Section B: Match the Pairs

border-bottom: 2px solid #333; → Adds a line under an element that separates content and leads the eye along the page

border-radius: 50%; → Turns a square image or box into a circle, using shape to make it feel friendly and soft

Texture adds depth to a flat design by giving a surface a tactile, layered look → box-shadow: 4px 4px 8px gray;

A line can lead the viewer's eye across the screen towards a key item → <hr style="width: 80%;">

Using only sharp triangles and spikes for a calm meditation app → The shapes do not match the message: sharp angular shapes feel tense and aggressive, so rounded shapes and curves should be used for calm

A busy, heavy texture placed behind all of the body text on a page → Strong texture behind text makes it hard to read, so keep texture subtle or use it only on backgrounds and large areas

Section C: Definitions

line, shape, texture — Building-block design elements combined with colour, type and space: lines lead the eye, shapes give meaning and texture adds depth.

Section D: Fill in the Blanks

h2 { border-bottom: 3px solid #333; }

a.nav { text-decoration: underline; }

.circle { border-radius: 50%; }

.btn { border-radius: 8px; }

.paper { background-image: url(grain.png); }

Section E: Spot the Error

B — 'line' is not a valid border style. A line that separates and guides the eye needs a real style such as solid, so it should be '2px solid #333'.

B — border-radius needs a unit. A bare 50 is invalid, so the shape will not become a circle. It should be 50% on a square box.

D — 'tile' is not a valid value. To repeat a texture image across the background, use background-repeat: repeat.

C — CSS properties use a colon, not an equals sign. The shadow that adds depth should be written box-shadow: 0 4px 6px #888;

D — The shape is drawn inside an <svg> element, so it must be closed with </svg>, not </div>.