Превратите случайный цвет в направление дизайна

1. Напишите однострочную задачу проектирования

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

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

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

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

2. Создавайте цвета без бесконечной прокрутки

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

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

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

Запишите выбранный цвет и номер поколения в ваши заметки. Это дает упражнению четкое начало и предотвращает превращение проекта в бесконечную коллекцию несвязанных снимков экрана.

3. Запишите цвет в используемых форматах

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

Руководство MDN по значениям цветов CSS объясняет, как цвета могут быть представлены с использованием шестнадцатеричной нотации, rgb(), hsl() и более новых функций цветов.

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

4. Изучите его свойства, а не его название

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

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

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

5. Создайте настроение, не полагаясь на стереотипы цветов

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

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

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

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

6. Создайте концепцию проекта для цвета

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

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

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

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

7. Переведите цвет в визуальные правила

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

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

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

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

8. Контролируйте, сколько цвета появляется

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

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

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

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

9. Добавьте нейтральные цвета и назначьте функциональные роли

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

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

Указания Google по ролям цветов в Material Design демонстрируют ценность назначения цветов в зависимости от цели, а не обращения с палитрой как с неструктурированной коллекцией образцов.

10. Создайте один реалистичный образец дизайна

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

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

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

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

11. Перенесите направление в CSS

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

:root {
  --color-page: #f7f7f4;
  --color-surface: #ffffff;
  --color-text: #1d1e20;
  --color-text-muted: #63666b;
  --color-primary: #7b4de3;
  --color-on-primary: #ffffff;
  --color-border: #d9d9df;
}

Создавайте состояния наведения, нажатия и выбора только после их тестирования внутри компонентов. Статья Smashing Magazine о упрощении палитр с помощью CSS color-mix() обсуждает, как контекстные вариации могут быть получены из существующих цветов темы.

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

12. Протестируйте и задокументируйте окончательное направление

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

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

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

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