Awwwards interface evaluation

Awwwards Interface Evaluation

Grade any rendered interface (a todo list, a status card, a terminal layout, an ASCII panel) the way the Awwwards jury grades a website: four weighted dimensions, one overall score, one achievement level. Deterministic, repeatable, no vibes.

When to use

• A user asks "rate this layout / is this good / score this interface."
• You just rendered a checklist or todo panel and want a quality gate before showing it.
• You are comparing two display styles and need a tiebreaker.

The rubric (fixed weights)

Dimension	Weight	What it measures
Design	40% (0.40)	Visual aesthetics, layout quality, typographic hierarchy, mathematical/grid consistency
Usability	30% (0.30)	UX clarity, scannability, distinct states, functional efficiency
Creativity	20% (0.20)	Innovation, originality, systematic thinking
Content	10% (0.10)	Information quality, meaningful organization, priority signal

overall = design*0.40 + usability*0.30 + creativity*0.20 + content*0.10

Each dimension is scored 0–10 and clamped to a 10.0 ceiling.

Achievement levels (map overall → label)

Overall score	Achievement level
≥ 9.0	SITE OF THE DAY 🏆
≥ 8.5	DEVELOPER AWARD 🥇
≥ 6.5	HONORABLE MENTION 🎖️
< 6.5	KEEP IMPROVING 📈

Scoring heuristics (the reference implementation)

These are the concrete signals the reference evaluator checks. Use them as a checklist when scoring by hand, or run reference/evaluator.mjs.

Design (base 7.0):

• +1.0 if every non-empty line is the same width (grid consistency).
• +0.8 if the render uses solid container borders (structural framing).
• +0.5 if it uses bracketed status markers like [ ] / [✓] (clear indicators).
• +0.7 baseline for enforced mathematical spacing.

Usability (base 7.5):

• +1.0 if more than one distinct task state is present (e.g. pending AND in-progress).
• +0.8 if every item's label is longer than 10 characters (descriptive, not cryptic).
• +0.7 for left-aligned scanning order.

Creativity (base 8.0):

• +0.5 for a distinctive border/visual system.
• +0.5 for demonstrating a modular, systematic approach.

Content (base 7.5):

• +1.0 if average item length > 20 characters (substantive).
• +0.5 if items carry varied priority (not all the same).

Scorecard output format

Box width is derived from the longest row, so the right border always aligns and no line clips (reproduce with node reference/evaluator.mjs):

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ DESIGN:     9.0/10 (Swiss Grid + Typography)   ▓
▓ USABILITY:  10.0/10 (Clear symbols + scanning) ▓
▓ CREATIVITY: 9.0/10 (Functional minimalism)     ▓
▓ CONTENT:    9.0/10 (Meaningful organization)   ▓
▓                                                ▓
▓ OVERALL:    9.3/10 → SITE OF THE DAY           ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

Reference implementation

reference/evaluator.mjs — self-contained ES module. Exports evaluateInterface(display, items), getAchievementLevel(score), generateScorecard(evaluation). Run node reference/evaluator.mjs for a live demo.

Design lineage

Weighting and achievement bands follow the public Awwwards evaluation model (40/30/20/10). Grid and typography signals draw on Josef Müller-Brockmann (Swiss grid) and Ellen Lupton (Thinking with Type).

Agent-runtime notes

Runtime-agnostic — pure scoring logic, no host APIs. Pairs with swiss-grid-todo-display (renders the thing you score) and contextual-todo-triggers (decides when to show the score).