They communicate brand identity, define visual hierarchy, and allow you to get stakeholder buy-in — all before spending time prototyping or, even worse, starting to code.

But before we dive into the world of mockups, we first need to understand what they are, and what they aren’t.

What are website mockups and what role do they play in web design?

The process of designing new website interfaces can be broken into three phases: wireframes, mockups, and prototypes. While there can be variations to each phase (like high-fidelity wireframes or low-fidelity prototypes), they generally flow in this order.

• Wireframes are the blueprints of your web page. They are low-fidelity representations of the content, structure, and information hierarchy. Wireframing tools allow you to make revisions early in the design process before graphic design elements are added.
  

• Mockups are mid to high-fidelity visual representations of your website. They combine the structure of the wireframe with graphics, typography, UI design elements, and branding. Because mockups provide a near-final representation of how the site will look, this is a good stage to get stakeholder buy-in, without accumulating technical debt (we will get into that in a bit). 
  

• Prototypes demonstrate the functionality and usability of your site. They are high-quality interactive representations of your site design that allow for user testing and feedback. They help answer vital user experience questions such as “can my users actually use my site?” And “do they perform tasks and objectives with ease and satisfaction or difficulty and frustration?” 

Why create a website mockup

Website mockups allow you to iterate and gather feedback on your design without creating a ton of technical debt, defined by Outsystems as being  “a debt that businesses eventually have to pay with time, money, and resources, typically for choosing speed over quality.” 

And technical debt isn’t just related to code. You can accumulate technical debt by skipping over the mockup phase and jumping from wireframes into interactive prototypes. Prototyping involves designing multiple screens, interactions, even animations, that all get linked together. One small change to the UI can take hours of extra time to update in a prototype. By creating mockups first, you have more freedom to iterate, gather feedback from stakeholders, and get buy-in on the visual look and feel of your website without sacrificing the time and effort it takes to update prototypes.

What to look for in a website mockup tool

Using the right mockup tool can save you a lot of time and frustration when designing your website. When looking for mockup tools, it is important to look for ones that are:

• Scalable. The best mockup tools can take you from the wireframe stage all the way through the prototyping phase. Once the design and interface is approved in the mockup phase, you can seamlessly move into prototyping without needing to recreate the design in a new tool.
  
  
• Easy to collaborate in. The ability to collect feedback from other team members, clients, stakeholders, and even users directly in your design tool streamlines communication and makes creating iterations so much easier. This is even more important when considering how essential remote work collaboration has become for teams around the world in the last few years.
  
  
• Compatible with UI kits and component libraries. You can save a lot of time building mockups by using UI kits that include basic site components like buttons, icons, form inputs, etc. This is especially useful if you know the site is going to be built using a specific design system like Bootstrap or Salesforce’s Lightning Design System. Many mockup tools come with these UI kits available or allow you to import UI kits from third-party libraries.
  
  
• Easy to export for developers. Gone are the days where developers have to code based on a static mockup file. Many mockup tools now offer export options for developers that allow them to grab HTML, CSS, and other design elements directly from your mockup.

Best website mockup tools

Below are some of my favorite tools to create scalable website mockups. 

Adobe XD 

Adobe XD is my favorite tool for website and user experience design. XD is scalable – you can use XD throughout your entire design process, from wireframes to developer hand-off. It’s available on Mac and PC platforms and has a ton of features to help designers move quickly. 

In XD, you can create components and component states (hover, click, etc) and use repeat grids to duplicate content faster. You can also access a library of third-party design resources for different things like icons sets, stock imagery, real content generation, and more. Plus, responsive resizing makes it easy to create a responsive website that looks great on both desktop and mobile devices.

XD comes with quite a few preconfigured sharing types, including design review, development handoff, and user testing. Each option exports a shareable link with different tools for different audiences. Users and clients can add comments and feedback, and developers can access tools for extracting code and assets from the mockup.

Price: $9.99/month – Free 7 day trial

Figma

Figma is a powerful web-based design tool. All you need is a web browser and an email address to get started. It can support your design project from wireframe, to mockup, to prototype. Everything is cloud based, which allows for auto-saving and real-time co-editing with other designers in the same file. The Figma community is also jam-packed with third-party resources like illustrations, design kits, and templates to get you started. 

You can create a team asset library to share things like components and styles across files and projects. Auto Layout allows your design components to grow or shrink as content changes — think buttons with changing text labels or cards/tiles with changing content. This is especially useful when creating responsive designs.

The Inspect Tab allows users to grab code and styles directly from your mockup, making hand-off to development teams a breeze. 

Price: Free (up to 3 files) – $12 per editor/month for unlimited files

Related read: From Figma to Webflow: turning your static designs into interactive websites 

Justinmind

Just like the others, you can create wireframes, mockups, and prototypes in one place with the Justinmind platform. You can also gather user feedback, co-edit with other designers, and export for developers.

This website mockup tool allows you to create your own component libraries, define global styles, and even include fully functional input elements in your design. There are a lot of responsive design tools as well, like width and height percentages, liquid layouts, and breakpoint events. 

The only downside is that some of these features are only available in higher priced tiers, like templates and masters, co-editing, and exporting to HTML. And if you want to remove the Justinmind branding, you will need to purchase at least the Standard subscription.

Pricing: Three models – Free, Standard ($9/month), and Professional ($19/month)

Sketch

Sketch is yet another interface design tool that can support each phase of your design process.  (Are you sensing a trend here?) However, unlike the others, Sketch is available for Mac users only. They do offer a web app, available on all devices, which can be used for collaboration and exporting assets, but can not be used for designing and editing.

Sketch’s interface is intuitive and easy to jump right into. You can create Design Systems to include colors, styles, and Symbols — which are components that can be reused and updated across all instances. This makes style updates easy to manage. One thing to note; Sketch does not come with any built-in components, like UI kits or icons, but there is a large online community with design kits you can download.  

Pricing: $12 per editor/month – Free 30-day trial

You might notice I didn’t include Photoshop, which used to be the gold standard for website mockups. But if you are looking for scalability, this is not your tool. Photoshop is really great at creating static designs as psd files, but if you need to turn your mockup into a prototype, you will need to use another tool. 

Don’t skip the website mockup

Just like you wouldn’t want to jump right in and paint your walls before you test out some color swatches, you don’t want to begin prototyping your website design before creating a mockup. Mockups allow you to build brand identity, test graphics and visuals, get feedback and stakeholder buy-in, and make fast iterations without the time and energy that comes with updating prototypes. 

Remember, when looking for mockup tools, look for ones that are scalable, easy to collaborate in, include (or allow importing of) UI kits, and have export options for developers. 

While there are many mockup tools to choose from, these are my favorites. Let me know in the comments if I missed one of your go-to tools!