mirror of
https://github.com/plannotator/effective-html.git
synced 2026-09-19 01:11:19 +08:00
Michael Ramos
40 lines
1.4 KiB
Plaintext
40 lines
1.4 KiB
Plaintext
---
|
|
title: Wireframes
|
|
description: Use HTML wireframes to compare layouts, hierarchy, navigation, and responsive structure.
|
|
---
|
|
|
|
Wireframes show how a page or flow is organized without presenting a finished
|
|
design. An agent can turn the same brief into several HTML wireframes that you
|
|
can open at desktop and mobile sizes.
|
|
|
|
<GuideChapterEvidence chapter="wireframes" />
|
|
|
|
## What a wireframe can show
|
|
|
|
- content hierarchy and density;
|
|
- navigation and page structure;
|
|
- responsive layout;
|
|
- different ways to organize the same content;
|
|
- the order and grouping of controls.
|
|
|
|
## Keep the focus on structure
|
|
|
|
Use realistic content, clear boundaries, and a restrained palette so people can
|
|
compare layout and structure before discussing color, typography, and branding.
|
|
|
|
<GuideHandoff
|
|
artifactHref="/examples/release-readiness/wireframe.html"
|
|
artifactLabel="Open the wireframe"
|
|
artifactDescription="Open it at desktop and mobile 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="Create a simple HTML wireframe from a brief."
|
|
/>
|
|
|
|
<GuideNext
|
|
href="/docs/prototypes"
|
|
title="Prototypes"
|
|
description="See how a working HTML flow can show behavior and state."
|
|
/>
|