The terms wireframe , prototype and mockup are often used interchangeably, yet they are not the same. This blog post explains what sets them apart and how they are used.
They look different and are intended for different purposes. Sometimes a project will only need a wireframe , while at other times it will call for a prototype.
Start With a Wireframe
According to Usability. gov “a wireframe is a visual illustration of a web page… to show you where each item should be placed on a page.” It is a basic visual layout of gray boxes representing the main elements and identifies the site’s hierarchy.
Wireframing in a team usually develops quickly since iterations can readily integrate new ideas, input and usability needs. Wireframes do not show much detail, but create a simple design that guides the project and its team members.
Once a wireframe starts becoming interactive, it becomes a prototype.
How is a Prototype Different?
A prototype is an interactive representation of the final product and by definition more detailed than a wireframe (e.g. graphics and text). Clickable prototypes enable users to experience and test their journey through the user interface (UI).
A prototype should be similar to the final product. Well-researched and orchestrated interactions need to closely model the user experience (UX). The interdependence between the front end interface and the back end programming tends to get ignored at this stage to keep costs down and accelerate agile development iterations.
Prototyping allows stakeholders to review a solution and put it to the test with users before spending time or money on coding. Wireframes can naturally evolve into more advanced, complex prototypes as the solution ripens in consecutive team sessions, agile user tests, and iterations.
A mockup is different from both the wireframe and the prototype. It is static like the wireframe , but more visual, conveying the brand without the interactivity of a prototype.
Do We Need a Mockup?
A mockup is a static design representation in which the corporate identity is applied through color, typography and visual style. Mockups can be drafts that turn into the final look of the solution. They show stakeholders a dimension of the product that can be important for customer acceptance packaging being a contributing factor of a product’s market success.
Wireframe
Key Aspects: Basic representation of design elements.
What to use for: Communication, documentation.
Prototype
Key Aspects: Interactivity.
What to use for: Interactive user testing, UI design.
Mockup
Key Aspects: Static visualization, branding.
What to use for: Stakeholder design buy-in.
The industry has not helped to keep the terms wireframe , mockup and prototype clearly defined, and readily available content uses the terms interchangeably. These three visualization tools have clearly been shown to be distinct, giving life to particular aspects of web and software development.
If you’re not sure how each fits into your process, just leave a comment so I can help. Tools like SnapUp, Omnigraffle, Sketch.app, or even Adobe Fireworks can help in creating wireframes, mockups or prototypes.
WEB DESIGN
We are a professional web design company with an experienced team of creative professionals. We create outstanding designs for Websites. Our team is adept at implementing the latest web standards and programming techniques. Pixotri technology is a creative house developing quality web designs, E-Commerce solution. SEO services and Gaming development .
Contact us for your web design requirements email- info@pixotritechnologies.com Visit our website: www.pixotritechnologies.com
No comments:
Post a Comment