Что такое прототип сайта
Прототип - схема интерфейса, которая показывает структуру, содержание и логику взаимодействия до финального визуального дизайна. Он может быть очень простым wireframe или почти интерактивной моделью - детализация зависит от проекта.
Главная ценность прототипа в том, что спор о структуре происходит до дорогостоящей отрисовки и разработки.
Что проработать в прототипе
Что нужно подготовить до прототипа
- цель сайта;
- основные аудитории и сценарии;
- список услуг или продуктов;
- черновую карту страниц;
- ключевые материалы: цены, кейсы, документы, фотографии;
- ограничения платформы и интеграций;
- SEO-структуру, если поисковый трафик важен.
Если этих вводных нет, прототип рискует стать красивой догадкой дизайнера о бизнесе.
Что решается на уровне страницы
Для каждой страницы определите одно основное действие и вопросы, которые пользователь должен закрыть до него. Отсюда появляется порядок блоков.
Например, на странице сложной B2B-услуги могут потребоваться: позиционирование, задачи, состав работ, процесс, технические ограничения, кейсы и контакт. На простом лендинге структура будет короче.
Прототип должен содержать реальный смысл
Lorem ipsum скрывает проблемы. Заголовок из двух слов и будущий реальный заголовок в три строки занимают разное место и создают разную композицию. Поэтому уже в прототипе желательно использовать рабочие формулировки хотя бы для ключевых экранов.
Это особенно важно для Tilda и адаптива: длина заголовков напрямую влияет на высоту Zero Block, карточек и табов.
Не забудьте состояния
Прототип сложного интерфейса должен показывать не только идеальный экран:
- открытое меню;
- активный таб;
- ошибку формы;
- успешную отправку;
- пустой результат поиска;
- мобильное поведение сложного блока.
Если разработчик впервые узнает о состоянии ошибки уже на сборке, дизайн неполный.
Нужен ли отдельный мобильный прототип
Для простых страниц достаточно заранее определить правила адаптива. Для интерфейса со сложной навигацией, таблицами, фильтрами или нестандартными взаимодействиями мобильный сценарий лучше прототипировать отдельно.
Не нужно просто уменьшать десктоп. На телефоне меняется порядок приоритетов, способ взаимодействия и доступная площадь.
Как связать прототип с SEO
Если сайт создается под поисковое продвижение, карта запросов и URL должна появиться до дизайна. Тогда прототипы основных типов страниц сразу учитывают необходимые сущности и внутренние связи.
Процесс построения такой карты разобран в статье про семантическое ядро.
Что не нужно решать в прототипе
Точные оттенки, финальная типографика, сложные hover-эффекты и декоративная анимация относятся к визуальной системе. Если команда часами обсуждает радиус серой карточки в wireframe, этапы смешались.
Когда полноценный прототип можно сократить
Если небольшой сайт строится на уже утвержденной дизайн-системе, структура типовая, а контент готов, часть страниц можно собирать сразу на компонентах. Но даже тогда должна существовать карта и понятная логика каждого типа страницы.
Как выглядит полезный прототип одного экрана
Для страницы услуги прототип первого экрана должен отвечать хотя бы на четыре вопроса: что предлагается, кому, почему этому можно доверять и какой следующий шаг. Уже на этом этапе можно поставить реальный H1, короткое пояснение, доказательство и CTA. Серые прямоугольники текст здесь и кнопка здесь почти ничего не проверяют.
Ниже прототип должен показывать порядок принятия решения: варианты услуги, условия, процесс, кейсы, ответы на возражения, форму. Это не означает, что каждая страница обязана иметь одинаковую структуру. Прототип фиксирует логику конкретного типа страницы.
Что должно остаться после этапа прототипа
- карта типов страниц и их назначение;
- структура ключевых страниц с реальным черновым содержанием;
- состояния форм, меню, табов и сложных компонентов;
- решения по мобильным сценариям, если они отличаются;
- понимание, какие материалы еще должен предоставить клиент;
- список вопросов, которые нельзя закрыть дизайном без бизнес-решения.
Если после прототипа дизайнер все еще вынужден самостоятельно придумывать, что должна объяснять половина блоков, этап был слишком поверхностным.
Что утверждать с заказчиком
На прототипе полезно фиксировать не координаты каждого элемента, а содержание и сценарий: какие блоки входят, в каком порядке, какие данные нужны и какое действие считается основным. Это снижает риск, что визуально утвержденный экран позже придется перестраивать из-за отсутствующего контента.
Как выбрать детализацию прототипа
Для простой страницы услуги достаточно структуры и реальных заголовков. Для сервиса с фильтрами, личным кабинетом или многошаговой формой понадобится кликабельный прототип с состояниями. Чем выше цена ошибки на разработке, тем выгоднее проверить логику раньше.
Не повышайте детализацию автоматически для каждого проекта. Если компонент уже существует в дизайн-системе, достаточно указать его место и контент.
Что передать дизайнеру после утверждения
Помимо самого прототипа зафиксируйте открытые вопросы и ограничения: какие фото еще не готовы, какие данные приходят из CRM, где длина текста может меняться. Это защищает дизайн от ложной точности и заранее показывает зоны, требующие гибкой верстки.
Кто пишет текст для прототипа
Не принципиально, копирайтер, стратег или дизайнер. Важно, чтобы ключевые формулировки появились до финальной композиции. На проектах с SEO полезно подключать семантику еще раньше: тогда H1 и сущности страницы не приходится втискивать в уже утвержденный дизайн.
Черновой текст может меняться, но его объем и смысл должны быть реалистичными.
Хороший прототип уменьшает неизвестность
После этапа должно быть понятно, какие страницы и состояния предстоит оформить, какой контент отсутствует и как пользователь проходит основные сценарии. Тогда дизайн решает визуальную задачу, а не одновременно пытается изобрести архитектуру.
Для нового проекта эти решения входят в процесс разработки сайта на Tilda; вводные удобно собирать через бриф marmelad.digital.
