Design Review | Dreamineering

When to use: Before shipping any page. During design critiques. Weekly self-audits. When reviewing someone else's work.

The 5-Question Audit

Before any detailed review, answer these five. If you can't answer all five, the page isn't ready for detailed review.

#	Question	What a Good Answer Looks Like
1	Who is this for?	A specific person, not "everyone"
2	What do they need to know?	One essential piece of information
3	What do they need to do?	One clear action
4	Why should they trust us?	Specific proof (testimonial, logo, number)
5	What's stopping them?	The real objection, not the stated one

First Impression

Measurement

Check	Threshold	How to Measure
Five-second test	5/5 people identify purpose, audience, action	Test with 5 real people who haven't seen it
First meaningful content	Visible within 1.5s (FCP)	Lighthouse
Above-fold value	Full value proposition visible without scrolling	Load page at 768px viewport height

Message Clarity

Is It Clear?

Is It Necessary?

Visual Design Pass

Hierarchy

Check	Question	Pass If
Dominance	What matters most here?	One element is 1.5x+ larger than everything else per viewport
Order	Why are things in this order?	Sections match: problem before solution, proof before CTA
Clarity	Can you see hierarchy at 25% zoom?	Screenshot at 25%: 3+ distinct size tiers visible
Importance	How would someone know what's important?	Important elements are largest, highest-contrast, or topmost

Elements

User Flow Pass

Actions

Friction

Review Workflow

Solo Review

Phase	Duration	What to Do
Fresh eyes	2 min	Look at page cold, write first impressions
5-Question Audit	3 min	Answer all five questions, note gaps
Message clarity	5 min	Read every word, check for redundancy and confusion
Visual hierarchy	5 min	Squint test, check focal points, scan headings only

Team Review

Phase	Duration	What to Do
Context	5 min	Designer presents intent (not execution)
Silent observation	3 min	Everyone looks at the page in silence
First impressions	5 min	Each person shares first impressions uninfluenced
Structured questions	15 min	Walk through 5-Question Audit as a group
Action items	2 min	Document specific changes with owners

Critique Rules

Automated Audit Script

(function designAudit() {
  const results = { pass: [], fail: [], warn: [] };

  // 1. Check contrast on text elements
  document.querySelectorAll('p, h1, h2, h3, h4, span, a, li, td, th, label, button').forEach(el => {
    const styles = getComputedStyle(el);
    if (styles.color === styles.backgroundColor && el.textContent.trim()) {
      results.fail.push(`Invisible text: "${el.textContent.substring(0, 40)}..."`);
    }
  });

  // 2. Check images for alt text
  const imgsWithoutAlt = document.querySelectorAll('img:not([alt])');
  if (imgsWithoutAlt.length > 0) {
    results.fail.push(`${imgsWithoutAlt.length} images missing alt text`);
  } else {
    results.pass.push('All images have alt text');
  }

  // 3. Check heading hierarchy
  let lastLevel = 0;
  let headingIssues = 0;
  document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(h => {
    const level = parseInt(h.tagName[1]);
    if (level > lastLevel + 1 && lastLevel !== 0) headingIssues++;
    lastLevel = level;
  });
  if (headingIssues > 0) {
    results.fail.push(`${headingIssues} skipped heading levels`);
  } else {
    results.pass.push('Heading hierarchy intact');
  }

  // 4. Check H1 count
  const h1Count = document.querySelectorAll('h1').length;
  if (h1Count !== 1) {
    results.fail.push(`Found ${h1Count} H1 elements (expected 1)`);
  } else {
    results.pass.push('Single H1 present');
  }

  // 5. Check touch targets
  document.querySelectorAll('a, button, input, select, textarea, [role="button"]').forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.width > 0 && rect.height > 0 && (rect.width < 44 || rect.height < 44)) {
      results.warn.push(`Small target (${Math.round(rect.width)}x${Math.round(rect.height)}): ${el.textContent.substring(0, 30) || el.tagName}`);
    }
  });

  // 6. Check for horizontal overflow
  if (document.documentElement.scrollWidth > document.documentElement.clientWidth) {
    results.fail.push('Page has horizontal overflow');
  } else {
    results.pass.push('No horizontal overflow');
  }

  // 7. Check links without accessible names
  document.querySelectorAll('a[href]').forEach(a => {
    const name = a.textContent.trim() || a.getAttribute('aria-label') || a.getAttribute('title');
    if (!name) {
      results.fail.push(`Link without accessible name: ${a.href.substring(0, 50)}`);
    }
  });

  // Output
  console.log('%c DESIGN AUDIT RESULTS', 'font-size: 16px; font-weight: bold;');
  console.log(`%c PASS (${results.pass.length})`, 'color: green; font-weight: bold;');
  results.pass.forEach(r => console.log(`  ✓ ${r}`));
  console.log(`%c FAIL (${results.fail.length})`, 'color: red; font-weight: bold;');
  results.fail.forEach(r => console.log(`  ✗ ${r}`));
  console.log(`%c WARN (${results.warn.length})`, 'color: orange; font-weight: bold;');
  results.warn.forEach(r => console.log(`  ! ${r}`));
})();

Anti-Patterns in Feedback

Bad Feedback	Better Question
"I don't like it"	"What problem does this element solve?"
"Make it pop"	"What should draw attention first?"
"It feels off"	"What's competing for attention?"
"Users won't get it"	"What might confuse someone at this step?"
"We need more"	"What information is missing for the decision?"
"Can we make it bigger?"	"What's the hierarchy of importance here?"

Quick Reference Card

FIRST LOOK (30 sec)
[ ] What is it?
[ ] Who's it for?
[ ] What do I do?

MESSAGE (2 min)
[ ] Is it clear?
[ ] Is it necessary?
[ ] Is it simple?

VISUAL (2 min)
[ ] What's most important?
[ ] Why this order?
[ ] Why this element?

FLOW (2 min)
[ ] Worth a click?
[ ] Obvious next step?
[ ] Why would someone leave?

TECHNICAL (2 min)
[ ] Does it render correctly?
[ ] Is it accessible?
[ ] Is it fast?

The 5-Question Audit​

First Impression​

Measurement​

Message Clarity​

Is It Clear?​

Is It Necessary?​

Visual Design Pass​

Hierarchy​

Elements​

User Flow Pass​

Actions​

Friction​

Review Workflow​

Solo Review​

Team Review​

Critique Rules​

Automated Audit Script​

Anti-Patterns in Feedback​

Quick Reference Card​

Context​