Skip to content
Media, Branding & Outreach·Lesson 2 of 29

Design Principles: Contrast, Alignment, and Hierarchy

The handful of layout rules that make your match graphics, posters, and slides look intentional instead of accidental.

Sign in to track progress, earn XP, and save lessons.

What you're actually doing

A sponsor thank-you graphic, an Instagram match recap, a kickoff slide: that's graphic design, and a few core principles separate a clean layout from a cluttered one. Designers group four of them as C.R.A.P. (Contrast, Repetition, Alignment, Proximity). This lesson drills the three with the most payoff: contrast, alignment, and hierarchy.

Contrast

Contrast is a clear, intentional difference between elements: light vs. dark, big vs. small, bold vs. thin, one color vs. another. It makes a design interesting and makes important things stand out.

  • Put light text on a dark photo of the robot (or dark text on light) so it's actually readable.
  • Make the score or the word WINNERS much bigger and bolder than the supporting text.
  • The most common weak design is one where everything is almost the same. If two elements aren't identical, make them clearly different, not slightly different.

Contrast is also accessibility: light gray text on white is hard for everyone to read and unreadable for many. Keep strong light/dark separation, especially on text over photos.

Alignment

Alignment means every element connects visually to something else on the page; nothing sits at random. Invisible lines should run down the edges of your text and images.

  • Pick an edge and commit. Left-align body text instead of centering everything, which leaves a ragged, hard-to-scan edge.
  • Line up your team logo, headline, and date on the same left margin.
  • Alignment is what makes a layout feel clean even when people can't say why. Being off by a few pixels reads as sloppy.

Hierarchy

Visual hierarchy arranges elements so the eye reads them in the order you intend. You build it with tools you already have:

  • Size: bigger feels more important. The headline should dwarf the fine print.
  • Contrast: the brightest, highest-contrast element gets read first.
  • Weight: bold outranks regular.
  • Proximity: group related items tight and push unrelated items apart so they read as separate chunks.

A standard text hierarchy is headline, subheading, body. For a match recap: "2025 District Win" (huge), "Qualification Round 8" (medium), the play-by-play caption (small).

Test it with the squint test: blur your eyes or step back. The most important thing should still pop. If it all blurs into one gray mush, the hierarchy is too flat.

Before you publish

  1. Is my most important element clearly the biggest and boldest? (hierarchy)
  2. Can I read every word against its background? (contrast)
  3. Do elements line up on shared edges? (alignment)
  4. Are related items grouped and unrelated ones separated? (proximity)

Key takeaways

  • C.R.A.P. (Contrast, Repetition, Alignment, Proximity) is a memorable starter toolkit for layout.
  • Contrast makes elements differ clearly and boosts both interest and readability/accessibility.
  • Alignment connects every element to a shared edge so the design reads as clean and intentional.
  • Visual hierarchy uses size, weight, color, and spacing to guide the eye in order of importance.
  • Use the squint test: the most important element should still pop when the design is blurred.

Go deeper

Lesson quiz

Required

Answer all 3 questions correctly to complete this lesson.

1.What does the 'A' in the C.R.A.P. design principles stand for?

2.Which set of tools is used to create visual hierarchy?

3.What is the purpose of the 'squint test' on a graphic?

Answer every question to submit.