Что такое прототип сайта: задачи прототипирования, разработка структуры сайта, программы для создания макетов

Проектирование, прототип, wireframe, макет, мокап — эти понятия часто употребляются как синонимы. Но они, хоть и схожи между собой, отличаются:

Проектирование сайта равносильно составлению очень подробного технического задания и включает в себя:

1. Постановку целей и задач;
2. Исследование контекста;
3. Создание концепции;
4. Моделирование;
5. Согласование.

Мокап или, как его иногда называют, макет — отражает набросок предварительного дизайна. Чтобы не путать с дизайн-макетом рекомендуем использовать термин мокап. В иностранном лексиконе часто относится к этапам Low Fidelity Design (дословно — дизайн низкого разрешения).

Вайрфрейм — тот же мокап в черно-белом виде с упором на состав секции. То есть это детализированный мокап из High Fidelity Design (дословно — дизайн высокого разрешения).

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

● Визуализировать и проверить гипотезы;
● Построить полноценную логику и структуру сайта;
● Оценить точные сроки и бюджет работ;
● Быстро вносить корректировки и правки;
● Минимизировать затраты и количество правок.

Прототипирование сайта — этап, который невозможно пропустить. Это каркас сайта, как чертеж дома. Многие заказчики предпочитают пропустить этот этап и сразу запрашивают дизайн-макеты с графикой, но как можно начать строить дом не утвердив окончательный эскиз и план работ?

Такой вид прототипа выполняется для оценки объёма работ и расчёта стоимости. Он фиксируется и утверждается в предложении по сотрудничеству. Данный прототип делается с минимальной проработкой и заточен исключительно на демонстрацию предлагаемой структуры сайта.

● Проведение интервью — подробный брифинг;
● Агрегация требований — аналитика, исследования, цели и задачи проекта;
● Составление функционального прототипа;
● Подготовка скетчей / мокапа;
● Составление варфрейма;
● Разработка прототипа с финальным текстом;
● Передача прототипа в отдел дизайна с техническим заданием UI-дизайнеру.

Разберемся детальнее, как проходит работа над прототипом.

● Повышение престижа бренда, узнаваемости;
● Рассказ о событии, истории;
● Подготовка к участию в конкурсе, тендере;
● Демонстрация продукта в действии, рассказ о технологии;
● Ведение отчетности, справка, информирование и привлечение инвесторов;
● Научная / просветительская цель;
● Агрегация, арбитраж трафика;
● Продвижение бренда в интернете (контекст / SEO);
● Поиск точек роста, развития бренда, тестирование гипотез;
● Редизайн проекта для одной из целей из этого списка;
● Расширение функционала сайта для повышения удобства, конверсии;

Можно привести ещё десяток целей, главное в этом всём понимать — для чего вообще создаём сайт компании. Всё дальнейшее будет зависеть от этой задачи. Зайдя на информационный сайт NASA или Брэнсона (компании Virgin Galactic) вы не найдёте конверсии, там не торгуют спутниками, у этих проектов другая цель =)

После чёткой постановки целей и задач проекта, переходите к следующему шагу.

● Предполагаем, что разработка ЛК с сохранением данных пользователей и историей заказов повысит лояльность аудитории и % повторной конверсии; Однако это увеличит стоимость разработки и сильно замедлит производство проекта. Для быстрого старта можем это решение сдвинуть на вторую волну работ по проекту;

● Для повышения престижа и доверия к строительной компании можем на сайт разместить крупные рендеры объектов в высоком качестве или даже 3D-тур; Необходимо запросить информацию у заказчика или предложить услуги;

● Видеоролик с описанием и демонстрацией мега-пупер-вау технологии в данном продукте позволит пользователю реально оценить «качественное качество» продукта. Давайте, вместо того чтобы, как все 100 500 конкурентов, написать в карточку товара бронированного стекла на айфон мега характеристику «Extra Powerful Hardcore Hard-Wearing Glass with Soft-Touch Technology» снимем ролик как по айфону с этим стеклом едет танк. Телефон размочило, а стекло осталось живо. Это однозначно увеличит конверсию в покупку и наглядно покажет всю навороченность продукта;

● Так как мы известны на рынке и не первый год продаём страховки ОСАГО, нам нет смысла рассказывать о самом продукте и распинаться по этому поводу. Давайте к чертям снесём лишний километр груза на глаза нашего пользователя и отразим бонусы, которые он получит, заказав страховку у нас, ведь всё, что нам нужно — более выгодные условия;

● На разрабатываемом сайте мемориальной компании больше 30 услуг, видов камня, типов памятников и прочего. Стандартная навигация нужна, но мы можем упростить жизнь пользователю, сократить время поиска нужной страницы и время принятия решения. Давайте продумаем раскрывающееся меню на весь экран с рендером благоустроенного памятника, а при наведении на каждую деталь будет осуществляться переход в нужный раздел. Так мы упростим навигацию, зацепив 90% ключевых товаров и услуг, а значит в разы обойдём конкурентов и поднимем конверсию;

● Разработка функционала для определения размера обуви, а также таблицы соотношения размеров разных стран поможет пользователю определиться с выбором и повысит вероятность покупки;

● Вставка квиза на каждый лендинг услуги в 3−4 вопроса даст повышенный поток целевых заявок на услугу и сократит этап квалификации отделом продаж, наш заказчик ещё и на менеджерах сэкономит;

● Вставка лид-магнита в стиле «Чек-лист по анализу SEO» в каждый из квизов приведёт больше лидов, однако есть минус — некоторые из них окажутся халявщиками. С другой стороны, среди не халявщиков окажутся изучившие материал и ещё более доверительно к нам настроенные заказчики. Надо протестировать решение в течение 2−3 месяцев с контекстной рекламы для однозначного «да».

Нередко гипотезы накладываются друг на друга — как в последних двух примерах. Это как раз тот положительный поток мысли, который приводит проект к достижению цели, независимо от того конверсия это, престиж или чисто информационная цель. Поэтому и на курсе PRO Web мы везде твердим — сначала правильный вопрос, потом гипотеза, потом что-то рисуем. А не «брутализм это модно, давайте сделаем модный сайт, я тут как раз недавно мега интенсив посмотрел, так классно».

● Анализ конкурентов на маркетинг, дизайн, удобство, логику, контент;
● Анализ с сегментацией целевой аудитории;
● Определение персон;
● Боли, желания, цели и страхи покупателей;
● Бизнес-модель заказчика.

После проведения аналитики у вас должно сложиться полное понимание:

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

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

2. Переносим скетч в цифровое представление и прорисовываем детали прототипа:

3. Финализируем функционал прототипа и навигацию, добавляем интерактивность проекту для демонстрации и утверждения с Заказчиком:

4. Прорабатываем UX-kit проекта:

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

Главный критерий при выборе программы для разработки прототипа— удобство переноса макета для дальнейшей работы над дизайном и удобство для выгрузки результата заказчику или демонстрации.