Создание 10-шагового градиента между фирменными цветами

1. Проанализируйте два фирменных цвета

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

Если принципы бренда существуют только в старом PDF и вам нужно работать с сопровождающим текстом, конвертер PDF в Word может создать редактируемый документ. Преобразованные значения все еще должны быть сравнены с исходным файлом бренда, поскольку преобразование не проверяет, является ли цветовой код текущим или правильным.

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

Этот анализ предотвращает распространенную проблему: создание отполированного градиента из устаревшего цвета логотипа, не одобренного значения кампании или кода, скопированного из сжатого снимка экрана.

2. Подготовьте действительные HEX конечные точки

Color Mixer использует HEX значения в качестве конечных точек. Каждое шестизначное HEX значение начинается с символа хеша и содержит пары, представляющие красный, зеленый и синий. Например, #2563EB - это ярко-синий цвет, а #E11D48 - это яркий красно-розовый.

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

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

Дайте конечным точкам временные рабочие названия, такие как brand-start и brand-end. Избегайте называния их "левым" и "правым", потому что направление градиента может измениться позже. Цвета должны сохранять свою идентичность даже если градиент становится вертикальным, диагональным или радиальным.

3. Создайте 10-шаговый градиент

Откройте Color Mixer, введите Цвет A и Цвет B и установите количество шагов на десять. Создайте результат и скопируйте каждое отображаемое значение в рабочий документ в исходном порядке.

Перед именованием остановок посмотрите на полный переход как на полоску. Кажется ли он непрерывным, или один регион кажется внезапно прыгающим? Становится ли середина тусклой? Является ли одна конечная точка визуально намного сильнее другой?

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

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

4. Исследуйте середину и путь перехода

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

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

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

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

5. Удалите слабые или грязные остановки

Десять созданных остановок не означают, что все десять должны стать постоянными дизайн-токенами. Упражнение использует десять значений, чтобы сделать переход видимым. Финальная система должна сохранять только цвета, которые решают повторяющуюся проблему.

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

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

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

6. Создайте предсказуемую систему именования

Как только остановки были проверены, назначьте стабильные названия. Самая простая система нумерует цвета в соответствии с их позицией, такие как blend-01 до blend-10. Это сохраняет последовательность, но не описывает, как каждое значение должно использоваться.

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

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

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

7. Назначьте полезные роли дизайна

Последовательность градиента становится ценной, когда ее остановки можно последовательно переиспользовать. Назначьте роли на основе проекта, а не ищите искусственное использование для каждого цвета.

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

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

8. Протестируйте направление градиента и типографию

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

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

Добавьте реальный заголовок, абзац и кнопку к градиенту. Протестируйте белый, угольный и другие одобренные цвета текста в нескольких позициях. Цвет текста может быть читаемым над Цветом A и стать неудачным, когда фон приближается к Цвету B.

Декоративные текстовые эксперименты можно исследовать с помощью генератора причудливого текста, но Unicode-стилизованный текст не должен заменять правильную типографию в важных заголовках, навигации или доступном веб-контенте. Используйте его только для ограниченного творческого исследования и сохраняйте финальное сообщение читаемым.

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

9. Внедрите градиент в CSS

Как только направление и остановки одобрены, создайте веб-версию, используя CSS. MDN определяет linear-gradient() как CSS функцию, которая создает прогрессивный переход между двумя или более цветами вдоль прямой линии.

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

Сплошная background-color обеспечивает резервный вариант. Выбранные остановки градиента размещены намеренно, а не добавляются все десять значений автоматически. Использование меньшего количества остановок в CSS не делает десятиступенное исследование недействительным, оно показывает, что процесс рецензирования определил значения, необходимые для финального эффекта.

CSS-Tricks предоставляет подробное руководство по CSS градиентам охватывающее направления, цветовые остановки, радиальные градиенты, повторяющиеся градиенты и связанные шаблоны реализации.

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

10. Протестируйте, задокументируйте и экспортируйте систему

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

Ищите видимую полосатость, слабый контраст, неожиданные грязные области и промежуточные цвета, которые кажутся не связанными с конечными точками. Также протестируйте статическое экспортированное изображение, потому что социальные платформы и программное обеспечение для презентаций могут сжимать или обрабатывать его иначе, чем фон CSS в реальном времени.

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

Если каждая страница спецификации подготовлена как JPG, конвертер JPG в PDF может объединить их в один упорядоченный документ. Откройте экспортированный PDF и сравните цвета с исходным дизайном перед их отправкой клиенту или команде разработки.