mirror of
https://github.com/plannotator/effective-html.git
synced 2026-09-19 01:11:19 +08:00
Michael Ramos
57 lines
2.0 KiB
Plaintext
57 lines
2.0 KiB
Plaintext
---
|
|
title: Wireframes
|
|
description: Explore structure without letting polish dominate the review.
|
|
---
|
|
|
|
Wireframes test the organization of an interface before visual finish makes
|
|
changes feel expensive.
|
|
|
|
<GuideChapterEvidence chapter="wireframes" />
|
|
|
|
## Use them for
|
|
|
|
- content hierarchy and information density;
|
|
- navigation and page structure;
|
|
- responsive reflow;
|
|
- alternative layouts;
|
|
- the order and grouping of controls;
|
|
- the boundary between primary and supporting actions.
|
|
|
|
## Keep them intentionally unfinished
|
|
|
|
A useful wireframe looks deliberate without looking final. Use a restrained
|
|
palette, clear type hierarchy, visible boundaries, and realistic content.
|
|
Avoid branded polish that causes reviewers to debate the surface instead of
|
|
the structure.
|
|
|
|
## Make alternatives genuinely different
|
|
|
|
Changing only padding or card order does not produce a meaningful alternative.
|
|
Explore different organizing ideas: an index versus a guided path, a split view
|
|
versus a focused canvas, or a persistent control rail versus contextual
|
|
actions.
|
|
|
|
## Review questions
|
|
|
|
- Can a person tell what the page is for within seconds?
|
|
- Is the primary action obvious without being isolated from its context?
|
|
- Does the hierarchy survive at narrow widths?
|
|
- What can be removed before more detail is added?
|
|
- Are the alternatives testing different structural hypotheses?
|
|
|
|
<GuideHandoff
|
|
artifactHref="/examples/release-readiness/wireframe.html"
|
|
artifactLabel="Open the wireframe"
|
|
artifactDescription="Inspect the standalone artifact at real viewport widths."
|
|
sourceHref="https://github.com/plannotator/effective-html/tree/main/examples/release-readiness"
|
|
skillHref="https://github.com/plannotator/effective-html/blob/main/skills/html-wireframe/SKILL.md"
|
|
skillLabel="Use the wireframe skill"
|
|
skillDescription="Turn a structural question into a bounded HTML wireframe."
|
|
/>
|
|
|
|
<GuideNext
|
|
href="/docs/prototypes"
|
|
title="Test behavior next"
|
|
description="Build a prototype when static structure cannot answer the question."
|
|
/>
|