Website Design Audit: Hierarchy, Typography and Responsive UI

A website design audit evaluates whether visual hierarchy, typography, colour and interface patterns help people understand and use the site. Record the actual rendered page and the intended task before recommending a style change. A design preference and a reproducible accessibility failure need different evidence.

What is the scope of a design audit?

Sample the homepage, service or product pages, articles, forms and relevant utility pages. Include ordinary, loading, empty, error and success states where the interface provides them.

Agree the brand references, audience, primary actions and constraints. Preserve useful existing components rather than proposing a redesign for every inconsistency. The deliverable should name affected components and show what an implementer must change.

How should visual hierarchy be checked?

Identify what the visitor should notice first, what evidence they need next and where they make a decision. Compare that sequence with the rendered composition.

• Can the heading and first paragraph establish the page's purpose?
• Do size, spacing and position separate primary information from supporting detail?
• Are related labels and controls visibly grouped?
• Does the main action describe its destination and stand out without overwhelming evidence?
• Do secondary promotions interrupt reading or hide important qualifications?

A blurred screenshot or brief-exposure exercise can prompt useful questions. A predicted attention map is not a measurement of actual eye movements. Validate uncertain hierarchy decisions with representative tasks.

What should a brand-consistency review record?

Inventory the deployed colours, type styles, spacing, imagery and component states. Compare them with the site's intended visual system and list meaningful deviations.

Check logo proportions, image permissions, consistent action labels and recognisable link styling. A component should behave consistently when it looks the same. Do not force different content types into identical cards merely to simplify the inventory.

Record corrections at the shared token or component level where possible. The UX audit covers how those choices affect broader journeys and comprehension.

How do you evaluate typography?

Inspect the actual font at the smallest and largest sizes used, with the fallback font and at browser zoom. Check clipping, line breaks, spacing and the visual relationship between headings and body text.

A 16-pixel body size and comfortable line length can be useful starting points, but they are not universal WCAG conformance thresholds. Font shape, audience and layout affect readability. Text must remain usable when users resize or adjust it.

W3C's minimum contrast criterion generally requires 4.5:1 for ordinary text and 3:1 for qualifying large text, with stated exceptions. Measure the final foreground/background pair, including text over images.

How should colour and state be assessed?

Give colours consistent roles and check that meaning survives without colour perception. Selected, success and error states need a label, shape, icon or another distinguishable cue where colour would otherwise carry the information alone.

Inspect normal, hover, focus, active and disabled states. Verify contrast against each actual surface. Simulators can help find questions to investigate but do not replace measured contrast or keyboard testing.

What should responsive design tests cover?

Test widths around layout changes and include narrow reflow, desktop, zoom and orientation conditions. Check whether the source reading order remains sensible when columns stack.

W3C's reflow guidance addresses reading at a width equivalent to 320 CSS pixels, with exceptions for content that needs two-dimensional layout. Keep a wide data table in its own labelled, keyboard-reachable scroll region rather than forcing the whole page to scroll sideways.

For pointer targets, WCAG 2.2 AA uses a 24-by-24 CSS-pixel minimum with spacing and other exceptions; larger targets can be easier to use. Apply the actual target-size criterion rather than calling 44 pixels the universal AA threshold.

What belongs in the final design checklist?

• Clear page purpose, reading order and decision path.
• Consistent brand assets, tokens and component behaviours.
• Readable typography, stable font loading and appropriate contrast.
• Visible keyboard focus and meaningful interaction states.
• Responsive images, usable navigation and no accidental overflow.
• Truthful evidence, labels, prices and commercial disclosures.
• Affected components, correction, owner and desktop/mobile retest for each finding.

Use the accessibility checklist for the wider evaluation and the reporting toolkit to record evidence. A visual review alone does not certify accessibility or predict conversions.