This article is part of User Interface (UI) and User Experience (UX) dictionary.
Page’s interface can be designed with various level of detail and purpose. Below you can find several common terms used in UI/UX design: low-, medium-, high-fidelity wireframe, prototype and mockup.
Wireframe is a sketch of a page which indicates its structure and placement of various elements, like logo, menu, footer, headers, images, text, buttons, etc. The benefits of wireframes are:
- quick to create
- good to grasp the structure of page
- allow to focus on layout instead of colors, fonts and pixel-level margins
Considering the detail level, we can distinguish at least three types of wireframes: low-, medium- and high-fidelity; the most common are low-fidelity and high-fidelity.
Low-fidelity wireframe is the simplest sketch of a page, where images are usually marked with an “X” or gray boxes and text paragraphs are marked with rectangles or wiggles. In this level even the text does not matter – what is important is only the structure of the page. Low-fidelity wireframing provides very rapid design, possible even with a pen and paper. Because creating such designs takes little time, it definitely encourages creativity and is great for working out a first rough idea.
Medium-fidelity kind of wireframe may include texts, headings, maybe menu items listed; icons are visible, sometimes colors can be used. This level still allows designing quickly and providing some details in the page.
The highest level of wireframe quality is high-fidelity. I’m not convinced the terms high-fidelity and wireframe should be put together. High-fidelity design should look pretty much like the final page or application – with correct typography, color scheme, and alignment at pixel precision. It should be used when given design needs to be verified with users or passed to developers, but before making a working product yet.
Prototype of a page or application allows verifying interactions between elements or pages. This can be achieved using several pages of paper showing consecutive steps, e.g. in a wizard or menu (paper prototyping).
Another option is using a computer program (mockup application) which allows creating those steps and also indicate the interactions between them such that it will be possible to use the prototype close to the final application.
Yet another option is developing a prototype application which would be a simple application made just to show the interface and interactions with dummy data (coded mockup). It should contain no APIs, no database, no security, no well-though architecture – it should be done the fastest way to achieve the goal. Sometimes those prototype applications or pages can be used to build the final product, but sometimes the quality is unacceptable for production.
Mockups are like models of devices with our application, where the application is embedded in the environment. For example, it may be the web site in a web browser, or the mobile application in a mobile phone image. That is the best way to evaluate the design thanks to the holistic view, including the environment the application will be working in.
Sample software: UXPin.
It is not necessary for a single design to go through all the stages. The selection of designs can be limited to just one type, e.g. medium-fidelity wireframe, or can go from low- up to high-fidelity and mockup, if time and budget allows. Prototyping should be used to verify concepts before development, as it will be much cheaper to test and modify a design on users than a working application. And mockups look good in a folder for investors.