drafty

How to review a design before the client sees it

Quick answer

To review a design, work through it in this order: visual hierarchy (one focal point per section), typography contrast (headings vs body distinguishable at a glance), colour and contrast ratios on interactive elements, then mobile render at 390px. Once it passes your own check, share a link the client can annotate directly — they click the exact element they mean, not describe it in an email.

Step 1

Visual hierarchy — one thing per section should dominate

Open the design and squint. Literally. Unfocusing your eyes for three seconds is the fastest way to see whether one element leads each section or everything fights for attention at the same weight. A common miss: the designer has lived with the file for two weeks and reads the hierarchy correctly from memory — not from the actual weight and size of the elements. The squint test removes that context. Check that font sizes differ by at least two steps between heading and body (a one-point difference won't register as a hierarchy). Then check colour: if the primary CTA button is the same saturation as the section background, it will disappear on a glanced mobile scroll. Do this check before the client sees the design — vague client feedback ('it doesn't feel right') almost always means the hierarchy isn't landing, and diagnosing that mid-call is harder than catching it before.

Step 2

Colour contrast on interactive elements

Run the design's primary button, link colours, and any text-on-colour-background through a contrast checker (the browser DevTools accessibility panel does this — right-click the element, Inspect, then the Accessibility tab shows the contrast ratio). WCAG AA requires 4.5:1 for normal text and 3:1 for large text or UI components. Most failed design reviews that loop back to the designer for a second pass involve a button or label that a client opens on their phone and can't read in direct sunlight. That's a contrast failure. Catching it with a number, not an opinion, makes the feedback actionable the first time. If you're working in Figma, the Contrast plugin (free) checks ratios inline without exporting — it's faster than DevTools for a full design file.

Step 3

Mobile render — 390px, full scroll

Open the exported design or the live preview in Chrome DevTools. Set the viewport to 390px (iPhone 16 width). Scroll the entire design from top to bottom. The three failures that appear most often at this step: hero text that wraps beyond three lines (the mobile user reads a wall of text before they see the offer), CTA buttons narrower than 44px tap target (the minimum Apple specifies — a button that looks normal on desktop becomes untappable on a thumb), and imagery that crops in a way the desktop version never showed. None of these are visible in a desktop-only preview, and clients almost always check the design on their phone before giving feedback. Running the mobile check yourself first removes the most common round of client feedback from the cycle entirely.

Step 4

Share a link the client annotates directly — not a file or screenshot

Once the design passes your own review, the feedback loop is where most rounds get added. Email a flat screenshot and the client will reply 'can you adjust the top section' — you'll spend the next message figuring out which element they meant. Ask them to comment in Figma and they'll hit a login wall, request access, and often give up or fall back to email. The workflow that removes the extra round: share a link the client opens in their browser, clicks the exact element they want to flag, and leaves a threaded note pinned right there. You see 'hero headline — too long for the audience' anchored to the headline, not 'the bit near the top' in an email. One round of specific, element-pinned feedback typically replaces two rounds of vague email.

The faster way

If the design is an export, a Figma frame, or a live preview — drop it into Drafty and share the link with your client. They open it in their browser, click the exact element they mean, and pin a note. No Figma account needed, no extension, no re-emailed screenshots. Every note lands in one thread anchored to the spot they pointed at. When you push a revised version, the same link updates — you don't send a new URL each round.

Open a live demo

Questions

What should I look for when reviewing a design?
Work through four areas in order: visual hierarchy (one dominant element per section, squint-test each one), typography contrast (headings and body should be distinguishable at a glance — at least two clear size steps), colour contrast on buttons and links (4.5:1 ratio for text, 3:1 for UI components), and mobile render at 390px (hero text wrapping, button tap targets, image cropping). These four catch most of what clients flag and most of what causes accessibility failures.
How do I share a design for client review without a Figma account?
Export the design frame as a PNG or PDF, or use a live preview URL, and share it as an annotated review link rather than a file attachment. The client opens the link in their browser, clicks the element they want to flag, and leaves a note pinned to that spot — no account, no extension. If you share a raw Figma link with a client who doesn't have an account, they hit a login wall and fall back to email feedback.
How do I get specific feedback instead of 'make it pop'?
Vague feedback comes from reviewers who can't point at what they mean. When the channel is email or a screenshot, they describe — and descriptions are imprecise. Giving a client a way to click the exact element and leave a note tied to that spot produces actionable feedback without extra clarification rounds. Also helps: send two specific questions with the review link ('Does the hierarchy make the main action clear?' / 'Would you expect this CTA copy to match what happens next?') — specific questions get specific answers.
How many rounds of review should a design take?
One or two rounds is typical when the client annotates directly on the design — because element-pinned comments remove the back-and-forth needed to locate what they meant. Email-based review adds rounds: 'the section near the top' requires at least one exchange before you know what to fix. Running your own review pass (hierarchy, contrast, mobile) before the client sees the design removes the most predictable round entirely.
What is the fastest way to check colour contrast in a design?
In Chrome DevTools: right-click any element, choose Inspect, then open the Accessibility tab — it shows the contrast ratio and whether it passes WCAG AA. In Figma: the free Contrast plugin checks ratios inline without exporting. The thresholds are 4.5:1 for normal body text, 3:1 for large text (18px+ bold or 24px+ regular) and UI components like buttons. Interactive elements fail contrast checks more often than any other element type.
Should I do a design review before or after the client meeting?
Before. Run your own review (hierarchy, contrast, mobile render) before the client sees the work. Share the annotated review link for their feedback before the call — not during. Clients who see a shareable link with two specific questions before the meeting come to the call with specific notes already pinned, not half-formed impressions they're trying to describe on the spot. The call becomes a resolution session, not a discovery session.

Keep exploring

Stop emailing files back and forth.

Share one link. They comment on the exact spot — no account, always the current version.