Вводный
Урок 1
Лонгрид урока
Проблематика
Сейчас такое время, когда существует низкий порог входа в профессию веб-дизайнера. Связано это с тем, что инструменты, с помощью которых можно нарисовать макеты, упростились и стали более доступными. Каждый желающий может легко в них разобраться и собрать макет или даже сайт на конструкторе.
Ошибочно может показаться, что достаточно нарисовать аккуратный макет, чтобы решить дизайн-задачу проекта. Но ценность веб-дизайнера заключается в умении создавать полноценную концепцию, которая решит не локальную задачу в рамках одной страницы, а может быть масштабирована и использована на внутренних страницах проекта. И даже если сменится специалист, он поймёт, как и куда двигаться дальше при развитии проекта.
1.
2. Что такое концепция?
Концепция — это не макет, а визуальный вектор направления сайта, который включает в себя набор стилистических решений и связанных правил.
На этапе концепции мы занимаемся поиском:
цветовой гаммы
шрифтов
идей и смыслов
сетки и композиционных решений
фотостиля / видеостиля
идентификаторов
анимации
Благодаря концепции сайта, вся команда и клиент будут видеть общее направление и понимать, почему дизайн макетов получается именно таким. Концепция объединяет визуально все страницы сайта, создаёт общий ритм и помогает делать наполненные проекты.
Одна из важных задач дизайн-концепции — визуально привязать сайт к бренду. При взаимодействии с макетами пользователи должны испытать те же эмоции, ощущения, что были заложены при создании фирменного стиля. Говоря простым языком, мы внедряем фирменный стиль компании в интерфейсную среду. Также и фирменный стиль, отражённый на сайте, отвечает за имидж и узнаваемость бренда.
Slack с фирменными цветами в сочетании с геометрией и иллюстрациями
Узнаётся стиль New York Times, даже если закроем логотип
Спецпроект от Google, где стилистика узнаваема с первого экрана
Примеры
Спецпроект от Google, где стилистика узнаваема с первого экрана
Узнаётся стиль New York Times, даже если закроем логотип
Slack с фирменными цветами в сочетании с геометрией и иллюстрациями
Старайтесь анализировать сайты и обращать внимание на примеры, в которых удачно внедрён фирменный стиль компании.
3. Ситуации
Клиент обратился с готовым фирменным стилем и брендбуком.
Ситуация №1
Задача дизайнера заключается в изучении материалов, правильном использовании фирменных элементов, шрифтов, внедрении их на сайте, масштабировании.
Что делаем?
Важно анализировать имеющиеся материалы и корректно их использовать в динамической интерфейсной среде. Часто бывают ситуации, когда дизайнер использует элементы фирменного стиля, предназначенные для статичных поверхностей на макетах (печатной продукции) без изменений.
Допускается добавление новых цветов и элементов, если это необходимо для задач сайта. И наоборот — вовсе необязательно использовать все предложенные бренд-дизайнером элементы.
Предварительно стоит оценить: является ли брендбук актуальным, не устарел ли он?
У клиента ограниченная информация. Например, только логотип/ фирменные цвета/ шрифты.
Ситуация №2
Задача дизайнера заключается в правильном развитии идей, заложенных в логотипе (в случае их актуальности) с добавлением новых фирменных элементов. С одной стороны, это усложняет работу дизайнера интерфейса, но с другой стороны, даёт возможность размышлять и создавать новые визуальные образы, возможно, открывает границы для использования разных техник исполнения.
Что делаем?
Клиент обратился без фирменного стиля.
Ситуация №3
На плечи дизайнера возлагается наибольшая ответственность за визуальную «небанальность» макетов. Прежде чем перейти к отрисовке макетов, необходимо глубже погрузиться в гипотезы и касательно интерфейса в целом, и конкретных фирменных элементов, которые должны были присутствовать в фирменном стиле компании.
Что делаем?
В следующих уроках подробнее разберём этапы работы в таком случае и затронем создание фирменных идентификаторов, их типов и техники реализации.
Когда не нужна концепция?
4.
Если заказчик обратился за отрисовкой конкретной страницы для проекта, у которого уже разработана дизайн-система, то предлагать отдельно этап разработки концепции, конечно, не нужно.
Если вы понимаете, что в состоянии (есть ресурсы и достаточно знаний) улучшить имеющуюся дизайн-концепцию проекта, то можешь предложить клиенту ревью и анализ макетов.
Участники концепции
5.
У нас в команде Nimax назначается ответственный веб-дизайнер за концепцию проекта. Все остальные могут участвовать в штурме и давать обратную связь. Концепция обсуждается с арт-директором, который несёт ответственность за все проекты.
На обсуждениях концепций часто подключается менеджер, который больше взаимодействует с командой клиента и лучше понимает его задачи и комментарии.
Если в задумке дизайнера есть сложные и спорные механизмы, то стоит подключить разработчика или тимлида и проконсультироваться с ним насчёт дальнейшей реализации. Это особенно важно в тех случаях, когда есть оговорённые сроки разработки проекта.
6. Этапы создания дизайн-концепции
04
03
02
01
Отрисовка макетов
Презентация концепции
Штурм и синтез идей
Предпроектный аудит
Каждый из этих этапов подробнее разберём в следующих уроках.
С какого момента дизайнер готов к разработке концепции?
7.
Начинающие дизайнеры сконцентрированы на изучении базовых вещей. Например, знакомятся с Figma и Principle, изучают правила отступов и композиции, поведение пользователей на сайтах. У них ещё нет «насмотренности» и интуитивного понимания решений. Также при отсутствии опыта сайты-референсы и примеры проектов других дизайнеров могут восприниматься поверхностно, без возможности оценить качество этих работ.
Начинающий дизайнер, скорее всего, не справится с созданием дизайн-концепции с нуля. Даже если у дизайнера появится хорошая идея, могут возникнуть сложности с технической реализацией и подачей.
Но это не говорит о том, что он не может участвовать в создании концепции. Его участие в штурмах будет развивать способность генерировать идеи. Поэтому дизайнеров-стажёров мы часто подключаем на общие штурмы и генерацию гипотез.
Отличной тренировкой для джунов — развитие имеющихся концепций, то есть отрисовка страниц согласно уже заданной стилистики. Если нет конкретных проектов, то можно взять любые понравившиеся шоты из Dribbble и попробовать нарисовать страницу, преследуя стилистику, заданную в блоках на шоте.
8. Как прокачаться?
На первом месте — просмотр проектов. Обязательно анализируйте то, что смотрите с разных точек зрения:
Просмотр и анализ
Сетка проекта, силовые линии
Из чего состоит стилистика проекта? В чём базовые идеи?
Какие эмоции вызывает проект?
Почему дизайнер выбрал такие шрифты? В чём их роль?
Как рифмуются элементы и блоки?
Какие очевидные правила в дизайне страниц?
Микроанимация
Акценты
Смотрите на страницу 404. Обязательно обращайте внимание на страницу «о компании» (или другие внутренние страницы). На них можно увидеть, как раскрывается основная идея, отражённая на главной странице, во внутреннем контенте.
Техники исполнения
9.
Развивайте технические навыки. Вовсе необязательно профессионально рисовать 3D-модели или работать с реализацией анимации с помощью кода. Но важно знакомиться с этими техниками, понимать, какие они дают возможности.
Следите за новыми плагинами и инструментами. Смотрите дайджесты и разборы анимаций на сайтах.
Следите за проектами из смежных областей. Например, брендинг, графический дизайн, моушн-дизайн, шрифтовой дизайн. Смотрите работы иллюстраторов.
Смежные области
Аша Саакян, ex-арт-директор Nimax UX/UI
Спикер:
