Module 5: Wireframing & Low-Fidelity Design
- Create a low-fidelity wireframe for a screen
- Explain the purpose of fidelity levels in design (low, mid, high)
- Use wireframes to test structure before investing in visual design
A wireframe is a simplified, mostly black-and-white layout of a screen that shows where elements like navigation, buttons, and content will sit, deliberately leaving out color, imagery, and final copy so that structure and flow can be judged on their own. Designers work in increasing levels of fidelity: low-fidelity wireframes (often pencil sketches or simple boxes) are fast to produce and easy to throw away, mid-fidelity adds more realistic spacing and labeling, and high-fidelity mockups look like the finished product. Starting low-fidelity matters because it is far cheaper to redraw a box on paper than to redo a fully designed, coded screen — teams that skip straight to polished visuals often fall in love with details before the underlying structure has been tested.
1. Which best orders fidelity from lowest to highest?
2. Why do designers deliberately leave color and images out of early wireframes?