Подбор цветовой гаммы для сайта: Как выбрать цветовую гамму для сайта

Дизайн • Дизайн сайта Джерри Цао • 12 июня 2015 г. • 8 минут ЧИТАТЬ

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

Кредит фото: Dropbox

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

Наука говорит нам тогда, что цвет вызывает эмоции, которые могут привести к негативным, позитивным или несоответствующим чувствам. Kissmetrics продолжает, что посетителю сайта требуется всего 90 секунд, чтобы сформировать суждение или мнение. Кроме того, «62-90% этого взаимодействия определяется только цветом продукта.

Как описано в бесплатной электронной книге «Веб-дизайн для человеческого глаза», цвет играет несомненную роль в создании сильного первого впечатления у пользователей.

Online Email Template Builder

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

какие цвета означают

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

Для быстрого ознакомления взгляните на диаграмму цвета ниже.

Кредит фото: UXPin

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

Источник изображения: Kissmetrics

Итак, если вы разрабатываете для женщин, тогда фиолетовый — неплохая ставка, так как он универсально нравится женщинам, но не нравится мужчинам (вообще говоря, конечно). На изображении ниже это используется для L’Oreal Paris. Как видите, верхний и нижний колонтитулы черного цвета, что обозначает класс и элегантность, так что вы получаете общее ощущение, что продукт не дешевый, а высококлассный.

Источник изображения: Kissmetrics

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

( Чтобы узнать больше о минималистском дизайне и использовании пустого пространства в качестве инструмента дизайна, ознакомьтесь с бесплатными электронными книгами Элегантность минимализма и Дзэн Белого пространства в веб-дизайне ).

На изображении ниже, для журнала Women’s Health, верхний баннер розовый, но в остальном сайт относительно лишен цвета и использует вместо этого изображения и смелую навигацию. Это интересный выбор, который может сработать против сайта.

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

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

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

Определение цветовой схемы

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

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

# 1: Триада

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

Авторы фотографий: Рэй Тригстад. Wikimedia Commons. Creative Commons. Отредактировано с оригинала.

# 2: Соединение (Дополнительный Сплит)

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

Авторы фотографий: Рэй Тригстад. Wikimedia Commons. Creative Commons. Отредактировано с оригинала.

# 3: аналог

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

Авторы фотографий: Рэй Тригстад. Wikimedia Commons. Creative Commons. Отредактировано с оригинала.

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

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

Источник изображения: Codementor

1. Цвет фона — Черный фон обозначает класс, превосходство, формальность и «корпоративность».Очевидно, что при рассмотрении сайта, который предоставляет наставничество, превосходство — это то, что вы хотели бы передать. Формальность предполагает, что это связано с обучением, в то время как «корпоративный» предполагает, что пользователи могут не учиться программировать как хобби, а скорее как то, что они будут продвигать в своей карьере.

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

3. Цвет текста: Для текста белый обеспечивает этот крайне важный контраст, в то же время соответствуя цветовой схеме. Значки, выделенные белым цветом (и белые призрачные кнопки), расположены прямо на сгибе, чтобы побудить пользователей прокрутить вниз для получения дополнительной информации, если это необходимо.

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

цветов, которых следует избегать

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

Источник изображения: Color Matters

«Браун» работает для UPS, так как это компания, которая хочет передать убедительное послание, на которое можно положиться.

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

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

Конечно, помните, что это всего лишь рекомендации (они всегда зависят от контекста), и гораздо важнее, чтобы все ваши цвета дополняли друг друга и создавали гармонию.

инструментов, чтобы помочь вам выбрать правильные цвета

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

• Adobe Color CC — надежный поставщик для всех пользователей Adobe.
• Paletton — простая палитра цветов для начинающих.
• Flat UI Color Picker — для создания цветных плоских дизайнов
• Mudcube Color Sphere — предлагает выбор тем и предоставляет номера HEX.
• Check My Colours — для проверки сочетаний цветов переднего плана и фона и правильной контрастности для использования людьми с дальтонизмом.
• Цвет — позволяет выбрать цвет, перемещая мышь по экрану, установить насыщенность и затем получить код HEX.

Обучение на примере

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

Источник изображения: AWWWards

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

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

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

Заключительные замечания

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

Чтобы узнать больше о том, как создать визуальный дизайн, чтобы произвести самое сильное первое впечатление на пользователей, ознакомьтесь с бесплатной 85-страничной электронной книгой «Дизайн веб-интерфейса для человеческого глаза». Мы анализируем примеры из более чем 33 компаний, включая Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom и Bose.

Как то, что вы читаете? Подпишитесь на наши главные истории.

генератор цветовой палитры с питанием от ИИ

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

Все фильмы Миядзаки имеют блестящий цветной дизайн, и The Wind Rises не является исключением.Доминируют блистательные синие и зеленые цвета, сочетающиеся с более темными мрачными цветами в изображении Японии военного времени

Портреты и фотографии людей в других условиях. Тяжелые телесные тона с некоторыми акцентными цветами.

Рождественские елки, леденцы, фейерверки и другие рождественские изображения.

Произведения Бенджамина Уэста и Джона Трамбулла. Произведения искусства, произведенные во время американской революции, обычно имеют высокую контрастность и тонкие оттенки.

Оставайтесь на связи

Советы по использованию

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

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

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

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