A practical website design audit with a scoring rubric

What should a website design audit actually measure?

A website design audit checks whether your visual decisions help visitors understand your offer, navigate your pages and take the next step. The output should be a scored checklist and a ranked fix list—not a collection of personal preferences.

Assess five areas: visual hierarchy, consistency, typography, spacing and trust signals. For every problem, record the page, device, visible evidence and recommended change. “The design feels dated” is not actionable. “The pricing page uses the same button treatment for starting a trial and reading documentation” is.

This is narrower than a full UX audit, which also examines task flows, interaction behavior and usability research. If you need that broader scope, start with this plain-English guide to UX audits.

The rubric below is a working framework, not a validated industry benchmark. Use it to make your decisions repeatable and track improvements against your own baseline.

Which pages and screen sizes should you inspect?

Start with a visitor journey rather than a random collection of URLs. For a software business, that might be the homepage, a feature page, pricing and signup. For a service business, inspect a service page, customer evidence and the contact form.

Include your highest-traffic landing page and any page where visitors commit money or personal information. Add a long-content page to expose typography and spacing problems that a short homepage might hide.

For each page, write down its intended job: “Help a small-business owner choose a plan” is more useful than “Explain pricing.” You cannot judge hierarchy without knowing what should receive attention.

Inspect each page on a narrow mobile screen and a desktop screen. Use real devices where possible, and resize between those widths to catch awkward transitions. Check menus, forms, validation errors and cookie banners—not just the initial screenshot.

Keep your audit worksheet simple:

Capture screenshots before changing anything. They give you a baseline and make the eventual fix easier to verify.

Does the visual hierarchy make the next step obvious?

Visual hierarchy is the order in which a page asks for attention. Size, contrast, position and surrounding space should reinforce the page’s job rather than compete with it.

Check 1: The offer is visually easy to find. Look at the first screen without scrolling. Can you locate what the business offers and who it is for? A giant abstract illustration above a small, generic headline often reverses the useful order.

Check 2: The primary action has appropriate prominence. Compare the main action with nearby links and buttons. If “Start a trial,” “Read the blog” and “Follow us” all use the strongest treatment, the visitor must decide which matters without help. Use one dominant treatment for the main action within each decision area.

Check 3: Headings reveal the page’s argument. Read only the headings. They should still explain the offer, benefits, evidence and next step. “Everything you need” communicates less than “Track expenses without updating a spreadsheet.”

Check 4: Supporting visuals reinforce the decision. Product screenshots, diagrams and photos should clarify something useful. Inspect whether decorative elements overpower prices, limitations or calls to action. A screenshot that becomes unreadable on mobile may need a focused crop or a different presentation.

As a quick heuristic, blur or squint at the page to identify its strongest shapes. This reveals competing focal points, but it does not prove that visitors understand the content. Ask someone unfamiliar with the site what they think it offers and what they would do next.

Is the design consistent across pages and states?

Consistency reduces the amount visitors must relearn. It does not require every section to look identical; it requires repeated visual patterns to carry predictable meanings.

Check 1: Equivalent buttons behave and look alike. Compare primary, secondary and destructive actions across your sampled pages. The same action should not alternate between a filled button, an underlined link and an unlabeled icon without a clear reason.

Check 2: Colors carry stable meanings. Check links, selected items, errors and success messages. Avoid using a color for decoration in one place and as the only indication of an error elsewhere. Add text or another visible cue so meaning does not depend on color alone.

Check 3: Repeated components follow the same rules. Put cards, form fields, navigation bars and testimonials side by side. Look for unexplained differences in padding, borders, corner shapes, labels and alignment.

Check 4: Interaction states remain recognizable. Test hover, keyboard focus, selected, disabled and error states where applicable. Keyboard focus must be visible; it should not disappear because a default outline was removed.

Create a small reference sheet containing the components you actually use. A founder maintaining a modest site usually needs a reliable button, field, card and heading system before a comprehensive design-system document.

Is the typography readable without extra effort?

Typography problems often appear when real content replaces tidy mockups. Test a long heading, a multi-line button label, an error message and a paragraph containing a link.

Check 1: Body text is comfortable to read. Inspect the site on an actual phone, not only a scaled desktop preview. As a starting point—not a compliance rule—try body text around 16–18 CSS pixels, then adjust for the font and audience. Prices, conditions and form instructions should not require pinching to read.

Check 2: Text has adequate contrast. W3C’s WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for qualifying large text, with specified exceptions. Measure the actual foreground and background colors. Check text over photographs separately because contrast can vary across the image.

Check 3: Line length and line spacing support sustained reading. Wide paragraphs can make it difficult to find the next line; cramped line spacing makes dense copy harder to follow. Narrow the content column and adjust line height, then read a full section rather than judging a single sentence.

Check 4: Text survives resizing. Increase browser zoom to 200% and inspect for clipped headings, hidden instructions, overlapping labels and missing actions. WCAG 2.2’s text-resizing criterion specifies resizing up to 200% without loss of content or functionality, with exceptions. This spot check alone does not establish accessibility compliance.

Does spacing make relationships clear?

Whitespace is useful when it explains what belongs together. A large gap is not automatically better than a small one.

Check 1: Related content stays visibly grouped. A field label should be closer to its field than to the preceding field. A price, billing interval and purchase button should read as one decision unit. Fix gaps that imply the wrong relationship.

Check 2: Section spacing follows a repeatable rhythm. Compare similar sections. Unexplained jumps in padding make a page feel assembled from unrelated templates. Choose a small spacing scale for your site and reuse it, allowing exceptions where the content genuinely needs them.

Check 3: Alignment supports scanning. Trace the left edges of headings, paragraphs, cards and form fields. Misaligned elements can interrupt comparison, especially in pricing tables and feature grids. Fix the underlying container or layout rule rather than nudging individual elements.

Check 4: Controls remain separated and unobstructed. On mobile, try neighboring links and buttons with your thumb. Check whether sticky navigation, chat widgets or consent banners cover controls. Visible separation helps, but also inspect the actual clickable area; generous-looking margins do not necessarily enlarge it.

Do trust signals answer the visitor’s real doubts?

Trust is not a row of badges above the footer. It is evidence placed where people need reassurance, with claims you can substantiate.

Check 1: The business is identifiable. Look for an accessible contact route and relevant business information. A local service provider may need a service area and business identity; a software product may need clear support details and company information.

Check 2: Customer evidence is specific and genuine. Inspect testimonials, review excerpts, client logos and case studies. Verify permissions and accuracy. Where appropriate, include an attributable customer and enough context to explain what changed. Never fill empty testimonial cards with invented praise.

Check 3: Commitment terms are visible before the action. Check prices, billing periods, cancellation terms, delivery conditions and refund rules where relevant. A prominent price paired with nearly invisible recurring-billing text is a trust problem, not merely a typography issue.

Check 4: Reassurance appears beside the relevant decision. Put an accurate privacy explanation near a sensitive form and applicable shipping information near a purchase decision. Avoid vague claims such as “100% secure.” Explain what visitors need to know without making guarantees you cannot support.

For a broader review of purchase and signup friction, use the CRO checklist by page type.

How do you score the audit consistently?

Score each of the four checks in each category using this scale. These are proposed scoring rules, not research-derived thresholds.

For each page, use the lowest observed score across its tested devices and states. This prevents a clean desktop layout from hiding a mobile failure.

With all checks applicable, the maximum is 40 points. Divide earned points by applicable maximum points, then multiply by 100. For example, 28 out of 40 becomes 70 out of 100; that is an illustrative calculation, not an industry average.

Mark a check N/A only when it genuinely does not apply, and explain why. Missing necessary evidence is a failure, not N/A. Record untested checks separately and label the score provisional.

Keep page scores visible rather than relying on one site average. An inaccessible signup control needs fixing even if every other page scores well.

Which fixes should you make first, and how do you verify them?

Prioritize blocked tasks and misleading information first, then confusion at important decisions, then cosmetic inconsistencies. Within the same priority level, favor shared components whose repair improves multiple pages.

Write each fix as a testable instruction: “Use the primary button style only for plan selection; make the comparison link secondary.” Assign an owner and a verification step. Avoid tickets such as “Improve pricing design.”

You can use SiteScoper’s free website audit to generate an initial issue list without an account. Treat automated findings as leads: verify interaction states, readability on real devices and the truth of customer claims yourself.

After changes ship, repeat the same tasks on the same pages and devices. Re-score the affected checks and save matching screenshots. Monitor relevant outcomes, such as completed inquiries or signups, but do not attribute every change to design without accounting for traffic and other releases.

A higher audit score means your inspected pages meet more of your criteria. The stronger test is whether visitors can now understand, choose and act with fewer obstacles.