Насколько прототип может отличаться от дизайн-макета и какие изменения стоит вносить на этапе прототипирования
От прототипа к дизайну: 5 преображений проектов
Сибирикс

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

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

Прототип — план, который помогает понять:
  • что есть на странице,
  • зачем оно там,
  • там ли вообще находится,
  • и как оно работает.

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

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

Взгляните на проект Lakk&Roll: на прототипе мы показали ключевые блоки, необходимость которых выявили на аналитике. На мудборде выяснилось, что заказчику нравится мозаичная структура на сайтах и пастельные оттенки — в итоге получился макет, значительно отличающийся от первоначальной вёрстки страницы.
Прототип, часть мудборда и итоговый макет для проекта Lakk&Roll
Вывод: вёрстка на дизайн-макете может серьёзно отличаться от вёрстки на прототипе.
Опасение 2: стандартные цвета и шрифты
Вам нравятся сайты с тёмным фоном или крупной типографикой — они кажутся более выразительными и запоминающимися. Особенно когда в отрасли так не принято. А перед вами прототип в градациях серого со стандартными шрифтами — как так?!

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

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

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

Так, в проекте «ИнтерактивЦентр» на этапе мудборда выяснилось, что заказчику нравятся округлые формы. Мы учли предпочтения заказчика и на макете сохранили структуру из прототипа, но добавили ярких цветов и стилеобразующие элементы — круги разных диаметров.
Прототип, фрагмент мудборда и итоговый макет для проекта «ИнтерактивЦентр»
Вывод: форма блоков от прототипа к макету может меняться в зависимости от дизайн-концепции.
Опасение 4: расположение блоков
Какие блоки поставить выше, какие — ниже, а какие спрятать в спойлер? Это зависит от приоритета информации. Дешевле и быстрее всего менять порядок блоков именно на этапе прототипирования. На живом проекте это будет уже несколько сложнее (хотя в нашем портфолио есть проекты, в которых порядок блоков можно задавать из админ-панели сайта, или менять этот порядок по результатам A-B-тестов). Тем не менее, продумать приоритеты на прототипе — правильная стратегия.

В проекте ГрандКапитал клиент попросил поменять приоритетность блоков — опыт и новости индустрии поднялись на уровень вверх, а блок о клиентах опустился ниже.
Вывод: на этапе прототипирования проще и дешевле менять расположение блоков (и добавлять/убирать их).
Опасение 5: контент-импотент
На прототипе тексты приблизительные: где-то «рыбный» текст, где-то описания со старого сайта. Такой контент (заголовки, описания, иногда — иконки) не влияет на структуру самой страницы, и его можно безболезненно поменять даже после запуска сайта.

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

Подборки с примерами цветовой гаммы, верстки и шрифтов обсуждаем после создания прототипа — на этапе мудборда.
В проекте Парацельс на этапе дизайна благодаря правкам на этапе прототипирования появляются более корректные формулировки на дизайне:
Вывод: контент на прототипе — как правило, приблизительный, и его можно заменить из админ-панели сайта (если только он радикально не влияет на структуру страниц). Готовьте контент загодя!
А если кратко?
1
Прототип — план страницы, отражающий структуру. Он отвечает на 4 вопроса: что есть на странице, зачем, где расположено и как оно работает.
2
На этапе прототипирования визуал — второстепенное. Основное внимание уделяют структуре и функциям проекта.
3
Прототип показывает расположение блоков, при этом вёрстка на итоговом макете может отличаться.
4
На прототипах с шрифтами и цветом элементов не играем. Типографика и цветовые предпочтения выбираются на следующем этапе.
5
Размеры и форма блоков — либо стандартные, либо заимствуются из элементов фирменного стиля. Если фирменного стиля нет, позже дизайнер предложит более интересные решения.
6
На прототипе можно менять приоритетность блоков. На следующих этапах это сложнее и затратнее.
7
Контент на прототипе приблизительный, и если он не влияет на структуру — его можно поменять. Контент, влияющий на смысл проекта, лучше подготовить заранее.