Design Tools: Part 3 - Hi-fi Mockups

The final instalment in our Design Tools series focuses on the last design phase before handing over to the developers - Hi-fi mockups. We’ll explain the importance of this stage as well as our favourite tools for creating these pixel perfect visuals.

What are hi-fi mockups?

Hi-fi mockups, also known as High-fidelity mockups, are in-depth visuals of fully designed pages and screen layouts based on a previously approved set of wireframes and prototypes. Hi-fi mockups are intended to look almost identical to the final product with regards to the visual design aspect, allowing the client to fully realise their expectations before the developers take over and get to work!

When a designer works on hi-fidelity mockups, he/she will use the previously created style guide, in keeping with brand guidelines such as colours, typography and imagery. We will almost always generate each page or screen for the following three devices: mobile, desktop and tablet depending on project complexity.

bitdigital-blog-post-hi-fi-mockups-image1.png

Why create hi-fi mockups?

If required, hi-fi mockups can be turned into working prototypes very easily, for further client, user and development testing. Having done a lot of the work in the previous stage, there usually is time to focus on more delicate details such as sizes of buttons and colours of rollover states allowing much more detail to be presented to the client.

bitdigital-blog-post-hi-fi-mockups-image2.png


Another good reason to create hi-fi mockups is to allow stakeholders and developers to visualise the end product fully. Having a pixel-perfect prototype of the final product allows for secure communication between client and developers, making for a smooth project!

Which tools do we use to create hi-fi mockups?

There is a vast selection of tools a designer can use to create hi-fidelity mockups, which is excellent as some designers prefer different tools for different reasons. Within the UK, the three most popular programmes are Illustrator, Sketch and Photoshop - and we use them all! The beauty of using all three of these softwares together is that you can go as far and crazy as the time allowance and budget will allow you to - the creativity available is never-ending.

Choosing where you want to begin will be based on whether you want to create pixel or vector based mockups. Photoshop is pixel based, while Illustrator is vector based. If you’re looking for a mixture of both - Sketch is the software for you. The combination of the two Adobe softwares, mean it’s possible to switch to pixel view to check for resolution for example after creating the design in vector view. Once you’re happy with the overall designs, these can quickly be transformed into Prototypes using the Craft plugin. Craft allows you to upload your designs straight from the canvas, saving you a lot of time. Don’t forget to back these up, however - just in case!

Conclusion

Hi-fi mockups are an essential step in a UX/UI design process, before passing over to the development team for coding. By the time you get to the creation of hi-fi mockups, the team will have established a design strategy, content strategy, created wireframes and also, prototypes. This final stage is often referred to the favourite phase by designers as their creative juices can really get flowing, and visuals of the final product are realised!

MyAgileTeam