What is the difference between Lo-Fi and High-Fi mockups?
Mockups are a graphical representation of how an application will look. The "-fi" ending is short for fidelity. Building Lo-Fi mockups is the first step of the UX design stage — the first arrangement of elements and functionality can be done on a blank piece of paper or with tools such as Axure, Balsamiq, or Adobe XD.
With these first sketches we can discuss the basic business requirements that should be agreed with everyone involved in the project. Thanks to Lo-Fi mockups we can quickly check whether users understand how the product works, whether it is intuitive for them, and whether it meets their needs. At this stage it's also worth consulting the developers who will later implement it: this saves time and money — for example by dropping a particular store element that would be time-consuming or impossible to deliver in a given technology. With ready Lo-Fi mockups it's much easier to estimate the implementation cost.
High-Fi mockups already reflect a more detailed look of the site or app — colors, graphics, content, and interactions are added (e.g. how individual screens should slide in an app). Through high-detail mockups we can see whether the overall vision matches the needs and assumptions of the entire e-commerce team — even before the final product or service is built.
Most often Hi-Fi mockups are not yet the final GUI (or UI) of the service — i.e. the target visual layer. Although they are often very close to it, the final polish, including the designer's vision, is added only at the GUI design stage.
With these first sketches we can discuss the basic business requirements that should be agreed with everyone involved in the project. Thanks to Lo-Fi mockups we can quickly check whether users understand how the product works, whether it is intuitive for them, and whether it meets their needs. At this stage it's also worth consulting the developers who will later implement it: this saves time and money — for example by dropping a particular store element that would be time-consuming or impossible to deliver in a given technology. With ready Lo-Fi mockups it's much easier to estimate the implementation cost.
High-Fi mockups already reflect a more detailed look of the site or app — colors, graphics, content, and interactions are added (e.g. how individual screens should slide in an app). Through high-detail mockups we can see whether the overall vision matches the needs and assumptions of the entire e-commerce team — even before the final product or service is built.
Most often Hi-Fi mockups are not yet the final GUI (or UI) of the service — i.e. the target visual layer. Although they are often very close to it, the final polish, including the designer's vision, is added only at the GUI design stage.