There is a huge misconception about the actual meaning behind words such as wireframe, mockup, and prototype. They are considered by most as a method to show a design.
The UI design process
The UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stage. The prototype is interactive while the wireframe and mockup are both static. Between wireframe and mockup, the wireframe is low-fidelity while mockup is high-fidelity.
UI design different stage
Wireframe
The wireframe is the visual representation of the skeletal framework of a website. Wireframes can be a freehand drawing on a piece of paper or sketches on a whiteboard. It is the fastest way to get your idea ready for brainstorming. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe lacks typographic style, color, or graphics since the main focus lies in functionality, behavior, and priority of content.
Wireframe rendered using Balsamiq
Tools:
– Balsamiq
– List of free wireframing applications
Additional Resources:
– Wireframe Showcase
– Dribbble
Mockup
Mockup provides high-fidelity, static, design representation. They are visually more appealing, has colors, fonts, text, images, logos etc., giving it final product look-and-feel. Mockups are useful to get early buy-in from a stakeholder. They are a good feedback-gatherer.
Mockup created based on wireframe
Tools:
– Adobe Photoshop/Illustrator
– Sketch
Additional Resources:
– 250 best Photoshop resources
– Freebiesbug
– Dribbble
– Photoshop Etiquette
Prototype
A prototype is a simulation of the final interaction between the user and the interface. It helps users to understand how the functionalities in an application will work. Prototypes help provide proof of concept, more importantly, expose any usability flaws that are not found during the wireframes and mockups stage.
Interactive Prototype
Additional Resources:
– ZURB Solidify
– Pencil Project
Wireframe, mockup, and prototype have their own characteristics and usage scenarios in a specific stage. How they are used depends on specific requirements.
Drive engagement and enhanced customer experience with Trigent’s UX/UI capabilities.
