Wireframing Tools & Techniques

B1 — Wireframing

A wireframe is a simplified, low-detail sketch of a page's layout — it shows where things go, not how they look. Deliberately leaving out colour, imagery and final copy lets you focus purely on structure and usability before investing time in visual design.

Tools

• Sketching on paper — fastest for early, throwaway ideas
• Graphic design software (e.g. Canva)
• UX design software (e.g. Adobe XD, Sketch) — built specifically for interface design, often with built-in prototyping
• Dedicated wireframing apps (e.g. Wireframe.cc)

Key techniques

• Hierarchy of elements — the most important content (e.g. a hero heading, primary call-to-action) should be visually dominant.
• Balance of content — avoid overloading one area of the page while leaving another empty.
• Grouping — related elements (e.g. a product's image, title and price) placed together.
• Alignment — elements line up consistently, giving the page a clean, professional feel.
• Accurate dimensions — respecting real screen sizes rather than drawing freely, so the wireframe translates realistically into a build.

Task

Wireframe your homepage and one other key page from your site map (Lesson 7), applying every technique above. Keep it low-fidelity — greyscale boxes and labels, not finished graphics.