Монотонный цвет в дизайне

Использование темной цветовой схемы может сделать дизайн сайта красивым и элегантным.

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

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

Монотонные цветовые схемы

монотонный цвет

монотонная схема

монотонный стиль

монотонный дизайн

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

Цветовой круг поможет с выбором цвета.

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

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

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

Темные монотонные схемы

монотонный цвет сайта

темная схема

темная цветовая схема

монотонный дизайн сайта

монотонный стиль сайта

Разработка темной монотонной схемы сложна тем, что может потребоваться много различных оттенков, для достижения хорошего результата. Мы рекомендуем остановиться на 2-3 оттенках, для создание данного дизайна.

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

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

Контраст

сайт в темном цвете

темная цветовая схема

темный сайт

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

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

Стиль текста играет немаловажную роль. Избегайте стилей с супер-тонкими штрихами и с элементами затемнения. Текст становится трудным для восприятия.

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

Инструменты для старта

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

adobe kuler

Kuler: Kuler от компании Adobe представляет собой быстрый и простой способ создания пяти-цветовой схемы в считанные минуты. Он включает в себя опцию генерации монохроматических схем и полностью настраиваем. Кроме того, он показывает значения цветов, с которыми выработаете, что делает его очень простым в использовании.

генератор цветовой схемы

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

дизайн цветовой схемы

Конструктор цветовых схем: Мало того, что конструктор Color Scheme используют темные, монотонные цветовые схемы, но это еще и очень хороший инструмент. Выберите тип схемы и используйте цветовой круг для генерации схемы.

конструктор цветовых схем

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

Futurico UI

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

 

Перевод статьи Working with Color: Create a Monotone Design Scheme

Тэги: color

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.