Consistent layout and style across a visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A dashboard uses blue for sales on one chart, then red for sales on the next chart. Is this consistent design?

A No - the same data should use the same colour on every chart

B Yes - changing colours keeps the dashboard interesting

2. Which choice makes a series of infographic posters look unified?

A Pick a brand new font and layout for each poster

B Reuse the same template, fonts and colour palette on every poster

3. Two column charts both show monthly totals. Which is the better design choice?

A Use the same chart style, colours and axis format for both

B Make one a column chart and the other a 3D chart with different colours

4. Which statement about alignment and spacing is correct?

A Aligning titles and charts to the same edges, with even spacing, makes a dashboard easier to read

B Placing items at random angles and gaps makes a dashboard look more unified

5. A poster series has headings in Arial 28 pt on poster 1 but Comic Sans 20 pt on poster 2. What is the problem?

A There is no problem because every poster must look different

B The fonts and sizes are inconsistent, so the posters do not look like a set

Match the Pairs

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

Left column		Right column
1Template: same header, fonts and colours on every poster		AAligning items to the same edge so the layout looks tidy
2Left edge of every chart at x = 20px		BSimilar data is shown with a different chart style and colour each time, which makes comparison confusing.
3Similar data should use the same chart style, such as the same colours and chart type for every region		CChart 1: blue columns, Chart 2: blue columns, Chart 3: blue columns
4Equal spacing between dashboard parts keeps the layout balanced and readable		Dgap = 16px between every chart and table
5Poster 1: Arial, navy. Poster 2: Comic Sans, red. Poster 3: Times, green.		EEach poster uses different fonts and colours, so the series looks disjointed and not like one set.
6Sales chart: green bars. Profit chart: red pie. Costs chart: purple line.		FReusing a template so each poster in a series looks unified

Definitions

consistent design

Fill in the Blanks

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

h2 { ___________: Arial, sans-serif; }

.card { __________: center; }

.card { _______: 16px; }

.card { border: 1px solid #ccc; } <div class="____">Sales</div> <div class="card">Costs</div>

:root { --main: #1F4E79; } .bar { background: ___(--main); } .line { color: var(--main); }

Spot the Error

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

Question 1

A SET bodyFont = Arial

B SET headingFont = Comic Sans

C SET colour = navy

Question 2

A // Both charts show sales data

B chart1.style = ColumnBlue

C chart2.style = PieRed

Question 3

A title.align = right

B chart.align = left

C table.align = left

Question 4

A panel1.margin = 20px

B panel2.margin = 5px

C panel3.margin = 20px

Question 5

A template = MasterSlide

B poster1.use(template)

C poster2.use(template)

D poster3.use(blank)

Answer Key

Consistent layout and style across a visualisation

Section A: Quick Questions

A — No - the same data should use the same colour on every chart

B — Reuse the same template, fonts and colour palette on every poster

A — Use the same chart style, colours and axis format for both

A — Aligning titles and charts to the same edges, with even spacing, makes a dashboard easier to read

B — The fonts and sizes are inconsistent, so the posters do not look like a set

Section B: Match the Pairs

Template: same header, fonts and colours on every poster → Reusing a template so each poster in a series looks unified

Left edge of every chart at x = 20px → Aligning items to the same edge so the layout looks tidy

Similar data should use the same chart style, such as the same colours and chart type for every region → Chart 1: blue columns, Chart 2: blue columns, Chart 3: blue columns

Equal spacing between dashboard parts keeps the layout balanced and readable → gap = 16px between every chart and table

Poster 1: Arial, navy. Poster 2: Comic Sans, red. Poster 3: Times, green. → Each poster uses different fonts and colours, so the series looks disjointed and not like one set.

Sales chart: green bars. Profit chart: red pie. Costs chart: purple line. → Similar data is shown with a different chart style and colour each time, which makes comparison confusing.

Section C: Definitions

consistent design — Using the same colours, fonts, alignment and spacing on every part of a dashboard or poster series so it looks unified and is easy to read.

Section D: Fill in the Blanks

h2 {
  font-family: Arial, sans-serif;
}

.card {
  text-align: center;
}

.card {
  padding: 16px;
}

.card { border: 1px solid #ccc; }
<div class="card">Sales</div>
<div class="card">Costs</div>

:root { --main: #1F4E79; }
.bar { background: var(--main); }
.line { color: var(--main); }

Section E: Spot the Error

B — The heading font is different from the body font. A consistent design uses the same font on every part, so it should be Arial.

C — Both charts show similar data, so they should use the same chart style. chart2 should use ColumnBlue, not a red pie style.

A — The title is aligned right while the chart and table are aligned left. Everything should share one alignment, so it should be left.

B — panel2 has a smaller margin than the other panels, so the spacing is uneven. It should be 20px like the others.

D — poster3 does not reuse the template, so it will not match the rest of the series. It should be poster3.use(template).