Design and wireframes
Design diagrams live or die on fidelity. Too rough and people cannot react; too polished and they react to the wrong thing. Every page here says which fidelity suits which conversation.
The reason to draw these in Confluence rather than a design tool is not that it is better at design. It is that the people who write the requirements can edit them.
#In this section
Wireframe
Layout before visual design, on the page with the spec.
Mobile app wireframe
Device frames, navigation and touch targets.
UI mockup
A screen convincing enough to react to.
Site map diagram
Page hierarchy, and what links to what.
Floor plan
Walls, doors and furniture, to scale.
Office seating chart
Who sits where, kept current.
#Everything under here
WireframeCreate a wireframe beside the requirements, hand drawn or with crisp UI shapes.Mobile app wireframeWireframe a mobile screen with device frames, navigation bars and touch targets.UI mockupBuild a web page or app mockup with buttons, form fields, tables and menus, and update it in the page.Site map diagramDraw a website site map showing page hierarchy and navigation, and link each node to its spec.Floor planDraw a floor plan to scale with walls, doors, windows and furniture from the floorplan shape library.Office seating chartBuild an office seating chart desk by desk and keep it current as teams move around.
Fidelity is a choice, so choose it.
