Цифровые продукты не появляются ниоткуда: они хорошо продуманы, спланированы, визуализированы и только потом собраны в рабочий вариант. В этом процессе возникают концепции каркаса дизайна, макета и прототипа. Они имеют схожее значение, поэтому, чтобы не путать их, давайте определимся, что к чему.
В чем разница между вайрфреймом, макетом и прототипом?
В UX-дизайне есть несколько макетов : каркас, макет и прототип. Они показывают, как будет выглядеть будущий продукт с трех точек зрения — структуры, визуальной концепции и функциональности. Они развиваются последовательно.
Если вы создаете очень простой продукт с единственно возможным пользовательским сценарием, например, посадочную страницу, нет необходимости создавать прототип. Вы можете ограничиться только дизайном макета или каркасом + макетом. Но в других случаях более сложный дизайн проходит все три этапа создания.
Что такое Wireframe и как его создать?
Итак, начнем с каркаса. Каркас — это просто формат для отображения информации. Вы можете создать каркас пути пользователя, одной или всех существующих страниц и т. д. При этом степень детализации может отличаться:
- высокодетализированный каркас
Это более подробный план с подписями, поясняющими, что означает каждый элемент. Этот каркас уже можно показать клиенту, и дополнительная презентация не требуется. Для высокодетализированных вайрфреймов подойдет любой графический или векторный редактор (Sketch, Figma и т.д.).
- каркас с низкой детализацией
Это можно сделать даже на первом мозговом штурме с командой, быстро сделав набросок. Но в этом случае без дополнительного представления никто не сможет разобраться, что к чему, кроме