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

Но как выглядит этот процесс изнутри? С чего всё начинается: с прототипа или с референсов? Когда нужен мозговой штурм? В какой последовательности работать над дизайном лучше всего? И что должно произойти, прежде чем заказчик увидит презентацию макета главной страницы?

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

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

Всё это собирается в большой документ в формате интеллект-карты, который на время создания проекта становится настольной книгой дизайнера. Внутри:

• видение проекта — что мы делаем, для кого и с какой целью;
• портрет пользователя — изучаем веб-аналитику текущего проекта заказчика, если он есть;
• CJM — карту путешествия пользователя, смиксованную с методом персон;
• анализ фишек и косяков у конкурентов;
• структура будущего проекта и планы на его развитие.

Кроме очевидно «твердых» данных вроде возраста ЦА или конкретных фишек конкурентов, агрегация требований также помогает понять необходимую степень креативности будущего проекта. Так, у корпоративных, имиджевых промосайтов и в е-коммерс она может отличаться.

Чтобы четко определить степень дизайнерской смелости для каждого проекта и сделать дизайн-процесс более управляемым, мы в студии придумали негласный бегунок креативности:

• 0% — консерватизм;
• 50% — «Смело. Дерзко. С легким налетом сумасшествия»;
• 100% — безумие.

Определяем уровень мы обычно субъективно, но есть несколько влияющих факторов:

1. Тип проекта
Если это e-commerce, то задача дизайнера — сделать интерфейс, который позволит повторять поведение пользователя в офлайн-магазине: зашел → увидел → понравилось → схватил → оплатил. Важно продумать, какие шаги отделяют посетителей от покупки, как люди будут двигаться по направлению к корзине и оформлению заказа, и помочь им сделать это быстро, чётко и с заботой о них. В таких проектах 80% успеха — это UX, и лишь 20% — за дизайном. Хотя, одно другому иногда не мешает.

У промосайтов всё может быть иначе. Их задача — зацепить и запомниться. Здесь все дизайн-средства хороши, хотя про UX не стоит забывать насовсем.

2. Пожелания заказчика
Мы встречали очень суровых клиентов, которые были против всяких креативностей: всё должно быть чётко, просто и по делу. Резонно, если ты управляешь гигантской корпорацией, например. Но при этом среди топов крутых компаний находились и такие, кто был не против дизайнерских экспериментов.

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

• геймерам — бегунок креактивности почти на все 100% и крышесносную верстку и нетипичные слайдеры;
• любителям халяльной молочки с Кавказа — условные 50% креативности и все преимущества продукции сразу на яркой главной;
• любителям путешествий на лайнерах — консервативные 20% и четкие условия и пошаговую форма бронирования.

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

Вопрос, в каком месте дизайн-процесса должен стоять прототип, — довольно сложный:

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

Поэтому очередь прототипа мы определяем всё тем же бегунком креативности: чем степень креативности проекта выше, тем вероятнее прототип появится только после этапа поиска референсов, обсуждения идеи и отрисовки скетча (карандашного наброска).

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

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

Невероятная главная страница сайта планировщика SingularityApp

Визуальный бриф (или мудборд) — подборка примеров готовых сайтов и элементов в разных графических стилях. Здесь обязательно будут:

• референсы от заказчика: то, что нравится у конкурентов или на сайтах компаний из других сфер;
• референсы от студии: актуальные решения для поиска стилистики и интересных деталей;
• элементы интерфейсов: варианты оформления интерфейсов и форм;
• варианты иконок: толстые и тонкие, детально прорисованные и нет, чтобы найти те самые для проекта;
• варианты шрифтов разного уровня: заголовки, подзаголовки и обычный текст на примере текстов заказчика, а не чая с французскими булками;
• примеры контента: фотографии, изображения, 3D-модели.

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

С очередностью визуального брифа в дизайн-процессе тоже не всё так просто. И порядок действий снова определяет степень креативности проекта:

• На консервативных проектах (е-коммерс, личные кабинеты, B2B-порталы) мы делаем визуальный бриф после создания прототипа, потому что структура и логика там стоят на первом месте.
• На креативных проектах — собираем референсы до прототипа (потому что идея определяет логику всей страницы) и иногда повторно делаем визуальный бриф еще и перед дизайном.

Брейншторм в дизайн-процессе — процесс поиска фишки всего проекта, его главной идеи, или, по-западному, инсайта. Инсайт — скрытая правда. То, что сделало «Хэд Энд Шолдерс» шампунем № 1 от перхоти. То, что заставляет вас хотеть бутылочку колы под песню «Праздник к нам приходит». И то, что делает порошок «Тайд» лучшим средством против кипячения белья (да, «после стольких лет — всегда»).

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

Часто инсайты прячутся в сакральных линиях логотипов, в неймингах, в фирменных стилях. А иногда — в случайно рассказанных заказчиком подробностях при обсуждении проекта.

Например, производитель препаратов для защиты иммунитета «Галавит» рассказал нам об архетипе воина у своего бренда. Так родилась идея использовать образ викинга, который защищает от целого спектра болезней. Его мы сделали маскотом бренда, а заказчику решение настолько понравилось, что он начал использовать образ во всех рекламных коммуникациях.

Викинг — маскот, который отражает архетип воина у бренда «Галавит»

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

На сам брейншторм приходят арт-директор, дизайнер и менеджер проекта, а процесс состоит из двух этапов:

• генерация и сбор всех возможных идей;
• отбор жизнеспособных идей.

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

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

Иногда бывает и дополнительный брейншторм уже на этапе отрисовки внутренних страниц: например, если нужно сделать обычные текстовые страницы интересными или продумать UX на проекте, где четкость и последовательность действий на странице важнее эффектности промо.

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

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

Целей у приёмки несколько:

• отрепетировать презентацию макета для заказчика и потренироваться отвечать на вопросы (особенно актуально для молодых руководителей проектов, которым очень страшно);
• убедиться, что макет соответствует или превосходит уровень макетов студии;
• получить конструктивную критику и доработать макет, презентацию и саму её подачу;
• отсмотреть презентацию незамыленным взглядом на предмет опечаток, ошибок или лишних элементов :)

Бывает, что после внутренней приемки макеты существенно меняются. Так было на проекте для легендарного разработчика игр Alawar. Ребята пришли к нам с запросом «нам нужно попроще, чтоб легко было поддерживать». Мы прошли все дизайн-этапы, приступили к отрисовке — было важно максимально попасть в ожидания заказчика. Но на внутренней приемке всё пошло не по плану.

Версия дизайна для Alawar с внутренней приемки и финальная, в которую влюбились и мы, и заказчик

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

Если на презентации с клиентом всё пройдёт отлично, дизайнеры приступят к отрисовке внутренних страниц. Если будут возражения — их нужно будет отбить, а годные правочки внести. И потом всё равно приступать к отрисовке внутренних :)

Параллельно мы создадим UI-kit, чтобы макеты не отличались между собой по стилистике, а одни и те же элементы на разных страницах сайта выглядели одинаково. Если проект включает много страниц и элементов — предложим создать дизайн-систему: она особенно важна на проектах с длительной технической поддержкой (как у Орматек, например).

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