Prototype
Design & UXA clickable mock-up of a website or product that simulates the real interactions — clicks, transitions, flows, micro-states — so the team can test how it…
Design & UX
Wireframe
Lo-Fi Wireframe
Robert KlimantCo-founder
What is Wireframe?
A wireframe is a low-fidelity layout of a webpage or screen that focuses on structure, content hierarchy, and functionality — not visual design. It's usually black, white, and gray, often built in Figma, with placeholder text and simple shapes standing in for images. The point is to make decisions about what goes where and why, before anyone invests time in typography, color, or polished UI. Lo-fi wireframes are the cheapest way to test a layout.
Why it matters
Most bad websites get bad early — at the layout stage — and the team only realizes it after fifty hours of polish. Wireframes catch the problem cheap. When the page is grayscale, no one is distracted by the hero photo or the gradient button. The conversation goes back to what it should be: what's on this page, why is it here, and what do we want the visitor to do? Strategy before design. Pretty pages without a plan are expensive decoration. Wireframes are how the plan gets written down in something everyone can react to.
How it works
A designer takes the page brief — goal, audience, message hierarchy — and builds a wireframe in Figma using boxes for sections, lines for type, and rectangles for media. Sections are labeled ("hero," "logo wall," "feature grid," "pricing," "FAQ") and ordered to support the goal. Real copy gets dropped in where possible, because lorem ipsum hides bad hierarchy. The team reviews, argues about order and prominence, moves blocks around. Once the wireframe earns sign-off, the designer moves into hi-fidelity — applying typography, color, imagery, and motion. Skipping wireframes means redoing all of that the moment someone realizes the page is structured wrong.
Related terms
User Flow
Design & UXA diagram of the steps a visitor takes to complete a task on your site — from the landing page through every screen to conversion — so the team can see where…
Figma
Design & UXThe browser-based design tool most product and marketing teams use to design websites, apps, and interfaces — collaborative, fast, and the de facto standard…
User Experience
Design & UXHow it feels to use a product from start to finish — the speed, the clarity, the flow, the copy, the moments of friction, the parts that just work — not just…
Visual Hierarchy
Design & UXThe way a page guides the visitor's eye — through size, weight, color, contrast, and spacing — so the most important thing gets seen first and the rest gets…
Discovery Process
Business & StrategyThe kickoff phase of a project where the team digs into goals, audience, content, and competition before any design or code happens — the part that quietly…
Responsive Design
Design & UXDesigning a website so it adapts to every screen size — phone, tablet, laptop, ultrawide monitor — instead of forcing one fixed layout that breaks the moment a…