UI design principle: alignment

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which layout follows the alignment principle?

A Each label and text box starts at a different distance from the left

B Labels and text boxes all start on the same left edge

2. A form has its labels placed at random horizontal positions. What is the design problem?

A The elements are misaligned, so the layout looks messy

B The elements have too much contrast

3. Why is left alignment commonly used for blocks of text in an interface?

A Each line starts at the same point, so the eye can scan down easily

B It makes the text bigger and bolder

4. Which tool helps a designer apply alignment across a whole screen?

A A random placement of elements

B A grid layout with columns and rows

5. A button sits 10 pixels to the right of the text box above it, and nothing else is offset. What should the designer do?

A Line the button's left edge up with the text box's left edge

B Leave it, because small offsets make a layout look tidier

Match the Pairs

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

Left column		Right column
1text-align: left;		ASets up a grid layout so elements snap into shared columns and line up with each other.
2display: grid; grid-template-columns: 1fr 1fr;		BThe fields are misaligned because each starts at a different x position, so the left edges do not match and the form looks messy.
3Left alignment: labels and fields in a form all start at the same left edge		CLines text up along a common left edge, which is easy to scan for labels and lists.
4Grid layout: three cards sit in equal columns so their edges line up		Dlabel, input { display: block; margin-left: 0; }
5Name field starts at x=20, Email field at x=35, Phone field at x=28		EThe buttons mix alignments, so there is no common edge or centre and the layout looks inconsistent.
6Button 1 is centred, Button 2 is left-aligned, Button 3 is right-aligned		Fgrid-template-columns: repeat(3, 1fr);

Definitions

alignment

Fill in the Blanks

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

p { text-align: ____; }

.layout { display: ____; }

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

.menu { display: flex; align-items: ______; }

.label { margin-left: _; }

Spot the Error

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

Question 1

A .menu {

B display: flex;

C flex-direction: row;

D align-items: flex-start;

E }

Question 2

A .gallery {

B display: grid;

C gap: 16px;

D align-items: start;

E }

Question 3

A .article p {

B margin-bottom: 12px;

C text-aling: left;

D }

Question 4

A .nav a {

B display: inline-block;

C width: 80px;

D text-align: middle;

E }

Question 5

A .label {

B margin-left: 35px;

C }

D .input {

E margin-left: 20px;

F }

Answer Key

UI design principle: alignment

Section A: Quick Questions

B — Labels and text boxes all start on the same left edge

A — The elements are misaligned, so the layout looks messy

A — Each line starts at the same point, so the eye can scan down easily

B — A grid layout with columns and rows

A — Line the button's left edge up with the text box's left edge

Section B: Match the Pairs

text-align: left; → Lines text up along a common left edge, which is easy to scan for labels and lists.

display: grid; grid-template-columns: 1fr 1fr; → Sets up a grid layout so elements snap into shared columns and line up with each other.

Left alignment: labels and fields in a form all start at the same left edge → label, input { display: block; margin-left: 0; }

Grid layout: three cards sit in equal columns so their edges line up → grid-template-columns: repeat(3, 1fr);

Name field starts at x=20, Email field at x=35, Phone field at x=28 → The fields are misaligned because each starts at a different x position, so the left edges do not match and the form looks messy.

Button 1 is centred, Button 2 is left-aligned, Button 3 is right-aligned → The buttons mix alignments, so there is no common edge or centre and the layout looks inconsistent.

Section C: Definitions

alignment — A UI design principle that lines up elements along common edges or centres, such as a left edge or grid, so the layout looks tidy and is easy to scan.

Section D: Fill in the Blanks

p {
  text-align: left;
}

.layout {
  display: grid;
}

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

.menu {
  display: flex;
  align-items: center;
}

.label {
  margin-left: 0;
}

Section E: Spot the Error

C — A row puts the items side by side, so they no longer share one left edge. Use flex-direction: column so the items stack and line up along the left.

D — align-items works vertically inside each cell. To line up the items along the left edge of each column, use justify-items: start.

C — The property name is misspelled, so the browser ignores it. It must be text-align: left so every paragraph starts on the same left edge.

D — middle is not a valid text-align value, so the links are not centred in their equal-width boxes. The correct value is center.

B — The label and input need the same left margin to share one left edge. 35px makes them misaligned, so it should be 20px.