Design a low-fidelity responsive screen flow, keep structure separate from brand polish, wire prototype navigation, and hand the approved architecture into implementation.
Where: Designer → Add page → Wireframe & mockup.
Key ideas
- Low fidelity is intentional: The scaffold starts in grayscale so navigation, hierarchy, content density, and task flow can be judged before color and finish reopen visual debates.
- Screens live inside the page document: Each screen is a named section and prototype navigation uses the InteractionSpec goto-screen action rather than an ad-hoc script.
- Responsive flow, not a fixed screenshot: Wireframes use Desktop, Tablet, and Mobile widths and can insert interactive elements when a flow needs realistic behavior.
Steps
- Add a Wireframe & mockup page and list the user goals and screens before drawing UI.
- Create one clearly named screen section per state or route, keeping copy realistic enough to reveal density problems.
- Build navigation, content hierarchy, forms, empty/error states, and primary actions in grayscale.
- Wire screen changes and controls through interactions; use an inserted interactive element only when ordinary markup cannot demonstrate the behavior.
- Use Edit and Layers to reorder/re-parent structure, and Comment pins to collect decision feedback on exact elements.
- Test the flow in Preview with keyboard, click, back/close behavior, and Desktop/Tablet/Mobile widths.
- Run review for hierarchy and empty-space problems while preserving the deliberately low-fidelity visual language.
- Duplicate or add pages for alternatives only when comparisons cannot be expressed cleanly as screens in the same flow.
Wireframe checklist
- Named screens and an obvious starting state
- Primary/secondary actions and navigation paths
- Loading, empty, error, success, and permission states where relevant
- Realistic content density and responsive breakpoints
- Comments resolved before visual design begins
Available creation controls
- Normal document and stylesheet editing
- Motion/interactions and exposed fields
- Interactive element library
- Stock/generated imagery when fidelity genuinely requires it
- Design-system/direction checks, review, pages, and Brain context
Tips
- Keep color and decorative imagery out until the flow is approved.
- Use Preview for task completion and Comment mode for stakeholder decisions; they answer different questions.
Limitations and important notes
- A wireframe is not an automatic conversion into a polished Landing page.
- Imported or custom scripts can bypass the reviewable InteractionSpec and are harder to maintain.
- Prototype success does not validate production data, authentication, or accessibility.
Troubleshooting
Every screen is visible at once.
Name screens consistently and use goto-screen interactions rather than laying all states out as ordinary page sections.
The wireframe review focuses on color.
Return to the grayscale scaffold and ask reviewers to assess hierarchy, flow, states, and content density.