Блог

Каркас против макета против прототипа: что есть что?

Цифровые продукты не появляются ниоткуда: они хорошо продуманы, спланированы, визуализированы и только потом собраны в рабочий вариант. В этом процессе возникают концепции каркаса дизайна, макета и прототипа. Они имеют схожее значение, поэтому, чтобы не путать их, давайте определимся, что к чему.

Каркас против макета против прототипа: что есть что? 5
Проверьте Дрибббл

В чем разница между вайрфреймом, макетом и прототипом?

В UX-дизайне есть несколько макетов : каркас, макет и прототип. Они показывают, как будет выглядеть будущий продукт с трех точек зрения — структуры, визуальной концепции и функциональности. Они развиваются последовательно.

Если вы создаете очень простой продукт с единственно возможным пользовательским сценарием, например, посадочную страницу, нет необходимости создавать прототип. Вы можете ограничиться только дизайном макета или каркасом + макетом. Но в других случаях более сложный дизайн проходит все три этапа создания.

Что такое Wireframe и как его создать?

Итак, начнем с каркаса. Каркас — это просто формат для отображения информации. Вы можете создать каркас пути пользователя, одной или всех существующих страниц и т. д. При этом степень детализации может отличаться:

  • высокодетализированный каркас

Это более подробный план с подписями, поясняющими, что означает каждый элемент. Этот каркас уже можно показать клиенту, и дополнительная презентация не требуется. Для высокодетализированных вайрфреймов подойдет любой графический или векторный редактор (Sketch, Figma и т.д.).

  • каркас с низкой детализацией

Это можно сделать даже на первом мозговом штурме с командой, быстро сделав набросок. Но в этом случае без дополнительного представления никто не сможет разобраться, что к чему, кроме