7 шагов дизайна
Статья-откровение: как устроен дизайн-процесс в «Сибирикс»
Темно. Только узкие полоски солнечного света продираются сквозь закрытые рулонные шторы, ложась на рабочий стол. Еле слышно шуршание музыки в наушниках. Время от времени тишину нарушают активные клики мышками и периодическое постукивание по клавишам клавиатуры. Тихо, идёт экзамен! дизайнеры творят красоту.
Примерно такая таинственная и в чём-то даже интимная обстановка в нашей дизайнерской — ежедневно. И если совершенно ничего не знать о процессе создания макетов, то кажется, будто креативы рождаются по мановению мышки одной силой вдохновения мастера. И да, и нет. Давайте-ка заглянем в святую святых и разберёмся, из чего же всё-таки создаётся клёвый дизайн, который берёт премии.
Примерно такая таинственная и в чём-то даже интимная обстановка в нашей дизайнерской — ежедневно. И если совершенно ничего не знать о процессе создания макетов, то кажется, будто креативы рождаются по мановению мышки одной силой вдохновения мастера. И да, и нет. Давайте-ка заглянем в святую святых и разберёмся, из чего же всё-таки создаётся клёвый дизайн, который берёт премии.
Этап 0. Агрегация требований
Театр начинается с вешалки, а дизайн — с агрегации требований. О ней мы писали много и дотошно: в агрегации много фактов, исследований персон, конкурентов и рынка. И ни грамма креатива. Такая аналитика нужна, чтобы понимать, для кого мы создаём сайт, какие у этих людей потребности и проблемы, какие разделы на сайте им нужны. Результат этапа — большой документ в формате майндмэпа, который на время создания проекта становится настольной книгой дизайнера. Внутри:
- анализ целевых персон с их болями, интересами и тем, что им может предложить наш сайт;
- видение проекта, цели и задачи заказчика;
- анализ фишек и косяков у конкурентов;
- структура сайта.
Анализ целевых персон
 |  |  |
Слева направо: видение проекта, анализ сайтов конкурентов, структура сайта (фрагмент)
Этап 1. Бегунок креативности
Креатив креативу рознь, и нужно всегда помнить, каков тип проекта и какова его аудитория. Понятно, что степень креативности в е-коммерс может отличаться от корпоративных или имиджевых сайтов. Так что, если вы не продаёте какие-то совсем упоротые вещи вроде светильников в виде женской груди, то будьте аккуратны со своими желаниями — в руках так-себе дизайнеров им свойственно исполняться. Об этом у нас даже есть отдельный материал про хороший/плохой дизайн: смотрите и лучше так не делайте :)
В студии есть негласный бегунок креативности для того, чтобы определить степень дизайнерской смелости для каждого проекта:
1. Тип проекта
Если это e-commerce, то задача дизайнера — повторять поведение пользователя на кассе. Важно продумать, какие шаги отделяют юзеров от покупки, как они будут двигаться по направлению к корзине и оформлению заказа, и помочь им сделать это быстро, чётко и с заботой о них. В таких проектах 80% успеха — это UX, и лишь 20% — за дизайном. Хотя, одно другому иногда не мешает.
У промо-сайтов всё может быть иначе. Их задача — зацепить и заставить совершить целевое действие. Здесь все дизайн-средства хороши, хотя про UX не стоит забывать насовсем.
В студии есть негласный бегунок креативности для того, чтобы определить степень дизайнерской смелости для каждого проекта:
- 0 — консерватизм;
- 50% — «Смело. Дерзко. С легким налетом сумасшествия»;
- 100% — безумие.
1. Тип проекта
Если это e-commerce, то задача дизайнера — повторять поведение пользователя на кассе. Важно продумать, какие шаги отделяют юзеров от покупки, как они будут двигаться по направлению к корзине и оформлению заказа, и помочь им сделать это быстро, чётко и с заботой о них. В таких проектах 80% успеха — это UX, и лишь 20% — за дизайном. Хотя, одно другому иногда не мешает.
У промо-сайтов всё может быть иначе. Их задача — зацепить и заставить совершить целевое действие. Здесь все дизайн-средства хороши, хотя про UX не стоит забывать насовсем.
Слева — смелый интернет-магазин для Fosfor, справа — проект со 100%-ной креативностью для «Молочной культуры»
2. Пожелания заказчика
Мы встречали очень суровых клиентов, которые были против всяких креативностей: всё должно быть чётко, просто и по делу. Резонно, если ты управляешь гигантской корпорацией, например. Но при этом среди топов крутых компаний находились и такие, кто был не против дизайнерских экспериментов.
Мы встречали очень суровых клиентов, которые были против всяких креативностей: всё должно быть чётко, просто и по делу. Резонно, если ты управляешь гигантской корпорацией, например. Но при этом среди топов крутых компаний находились и такие, кто был не против дизайнерских экспериментов.
Слева — очень серьёзный сайт для «Севергрупп», справа — интернет-магазин для «Северсталь»
3. Тип целевой аудитории
Бывалым юзерам можно предложить нестандартные слайдеры и анимации, но если среди целевой аудитории есть старшее поколение — надо быть аккуратным. И предусмотреть версию для слабовидящих, например.
Бывалым юзерам можно предложить нестандартные слайдеры и анимации, но если среди целевой аудитории есть старшее поколение — надо быть аккуратным. И предусмотреть версию для слабовидящих, например.
4. Принципы отрасли
Правила создаются, чтобы их нарушать, но ведь и нарушать-то нужно уметь. Да, у нас бывали проекты в узких нишах, где принято так, и только так. Но это не мешало нам выделить клиента на фоне остальных матёрых конкурентов — крутой концепцией и её реализацией, которые при этом не слишком спорили со стандартами отрасли.
Правила создаются, чтобы их нарушать, но ведь и нарушать-то нужно уметь. Да, у нас бывали проекты в узких нишах, где принято так, и только так. Но это не мешало нам выделить клиента на фоне остальных матёрых конкурентов — крутой концепцией и её реализацией, которые при этом не слишком спорили со стандартами отрасли.
Когда мы выяснили все подводные камни и поговорили с заказчиком о том, какая степень креативности для него адекватна, можно приступать к поиску идей.
Этап 2. Поиск инсайта
Инсайт — скрытая правда. То, что сделало Head and Shoulders шампунем № 1 от перхоти. То, что заставляет вас хотеть бутылочку колы под песню «Праздник к нам приходит». И то, что делает порошок Tide лучшим средством против кипячения белья.
Хорошие инсайты не дороге не валяются. И даже на поверхности-то не лежат. Приходится копать глубже — искать какую-то отличительную черту клиента, которая выделит его на фоне остальных и будет его основным отличием. Причём, выделит позитивно.
Часто инсайты прячутся в сакральных линиях логотипов, в неймингах, в фирменных стилях. Но иногда всё не так просто, и приходится доставать совковую лопату, чтобы докопаться до истины. Например, для оптового интернет-магазина строительных материалов «Вертикаль», который был ориентирован на тех, кто с интернетами на «вы», инсайт — простота. Пользоваться им так же просто, как забить гвоздь!
Хорошие инсайты не дороге не валяются. И даже на поверхности-то не лежат. Приходится копать глубже — искать какую-то отличительную черту клиента, которая выделит его на фоне остальных и будет его основным отличием. Причём, выделит позитивно.
Часто инсайты прячутся в сакральных линиях логотипов, в неймингах, в фирменных стилях. Но иногда всё не так просто, и приходится доставать совковую лопату, чтобы докопаться до истины. Например, для оптового интернет-магазина строительных материалов «Вертикаль», который был ориентирован на тех, кто с интернетами на «вы», инсайт — простота. Пользоваться им так же просто, как забить гвоздь!
Этап 3. Брейншторм
Когда-то на этом этапе красовался прототип. Так мы решали задачу формы, а уж потом думали над дизайнерским содержанием: стильным, кайфовым, трендовым и с фишечками. Но если проекту требовался высокий уровень креативности, прототипы превращались в нечто усыпанное серыми блоками с надписью «тут будет креатив» и выглядели для клиента, как минимум, странно. Как максимум — вызывали возмущение «А на кой чёрт я за это деньги платил?!».
Поэтому сначала мы решили, что для проектов с креативностью 20−50% будет свой процесс: прототип → референсы → брейншторм → дизайн. Для тех, где нужно больше креатива, по-другому: референсы → брейншторм → скетч и мудборд (визуальный бриф) → прототип → дизайн.
Но вскоре стало ясно: когда прототип идёт перед брейнштормом, есть конфликт. С одной стороны, дизайнер должен не просто дизайнить, но и опираться на аналитику. И ему проще работать, если уже есть прототип (хотя есть риск скатиться в его «раскрашивание»). С другой, — прототип без фишек от дизайнера не такой крутой, как с ними.
Выход — брейншторм перед прототипом для всех проектов. На него приходят и дизайнер, и аналитик, и менеджер проекта, и даже —арт-директор. Польза в том, что дизайнер и аналитик работают сообща: вместе генерируют идеи и создают каркас проекта: аналитик готовит общий большой прототип, а дизайнер — промо-блок, где креатив можно показать графически.
Но вскоре стало ясно: когда прототип идёт перед брейнштормом, есть конфликт. С одной стороны, дизайнер должен не просто дизайнить, но и опираться на аналитику. И ему проще работать, если уже есть прототип (хотя есть риск скатиться в его «раскрашивание»). С другой, — прототип без фишек от дизайнера не такой крутой, как с ними.
Выход — брейншторм перед прототипом для всех проектов. На него приходят и дизайнер, и аналитик, и менеджер проекта, и даже —арт-директор. Польза в том, что дизайнер и аналитик работают сообща: вместе генерируют идеи и создают каркас проекта: аналитик готовит общий большой прототип, а дизайнер — промо-блок, где креатив можно показать графически.
Прототип, созданный аналитиком и дизайнером совместно
Перед брейнштормом дизайнеры готовятся: накидывают идеи и предложения, могут что-то чиркать и рисовать на бумажках. Сам брейншторм состоит из двух этапов:
Основное правило — на этапе сбора идей не критиковать их. Предложил кто-то на сайте производителя патронов космолёт на главной — пусть. Пришла идея для бренда натуральной косметики разложить продукты как суши на голой женщине — эмм… ну хорошо. Чем больше идей, тем проще выбирать жизнеспособные на втором этапе. И возможно, какие-то из них после получится смиксовать или дополнить другими. Особенно, если проект требует скетча перед прототипом.
Идеальный результат брейншторма: готовые фишка проекта и идея анимации (какие элементы и как именно себя должны вести). На случай ну очень креативного проекта — результатом может быть ещё скетч (карандашный рисунок задумки).
- генерация и сбор всех возможных идей;
- отбор жизнеспособных идей.
Основное правило — на этапе сбора идей не критиковать их. Предложил кто-то на сайте производителя патронов космолёт на главной — пусть. Пришла идея для бренда натуральной косметики разложить продукты как суши на голой женщине — эмм… ну хорошо. Чем больше идей, тем проще выбирать жизнеспособные на втором этапе. И возможно, какие-то из них после получится смиксовать или дополнить другими. Особенно, если проект требует скетча перед прототипом.
Идеальный результат брейншторма: готовые фишка проекта и идея анимации (какие элементы и как именно себя должны вести). На случай ну очень креативного проекта — результатом может быть ещё скетч (карандашный рисунок задумки).
Этап 4. Мудборд
Мудборд по-другому — визуальный бриф: подборка примеров готовых сайтов и элементов в разных графических стилях. Здесь обязательно будут сайты-референсы от клиента и из агрегации требований, тренды, интересные варианты из смежных отраслей и из совсем других сфер, где есть прикольные фишки и идеи. Тут же будут разные виды иконок, шрифтов элементов интерфейса и форм. Иногда — примеры графического контента.
Когда-то мудборд мы тоже делали после прототипа. Но оказалось, что если их поменять местами — всем будет сплошная выгода: и клиентам, и дизайнерам, и менеджеру, который мечется меж двух огней.
Кристина
Дизайнер
Сделать мудборд раньше попросили мы — дизайнеры. Так мы понимаем, что заказчику хочется видеть в результате на реальных примерах. Заказчики часто бывают далеки от веба, и им проще на примерах натыкать желаемое. И на мудборде мы видим, как клиент видит структуру и дизайн у себя в голове. После демонстрации мудборда уже есть понимание будущего проекта, ясно, что заказчику зайдет/не зайдет. И прототип уже рисуется не шагами в темноте, а с задумкой на конкретный дизайн.
Другой плюс такой схемы — некое удобство для ситуаций, когда разные дизайнеры включаются в проект. Даже если прототип нарисую я, а дизайн главной будет рисовать кто-то другой, то у него уже будет согласованная база из хотелок по декору и структуре. И ему не придётся изощряться в поисках решений, ведь всё уже продумали.
Другой плюс такой схемы — некое удобство для ситуаций, когда разные дизайнеры включаются в проект. Даже если прототип нарисую я, а дизайн главной будет рисовать кто-то другой, то у него уже будет согласованная база из хотелок по декору и структуре. И ему не придётся изощряться в поисках решений, ведь всё уже продумали.
Владимир
CEO & Founder
Последние изменения в процессе — мы стали делать мудборды до прототипирования (и даже иногда до агрегации требований). Причина в следующем: до прототипирования мы хотим собрать идеи оформления блоков, что бы прототип был не просто набором квадратиков, но уже обыгрывал какие-то интерейсные ходы. Бывает, что итеративно на проекте возникает два или три мудборда (до прототипа, после прототипа) постепенно уточняя требования и идеи. Схема рабочая, хотя и трудоёмкая. От ситуаций «Всё, что вы мне показываете, — не нравится, а что нравится — не скажу», естественно, не спасает, но таких в последние годы давненько не было.
Этап 5. Прототип
Мы долго хранили верность Axure — в этой проге было достаточно функционала, чтобы не перегружать прототипы красивостями, и при этом делать их функциональными: можно было кликать на раскрывающиеся списки, переключаться между страницами, тыкать в какие-то простенькие интерактивности. Клиентам нравилось. И удавалось избежать «эффекта утёнка», когда заказчик влюблялся в прототип с первого взгляда, а потом страдал, что крутой макет на него не очень-то похож (вообще-то 100%-ного сходства и не должно быть).
Теперь Figma — наша новая любовь, и прототипы рисуются там: те же плюшки с кликами, вложенностью и переходами внутри страниц, только выглядит всё это куда круче.
Теперь Figma — наша новая любовь, и прототипы рисуются там: те же плюшки с кликами, вложенностью и переходами внутри страниц, только выглядит всё это куда круче.
Этап 6. Дизайн главной
Собственно, этот этап — это тот самый момент магии, где дизайнер, складывая все собранные ингредиенты (аналитику, референсы, идеи, скетчи и прототип) в свой волшебный котелок, на выходе получает макет, который влюбляет в себя с первого взгляда. Ну, или со второго :)
Евгений
Арт-директор
У дизайнеров бывает, что как-то не прёт, да. Муза не приходит. Но тут, скорее, личная лень, раздолбайство или похмелье :) Во всех остальных случаях — всё решаемо: есть задача, есть какие-то референсы-прототипы и вот это вот всё. Садись и работай. Выруби ВКонтакт и Ютубчик — и херачь :)
В особенно сложных проектах, где креативная составляющая особенно важна, брейнштормов может быть несколько: один — перед созданием мудборда, второй — перед прототипированием, третий — перед этапом дизайна.
Этап 7. Внутренняя приёмка
На заводах есть специалисты службы контроля качества — они берут экземпляры из свежей партии и проверяют их на пригодность. В Сибирикс такая приёмка тоже есть — и зовётся внутренней. Проводит её менеджер проекта. Присутствуют дизайнер проекта, арт-директор, аналитик и какое-то количество других менеджеров.
Как обычно выглядит внутренняя приёмка
Целей у приёмки несколько:
- отрепетировать презентацию макета для заказчика и потренироваться отвечать на вопросы (особенно актуально для молодых руководителей проектов, которым очень страшно);
- убедиться, что макет соответствует или превосходит уровень макетов студии;
- получить конструктивную критику и доработать макет, презентацию и саму её подачу;
- отсмотреть презентацию незамыленным взглядом на предмет опечаток, ошибок или лишних элементов :)
Бывает, что после внутренней приёмки макеты существенно меняются
Для проведения внутренней приёмки в студии есть чек-лист — по ходу пьесы кто-то ответственный помечает, всё ли с ним сходится. А сама приёмка проходит обычно как-то так:
Результат
Всего-то 7 шагов, и макет готов предстать перед заказчиком во всей красе. Это отдельная большая презентация командой проекта по Skype или лично: рассказываем предысторию проекта, кратко проходимся по предыдущим этапам (агрегации, мудборду, прототипу), объясняем выбор шрифтов и цветов, говорим о трендах, а следом — презентуем основную и альтернативную версии.
Если на презентации с клиентом всё пройдёт отлично, дизайнеры приступят к отрисовке внутренних страниц. Если будут возражения — их нужно будет отбить, а годные правочки внести. И потом всё равно приступать к отрисовке внутренних :)
Так и или иначе, после дальнейшей вёрстки и программирования концепция дизайнера оживает. И в результате каждый из вас может зайти на сайт и покликать и потрогать мышкой то, что когда-то начиналось с анализа персон, а превратилось в настоящий, клёвый продукт, достойный наград. Как этот, например.
Если на презентации с клиентом всё пройдёт отлично, дизайнеры приступят к отрисовке внутренних страниц. Если будут возражения — их нужно будет отбить, а годные правочки внести. И потом всё равно приступать к отрисовке внутренних :)
Так и или иначе, после дальнейшей вёрстки и программирования концепция дизайнера оживает. И в результате каждый из вас может зайти на сайт и покликать и потрогать мышкой то, что когда-то начиналось с анализа персон, а превратилось в настоящий, клёвый продукт, достойный наград. Как этот, например.