Дизайнер vs Проектировщик. Нужно ли дизайнеру прототипирование?

Прототипирование позволяет обнаружить уязвимые места в продукте и исправить их на ранних стадиях. Также с помощью прототипов налаживаются процессы взаимодействия между отделами внутри компании или между отдельными специалистами в рамках одного продукта.

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

В этой статье

Плюсы прототипирования

Высокая скорость создания

Те, кто занимаются прототипированием, представляют, что можно сделать прототип буквально за 5 минут и показать его заказчику и разработчикам. На создание детализированного прототипа уходит гораздо больше времени, но всё зависит от глубины детализации и сложности логики проекта.

Например, в нашей практике был клиент, которому необходимо было из трёх порталов сделать один объединяющий, при этом сохранить персонализированные предложения и единый логин. В рамках этого проекта мы собрали оптовый, розничный сайты и личный кабинет под каждый тип покупателя в удобную для эксплуатации систему.

Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*

Как получить измеримые результаты в фарммаркетинге.

Показываем на примерах →

Спецпроект

Основная сложность состояла в объединении на одном портале разных интересов, чтобы новой части пользователей давать много подсказок и дополнительной информации и при этом не мешать опытным юзерам.

Кроме того, это адаптивная версия, в которую надо было вставить много функционала, в том числе огромные таблицы. Таким образом, мы создали более 1000 прототипов, а работа длилась почти 6 месяцев.

Лёгкость и быстрота внесения изменений в прототипы

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

Интерактивность прототипов, то есть возможность создать кликабельную версию

В кликабельном прототипе можно проследить логику переходов. И прочувствовать продукт, представив взаимодействие будущего пользователя и создаваемого сервиса. К тому же, его можно сделать доступным для общего просмотра. Проектировщики обычно создают прототипы в Axure, который позволяет выгрузить работу в сеть. Дизайнеры в большинстве случаев пользуются Figma, так как она позволяет так же быстро работать с прототипами.

Виды прототипов

Статичные. Такой вид прототипов не содержит кликабельных элементов, спроектированный интерфейс представлен в плоском статичном виде. Данный вид прототипов подходит для внутренней «кухни». То есть когда вы набрасываете первую версию продукта. Либо вы находитесь на встрече с заказчиком и хотите быстро показать вашу идею, то можете набросать статичный прототип и рассказать вашу задумку.
Интерактивные. Это кликабельные версии прототипов с переходами между экранами, с различными состояниями экранов, с пониманием пути пользователя. Прототип строится на основе определённой User Story. Такой прототип можно легко отправить заказчику или провести по нему тестирование. Бо́льшая часть программ для создания интерактивных прототипов позволяет поделиться ими онлайн.
Анимированные. Одни из самых сложных прототипов, на больших, объёмных проектах их делают редко. Анимированные прототипы создаются для определённых блоков. К примеру, вы встраиваете что-то новое в уже готовый рабочий продукт, тогда анимированный прототип подойдёт для лучшего понимания заказчиком вашей идеи. Или для понимания логики разработчиками.

Степени проработки прототипов

1. Низкая детализация. В низко детализированных прототипах мы рисуем всё классическими блоками, делаем наброски на листочке или на стикерах и можем показать прототип здесь и сейчас.

2. Средняя детализация. Это может быть контент, который размещается в прототипе. Средняя степень проработки прототипов — самый универсальный вариант, так как не нужно тратить недели на его создание. В таком прототипе видно всё, что нужно техническим писателям, дизайнерам и заказчикам.

3. Высокая детализация. В данном случае у нас есть полностью весь контент, может быть даже дизайн прототипа. Создание таких прототипов очень трудозатратно и может занимать не один день.

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

На этом примере хорошо проработанный прототип с контентом

Почему прототип не соответствует дизайну, а дизайн не соответствует прототипу?

Это происходит в тех случаях, когда в процессе дизайна приходят более удачные идеи реализации интерфейса. Здесь нужно понимать, насколько важно следовать прототипу или от него отклоняться. Это всегда необходимо уточнять у заказчика, если прототип был предоставлен вам. Если проектировщики из вашей команды сделали прототип, а вы отрисовываете дизайн, то вы можете советоваться с ними и предлагать своё ви́дение.

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

Прототип сайта «Сота». Все тексты приблизительные: текст-«рыба» или описания из старых материалов

Помещая «рыбу» в структуру прототипа мы не можем предположить, какой текст будет в результате. В процессе дизайна контент может измениться, и придётся переделывать некоторые блоки.

Ещё один пример различий между прототипом и дизайном

Прототипы в агентстве

Не каждый заказчик может легко сформулировать свои мысли и рассказать всё, что задумал, а по ТЗ сделать это непросто, поэтому прототипы помогают не потерять важное.

Схема взаимосвязи элементов работы

Если от ТЗ вы перешли сразу к дизайну, то стадия создания прототипов не нужна. Вы уже спроектировали интерфейс при создании дизайна. Вы можете проектировать либо новые блоки, которых нет в дизайне, либо переходить сразу к дизайну.

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

Дизайн формирует ту визуальную часть, которую видит пользователь, а не разработчик. Из-за этого часто происходит изменение прототипов, если только нет установки на то, чтобы дизайн 100% совпадал с прототипами. Такое возможно, когда прототипы делает студия, которая занимается UX-исследованиями, но не занимается дизайном. Решение о том, как должен выглядеть конечный продукт, принимается на основе исследований и анализа данных. В этом случае дизайнер должен чётко следовать утверждённым прототипам.