Здравствуйте! На прошлом уроке мы научились «читать» чужие дизайны — анализировать их композицию и стиль, разбирая их на составные части. Вы получили набор принципов, который позволяет понять, почему одни интерфейсы работают, а другие нет. Это был важный шаг от интуитивного восприятия к осознанному анализу.
Сегодня мы переходим от анализа к синтезу. Наша цель — научиться подбирать цветовую палитру для интерфейса с помощью специализированных инструментов. Ваш опыт в графическом дизайне и художественной школе дает вам прекрасное чувство цвета. Теперь мы дополним эту интуицию системным подходом, который принят в продуктовом дизайне. Мы научимся не просто выбирать красивые цвета, а строить функциональную, масштабируемую и гармоничную цветовую систему, которая станет основой вашего дизайна.
Часть 1: Анатомия цветовой палитры в UI
В графическом дизайне и искусстве вы наверняка много работали с классическими цветовыми схемами: комплементарной, аналогичной, триадной и так далее. Эти принципы остаются актуальными и в UI-дизайне, но здесь на первый план выходит функциональность цвета. Палитра в продуктовом дизайне — это не просто набор гармонирующих оттенков, а четко структурированная система.
Давайте быстро освежим в памяти классические схемы и посмотрим, как они применяются в интерфейсах.
6 Types of Color Palettes: Examples + Tips - Figma
В этой статье от Figma кратко и наглядно описаны шесть основных типов цветовых схем.
Прочитайте разделы «Six types of color palettes» и «Color palette examples». Обратите внимание не только на определения, но и на рекомендации по применению: для каких типов продуктов (банкинг, гейминг, велнес) какая схема подходит лучше всего. Это поможет связать ваш существующий опыт с задачами продуктового дизайна.
Теперь, когда мы вспомнили основы, давайте разберем структуру палитры, специфичную для UI. Любая хорошо продуманная цветовая система в интерфейсе состоит из нескольких ключевых категорий.
The Ultimate Guide to Creating Color Palettes in Figma ...
Эта статья от Untitled UI подробно описывает функциональные компоненты цветовой системы, которые используются в большинстве дизайн-систем.
Прочитайте раздел «What is a color palette?». Сосредоточьтесь на четырех ключевых ролях цвета: Neutral colors (Нейтральные цвета): Это основа всего. Серые оттенки используются для фона, текста, разделителей и полей ввода. Brand colors (Брендовые/основные цвета): Цвет бренда, который используется для интерактивных элементов — кнопок, ссылок, переключателей. Accent colors (Акцентные цвета): Дополнительные цвета, привлекающие внимание к второстепенным элементам, например, тегам или статусам. Feedback colors (Семантические цвета): Сообщают пользователю о статусе операции: успех (зеленый), ошибка (красный), предупреждение (желтый). Этим цветам мы посвятим следующий урок, но важно уже сейчас понимать их место в общей системе.
Часть 2: От одного цвета к целой системе
Главное отличие продуктового подхода от классического — это создание не просто палитры, а шкалы оттенков для каждого основного цвета. Обычно она состоит из 9–12 оттенков, от самого светлого (для фона) до самого темного (для текста), с промежуточными вариантами для разных состояний элементов. Это позволяет гибко управлять цветом и обеспечивает консистентность.
Такую шкалу можно создать вручную или с помощью инструментов.
Метод 1: Ручной подход с HSL
Чтобы полностью контролировать процесс и понимать, как устроен цвет, полезно уметь создавать шкалу вручную. Для этого в Figma используется цветовая модель HSL (Hue, Saturation, Lightness — Тон, Насыщенность, Яркость). Стартуя с базового брендового цвета, вы создаете более светлые и темные варианты, изменяя в основном параметр Lightness.
Давайте изучим этот процесс пошагово.
The Ultimate Guide to Creating Color Palettes in Figma ...
Этот раздел той же статьи детально описывает ручной метод создания цветовой шкалы.
Прочитайте раздел «How to create your color palette in Figma». Ключевые шаги: Определите базовый цвет: Это будет центральный оттенок вашей шкалы (например, brand-500). Задайте крайние точки: Создайте самый светлый (brand-25) и самый темный (brand-950) оттенки, регулируя яркость (Lightness). Заполните пробелы: Создайте промежуточные оттенки, стремясь к плавному переходу. Этот метод требует практики, но дает вам полный контроль над результатом. Метод 2: Автоматизированный подход с помощью инструментов Создание палитры вручную — трудоемкий процесс. К счастью, существует множество инструментов, которые делают это за вас. Онлайн-генераторы Такие сервисы, как coolors.co, позволяют быстро генерировать гармоничные сочетания. Вы можете «зафиксировать» понравившийся цвет и нажимать пробел, пока не найдете подходящие ему в пару. Посмотрите, как это работает на практике.
Этот метод требует практики, но дает вам полный контроль над результатом.
Метод 2: Автоматизированный подход с помощью инструментов
Создание палитры вручную — трудоемкий процесс. К счастью, существует множество инструментов, которые делают это за вас.
Онлайн-генераторы
Такие сервисы, как coolors.co, позволяют быстро генерировать гармоничные сочетания. Вы можете «зафиксировать» понравившийся цвет и нажимать пробел, пока не найдете подходящие ему в пару. Посмотрите, как это работает на практике.
UI/UX Color Scheme Tutorial with Coolors.co
В этом видео дизайнер показывает, как использовать сайт Coolors.co для быстрого подбора палитры и ее применения в макете Figma.
Смотрите фрагмент с демонстрацией работы с Coolors.co. Обратите внимание на процесс: Генерация и «заморозка» цветов. Копирование HEX-кодов. Применение цветов к элементам интерфейса в Figma для быстрой проверки.
Плагины для Figma
Еще более удобный способ — использовать плагины прямо в Figma. Они позволяют создавать целые цветовые системы в один клик.
Creating a Color System in Figma | 3 Easy Methods
Автор этого видео показывает два мощных плагина для автоматической генерации цветовых систем.
Посмотрите два фрагмента: Foundation Color Generator (метод с плагином): вы задаете основные цвета, а плагин генерирует полную шкалу для каждого, сразу создавая стили и документацию. Material Theme Builder (метод с Material): вы можете загрузить изображение (например, из вашего мудборда), и плагин сам извлечет из него цвета и построит на их основе полную систему в стиле Material Design.
Часть 3: Организация и применение палитры в Figma
Создать палитру — это полдела. Теперь ее нужно правильно организовать и применять.
Правило 60-30-10
Это простое правило из дизайна интерьеров отлично работает и в UI. Оно помогает сбалансировать цвета в макете:
- 60% — доминирующий цвет (обычно нейтральный, фон).
- 30% — вторичный цвет (часто брендовый, для интерактивных элементов).
- 10% — акцентный цвет (для привлечения внимания к самым важным деталям).
6 Types of Color Palettes: Examples + Tips - Figma
Вернемся к статье от Figma, чтобы изучить это простое и эффективное правило.
Прочитайте раздел «How to choose a color scheme for your design», уделив особое внимание подпункту «Use the 60-30-10 rule».
Создание стилей цвета (Color Styles) в Figma
Чтобы палитру было удобно использовать, ее необходимо сохранить как стили. Это позволяет применять цвета ко множеству объектов и менять их во всем проекте в один клик. Для организации стилей используется именование с помощью /, например, Primary/Blue-500 или Neutral/Gray-100.
Посмотрим, как это делается.
Creating a Color System in Figma | 3 Easy Methods
В этом видео показан процесс создания цветовой шкалы и ее последующая организация в глобальные стили Figma.
Посмотрите фрагмент создания палитры и стилей. Сосредоточьтесь на части, где автор: Создает шкалу оттенков для каждого цвета (manual creation). Добавляет каждый цвет в стили с помощью панели справа (adding global styles). Использует именование с /, чтобы сгруппировать стили в папки (Main/Primary, Main/Accent).
Заключение
Сегодня мы сделали большой шаг к системной работе с цветом. Вы научились переводить свою интуицию и насмотренность в структурированный и воспроизводимый процесс, который является стандартом в продуктовом дизайне.
Ключевые выводы:
- Палитра в UI — это система: Она включает нейтральные, брендовые, акцентные и семантические цвета.
- Работайте со шкалами: Вместо отдельных цветов создавайте шкалы оттенков (например, от 50 до 950), чтобы обеспечить гибкость и консистентность.
- Используйте инструменты: Онлайн-генераторы (
coolors.co) и плагины Figma (Foundation Color Generator,Material Theme Builder) значительно ускоряют работу. - Организуйте палитру в Figma: Сохраняйте цвета как стили и группируйте их с помощью
/для удобства управления. - Соблюдайте баланс: Используйте правило 60-30-10 для гармоничного распределения цветов в интерфейсе.
Ваши сильные визуальные навыки — это огромное преимущество. Добавив к ним эти системные методы, вы сможете создавать не только эстетичные, но и функциональные, продуманные цветовые решения для цифровых продуктов.
Что дальше?
Мы создали основу — нашу цветовую палитру. В следующем уроке мы сосредоточимся на одной из самых важных ее частей и научимся применять семантические цвета (success, error, warning, info). Мы разберем, как с помощью цвета общаться с пользователем, сообщать ему о статусах системы и направлять его действия.