Mock up a homepage in Canva or Figma

Key takeaways

A homepage mockup is a static picture of how the finished page will look, made after the wireframe and before the build. An SME can make a useful one in Canva or Figma using real copy and photos. Its purpose is to reveal visual problems when they are still cheap to fix.

• Build the mockup after the wireframe is agreed.
• Canva is quick, while Figma is more precise.
• Use real copy and real photos.
• Make a phone version as well as desktop.

What is the difference between a wireframe and a mockup?

A wireframe shows structure in grey, while a mockup shows how the page will look, with colours, fonts and images. Agree structure first and appearance second. If you mix them, feedback on layout gets tangled up with opinions on colour, and both conversations take much longer.

• How to create a high-converting homepage for an SME
• Homepage wireframe: plan the page before the design
• Set a visual direction before you design a homepage

Should you use Canva or Figma?

Use Canva if you are a non-designer who wants something quick and shareable. Use Figma if you are working with a designer or need accurate spacing, components and handover. Both have free options at the time of writing. The tool makes little difference to the quality of your decisions.

• Hand a homepage design to a developer

What should the mockup contain?

It should contain the actual headline, the real photos or close stand-ins, your button styles and the proof you hold. Mock up the top of the page in detail, then one or two typical sections. You do not need every section perfect, if the visual system is clear.

• Header and hero, in full.
• One proof section.
• One services section.
• Closing section with the button.
• The same sections at phone width.

• Why lorem ipsum ruins a homepage design

How do you get useful feedback?

Show the mockup at actual size, ideally on the device buyers use. Ask specific questions: what does this business do, what would you do next and does it look trustworthy? Avoid asking 'do you like it?', which invites taste. A phone in someone's hand beats a projected slide in a meeting room.

• How to give website design feedback that gets results
• Preference testing: choose between two designs with data

What can a mockup not tell you?

A mockup cannot show speed, how real content reflows on small screens or whether forms work. Images may look beautiful in a static picture and be far too heavy in a live page. Never treat approval of a mockup as approval of the finished page, because the built version needs its own check.

• Build your new homepage on a staging site
• Performance budgets: stop your website slowing down again

When can you skip the mockup?

Skip it for template builds, where you can work directly in the template and preview the real thing. Building a live draft is often quicker than drawing one. Keep the mockup for custom builds, where development is much more expensive to change than a design file.

• Custom vs template homepage for a small business

What does this look like in practice?

A pattern worth watching for: a mockup approved on a large monitor is first seen at phone size after it has been built, and the hero takes up the whole screen. Reviewing a phone-width version at the mockup stage takes only a few extra minutes, and it avoids paying for changes during development.

• See client work
• Website Design & Development for UK businesses

Homepage mockup checklist

• Agree the wireframe first.
• Use real copy.
• Use your real photos if you have them.
• Mock up desktop and phone.
• Review on a real device.
• Ask buyer questions, not taste questions.

• Section backgrounds that give a homepage rhythm
• Homepage heading sizes that guide the eye

Next step

Mock up just the first screen, at phone width, with your real headline. That one small picture will reveal most of your problems with hierarchy.