Subjects and lessons to explore.

Law

Graphic Design & Digital Media · Foundations

Layout

10 min read 5 practice questions
10 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

is how you arrange text and images on a page or screen so a viewer can take them in without effort. A durable starting kit is , four principles Robin Williams laid out in The Non-Designer's Design Book: Contrast, , , and . Alignment lines elements up on shared invisible edges; proximity groups related items and separates unrelated ones. Add generous , and the same content suddenly looks organized and scannable.

Why this matters

Almost every document a college student makes is a layout decision: a resume, a poster, a slide deck, a report, a web page. The gap between an amateur and a professional result is rarely artistic talent; it is a handful of consistent choices about alignment, grouping, and spacing. C.R.A.P. gives you a checklist you can apply to work you have already written, and a vocabulary for saying why a design feels cluttered or off. Because the same principles govern print and screens, learning them once pays off across coursework, digital media, and any job where you have to make information clear to other people.

The college version

What layout is

Layout is the arrangement of content — headings, body text, images, captions, buttons, empty space — within the frame of a page or screen. The frame can be a sheet of paper, a poster, a slide, or a browser window; the job is the same: place the pieces so a viewer understands what belongs with what, what to read first, and where to look next, with as little effort as possible. A layout succeeds when it is organized (related things look related, unrelated things look separate) and scannable (a reader can skim it and still get the structure). Layout is not decoration added at the end. It is a structural decision about relationships between elements, and it usually improves work you have already written rather than replacing it. Note the boundaries of this lesson: an underlying grid of columns and gutters is a powerful tool for enforcing layout, but grid construction is its own topic; ordering elements strictly by importance is visual hierarchy; and arranging a single photograph is composition. Here the focus is the everyday principles that turn a pile of content into a clean page.

C.R.A.P.: four principles for organized pages

The most widely taught starter kit for layout is C.R.A.P., an acronym for Contrast, Repetition, Alignment, and Proximity. These four principles were laid out by the designer and writer Robin Williams in The Non-Designer's Design Book (first edition 1994), a text so practical it is assigned even in graphic-design programs. Contrast means making different things clearly different — in size, weight, color, or style — so the eye can tell them apart; if two elements are not the same, make them very different, not slightly different. Repetition means reusing visual features (a heading font, a color, a bullet style, a spacing rhythm) across the piece so it reads as one coherent whole. Alignment means giving every element a visual connection to another element through shared edges. Proximity means grouping related items close together and pushing unrelated items apart. Contrast has its own dedicated lesson in this subject; here it counts simply as one of the four layout levers. In practice the four work together: proximity and alignment build the underlying order, while contrast and repetition make that order visible and consistent.

Alignment: the invisible line

Alignment is the quiet workhorse of clean layout. The core idea is that elements should line up along shared, invisible lines — a common left edge, a common center, a shared baseline — so that nothing appears to have been dropped on the page at random. Text and objects that touch the same imaginary vertical or horizontal line read as deliberate and connected, even when they are far apart. There are two broad families: edge alignment (left, right, top, or bottom) and center alignment. Left alignment gives a strong, hard vertical edge and is the most reliable default for blocks of text, because every line starts from the same place and the eye can return to it easily. Center alignment produces a softer, more formal, symmetrical feel but leaves ragged edges on both sides, which can look weaker for dense content. A common beginner mistake is mixing several alignments on one page — some things centered, some left, some right — which destroys the invisible lines. Choosing one strong alignment and committing to it is usually the single fastest way to make a document look more professional.

Proximity and white space: grouping by distance

Proximity uses distance to signal relationship: items placed close together are perceived as a group, and items separated by space are perceived as belonging to different groups. This matches the Gestalt principle of proximity, the way human vision automatically clusters things that are near one another. Good use of proximity means putting a caption right under its photo, a subheading right above the paragraph it introduces, and a clear gap between one section and the next — so the structure of the content is visible before anyone reads a word. The tool that makes proximity work is white space (also called negative space): the empty areas between and around elements. White space is not idle background; in a layout it does active work at every scale, from the wide gaps that set major regions apart to the small breathing room between lines and list items. It groups and separates content, gives the eye places to rest, directs attention to what remains, and makes text more readable. A cluttered layout is very often a white-space problem: the fix is not to add more, but to remove crowding and let related items breathe as groups.

Reading flow, and print versus screen

Layout also has to account for how people actually move through a page. In left-to-right cultures, attention tends to start at the top-left and travel rightward and down. On text-heavy web pages, eye-tracking by the Nielsen Norman Group found a recurring : readers fixate along the top and down the left side, reading less of each line as they go. That pattern is a default tendency for poorly-formatted text, not a law — it is broken up as soon as you add headings, bold key phrases, lists, and images that give the eye deliberate landing points. The practical lesson is to place the most important things where the eye already goes and to use structure to guide it elsewhere. Finally, the medium sets the constraints. Print layout works within fixed page dimensions and margins: once printed, nothing reflows, so decisions about trim size, margins, and where a page 'folds' are final. Screen layout usually has to be responsive — the same content reflows to fit phones, tablets, and monitors — so the layout must survive changes in width. Print and screen also differ in color reproduction (print uses CMYK inks, screens emit RGB light, covered in the color-models lesson), but the C.R.A.P. principles themselves apply equally to both.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Imagine you dump your school papers on a table in a messy pile. Nobody can tell what goes with what. Now you tidy up using four moves. Contrast: make the titles big and bold so they jump out. Repetition: use the same color and style for every title so they look like a set. Alignment: slide every paper so its left edge lines up along the same straight line, like books on a shelf. Proximity: put each worksheet next to its own answer sheet, and leave a gap before the next subject. You did not change a single word — you just moved things and added space — but now anyone can glance at the table and instantly see how it is organized.

Picture it like this

Layout is like arranging a grocery store. Related products sit together on one shelf (proximity), aisles line up in neat rows (alignment), signs all look the same so you trust them (repetition), the sale tags are bright so you notice them (contrast), and the wide open aisles let you walk and see without bumping into things (white space).

Where the picture stops working

A store is arranged mostly so you buy more and wander longer; a good layout is arranged so a viewer understands faster and with less effort. And a store is fixed in physical space, while a screen layout has to rearrange itself to fit a phone or a laptop, which no grocery aisle ever does.

Worked example

Take a plain event flyer: a title, date, time, address, a one-line description, and a website, all typed in the same size and centered. Apply C.R.A.P. Proximity first: pull the date, time, and address into one tight block (they answer 'when and where'), and separate that block from the title and the description with clear gaps. Alignment: switch everything to a single left edge so all the lines start on the same invisible vertical line. Contrast: make the event title large and bold, and keep the body text small and light, so the eye lands on the name first. Repetition: use that same bold style for the one other thing that matters, the website, and the same modest style for every detail line. Then add white space by widening the margins and letting the groups breathe. Nothing about the information changed, but the flyer now reads in one glance: what it is, when and where, and where to go next.

Key takeaway

Good layout is not talent; it is a few consistent choices. Group related things and separate the rest (proximity), line everything up on shared edges (alignment), give it room to breathe (white space), and use contrast and repetition to make the order visible — the C.R.A.P. checklist from Robin Williams.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

In the C.R.A.P. framework, what does the 'P' stand for, and what does that principle do?

Choose an answer, then check it.
Question 2 of 3intermediate

A student's poster has the title centered, the body text left-aligned, and the contact details right-aligned. Which single change would most improve the layout's sense of order?

Choose an answer, then check it.
Question 3 of 3intermediate

Which statement best reflects how designers treat white space in a layout?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define layout and explain what makes a layout organized and scannable.
  • Identify the four C.R.A.P. principles and attribute them to Robin Williams's The Non-Designer's Design Book.
  • Apply alignment and proximity to group related content and line elements up on shared edges.
  • Explain the role of white space and common reading-flow patterns in a layout.
  • Distinguish print layout constraints from screen layout constraints.

Common mistakes

  • Treating layout as decoration you sprinkle on at the end.

    Layout is structural. It organizes relationships between elements and usually clarifies work you have already written, so plan grouping and alignment as you build, not after.

  • Mixing several alignments on one page — some centered, some left, some right.

    Pick one strong alignment (left is the safe default for text blocks) so elements share the same invisible lines; mixing them breaks the sense of order.

  • Thinking white space is wasted space to be filled up.

    White space is an active tool. It groups and separates content and gives the eye rest; a cluttered layout usually needs less crowding, not more filling.

  • Making related and unrelated items sit at the same distance apart.

    Use proximity deliberately: tighten the space within a group and widen the space between groups, so distance alone shows what belongs together.

  • Treating the F-pattern as an unbreakable law of how people read.

    It is a default tendency for unformatted text. Headings, bold phrases, lists, and images redirect the eye, so use structure to guide the reader rather than assuming a fixed path.

Easily confused

Alignment vs. Proximity

Alignment lines elements up on shared invisible edges to make the page look deliberate; proximity uses distance to group related items and separate unrelated ones. Alignment is about edges, proximity is about grouping.

Layout (arrangement) vs. Visual hierarchy (order of importance)

Layout arranges content so it is organized and scannable; visual hierarchy is specifically about ranking elements by importance so the eye consumes them in order. Good layout supports hierarchy but is the broader arrangement task.

Using a grid vs. Applying C.R.A.P.

A grid is an underlying framework of columns and gutters that makes alignment and repetition easy to enforce; C.R.A.P. is the set of principles you apply, with or without a formal grid, to any page.

Print layout vs. Screen layout

Print has fixed page dimensions and margins that never reflow once printed; screen layout is usually responsive, reflowing the same content to fit different device widths. The C.R.A.P. principles apply to both.

Key vocabulary

Layout
The arrangement of text, images, and empty space within the frame of a page or screen so that content reads as organized and scannable.
C.R.A.P.
An acronym for four layout principles — Contrast, Repetition, Alignment, Proximity — popularized by Robin Williams in The Non-Designer's Design Book.
Alignment
Positioning elements so they share common invisible edges or lines (a left edge, a center, a baseline), giving the page a deliberate, connected look.
Proximity
Grouping related items close together and separating unrelated items with space, so distance itself signals which elements belong together.
Contrast (as a CRAP principle)
Making different elements clearly different in size, weight, color, or style so the eye can distinguish them; if elements differ, make them differ a lot.
Repetition
Reusing visual features such as fonts, colors, or spacing across a piece so it reads as one unified, consistent whole.
White space
The empty (negative) space between and around elements; an active tool for grouping, focus, balance, and readability, not wasted space.
Gestalt proximity
The perceptual tendency to see objects that are near one another as forming a single group.
F-shaped pattern
A common eye-tracking finding that readers scan text-heavy pages along the top and down the left; a default tendency, not a fixed rule.
Responsive layout
A screen layout that reflows and adapts so the same content fits different device widths, from phones to large monitors.

Sources & references

  1. 3.1 C.R.A.P. Principles of Graphic Design (Business Information Systems: Design an App for That) — Saylor Academy / Saylor Foundation
  2. Four Principles of Document Design (Howdy or Hello? Technical and Professional Communication) — OER Commons / Pressbooks (oer.pressbooks.pub)
  3. The Non-Designer's Design Book — Robin Williams (Peachpit Press)
  4. Graphic Design and Print Production Fundamentals — BCcampus / Graphic Communications Open Textbook Collective (Ken Jeffery, Alan Martin, Roberto Medeiros, Steve Tomljanovic)
  5. Whitespace in Visual and UI Design — Nielsen Norman Group (author Kelley Gordon)
  6. F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) — Nielsen Norman Group
  7. Visual Hierarchy in UX: Definition — Nielsen Norman Group

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-19

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.