Design Principles: Contrast, Alignment, and Hierarchy

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)