High-quality websites are so common these days, it’s easy to forget how much work it takes to build one. From jotting ideas down on notepads to low-level sketches up through user testing and programming, the entire process can feel daunting, especially if it’s your first time.
On the flip side, it's exciting to see a website come to life, going from an idea in one designer’s mind to a fleshed-out online presence. In the website design process, a mockup is when that final product truly begins to take shape.
Website mockups give the first clear picture of how a website will look for you and your fellow stakeholders. Because the mockup phase sits in the middle of the design process, it can be overlooked. However, it’s a vital step that all web designers should understand.
In this guide, we’ll explain what a mockup is, when you make them, and how they’re made. Then, we’ll recommend some tools you can use to draft your mockups and turn your notepad pages into stunning web pages.
What is a website mockup?
A website mockup is a static visual model of what a web page, website, or web application will look like in its final form. A mockup is designed to resemble the final product, but it is not yet functional (i.e., you can’t interact with it).
A website mockup will typically include a site’s main layouts, page elements, branding, colors, fonts, and content like text and images (though it may use placeholder content like lorem ipsum text and stock images), with the goal of simulating the final website for designers, developers, product managers, clients, and other stakeholders.
Importantly, a website mockup is static — it shows how a website looks, but not how it behaves. It doesn’t contain moving parts like animations, pop-ups, image sliders, clickable buttons, or working links. These are added to the design later in the prototyping phase and eventually in the final website.
When do you create website mockups?
Website mockups are made in the middle of the website creation process. While approaches to site development vary, most will include five broad phases: ideation and research, wireframing, mockups, prototyping, and programming.
In the ideation/research phase, website and product designers determine what the website needs to accomplish and what it needs to include to satisfy the client and users.
Next, the team will create wireframes. A wireframe is a blueprint of the website that maps the basic functionality, elements, content, layout. It acts as the basis for designers to add visual elements on top. Wireframes can be low- or high-fidelity. In the example below, the wireframe on the left is low-fidelity and the one on the right is high-fidelity:
Mockups are the next phase after wireframes, when low-fidelity sketches become fleshed-out website designs. A mockup takes the fundamental layouts from a wireframe and adds content, branding, and styling. It’s also here that designers will receive feedback from stakeholders and iterate on their mockup designs before continuing to prototypes.
Like wireframes, mockups can have different levels of fidelity. Below, we have a low-fidelity mockup on the left and a high-fidelity mockup on the right:
In prototyping, the mockup is converted into a high-fidelity, interactive demonstration of the website. While not the final coded website, a prototype simulates a website’s look and behavior as closely as possible. Designers use prototypes for user testing to receive valuable feedback about the site’s usability.
Once the prototype is approved, the website’s design is finally handed over to a development team that programs the website and prepares it for launch.
Why are website mockups important?
Mockups are a key phase in the design process. For little cost, they let you visualize and finalize the key design aspects of a website, including:
- Text, images, and other media content
- Buttons, CTAs, forms, and other prominent page elements
- Page layout
- Visual hierarchy
- Color schemes
- Branding elements
- Typography
- Visual accessibility, including color contrast
- Visual consistency across pages
Because they’re basically images, mockups can be easily altered, making it easy to test alternate versions and choose the best one. For example, if you think your home page would read better with a different font and background color, you can draft an alternative mockup and directly compare the two. Optimizing your design in this phase is important — once you move on, even small changes result in wasted developer resources.
Mockups are also easy to share with stakeholders and clients for eliciting feedback. If you’re asked to change a design aspect of the site, you have the freedom to do so in the mockup. Designers might also share multiple mockup versions with stakeholders and ask for feedback, or test different versions on users.
Additionally, mockups keep internal teams aligned on the final product. A good mockup conveys the design team’s vision for a website to product managers and developers. When it comes time to code the website, mockups serve as a visual reference for developers and clarify any ambiguity in the design specs.
All in all, website mockups are the bridge between the low-fidelity ideation stages and the high-fidelity demo stages of the process — they give everyone an understanding of how the website will actually look when loaded in a browser.
How to Create a Website Mockup
When moving into the mockup phase of your website creation process, you’ll ideally have a clear idea of your website’s audience and purpose, and some wireframes to reference when creating your mockup. If so, you can skip to step two. Otherwise, let’s start from the top.
1. Create a wireframe.
While you could skip over wireframes and go straight to constructing mockups, we suggest at least creating some low-fidelity wireframes to get a sense of what elements you want to include and where. For a more in-depth look at this phase, see our beginner’s guide to website wireframes.
When building wireframes, don’t get bogged down in the details. In fact, wireframes shouldn’t be about details, and should instead focus on the general layout and structure of your web pages at a macro level.
You can create wireframes with pen-and-paper sketches, print-outs, or a dedicated software program. Don’t worry about producing an exact version of your site at this point, but make your drawings clear enough to distinguish between page elements like text, images, navigation, CTAs, and other key elements.
You also have the option of building mobile wireframes as well. Planning your mobile site’s layout early in the process means you won’t need to shoehorn a completed desktop design to mobile, and you’re more likely to have a mobile-ready website at launch that looks consistent with your desktop version.
2. Add visuals to your wireframe.
Next, start work on mockups using your wireframe as a foundation. If you drew your wireframes on paper, now is the time to switch to a digital mockup tool that lets you drag and drop components into place, then easily share your finished mockups with the team.
Here are some key design aspects to target in your mockup:
Page Elements
Your wireframe can help you choose which elements to include — now it’s time to decide how they’ll look, both on their own and grouped together on the page. You may find that adding or removing elements makes for a cleaner page and a more streamlined experience.
Color Scheme
Wireframes don’t typically define colors. This is the mockup’s job: Incorporate your brand’s colors and check for pleasing color combinations and sufficient color contrast.
Typography
Pick the right typefaces and fonts for your website that are easy to read on screens. Make sure to choose web-safe fonts or use a font stack to prevent unstyled text from appearing in anyone’s browser.
Content
You may not have all of your site content ready to go at this point, but try to incorporate as much real website copy, images, and media as possible into your mockup. Using dummy text and placeholder images is fine, but it won’t provide as accurate a picture of the final website.
Layout
Mockups are a chance to refine the layouts you created in your wireframe. With more detailed designs, you can see how your page establishes visual hierarchy and aids comprehension. You can also implement design patterns to ensure consistent layouts across your site.
Navigation
Navigation is crucial to retaining users and sending them on a path to conversion. Mockups can help demonstrate basic user flows from page to page.
Consistency
While you may be creating one page at a time, remember that you’re designing an entire website and that users will expect a consistent aesthetic throughout. A uniform look adds to a more coherent and satisfying browsing experience — ensure this comes across in your mockups.
Not sure how to tackle all of these at once? That’s why we make mockups in the first place! Take your time adding design features one-by-one, and keep iterating until you arrive at a client-ready deliverable.
3. Collect feedback, test, and redesign.
Website mockups are the first stage when you can conduct user testing, allowing you to get a feel for what your design is doing right and what needs tweaking.
Put your design in front of other team members and user testing participants to acquire feedback. Depending on the fidelity of your mockup, your testing may be simply gauging general feelings about the interface. Or, you could assess the usability of the website for specific tasks. Given the flexibility of mockups, any suggestions can be applied and tested quickly, then incorporated permanently if successful.
Eventually, you’ll want to present your mockups to clients and receive feedback from them as well. Clients should understand that, though your website mockup looks like a final product, it’s only a proposed draft that can easily be changed. Mockups are easy to share with clients through email or in a presentation. You could also share files in the format of your preferred mockup tool if clients want to try some alterations themselves.
4. Turn your mockup into a prototype.
When you, your team, and your clients are happy with the website mockup, go ahead and turn your mockup into a prototype, an interactive model of the website. Prototypes usually aren’t fully coded (i.e., they’re made in a prototyping program), but simulate the experience of using a website as close to reality as possible.
Depending on your tools, you might keep things inside the same tool or recreate your project inside a new program. A prototype is where you’ll do the majority of your usability testing, discovering new areas for improvement and redesigning until you’re confident enough to hand your designs off to developers.
Website Mockup Tools
Your website design team relies on software tools from brainstorming all the way through prototypes, and your preferred software stack will depend on several factors: budget, team member preferences, the fidelity of your wireframes/mockups/prototypes, and desire to adopt multiple tools or stick to a single tool throughout.
Looking at the general pool of design tools, we have a few broad categories of options. First, there are end-to-end design tools. With these, you can build from wireframes up to developer handoff with one tool. The two key benefits of these tools are convenience and consistency — there’s no moving files between disparate tools, and your team only needs to learn one tool to draft their deliverables.
Next, there are tools specifically for mockup creation. In this design flow, you’ll typically draft your wireframes in one tool then transfer it to your mockup tool. Additionally, some tools focus on both wireframes and mockups, while others focus on mockups and prototypes.
Lastly, there are graphic design software tools. While not meant specifically for mockups, these tools may be ideal if you want realism in your mockups that other tools can’t match, and are especially useful if your site’s design is less conventional. Designers well-versed in tools like Adobe Photoshop can churn out high-fidelity mockups that impress clients. Just make sure that whatever you create can ultimately be coded into a proper website.
Here are some tools you should consider for your mockup phase and beyond:
- Adobe XD: The first of the Adobe products listed here, Adobe XD is an end-to-end UX design application for Windows and macOS. Adobe XD handles design tasks for wireframes, mockups, prototyping, and developer handoff, and leans heavily into pre-build components and third-party libraries to help build out designs efficiently.
- Figma: Figma is another end-to-end design tool for a wide range of website-building and application-building cases. It’s a freemium web-based tool, allowing teams to collaborate simultaneously on a file and access cloud files from one place. It also offers a wealth of features and design resources to aid your process, and you can get some decent mileage from it for free.
- Adobe Illustrator: Illustrator is a popular graphic design tool and the industry standard for vector graphics. Illustrator is excellent for wireframing and mockups, and is relatively easy to learn.
- Sketch: This Mac-only design tool packs a user-friendly, end-to-end design experience in one. It offers robust collaboration features to support your entire team, plus an impressible library of third-party extensions and component libraries.
- InVision Studio: Try this option if you’re creating higher-fidelity mockups. More oriented toward prototyping, InVision Studio makes the transition from mockup to prototype more manageable. InVision Studio is free but was designed to be used with InVision design collaboration software.
- Adobe Photoshop: We bet you’ve heard of this one — Photoshop is a staple among graphic designers and can also be used to draft mockups. If your mockups are lower-fidelity, we’d recommend using Adobe Illustrator or XD instead. But, for more detailed or unconventional designs, it doesn’t get much more powerful than Photoshop.
Website Mockups: Bring Your Site to Life
Starting a new website comes with a lot of uncertainty. There are many ideas and concepts discussed in the abstract, and no real visuals to show for them. The mockup phase is when things begin to fall into place — it’s the first time you create something that really looks like your product, which can be highly useful and motivating.
This is why you want to keep website mockups as part of your process, and to do them right. While wireframes act as the blueprint and prototypes make user testing possible, website mockups unite these phases. They make the value of your designs clear to your internal team and to your clients, and open the door for feedback to perfect it.
