Wireframe (Excalidraw)
A wireframe that deliberately looks unfinished. That is the whole technique: a sketch gets comments about what is missing, and a polished mockup gets comments about the shade of blue.
#What this example shows
A page frame with a header, a sidebar and a content area.
Placeholder blocks rather than real copy.
Annotations in the margin explaining behaviour the sketch cannot show.
#How to build it
Step | What you do |
|---|---|
1 | Draw the outer frame with the rectangle tool, then lock it so you stop selecting it. |
2 | Block out the header, sidebar and content region as three rectangles. |
3 | Use short horizontal lines for text placeholders rather than writing real copy. |
4 | Add the primary action as a filled rectangle, so it reads as a button. |
5 | Annotate behaviour in the margin, with arrows bound to the elements they describe. |
#Making it your own
Keep sloppiness on artist or cartoonist; architect looks too finished for this stage.
Bind the annotation arrows to the shapes so they follow when you rearrange.
Add the empty and error states as separate regions on the same canvas.
#Related
Rough on purpose, and quicker for it.
