Anatomy of the page, illustration guidelines

Summary

An annotated "Anatomy of the Page" slide that lays out two long web article mockups side by side and surrounds them with yellow all-caps callouts on illustration usage, white space and lockup placement.

Visual description

White background with the standard utility header, where "ANATOMY OF THE PAGE" appears in yellow at top left. The center holds two tall scrolling-page mockups for a Nike editorial article: the left page leads with a red banner, an illustrated portrait in round yellow glasses and a "Play New" lockup, then runs body text and a grid of small illustrated thumbnails; the right page stacks colorful illustrated portraits in a looser masonry arrangement. Yellow all-caps callout labels radiate to the margins: "LEAD WITH A P1 THAT COMPLIMENTS THE TYPE OF ARTICLE", "UTILIZE WHITE SPACE, OR INTRODUCE THE GRID TO SHOWCASE ILLUSTRATION SETS", "DO NOT CROP ILLUSTRATIONS", "USE A COMPLEMENTARY BACKGROUND TEXTURE FROM AN ILLUSTRATION TO ADD MORE COLOR", and "SHOWCASE ARTIST'S ILLUSTRATIONS IN THE FINAL TOUT WITH THE PLAY NEW LOCKUP CENTERED IN THE MIDDLE OF ONE PIECE OF WORK". A "New Voices" thumbnail strip runs along the bottom of the left page.

Key takeaway

Documenting a page template by showing the real composition full-height and pinning short, imperative callouts to the exact regions they govern. It reads as an x-ray of the layout rather than a list of rules.

Reuse notes

A practical pattern for a layout or component-anatomy slide in a design system, especially for editorial or content pages. The realistic mockup plus pinned-callout method is directly reusable; keep callouts short and imperative, and make sure each one points at the element it describes.