Design QA checklist

The design QA checklist
for every handoff.

A step-by-step checklist to compare the build with the design. It helps you give developers clear notes.

Step 1

Set up a fair comparison.

Most false alarms come from comparing at the wrong size or with the wrong content.

Step 2

Layout and spacing.

Overlay the design on the page, then measure anything that looks off.

Step 3

Type and colour.

Read the real values from the element, not from a screenshot.

Step 4

Components and states.

Check every state the design defines, and the ones it forgot.

Step 5

Screen sizes.

Designs often show desktop and phone. The build has to work in between.

Step 6

Notes and sign-off.

Good design QA ends with a short list developers can finish, and a clear yes.

FAQ

Questions

What is design QA?

Design QA checks that the build matches the design before release. It covers layout, spacing, type, colour and states at every screen size.

Who does design QA, the designer or the developer?

Usually the designer reviews and the developer fixes, but anyone who knows the design can run this checklist.

How does EasyQA help with design QA?

Put your design over the live page, or show them side by side. Measure spacing, read fonts and colours, and pin each difference.