Skip to main content
UI Design: Wireframe, Mockup and Prototype

UI Design: Wireframe, Mockup and Prototype

There is a huge misconception about the actual meaning behinds words such as wireframe, mockup and prototype. They are considered by most as a method to show a design.

UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stages. Prototype is interactive while wireframe and mockup are both static. Between wireframe and mockup, wireframe is low-fidelity while mockup is high-fidelity.

UI Design Process

UI design different stage

Wireframe

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

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

Mockup created based on wireframe

Tools:
– Adobe Photoshop/Illustrator
Sketch

Additional Resources:
250 best Photoshop resources
Freebiesbug
Dribbble
Photoshop Etiquette

Prototype

Prototype is a simulation of the final interaction between the user and the interface. It helps users to understand how the the functionalities in an application will work. Prototypes help provide proof of concept, more importantly expose any usability flaws that are not found during wireframes and mockups stage.

Interactive Prototype

Interactive Prototype

Tools:
UXPin
InVision

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.

Vinod Narayanan

Vinod Narayanan

Vinod Narayanan works with Trigent Software as Technical Lead (UI Development). Vinod has over ten years of experience in analysis, design and development, testing and implementation of web based applications. His areas of expertise include Responsive UI and SharePoint Branding.

One thought on “UI Design: Wireframe, Mockup and Prototype

  1. Thanks , I’ve just been searching for information about this topic for a long time and yours is the best I have came upon till now. However, what concerning the bottom line? Are you certain concerning the source?|

Leave a Reply

Your email address will not be published. Required fields are marked *

+ twelve = fourteen