Design QA checklist #

This page is for theme designers who check the built theme against their design before review and before launch. It is a checklist of the design quality of the pages. The project's technical checklists (accessibility, performance, CSP, dark mode, right to left, theme launch) are separate and still apply; links are at the end of each section. Work on a development or preview siteaccess, never on the live site.

Contents #

1. Set up
2. For every page type
3. The frame
4. Content views
5. Lists, search and blocks
6. Special pages
7. Foundations
8. Reporting

Set up #

• To do: A development or preview siteaccess with the theme (Previewing a design on a siteaccess).
• To do: Template path comments on, to name templates in reports (Tools for theme designers).
• To do: The stress set of test objects in place (Designing with real content).
• To do: A list of addresses: one per class and view, plus search, sign-in, errors, an empty folder.
• To do: A test editor account with an example.invalid address.

For every page type #

Check each address in this matrix:

And on each:

• To do: Matches the mockup in layout, type, spacing and color, or the difference is agreed.
• To do: No horizontal scrolling of the page.
• To do: Keyboard only: every interactive element reachable, focus always visible.
• To do: No white card or white box on a dark background in dark mode.
• To do: Reduced motion setting on: nothing moves that should not.

The frame #

• To do: Header and footer as designed at each width; small-screen menu open and closed.
• To do: Current section marked in the main menu; current page last in breadcrumbs.
• To do: Signed in and signed out states.
• To do: Language switcher (if any): each language named in itself, current marked.
• To do: Skip link appears on first Tab.
• To do: Logo correct in light and dark.

See Designing headers and footers.

Content views #

• To do: Full view of each class with all fields filled, and with each optional field empty.
• To do: Longest headline and longest word wrap cleanly.
• To do: Rich text "kitchen sink": every heading level, lists, tables, quotes, embeds, custom tags.
• To do: Images: right alias, right crop, alternative text present, no distortion; portrait and panorama uploads.
• To do: Dates and numbers formatted for the siteaccess's locale.

See Designing view modes and Designing for editors.

Lists, search and blocks #

• To do: Folder lists with mixed classes read as one list.
• To do: Cards with and without images; whole-card click with one link for screen readers.
• To do: Pagination at first, middle and last page, and on a phone.
• To do: Search with results, one result, many results and none.
• To do: Each layout block view type at full width and in a narrow zone; one item; empty collection leaves no gap.

See Designing content listings and cards, Designing search results, Designing layout blocks.

Special pages #

• To do: Not found, access denied (signed out, with the sign-in form, and signed in), generic error.
• To do: Sign in, forgotten password, registration (if enabled), confirmation pages.
• To do: Forms: errors summary and per-field messages; confirmation page.
• To do: Empty folder and empty related list.

See Designing empty and error states, Designing forms, Designing login and user pages.

Foundations #

• To do: Every color, size, space and radius in the stylesheets is a token; every color token has a dark value.
• To do: Text contrast at least 4.5:1 in both themes; focus and control borders at least 3:1.
• To do: Type scale and spacing scale used as specified; no stray values.
• To do: Interactive states as in the state matrix (Designing interactive states).
• To do: Page budget met: requests, no third-party requests before consent, LCP and CLS (Designing for performance budgets).
• To do: The style guide page matches the component inventory.

Then run the project checklists: Accessibility, Dark mode, Performance, CSP, Right to left.

Reporting #

One issue per report, with:

1. the address, the width, light or dark, and the zoom level;
2. what you see and what the design expects (mockup link);
3. the template that drew it, from the template path comments;
4. a screenshot with any personal data removed;
5. priority: blocks launch, should fix, later.

Related pages #

• Theme design review checklist
• Handoff checklist
• Checklist: theme launch
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.