Visual communication element: form

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which best describes 'form' as a visual communication element?

A The outline that separates one area of a design from another

B The appearance of a 3D object, or the illusion of depth on a flat screen

2. A designer adds a soft shadow under a button so it looks raised off the page. What element is being used?

A Form

B Texture

3. A flat circle becomes a ball when one side is darker and the other is lighter. What creates the form?

A Shading

B A thicker border

4. True or false: a flat 2D square has form.

A True, every square automatically has form

B False, it is a shape until shading or perspective gives it depth

5. Which technique makes a road in a chart background look like it stretches into the distance?

A Perspective

B Alignment

Match the Pairs

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

Left column		Right column
1form		AThe appearance of a 3D object, or the illusion of depth on a flat screen, made with shading and perspective
2shading		Bbox-shadow: 4px 4px 8px grey;
3A 3D effect such as a drop shadow can make a flat button look raised off the page, adding form		CForm is a visual element for the appearance of 3D objects or depth, not a file format. File formats are a separate topic.
4Shading a circle with a gradient from light to dark makes it look like a solid sphere		Dbackground: radial-gradient(white, blue);
5A flat, single-colour circle with no shading is described as having strong form		EWithout shading or perspective, the circle looks flat, so it has no sense of form. Add light and dark areas to make it look 3D.
6Form means the file format of a chart, such as PNG or JPEG		FUsing lighter and darker areas on a shape so it looks rounded and solid, creating form

Definitions

form

Fill in the Blanks

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

.box { __________: 4px 4px 8px gray; }

.ball { background: _______________(white, gray); }

.scene { ___________: 600px; }

.card { box-shadow: 2px 2px 6px ____(0,0,0,0.4); }

.cube { transform-style: ___________; }

Spot the Error

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

Question 1

A .box {

B width: 100px;

C height: 100px;

D box-shadow = 4px 4px #666;

E }

Question 2

A .scene (

B perspective: 600px;

C width: 200px;

D }

Question 3

A .cube {

B width: 80px;

C transform: rotateY(30);

D }

Question 4

A .ball {

B border-radius: 50;

C background: #36c;

D box-shadow: 4px 4px #333;

E }

Question 5

A .button {

B background: #3366cc;

C box-shadow: 0 4 6px #333;

D color: white;

E }

Answer Key

Visual communication element: form

Section A: Quick Questions

B — The appearance of a 3D object, or the illusion of depth on a flat screen

A — Form

A — Shading

B — False, it is a shape until shading or perspective gives it depth

A — Perspective

Section B: Match the Pairs

form → The appearance of a 3D object, or the illusion of depth on a flat screen, made with shading and perspective

shading → Using lighter and darker areas on a shape so it looks rounded and solid, creating form

A 3D effect such as a drop shadow can make a flat button look raised off the page, adding form → box-shadow: 4px 4px 8px grey;

Shading a circle with a gradient from light to dark makes it look like a solid sphere → background: radial-gradient(white, blue);

A flat, single-colour circle with no shading is described as having strong form → Without shading or perspective, the circle looks flat, so it has no sense of form. Add light and dark areas to make it look 3D.

Form means the file format of a chart, such as PNG or JPEG → Form is a visual element for the appearance of 3D objects or depth, not a file format. File formats are a separate topic.

Section C: Definitions

form — The appearance of a three-dimensional object, or the illusion of depth on a flat screen, created using shading and perspective.

Section D: Fill in the Blanks

.box {
  box-shadow: 4px 4px 8px gray;
}

.ball {
  background: radial-gradient(white, gray);
}

.scene {
  perspective: 600px;
}

.card {
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}

.cube { transform-style: preserve-3d; }

Section E: Spot the Error

D — A CSS property is separated from its value with a colon, not an equals sign. The shadow that gives the box its 3D, raised look should be written box-shadow: 4px 4px #666;

A — A CSS rule block opens with a curly brace {, not a round bracket. The perspective property inside it creates the illusion of depth, but only if the rule is written correctly.

C — A rotation needs a unit. Without deg the browser ignores the value, so the object is not turned to show its 3D form. It should be rotateY(30deg).

B — A border-radius needs a unit such as %. Without the % the value is invalid, so the square will not be rounded into a ball. It should be border-radius: 50%;

C — Every non-zero length in a shadow needs a unit. The 4 should be 4px. Without it the shading is invalid and the button looks flat instead of raised.