What's The Difference Between Wireframing, Prototyping and Mockuping?
In this article, we will explore the difference between wireframing, prototyping and mockups. We'll also discuss how they're used in UX design and digital product design.
What is a Prototype?
A prototype is a preliminary model of something. It is generally used to evaluate a concept or test a potential design. A prototype may be created using various methods, such as 3D printing, CNC machining, or other forms of rapid prototyping.
Mockups are static models that give an idea of what the final product will look like. They are often used to show how the product will function and to get feedback from users. A mockup may be created using various methods, such as hand-drawn sketches, computer-aided design (CAD) files, or photographs.
Wireframes are simplified designs that focus on the layout and structure of a page or screen. They are often used to create the basic structure of a website or app before adding visual elements. Wireframes may be created using various methods, such as pencil and paper, HTML code, or software programs designed specifically for creating wireframes.
What is a Mockup?
A mockup is a high-fidelity representation of a design. Unlike a wireframe, which is low-fidelity and only shows the basic structure of a page, or a prototype, which is interactive but still may not look exactly like the final product, a mockup looks very similar to the final product.
Mockups are often used to give stakeholders an idea of what the final product will look like, and to get feedback on the overall look and feel of the design. They can also be used to test how users interact with a design before it is finalized.
What is a Wireframe?
A wireframe is a low-fidelity representation of a design. It is typically used to communicate the overall structure of a page or screen, and is often created using simple shapes and lines. Wireframes are useful for helping to establish the hierarchy of information, and can be used to brainstorm ideas prior to creating a high-fidelity prototype.
Prototypes are typically high-fidelity representations of a design, and are used to test usability and user flow. Prototypes can be created using various software applications, such as Adobe Photoshop or Sketch. Mockups are similar to prototypes, but are usually less interactive and more focused on visual design elements such as colors and typography.
What’s the difference? Which One Should I Use, and When?
Wireframing is the process of creating a low-fidelity sketch of a design. This is typically done early on in the design process, before moving onto more complex visual designs. A wireframe can be as simple as a pencil and paper drawing, or it can be created using software like Balsamiq or Omnigraffle.
Prototyping is the process of creating a working model of a design. This is typically done after the wireframing stage, and can be used to test out interactions and user flows. Prototypes can be created using software like InVision or Marvel.
Mockups are high-fidelity representations of a design. They are typically used to show what the final product will look like, and can be created using software like Photoshop or Sketch.
Conclusion
The main difference between wireframing, prototyping and mockuping is the level of detail. Wireframes are low-fidelity, meaning they contain few details. Prototypes are high-fidelity, meaning they contain many details. Mockups are somewhere in the middle. All three have their own purpose and can be used at different stages in the design process.
