В статьях, посвященных созданию дизайн-проектов, будь то разработка пользовательских интерфейсов сайтов и мобильных приложений, или планирование интерьера, не раз говорится о том, что выбор цветовой схемы является ключевым аспектом формирования поведенческого фактора. Здесь вроде бы все понятно! Главный вопрос состоит в том, как правильно составить цветовую схему, чтобы она была гармоничной. Я расскажу, как создать цветовую схему для вашего проекта, руководствуясь правилом 60/30/10.
Правиле выбора цветовой схемы 60/30/10 гласит, что 60% должен занимать главный цвет, 30% вторичный и 10% — это различные акценты. Теперь, посмотрим, как это работает на практике.
Венесуэльский дизайнер Дэн Ромео придумал для правила 60/30/10 свое руководство по созданию цветовой схемы для сайтов и мобильных приложений так, чтобы сочетание цветов в интерфейсе смотрелось гармонично и сбалансированно. Постараюсь объяснить это наглядно.
Шаг 1. Выберите главный цвет
Откройте графический редактор и нарисуйте любую фигуру. Определитесь с главным цветом вашего проекта, помня при этом, какой психологический посыл несет в себе тот или иной цвет и в проектах какой тематики выбранный цвет будет смотреться гармонично.
Залейте фигуру выбранным цветом.
Шаг 2. Выберите вторичный цвет, изменив главный.
Продублируйте вашу фигуру и измените в палитре цветов ее значение HSB (Тон/Контраст/Яркость) следующим образом: Параметр S (Saturation) выставите в значение 5-10 поинтов. Параметр B (Brightness) – 90-100 поинтов. Получится следующее.
Шаг 3. Выберите цвет для акцентов.
Опять продублируйте фигуру с главным цветом и измените в палитре цветов ее значения HSB следующим образом: Уменьшите значение H (Hue) на 30-40 пунктов, и увеличьте B (Brightness) на 5-10 пунктов.
Таким образом получается цветовая схема для вашего проекта, выстроенная по правилу 60/30/10.
Вы можете менять порядок цветов по вашему усмотрению.
Примеры использования цветовой схемы, созданной по системе 60/30/10 при разработке интерфейса приложения
Создание цветовой схемы – это ответственный момент в разработке всего проекта и к нему, нужно относиться ответственно. Предложенная Дэном Ромео последовательность действий достаточно демократична и консервативна. По сути, она близка к монохромной цветовой модели, которая позволяет сконцентрироваться на деталях, что очень важно при разработке дизайна интерфейсов и к аналоговой, которая приятна глазу и часто встречается в природе, что так же помогает создать дружественный интерфейс.
Если же вы хотите внести «изюминку» в свой проект – добавьте в качестве контрастного – цвет, выбранный согласно другой цветовой схеме, например, комплементарной, сплит-комплементарной, триадной и т.д.
Например, наша схема с контрастным цветом, выбранном согласно тетрадной схеме, выглядит следующим образом:
Пример использования цветовой схемы.
Такое правило подойдет не только при разработке интерфейсов, но и для дизайна интерьеров.
Так что пробуйте и экспериментируйте!