Wireframe

A wireframe is a simple, low-fidelity visual representation of a webpage or app screen. It shows the layout, structure, and placement of key elements without any visual design (no colours, images, or final typography). Think of it as the architectural blueprint of a building — it shows where the walls, doors, and windows go before anyone chooses paint colours or furniture.

What wireframes show

• Content hierarchy: What information appears on the page and in what order of importance.
• Navigation: Where menus, links, and buttons are positioned.
• Layout structure: How the page is divided into sections and columns.
• Key functionality: Where forms, search bars, calls-to-action, and interactive elements go.
• Content blocks: Placeholders for text, images, and videos (usually shown as grey boxes with labels).

Types of wireframes

Low-fidelity: Simple sketches, often hand-drawn or created with basic tools. Used for initial brainstorming and quickly exploring different layout ideas. Fast to create and easy to change.

Mid-fidelity: More detailed digital wireframes with clearer proportions and annotations. Used for stakeholder review and developer handoff. Created in tools like Figma, Sketch, or Balsamiq.

High-fidelity: Very detailed wireframes that are close to the final design but without brand styling. Sometimes called "prototypes" when they include interactive elements (clickable buttons, working navigation).

Why wireframes matter

• Alignment early: Get everyone (founders, designers, developers, stakeholders) aligned on structure before investing in detailed design or code.
• Cheaper to change: Moving boxes around on a wireframe takes minutes. Restructuring a coded page takes hours or days.
• Focus on usability: Without visual design distracting the conversation, feedback naturally focuses on layout, flow, and user experience.
• Developer communication: Wireframes give developers a clear picture of what to build before design files are ready.

Your role in wireframe reviews

When reviewing wireframes, focus on:

• Does the page structure make sense for your users?
• Is the most important content prominently placed?
• Is the user flow logical (can someone complete the main task easily)?
• Is anything missing?

Don't worry about how it looks — wireframes are intentionally ugly. That's the point. Design comes later.