A client signs off a wireframe, then is surprised by the finished site. To avoid that, learn how to create a website mockup: apply branding to the approved wireframe, design one template per page type, and gather feedback before development.
This page sits within our digital design guide for software, which places mockups alongside the wider design decisions around them.
Wireframe, mockup and prototype: what separates them
A wireframe shows structure, a mockup shows the intended look, and a prototype adds interaction. Treating them as interchangeable is the quickest way to get approval for the wrong thing. Shopify’s guide to website mockups describes wireframes as diagrams showing the layout and structure of a website without design elements. Mockups are high-detail, static representations of the intended layout with branding decisions applied. A website mockup is a static visual preview and is not yet functional, so nobody can click through it. Prototypes are the most high-fidelity option, with interactive preview links that simulate the user experience.
| Stage | What it shows | Interactive? | Planning use |
|---|---|---|---|
| Wireframe | Layout and structure, with no design elements | No | Agree what goes on each page and in what order before any styling |
| Mockup | Static, high-detail layout with branding, typography and colour applied | No | Get visual approval on the look of the site |
| Prototype | The most high-fidelity preview, with links that simulate the user experience | Yes | Test how the pages connect before developers start |
The definitions follow Shopify’s mockup guide and the Moqups product site.
Choose the stage that matches the decision in front of you. Use a wireframe to argue about content order, a mockup to settle brand and visual hierarchy, and a prototype when the open question is how pages link together. Moqups notes that prototypes are built by adding interactivity to wireframes and mockups, so the earlier stages are never wasted effort. Mockups are interface work; if you are unsure how that differs from experience design, read UI vs UX Design: What’s The Difference And Which One Should You Choose In 2026? – Interestingdevelopment.
Building a website mockup step by step
Build the mockup in the order that prevents rework: Backendless advises doing visual design first, before jumping into prototyping or coding. Before step one, make sure the pages follow a sensible route; App User Flow: Design Clear Paths That Boost Retention And Conversions (2026 Guide) – Interestingdevelopment covers how to design those paths. The sequence below follows the six-step approach in Shopify’s guide.
- Start from the approved wireframe. Its layout and structure are the skeleton that the visual design will dress.
- Decide the brand elements first. The grid layout is based on the line heights and letter spacing of your brand fonts, so fonts, colours and logo come before any grid.
- Design a template for each page type. You create one mockup template per page type, such as home, product or article, not one per individual webpage.
- Add brand-aligned sample copy. Meaningful placeholder text lets reviewers judge the page on realistic content, which lorem ipsum cannot offer.
- Present the work as a linear narrative. Walk reviewers through the brand first and then the pages in order, so feedback arrives in a sensible sequence.
- Collect feedback and revise. Fold comments into the templates while the design is still easy to change.
Making a mockup high fidelity
A high-fidelity mockup applies every visual decision to the layout until it is as close to the final product as possible. Backendless lists what such a mockup should reflect, and each item is a place where a low-fidelity version usually stays vague:
- Layout and navigation. Show the real menu structure and the home page as visitors will meet it, not a generic header block.
- Styles and colour schemes. Apply the brand fonts and palette fixed in the earlier steps so spacing and hierarchy reflect the real typography.
- Images and icons. Replace grey placeholder boxes with the intended imagery and icon set.
- Content. Use the brand-aligned sample copy from the template step so headings and paragraphs behave like the final text.
Tools help with the jump in detail. Moqups, for example, says its drag-and-drop elements take UI and UX mockups from low to high fidelity. Stop at static high fidelity when the audience only needs to approve the look. Add interactivity only when the question has become how the pages connect, which is the prototype stage.
Choosing a tool: Figma, Adobe XD or Moqups
Figma is the safer default for a new mockup project in 2026, because Adobe XD is no longer being developed and is hard to obtain as a standalone product. Adobe XD has been in maintenance mode since early 2023, with no feature updates, according to Fastlancer’s Figma and XD comparison. Figma is a design tool that allows real-time collaboration, which suits review-heavy mockup work.
| Tool | Cost | Notable features and limits | Planning use |
|---|---|---|---|
| Figma Starter | $0 | Unlimited personal files, 3 collaborative Figma design files and 3 FigJam files | Learning, or a single small project |
| Figma Professional | $16 per Full Seat per month, billed annually | Paid tier for working teams | Teams that outgrow the Starter file limits |
| Figma Organization | $55 per Full Seat per month, billed annually | Design system libraries with access controls and branching | Larger teams sharing one design system |
| Adobe XD | Included in Creative Cloud All Apps at $59.99 per month for individuals | Standalone subscription discontinued for new customers since early 2023 | Existing Adobe subscribers only |
| Moqups | Check current plans on the vendor site | Browser-based with no installation; moves mockups from low to high fidelity | Quick wireframes and mockups without installing software |
Figma and Adobe XD prices and status come from Fastlancer’s 2026 comparison, and Moqups details come from the Moqups site.
The Starter limit of 3 collaborative design files is a ceiling, not a target. A team juggling several client projects will reach it quickly and should budget for the Professional tier. Choose Moqups when working in the browser without installation matters more than a large template community.
Design systems and developer handoff
A design system keeps mockups consistent and makes handoff easier, because developers receive the same decisions every time. The brand elements fixed in step two are its foundation. In Figma, the Organization tier adds design system libraries with access controls, branching and merging, so several designers can work from one source without overwriting each other.
For handoff itself, Figma’s Dev Mode offers code inspection and status tracking, which lets engineers see what is ready to build. Backendless adds that Figma designs use the same languages developers expect to see, which eases the move from mockup to product. When you finish a build stage, compare it with the mockup and, where the wireframe and mockup disagree, treat the approved mockup as the visual reference.
Frequently asked questions
| Question | Answer |
|---|---|
| Why make a mockup before any code is written? | Because you can make revisions without changing code. A mockup also gives a realistic look at the final design, and a high-fidelity version close to the finished product can save time and money, according to Shopify. |
| When is a mockup ready to hand to developers? | Once stakeholders have seen it and given final approval. Moqups frames this as simulating the user experience, presenting to stakeholders and getting sign-off before handing off to developers. |
| Can a beginner learn mockup design with a free tool? | Yes. Figma Free is still easier to learn than XD in 2026, with a more active community of templates and tutorials, according to Fastlancer. |
