AI Skill Report Card
Reviewing B2B Web Layouts
Quick Start15 / 15
Layout Review Checklist:
STRUCTURE Framework:
- [ ] Visual hierarchy follows Z/F scanning pattern
- [ ] 8px baseline grid maintained
- [ ] 12-column responsive breakpoints
- [ ] Whitespace ratios: 3:1 (content:spacing) minimum
- [ ] Content density appropriate per section type
- [ ] Nielsen's 10 heuristics compliance
Immediate Assessment: Squint test → Can you identify primary, secondary, tertiary elements in 3 seconds?
Recommendation▾
Add more concrete input/output examples showing before/after scenarios with specific measurements and visual descriptions
Workflow15 / 15
Progress:
- Scan Pattern Analysis - Trace Z/F path, mark friction points
- Grid Validation - Verify 8px increments, column alignment
- Whitespace Audit - Measure spacing ratios, breathing room
- Content Density Check - Section-specific optimization
- Heuristic Review - Nielsen's principles against layout
- Specific Fixes - Actionable recommendations with measurements
Step-by-Step Process
-
Visual Hierarchy Mapping
- Mark primary focal point (should align with business goal)
- Trace natural eye movement (Z for hero, F for content blocks)
- Identify hierarchy breaks where eye "gets stuck"
-
Grid System Verification
- Overlay 12-column grid at breakpoints (320px, 768px, 1024px, 1440px)
- Check 8px baseline alignment on all text and spacing
- Verify container max-widths and gutters
-
Content Density Calibration
- Hero: 20-30% content density, focus on single CTA
- Features: 40-50% density, scannable benefit blocks
- Testimonials: 60-70% density, trust indicators
- Footer: 80%+ density, comprehensive but organized
Recommendation▾
Include a template or framework section with ready-to-use layout assessment forms or checklists
Examples17 / 20
Example 1: Input: Hero section with headline, subtext, CTA, and background image Output:
- Move CTA 24px higher (violates 8px grid)
- Reduce subtext from 18px to 16px (hierarchy conflict with nav)
- Add 40px whitespace above headline (current 16px insufficient for hero breathing room)
- Darken image overlay from 30% to 50% (contrast ratio 3.2:1, needs 4.5:1 for WCAG AA)
Example 2: Input: Feature grid with inconsistent spacing Output:
- Standardize feature cards to 8px padding increments (current: 12px, 15px, 20px mix)
- Align feature icons to 24px baseline (currently floating between lines)
- Reduce feature grid from 4 columns to 3 on tablet (cognitive overload at 768px)
- Increase card spacing from 16px to 32px (improves scannability)
Recommendation▾
Condense some sections - the Best Practices section could be integrated into the workflow steps to reduce redundancy
Best Practices
Visual Hierarchy Rules:
- Size progression: 48px+ (hero), 32px (section headers), 24px (subsections), 16px (body)
- Color contrast: 90%+ dark for headers, 70% for body, 50% for supporting text
- Weight progression: 700 bold, 600 semibold, 400 regular only
Grid Implementation:
- Container max-width: 1200px with 24px gutters
- Breakpoint containers: 100% mobile, 720px tablet, 960px small desktop
- Maintain 8px baseline even with line-height adjustments
Whitespace Strategy:
- Vertical rhythm: 24px between sections, 16px between related elements
- Horizontal breathing: 40px+ around hero CTAs, 24px around secondary buttons
- Progressive disclosure: increase whitespace as content importance increases
Common Pitfalls
Hierarchy Failures:
- Multiple competing focal points in viewport
- CTA buttons smaller than testimonial quotes
- Navigation competing with hero headline size
- Inconsistent spacing creating visual "bumps"
Grid Violations:
- Breaking 8px increments for "optical alignment"
- Different gutter widths across sections
- Ignoring baseline grid for custom components
- Mobile-first breakpoints not scaling proportionally
Nielsen's Heuristic Violations:
- #4 Consistency: Mixed button styles, spacing, typography scales
- #6 Recognition: Icons without labels, unclear navigation states
- #8 Minimalism: Over-decorated cards, excessive drop shadows
- #10 Help: No visual cues for interactive elements
Content Density Errors:
- Hero sections over 40% content density (overwhelming)
- Testimonial sections under 50% density (wasted social proof space)
- Feature grids with uneven content lengths creating jagged layouts
- Footer cramming vs. proper information architecture