Это принципы, которые являются отправной точкой, «руководством по безопасности» в работе с заказчиками и выполнению первых серьезных проектов; как выжить в мире веб-разработок. Действенные правила помогут вам создавать новые цветовые схемы и правильно использовать цвета.
1. ЦВЕТОВАЯ СХЕМА – ЭТО ХОЛСТ, А НЕ ЖИВОПИСЬ
Одним из наиболее фундаментальных принципов веб-дизайна есть то, что не зависимо от того, сколько времени вы тратите на «украшения» сайта, их роль второстепенна. Упор всегда должен делаться на контент. Ваша цветовая схема никогда не должна быть «громче» содержания. Так или иначе, дизайну, который стоит на втором плане, всегда нужно «выталкивать» содержание сайта на первый.
Дизайн очень тесно связан с контентом. Если у вас не найдется примеров, чтобы продемонстрировать это клиенту, то можно даже представить контент в виде макета, в случае, если он отлично выглядит сам по себе. В целом, это неплохая идея, начать с показа образца, который вы планируете поместить на сайт. Также процесс ознакомления можно осуществить сразу в виде кода. Еще это будет уместно, если есть изображения определенного стиля, которые должны быть включены в контент чтобы убедиться, что все компоненты будут гармонично взаимодействовать. Представьте, что содержание сайта – это уникальная личность, для которой необходимо подобрать костюм к лицу. Все просто.
2. НАЧНИТЕ С ПРОСТОЙ БАЗОВОЙ ПАЛИТРЫ СЕРЫХ ОТТЕНКОВ (Greyscale Base)
Есть бесконечное количество комбинаций цветов, которые вы можете выбрать для фона и текстовой базы. Тем не менее, можно для начала использовать универсальные оттенки: белый или светло-серый на заднем плане вместе с темно-серым текстом. Если вы посмотрите на любые популярные сайты, то убедитесь, что большинство из них следуют этому правилу и не зря. Данная комбинация – один из помощников для обеспечения читаемости текста. А также этим вы позволите содержанию быть на первом месте (а не дизайну). Для некоторого контента можно составить основную цветовую схему в оттенках серого. Вы должны избегать угольно-черного цвета текста, так как темно-серый читается намного удобнее. Комфортабельный диапазон колеблется от #333333 до #666666.
Для фона самым безопасным является белый #FFFFFF непосредственно под любой основной текст. Для других элементов фона можете использовать какие угодно оттенки: от того же #FFFFFF примерно до #CCCCCС. Но все же, все эти принципы не являются какими-то канонами, которые нужно строго соблюдать. Просто с них стоит начать свою творческую деятельность, плавно «вливаясь» в среду профессионального веб-дизайна.
3. ВЫБИРАЙТЕ ТОЛЬКО ОДИН ЦВЕТ ДЛЯ ВЫДЕЛЕНИЯ
Цветовые схемы могут сыграть злую шутку, если их слишком много. Тогда их сложнее держать под контролем. Для начала просто добавьте один дополнительный цвет на верхней части базы серых оттенков, который будет использоваться с целью выделения ссылок, некоторых заголовков, меню, кнопок и др. Ваш цвет может быть синий, зеленый, красный и любой другой. Выберите и оцените, как он сочетается с другими элементами. Затем откройте палитру своего цвета и нажмите в центре верхней правой четверти.
Перетащите ползунок вверх, далее вниз и выберите на ваш взгляд подходящий оттенок.
4. ЕСЛИ ВАС ТЕРЗАЮТ СМУТНЫЕ СОМНЕНИЯ, ИСПОЛЬЗУЙТЕ СИНИЙ
Серьезно. Синий – самый гибкий цвет. Он будет легко соответствовать большому количеству сайтов разных типов. Такие цвета, как фиолетовый или желтый могут быть приемлемы, но они слишком броские и быстро дадут обратный эффект. Если не уверены в цветах – смело берите синий. Можно взять темно-синий (оттенок 235) или 190-й. Не прогадаете.
На макете, представленном ниже, используется 205-й. Когда вы определитесь с основным цветом, смело добавляйте остальные туда, где на ваш взгляд это необходимо. В данном примере в некоторых основных местах выставлен белый цвет.
5. ДОБАВЛЯЙТЕ ВАРИАЦИИ К БАЗОВОМУ ЦВЕТУ
После выборки основного цвета вам потребуются дополнительные. Но это должны быть оттенки только одного, вашего цвета. Зачем усложнять?
Например, можно использовать следующие цвета для:
- Эффектов при наведении
- Границ
- Градиентов
- Света и тени
6. НЕ РИСКУЙТЕ ЭКСПЕРИМЕНТИРОВАТЬ С ОТТЕНКАМИ В ВЕРХНЕМ ПРАВОМ УГЛУ ЦВЕТОВОЙ ОБЛАСТИ
Верхний правый угол цветовой палитры – это область высокооктановых цветов. Они, как гоночные автомобили Формулы 1, могут безупречно выполнять свою функцию, но для их использования нужен хороший опыт. Вот почему в третьей части этого урока вам требовалось выбрать именно центральную часть палитры вашего базового цвета для выборки относительно приглушенного оттенка.
Вот вам простенький пример с ярким и приглушенным оттенками. Первый выглядит намного лучше, не так ли? Поэтому, если вы бережете зрение ваших посетителей и клиентов, держитесь подальше от коварного верхнего правого угла базового цвета.
Итак, подитожим.
Не дословно, но мы с вами говорили о понятиях «насыщенность» (S) и «яркость» (B). Во время работы с цветовой палитрой, выбирая цвета, можно проследить, какие оттенки остаются неизменными. Так вы создаете вариации путем изменения яркости и насыщенности основного цвета.
«Насыщенность» (S) – это параметр, показывающий, насколько отчетлив цвет. Степень насыщенности определяется тем, сколько белого добавляется к основному цвету. Меньше белого – больше насыщенность. При перетаскивании ползунка вправо вы уменьшите количество белого, поэтому значение (S) поднимется вверх. Если влево – цвет приглушится и значение уменьшится. Процесс добавления белого цвета еще называется «созданием оттенка». Этот термин происходит от понятия «смешивание цветов».
«Яркость» (B) и тона. Яркость показывает, сколько черного в вашем оттенке (меньше черного – больше яркости). При перетаскивании ползунка вверх, яркость увеличится; вниз – соответственно наоборот. Микс черного и цвета-оригинала называют «тенью».
Тон. Смешивание серого с базовым цветом – есть ничто иное, как создание «тона». При перемещении в верхнем правом углу, что мы практиковали выше, вы понижаете насыщенность и яркость, при этом добавляется количество белого и черного (серого), создавая тон.
Монохроматические цветовые схемы. Это схемы, в которых вы берете базовый цвет, расширяя его оттенками, тонами, тенями. Так, создавая вариации цвета выделения, вы фактически создаете монохроматические цветовые схемы.
Что дальше? Продолжайте практиковаться, набираться опыта, чтобы чувствовать себя уверенно. После чего вы можете совершенствовать свои навыки вместе с расширением для браузера, например, Colorzilla, который включает множество разных цветов. Им же пользуются опытные дизайнеры. Обращайте внимание на сочетания, начните замечать цветовые схемы на всех интернет-сайтах, например, проверяя показатели «S» и «B», и не только.
Практикуйтесь! Становитесь лучше!
