A community arts center’s website needs to help people discover classes, compare suitable options, and learn enough about one class to decide what to do next. Those jobs call for different pages and different ways of presenting information. If you start by asking which heading should be bigger, you may miss why the information belongs together in the first place.
Review the relevant page types and their information structure, then the components that present that information, and finally the emphasis within individual pages. At each scale, compare what the visitor needs to understand with what the design makes prominent. Visual hierarchy uses size, contrast, position, and grouping to communicate relative importance.
We’ll use a fictional community arts center throughout this guide. An adult prospective student wants an evening arts class that fits around work. The routes and arrangements below are proposed examples to compare, not findings about an actual center or its visitors.
For a first pass, name the student’s task and the pages it involves. If the task involves a listing and details, choose one class summary and the class page it opens. For a standalone campaign page, start with that page’s job and the sections that serve it. Note what each should explain and what appears strongest. You can send those observations before arranging a wider review.
Start With the Page Types and Their Jobs
A page type describes a page’s job and pattern of information. A class listing helps the student compare options. A class-detail page helps them evaluate one option. The site may use reusable templates, but you do not need a separate template for every route or a full sitemap to begin this review.
Sketch the relevant route. Our student might follow a season overview to a class listing and then an evening-class page. They could also arrive directly at that class page from a shared link. Ask what each page needs to explain, including enough context for someone who has not seen the preceding page.
This brings information architecture into the review: how information is grouped, named, and related, and how people can reach it. It informs the visible design, but it is not the same as visual hierarchy. NN/g’s explanation of information architecture and navigation helps distinguish the underlying structure from the routes and interface that expose it.
Imagine the only route to evening classes is a prominent “Our Spring Story” campaign panel. A stronger campaign illustration will not explain where to find classes. Ask to compare a clearly named class route alongside the campaign. Whether evening timing needs its own group, a filter, or clearer class summaries is a question for the team, not something a screenshot can settle.
Now look at what those pages actually emphasize. Can someone distinguish class discovery from the campaign story? Does the detail page identify the class they have reached? This is the link back to visual hierarchy: the presentation should express the intended page jobs and content relationships.
Check How Components Present the Information
Move from page jobs to the pieces that present their information. A listing might use class-summary cards. Each needs to help the student distinguish one class from another and decide which details to open. Cards are one option, not a requirement to redesign the listing.
Compare the actual words, dates, labels, and images across a few summaries. Does each class name stay with its meeting information? Can someone tell which destination opens its details? The USWDS card guidance describes cards as summaries of one subject leading to more information, usually among related cards.
Suppose repeated decorative artwork dominates the summaries while an evening time appears closer to the next class’s name. Ask to compare a version that keeps each class’s identifying facts together and makes its detail route clear. Enlarging every date would not resolve a misleading association.
Carry that question into other components. On the detail page, a schedule panel should explain when that class meets. An instructor section answers a different question. Before changing their visual treatment, agree which information each needs to contain and how the reader should recognize its role.
Judge Whether the Individual Page Serves Its Purpose
The evening arts-class page has a striking illustration, a campaign message, an instructor portrait, and details someone needs before enrolling. Everything has been designed carefully. Yet the class name and evening schedule are harder to find than the fundraising appeal. What should you ask the designer to change?
Start with what the student needs to decide. Relevant information might include the class identity, meeting times, location, cost, and any experience or preparation required. Check what is missing as well as what is present. A more orderly arrangement cannot supply an absent schedule, and enrollment need not be the student’s immediate next step.
Separate the necessary information from useful supporting material and unrelated messages that nevertheless need to appear on the page. The instructor’s background can help someone judge the class. A donation appeal serves a different purpose, even if both matter to the center. Giving the appeal a distinct, quieter role may be more appropriate than asking to remove it.
Confirm those relationships with the team before settling a larger heading or brighter panel. If nobody is available, record your assumed page purpose and ask them to confirm it with your observations. NN/g’s explanation of visual hierarchy starts with defining the importance of the content, then choosing its visual treatment. The business’s wish to promote something does not automatically make it the visitor’s most important information.
Compare What Matters With What Stands Out
Open the built page with the actual words and images. Look at the section as a whole before reading each line. What seems most conspicuous? Which heading appears to introduce which explanation? Then read normally to check whether the visible relationships make sense.
For our arts center, imagine “Our Spring Story” fills a vivid illustrated panel while the class name and dates sit in small, similar-looking text beneath it. The illustration may attract attention without explaining which class this is or when the student could attend.
Record the specific mismatch: the campaign is visually dominant, but identifying the class and schedule is the useful decision here. That gives the designer something more actionable than “the hierarchy feels wrong.”
You can mark the prominent elements on a screenshot and note what each should help someone understand. Treat this as your review impression, not a map of where every visitor will look. A brief squint can help you notice broad shapes and contrast, but return to normal reading. A blur cannot tell you whether the heading says anything useful.
Change the Relationship, Not Everything at Once
Look for the competing pair or group before proposing a solution. Is the illustration overwhelming the class details? Is a bright donation panel competing with the preparation instructions? Does a heading sit closer to the wrong block of information?
For the first section, ask to compare a version that groups the class name and schedule clearly and reduces the campaign panel’s emphasis. The illustration can remain if it helps explain the class. Making the class name enormous while leaving everything else equally loud may only create a new competition.
In a supporting section, suppose materials to bring, instructor background, and fundraising all appear in equally vivid panels. The student needs to distinguish preparation from optional background and a separate appeal. Ask whether grouping the preparation details and giving the appeal a quieter, distinct treatment would communicate those relationships more clearly.
Size, boldness, contrast, and position work relative to their surroundings. A bold heading may be clear in a quiet section and disappear among several equally bold panels. Review the actual combination rather than prescribing the same number of colors or text sizes for every website.
Keep the proposed comparison focused enough to explain. “Show the schedule as part of the class information, with less campaign emphasis” names a relationship. “Make it pop” leaves the decision unresolved.
Keep the Meaning When the Layout Changes
Compare the same summaries and detail-page sections in phone, tablet, and desktop layouts. Keep the words, images, and open menus or panels the same so you are judging the arrangement rather than a different version of the page. For help setting up comparable views, use the screen-size review guide.
Our arts center’s desktop columns might keep schedule details together. After stacking on a phone, the schedule heading could sit immediately above the fundraising panel, making the wrong content look connected. Ask for the heading and its dates to remain visibly associated as the layout changes.
The coordinates and sizes do not need to stay identical. The useful relationship does. Check whether an image moves between a heading and its explanation, or whether several panels become an undifferentiated sequence of equally strong blocks.
A screenshot can show an apparent grouping problem, but it cannot establish the structure received by assistive technology. Ask the developer or accessibility reviewer to check the underlying relationships and reading sequence. W3C explains why information relationships need more than visible styling and why a meaningful sequence can have more than one acceptable order.
Check Understanding Before Calling the Problem Solved
Ask someone unfamiliar with the page to work out whether this evening arts class fits their schedule. Give them the task without pointing to the dates or explaining the layout first. Notice what they misunderstand or cannot find.
Keep that observation separate from your initial impression. “The illustration looks strongest to me” is different evidence from “this person read the donation panel as a class requirement.” One colleague’s attempt can reveal a question worth investigating, but does not represent every prospective student.
Send the page type, particular page address, component or section, checked width and height, and screenshot with your comparison request. An illustrative note could say:
On the evening-class detail page at [page address], checked at [width × height], the schedule heading appears attached to the donation panel. Please compare a version that keeps the heading and dates together and separates the appeal. The student needs to recognize when this class meets before deciding whether it fits. Check that the listing summary describes the same meeting information.
Review the alternative with the final content in place, then check understanding with appropriate visitors. Return to the page’s job and the information it needs to communicate, not only the attractiveness of one panel. A more orderly-looking page is a useful proposal, not proof that people will understand it or enroll.
