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.
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?
Graphic mockups (or high-fidelity mockups) represent the final version of an interface as it will appear at launch: real colours, finalised typography, images, icons and components in their final state. They follow wireframes (structure) and prototypes (interactions) in the design process. They serve to validate the visual identity and to prepare the specifications for development.
The wireframe represents the structure in greyscale, without visual detail, to validate the organisation and the navigation logic. The prototype adds interactivity to test flows and interactions. The graphic mockup finalises the visual appearance without necessarily being interactive. In practice, with Figma, the three can coexist in the same file: you move from wireframe to graphic mockup by accumulating detail, and you add interactivity to create the prototype.
No. In agile projects or with a mature design system, you can move directly from wireframes to coded components, without going through high-fidelity mockups. The mockup is particularly useful when the visual identity must be validated by non-technical stakeholders, when the product is new and the design system is still being built, or when external providers must implement from the design specifications.
You organise the Figma file in named layers, you use components from the library rather than manually drawn elements, and you make sure that styles (colours, text) are linked to variables rather than defined locally. You document the behaviours not visible in the static mockup (hover, error, loading states) in additional screens or notes. Figma Dev Mode then automatically generates the CSS specifications for developers.
By checking colour contrasts with Figma plugins (Contrast, A11y), by making sure text sizes and clickable areas respect the WCAG minimums, and by documenting text alternatives for functional images and icons. An accessibility audit on a mockup takes far less time than a correction after development: it is better to build these checks into the design process than to leave them to development.
A wireframe is a mockup describing the zones and essential components an interface should contain.
Read more about WireframesThe UI sprint turns wireframes into high-fidelity mockups in short, iterative cycles, usually over a week.
Read more about UI sprintA co-design workshop draws on collective intelligence. These sessions help surface solutions with the project team and/or the end users.
Read more about Co-design workshopEveryone 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.
