A website mockup is a crucial step in the web design process. Like wireframes, they help visualize the end product without starting to actually build a website yet. This helps clarify your vision and get everyone involved on the same page, as well as make decisions before committing to a design.
Because they are such a crucial tool for this process, in this post, we will cover everything you need to know about website mockups. The post explains what a website mockup is, the purpose of creating one, lays out some examples, and a step-by-step guide to mock up your own website design.
At the end of the post, we want you to feel capable of using this tool to build exactly the website you want to build.
What is a Website Mockup?
Let’s start with the obvious question. What exactly is a website mockup? It’s easier to show than tell, so here is an image to help clarify.
Now, the above looks like a screenshot of a finished website, doesn’t it?
It’s not. This is not an image taken from a website that already exists; instead, it’s a visual representation of what a website will look like in the end. It contains the main layouts, branding, colors, fonts, text, and images.
Basically, it has everything you need except for the final ingredient: interactivity. A website mockup is a static image file and is not available in the browser. It has no animations, pop-ups, or working links. All of those are added in the prototyping phase.
What’s important to note is that, just like wireframes, website mockups can contain different levels of detail. Similar to their counterparts, you also differentiate between low-fidelity and high-fidelity mockups. The first kind contains less, the second more details.
This doesn’t mean that one is better than the other. A low-fidelity mockup can also simply be a step on the way to a high-fidelity version.
It’s also important to note that the distinction between a high-fidelity wireframe and a low-fidelity mockup is a bit fluid. They can be pretty much the same thing. But splitting hairs like this is also a bit counterproductive. In the end, what’s important is how you use these tools to arrive at the design of your website.
What’s the Purpose of Creating a Mockup Before Development?
So, why would you create a website mockup in the first place? What is the point?
Visualize Your Site and Collect Feedback
Ideally, mockups are one of the stages of your web design process. A mockup is a step further than a wireframe, which only concerns itself with structure and layout.
In this part of the website creation process, on the other hand, you already get a lot closer to the finalized design. Here, you fill the structural elements with content and life. That includes colors, button shapes, branding elements, visual hierarchy, etc. It’s sort of a middle stage, where you can already fully picture what the final website will look like.
Because website mockups are a lot closer to the final website, they allow you to communicate your ideas more clearly to other parties involved. This helps get everyone on the same page and, most importantly, allows stakeholders to voice their opinions.
In most cases, there are a whole bunch of people or even departments concerned with the website creation process. Having a concrete visual to work with makes it much easier to give and collect feedback. Especially since many mockup tools have feedback functionality built-in, so you can collect it all in one place.
Gathering feedback is an invaluable part of the design process since it allows you to curate additional ideas and iterate on the website concept until it fulfills all the roles it is supposed to.
Save Time and Market Your Skills
Another benefit of website mockups is that they save time. It’s easier to change some colors or move elements around in an image than it is to go into the codebase of a website and make the changes there. That’s true even for website customizations that don’t require coding. Plus, mockups make it faster to create several different design versions.
Website mockups can also be a great tool, even if they are not for a concrete project. You can use them for marketing purposes and to show off your skills. As you will see in the website mockup examples below, you can also use them to simply explore website ideas. That way, you can stretch your creativity and also create samples of what you are capable of to attract clients.
5 Website Mockup Examples to Better Understand Their Purpose
As mentioned, there are different levels of website mockups. To give you a better impression of what they can look like, let’s go over some examples.
Shop Page Website Mockup
Here is an example of a low-fidelity mockup (or high-fidelity wireframe). You can see that it already contains important elements like colors and typography; however, a lot of it is still empty, and there are no images. Still, it gives a good impression of the direction this website is headed.
eLearning Website Design Mockup
Next up is this mockup for an eLearning website. While it still has placeholder text, you can already clearly see what the end product will look like. It has a logo, colors, icons, and even drop-shadow already in place. There is plenty of material to provide feedback for.
Clothing Website Design Mockup
This fashion website mockup is pretty detailed. You can see a logo, images, font types, colors, and icons. Note that it even shows the hover behavior for an element as a preview for later interactivity.
Landing Page Mockup for a Tech Startup Website
This example is a mockup of a landing page. It, too, is pretty advanced. Note how it includes both the desktop and mobile versions, which you always need to consider.
Food Delivery Website Mockup
The final example is a mockup for a food delivery service landing page or restaurant website. It is very far advanced and even has some custom icons and images as well as concrete content/dishes. Seems like it could be a screenshot from an existing website, doesn’t it?
How to Create a Website Mockup That Looks Great
Now that we have a better idea about what a website mockup looks like and why you should create one, let’s go over how to do so, including the tools you can use for it.
However, in order to successfully mock up a website design, you first have to have a few things in place. As mentioned, it’s the middle stage of the website planning process, so you should already have a foundation to work with, including:
With these in mind, let’s now go off and create a website mockup.
1. Pick Your Design Tool
While you can also create a mockup physically in real life, it is much easier if you use a digital tool. That will also help you share it with others and collect feedback more conveniently.
Website mockup tools roughly fall into two categories:
- Wireframing and prototyping tools – This is specialized software for exactly the purpose of creating mockups. They can often accommodate the entire process from wireframes all the way to prototypes. Tools like these come with common UI components and libraries to make the creation process faster and also usually have collaboration and feedback tools. Some can even deliver HTML and CSS code. Popular solutions in this category are Adobe XD, Figma, Sketch (Mac only), Mockplus, Justinmind, and Moqups.
- Graphic design tools – While graphic design software works for more than just this one purpose, they also make excellent solutions for creating website mockups. Some of them are so powerful that they are especially suitable for high-fidelity mockups or unusual layouts. Examples include Adobe Illustrator and Photoshop, Canva, and Visme.
For this tutorial, we are going with Figma. They have a free plan where you can work on one file, which is completely sufficient for the purposes of this demonstration.
Plus, you can use their wireframing kit to quickly put together a structure to work on.
2. Set Up Your Wireframe
Speaking of which, as already mentioned, wireframes are the predecessors of mockups. They provide the layout skeleton and, therefore, form the basis for more detailed design work. So, that’s what we want to start off with.
As listed above, ideally, you already have your wireframes, so this step mostly involves setting them up or importing them into your tool of choice. If you are not that far, now is the time to roll up your sleeves and get started. Refer to our detailed wireframe tutorial for more information. Don’t forget to create wireframes for both the desktop and mobile versions of your site!
In Figma, to get started, we first open the aforementioned wireframing kit. It comes with a lot of built-in components like menus, hero images, footers, etc. to quickly put together a design foundation.
After a bit of mucking about, this is the website layout we are left with:
3. Add Visual Elements
After you’ve put the skeleton in place, it is now time to make it look more like a finished website. Using your wireframe as a foundation, start incorporating visual elements such as:
- Color scheme
- Typography
- Content
- Images
- Navigation
- Logo and other branding elements
In our example case, we have adjusted font types, added colors, and included images and some written content.
Looks a lot more like a website already, doesn’t it?
The important thing is to take it one step at a time. You can make changes to singular components and even do several versions and tinker with it until you feel ready to show it to someone else.
4. Share, Collect Feedback, Iterate
Once you have settled on a version that you are satisfied with, now is the time to share it with other people involved in the project. That can be team members, clients, stakeholders, and maybe even users.
In Figma, you have a built-in function to circulate the mockup directly from inside the tool via email.
You can also determine whether invitees can edit or only view the file in question. They also have the possibility to comment on the file, and you can have conversations with them inside the mockup for clarification.
This stage is especially useful if you involve people who don’t have anything to do with the project. They haven’t developed the same blindness as you might have and can come to the whole thing with a fresh perspective.
Don’t be afraid if not everything you hear back is positive. The whole point of creating a website mockup is to gather feedback in order to improve the design.
Remember, this is not the final product. The point is to provide a design reference from which to develop the end result. Therefore, try to get your ego out of the way and focus on listening to what others tell you. They might see something you have overlooked or come up with ideas you hadn’t considered. Remember, all of this helps to end up with a better website in the end.
Once the first round of feedback is done, it’s time to go back to the drawing board. Go through the suggestions you received, find solutions to issues that have cropped up, and improve your website mockup until you feel ready to share it again. Then, rinse and repeat.
5. Next Stop, Prototype
When the mockup is done, the next step is to create an interactive prototype. Here, in addition to the design, you also test usability and user behavior. It’s the last step before finalizing the website.
However, the foundation for that is that you have a proper mockup. As you have hopefully seen, these website design phases all build upon one another. It’s much easier to take the next step when you have successfully finished the previous stage.
Therefore, before moving on to prototyping, be sure that you have spent enough time in the mockup phase to give yourself the best chance to ace the next one as well.
Don’t Skip the Website Mockup Step
Website mockups are a great tool to help you design websites that are both aesthetically pleasing and functional. It’s the stage of the design process where the rough concept gets closer to reality, and you move towards a real vision of what the finished site will look like.
It’s also the stage where you gather invaluable input. Having more than one pair of eyeballs on the progress of the project is always a good idea and can get you some fresh input.
For that reason, the mockup phase is something you should not skip. It helps you get a lot more clarity and, if done right, results in a better final website.
Want more tips? Get new post notifications emailed to you.
ABOUT THE AUTHOR
Go WordPress