Wireframe v. Mockup v. Prototype
If you are having a website (or mobile app) designed for your business, you will hear the terms wireframe, mockup for sure, and for more advanced applications, prototype. It is helpful in defining your design process to understand the basic difference between these tools that will help you to successfully design a website that reflects your brand.
Note: Most of these terms also apply to the design of mobile apps, but I have chosen not to make that a focus of this article.
A wireframe is like the blueprint for your website. It outlines the most essential elements and the content without the website theme, photos or specific content. A good wireframe will help to outline the elements that you wish to include in your website reveals “the big picture” for the website design. Specifically, the wireframe is a basic representation of the layout of the website and the placement of content. Wireframes are relatively easy to create and can be used to get feedback on the structure of your site from team members, customers, etc before investing the time in a full design. The wireframe also creates a focus on website structure without the distraction of graphics, colors and photos.
There are too many wireframe and collaborative tools to mention, but Figma provides a complete solution for all of the tasks outlined here.
A mockup is a visual way of representing a website design. While a wireframe mostly represents website structure, a mockup is a static graphic showing what the website will look like.
A mockup shows a website’s color scheme, visual style, typography, and photos. With a mockup, you can review and revise the visual representation of the product to create the best representation for your brand. A mockup tool that is suitable for most applications is available at Invision.
A prototype is a clickable version of the website and allows those evaluating the new website design to experience content and interactions live. A prototype is very much like the final product itself, except that the front end and backend of the website are not fully tied together.
Tha prototype is interactive and allows those who are testing the website to experience the interface and fine tune the user interface.
Not every website has a wireframe, mockup and prototype. Most websites definitely have a mockup approved prior to building the site, and wireframes are common tools in site development, but prototypes are rarely used in website design projects unless the functionality of the site is central to the performance of the site. The old saying of “measuring twice and cutting once” applies to website design and development. Using the correct tools to fully understand the look, feel and UI (User Interface) of a new website will help to ensure that the final outcome of the site accurately and effectively represents your brand.