Wireframing, Prototyping, Mock-Uping – What’s the Difference?

56
logo
Wireframing, Prototyping, Mock-Uping – What’s the Difference?

You may have come across folks who talk about one thing when they actually mean another totally different thing. I recently sat with friends who used the term wireframe, prototype, and mockup synonymously when talking about the sketch that represents a design idea.
To some this may seem like a small forgivable mistake and that we shouldn’t even waste time trying to resolve it. However, confusing these terms can be likened to confusing between a house blueprint and a display house.

Wireframes, prototypes, and mockups are different, serve different purposes and communicate different things.

 

 

 

 

Wireframe

What Is It?

After determining the architecture of a website, you need a foundation upon which your creative design work will rest. Wireframes are this foundation. They are simple visual layouts that define a site’s hierarchy and demonstrate its main elements.
Wireframes do not give many details about the website. They are devoid of color (usually grey or black and white boxes) and serve as low-fidelity design representations that guide the project. They, however, are the backbone of the entire project and thus contain every important aspect of your project.

When and How Are They Used?

Wireframes document a project. They are in no way testing material. They are merely sketches used by the project team for communication and planning. Wireframes set a path for the project. They’re vastly simplified and almost comparable to a map for the team to follow when working on the project. A wireframe should be created quickly. The most important part of creating a wireframe is brainstorming and communicating with other team members. However, since it’s static and fixed, short notes or some other form of written word should accompany each wireframe to explain what the various components represent.
 

Prototype

What Is It?

A prototype is a simulation used to test the components and interactions of the final products. The primary focus of a prototype is to simulate user interface interactions. It has a lot of resemblance to the final product; thus, it most certainly isn’t as sketchy as a wireframe.
Although most of the mechanisms connecting the backend to the interface may be omitted at this level, the interactions must be well-researched and orchestrated to model an interactive user experience similar to what will be in the final product.

When and How Are They Used?

Prototypes are mostly called to use during the user testing stage of development. In addition to assessing the usability of the interface, prototyping gives various stakeholders a chance to review how well a solution works before committing money and time to its development. As such, the prototype ensures that the user interface design will work and therefore guarantees that all the backend architecture and programming done will not be in vain. The prototype is additionally an excellent tool to gather user feedback about the product before starting development.

Mockup

What Is It?

Mockups are a visual draft of the design and at times can be the actual visual design. Though a mockup is just as static as a wireframe, it has more visual elements and is used to convey the brand. It, on the other hand, lacks the interactivity of a prototype. Mockups show the corporate identity through a particular visual style that includes both color and typography. They thus can be wireframes that were turned into the final look of a product. A mockup is
often vital in showing stakeholders the expected product dimensions. Most stakeholders will understand mockups better than wireframes which tend to be more abstract.

When and How to Use Mockups

Mockups are easier and cheaper to create than prototypes. They are also more visual than wireframes. This makes them ideal when one is seeking early buy-in from stakeholders. They are also excellent feedback gatherers and also form good documentation for a project.

How to Choose Between Wireframes, Prototypes, and Mockups

When choosing what deliverable best suits your project, you must consider what works best for your product as well as what is best for your team. You also should think about your target group and the problem that you want to solve. On top of that, think about whether your project will work best with sketches or formalized documentation. Finally, your choice will be highly influenced by the amount of time and money available.

Популярные статьи в разделе Разработка сайтов
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:22-11-2016 9822
Тренды веб-дизайна 2017: 11 способов быть на шаг впереди
Вот и 2016 год уже подходит к концу. Многие начинают его анализировать и формировать выводы. Дизайнеры же продолжают смотреть вперед в ожидании новых трендов 2017 года. О них и поговорим.
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:22-11-2016 9822
Тип: Разработка сайтов Компания: Promodex
Добавлено:11-03-2016 3518
Что выбрать — шаблон или уникальный дизайн?
В процессе создания продающего сайта неизбежно станет вопрос о внешнем виде, дизайнерском оформлении этого сайта. И здесь есть два варианта — использовать готовый шаблон или заказать уникальный дизайн.
Тип: Разработка сайтов Компания: Promodex
Добавлено:11-03-2016 3518
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:01-06-2016 3192
Как измерить влияние редизайна сайта? [digital note #12]
Первое, что интересует после проведения редизайна, это как изменилось количество продаж. О том, как измерить такое изменение, расскажем в статье.
Тип: Разработка сайтов Компания: MakeBeCool
Добавлено:01-06-2016 3192
Читайте нас в Facebook!

https://www.facebook.com/itrating/

или

Поделитесь данным материалом в соц.сетях: