Visual communication element: shape

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which best describes a shape in a visualisation or interface?

A A flat, enclosed area with a clear edge

B A surface that looks rough or smooth

2. A designer puts a rounded rectangle behind a group of settings. What is the shape doing?

A Adding a rough texture to the page

B Grouping related content into one panel

3. Which is a geometric shape?

A A perfect circle used as a profile photo frame

B A free-form blob drawn by hand

4. Which is an organic shape?

A A free-form, curvy blob behind a heading

B A square button with sharp corners

5. A dashboard has one bright green rounded button among grey boxes. Why use a shape like this?

A To store the data for the dashboard

B To highlight the main action so it stands out

Match the Pairs

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

Left column		Right column
1border-radius: 50%;		Aborder-radius: 60% 40% 55% 45%;
2<div class="panel">		Bbutton { background: blue; border-radius: 8px; }
3A button is a shape that highlights an action so the user knows where to click		CShapes are used to group and highlight content, for example a panel around related items or a button around an action.
4An organic shape has free-form, irregular edges instead of straight lines or perfect curves		DCreates a rectangular panel that groups related content into one enclosed area
5A circle is an organic shape because it is round.		ETurns a square button into a circle, giving it a geometric shape
6Shapes should never be used to group content on a screen.		FA circle is a geometric shape, not an organic one. Geometric shapes follow exact mathematical rules.

Definitions

shape

Fill in the Blanks

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

.panel { __________: #dfe9f5; }

button { _____________: 50%; }

.card { width: 200px; ______: 100px; }

.panel { border: 2px _____ black; }

<______>Save</button>

Spot the Error

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

Question 1

A .btn (

B width: 120px;

C height: 40px;

D border-radius: 8px;

E }

Question 2

A .panel {

B backgroud: #e0f0ff;

C padding: 16px;

D border: 2px solid #336;

E }

Question 3

A .dot {

B width: 50px;

C height: 30px;

D border-radius: 50%;

E }

Question 4

A .chip {

B display: inline-block;

C padding: 4px 12px

D border-radius: 999px;

E }

Question 5

A <buton class="pill">

B Save

C </button>

Answer Key

Visual communication element: shape

Section A: Quick Questions

A — A flat, enclosed area with a clear edge

B — Grouping related content into one panel

A — A perfect circle used as a profile photo frame

A — A free-form, curvy blob behind a heading

B — To highlight the main action so it stands out

Section B: Match the Pairs

border-radius: 50%; → Turns a square button into a circle, giving it a geometric shape

<div class="panel"> → Creates a rectangular panel that groups related content into one enclosed area

A button is a shape that highlights an action so the user knows where to click → button { background: blue; border-radius: 8px; }

An organic shape has free-form, irregular edges instead of straight lines or perfect curves → border-radius: 60% 40% 55% 45%;

A circle is an organic shape because it is round. → A circle is a geometric shape, not an organic one. Geometric shapes follow exact mathematical rules.

Shapes should never be used to group content on a screen. → Shapes are used to group and highlight content, for example a panel around related items or a button around an action.

Section C: Definitions

shape — A flat, enclosed area with a clear edge, like a button or panel, that groups or highlights content. Shapes can be geometric (circles, squares) or organic (free-form).

Section D: Fill in the Blanks

.panel { background: #dfe9f5; }

button { border-radius: 50%; }

.card { width: 200px; height: 100px; }

.panel { border: 2px solid black; }

<button>Save</button>

Section E: Spot the Error

A — A CSS rule must open with a curly brace, not a bracket. It should be .btn { so the button shape's styles are applied.

B — The property name is misspelt. It should be background so the panel shape gets its fill colour.

C — A circle needs equal width and height. With 50px by 30px the shape becomes an oval, so height should be 50px.

C — The padding declaration is missing its semicolon. It should be padding: 4px 12px; so the next line is read correctly.

A — The tag name is misspelt. It should be <button> so the browser draws a clickable button shape and it matches the closing tag.