High Fidelity Mockups

5 min readSep 21, 2022

Create and communicate how the product would look like once developed.

Mockups are static visual screens that resemble the end product. They concentrate on visual aspects such as colours and typography which play a key role in giving a realistic impression of how the product will look and function.

Free & Discounted Udemy Courses — Explore Now

For building mockups, you need to follow the process below. And a necessary prerequisite is building a mood board

Step1: Select a tool

There are a number of tools such as Figma, Sketch, Adobe XD, UXPin etc that can do the job. Select one which you are comfortable with.

Step 2: Define the style guide

You should build a style guide that defines the elements, components and implementation rules that you could play within your designs. You should define the style guide by referring back to the mood board of the product. All the basic specifications and rules such as foundation and components are documented in this phase. Refer to Style Guide for more details.

Step 3: Setup the Appropriate Grid System and layouts

Start the mockups by setting the grids. The grid system chosen should be based on the content density and the ratios of the sections in your product by referring to the wireframes you made. Grids act as the outlines that create the base structure for the design, and layouts help to arrange the elements such as text, design patterns, icons, etc and manage the proportions between UI elements, such as spacing and margins.

Step 4: Build the screens

Refer to the wireframe, its goal and the problems it is solving before starting the visuals. Document the visual problems you need to solve and start doing visual design variations for each problem. Now also look through the standard design patterns while doing the variations or while iterating on the visuals. There are plenty of opportunities to be creative and explore different ways of creating the screens. Finalize the variation based on the pros and cons of it and move forward with adding more details. Name your screens and elements properly using a standard naming convention so that you can easily find them when needed.

Source: Alex Marin — Design a Checkout/Edit Screen in Sketch Link

It is recommended that one should use the symbols/smart elements effectively to ensure a consistent and structured design.

Step 5: Arranging the elements

Now once the components are built, think about the hierarchies and sectioning that is required by using Gestalt principles. Ensure that the visual design principles are applied for each section appropriately. These principles applied appropriately would bring visual appeal and ease of use. Check for alignments and spacings and consistency across the system.

Step 6: UI states

Once you are done with arrangement, you are done with most of your work. Now identify the states that are required for each component and page. Go through the list of UI states and verify whether every required state is planned and mocked up either in style guide or in screens. This helps the design to scale for multiple use cases.

Step 7: Export, Review and Hand-off

Now your mockups are ready in your tool, but most of the visual design tools are not web apps, so if your design tool is not a web app, then export them onto collaborative tools like Invision or Zeplin, where you could present and take feedback from the product leaders on each aspect of design easily and also help the dev team in inspecting the design elements.

Add notes wherever it requires for further understanding of functionality and states so that product leads and developers could refer to them in future without your presence.

Always export the screens in svg format to help the developers inspect the design elements easily.

Example

This example is of a mockup of a food ordering application.

Next steps after mockups

You can also make it a high fidelity interactive prototype by giving interactions that will make your mockups more effective in nature.
Go through the flows and problems and identify the areas that need micro-interactions, as they bring liveliness to the product.

Tips / Best Practices

Pick the right mockup tool that works best for you and your team. We recommend Sketch as it is one of the best tools customized for UI design.
Always define the grids and layouts before starting the components and screens.
Be aware of common design conventions and design patterns that are used in similar contexts.
Establish the style guide that is aligned to the mood board before starting with screens.
Start designing unique screens first so that you can reuse them for sub-screens.
Add realistic content on the screen, avoid putting lorem ipsum as the content is an important element to finalize.
Cross-check the intent with the wireframes and ensure that visuals are meeting all the objectives.
Name your screens and components while creation itself, so that you can avoid rework on naming.
Maintain a states tracker which helps you to ensure all the required states are designed.
Have discussions with stakeholders to finalize on the designs.

Checklist

Build a mood board before starting with visuals.
Build a style guide before starting with the screens.
Check for heuristic violations after finishing a flow.
Apply naming conventions to every element, component, pattern and screen.
Check if the layers are exported well onto the third party tools (Invision, zeplin, etc)
Review with your team and developers.

Quick Question

Which of the following questions are best to test only on mockups

Is the navigation aligned with the user’s mental model?
Is the product accessible to colour-blind users
Do customers resonate with the product idea?
Are users able to identify the important content on the screen

Leave your answer in the comments section below!