Предыдущий

Следующий

Лонгрид урока

Начало создания концепции

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

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

Оценка ресурсов

1.

Перед генерацией идей важно предварительно оценить ресурсы. Рассмотреть нужно и свои ресурсы/ ресурсы команды и ресурсы заказчика.

03

04

02

01

Уточните, можно ли предложить клиенту покупку шрифтов, изображений из стоков и других материалов.

Если в основе концепции будет лежать определённый фотостиль, уточните у клиента, готов ли он выделить ресурсы на проведение фотосессии. Аналогично и видео-материалами.

Обратите внимание на ресурсы по разработке. Это важно, если вы планируете предложить нестандартные механики или сложную анимацию.

Рассчитайте время, которое можно потратить на проект (или ознакомься со сметой).

06

Уточните, существуют ли технические ограничения, связанные с движком сайта или стеком технологий.

05

Выясните, есть ли ресурсы для подключения иллюстратора, фотографа или других специалистов.

Чем больше информации и выводов, тем больше фильтров. Чем больше фильтров, тем ближе мы к решению.

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

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

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

Мудборд

2.

Идеальным и важным дополнением к формулировке задачи является мудборд.

Мудборд — это доска, которая отражает общее настроение проекта, его характер.

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

Мудбордом мы делимся со всей командой. Здорово, если у вас есть возможность предварительно согласовать его с клиентом, чтобы убедиться, что вы движетесь в верном направлении.

Мудборд можно собрать в Figma, Readymag или Pinterest (или в других удобных программах). Мы, в веб-отделе Nimax, предпочитаем собирать в Figma, чтобы вся рабочая область была в одном месте.

Стайлборд

3.

После всех пройденных этапов, упомянутых ранее, вы можете приступить к сборке стайлборда. Он содержит уже конкретные стилистические примеры:

Референсов (ссылки на сайты)

Цветовых схем

Шрифтов, шрифтовых пар

Подходящих композиционных решений

Ссылок на анимацию, которая по настроению и динамике подходит для проекта

Примеры сеток и т.д.

Если вы работаете в команде или в связке с арт-директором, будет здорово, если будете ставить свои комментарии к референсам и скринам. При обсуждении референсов с клиентом, это тоже очень пригодится. Так вы покажете на чём именно стоит акцентировать внимание.

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

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

Если в основе лежит некая связывающая анимация, то необязательно сразу её реализовать. Достаточно собрать референсы или описать анимацию схематично.

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

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

Генерация идей

4.

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

Обычно дизайнер, который занимается проектом, набрасывает решения самостоятельно, после чего показывает арт-директору, чтобы получить обратную связь и дополнить новыми мыслями и решениями. Иногда в штурме участвует сразу вся команда. Это полезная практика и для дизайнера, отвечающих за концепцию (дополнительная практика презентации), и для команды, которая даёт обратную связь.

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

Участники штурма и синтез идей

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

А этот скрин показывает идею идентификатора через текст и референсы.

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

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

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

Ситуации

Клиент обратился с готовым фирменным стилем и брендбуком.

Ситуация №1

Изучить брендбук. Разобрать идентификаторы фирменного стиля, цвета, шрифты и стилистику в целом.

Решение

Проанализируйте:

Какие из идентификаторов брендбука уместно использовать в вебе? Какие из них будут противоречить задачам сайта и усложнять интерфейс? Как их можно развивать в динамической среде? Как они будут взаимодействовать с пользователем?

Цветовую гамму. Не обязательно использовать все цвета или ограничиваться тем количеством цветов, которые заданы в брендбуке.

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

При работе с брендбуком вы всегда можете предложить внесение изменений, если это аргументировано. Например, при работе над дизайн концепции для ВШМ СПбГУ мы предложили заменить шрифт на платный и обновили фирменные цвета на более яркие (для диджитала). Тем самым, интерфейс получился более свежим и живым.

Были цвета:

Стали цвета:

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

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

У клиента ограниченная информация. Например, только логотип/ фирменные цвета/ шрифты.

Ситуация №2

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

Решение

Клиент обратился без фирменного стиля, или фирменный стиль неактуален.

Ситуация №3

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

Решение

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

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

Чаще всего идентификатором на сайте мы называем встречающиеся иллюстрацию, 3D-графику, видео или фото.

Это некий отдельный объект, требующий идейной проработки специалистом. Чаще всего на этапе брендинга идентификатор ещё не создан или только эскизно намечен в мокапах. Поэтому мы рассматриваем его отдельно и подробно.

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

Что такое идентификатор?

5.

Все идентификаторы условно можно разделить на абстрактные и сюжетные.

Виды

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

Абстрактные

SPECIA — объединение петербургских цифровых агентств. Оно объединяет программистов с СММ-специалистами, юристов с контент-менеджерами, дизайнеров с руководителями агентств. Для каждого digital-направления мы нарисовали фигуру, которая её олицетворяет.

Иногда нужно вызвать у зрителя эмоции путём создания персонажа или рассказа целой истории. В таком случае лучше использовать сюжетные идентификаторы.

Сюжетные

Другой пример из нашей практики: для юридической компании Versus. legal мы придумали сюжетный 3D-идентификатор. В идее лежит процесс решения юридических кейсов: входящая задача, её трансформация и перипетии на пути к успеху. Процесс работы был такой: создание сцены в Cinema4D, рендер анимации в Octane, сжатие видео через Adobe Media Encoder в формате mp4.

Nimax School является отличным примером сюжетного идентификатора. Работа проходила таким образом: глобально мы придумали, что хотим сделать персонажей для Школы. Веб-дизайнер передал 3D-дизайнеру концепцию сайта с референсами на месте персонажей, а моя задача их додумать и реализовать.

И абстрактная, и сюжетная графика может быть исполнена по-разному.

Плоское или трёхмерное исполнение — это выбор стилизации. Этот выбор диктует вам бриф и полученная информация о задаче.

Важно

Пример сюжетной иллюстрации можно посмотреть на сайте POLA. Простые иллюстрации двигаются и реагируют на скролл. Такую анимацию можно сделать в After Effects и подготовить для веба в Lottie.

Ещё примеры абстрактных идентификаторов можно посмотреть в нашем кейсе БСПБ Private Banking и в кейсе медицинского исследовательского центра лекарственной терапии Uninova.

Иногда нужно усилить эмоциональное вовлечение зрителя. Тогда можно нарисовать сложные сюжетные фигуративные иллюстрации. Например, онлайн-сервисы любят использовать персонификацию, желая добавить человечности своему лицу. Вот примеры с веселыми человечками от Dropbox, Miro, Mailchimp и Asana:

Иллюстрации не обязательно рисовать самому, можно придумать идею, а потом заказать у иллюстратора. А можно найти готовые модели как, например, мы сделали с сайтом Copycat — это сервис для регистрации товарных знаков и защиты брендов от копирования. Мы взяли иллюстрации от Craftwork. Затем подкрепили рассказ о юридических особенностях работы с товарными знаками добродушными 3D-персонажами.

А если вы хотите сделать 3D интерактивным, то можно интегрировать готовые 3D-модели на сайт через сервис Spline или технологию WebGL.

Фото и видео как идентификатор лучше использовать в случае если это основное богатство вашего клиента, ему действительно есть что показать, и это важно показать.

Фото и видео как идентификатор

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

Как написано ранее, если у нас задуманы сложные рендеры, то можно вставлять в макет наброски или референсы. В нашей практике от веб-дизайнера 3D и моушн-дизайнеру обычно даётся идейное направление концепции сайта с референсами на месте будущего идентификатора. Вы уже видели конечный результат проекта Versus.legal. А вот так выглядел стилистический референс который получил 3D и моушн-дизайнер:

Отправная точка

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

Будем говорить вкратце.

Что такое майндмеп?

6.

Для майндмепа вам нужно создать карту ассоциаций, начинающуюся из центра вашей задачи/ проекта.

Важно

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

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

Что почитать

Если вам интересны другие методы, можете обратиться к этой книге.

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

Зачем нужен майндмеп?

Создавать карту можно группой у доски или в индивидуальном режиме на бумаге. Также могут быть удобны и онлайн-инструменты. Досками удобно делиться и работать группой удалённо. Ну, а ещё удобно вставлять референсы и ссылки на полезные материалы.

Как сделать майндмеп?

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

Как придумывать идеи с майндмепом?

У нас есть некоторая информация о клиенте/ брифе. Идея идентификатора должна вытекать из этих вводных данных. Это служит базой, от которой мы отталкиваемся при выборе типа идентификатора и его идеи. Способность генерировать хорошие идеи зависит от способности видеть взаимосвязи.

Берите мысль, идею, факт, переворачивайте их так и эдак, рассматривайте под разными углами и попытайтесь проникнуться их смыслом. Попробуйте соединить два факта. Задавайтесь вопросами: какая цель у этого идентификатора, зачем он нужен на сайте? В каком месте он будет находиться? Что находится до и после него? Какой текст стоит рядом? Что должен почувствовать человек и о чём подумать, увидев ваш идентификатор? Ждите второго дыхания, не останавливайтесь на первом же мыслительном тупике.

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

Что делать если не получается наштурмить идеи?

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

Как выбрать лучшую идею?

7.

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

Стратегические критерии

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

Эти критерии связаны с визуальным воплощением. Уже на этом этапе вы должны отдавать себе отчёт в том, насколько гибким и сложным в поддержке будет ваше решение.

Технические критерии

Гибкость — насколько вариативной и масштабируемой будет ваша графика. Один и тот же неповоротливый приём может быстро надоесть как вашему клиенту, так и его целевой аудитории.

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

Итак, вы придумали идею идентификатора, теперь нужно продумать как он будет появляться на сайте.

Не ограничивайтесь одной лишь базовой формой или одним состоянием идентификатора.

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

К примеру, на сайте Nimax Services основным идентификатором была анимированная 3D-композиция. Её идея заключалась в том, что сервисы — это многоуровневый механизм, состоящий из взаимосвязанных частей, больших и маленьких. Мы показывали композицию на первом экране целиком, а в остальных блоках использовали небольшие детали.

Масштабируемость образов

8.

Выполняйте это задание в рабочем пространстве Figma во вкладке Ideas. Скопируйте себе рабочее пространство, нажав на кнопку Duplicate. В следующих 2-х уроках мы будем работать только в нём.

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

Домашнее задание

Аша Саакян, ex-арт-директор Nimax UX/UI

Спикер:

Катя Бурцева, 3D, моушн- и графический дизайнер Nimax

Спикер:

Материалы урока

Презентация к уроку 3

Предыдущий

Следующий

Что еще посмотреть

Где нас найти