Какие цвета хорошо сочетаются между собой? Сколько оттенков можно включить в веб-дизайн? Как подобрать цветовую схему для сайта, чтобы потом её можно было использовать и в социальных сетях, и в печатных буклетах? Ответы на все эти вопросы нам даёт теория цвета.
Эта наука рассказывает о фундаментальных принципах создания визуальной гармонии в любых аспектах дизайна. Идеи теории цвета могут быть представлены с помощью различных диаграмм, треугольников, схем, однако главным инструментом комбинирования оттенков был и остаётся цветовой круг. Он позволяет выстраивать гармоничные соотношения оттенков на основе самых разных критериев: цветовой контраст, яркость, насыщенность, динамичность.
Автор книги «Современный веб-дизайн. Эпоха Веб 3.0» Юлия Сырых выделяет 2 вида гармоничного сочетания цветов:
Если вам нужны интенсивные оттенки для создания палитры сайта, ищите их в области наружной области цветового колеса. Ближе к середине круга располагаются более мягкие и приглушённые пастельные тона.
Визуально самым сильным является сочетание чёрного и белого. Это так называемые ахроматические цвета — свет и тьма, без каких бы то ни было красочных вкраплений. Однако, используя предельно лаконичную черно-белую схему, уникального и запоминающегося графического дизайна создать не удастся.
Можно попробовать также «первичную триаду»: чёрный + белый + красный. Сочетание получится стильным, гармоничным, но едва ли оригинальным. Таких сайтов пруд пруди. Чуть больше шансов на уникальность у комбинации чёрного и белого с каким-нибудь другим ярким хроматическим цветом. Но если вы действительно хотите выделиться из толпы, идите на риск и используйте нетривиальные цветовые схемы. Составить таковые поможет всё тот же цветовой круг.
Для получения стильной, гармоничной и визуально привлекательной палитры сайта нужно комбинировать цвета, которые взаимосвязаны между собой. Взаимоотношение между оттенками определяется их местом на цветовом круге и может быть разным.
Монохромная схема подразумевает использование разных оттенков одного и того же цвета. За счёт плавного перехода одного тона в другой такая палитра получается лёгкой, спокойной и ненавязчивой. Однако многим она может показаться скучной.
Аналоговая схема создаётся путём сочетания цветов, расположенных бок о бок на цветовом круге. Палитра выходит яркой, эффектной и в то же время лёгкой для зрительного восприятия. Соседствующие цвета имеют схожую длину световой волны, за счёт чего контраст получается сглаженным и гармоничным.
Комплементарная цветовая схема выстраивается по принципу комбинирования двух цветов, находящихся друг напротив друга на цветовом круге. Например: синего и оранжевого, красного и зелёного, фиолетового и жёлтого. Использование максимально контрастных по оттенку цветов позволяет создавать необычайно яркие, сильные и динамичные сочетания.
Если комплементарная пара нуждается в добавлении третьего и четвёртого оттенков, они избираются по аналоговому или монохромному принципу.
Сплит-аналоговый метод создания гармоничной палитры заключается в сочетании основного цвета с двумя соседними — окружающими его с обеих сторон на цветовом колесе.
Сплит-комплементарная схема комбинируется путём сочетания основного цвета с двумя ближайшими соседями противоположного ему по месторасположению на цветовом круге.
Для создания триадной цветовой схемы внутрь цветового колеса нужно поместить равносторонний треугольник. При любом повороте его углы будут указывать на три гармонирующие между собой цвета. Например: красный, синий и зелёный или оранжевый, фиолетовый и зелёный. Если использовать самые яркие оттенки этих цветов, палитра получится слишком броской. Для обеспечения мягкого контраста рекомендуется использовать приглушённые тона.
Если вам некогда или лень вручную комбинировать цвета для сайта, вы всегда можете воспользоваться инструментами автоматической генерации цветовой палитры.
Вот ссылки лишь на некоторые из них:
Напоследок приведём несколько дополнительных советов по оперированию цветами в дизайне.
Не секрет, что цвета делятся на тёплые и холодные. Первые на цветовом круге располагаются справа, вторые — слева. Если вы хотите создать энергичный и эмоциональный дизайн, отдайте предпочтение тёплым оттенкам красного, оранжевого и жёлтого цветов. Если же вам больше по вкусу сдержанные и спокойные цветовые схемы, выбирайте холодные краски с левой половины круга: бирюзовые, зелёные, розовые, фиолетовые и т.д.
Ещё не определились с выбором? Тогда сравните примеры использования холодной и тёплой палитры компаниями Benefit Cosmetics и Corona. Розовый в Инстаграме женского бренда создаёт ощущение лёгкости и свободы, в то время как жёлтые тона фото в аккаунте Corona формируют атмосферу тепла и уюта.
Не стоит использовать слишком много оттенков в дизайне сайта — лучше ограничиться двумя-четырьмя. При этом только один из цветов может быть ярким и насыщенным, остальные не должны особо выделяться. Вспомогательные оттенки призваны сглаживать контрасты и создавать гармонию.
Убедитесь, что выбранные вами цвета сочетаются с центральными элементами вашего дизайна: логотипом, изображением в шапке или фото на главной странице.
Для создания визуальной гармонии цвета текста следует подбирать в соответствии с цветами фонового изображения. Нижеприведённый скриншот демонстрирует пример идеального сочетания розового шрифта с точно таким же по цвету кустарником на фото.
Существуют проверенные варианты цветовых схем для создания сайтов определённой тематики. Например, для оформления страницы женского бутика в социальных сетях отлично подойдут 2 нижеприведённые палитры пастельных оттенков. Если, к примеру, у вас мужской деловой проект, исследуйте типовые варианты, представленные в интернете, и найдите оптимальное решение.
Последовательное применение одних и тех же фирменных оттенков обеспечивает узнаваемость компании среди целевой аудитории. Взгляните, как бренд Tiffany умело использует свой знаменитый бирюзовый цвет на странице в Facebook.
Можете позволить себе небольшие вариации — где-то использовать более тёмную версию оттенка, где-то, наоборот, более светлую — но ни в коем случае не отказывайтесь от своих коронных цветов.
Выбранная цветовая схема должна распространяться не только на фоновое изображение и текст, но и на каждый элемент веб-дизайна: ссылки, кнопки, формы, таблицы, иконки, маркированные списки и т.д.
Если вы никак не можете определиться с цветами для нового бренда или страницы компании в социальных сетях, попробуйте создать доску настроений. Это отличный способ пробудить вдохновение.
Для разработки такой доски вам придётся ответить самому себе на следующие вопросы:
Источники:
Книга Ю.А. Сырых «Современный веб-дизайн. Эпоха Веб 3.0».
Статьи в тему:
Добавить комментарий