Реализация
Урок 4
Лонгрид урока
Этап отрисовки макета также важен, как и генерация и отбор идеи. От техники исполнения зависит то, как воспримут вашу задумку. Даже если основная идея является примитивной, и нет больше времени на продумывание более глубокой, всегда можно сделать сильные макеты за счёт эстетики. Здесь вам помогут знания по типографике, вёрстке макета и навыки работы с цветом, понимание пользовательских привычек, умение работать с анимацией.
1. Общие принципы работы с макетами
Начнём с общих моментов. Во время отрисовки макета иногда будут посещать разные идеи по композиции. Конечно любой блок может иметь огромное количество вариаций. Не факт, что вы сможете реализовать идеальный вариант, так как время всегда ограничено. Да и идеального варианта может и не быть.
Принцип сравнения
Старайтесь не представлять у себя в голове точный вид того или иного блока. Лучше пробуйте, редактируйте. Но обязательно следуйте предыдущим этапам. Так вы в любой момент сможете вернуться к другим вариантам и их сравнить. Так, в Figma можно создать вкладку Master (а вообще назвать её как угодно) и перенести туда итоговые варианты.
Помним, что дизайн — это не математическая задача. Нет единственного правильного ответа. Видеть общее представление — хороший навык, но важно нарисовать и посмотреть, как это выглядит в реальности.
Важно
При создании макета можно увлечься визуальными приёмами и вовсе забыть о смыслах. Нужно помнить, что мы всегда должны отталкиваться от смыслов. Убедитесь, что в концепции правильно расставлены акценты, понятно, куда смотреть, и легко выполнять нужные и важные действия на будущем сайте.
Принцип приоритетности смысла
Ваши идеи не должны отвлекать от контента и мешать восприятию. Напротив, они должны создавать правильную последовательность просмотра.
Элементы с одним и тем же смыслом должны иметь одинаковую стилистику.
Это упрощает взаимодействие с сайтом, делает его логичным. Например, если кнопки на сайте имеют закруглённые углы и определённые внутренние отступы, то эти свойства переносим на остальные кнопки с похожими задачами. То же касается текстовых стилей, расстояний между блоками и т. д.
Под рифмой подразумевается поддержка решений. Используя стилистическое решение в одном месте, стоит поддержать его в других блоках и на других страницах. Так сохранится единообразие как на всём сайте, так и внутри одной страницы. Это не говорит о том, что каждый блок на странице должен содержать один и тот же идентификатор или одни и те же композиционные решения. В таком случае появится большое количество напряжения, а это приведёт к усложнению восприятия.
Принцип рифмовки
Предлагаем изучить этот сайт. Обратите внимание, как автор применяет идентификаторы, как их масштабирует и рифмует.
Поддерживая решения, мы делаем акцент на том, что они неслучайны.
С помощью контраста мы делаем акценты, создаём иерархию. Разделяем главное от второстепенного.
Принципы контрастности
С помощью чего создается контраст:
Контраст может быть выражен с помощью размера объекта. Чем больше объект, тем сильнее он привлекает внимание.
Размер
Пример: выделение доминантного товара в каталоге.
С помощью цвета и оттенка можно визуально отделить один объект от остальных. Чем ярче цвет — тем больше внимания. Акцентными цветами выделяют приоритетные блоки, кнопки, факты.
Цвет
Пример: выделение кнопки с помощью контрастного (отличного от фона и других объектов) цвета для приоритетного действия на странице.
С помощью воздуха создаём смысловые блоки. Объекты, связанные по смыслу, находятся ближе друг к другу. Прочитайте подробнее про теорию близости. Если по ней появились вопросы, то эту базовую информацию стоит освоить как можно скорее.
Воздух / расстояние
Пример: с помощью расстояния отделили блок «Кейсы» от блока «Клиенты». То есть получилось два смысловых блока.
Чем сложнее форма, тем она контрастнее. Чем контрастнее — тем более заметна. Много сложных форм рядом вызывают слишком большое напряжение для пользователя. Поэтому выделяем только самое главное.
Сложность формы
Достаточно выделить объект одним из способов или комбинировать в рамках концепции.
Необязательно делать заголовок крупным, красным и подчёркнутым, чтобы на него обратили внимание. Чем больше контрастов, тем больше внимания мы требуем от пользователя. Чем больше пользователь напряжен, тем быстрее он покинет сайт.
Начнём с того, что шрифты могут играть как глобально композиционную роль (то есть изменение текста может сломать композицию), так и функциональную роль.
Принцип применения шрифтов
Если в макетах планируются частые изменения контента, или сайт предполагает большое количество функциональных действий (например, сервис), то стоит подумать о том, чтобы использование шрифтов было максимально функциональным.
В таких случаях блок с текстом легко можно не редактировать, а визуально представить в форме прямоугольника.
Если макеты промо-назначения — то допустимо строить композицию на шрифтах (в случае уместности и соответствия настроению проекта).
Мы не ограничены шрифтами, которые предлагаются в гайдах. Всегда можно предложить дополнительный шрифт для основного наборного или пару. Главное, иметь стойкую аргументацию по поводу этих решений.
На каком этапе стоит применять сетки? В этом вопросе у разных дизайнеров может быть разное мнение и подходы. Мы склоняемся к тому, что внедрение сеток в чуть более поздних этапах делает их применение более практичным. То есть предпочитаем идти от общего к частному.
Принцип применения сеток
Проще говоря: наброски
формирование композиций
внедрение сетки.
формирование композиций блоков
блоков
Чем меньше сложных правил при использовании сеток, тем более понятным будет макет. Поэтому создавать правила ради правил не стоит. Задача сетки — сделать макет структурированным, выделить понятные направляющие линии, задать правила для композиций на всём сайте.
Важно
Иногда достаточно использовать только силовые линии.
Помните, что вы не ограничены предлагаемой в гайдах цветовой схемой. Анализируйте их. Возможно они устарели или их количество недостаточно для задач на сайте. Добавляйте оттенки основных цветов при необходимости, например, для состояний элементов.
Принцип работы с цветовой схемой
Параллельная работа с другими специалистами
В случае командной работы с другим специалистом важно тесно взаимодействовать. Если вы работаете, например, с иллюстратором, определите:
2.
как сильно она влияет на композицию блоков?
влияет ли она на сценарий проекта (например, в случае промо-проектов)?
какую роль играет иллюстрация?
Если у иллюстраций важная композиционная роль, и без неё сложно представить макеты — то необходимо нарисовать их до начала работы с макетами, либо создать общие скетчи и утвердить предварительно с заказчиком.
Если иллюстрации можно отложить на более поздний период, то в макетах допускаются временные референсы или скетчи. После этого, можно передать их иллюстратору, который будет ориентироваться на ваши наработки. Важно отметить места для иллюстраций и оставлять детальные комментарии по задумке/ анимации.
Пример нашего макета на этапе набросков с временным референсом, который показывает стиль будущей иллюстрации:
Если вы хотите использовать нетипичные решения, возможно, со сложной реализацией, обязательно «примеряйте» эти приёмы на разных блоках. Исходя их типов контента, вы поймёте, удачны ли решения, не будут ли они спорить с контентом, не усложнят ли они дальнейшую работу с сайтом, уместны ли они вообще.
Нестандартные решения
Не забудьте уточнить у разработчика: возможно ли реализовать вашу задумку в рамках имеющихся ресурсов.
Анимация
Часто анимация играет существенно важную роль в концепции. Она должна дополнять и поддерживать выбранную стилистику.
3.
Иногда простая вёрстка, дополненная анимацией, делает проект интересным и необычным. Анимация может стать основной идеей, если она по задумке в доминанте.
Не забудьте также про микроанимацию. Сейчас сложно представить любой интерфейс без неё.
Если ваши навыки не позволяют создать анимацию для демонстрации клиенту или команде, то всегда можно показать на референсах.
Мы предпочитаем Principle или Figmotion для создания анимации интерфейса. Эти инструменты помогут за короткое время продемонстрировать идею не на словах, а визуально.
Как случайно не сплагиатить чужую работу
Чаще всего плагиат — это результат ограниченного количества референсов или неточного понимания направления стилистики. Референс должен указывать не на сам шрифт, а на характер шрифтов, которые можно применить в проекте. Аналогично можно сказать и про цвет, геометрию, фото-контент.
4.
Также ошибочно считать, что референсы — это сайты конкурентов. Они важны только для исследования и анализа, но не должны влиять на дизайн проекта.
Рисуем в вашем рабочем пространстве Figma во вкладке Pages дизайн макета главной страницы Лиги А. Основываемся на результатах предыдущих домашек — аналитика, идея и стилистика. Используйте реальный контент сайта с этого прототипа.
Домашнее задание
Аша Саакян, ex-арт-директор Nimax UX/UI
Спикер:
