6 Visual Hierarchy and Communication

Set a clear priority

Visual hierarchy is the arrangement of content to communicate priority, relationships, and where to look next. It helps people understand a message quickly instead of treating every element as equally important. The hierarchy should reflect the content’s purpose and the needs of its audience; it is not decoration alone.

Before styling a page or screen, identify its main message and the information or actions people need most. Arrange content in a deliberate order, such as main message, supporting explanation, details, and next step. A useful check is to ask someone unfamiliar with the design what they notice first and what they think they should do next.

Use visual cues deliberately

Several visual cues can establish emphasis. Larger elements often attract attention first, so reserve the strongest scale for the most important content. Position, alignment, and reading direction affect what people encounter first; place related information near each other. Contrast can make an element stand out from its surroundings, while bold type or a distinct style can signal importance. Empty space separates groups and gives important content room to be noticed, and repetition helps people recognize elements serving the same purpose.

These cues work together. If everything is large, bold, brightly colored, or boxed, nothing has clear priority. Use a limited set of competing styles so that emphasis remains meaningful.

Organize layout and relationships

A layout organizes information into a readable path. Alignment and consistent spacing make structure predictable, while proximity shows which items belong together. A grid can organize columns and maintain consistent alignment across a page or screen while still allowing selected content to receive emphasis.

For example, on an event page, the event name, date, and registration action should be easy to locate as a group. Venue details and accessibility information can form a separate group. If every detail appears in an equally prominent card, people have to work harder to distinguish essentials from supporting information.

Design for different screen sizes. A layout that uses several columns on a wide screen may need to become a single, clearly ordered column on a narrow screen. Check that the reading order and relationships remain understandable rather than relying only on visual position.

Make typography communicate structure

Typography affects both legibility and hierarchy. Establish a small, consistent set of text styles, such as a page title, section heading, body text, and caption, and use each style consistently. Differences in size, weight, and spacing should help readers distinguish these roles rather than merely add visual variety.

Keep body text comfortable to read. Avoid long passages in all capitals, overly decorative type, and weak contrast. Headings should make the structure scannable, and their visual treatment should match their actual role in the content. In digital interfaces, semantic heading structure also supports navigation by assistive technology.

Use color accessibly

Color can distinguish categories, convey emphasis, establish a visual identity, or signal a state such as success or error. Use a limited, consistent palette so color has a reliable meaning. When color communicates information, pair it with another cue, such as a text label, icon, shape, or pattern. Do not make color the only way to identify an error or category.

Check text against its background, including when text appears over images or gradients. Under WCAG 2.1 Level AA, ordinary text generally needs a contrast ratio of at least $4.5:1$, while large text needs at least $3:1$. Contrast is one part of accessible communication: a design should also remain understandable when people cannot distinguish particular colors or when a display changes how colors appear.

Apply and evaluate the design

For a service page that helps residents apply for a permit, give the page title the strongest typographic emphasis, state the key eligibility point nearby, and make the application button easy to identify. Group requirements together, separate optional guidance, and use spacing and alignment to reveal the order of steps. Give the button a distinct treatment, but label it clearly so its purpose does not depend on color alone.

Review the page at different sizes. Check whether people can quickly find key information, recognize the next action, distinguish headings from body text, and use the page without relying on color. Revise wherever the answers reveal confusion. Testing with people who represent the intended audience can expose problems the designer may overlook.