Layout and Content Type

The worst layout decisions happen when structure is chosen before content is understood. A designer uses a card grid because it looked good on another site, without asking whether the content is actually a collection of equal items. A developer uses a sidebar layout because the design system provides one, without asking whether the content has enough navigational depth to justify it. The layout is technically functional and structurally wrong.

The discipline of layout thinking begins with a question: what type of content is this? The answer shapes every structural decision that follows.

Article and long-form reading

Reading content is linear, sequential, and deep. The user is not scanning or browsing — they have committed to a sustained experience. The layout’s job is to disappear. Everything that is not text is a distraction.

This means: narrow content column (60–70 characters per line), generous vertical spacing between sections, minimal visual weight in supporting elements (author, date, tags), high contrast between text and background, and no competing call-to-action elements interrupting the reading flow. On desktop, the surrounding whitespace is not waste — it is the frame that tells the reader this is a reading context, not a navigation context.

Data and dashboards

Dashboard content is parallel, comparative, and dense. The user is not reading — they are scanning multiple streams of information simultaneously, looking for anomalies and relationships. The layout’s job is to present as much relevant data as possible in a structured, scannable form.

This means: wider layouts with minimal margins, tighter typography, more columns, dense tables and charts, and an outer navigation structure (sidebar) that allows quick switching between views. Whitespace is rationed rather than generous — every pixel of whitespace competes with a data point that could be visible.

Forms

Form content is transactional and sequential. The user has a task to complete and wants to complete it with minimum friction. The layout’s job is to remove every obstacle between the user and the submit action.

This means: single column (research consistently shows multi-column forms increase error rates), labels above fields (not beside them, which requires the eye to track across a larger horizontal distance), logical grouping of related fields with spacing that communicates the grouping, and a single prominent primary action at the bottom. A form with sidebars, pull quotes, and hero imagery is a form that has forgotten its purpose.

Catalogueues and product grids

Catalogueue content is parallel, browsable, and flat — each item has equal status and the user chooses their own path through it. The layout’s job is to maximise the number of items visible without reducing each item’s clarity below the threshold needed to evaluate it.

This means: card grids with consistent card structure (image, title, key attribute, action), filtering and sorting tools accessible without leaving the grid, and pagination or infinite scroll to handle large collections. The most important layout decision in a catalogueue is the card density — how much information each card carries, and how many cards are visible at once.

Empty states

An empty state is the layout a screen shows when it contains no content. It is one of the most neglected design surfaces — often delivered as a blank container or a generic “No items” string — and one of the most important for user experience and trust. An empty state is frequently a new user’s first experience of a feature. It sets expectations, communicates what is possible, and provides the path forward.

There are four distinct empty state types, each requiring a different layout:

First-use — the user has not yet added any content. The layout should explain what the space is for, show an example of what it will look like populated, and provide a single clear action to begin. This is an onboarding moment. The goal is to make creating the first item feel easy and low-stakes.

Search with no results — the user’s query returned nothing. The layout should confirm what was searched (so the user knows the search executed correctly), suggest reasons the search might have returned nothing (typo, too specific, wrong category), and offer a recovery path (clear the query, broaden the search, browse instead). Do not show the same CTA as the first-use state — the user already knows how to use the feature.

Filtered to zero — the user’s applied filters eliminated all results. The layout should show which filters are active, invite the user to remove one or more, and make the removal action immediately available — ideally as a button on the empty state itself, not requiring the user to find the filter panel.

Error empty state — content exists but could not be loaded. The layout should tell the user what went wrong in plain language, avoid technical error codes or stack traces, and provide a concrete action (retry, reload, contact support). Showing an empty state without indicating it is an error — rather than a genuinely empty collection — destroys trust when the user later discovers their data was present all along.

The standard empty state structure is: an illustration or icon communicating the type of empty state (not generic, not decorative), a heading naming the situation, one sentence explaining what happens next, and a single call to action. This four-element structure fits any of the four types above with appropriate content substitution.

Content type as the first design question

Before choosing a grid, a pattern, a spacing scale, or a breakpoint — ask: what is the nature of this content? What is the user’s relationship to it? What does successful interaction look like?

The answers to those questions determine the right layout. The patterns in the previous article are the vocabulary. Content type is the grammar that tells you when each pattern is appropriate.

This is what distinguishes layout thinking from layout copying. Copying solves surface similarity — it produces a page that looks like other pages in the same category. Thinking solves structural appropriateness — it produces a page whose structure serves the specific content in the specific context, for the specific user, doing the specific task. That is the craft of layout.