Что такое брендбук и зачем он нужен? 🤔

«Книга бренда» (от английского brand book) — документ в виде брошюры, журнала или буклета. Это основной помощник в поддержке единства фирменного стиля компании.

📌 Зачем он нужен

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

📌 Что туда входит

— Описание позиционирования компании. Миссии организации, ее ценности, УТП и так далее.

— Подробное описание целевой аудитории. Кто, зачем и почему приходит в компанию и взаимодействует с ней.

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

— Фирменный знак, логотип в разных вариантах.

— Фирменные цвета и шрифты. Здесь прописываются все шрифты, их размеры, а также вариации цветов.

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

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


📌 Как выглядит брендбук?

Мы подобрали несколько удачных примеров, которые можно изучать часами 👇

Apple (PDF)
Google (PDF)
Microsoft (PDF)

#плагин_фигма

Плагин для Figma Image palette был разработан на замену инструмента «Пипетка».

С ним не нужно извлекать цвета из изображений вручную, т.к. он автоматически формирует палитру из 5 цветов, пример на картинке ☝️

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

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

Установить плагин просто:

1) перейдите по ссылке
2) авторизуйтесь (войдите в систему или зарегистрируйтесь, если ещё этого не сделали)
3) нажмите install

Готово 👌
Плагин добавлен и готов к использованию.

Поделитесь в комментариях, какие плагины в фигме используете? 🙂👇

5 сайтов, которые должен знать каждый дизайнер❤️‍🔥

Скорее сохраняй себе, чтобы не потерять ⬇️

1. Mesh-gradients Бесплатная коллекция градиентов
2. Icons8.com 3D-иконки, иллюстрации
3. colormind.io Подбор цветовых сочетаний
4. lapa.ninja Для поиска референсов и вдохновения
5. awwwards.com Сайт конкурса профессиональных веб-дизайнеров и разработчиков

Топ-5 плагинов для Figma в 2022 году 💣

Здесь не будет банальных плагинов, вроде «как сделать текст по кругу», а только действительно актуальные плагины, которые сильно упростят работу 😉

1. Better font picker

Плагин помогает выбирать шрифты с предварительным просмотром.

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

▶️ Добавить плагин Better font picker

2. Batch styler

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

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

▶️ Добавить плагин Batch styler

3. Autoflow

Плагин позволяет создавать связи кривыми между объектами, артбордами и расположением в 2 клика.

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

▶️ Добавить плагин Autoflow

4. LilGrid

Плагин LilGrid стоит на страже порядка в вашем интерфейсе.

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

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

▶️ Добавить плагин LilGrid

5. TinyImage

Плагин TinyImage Compressor позволяет экспортировать ваши файлы в Figma и сжать их размер без потери качества.

Плагин оптимизирует JPEG, а также PNG без фона, автоматически преобразует множественную загрузку в ZIP-папку.

Правда у плагина есть ограничение на сжатие 15 файлов бесплатно, после придётся приобрести лицензию, но многие дизайнеры отмечают, что плагин сжимает файлы на 90% лучше, чем встроенные инструменты Figma.

▶️ Добавить плагин TinyImage

#плагин_фигма

Метафоры в дизайне

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

Если говорить простым языком, визуальная метафора — это сравнение с помощью картинки.

Банальные примеры из интерфейсов соц.сетей и приложений:

✏️ — редактировать
⚙️ — настройки

Да, это и есть метафоры 😉

Зачем использовать метафоры в веб-дизайне?

— отобразить сложные идеи в понятном виде
— создать знакомые образы
— вызвать эмоции
— побудить пользователя совершить определенное действие.

Главный принцип метафоры — простая и сразу считывается.

Как научиться их придумывать?

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

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

Проверь свою насмотренность 👀 Какой вариант дизайна лучше?

Спасибо за ваши ответы 😉🙌

✅ Правильный вариант Б.
Равное расстояние сверху и снизу блока выглядит аккуратно

Кради как дизайнер или как пользоваться референсами💥

Референсы можно разделить на несколько видов:

— Копирование стиля.

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

— Анализ конкурентов.

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

— Пример структуры.

С помощью этого типа референсов можно почерпнуть какие-то фишки, характерные черты тех или иных предметов, художественные приемы и так далее.

Зачем нужны референсы, не проще ли придумать всё самому?

Подбор референсов не означает, что вы не должны придумывать свою идею.

Главная задача таких примеров в другом — они помогают синхронизировать ожидания заказчика с представлениями исполнителя.

Как собирать референсы?

1. Делать скриншоты
2. Сортировать по разделам, например так 👇

— Первый экран
— Продукты
— О компании
— Форма
— Меню
— Карта
— Таблицы
— Контент

3. Анализировать и адаптировать

Где искать?

pinterest.ru
behance.net
dribbble.com

А теперь главный вопрос: как отличить «вдохновился» от «сплагиатил»? Пишите в комментариях 👇