You can't build a great building on a weak foundation. You must have a solid foundation if you're going to have a strong superstructure. Gordon B. HinckleyEffective design always requires a stable foundation. Well-thought information architecture, as well as prudent interaction and navigation systems, are the base which forms positive user experience. It is recommended to plan the details from the very beginning of the creative process. There are certain techniques which allow creating visual representations of layouts and sharing the ideas with everyone involved in a project. Two of these techniques called wireframing and prototyping have become a significant part of design process. However, designers sometimes confuse a wireframe and prototype or talk about them as the synonyms. Today’s D4U post discovers the differences between wireframing and prototyping and shows which objectives they help to accomplish.
What’s a wireframe?A wireframe is a simple visual scheme which represents a layout of a screen or page of a digital product such as a website or application. They are often compared to architectural blueprints since a wireframe is usually a monochromatic illustration which shows the structure of a screen. Also, designers can use bright marks or spots to outline specific areas or design elements.There are three types of wireframes: low-fidelity, medium-fidelity, and high-fidelity. Low-fidelity wireframes are black and white illustrations which aim at showing a “big picture” of a layout and often created manually with pencils or markers. UI elements are represented as boxes and lines followed by short captions.This type of wireframes may seem a bit abstract still it shows the basic structure of a user interface. Medium-fidelity wireframes are similar to the previous type since they are also created in a monochrome palette. They are oriented to demonstrate more detailed and realistic layouts the reason why medium-fidelity wireframes can be created both manually or via digital tools. Another difference is that this type allows for distinguishing copy elements so that typographic hierarchy could be set. In addition, designers provide more detailed comments on each element. Example of UX wireframe for HealthCare App High-fidelity wireframes (mockups) are created via digital tools. They are built in color and present the screens in the view close to the final visual performance which makes it differ from the previous. Designers pay deep attention to typography and UI elements presentation. This type can be called UI wireframes or mockups. UI Mockups for PassFold
What’s a prototype?A prototype is a sample model of a digital product. It is created for testing the efficiency of the solutions and decisions made about design for websites and applications. Designers think out interaction and navigation systems and try to make them as much similar to the final result as it is possible. Such an approach gives an opportunity to reduce possible problems before the development team starts their work. Making changes is much more time-consuming and expensive at the stage of development that’s why it’s vital to check the usability and navigation in advance. Prototypes should not be seen as the analog of the final product. They are effective tools helping to improve UX design at the very first stages of the creative process. However, prototyping all the details on the final stage of UI in most cases is not so reasonable. It can be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Prototyping seems much more efficient and useful as the step between UX design and UI design. Prototyping with InVision App
Wireframing vs PrototypingHigh-fidelity wireframes and prototypes have been mistaken for a long time since they are quite similar in visual presentation. Nevertheless, they are different techniques which are applied at the different stages of a creative process. To find out the differences let’s see which objectives they aim at. Wireframing objectives:
- Creating a fast visual representation of a layout.
- Visualizing an idea and share it with clients.
- Building effective information architecture of a product.
- Setting visual and typographic hierarchy.
- Making a pre-plan of a user journey.
- Thinking through UI elements placement.
- Giving a detailed view of the UI elements of a future product.
- Thinking through navigation and interaction systems.
- Testing design solutions.
- Reducing the possibility of UX problems and difficulty in navigation.
- Experimenting with the style and alignment of UI elements.
- Showing clients a clickable version of an interface.