Contact

High-fidelity mockups

Design deliverable

The last step of the interface-design process

High-fidelity mockups represent the definitive version of an interface, as it should be at launch. During this phase, also called UI design or high-fidelity mockup design, the user experience is enriched by applying the brand or product's visual identity to the wireframes produced in UX design. This is the step where you settle how the style guide designed during the art-direction phase is used, where you make sure the accessibility rules are respected and where you check technical feasibility, without forgetting all the graphic animations that guide the user dynamically. This step sits at the final stage of the process and can only start once the site map, the features and the wireframes are validated. High-fidelity mockups are the result of the work done during the UI sprint, the last design step before handover to the developers for integration.

See our art direction offer

What are high-fidelity mockups for?

  • Raising the level of detail and fidelity of the screens
  • Adding the visual layer to the wireframes by applying your style guide or the art direction built for the occasion
  • Picturing the final result of the interfaces more easily
  • Spotting inconsistencies and fixing them before development

Why produce high-fidelity mockups?

  • Presenting a finished prototype of the product or solution to potential investors
  • Running user testing on a finished version before integration
  • Enriching the features of your products or services
  • Running a UI redesign (brand positioning, looking more modern, improving the experience, and so on)
  • Building new pages from your design system, or creating your design system
  • Making sure your project is eligible for the RGAA accessibility standards

How to build high-fidelity mockups

01

Before designing the mockups

Before moving on to design, it's important that all the UX work is validated by the stakeholders. It's also worth preparing the high-fidelity mockups by first producing a benchmark, a moodboard and some art-direction work. All of that lets you design your mockups efficiently. As for the software to use, don't hesitate to talk with the developers about the deliverable format they expect. Several options are open: Sketch, Figma, Adobe XD. Each tool has its pros and cons. It's up to you to figure out which ones fit the project's needs. For collaborative, real-time design, Figma is still the right tool, for example.

02

The structure

Once your art direction is approved, you can start the UI design itself. To avoid mistakes, take the time to create your page templates. Start with the main page, the highest-priority screen, and focus on the details. Is the chosen grid the right fit? Are your spacings and whitespace consistent everywhere? Does the design adapt properly to mobile? Have you respected the structure and the elements set by the UX designer? If many screens need to be designed, setting up a design system is preferable. Start with the smallest components and check their structure thoroughly before deriving variations. For instance, it's better to start with the CTAs, the navigation elements, the cards, and so on.

03

Your visual elements

When you're designing and shaping your pages, think about the visual elements too. Make sure not to overload your screens with too many colours, too many icons or decorative elements (which don't carry any information). When you finish a page, take the time to look at it and step back. Are the main pieces of information properly highlighted? Does this illustration serve a clear purpose for the user (information, catching attention, and so on)? Also remember to check your colour palette closely. Are all the colours on the page within the style guide? Is the colour used sparingly?

Frequently asked questions

Example of high-fidelity mockups 1 of 20

A few of our case studies

Related methods

Wireframe

A mockup with no graphic elements, describing the zones and essential components an interface should contain.

Read more about Wireframe

Co-design

Drawing on collective intelligence, these workshops align stakeholders and surface solutions with the team and/or the end users.

Read more about Co-design

Prototype

More or less advanced animation of the screens to present a dynamic journey to users and gather feedback.

Read more about Prototype

Figma

Figma is the leading collaborative design tool. Design, prototyping, design system and handoff in a SaaS that connects designers, developers and product managers.

Read more about Figma

Design system

A design system is a component library and the governance that comes with it. What sets it apart from a design kit, and when it becomes necessary.

Read more about Design system

Design Kit

The design kit, or UI kit, brings together a product's components in a design file: buttons, forms, cards, navigation, icons.

Read more about Design Kit

Visual style guide

The visual style guide brings together a brand's visual rules: colours, typefaces and logo, along with the permitted or prohibited uses for each.

Read more about Visual style guide

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk