UI design principle: balance

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which best describes balance in UI design?

A An even spread of visual weight so no side of the screen feels too heavy

B Making every element on the screen exactly the same size

2. A login screen has the logo, form and button centred, with matching margins on the left and right. What type of balance is this?

A Symmetrical balance

B Asymmetrical balance

3. A screen has a large image on the left and a small bold heading plus a bright button on the right, and it still feels even. What type of balance is this?

A Asymmetrical balance

B Symmetrical balance

4. Which element usually has MORE visual weight?

A A small, pale grey line of text

B A large, dark, high-contrast image

5. A mock-up has a big photo and a bold red banner on the left, and only a small plain link on the right. What is the problem?

A The screen has perfect symmetrical balance

B The left side is too heavy, so the screen is unbalanced

Match the Pairs

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

Left column		Right column
1Layout: logo, title and menu centred; mirrored buttons left and right		AHeader: 48pt black bold title vs 10pt grey caption
2Layout: large photo on left; small bold heading and button on right		BSymmetrical balance: elements are mirrored on each side of a centre line so both halves carry equal weight
3Visual weight: large, dark, bright or bold elements draw the eye and feel heavier than small, light ones		CThe small, light text cannot offset the heavy image, so the layout feels too heavy on the left. Make the right side heavier or the image smaller.
4Good balance: a heavy element on one side is offset by weight on the other side		DAsymmetrical balance: different elements on each side that still feel equal in visual weight
5Layout: all images, buttons and bold text placed on the left; right side empty		ELeft: large red banner \| Right: two bold buttons and an icon
6Asymmetrical layout: huge dark image on left; tiny pale text on right		FAll the visual weight sits on one side, so the screen feels lopsided and unbalanced. Spread elements more evenly.

Definitions

balance

Fill in the Blanks

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

h1 { text-align: ______; }

.left, .right { width: ___; }

.layout { display: grid; grid-template-_______: 2fr 1fr; }

.title { font-______: bold; }

.row { display: flex; justify-content: ____________; }

Spot the Error

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

Question 1

A left_panel.width = 300

B right_panel.width = 100

C layout = symmetrical

Question 2

A big_image.side = LEFT

B small_items.side = LEFT

C layout.balance = asymmetrical

Question 3

A IF element.size IS large

B weight = weight + 1

C IF element.colour IS bright

D weight = weight - 1

Question 4

A left_w = SUM(left items)

B right_w = SUM(left items)

C diff = ABS(left_w - right_w)

D IF diff < 5 THEN balanced

Question 5

A axis = left edge of screen

B left_item = button at x=100

C right_item = mirror(left_item)

Answer Key

UI design principle: balance

Section A: Quick Questions

A — An even spread of visual weight so no side of the screen feels too heavy

A — Symmetrical balance

A — Asymmetrical balance

B — A large, dark, high-contrast image

B — The left side is too heavy, so the screen is unbalanced

Section B: Match the Pairs

Layout: logo, title and menu centred; mirrored buttons left and right → Symmetrical balance: elements are mirrored on each side of a centre line so both halves carry equal weight

Layout: large photo on left; small bold heading and button on right → Asymmetrical balance: different elements on each side that still feel equal in visual weight

Visual weight: large, dark, bright or bold elements draw the eye and feel heavier than small, light ones → Header: 48pt black bold title vs 10pt grey caption

Good balance: a heavy element on one side is offset by weight on the other side → Left: large red banner | Right: two bold buttons and an icon

Layout: all images, buttons and bold text placed on the left; right side empty → All the visual weight sits on one side, so the screen feels lopsided and unbalanced. Spread elements more evenly.

Asymmetrical layout: huge dark image on left; tiny pale text on right → The small, light text cannot offset the heavy image, so the layout feels too heavy on the left. Make the right side heavier or the image smaller.

Section C: Definitions

balance — The even spread of visual weight across a screen so no side feels too heavy. It can be symmetrical (mirrored) or asymmetrical (different elements that still feel equal in weight).

Section D: Fill in the Blanks

h1 { text-align: center; }

.left, .right {
  width: 50%;
}

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.title { font-weight: bold; }

.row {
  display: flex;
  justify-content: space-evenly;
}

Section E: Spot the Error

B — Symmetrical balance mirrors one side on the other, so both panels need the same width. The right panel should be 300, not 100.

B — Asymmetrical balance offsets one heavy element with different elements on the opposite side. Putting the small items on the LEFT too makes that side heavy. They should be on the RIGHT.

D — Bright colours draw the eye, so they add visual weight, just as large size does. The line should be weight = weight + 1.

B — The right side's weight must be calculated from the items on the right side. Adding up the left items twice would always make diff 0 and hide any imbalance. It should be SUM(right items).

A — Symmetrical balance mirrors elements across a central axis. The axis should be the vertical centre line, not the left edge, where nothing can be mirrored.