A mockup is not a final design. A mockup is a communication tool. Its job is to convey the structure, layout, and content hierarchy of a web page clearly enough that stakeholders can give feedback and developers can start building.
The most common mistake in the mockup process is making it too polished too early. When a mockup looks finished, stakeholders assume it is finished and focus on colors and font choices instead of layout and content strategy. When a mockup is clearly rough, feedback focuses on the important structural questions.
Fidelity levels
Low fidelity (wireframe). Gray boxes, placeholder text, no styling. Communicates layout and content hierarchy only. Takes minutes to create. Best for early concept exploration.
Medium fidelity. Real content (or realistic content), basic typography, no color or images. Communicates layout plus content strategy. Takes 30-60 minutes. Best for stakeholder review.
High fidelity. Actual colors, images, fonts, and detailed interactions. Looks like the final site. Takes hours to days. Best for developer handoff and user testing.
The right fidelity level depends on the conversation you need to have:
- "Where should the CTA go?" -- low fidelity
- "Does this content structure make sense?" -- medium fidelity
- "Is this the right visual direction?" -- high fidelity
What a good website mockup includes
Header section. Logo placement, navigation items, and any utility navigation (search, login, cart). The header sets the primary navigation pattern.
Hero section. The above-the-fold content. Headline, supporting text, primary call-to-action. This is the single most important section because it determines whether visitors stay or bounce.
Content sections. Feature blocks, testimonials, pricing tables, image galleries. Each section should have a clear purpose and visual hierarchy.
Footer. Secondary navigation, legal links, contact information, social links. Often overlooked in mockups but important for SEO and trust.
Responsive states. Desktop, tablet, and mobile layouts. Content that fits in a 3-column grid on desktop needs to reflow into a single column on mobile. The mockup should show how this happens.
Device frames add context
A website screenshot on a plain white background looks like a design comp. The same screenshot inside a laptop or phone frame looks like a product. Device frames add context that helps stakeholders visualize the final experience.
For presentations: laptop frame for desktop views, phone frame for mobile views. For portfolios: angled devices with subtle shadows for visual appeal. For app store listings: specific device frames (iPhone 15, Galaxy S24) that match the platform requirements.
Common mockup tools and their trade-offs
Figma. The industry standard. Excellent for collaboration. But has a learning curve for non-designers. Overkill for a quick wireframe.
Sketch. macOS only. Mature tool with extensive plugin ecosystem. Being replaced by Figma in many teams.
Balsamiq. Intentionally low-fidelity. Forces you to focus on structure, not aesthetics. The hand-drawn style prevents stakeholders from treating wireframes as finished designs.
Paper and whiteboard. The fastest mockup method. Zero learning curve. Poor for remote teams and version control.
Browser-based generators. No account required, no learning curve, instant output. Best for quick mockups when you need something visual in minutes.
I built a website mockup generator at zovo.one/free-tools/website-mockup-generator that creates device-framed website mockups from screenshots or URLs. Upload a screenshot or provide a URL, choose a device frame (desktop, tablet, phone), and get a presentation-ready mockup. It is for the moments when you need a visual in 30 seconds, not 30 minutes.
I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.
Top comments (0)