design-evaluation-scoring

Visual Quality Is Not Subjective -- It Is Measurable Across 8 Dimensions

Empirical aesthetics research (VisAWI by Moshagen & Thielsch, Lavie & Tractinsky 2004, Seckler et al. 2015) shows that perceived visual quality is not arbitrary opinion -- it decomposes into measurable dimensions. The 8-dimension framework below maps each dimension to research-validated constructs, giving you a repeatable, objective scoring system for any visual artifact.

The 8 Dimensions

#	Dimension	Research Alignment	What It Measures
1	Layout	Seckler et al. (structural clarity)	Grid adherence, alignment, spatial composition, responsive behavior
2	Typography	Bringhurst, Butterick	Type scale, font pairing, line length, readability, hierarchy
3	Color	Reinecke et al., 60-30-10 rule	Palette harmony, contrast compliance, shade scale, dark mode
4	Whitespace	Pracejus et al. (perceptions of luxury)	Spacing consistency, density ratio, separation techniques
5	Hierarchy	Refactoring UI (emphasis/de-emphasis)	Focal points, 3-tier clarity, scanning patterns, CTA prominence
6	Consistency	VisAWI Craftsmanship subscale	Design tokens, component uniformity, cross-screen coherence
7	Craftsmanship	VisAWI Craftsmanship subscale	Pixel precision, image quality, shadows, micro-interactions, CLS
8	Expression	Lavie & Tractinsky (Expressive aesthetics)	Brand personality, visual motifs, illustration, motion, originality

Quick Scoring Rubric

Score each dimension 1-5. Total is out of 40.

Score	Meaning	Indicators
1	Broken	Fundamental violations; unusable or visually chaotic
2	Weak	Multiple issues; feels amateur or unfinished
3	Adequate	Meets basics; no major violations but lacks refinement
4	Good	Consistent and polished; minor improvements possible
5	Excellent	Research-aligned best practice; cohesive and intentional

Score Interpretation

Total	Rating	Meaning
< 16	Poor	Significant redesign needed across multiple dimensions
16-23	Below Average	Several dimensions need improvement; structural issues likely
24-31	Adequate	Solid foundation; targeted improvements will elevate quality
32-37	Good	Professional quality; polish and expression can push higher
38-40	Excellent	Best-in-class visual quality across all dimensions

Processing Fluency Theory

Reber et al. (2004) established that easier to process = more beautiful. Designs that are visually fluent -- consistent grids, predictable spacing, clear hierarchy -- are perceived as more trustworthy, more professional, and more aesthetically pleasing. This is not taste; it is cognitive science.

Implication: Structural factors (layout, typography, whitespace) that increase processing fluency have a larger impact on perceived quality than expressive factors (color, illustration, motion).

Structural Factors Dominate

Seckler et al. (2015) found that layout, typography, and whitespace explain more variance in perceived quality than color or expression. A design with a perfect grid, well-chosen type, and generous whitespace will score well even with a minimal color palette. The reverse is never true -- no amount of color or illustration rescues a broken grid.

Prioritize dimensions 1-5 before investing in 6-8.

The Complete Evaluation Workflow

Step 1: 50ms First Impression

Look at the design for 50 milliseconds (a glance). Record your gut reaction: professional or amateur? Cluttered or clean? This leverages the Lindgaard et al. (2006) finding that aesthetic judgments form in 50ms and correlate strongly with extended evaluation.

Step 2: Anti-Pattern Rapid Screening

Run through the 10-item checklist below in under 60 seconds. Each "yes" is a red flag.

#	Check	Red Flag
1	More than 3 font families visible?	Typography violation
2	Text below 4.5:1 contrast on any background?	Accessibility failure
3	Elements visibly misaligned to each other?	Grid breakdown
4	Spacing feels inconsistent (different gaps for same relationships)?	Whitespace violation
5	No clear focal point -- everything competes equally?	Hierarchy failure
6	Color-only status indicators without icons or labels?	Accessibility failure
7	Low-resolution or stretched images?	Craftsmanship failure
8	Inconsistent border-radius, shadow, or button styles?	Consistency failure
9	Content touching container edges (no padding)?	Whitespace violation
10	No visual personality -- could belong to any brand?	Expression gap

Step 3: Dimension-by-Dimension Audit

Score each of the 8 dimensions using the rubric. Reference the corresponding principle skill for detailed criteria:

1. Layout -- Invoke visual-design-principles:layout-spatial-structure
2. Typography -- Invoke visual-design-principles:typography
3. Color -- Invoke visual-design-principles:color-theory-application
4. Whitespace -- Invoke visual-design-principles:whitespace-density
5. Hierarchy -- Invoke visual-design-principles:visual-hierarchy
6. Consistency -- Invoke visual-design-principles:consistency-design-systems
7. Craftsmanship -- Invoke visual-design-principles:craftsmanship-polish
8. Expression -- Invoke visual-design-principles:visual-interest-expression

Step 4: Score and Prioritize

Sum the scores. Identify the lowest-scoring dimensions and prioritize improvements there. Structural dimensions (1-5) should be fixed before expressive dimensions (6-8).

Measurable Proxies

Use these measurable values to ground subjective impressions in data:

Metric	Target	Tool
Whitespace ratio	30-50% for standard sites	Browser DevTools element inspection
Spacing system compliance	>90% of values on the defined scale	CSS audit / Tailwind config review
Contrast ratios	4.5:1 body, 3:1 large text	WebAIM Contrast Checker, axe-core
Grid adherence	>90% of edges aligned to grid lines	Grid overlay in DevTools
CLS (Cumulative Layout Shift)	< 0.1	Lighthouse, Web Vitals
Type scale compliance	All sizes from defined modular scale	CSS audit
Image resolution	2x minimum for retina displays	Manual check

Cross-Media Notes

The 8-dimension framework applies to any visual medium. Adjust the specific benchmarks per context:

• Presentations: Weight Layout (slide grid), Typography (readability at distance), and Whitespace (50-65% ratio) most heavily. Expression matters for audience engagement.
• CVs/Resumes: Weight Typography, Whitespace, and Hierarchy most heavily. Consistency is critical for multi-page documents. Expression should be restrained to match professional context.
• Dashboards: Weight Layout, Hierarchy, and Consistency most heavily. Whitespace targets are tighter (25-35%). Craftsmanship matters for data credibility.
• Marketing sites: All 8 dimensions matter equally. Expression and Craftsmanship differentiate competitors.

Examples

Working implementations in examples/:

• examples/evaluation-workflow.md -- Step-by-step evaluation of a fictional landing page with the 8-dimension scorecard format

Review Checklist

When evaluating or scoring a visual design:

• Performed 50ms first impression assessment and recorded gut reaction
• Completed anti-pattern rapid screening (10-item checklist, <60 seconds)
• Scored Layout dimension (1-5) against grid and spacing criteria
• Scored Typography dimension (1-5) against scale, pairing, and readability criteria
• Scored Color dimension (1-5) against harmony, contrast, and distribution criteria
• Scored Whitespace dimension (1-5) against density, consistency, and separation criteria
• Scored Hierarchy dimension (1-5) against focal point, tiers, and scanning criteria
• Scored Consistency dimension (1-5) against design token and component uniformity criteria
• Scored Craftsmanship dimension (1-5) against pixel precision, image quality, and CLS criteria
• Scored Expression dimension (1-5) against brand personality and originality criteria
• Calculated total score and interpreted against the rating scale
• Identified lowest-scoring dimensions and created prioritized improvement plan
• Verified structural dimensions (1-5) are addressed before expressive dimensions (6-8)