Что такое прототип и чем он отличается от макета
Прототип — упрощённая схема сайта без оформления: блоки, заголовки, кнопки, переходы. Он отвечает на вопрос «что где находится и как связано», а не «как это выглядит». Макет показывает внешний вид, цвета и шрифты, вёрстка превращает его в рабочие страницы. Чем раньше согласована структура, тем меньше переделок на дорогих этапах. Для поиска в прототипе важно ещё одно: по нему можно договориться о структуре разделов и адресов до того, как их придётся менять в коде.
Что показать в прототипе
| Элемент | Что показать | Зачем |
|---|---|---|
| Карта страниц | Все разделы и типы страниц с уровнями вложенности | Согласовать структуру и объём |
| Адреса | Будущий URL каждого типа страниц и пример слага | Проверить логику вложенности |
| Шаблоны | Блоки на главной, в разделе, карточке, статье | Убедиться, что есть место для заголовка, текста и ссылок |
| Навигация | Меню, хлебные крошки, связанные страницы | Проверить пути и глубину |
| Состояния | Пустой результат, ошибка, 404, фильтры, пагинация | Не забыть о служебных случаях |
| Формы и действия | Поля, сообщения, переходы после отправки | Продумать цели аналитики и адреса благодарности |
Структура и адреса в одной схеме
Полезно, чтобы у каждого прямоугольника схемы был подписан адрес. Тогда дерево страниц превращается в дерево адресов, и нарушения логики видны сразу.
/ главная
/katalog/ каталог, список категорий
/katalog/divany/ категория
/katalog/divany/model-1/ карточка товара
/blog/ список статей
/blog/kak-vybrat-divan/ статья
/kontakty/ контакты и реквизитыТакой список удобнее держать рядом со схемой, чтобы не потерять его при правках. Правила построения дерева описаны в статье как спроектировать структуру сайта до кода.
Как готовить прототип
- Соберите структуру из семантики и задач бизнеса: карта разделов на основе семантики.
- Нарисуйте схемы страниц каждого типа с блоками, которые должны быть на странице.
- Подпишите адреса и переходы между страницами, включая служебные состояния.
- Согласуйте с заказчиком и разработчиком и зафиксируйте версию.
Про что часто забывают
- Фильтры и сортировка. Покажите, какие комбинации создают адреса, а какие нет.
- Пагинация. Нарисуйте вид второй и следующих страниц списка.
- Пустые состояния. Что видит человек, если поиск ничего не нашёл.
- Страница 404 и служебные страницы: контакты, условия, политики.
- Мобильная версия. Меню и порядок блоков на узком экране могут отличаться.
Как передать прототип в работу
Приложите к схемам письменную спецификацию: список типов страниц, правила адресов, требования к заголовкам и служебным файлам (SEO-требования в ТЗ). Заведите общий документ, где описано, почему принято то или иное решение: он пригодится, когда команда поменяется: документирование структуры для команды. Перед разработкой проверьте структуру по списку: чек-лист структуры каталога.
Правило. Структура и адреса согласуются до вёрстки, а не после. Изменение схемы в прототипе занимает минуты, а изменение адресов в готовом сайте — дни и редиректы.
Как проверить прототип до передачи в вёрстку
Прежде чем отдавать схему в работу, пройдите по ней как посетитель и как робот. Вопросы ниже помогают найти проблемы, пока их исправление занимает минуты.
| Вопрос | Что должно быть в ответе | Если ответа нет |
|---|---|---|
| Можно ли из любой страницы дойти до главных разделов за один-два клика? | Меню и хлебные крошки показаны на схеме | Добавить блок навигации в шаблон |
| У каждого типа страниц есть адрес и пример слага? | Список адресов совпадает со схемой | Дописать правила в спецификацию |
| Есть ли у каждой страницы своя тема и заголовок? | Подписаны H1 и назначение страницы | Объединить страницы или уточнить тему |
| Что происходит на несуществующем адресе? | Показана страница 404 с понятными ссылками | Нарисовать состояние ошибки |
| Куда ведёт пользователя форма после отправки? | Отдельная страница благодарности или сообщение | Добавить состояние и цель аналитики |
Ответы удобно записать прямо на схеме или в приложенном документе. Если на часть вопросов нет ответов, это не повод откладывать работу, а список задач для следующей версии прототипа.
Типичные ошибки
- Показывать только главную страницу и не рисовать внутренние шаблоны, где будет вся работа с поиском.
- Согласовывать структуру устно и не фиксировать версию: через месяц никто не помнит, что решили.
- Оформлять прототип как готовый дизайн: обсуждение уходит в цвета и шрифты, а не в структуру.
- Не показывать состояния: фильтры, пустой результат, вторую страницу списка.
Частые вопросы
Нужно ли показывать адреса в прототипе?
Да, подпись адреса у каждой страницы помогает заметить нарушения логики и согласовать структуру до начала разработки.
Чем прототип отличается от макета?
Прототип показывает состав страниц и переходы без оформления, макет показывает внешний вид; структура согласуется на прототипе.
Какие страницы часто забывают в прототипе?
Страницу 404, пустые результаты поиска, вторые страницы списков, фильтры, страницы благодарности после форм и мобильные состояния.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.