Wireframing and Prototyping

Start low-fidelity

Before choosing colours, decide structure. A wireframe is a simple grey-box layout showing what goes where – header, content, buttons – without visual polish. It is fast to change, so you explore many ideas cheaply.

From wireframe to prototype

• Sketch on paper or a whiteboard first – the fastest iteration there is.
• Wireframe in a tool (Figma, Sketch, Adobe XD) to define layout and hierarchy.
• Prototype by linking screens so it feels clickable – without writing code.

Test before you build

Put the prototype in front of a few users and watch them try to complete a task. You will spot confusing flows in minutes – far cheaper than discovering them after engineering has built the real thing.

Key points

• Decide structure with low-fidelity wireframes before visual design.
• Sketch → wireframe → clickable prototype.
• Figma/Sketch/XD let you prototype without code.
• Test early – fixing a wireframe is far cheaper than fixing production.