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

Комментариев нет
Время для чтения: 3 минут

Данный пост относится к «Объяснительно-образовательной» рубрике, где я буду раскрывать не совсем понятные моменты — связанные с процессом и результатом повышения конверсии, которые находятся в нижней части «айсберга», обсуждать ключевые заблуждения, предостерегать от ошибок.

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

Из-за этого на практике происходят недопонимания, не оправдываются надежды, теряется время. Пришло время раз и навсегда разложить эту тему по полкам. И в нужном случае — просто кидать ссылку на этот пост, не тратя время на словесные, абстрактные объяснения.

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

«Ключевая разница между скетчем, варфреймом, мокапом и прототипом — в уровне детализации конечного продукта (страницы/сайта)».


 

1. Скетч (или эскиз)

Скетч — это набросок решения на листе бумаги. Он дает общее представление о странице с низкой точностью. С помощью него можно быстро подготовить идею к мозговому штурму. Даже простой эскиз может описать вашу идею лучше, чем слова.

В основном скетч — это кухня узких специалистов — дизайнеров, UX-проектировщиков, которые подходят к процессу правильно, пошагово, педантично. Эскиз — самый первый этап проектирования.

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

У нас же малый, средний бизнес — привык/вынужден быстро без заморочек создавать, запускать сайты (часто шаблонные, поверхностные), а потом уже разбираться что не так в них и тратить гораздо больше ресурсов на их переработку в процессе.

Из-за такого подхода наших заказчиков, наши дизайнеры часто вынуждены не сильно заморачиваться в проектировании, использовать быстрые, шаблонные решения, сдавать работу, а там дальше «трава не расти», как будет так и будет. Главное что бы красиво всё было и нравилось заказчику 🙂 .


 

2. Варфрейм (каркас)

Варфрейм — это следующий этап после скетча и цифровой вариант эскиза.

Варфрейм — низкокачественная версия дизайна. Здесь не нужно никаких уникальных изображений, шрифтов, логотипов или даже текста. Только самые основные UX-символы, такие как «перекрестная рамка» для изображения, ящик с надписью «логотип идет здесь» и «lorem ipsum» для текста — достаточно (прим.ред: но можно и готовый текст включить).

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

С помощью варфрейма — мы устанавливаем «дорожную карту» для всего проекта и подрядчиков, которые будут дальше работать с ним (дизайнеры, верстальщики, разработчики).


 

3. Мокап

Мокап представляет собой графический интерфейс страницы. Уже со структурой информации (текстовый прототип), с визуализацией контента (изображения, лого), шрифтов, демонстрацией основных функциональных возможностей статическим способом.

Мокап обеспечивает детализацию средней точности, которая дает четкое представление о том, как будет визуально выглядеть интерфейс.

На этом этапе нет переходов, анимаций, взаимодействий или реагирования.

Мокап является неплохим инструментом для сбора ранней обратной связи от аудитории. Бывают ситуации когда есть несколько вариантов одной страницы и вы не можете определиться какую из них внедрять. Тогда можно собрать фокус-группы поставить им задания и в конце посчитать голоса «ЗА».


 

4. Прототип

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

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

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

В основном, прототипы — это история, относящаяся к большим проектам, тонким и детализированным сервисам.

HarryChy

Conversion Rate Optimization - специалист и автор данного блога

Экспресс CRO-аудит

Получите экспресс-аудит за 2 часа. Узнайте 2 узких места на одной выбранной странице.

Комментариев нет
 

Оставь комментарий