Подбор цветовой гаммы для сайта: Карта Сайта ColorScheme.Ru

Заключение

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

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

Не упускайте возможности сделать вашу посадочную страницу или сайт максимально привлекательными для пользователей.

Высоких вам конверсий! 

По материалам: crazyegg.com

06-02-2019

Сервисы для подбора цветовой гаммы для сайта

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

Бесплатно подбираем цветовую гамму с помощью Adobe

Сайт, который, пожалуй, не нуждается в долгом представлении. Профессиональный инструмент для подбора цветовой гаммы от Adobe.

Адрес сервиса для подбора цвета: http://colourlovers.com

Бесплатно подбираем цветовую гамму с помощью ColourLovers

Огромное количество палитр и паттернов, созданных пользователями. Можно создавать свои или скачивать уже готовые (если зарегистрироваться) для программ  Illustrator, Photoshop, GIMP и в разных других форматах.

Выбор цветовой гаммы для Вордпресс с ColorHunt

Адрес сервиса для подбора цвета: http://colorhunt.co

Бесплатно подбираем цветовую гамму с помощью ColorHunt

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

Выбираем цвета для сайта WordPress используя Coldr

Адрес сервиса для подбора цвета: http://coldr.com

Бесплатно подбираем цветовую гамму с помощью Coldr

Хороший инструмент для создания цветовых схем из фотографий. Или для заимствования схем, созданных другими пользователями. Или для скачивания классных паттернов или градиентов в css. Сервис показывает значения цветов выбранной схемы в hex, rgb и hsl. Также можно скачать созданные палитры для Illustrator, Photoshop и GIMP.

Выбор цветовой гаммы сайта с Pltts

Адрес сервиса для подбора цвета: https://pltts.me

Бесплатно подбираем цветовую гамму с помощью Pltts

Ещё минималичнее предыдущего — выбирай из готовых палитр, экспортируй в SASS, LESS, CSS, PHP или JSON. Наверное, больше подойдёт тем людям, которые не заморачиваются рисованием макетов сайтов, а делают сайты сразу в текстовых редакторах.

Создание цветовой палитры с помощью Romanuke

Адрес сервиса для подбора цвета: http://color.romanuke.com

Бесплатно подбираем цветовую гамму с помощью Romanuke

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

Выбор цветовой гаммы с помощью StyliFyme и Gradients

Адрес сайта: http://stylifyme.com

Сервис может «разобрать» любой сайт на цвета и шрифты и сделать скриншот всей страницы по указанному url.

Адрес сайта: http://gradients.io/ — сочные градиенты, отобранные вручную.

Бесплатно подбираем цветовую гамму с помощью StyliFyme и Gradients

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

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

10 Трендовых Цветовых Схем Для Веб-Сайтов в 2021

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

Исключительно Черный

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

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

Морской Оттенок в Сочетании с Мятным

Синий цвет давно в тренде. Долгое время это был четко выраженный синий или голубой оттенок (Facebook, Twitter). Для социальных сетей этого вполне достаточно. Но если говорить о полноценных брендах, который продают товары или услуги, то нужен более привлекательный сайт. Таким образом, начали добавлять градиенты. Сегодня одно из лучших сочетаний – морские цвета с небольшой примесью мятных оттенков.

Черный, белый, серый

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

Так, например, если ваш сайт нацелен на аудиторию премиум класса, можно смело использовать такие цвета.

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

Серый, Голубой и Синий

Исключительно три цвета, без каких-либо градиентов. Почему они оказались трендовыми? Это очень нестандартно. Очень часто синие оттенки используют как самостоятельную цветовую гамму, либо добавляют зеленый оттенок. В то же время, серый вовсе редко появляется в цветовых схемах (исключение – как градиент для черного).

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

Футуристические Цветовые Схемы

• насыщенный синий;
• насыщенный пурпурный;
• ярко-розовый.

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

Классический синий

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

Один из примеров сайтов, который реализовал такой подход – студия веб-дизайна Oino.

Природные Оттенки

1. Об этом говорят все больше знаменитостей.
2. Этому требованию соответствуют производители разных товаров.
3. Об этом все больше рассказывают СМИ.

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

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

Серый, Мягкий Желтый и Темно-Зеленый

Достаточно тяжело представить сочетание этих трех цветов в одной палитре. Почему? Потому что ранее мы не так часто ее замечали. Это действительно так. Данный тренд только зарождается. Но его уже умело используют некоторые проекты.

Как Подобрать Цветовую Схему?

1. Выберите преобладающий цвет.
2. Подберите хорошие комбинации.
3. Определитесь с фоновым цветом.

Заключение

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

Сервисы для подбора цветовой схемы сайта [Обновлено: Апрель’18]

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

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

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

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

Очень удобный и довольно простой простой сервис подбора правильной цветовой палитры для вашего сайта. Позволяет добиться приличных результатов.

Приложение для работы в Firefox и Chrome. Расширение, которое позволяет работать с цветом при помощи массы различных инструментов, таких как выбор цвета, пипетка, создание градиента CSS, просмотр палитры и другие.

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

С помощью этого приложения вы сможете быстро рассмотреть многоаспектный характер цветов и соотношения между ними. Вся цветовая палитра представлена в 3D. Кроме того, созданные вами палитры можно импортировать или экспортировать в Adobe Swatch Exchange (ASE). На сайте ColoRotatе организовано свое сообщество, где можно ознакомиться с темами, созданными другими пользователями.

Целая галерея цветов и цветовых схем. Здесь также представлены изображения, которые разобраны по цветам.

Сервис для составления целой палитры цветов для сайта и социальных сетей.

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

Еще один мощный онлайн-сервис от COLOURlovers, который поможет подобрать цветовые схемы. Есть возможность загружать фотографии и раскладывать их на цветовые пиксели для того, чтобы взять образцы цвета. Готовые темы можно сохранить в удобном для вас формате. Кроме того, к созданным вами палитрам можно присваивать мета-данные (ключевые слова), что значительно упрощает поиск и организацию работы.

Бесплатный онлайн-сервис, благодаря которому можно создать и сохранить гармоничные цветовые сочетания в автоматическом и ручном режиме. Три ползунка HSV или RGB помогут автоматически получить гармоничное сочетание из шести оттенков, которые после можно настроить в соответствии с собственными предпочтениями. Кроме того, все цвета представляются в виде разноцветного HTML и RGB кода, и могут быстро экспортироваться в цветовые таблицы в Illustrator (.EPS) и Photoshop (.ACT). Есть функция сравнения цвета со стандартным понтонным. Вы можете сохранить собственные палитры прямо на сайте, задав им удобные для вас имена. Зарегистрированные пользователи также могут пользоваться готовыми палитрами, которых достаточно много.

65 четырехцветных палитр и рейтинг наиболее популярных из них.

Простой и понятный в работе интерфейс. Есть встроенная библиотека цветов, а еще возможность создавать собственные. Грамотно реализованный функционал поможет быстро управлять сервисом.

В ColorMunki цвета можно найти во встроенной библиотеке, а также при помощи ключевых слов.

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

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

Подбор цветов для сайта: пояснения и рекомендации

Какую роль играет психология цвета в веб-дизайне?

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

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

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

В случае с Dalmors.md (ресурс, посвященный рыбному производству) тематика сама определила цвет:

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

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

В заключение

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

Сочетание цветов в интерьере — как сочетать цвета, примеры с фото

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

В результате большая часть людей останавливаются на самом «безопасном» и проверенном варианте. Чаще всего это «бежевенький» (А что? Теплый цвет, ко всему подходит). Как перестать бояться цвета и как сделать красивый интерьер в любимых тонах? Какие правила у сочетания цветов? Давайте разбираться. Поможет нам колористика.

Немного теории 

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

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

Как это работает? 

Все очень просто. Существует всего шесть канонических схем (подборок) сочетания цветов в интерьере. Рассмотрим их на примерах. 

1. Аналоговая триада 

Это самый простой и «безопасный» вариант. Берется 3 идущих подряд цвета из палитры. Используйте в оформлении интерьера оттенки этих цветов и спокойный, красивый интерьер вам гарантирован. 

2. Комплиментарное сочетание 

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

3. Контрастная триада

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

4. Классическая триада

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

5. Прямоугольная/квадратная схема 

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

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

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

А можно проще?

Можно. Если сочетания из круга все равно пугают — самый простой и безопасный вариант: выбрать один цвет и сочетать его с нейтральными компаньонами. Получится просто, стильно, минималистично и современно. 

Темный-светлый 

С цветами наконец определились. Но как выбрать подходящий тон? Темный? Светлый? И как их сочетать? Совместимость оттенков зависит от задачи. 

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

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

А можно взять один или несколько мягких оттенков и один — насыщенный. Цвета «работают» вместе, дополняя и подчеркивая друг друга. На фоне нежных пастельных тонов яркий цвет зазвучит совсем по-новому. Попробуйте!

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

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

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

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

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

Существуют миллионы удачных комбинаций для уютного и красивого дома. Яркие, сочные, нежные, воздушные, вдохновляющие, завораживающие. Не бойтесь! Экспериментируйте! Даже если вдруг выбранный цвет на стенах не окажется идеальным — это можно исправить. Подберите аксессуары подходящего цвета или «разбавьте» крупными акцентами нейтральных тонов. Используйте советы из этой статьи и окружите себя любимым цветом. Это ведь лучше «бежевенького», правда?

Как выбрать свою эстетическую цветовую палитру [2021]

Глава 6

Цветовые схемы веб-сайта

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

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

В заключение этой главы я расскажу о примерах личных веб-сайтов и цветовых палитрах, а также о примерах бизнес-сайтов и цветовых палитрах. Готовый?

Какие цветовые схемы у веб-сайта?

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

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

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

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

Кажется, что цвета вашего сайта имеют большое значение. Вы должны выбрать основной, второстепенный и акцентный цвета, а также цвет фона и цвета текста.Кроме того, очень важно применять правило 60-30-10 в своей цветовой комбинации.

То есть 60% пространства вашего веб-сайта должно быть отведено под основной цвет, а 30% — под цвет, имеющий контрастирующий эффект (вторичный или третичный цвет). Остальные 10% пространства предназначены для вашего акцентного цвета, чтобы выделить важную информацию.

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

Вот некоторые типичные цветовые схемы веб-сайтов: ваш основной цвет + белый + серый, желтый + зеленый + коричневый, зеленый + синий, красный + желтый + синий и т. Д.

Где использовать цветовые схемы вашего сайта?

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

У вас, вероятно, уже есть выбранные вами цвета.Но где их использовать? И какой процент будет работать лучше всего? Помните правило 60-30-10, о котором я упоминал ранее. Не следует использовать одинаковое количество каждого цвета, так как создать контраст будет сложнее.

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

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

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

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

• Логотип.
• Заголовок и заголовки.
• Призыв к действию.
• Заголовок.
• Выделите поле с важной информацией.
• Гиперссылки.
• Иконки.
• Графики.

Дополнительные / акцентные цвета на вашем сайте

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

• Субтитры и подзаголовки.
• Призыв к действию.
• Выделите поле вторичной информации.
• Нижний колонтитул.
• Иконки.
• Графики.

Цвета кнопок с призывом к действию, которые конвертируют

Есть тысяча причин, почему цвет вашей кнопки CTA имеет значение. Среди многих других из-за лидогенерации и решений о покупке. Но какой цвет выбрать для призывов к действию?

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

Но если вам удастся выделить его, чтобы он контрастировал со всем остальным, вы, несомненно, увеличите его видимость. Таким образом, это повлияет на ваши лиды.

Очень известный способ создать контраст в ваших призывах к действию — выбрать дополнительные или триадные цвета. Таким образом вы убедитесь, что ваша кнопка CTA отличается от остальных.

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

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

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

Важное примечание:

Если вы добавите ощущение срочности в свои призывы к действию, они будут значительно более эффективными. Так что попробовать стоит. Помните, что то, что работает для некоторых веб-сайтов, не должно работать для всех сайтов. Итак, проводите A / B-тест, пока не найдете то, что вам подходит.

Лучшие и худшие цвета CTA

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

Я имею в виду, какие цвета лучшие или худшие, зависит от веб-сайта и цветов, используемых на этом сайте. Например, если вы использовали зеленый цвет для фона своего сайта, зеленый цвет не подойдет для вашего призыва к действию. Почему? Потому что не было бы такого большого контраста.

Многие исследователи говорят, что лучшие цвета для кнопок CTA — красный, зеленый и оранжевый. Вы можете подумать, а почему именно эти трое? Что ж, это правда, что они привлекают внимание пользователей и легко контрастируют со многими другими цветами.

Red выделяется на большинстве веб-сайтов. Кроме того, красный — это цвет, который вызывает волнение и создает срочность.

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

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

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

Действительно, черный цвет темный и мрачный, поэтому его сложно выделить на большинстве фонов веб-сайтов.

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

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

Подсказка:

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

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

Как выбрать цвета кнопки CTA для конвертации?

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

Ознакомьтесь с этими важными советами по выбору цвета кнопок CTA:

1. Используйте контрастный цвет на основных кнопках CTA, чтобы выделиться по сравнению с фоном.

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

Думайте о своих кнопках CTA как о том, чем они являются. Они должны быть как-то прямоугольными и с бордюрами. Чтобы они выглядели интерактивными, они должны иметь форму кнопки. И тогда, чем более контрастный эффект они создают, тем эффективнее они будут.

2. Подберите цвет к вашему бренду

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

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

3. Стратегически добавьте пустое пространство

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

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

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

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

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

4. Используйте дополнительные кнопки CTA

Большинство веб-сайтов используют только одну кнопку CTA. Таким образом, если сайт использует правильные цвета, его кнопка CTA будет выделяться на фоне остального контента. Однако на некоторых веб-страницах необходимо использовать два призыва к действию, поскольку на них есть больше вещей, которые они хотят выделить.

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

Итак, если вы используете несколько CTA (не используйте больше двух), один должен быть более заметным, чем другой. Таким образом, большинство пользователей будут нажимать на более заметный призыв к действию.

Другая тактика, которая обычно хорошо работает, — сделать текст вторичного или приглушенного CTA неудобным, например «Да, я хочу больше X, пожалуйста» (основной CTA) или «Нет, у меня достаточно X» (приглушенный CTA).

Большинству людей никогда не бывает достаточно X, если то, что вы предлагаете, разумно.Таким образом, очевидным щелчком будет вариант «Да».

5. Не забывайте учитывать размер кнопок CTA

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

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

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

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

Важное примечание:

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

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

Отслеживание и мониторинг поведения пользователей с помощью цветовых схем веб-сайта

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

Но каково поведение пользователей? Что ж, это означает привлечь ваше внимание к своей аудитории и попытаться узнать их получше. Вам нужно сосредоточить свое внимание на том, как они взаимодействуют с вашим сайтом.

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

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

Важность понимания поведения пользователей на веб-сайте

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

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

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

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

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

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

Запись сеанса

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

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

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

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

Тепловая карта

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

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

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

Оптимизация коэффициента конверсии с учетом поведения пользователя

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

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

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

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

Ниже перечислены ключевые функции для оптимизации цветовых схем веб-сайта:

A / B-тест цветов кнопок CTA

Если вы хотите узнать, какие цвета лучше всего подходят для кнопок с призывом к действию, нет другого выхода, кроме как запустить A / B-тест, чтобы проверить их влияние на вашу аудиторию. Цвет ваших призывов к действию будет по-разному влиять на людей из-за цвета фона вашего сайта и цвета других элементов.

Но стоит проверить, какие цвета призыва к действию более убедительно влияют на вашу аудиторию. Помните, что сообщение, которое вы пишете в своих призывах к действию, тоже имеет значение. Если вы проведете A / B-тестирование эффективности вашей кнопки CTA, вам придется сменить один цвет на другой. А затем используйте тот, у которого больше CTR.

A / B тест размеров вашей кнопки CTA

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

Но, если на вашем сайте уже слишком много элементов значительного размера, изменение размера CTA может оказаться не таким эффективным. Что критично для CTA, так это то, что он контрастирует с остальными элементами.

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

A / B тест ваших изображений

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

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

Размер изображения, качество, количество изображений и т. Д. — вот аспекты, на которые вы должны обратить внимание. Следовательно, A / B-тестирование с вашими изображениями намного сложнее, чем с CTA.

Тем не менее, это необходимо. Но помните, что нельзя менять все сразу. Лучше внести небольшие изменения в соответствии с предпочтениями вашей аудитории и посмотреть, как получится.

A / B-тест ваших ссылок на места, по которым люди нажимают

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

Что это вам говорит? Посетители вашего сайта считают, что вы должны разместить там ссылку. Если это ваш случай, вам нужно их выслушать и создать там соответствующую ссылку.

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

Итак, вам нужно будет следить за тем, как люди взаимодействуют с вашими ссылками. А затем A / B-тест для внесения необходимых изменений. Таким образом, ваш сайт, несомненно, получит больше кликов.

Как улучшить взаимодействие с пользователем с помощью цветовых схем веб-сайта?

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

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

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

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

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

Убедитесь, что вы используете единообразные цвета.

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

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

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

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

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

Использовать пробел; это твой лучший союзник

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

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

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

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

Проверьте читаемость своего сайта

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

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

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

Будьте осторожны с цветами ваших гиперссылок

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

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

То же самое и с красным. Считается, что этот цвет сообщает о предупреждении. У большинства это ассоциируется именно с этим. Таким образом, нет смысла использовать его для передачи чего-то приятного, не имеющего отношения к предупреждениям, сигналам тревоги, предостережениям и т. Д.

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

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

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

Выделите кнопку с призывом к действию

Ваша главная и самая важная кнопка CTA должна выделяться над сгибом. Учитывая, что от этого зависят ваши конверсии, вы должны придать ему актуальность, которой он заслуживает.

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

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

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

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

Примеры персональных веб-сайтов и цветовые палитры

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

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

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

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

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

Вот список хорошо продуманных личных сайтов:

1. Данило Де Марко

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

Этот сайт является прекрасным примером личных сайтов, поскольку неоново-зеленый цвет и его типографика, несомненно, привлекают внимание аудитории Данило Де Марко.

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

2. Алекс Вандерлит

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

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

3. Владимир Груев

На сайте Владимира Груева используется квадратная цветовая схема. На этом сайте все цвета ненасыщенные, кроме синего. Более того, ненасыщенные цвета используются на больших площадях.

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

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

4. Владим Тюрин

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

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

Примеры бизнес-сайтов и цветовые палитры

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

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

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

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

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

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

Вот список хорошо продуманных бизнес-сайтов:

1. Ferrumpipe

Ferrumpipe используется палитра дополнительных цветов (зелено-оранжевый) вместе с монохромными (зеленый).

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

2. Oracle

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

Это хорошо подобранная цветовая палитра для брендов, цель которых — ассоциироваться с природой, экологией и людьми.

3. NBC

NBC используется монохромная цветовая палитра.Фактически, он использует только палитру, образованную оттенками серого. Два оттенка серого — это круто, так как они синего цвета, а два других — черного.

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

4. Samsung

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

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

5. Spline Group

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

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

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

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

Как выбрать один для своего сайта WordPress

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

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

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

Почему цветовые схемы для веб-сайтов имеют значение

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

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

Вот лишь несколько причин, по которым выбор цветовых схем для веб-сайтов является важным процессом:

• Цвета, которые приятно дополняют и / или контрастируют друг с другом, улучшают впечатление от использования вашего сайта.
• Различные цвета имеют определенный оттенок и психологический эффект. Это означает, что вы можете использовать их, чтобы помочь людям почувствовать или думать определенным образом.
• Использование цветов для создания преднамеренного контраста для ваших призывов к действию (CTA) может помочь увеличить конверсию. Многочисленные тематические исследования показали, что определенные цветовые контрасты играют значительную роль в увеличении конверсии от 10% до более чем 50%.

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

Как выбрать цветовую схему для веб-сайтов (за 3 шага)

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

Во-первых, давайте рассмотрим самые основные изменения, которые вы можете внести в цветовую схему своего сайта WordPress с помощью настройщика WordPress.Посетите Внешний вид> Настроить на панели инструментов и выберите вкладку Цвета :

Выбор здесь будет зависеть от вашей темы. У нас установлена ​​тема Twenty Seventeen прямо сейчас, и мы можем изменить базовую цветовую схему с Light на Dark и отредактировать цвет текста заголовка. Мы также можем создать индивидуальную схему, выбрав определенный цвет.

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

Шаг 1. Выберите основной цвет для своего веб-сайта

Преимущественно белая цветовая гамма вызывает ощущение чистоты и эффективности.

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

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

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

Например, вот несколько наиболее распространенных цветов и их ассоциаций:

• Белый: Изысканность, эффективность, чистота.
• Черный: Гламур, безопасность, мощь.
• Синий: Доверие, открытость, спокойствие.
• Зеленый: Баланс, рост, финансы.
• Красный: Тепло, азарт, молодость.
• Фиолетовый: Романтика, загадка, качество.

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

Шаг 2: Выберите цветовую схему

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

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

Начнем с самого основного варианта цветовой схемы Adobe по умолчанию: Аналог .С помощью этой схемы вы получите несколько очень похожих цветов. В инструменте цветового круга Adobe вы можете щелкнуть средний селектор и перетащить его к основному цвету, который вы выбрали на предыдущем шаге:

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

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

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

Если вы ищете контрастные цвета, но хотите работать с более чем двумя или тремя вариантами, цветовая схема Compound является хорошей золотой серединой:

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

Шаг 3. Создайте свой сайт, используя выбранные вами цвета

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

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

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

Наконец, не забывайте о контрастных цветах. Их следует использовать экономно и с определенной целью — обычно для выделения важных призывов к действию. Веб-сайт Mix The City прекрасно демонстрирует это с помощью ярко-желтой кнопки CTA, которая четко выделяется на фоне темного дизайна:

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

Заключение

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

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

1. Выберите основной цвет для вашего сайта.
2. Выберите цветовую схему с помощью инструмента цветового круга.
3. Оформите свой сайт, используя выбранные вами цвета.

Какие цвета вы думаете использовать на своем следующем веб-сайте и почему? Поделитесь с нами своими мыслями в комментариях ниже!

Бесплатный гид

5 основных советов по ускорению работы вашего сайта на WordPress

Сократите время загрузки даже на 50-80%

Лучшие инструменты для работы с цветом для веб-дизайнеров в 2021 году

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

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

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

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

01. HueSnap

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

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

02. Khroma

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

03. Coolors.co

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

Coolors доступен на настольных компьютерах. Более того, в нем также есть приложение для iOS, надстройка Adobe (PhotoShop, Illustrator, InDesign) и даже расширение Google Chrome для легкого доступа.

04. Adobe Color CC

Бесплатный инструмент Adobe Color CC существует уже давно, и это один из лучших инструментов для выбора цветовой палитры. .Вы можете не только создавать свои собственные цветовые схемы, но и исследовать то, что создали другие. Выберите цвет на колесе (или на изображении) и примените правила цвета, такие как использование только дополнительных цветов, монохроматических цветов или оттенков выбранного вами цвета, для создания цветовой палитры. (Или щелкните каждый цвет и исследуйте цветовое колесо, чтобы настроить выбор.)

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

05. Colordot

Colordot от Hailpixel — отличный бесплатный онлайн-инструмент для создания цветовой палитры. Используя простые жесты мыши, вы можете выбирать и сохранять цвета. Перемещайте указатель мыши вперед и назад для определения оттенка; вверх и вниз для легкости; прокрутите для насыщенности и щелкните, чтобы сохранить цвет в палитре. Щелкните значок переключателя, чтобы увидеть значения RGB и HSL каждого цвета. Есть даже приложение для iOS, которое позволяет снимать цвета с помощью камеры.

06. Eggradients

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

07. 147 цветов

Когда вы отвечаете за создание легко читаемых CSS, иногда лучше использовать стандартные цвета и названия цветов.Благодаря «147 цветов» от Брайана Майера-младшего вы сможете увидеть их все и выбрать те, которые вам подходят. Он содержит 17 стандартных цветов плюс 130 других названий цветов CSS. Отфильтруйте результаты по оттенкам синего, зеленого и т. Д. Или выберите из полной радуги.

08. Генератор цветовой палитры Canva

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

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

09. Палитра дизайна материалов

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

10. ColourCode

ColourCode Тамино Мартиниус и Андреас Сторм похож на Colordot, но предлагает немного больше рекомендаций.Этот бесплатный инструмент ударяет вас прямо в лицо, демонстрируя фон, меняющий цвет при движении курсора. Кроме того, этот инструмент предлагает различные категории для палитры (аналоговая, триада, четырехугольник, монохромный, монохромный свет и т. Д.).

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

11. Калькулятор цвета

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

12. Цветовой код HTML

Цветовые коды HTML — это большой бесплатный набор инструментов от Dixon. & Moe, который включает в себя подробный палитру цветов с множеством объяснений цветовых правил; серия цветовых диаграмм с плоскими цветами дизайна, схемой дизайна материалов Google и классической палитрой безопасных для Интернета цветов; и список стандартных названий цветов и кодов HTML.

Этот сайт также предлагает учебные пособия и другие ресурсы для веб-дизайнеров, а также варианты экспорта результатов из его инструментов в виде HEX-кодов, стилей HTML, CSS и SCSS.

13. W3Schools: Учебник по цветам

Если вы ищете комплексное решение, которое включает руководство по цветам, а также ряд различных инструментов, тогда Учебник по цветам на W3Schools — идеальный выбор. Вы можете не только узнать о теории цвета, цветовых кругах и цветовых оттенках, но также сможете использовать другие инструменты, которые у него есть, например, Color Converter.С помощью этого инструмента вы можете преобразовывать любые цвета в имена и обратно, HEX-коды, значения RGB, HSL, HWB и CMYK.

14. Цифровой измеритель цвета (Mac)

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

Подробнее:

Насколько важен цвет в дизайне веб-сайтов? | Studio 1 Design

Designer on Tap Условия использования

Между Studio 1 Pty Ltd ABN 46 082 517 539 ( мы или us ) и вами.

Эти положения и условия ( Условия ) регулируют вашу подписку на наши услуги по дизайну, предоставляемые продуктом подписки «Designer on Tap» ( Service ), который более подробно изложен на сайте www.studio1design.com / unlimited / ( Веб-сайт ) и образует обязательное договорное соглашение между вами, пользователем Сервиса, и нами.

Используя Сервис, вы подтверждаете и соглашаетесь с тем, что у вас было достаточно шансов прочитать и понять Условия, и вы соглашаетесь соблюдать их. Если вы не согласны с Условиями, вы не должны использовать Сервис.

Вы признаете и соглашаетесь с тем, что у вас было достаточно шансов прочитать и понять Условия, и вы соглашаетесь соблюдать их.

1. Сборы и расходы
   1. Услугу можно приобрести в виде ежемесячной подписки через наш веб-сайт.Мы выставим вам счет по согласованной ежемесячной ставке ( Комиссия ) заранее, и Комиссия будет автоматически списываться с вашей кредитной карты каждый месяц.
   2. Если срок действия вашей кредитной карты истечет или данные вашей кредитной карты изменились, вы должны сообщить нам об этом как можно скорее. Задержка в оплате может привести к приостановке или прекращению нами вашей подписки.
   3. Если иное не указано на Веб-сайте или в любом счете, который мы вам предоставляем, Комиссия указана в долларах США и выражена с учетом всех налогов.
   4. Если вам требуются услуги пользовательского кодирования или любые другие услуги, которые не содержатся в описании услуги на веб-сайте (Дополнительные услуги), мы сообщим вам об этом и о примерной стоимости предоставления этих дополнительных услуг . Вы соглашаетесь с тем, что любые Дополнительные услуги будут регулироваться нашими стандартными условиями.
   5. Вы не должны предоставлять или разрешать любому лицу за пределами вашей организации использовать ваш доступ к Сервису без нашего предварительного согласия.Мы оставляем за собой право немедленно прекратить вашу подписку в любое время без каких-либо обязательств, если вы разрешите или у нас есть разумные основания подозревать, что вы разрешили доступ к Сервису неуполномоченному лицу.
2. Сроки
   1. Мы будем прилагать разумные коммерческие усилия для предоставления Услуг в соответствии с любыми согласованными сроками, но мы не гарантируем никаких оценок сроков и не будем нарушать наши обязательства, если мы не выполним какие-либо такие сроки.
3. Права на интеллектуальную собственность
   1. Вы признаете и соглашаетесь с тем, что все Права на интеллектуальную собственность во всех файлах создания, рабочих файлах, графических изображениях и других документах, предоставленных нами в связи с Услугами, передаются нам с момента их создания. Во избежание сомнений, сюда не входит ваш фоновый IP-адрес или какие-либо лицензии (например, лицензии на изображения).
   2. После полной оплаты наших гонораров, но в соответствии с пунктом 5.3, мы передадим вам все права интеллектуальной собственности в проекте, за исключением любого из наших фоновых IP.В таком случае у нас есть бессрочная безотзывная лицензия на использование соответствующих прав интеллектуальной собственности проекта, если иное не согласовано в письменной форме. Во избежание сомнений, Права интеллектуальной собственности, которые мы согласились передать вам, не включают никаких лицензий (например, лицензий на изображения) или других прав интеллектуальной собственности, которые мы не можем передать.
   3. Каждая сторона сохраняет право собственности на свой фоновый ИС и предоставляет другой стороне неисключительную бесплатную лицензию в следующем виде:
      1. для нас в той степени, в которой мы можем предоставлять Услуги, осуществлять наши права в соответствии с с положениями настоящих условий и иным образом выполнять наши обязательства в соответствии с этими условиями и
      2. для вас только в целях и объеме проекта, если иное не согласовано в письменной форме.
   4. Если в процессе предоставления Услуг мы обнаруживаем или сначала внедряем на практике концепцию, продукт или процесс, которые могут быть запатентованы, то такая концепция, продукт или процесс останутся нашей собственностью, и вы не должны использовать или иным образом присвоить такую ​​собственность без предварительного получения нашего письменного согласия.
   5. В той степени, в которой это разрешено применимым законодательством и в ваших интересах, мы по вашему письменному запросу получим согласие от обладателя каких-либо моральных прав на проект.
   6. Мы можем приобретать права на изображения, которые мы используем при предоставлении вам Услуг. На такие изображения может распространяться лицензионное соглашение между нами и третьей стороной, которое может ограничивать использование вами этих изображений. Спросите нас, хотите ли вы получить копию условий любой такой лицензии. Если иное не согласовано в письменной форме, мы можем по своему усмотрению использовать изображения, которые использовались при предоставлении вам Услуг, с другими клиентами или для других работ. Если вам требуются определенные изображения, вам может потребоваться внести дополнительную плату (-ы) за такое использование.Даже если мы соглашаемся предоставить изображение исключительно вам, мы не можем гарантировать, что изображение не будет использоваться другими третьими сторонами, которые могли получить эти изображения от другой стороны.
4. Гарантии и ответственность
   1. Вы гарантируете, что вся работа и материалы, предоставленные вами (включая ваш Фоновый IP), будут свободны и свободны от всех залогов и обременений и могут быть использованы нами на законных основаниях без нарушения прав другие, включая, но не ограничивая общность вышеизложенного, любые авторские права на коммерческую тайну или права на товарные знаки любой третьей стороны.
   2. Вы признаете, что не полагались на какие-либо советы, заявления или гарантии, предоставленные нами в связи с Услугами, которые прямо не указаны в этом документе.
   3. В той степени, в которой это разрешено законом, все гарантии, условия и заявления с нашей стороны исключаются. Если термин подразумевается законом в этом документе, и закон запрещает положения в контракте, исключающие или изменяющие ответственность в соответствии с этим термином, то он будет включен в этот документ. Однако наша ответственность за нарушение такого условия будет ограничена, по нашему усмотрению, одним или несколькими из следующих действий:
      1. снова предоставление услуг; или
      2. оплата стоимости повторного предоставления услуг.
   4. Если вы недовольны нашими Услугами, в той степени, в которой это разрешено законом, мы не будем предоставлять вам возмещение, а снова предоставим вам Услуги в разумных пределах, пока вы не будете удовлетворены результатом.
   5. В той степени, в которой это разрешено законом, ни мы, ни наши должностные лица, сотрудники, агенты или связанные с ними юридические лица не будем нести никакой ответственности (в том числе за небрежность) за любые убытки, ущерб, обязательства или расходы, понесенные или понесенные вы или претензии, предъявленные вам, и вы соглашаетесь не предъявлять никаких претензий к нам в связи с предоставлением нами Услуг или вытекающими из них.
   6. Без ограничений, мы ни при каких обстоятельствах не несем ответственности за любые косвенные или косвенные убытки, включая упущенную выгоду, упущенную выгоду и упущенную возможность для бизнеса.
   7. Вы возмещаете и оградите нас от ответственности в отношении любых претензий, убытков или ущерба любого рода (включая судебные издержки и выплаты на основе полного возмещения), прямо или косвенно возникающих из:
      1. любого действия, совершенного нами добросовестно и якобы в соответствии с правом, предоставленным нам в соответствии с положениями этого документа
      2. любое нарушение вами прав на интеллектуальную собственность третьих лиц и / или
      3. любое нарушение вами любого из условий этого документа.
   8. Мы не гарантируем, что наши Услуги дадут какие-либо конкретные результаты. В частности, и не ограничивая вышесказанное, мы не даем никаких гарантий или заверений в отношении продаж или доходов, которые могут быть достигнуты, или что вы получите какие-либо новые или увеличенные числа или клиентов в результате наших Услуг.
5. Прекращение действия
   1. Вы можете прекратить подписку на Службу в любое время, уведомив нас через свою учетную запись на Веб-сайте, что вы хотите прекратить подписку, и в этом случае прекращение действия вступит в силу в конце расчетного периода. который вы заплатили.
   2. Мы оставляем за собой право немедленно приостановить предоставление Услуг в любое время и без каких-либо обязательств, если вы каким-либо образом нарушите настоящие Условия.
   3. Если вы нарушите какое-либо условие или условие этого документа и не сможете устранить такое нарушение в течение 14 дней с момента получения вами письменного уведомления от нас, указывающего на нарушение и требующего его устранения, то мы можем по своему усмотрению рассматривать этот документ как прекращенный, и в этом случае мы сохраняем за собой Права интеллектуальной собственности в Сервисах, даже если мы ранее согласились передать их.
   4. Прекращение действия из-за нарушения вами данного документа никоим образом не ущемляет наши права, включая наше право на получение оплаты за оказанные услуги.
6. Отказ от запроса
   1. Вы не должны в течение срока действия этого документа или в течение 6 месяцев после завершения любого проекта, который мы берем на себя:
      1. нанимать, заключать договор или нанимать услуги любого нашего персонала, или
      2. побудить или попытаться склонить кого-либо из нашего персонала к расторжению их соглашений или контрактов с нами.
7. Общие
   1. Все уведомления и согласия, требуемые или разрешенные для предоставления в соответствии с этим документом, должны быть в письменной форме и предоставлены путем личного обслуживания, предоплаченных почтовых услуг, факсимильной передачи или передачи по электронной почте на адреса стороны, указанные в этом документе, или по такому другому адресу, который одна из сторон может указать другой путем письменного уведомления.
   2. Ни этот документ, ни какие-либо права или обязанности по этому документу не могут быть уступлены или переданы иным образом одной из сторон без предварительного письменного разрешения другой стороны.
   3. Если мы не будем действовать в отношении нарушения вами данного документа, это не лишает нас права действовать в отношении этого или последующих или подобных нарушений.
   4. Ничто из изложенного в этом документе не представляет вас и нас как партнеров и не создает отношения между работодателем и сотрудником, хозяином и служащим или принципалом и агентом между сторонами. Ни одна из сторон не имеет права делать какие-либо заявления, заверения или обязательства любого рода или предпринимать какие-либо действия, которые будут иметь обязательную силу для другой стороны, за исключением случаев, прямо предусмотренных в этом документе или разрешенных в письменной форме.
   5. Если какое-либо положение этого документа будет признано недействительным или не имеющим исковой силы, остальные положения никоим образом не должны быть затронуты или нарушены. Этот документ должен быть составлен таким образом, чтобы максимально приблизить реализацию намерений сторон в том виде, в котором они были изначально выполнены.
   6. Настоящие положения и условия регулируются и должны толковаться в соответствии с законодательством штата Виктория, Австралия. Стороны подчиняются неисключительной юрисдикции судов этого государства.
8. Определения

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

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

Моральные права означает право указания авторства, право против ложного указания авторства и право на неприкосновенность авторства, как это определено в Законе об авторском праве 1968 года (Cth).

Цветовые схемы веб-сайтов, которые меняют способ нашего дизайна

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

Давайте посмотрим на:

• Как теория цвета используется в веб-дизайне
• Применение цветового круга в цветовых схемах веб-сайта
• Психология цвета

Что такое теория цвета?

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

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

Словарь цвета

• Оттенок: какого цвета что-то, например синий или красный
• Цветность: насколько чистый цвет; к этому добавилось отсутствие белого, черного или серого
• Насыщенность: сила или слабость цвета
• Значение: насколько светлый или темный цвет
• Тон: создан путем добавления серого к чистому оттенку
• Оттенок: создан путем добавления черного к чистому оттенку
• Оттенок: создается путем добавления белого к оттенку

Как работает цветовое колесо

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

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

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

Дополнительные цвета

Цвета, которые дополняют друг друга, легко найти как противоположные друг другу на цветовом круге, например синий и оранжевый, красный и зеленый и фиолетовый с желтым.

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

Аналогичные цвета

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

является прекрасным примером аналогичной цветовой схемы с оттенками фиолетового, синего и розового в ярких цветовых блоках.

Dropbox использует смелые цвета, которые, кажется, не должны работать вместе, но они работают!

Психология цвета

Еще одна тенденция в дизайне веб-сайтов — использование одного цвета для доминирования в дизайне — и мы не говорим о черном или белом!

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

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

Вы можете подробно узнать, что означают разные цвета, в этом посте на Canva.

Красный

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

Желтый

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

Оранжевый

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

Синий

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

Зеленый

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

розовый

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

фиолетовый

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

Составление цветовой палитры

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

Доминирующие цвета

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

Дополнительные цвета

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

Акцентные цвета

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

Бесплатные инструменты для создания цветовой палитры

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

• Muzli Colors : используйте этот инструмент для быстрого создания и редактирования цветовых палитр, сопоставления цветов и даже предварительного просмотра и загрузки индивидуальных наборов пользовательского интерфейса для вашего собственного выбора цвета.
• Coolors.co: Используйте этот инструмент для создания цветовых схем одним щелчком мыши и изучения тысяч палитр, созданных пользователем.
• Генератор цветовой палитры Canva : воспользуйтесь бесплатным инструментом Canva для создания цветовых схем из ваших любимых фотографий. Идеально подходит для создания цветовых схем, идеально подходящих к изображению, которое вам нужно использовать в веб-дизайне.
• Colormind.io : Colormind также позволяет создавать бесплатные цветовые схемы, но также применяет их к фиктивной целевой странице в режиме реального времени, чтобы вы могли визуализировать дизайн своего веб-сайта с самого начала.

Цветовая палитра современного сайта

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

Аналогичное цветовое решение

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

Дополнительная цветовая схема

Цвета, противоположные друг другу на цветовом круге, являются дополнительными цветами, такими как фиолетовый и оранжевый.

На веб-сайте

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

Цветовая схема градиента

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

Современная цветовая гамма

Бренды электронной коммерции любят эту цветовую схему. Используйте один фирменный цвет и сочетайте его с четким изображением продукта и пустым пространством.Подумайте: его, Outdoor Voices и Casper.

Монохроматическая цветовая схема

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

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

Палитра приглушенных тонов

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

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

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

Bumble в равной мере использует основные цвета в цветовой палитре своего веб-сайта.

Винтажная цветовая схема

Использование винтажных цветов в цветовой схеме вашего веб-сайта — отличная идея для продуктов действительно винтажного характера (например, Polaroid), а также просто отличный эстетический выбор.Агентство 5/4 использует красные и коричневые тона для создания винтажной цветовой палитры и сочетается с фотографиями, обработанными зерном и сепией, для получения полного эффекта.

Искусство и наука: большой выбор цветов для веб-сайтов

Хорхе Кинтерос

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

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

Некоторые решения могут показаться очевидными.

Например, вы, вероятно, не стали бы использовать синий для сайта, посвященного Хэллоуину. С другой стороны, какой цвет вы бы выбрали для сайта, посвященного программированию на JavaScript?

В этой статье мы разделим тему выбора цвета на три части.

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

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

Проводные цвета

garryknight

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

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

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

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

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

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

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

Таким образом, цвета, связанные с едой, становятся самым важным инстинктом.Наиболее значимые цвета в этой области — красный, зеленый и желтый, где красный означает свежее мясо, а зеленый и желтый — съедобные растения.

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

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

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

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

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

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

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

Культурные предрасположенности

Оказывается, определенные «правила» в отношении цветов и связанных с ними эмоций основаны на личных предпочтениях, которые обычно (простите за каламбур) окрашены культурными влияниями.

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

seriykotik1970

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

Переход от синего к белому начался со свадьбы королевы Виктории в 1840 году, когда она была одета в белое свадебное платье. До этого момента свадебные платья не имели определенного цвета, но поскольку королева Англии имела такое сильное социальное влияние, свадебные платья быстро стали белыми.

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

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

С этой целью на приведенной ниже диаграмме, любезно предоставленной компанией Logo Company, показаны некоторые из наиболее популярных цветовых ассоциаций сегодня, а также логотипы компаний, построенные вокруг них:

Диаграмма любезно предоставлена ​​компанией Logo,

Более конкретно, современная западная культура вызывает текущие ассоциации:

• Красный — Любовь, Волнение, Вожделение, Голод, Смелый, Юный, Срочность, Опасность, Романтика, Теплота, Быстрота, Негативные моменты
• Черный — стабильность, надежность, сила, мощь, точность, профессионализм, аккуратность, изысканность, горе, страх, покорность
• Коричневый — Воспитательный, Исторический, Безопасный, Консервативный, Надежный, Жесткий
• Фиолетовый / Пурпурный — Власть, Королевство, Духовность, Тайна, Магия, Религия, Чувственность, Любовь, Мудрость, Творчество, Образное воображение, Весна
• Желтый — энергия, ясность, тепло, инновации, драйв, динамика, компетентность, счастье, оптимизм
• Зеленый — Органический, Натуральный, Молодежный, Образовательный, Приключенческий, Экологический, Спокойствие, Здоровый, Умиротворенный, Лето, Зависть
• Оранжевый — Творчество, Динамика, Энергичность, Выразительность, Невинность, Энтузиазм, Осень, Самоанализ
• Синий — Доверие, Спокойствие, Доверие, Надежность, Чистота, Медицина, Власть, Судебный, Профессиональный, Мужской, Компетентность, Качество, Большая компания, Зима
• Белый — Счастье, Чистота, Искренность, Чистота, Клинический, Лечебный, Уравновешенный, Просторный, Простой, Легкий, Свежий, Зимний

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

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

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

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

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

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

Цветовые отношения

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

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

Вычисление смежных цветов упрощено с помощью десятков онлайн-инструментов для работы с цветом, таких как этот из раздела «Цвета на веб-сайте» Дональда Йоханссона.

Цвета, указанные ниже, были выбраны путем выбора вначале абсолютного зеленого цвета (# 00FF00), затем щелчка по аналогичному цвету # 65FF65. (В этом случае аналогичный цвет на самом деле был другим оттенком; то есть он не менял оттенок, он просто немного осветлял базовый цвет.)

В результате получилось два «аналогичных» поколения от зеленого, что дало две интересные вариации оттенка, # 64FF98 и # 98FF64.См. Схему ниже.

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

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

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

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

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

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

Например, если бы мы выбрали цвет # 64FF98 из приведенной выше диаграммы в качестве базового цвета для нашего сайта, триадные цвета можно было бы вычислить из цветов на веб-сайте как # 9763FF и # FF9763. (Лично мне не нравятся эти триадные цвета, поэтому я, вероятно, вернусь и выберу немного другой базовый цвет.)

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

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

Сводка

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

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

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

Цветовые схемы веб-сайтов: теория, практика и вдохновение

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

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

1. Как продумать цветовую палитру для вашего сайта
2. Определение вашего целевого рынка (и того, как они будут реагировать на цветовые схемы)
3. Психология цвета
4. Как выбрать цветовую схему
5. Инструменты для выбора цветовой палитры
6. Как применить ваши цвета на вашем веб-сайте
7. Цветовые схемы для веб-сайтов в 2019 году

Как подумать о цветовых палитрах для вашего сайта

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

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

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

Pro-tip: Чтобы избежать сюрпризов в будущем, попробуйте использовать анкету для клиентов, которая охватывает все, что вам нужно знать о бренде и существующих цветовых схемах веб-дизайна. Эти 9 основных вопросов (плюс бесплатный шаблон!) Помогут вам начать с правильного пути.

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

«Выбор цвета всегда должен соответствовать ценностям бренда. ”

Консультации для известных брендов

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

Например, возьмите Coca-Cola, один из самых популярных брендов в мире. Какой цвет приходит на ум?

Большинство людей скажут красный. Потребители привыкли видеть этот бренд в магазинах, ресторанах и других местах. Чтобы оставаться брендом, на веб-сайте Coca-Cola используется красный цвет, чтобы увязать его с брендом в целом. Однако сплошным красным веб-сайтом будет непросто пользоваться, поэтому есть другие акцентные цвета (например, черный и белый). Красный цвет является доминирующим, а акцентные цвета создают ощущение цельности.

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

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

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

Что такое теория цвета? Как это связано с веб-дизайном?

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

Ознакомьтесь с 11 главными тенденциями дизайна

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

Определение вашего целевого рынка (и того, как они будут реагировать на цветовые схемы вашего сайта)

Это наиболее важное исследование, которое необходимо сделать перед разработкой вашей цветовой схемы. Цвет очень субъективен, и вы (или ваш клиент) можете оказаться ориентированными на цвета, которые вам нравятся, или которые сейчас модны. Но важно в первую очередь учитывать посетителей сайта, а не зацикливаться на личных цветовых предпочтениях.

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

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

Не забывайте сохранять непредвзятость и позвольте исследованиям сообщить вам окончательные цветовые решения.

Психология цвета

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

Например, часто клиенты говорят что-то вроде: «Мне очень нравится фиолетовый цвет, и я хочу использовать его на своем веб-сайте.«Сиренево-фиолетовый — красивый цвет, но если вы разрабатываете веб-сайт для компании по производству мужских инструментов, он может быть не лучшим вариантом.

Вот обзор психологии цвета и того, что означают разные цвета:

• Красный: Яркий цвет, вызывающий сильные эмоции. Своей интенсивностью он создает ощущение безотлагательности.
• Оранжевый: Веселый и уверенный оранжевый передает идею энтузиазма. Однако это также может показаться цветом предостережения.
• Желтый: Желтый, как и оранжевый, дает ощущение бодрости. Он олицетворяет оптимизм и обычно привлекает внимание. Однако следует учитывать, что некоторые оттенки могут утомлять глаза.
• Зеленый: Символизирует рост и природу. Это означает здоровье, безмятежность и умиротворение. Это связано с богатством.
• Синий: Этот цвет ассоциируется с водой и дает ощущение спокойствия и безмятежности. Синий создает чувство безопасности и доверия и часто используется в корпорациях.
• Бирюза: Изысканный и связанный с исцелением.
• Фиолетовый: Цвет богатства и успеха. Это яркий цвет, но он также олицетворяет творчество.
• Коричневый: Дружелюбный, землистый, обычно изображает природу.
• Черный: Цвет, создающий ощущение утонченности. Мы часто думаем о «элегантных» брендах из-за их исключительности и загадочности.
• Серый: Обеспечивает ощущение безопасности, надежности и интеллекта.
• Белый: Придает ощущение чистоты или нейтральности. Это ключевой цвет, потому что он добавляет пространство для передышки и так называемое «белое пространство».

Примечание: Это написано с точки зрения США. Создавая глобальный дизайн, обязательно проведите исследование, потому что цвета будут иметь разное значение в разных частях мира.

Это очень сжатое объяснение психологии цвета, но должно дать вам хорошее начало.

Как выбрать цветовую схему своего сайта

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

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

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

Инструменты для выбора цветовых схем

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

Эти генераторы цветовых схем сайта бесплатны и просты в использовании:

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

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

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

Как применить ваши цвета на вашем веб-сайте

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

Контрастность и доступность

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

Есть несколько инструментов, которые помогают с этим типом тестирования, но Contrast Checker довольно прост в использовании.

Где использовать определенные цвета

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

Хорошая отправная точка — разбить вещи на основной цвет, второстепенные цвета и нейтральные цвета.

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

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

Вдохновляющие цветовые схемы веб-сайтов в 2019 году

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

Вокин

Это глобальное цифровое агентство предлагает смелую, но простую цветовую палитру для Интернета, в которой используется цвет года по версии Pantone «Живой коралл.«Мне нравится использовать один основной цвет (коралловый) поверх двух нейтральных (светло-серый и белый), чтобы создать минималистичный дизайн с максимальным цветовым воздействием.

Студия Style Maker

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

Джейсон Эндрюс

Джейсона Эндрюса яркий и смелый, но он уравновешен его работами: простые, черно-белые макеты (с редкими всплесками синего).Хотя создание такого большого контраста не сработает для всех сайтов, это, безусловно, незабываемый опыт для его личного бренда!

Кайл Рибант

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

Для еще большего вдохновения вы всегда можете взглянуть на доску цветовой схемы на Pinterest!

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

Получите больше результатов, которые вы ищете, с помощью своих плагинов! Мы исследовали, протестировали и скомпилировали лучшие плагины для WordPress, которые должен использовать каждый веб-дизайнер! Независимо от того, ищете ли вы новый плагин для защиты от спама, конструктора страниц или SEO, этот исчерпывающий список предлагает немного каждого плагина для ваших нужд WordPress.Это 20 лучших плагинов для дизайнеров WordPress, любимых нами, нашими клиентами и клиентами наших клиентов. Полный список читайте здесь!