Прежде чем у сайта появляется дизайн, у него должна появиться структура: какие разделы будут на странице, в каком порядке и что в них написано. Эту структуру показывает прототип сайта, и из-за простого вида его легко недооценить.
Прототип сайта: это схематичное представление будущей страницы или сайта: структура разделов, расположение блоков, порядок контента и основные интерактивные элементы вроде меню, кнопок и форм, без финальной отрисовки цвета, шрифтов и графики.
Что такое прототип сайта
Прототип отвечает на вопрос «что где расположено и в каком порядке», а не «как это будет выглядеть». Это рабочий инструмент проектирования, а не готовый дизайн.
Из чего состоит прототип
Структура разделов сверху вниз, ключевые блоки внутри разделов, порядок подачи информации и логика интерактивных элементов: меню, кнопки, поля формы. Цвет, шрифты и иллюстрации относятся к следующему этапу.
Зачем нужен прототип перед запуском
Поменять порядок разделов на схеме дёшево и быстро, а та же правка в свёрстанном сайте требует гораздо больше ресурсов. Поэтому структуру согласуем до дизайна и текстов.
Чем прототип отличается от дизайн-макета
Прототип и дизайн-макет
| Критерий | Прототип сайта | Дизайн-макет |
|---|---|---|
| Детализация | Схема: блоки, разделы, порядок | Цвет, шрифты, изображения |
| Что меняют | Структуру, логику, путь пользователя | Визуальный стиль на готовой структуре |
| Когда используется | До разработки или редизайна | После согласования структуры |
Сначала решают, что где расположено, и только потом, какого это будет цвета.
Прототип как этап создания сайта под ключ
Когда сайта нет, прототип становится первым практическим шагом после исследования и семантики, этапом «структура» в нашем процессе создания сайта под ключ. Заголовки, разделы и место для блока вопросов закладываем сразу под посетителей, поиск и нейросети, а каждую структуру перед дизайном проверяет человек.
Для лендинга качество прототипа особенно важно: порядок блоков напрямую влияет на то, сколько посетителей дойдут до формы.
«Прототип за 48 часов»: быстрый прототип для редизайна устаревшего сайта
Для владельцев устаревших сайтов есть быстрый формат: готовим прототип нового сайта по ссылке на текущий и показываем его до какой-либо оплаты, обычно в течение 48 часов. Подробнее о формате на странице редизайна сайта.
Признаки, что сайту пора обновляться: нет HTTPS, нет адаптации под телефон, низкая оценка в PageSpeed, контент не обновлялся дольше двух лет, табличная вёрстка. Защищённое соединение и удобство на мобильном входят в сигналы page experience по Google Search Central, а HTTPS защищает соединение от перехвата.
Сайт кажется устаревшим, но непонятно, с чего начать? Проверим бесплатно признаки устаревания и подскажем, нужен ли прототип нового сайта.
Как мы прорабатываем структуру прототипа
Как мы делаем прототип сайта
- 01
Разбор задачи или сайта
Для нового сайта берём бриф и семантику, для редизайна разбираем текущий сайт.
- 02
Структура разделов
Определяем разделы и порядок, в котором они отвечают на вопросы посетителя.
- 03
Расположение блоков и элементов
Раскладываем блоки, кнопки, формы и путь пользователя.
- 04
Проверка логики
Смотрим, доходит ли посетитель до формы без лишних шагов.
- 05
Показ и правки
Правим структуру, пока она не устроит обе стороны, и только потом переходим к дизайну.
Что вы получаете на выходе
Подробнее об опыте: на странице Алексей Боровиков.
Кому и когда нужен прототип сайта
Если сайта пока нет
Прототип идёт первым шагом после брифа и семантики, до дизайна и текстов, и для сайта под ключ, и для отдельного лендинга.
Если сайт есть, но выглядит устаревшим
Прототип показывает новый результат до оплаты. Повод для него может найти и юзабилити-аудит: если проблемы в структуре и пути пользователя, логичнее новый прототип, а не точечная доработка сайта.
