Под прототипом будем понимать черно-белый чертеж будущего сайта. Хотя понятий, связанных с прототипированием, намного больше: есть мокапы (цветные), есть вайрфреймы (которые просто серые), есть прототипы (которые серые плюс кликабельные). Главные плюсы прототипов — наглядность и относительная дешевизна. Можно потыкать мышкой свой будущий проект, еще до дизайна, верстки и программирования.

На этапе прототипирования закладывается не только функционал проекта, но и продумывается юзабилити и нюансы пользовательского поведения. Для этого предварительно (и очень подробно) анализируются рынок, конкуренты, клиенты, их боли, ожидания и потребности.

Один из главных трендов — сочетание инструментов для прототипирования и дизайна в одном программном обеспечении. Таких программ появляется всё больше, а их возможности всё круче. Особо продвинутые инструменты могут создавать страницы, максимально приближенные к будущему сайту: с цветными картинками, анимашками и рабочими ссылками. Это хорошая и правильная тенденция. Обратная сторона медали — такие «прототипы» вызывают эффект утёнка. Это когда привыкаешь к тому, что первее увидел — в нашем случае, к прототипу. В дальнейшем дизайнер становится крайне ограничен в выборе решений, творчестве и наборе ходов. Да и любые отхождения от прототипа могут восприниматься «в штыки».

Прототип — план, который помогает понять:

• что есть на странице,
• зачем оно там,
• там ли вообще находится,
• и как оно работает.

Ждать от него максимальной схожести с готовым проектом — всё равно что примерять бумажную выкройку вместо платья: форма правильная, но вид пока совсем не тот. Да и в бумаге по улице не пощеголяешь особенно :)

Но при взгляде на черно-белый чертеж проекта визуальные элементы сложно игнорировать. Шрифты, размеры и расположение блоков бросаются в глаза и отвлекают от главного — структуры. Страх из-за неопределённости (каким будет дизайн ведь пока непонятно) нашёптывает клиенту в ушко: шрифт какой-то обычный, верстка обычная… А ты же хотел не по сетке, блоки маленькие, а у нас все фотки с фотосессий крупные. И так далее. Появляются справедливые вопросы — можно ли это поменять?!

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

Вы прошерстили Awwwards и вдохновились проектами с нестандартной вёрсткой: это поможет выделиться на фоне унылых конкурентов. Но на прототипе вы видите чёткую линейную структуру. Волноваться не стоит — расскажите о своих визуальных предпочтениях перед следующим этапом (мудбордом — обсуждением сайтов, которые вам нравятся и подходят проекту по стилистике). А пока лучше сосредоточиться на структуре страницы.

Взгляните на проект Lakk&Roll: на прототипе мы показали ключевые блоки, необходимость которых выявили на аналитике. На мудборде выяснилось, что заказчику нравится мозаичная структура на сайтах и пастельные оттенки — в итоге получился макет, значительно отличающийся от первоначальной вёрстки страницы.

Вам нравятся сайты с тёмным фоном или крупной типографикой — они кажутся более выразительными и запоминающимися. Особенно когда в отрасли так не принято. А перед вами прототип в градациях серого со стандартными шрифтами — как так?!

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

В проекте Senetsy заказчик утвердил структуру на прототипе, но хотел добавить сайту глубины. Учитывая референсы (примеры сайтов, которые ему нравятся), мы подобрали контрастную цветовую схему и шрифт, а смещением блоков на главной подчеркнули нашу космическую задумку.

Как правило в прототипах используются прямоугольные формы блоков (за редким исключением — если какие-то формы можно подсмотреть в вашем фирменном стиле).

Слева — проект сети клиник 3Z, где в брендбуке заказчика мы обнаружили очень интересные формы, которые сразу разместили на прототипе. Справа — проект Mr.Diamond, для которого мы создавали концепцию с нуля.

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

Так, в проекте «ИнтерактивЦентр» на этапе мудборда выяснилось, что заказчику нравятся округлые формы. Мы учли предпочтения заказчика и на макете сохранили структуру из прототипа, но добавили ярких цветов и стилеобразующие элементы — круги разных диаметров.

Какие блоки поставить выше, какие — ниже, а какие спрятать в спойлер? Это зависит от приоритета информации. Дешевле и быстрее всего менять порядок блоков именно на этапе прототипирования. На живом проекте это будет уже несколько сложнее (хотя в нашем портфолио есть проекты, в которых порядок блоков можно задавать из админ-панели сайта, или менять этот порядок по результатам A-B-тестов). Тем не менее, продумать приоритеты на прототипе — правильная стратегия.

В проекте ГрандКапитал клиент попросил поменять приоритетность блоков — опыт и новости индустрии поднялись на уровень вверх, а блок о клиентах опустился ниже.

На прототипе тексты приблизительные: где-то «рыбный» текст, где-то описания со старого сайта. Такой контент (заголовки, описания, иногда — иконки) не влияет на структуру самой страницы, и его можно безболезненно поменять даже после запуска сайта.

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

В проекте Парацельс на этапе дизайна благодаря правкам на этапе прототипирования появляются более корректные формулировки на дизайне: