Глава 05

Дизайн
интерактивного
руководства

Разработка паспорта стандартов
по фирменному стилю

Практические шаги по созданию паспорта
стандартов фирменного стиля бренда в Фигме

Содержание

Регистрируемся в Фигме, готовим файлы, создаем страницы и фреймы
Создаем обложку, фрейм «Допуски», «Палитра», «Шрифты», «Изображения» и «Носители». Компонуем изображения и текст
Связываем фреймы с содержанием,
Отправляем файлы в облако, делимся проектом, укорачиваем ссылку,
1

Готовим материалы

Интерактивное руководство по фирменному стилю это многостраничный документ с содержанием и ссылками на файлы в облаке.

Регистрируемся в фигме
и создаём страницы

Итак, вы зарегистрировались в Фигме и вас просят выбрать шаблон или начать с чистого листа. Выбирайте Blank Canvas и создайте несколько страниц.

Мы будем разрабатывать интерактивное руководство из трех страниц. В Фигме каждая из страниц состоит из фреймов. Фреймы похожи на монтажные области (артборды) в Иллюстраторе, они позволяют выбрать размер для будущего дизайна и состоят из слоев (почти как лук!).

Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, изображения.
Нажмите «+» в панели слоев и добавьте страницу. Назовите страницу «Руководство». Повторите и создайте еще 2 страницы. Всего в руководстве будет 3 страницы: Компоненты, Руководство и Обложка. Нажмите и тяните вверх последнюю страницу «Обложка», чтобы сделать ее первой.
Почти готово! У вас сделана предварительная работа по созданию страниц, осталось дать название нашему документу. Нажмите на «Untitled» и переименуйте в «Руководство стиля».

Собираем файлы

Начните готовить файлы для создания руководства в векторном, текстовом и растровом формате. Файлов может быть несколько и они могут иметь разные форматы, поэтому создайте несколько папок, которые будут объединяться в проект. Я подготавливаю файлы в Adobe Illustrator, это очень удобно, так как можно скопировать файл в буфер обмена и вставить его в Фигму. Заметьте, Фигма понимает градиент и вектор, скопированные из буфера обмена между Иллюстратором, а вот шрифты вам придется конвертировать в кривые.

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

Откройте файл Адобе Иллюстратор, из которого вы хотите скопировать элементы. Выберите первый элемент, который требуется скопировать, и нажмите клавиши CTRL+C. Продолжайте копировать элементы из того же или другого файла, пока не соберете все, которые вам нужны.

Создаём первый фрейм

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

Перейдите на страницу «Руководство», чтобы создать первый фрейм (артборд). Каждый фрейм это отдельная монтажная область нашего руководства. Нажмите на клавиатуре клавишу «F» и создайте новый фрейм. Справа, в области «Инструменты» задайте ему размеры 1440 на 1000.
2

Делаем прототип
и шаблоны

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

Разрабатываем общий
шаблон фрейма

«Хороший дизайн эстетичен» — Дитер Рамс. Секрет хорошего дизайна в том, чтобы найти внутренний порядок между визуальными элементами.

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

В графическом дизайне лучше следовать процессу. Самые первые шаги в процессе называются макетированием. Главное на этом шаге — быстро создать прототип будущего функционала. Не переживайте, красоту наведем на следующем шаге.
Шаблон будущего макета: содержание (1), описание страницы (2) и область с переменным контентом (3)
Шаблон будущего макета: содержание (1), описание страницы (2) и область с переменным контентом (3)
Создадим шаблон фрейма. Задача шаблона — представить прототип, который ляжет в основу макетов всех фреймов. Прототип должен быть универсальным, адаптивным и простым. Чтобы решить эту задачку, надо понять, какие и сколько элементов будет на каждом фрейме (монтажной области).

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

Определяем визуальную иерархию

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

Упрощение позволяет понять иерархию элементов в дизайне и навести порядок. Иерархия помогает вести взгляд зрителя от объекта к объекту. Самые важные элементы в макете это крупный заголовок, который раскрывает тему фрейма и содержание документа.
Визуальная иерархия — это шаблон, в котором некоторые элементы имеют тенденцию «выделяться» или привлекать внимание сильнее, чем другие элементы.
Точка входа в композицию — это крупный заголовок, он выделен по массе. По отношению ко всем объектам он самый важный и первым привлекает внимание. В отличие от заголовка, содержание окружено пространством и это тоже привлекает внимание, но не так сильно, как заголовок. Заголовкам и контенту, несмотря на то, что они находится в середине фрейма, отводится роль замыкающего.

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

Создаём модульную сетку

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

С одной стороны сетка ограничивает дизайнера, с другой — организует элементы в композиции. С сеткой каждая страница вашего документа выглядит согласованно и упорядоченно. Сетки — это основа всех макетов и презентаций.
Настроим количество строк в модульной сетке. На странице «Руководство» нажмите «+» в блоке Layout Grid (макет сетки). В выпадающем меню выберите Rows (строки), измените значения в полях Count (количество) = 100, Gutter (средник) = 0, остальные значения оставьте по умолчанию.

Настроим Columns (колонки). В выпадающем меню выберите Columns, выставьте значения: Count = 16, Gutter = 20, остальные поля, такие как color (цвет), и оставьте по умолчанию.
Вывод: наша модульная сетка содержит 16 вертикальных колонок, средники между ними 20 пикс. и 100 горизонтальных строк, размер верхнего и нижнего поля не задаем, так как у нас не будет подвала и шапки.

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

Настраиваем компоненты

В Фигме есть замечательный функционал, который называется компоненты. Компоненты, как написано на странице «Помощь» — это элементы, которые вы можете повторно использовать в своих проектах.

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

Создаем компонент «Меню». Изучаем метод проектирования

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

Ранее, при разработке прототипа мы делили рабочий фрейм на три части: «Меню», «Описание страницы» и «Контент». Компонент «Меню» занимает одну четверть рабочего пространства.
Первый шаг — макетирование прототипа. Главное на этом шаге — быстро создать прототип будущего функционала. Не переживайте, красоту наведем на следующем шаге. Создадим шаблон меню. Заголовок «Содержание» = 24 пикс., основной текст = 18 пикс. Задайте широкие интервалы между пунктами меню, будет удобнее создавать взаимодействия между фреймами.
Следующий шаг — форматирование. Вместо рыбы в тексте ставим реальный текст и проверяем, насколько хорошо подходят размеры текста и заголовков. На этом шаге важно проверить, насколько хорошо прототип вписывается в нашу дизайн-систему и определить важность элементов в группе. Фаза — иерархия и форматирование (типографика) компонента.

Создайте по такому же методу компонент «Описание страницы» и «Блок текста».
Создаем блок, который будет использоваться практически на всех фреймах и объединим маркер, заголовок и подзаголовок. Компонент обозначает тему фрейма и имеет краткое описание. Маркер = 16 пикс. набран заглавными, заголовок H1 = 60 пикс., а подзаголовок = 30 пикс.

Тестируем созданный шаблон прототипа

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

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

Сымитируем в прототипе дизайн фреймов «Шрифты», «Цветовая палитра» и два варианта «Вступление». Будем считать, что наша сетка и шаблоны подходят под задачи и переходим к дизайну макета руководства.
3

Разрабатываем дизайн фреймов

«Хороший дизайн эстетичен» — Дитер Рамс. Секрет хорошего дизайна в том, чтобы найти внутренний порядок между визуальными элементами. Хороший дизайн сбалансирован и хорошо организован. Правильно примененные принципы дизайна делают макет визуально привлекательным и помогают лучше донести смысл послания. Принципы помогают поддерживать баланс от страницы к странице или от фрейма к фрейму.
Фрейм содержит видимые и невидимые визуальные элементы. Видимые элементы зрителю: содержание, маркер, заголовок 60 пикс., подзаголовок 30 пикс. и меняющийся контент. В меняющемся контенте размещаются изображения или текст.
Невидимые глазу элементы — это модульная сетка на 16 колонок по вертикали и сетка 100 линеек по горизонтали. И, конечно, границы фрейма.
Видимые элементы в руководстве фирменного стиля: меню и контент
Об авторе
Привет, я Евгений, арт-директор Креативной студии Бренда. Чтобы стать дизайнером, я учился в художественном училище, затем в Архитектурной академии. Сегодня я преподаю на кафедре дизайна в Новосибирском государственном университете архитектуры, дизайна и искусств (НГУАДИ).

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

brenda.ru | @e_borodin
Бородин Евгений
арт-директор
Учебник на год
Доступ в онлайн-учебнику по графическому дизайну на 6 месяцев.
1990
р.
Click to order
Ваш заказ
Total: 
Ваше имя
Ваш емайл
Ваш телефон
Ваш промокод