If you’re building a website that has more than a few pages, mockups can help your page look more coherent and closer to your vision. In design parlance, the mockup stage is the phase after rough wireframing, but before prototyping.
At this stage, mockups should show more than the low-fidelity skeletal blueprints, without the functionality. The idea is to give an accurate static version of the finished website.
Why mockups are a good idea
So why should you create mockups given the extra work needed? They are a great way to explore different design decisions before actually committing to code. The team can see if the design flows consistently across all the pages without having to worry about tracking minute development changes. The visuals can thus be laid out, rearranged and experimented with to perfection before any code is written.
Frame them as user stories
On their own, mockups inherently exist in a vacuum, but that’s not how your users experience your website. When presenting or sharing mockups with your time, presenting them in the context of user stories can really help. User stories frame experience through the eyes of your customer, making it easy to empathize.
Mockups put everyone on the same page
When everyone agrees on the problem, the process automatically gets streamlined. Presenting your mockups through user stories helps you achieve just that. And with that, you are ready to prototype or go into your build phase!
Depending on preference, there are several tools that web designers use, each with their unique strengths.
- Illustrator: Adobe’s Illustrator is something many designers are already familiar with and have access to. However, someone new might find Illustrator unwieldy – it isn’t purpose built for mockups or wireframes.
- Sketch: Sketch’s reputation as being easy to use and a large library of plugins make it a popular choice in the design community. It is Mac only so Windows and Linux users have to look elsewhere
- Invision: Invision is a heavy-duty prototyping tool that helps teams to collaborate. You can comment directly on design elements, which helpfully cuts down confusion.
- UXPin: UXPin is a tool that focuses on UX. Thousands of built-in elements save you from busywork as well.
- Moqups: Moqups is a cleanly designed tool that is increasingly popular with designers. Its web interface is fast and snappy.