Why wireframes matter
Wireframes are simple drawings of screens that show layout and content without colour or decoration. They let you and your team agree on what goes on each screen before anyone spends time on visual polish. Many design adverts ask for wireframing, and your sketches are good material for a case study because they show your thinking.
Start on paper
Paper is fast, free and needs no data or laptop. You can draw ten versions of a screen in the time it takes to draw one carefully on a computer.
A useful method is the quick sketch round:
- Fold an A4 sheet into eight boxes.
- Set a timer for eight minutes.
- Draw a different idea for the same screen in each box, about one minute each.
- Pick the strongest one or two, and combine the best parts.
Draw phone or browser shaped boxes to match what you are designing, use rough lines for text, boxes with a cross for images and clear rectangles for buttons. Write real labels on buttons, such as "Send money", not "Button".
Low fidelity and high fidelity
- Low fidelity wireframes are rough: paper or plain grey boxes. They are for exploring and testing ideas.
- Mid fidelity wireframes are neat grey layouts in a tool, with real text and spacing but still no colour.
- High fidelity designs look like the finished product, with colour, type and images. You will learn these in the interface design section.