Прототип пропускают, чтобы сэкономить, и потом переделывают макеты. Разбираем, какие вопросы он решает и почему на нём правки дешевле.
Коротко
- Прототип решает вопросы состава.
- Правки на нём стоят дешевле.
- Проверять на нём можно уже людей.
- Для одной страницы бывает лишним.
Чем он отличается от макета
Прототип
- Что на странице и в каком порядке
- Без цветов и шрифтов
- Блоки прямоугольниками
- Тексты примерные, но по смыслу
- Правка — минуты
Макет
- Как это выглядит
- Цвета, шрифты, изображения
- Готовый вид страницы
- Реальные тексты
- Правка — часы
Смысл разделения — в цене изменения. Переставить блоки в прототипе стоит минуты, в готовом макете — часы, а в свёрстанном сайте — дни. Поэтому вопросы «что и в каком порядке» решают на самом дешёвом этапе.
Какие вопросы он решает
| Вопрос | Что становится видно |
|---|---|
| Что на первом экране | Хватает ли места для главного |
| Порядок блоков | Отвечает ли страница по очереди |
| Сколько всего блоков | Не превратилась ли страница в свалку |
| Где призыв к действию | Один или повторяется |
| Что где на мобильном | Порядок при одной колонке |
| Чего не хватает | Пробелы в содержимом |
Последняя строка — неожиданная польза прототипа. Расставляя блоки, обычно обнаруживают, что для половины из них нет содержимого: ни фотографий процесса, ни кейсов, ни цен — и это выясняется до, а не в день сдачи.
Как его сделать
Выписать вопросы посетителя
По порядку возникновения.
Превратить каждый в блок
Один вопрос — один блок.
Расставить по порядку
От главного к уточняющему.
Добавить действия
Где можно оставить заявку.
Написать примерные тексты
По смыслу, не «Lorem».
Собрать мобильный вариант
Одной колонкой.
Пятый шаг обязателен: заглушки обесценивают прототип. Блок с надписью «здесь текст» не даёт понять, хватает ли места и что человек прочитает: достаточно одной честной фразы по смыслу каждого блока.
Что можно проверить на прототипе
| Проверка | Как делается |
|---|---|
| Понятно, чем вы занимаетесь | Показать на несколько секунд |
| Найдётся главное действие | Попросить найти глазами |
| Хватает ли сведений для решения | Спросить, чего не хватает |
| Порядок блоков логичен | Попросить пересказать |
| Мобильный порядок работает | Посмотреть на телефоне |
Третья проверка часто меняет состав страницы. Вопрос «чего вам не хватает, чтобы решиться» задаётся людям вне компании и даёт список блоков, о которых внутри не думали: обычно это цены, сроки и примеры работ.
Когда его можно не делать
| Ситуация | Почему допустимо |
|---|---|
| Одна простая страница | Состав очевиден |
| Готовый проверенный шаблон | Структура уже задана |
| Мелкая правка существующей страницы | Не тот масштаб |
| Полный редизайн | Нет, прототип нужен |
| Новый раздел или каталог | Нет, прототип нужен |
Две последние строки — исключения из исключений. На редизайне и новых разделах именно состав и порядок вызывают больше всего споров, и решать их на готовых макетах дороже всего. Про порядок работы — в статье про дизайн сайта.
Частые ошибки
| Ошибка | Чем плохо |
|---|---|
| Рисовать оформление в прототипе | Обсуждение уходит на цвета |
| Заглушки вместо текстов | Ничего не проверить |
| Только настольная версия | Мобильный порядок не продуман |
| Согласование без людей вне компании | Понятно только вам |
| Прототип не передан дизайнеру | Работа делается дважды |
Первая ошибка сводит на нет весь смысл этапа. Как только в прототипе появляются цвета и картинки, обсуждение переключается на них — а вопросы состава остаются нерешёнными и всплывают на макетах.
Частые вопросы
Чем прототип отличается от макета?
Прототип отвечает на вопрос «что на странице и в каком порядке» без цветов и шрифтов, макет — на вопрос «как это выглядит». Смысл разделения в цене изменения.
Можно ли использовать текст-заглушку?
Нет, это обесценивает прототип: по надписи «здесь текст» нельзя понять, хватает ли места и что человек прочитает. Достаточно одной честной фразы по смыслу.
Что можно проверить на прототипе?
Понятно ли, чем вы занимаетесь, находится ли главное действие, хватает ли сведений для решения, логичен ли порядок блоков и работает ли мобильный порядок.
Когда прототип не нужен?
На одной простой странице, на проверенном шаблоне и при мелких правках. На редизайне и новых разделах он нужен обязательно.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
