Какие цвета используют самые популярные сайты / Хабр
Цвет является важным фактором при выборе продукта. Это может подтвердить большинство покупателей различных товаров – от автомобилей до обуви.
Цвет существенно влияет на показатели продаж в интернете и посещаемости сайтов в целом. Почти половина пользователей формируют мнение о веб-сайте на основе его дизайна. Цветовая гамма играет здесь далеко не последнюю роль.
Дизайнер Пол Хеберт проанализировал 10 популярных сайтов. Он собрал статистику распределения цветов, используемых на главной странице сайта и в таблице стилей.
«Я часто испытываю проблемы при создании цветовых схем, и мне стало любопытно как поступают в этом случае другие компании», рассуждал он.
Для начала Пол изучил рейтинг Alexa и произвольно выбрал 10 из числа самых посещаемых сайтов – Google.com, Youtube.com, Facebook.com, Baidu.com, Yahoo.com, Wikipedia.org, Amazon.com, Google.co.in, Qq.com и Twitter.com.
Дизайнер разработал скрипт, который возвращает значения всех цветов, используемых на каждом сайте в формате CSV.
Получился набор из 10 записей такого формата:
http://www.Google.com|#fff|#000|#767676|#2d2d2d|#bebebe|rgba(0,0,0,.2)|#ccc|#c0c0c0|#36c|#4c4c4c|#dd4b39|#dd8e27|#900|#eee|black|#f5f5f5|rgba(0,0,0,.12)|#666|#fef9db|#4d90fe|rgba(255,255,255,0.5)|rgba(0,0,0,.1)|#3079ed|#dcdcdc|#444|#4787ed|#2f5bb7|#357ae8|rgba(0,0,0,0.3)|#f1f1f1|#f8f8f8|#fbfbfb|#ffffff|#c6c6c6|#222|rgba(0,0,0,.8)|rgba(0,0,0,0)|#ebebeb|rgba(0,0,0,.3)|#00c|#11c|#551a8b|#999
Исходный код данного скрипта он разместил на Github. Проект с этим и другими скриптами доступен здесь.
После этого Хеберт проанализировал полученную выборку и наглядно отобразил разброс значений на графиках.
Оказалось, что при оформлении сайтов было использовано вдвое больше оттенков синего, чем желтого или красного, и втрое больше, чем зеленого. Для упрощения расчетов прозрачный цвет Хеберт не учитывал.
Изображение сайта Пола Хеберта
Засилье синего цвета в глобальной сети настолько явно, что дизайнеру пришлось выделить бирюзовый цвет в отдельную категорию.
Изображение сайта Пола Хеберта
Расстояние от центра круга до точки, показывающей тот или иной цвет, показывает степень его насыщенности. Чем жирнее точка, относящаяся к цвету, тем чаще он появляется на десяти самых популярных сайтах.
«Магия» цвета
Цвет, по данным исследований нейробиологов и психологов, обладает способностью влиять на определенные сегменты аудитории.
Голубой цвет символизирует безопасность
Самая «безопасная» цветовая гамма — синяя. Любой ее оттенок «работает» и каждое сочетание с синим эффективно. Синий — любимый у большинства людей, независимо от пола, возраста и прочих параметров.
Некоторые психологи полагают, что синева ясного неба («безопасная» погода) или океана (который отражает безоблачное небо) ассоциируются у людей с надежностью, уверенностью и властью.
Многие сайты используют цвет «безопасности». За примерами далеко ходить не нужно.
И, конечно же, социальная сеть «ВКонтакте»:
Зеленый цвет символизирует рост
Основной посыл зеленого — рост. Для большинства исследователей причины такой ассоциации очевидны: большинство растений — зеленые.
Прочие выводы
Каждому пользователю известно, что в дизайне сайта популярной социальной платформы Facebook много синего цвета. Однако, наряду с ним на сайте достаточно широко используется диапазон других цветов, которых, к примеру, на сайтах Baidu, Google и Wikipedia в три раза меньше.
Тем не менее, разработчики Amazon стараются как можно меньше использовать в оформлении сайта синий цвет, предпочитая ему более теплые оттенки, а на сайте Yahoo Хеберту, вообще, не удалось определить доминирующий цвет.
Дизайнер намерен провести повторный анализ палитры ведущих веб-ресурсов, включив в выборку 100 или даже 1 000 сайтов. Хеберт выразил убеждение в том, что результаты более масштабного эксперимента помогут ему найти ответы сразу на несколько фундаментальных вопросов, которые его давно волнуют.
Например, он хотел бы узнать, являются ли цветовые предпочтения того или иного индивидуума врожденной особенностью или же они способны меняться в зависимости от времени и культуры.
Ознакомиться с анализом цвета каждого из сайтов можно на этой странице.
Как цвет влияет на пользовательский опыт?
Цвет является не только важной составляющей внешнего вида веб-страницы, но и играет ключевую роль в UX (user experience, опыт взаимодействия). С помощью этого инструмента можно вызвать определенные эмоции, привлечь внимание, создать визуальные подсказки для более удобной работы с сайтом.
Однако к выбору цвета нужно подходить осторожно — он должен соответствовать области, в которой вы работаете: неправильно подобранная цветовая гамма может создать ложное впечатление о компании. Например, ваши любимые оттенки могут и не подойти для продвижения вашего бренда или не понравиться целевой аудитории.
Сегодня мы поможем вам найти идеальную палитру, рассказав, какими цветами можно вызвать те или иные эмоции и как побудить пользователя к действию.
- Какие цвета лучше всего подойдут вашей посадочной странице?
Определение целевой аудитории
В умелых руках дизайнера цвет и изображения на сайте превращаются в инструмент, создающий уникальный стиль и вызывающий у пользователей положительные эмоции по отношению к компании.
Если смотреть на цвет с точки зрения UX, то для цветовой палитры появляются новые цели, например: подтолкнуть пользователя к совершению определенного действия, к прочтению нужного текста, к переходу по ссылке.
Чтобы добиться такого воздействия, необходимо сперва определить целевую аудиторию. Люди, в зависимости от возраста, социального статуса и культурных ценностей могут по-разному воспринимать одни и те же цвета.
Поэтому для начала определите четыре ключевых момента:
1. Продукт и отрасль, для которых будет создаваться сайт
2. Состав целевой аудитории
3. Как целевая аудитория воспринимает определенные цвета
4. Как цвет может быть использован в UX-дизайне сайта
Интересно, что некоторые области стараются придерживаться конкретного цвета, например, в веб-дизайне технологических гигантов Dell и HP преобладает синий цвет, тогда как продуктовые компании выбирают зеленый (Whole Foods, Tropicana).
Данная тенденция имеет вполне очевидные причины — правильная гамма помогает вызвать у потенциальных покупателей нужные компаниям эмоции:
Значения цветов:
Желтый — оптимизм, ясность, тепло;
Оранжевый — дружелюбие, бодрость, смелость;
Красный — волнение, энергия, самоуверенность;
Фиолетовый — творчество, фантазии, мудрость;
Синий — доверие, защита, сила;
Зеленый — мир, рост, здоровье;
Серый — баланс, нейтральность, спокойствие
Даже если вам очень импонирует дизайн Twitter’a, это еще не означает, что вам обязательно нужно использовать голубой цвет на своем сайте. В первую очередь необходимо подумать о клиентах — понять, какой цвет понравится именно им.
Цветовая гамма, идеально соответствующая вашей целевой аудитории, поможет в создании убедительного и гармоничного имиджа бренда.
- Теория цвета: 7 уроков на примере популярных брендов
Создание цветовой палитры
Рассмотрим цветовой круг — простой инструмент, с помощью которого можно подобрать гармоничные цветовые сочетания:
Красный, желтый и голубой являются первичными (primary) цветами в круге.
Цвета, которые располагаются друг напротив друга, называются комплементарными, или дополнительными, например, зеленый и красный. Сочетания комплементарных цветов очень контрастны и на сайте их можно использовать для привлечения внимания. Компания Work Ninja на своей главной странице воспользовалась этим приемом: на зеленом фоне мы видим яркую красную кнопку, которую сложно не заметить.
Главное — не применять такие контрастные сочетания повсеместно, потому что пользователю будет непонятно, на что нужно обратить внимание в первую очередь.
Цвета, располагающиеся рядом друг с другом в цветовом круге, называются смежными. Сочетание смежных цветов менее контрастно и вызывает спокойные эмоции у посетителей. Компания Lloyds Bank выбрала два таких цвета для своего сайта:
При использовании только смежных цветов есть вероятность того, что сайт будет не очень удобен для взаимодействия.
Даже после изучения цветового круга и его основных принципов выбрать цветовую палитру для ресурса непросто. Возможно, вам поможет инструмент «Adobe Color», позволяющий познакомиться с гораздо большим количеством цветовых сочетаний и схем, чем упомянуты в данной статье.
- Как использовать психологию цвета для увеличения конверсии?
Улучшение UX
После выбора цветов самое время подумать, как их можно применить. Важно, чтобы сайт выглядел согласованно, также следует убедиться, что цвета не усложняют взаимодействие посетителей с сайтом.
Рассмотрим несколько приемов того, как с помощью цветов можно передавать визуальные сообщения и подсказывать пользователям следующий шаг.
1. Выделение страниц
Можно воспользоваться конкретным цветом, чтобы отделить одни страницы сайта от других. Это поможет обозначить особую категорию страницы только за счет дизайна. Если у вас есть особенная страница, цель которой отличается от других, в ней тоже можно использовать другой цвет.
На сайте компании Wrike видно, что все страницы выполнены в единой цветовой гамме и в одинаковом дизайне — это говорит о том, что цель и категория у всех страниц аналогичны:
2. Понятные визуальные элементы управления
Элементы управления должны иметь свой особый стиль, тогда пользователь не будет гадать, что же произойдет при нажатии на тот или иной элемент. Например, CTA внизу страницы можно выделить другим цветом, чтобы дать понять — эта кнопка предназначена для самого важного действия на сайте.
Для разных состояний кнопок и ссылок можно использовать смежные цвета или разные оттенки одного цвета. С помощью таких сочетаний можно создать визуальный эффект нажатой кнопки.
Например, на сайте компании Republica кнопка при наведении меняет свой фоновый цвет:
3. Выделение важной информации
Контрастные цвета отлично подходят для ситуаций, когда нужно привлечь внимание пользователей.
К примеру, если у вас на сайте есть форма с некоторыми обязательными для заполнения полями, можно применить яркую подсветку для полей, которые пользователь не заполнил.
Когда же действие успешно завершено, можно использовать более мягкие и холодные цвета. Например, после регистрации в Gmail мы видим страницу с текстом и синюю кнопку:
- Теория цвета — как управлять вниманием пользователя?
4. Указание последовательности действий
Цвет помогает выстроить контент на веб-странице по степени важности — это позволяет пользователю легко найти именно то, что ему нужно.
Чтобы ваш контент выглядел структурировано, совсем необязательно использовать вырвиглазный розовый цвет для выделения важных областей. Достаточно применения разных оттенков цветов.
На сайте Vimeo продемонстрирован данный прием: форма регистрации находится на более темной подложке, тем самым выделяясь на фоне остального контента. В результате, она бросается в глаза сразу после светлого логотипа и слогана. Тем самым страница сама подсказывает посетителю следующий шаг для действия.
Высоких вам конверсий!
По материалам: impactbnd.comimage source benedeki
01-03-2016
Nifty Turquoise — Инструменты для работы с цветом онлайн
Nifty Turquoise — Инструменты для работы с цветом онлайн — PhotoKit.com- Онлайн-инструменты для работы с цветом
- Изящный бирюзовый
Night Black
Olive Wood
Palm Breeze
Perfect Pink
Pirate Black
Precision
Radiant Lilac
Resort White
900 08 Королевская интригаСатоимо Браун
Шаурма
Скользкий камень
Особый серый
Клубничная пыльца
Сладкий лепесток
Жаждущий четверг
Раковина корыта
Венера Дева
Кресс водяной специи
Винная пробка 9 0009
Zircon Ice
Amber Moon
Argento
Ballet Rose
Big Bus Желтый
Голубой тетерев
Кирпич
Капустный лист
Касторовый серый
Китайский фонарик
Кофейный
Треснувшая земля
Dark Pansy
Различное золото
Dynamic Yellow
Eton Blue
Fire Bolt
Fresh Blue
Giant’s Club
Grape Fizz 90 009
Gulf Harbour
Himalaya
Imperial Red
Jinza Safflower
Lapis на Нептуне
Светлый Пуффбол
Люсея
Масала
Молочно-зеленый
Мшистая статуя
Палитра цветов
Найдите идеальный цвет с помощью нашей палитры цветов.
Генератор палитры
Загрузите фото, и мы воспользуемся алгоритмом для создания вашей палитры.
Цветовой круг
Откройте для себя прекрасные цветовые гармонии, используйте цветовой круг для создания великолепных цветовых палитр.
Поиск цвета
Отобранный вручную список из 29230 уникальных названий цветов. полнотекстовый поиск в списке цветов.
Устройство смены цвета
Изменение цвета изображения на основе палитры. Перетащите ползунок, чтобы изменить цвет изображения.
Калькулятор цвета
Цветовые преобразования и функции замера.
Получите значения (коды) RGB, HEX, CMYK, HSL, Hwb, Ncol любого цвета.
Пипетка
Нажмите кнопку пипетки и выберите цвет в любом месте экрана!
Градиент цвета
Этот инструмент генерирует шестнадцатеричные градиенты цветов CSS (#) за заданное количество шагов. Например, полезно создать цветовую палитру и поддерживать гармонию цветов.
Доступность цвета
Доступный конструктор цветовой палитры. Использование лучших практик доступности улучшает взаимодействие с пользователем для всех пользователей.
PhotoKit: фоторедактор
Начните бесплатно
1. Работа в Chrome и Mac/IOS Safari
2.
Редактор изображений на основе ИИ
✓ Потрясающие эффекты изображения
✓ Удаление фона
✓ Ретушь изображения
✓ Улучшение изображения одним касанием
✓ Автокоррекция перспективы 9015 1 ✓ Креативный коллаж шаблоны
✓ Добавление текстовых и графических элементов, таких как указатель, стрелка, круг и другие
✓ Обрезка, изменение размера, поворот и легкое применение основных правок
3. Пакетный редактор изображений
✓ Массовая загрузка изображений, изменение размера, обрезка, сжатие, конвертер, водяной знак, фильтр, переименование
4. Доступ к более чем 2,3 миллионам фотографий, иллюстраций, векторной графики
Какой инструмент редактирования изображений в PhotoKit лучше всего подходит?
Мой новый любимый онлайн-редактор фотографий
PhotoKit меня приятно удивил. Я использовал много различных онлайн-редакторов фотографий, но этот имеет лучший, интуитивно понятный и очень функциональный интерфейс.
Он также имеет широкий спектр фильтров, которые являются фантастическими и простыми в использовании.
— Терпение, цифровой маркетинг
Отличный фоторедактор, который работает
Отличный инструмент! Сначала я купил его для удаления фона с фотографий, но, наконец, это настоящий небольшой полный набор инструментов для выполнения множества простых задач на изображениях. для удаления фона качество отличное.
Кэтрин, Мокплюс
Отлично подходит для начинающих в области редактирования фотографий
Мне нравится, как вы можете масштабировать изображения и сжимать их, а также добавлять к ним новые фильтры одним щелчком мыши! Вы также можете сохранить их все за считанные секунды одним щелчком мыши — это так просто в использовании и делает все безболезненно. Фотокит лучший!
Ева Уильямс, журналист Исправить фото
Наши инструменты для обработки изображений.
PhotoKit интегрирован с мощным онлайн-редактором фотографий. Онлайн-редактор фотографий Photokit содержит множество замечательных функций, которые помогут вам улучшить ваши фотографии. Всего несколькими щелчками мыши вы можете улучшать фотографии, ретушировать портреты, удалять фон, применять эффекты, создавать фотоколлажи, а также с легкостью обрезать, изменять размер, поворачивать и применять базовые правки. Полезные пакетные обработки изображений (форматы png, jpg, gif, bmp, tiff и RAW). Пакетная обработка или обработка нескольких изображений одновременно. Массовое изменение размера изображений, обрезка, сжатие, конвертер, вырезание, водяной знак, фильтр, переименование и загрузка.
Вырез
Inpaint
Гладкость
Четкость
Экспозиция
Баланс
Коррекция
Эффекты
Па lett
Style
Filter
Sketch
Cartoon
Vectorization
Draw
Dodge
Burn
Desaturate
Blur
Mosaic
Eraser
Magic Eraser
Colorize
Background
Текст
Фигуры
Наклейки
Изменение размера
Обрезка
Вырезка
Преобразование
Фокус
Война p
Углы
Рамка
Коллаж
Сшивание
Слияние
Смешивание
Изменить цвет фона на БИРЮЗОВЫЙ на вашей фотографии, картинке, изображении
Изменить цвет фона на БИРЮЗОВЫЙ на вашей фотографии, картинке, изображенииБесплатное приложение для установки БИРЮЗОВОГО фона на вашем изображении онлайн
Работает на aspose.
com и aspose.cloud *Загружая свои файлы или используя наш сервис, вы соглашаетесь с нашими Условиями обслуживания и Политикой конфиденциальностиПоделиться в LinkedIn
Посмотреть другие приложения
Попробуйте наш Cloud API
Посмотреть исходный код
Оставить отзыв
Добавить это приложение в закладки действие
Aspose.Imaging Change Background
Как изменить фон на изображениях с помощью Aspose.Imaging Change Background
- Щелкните внутри области перетаскивания файлов, чтобы загрузить изображения, или перетащите файлы изображений
- Вы можете загрузить максимум 10 файлов для операция
- После загрузки ваш файл изображения будет обработан автоматически, и вы увидите результат операции
- Выберите желаемый цвет фона
- При необходимости вы можете улучшить результат операции в интерактивном режиме с помощью инструментов редактирования
- При необходимости измените формат выходного изображения и нажмите кнопку «Получить результат» для получения окончательного результата.
- Ссылка для скачивания полученных изображений будет доступна сразу после завершения операции. полученный файл изображения на ваш адрес электронной почты
- Обратите внимание, что файл будет удален с наших серверов через 24 часа, а ссылки для скачивания перестанут работать после этого периода времени
FAQ
❓ Как я могу изменить фон на изображении ?
Во-первых, вам нужно добавить файлы изображений для обработки: перетащите файлы изображений или щелкните внутри белой области, чтобы выбрать файлы. Затем установите желаемый цвет фона и дождитесь результата операции. Когда изображение будет обработано, вы сможете скачать файл результата
❓ В чем преимущество предлагаемой техники смены фона?
Преимущество в прогрессивном алгоритме обработки изображений, а также в возможности корректировки результата обработки пользователем в интерактивном режиме
🛡️ Безопасно ли менять фон изображения с помощью бесплатного приложения Aspose.
Imaging Change Background?Да, ссылка для загрузки файлов результатов будет доступна сразу после завершения операции обработки изображения. Мы удаляем загруженные файлы через 24 часа, и ссылки для скачивания перестают работать по истечении этого периода времени. Никто не имеет доступа к вашим файлам. Наша обработка изображений абсолютно безопасна
Когда пользователь загружает свои данные из стороннего сервиса, они обрабатываются так же, как указано выше.
Единственное исключение из вышеуказанных политик возможно, когда пользователь решает поделиться своими данными через форум с просьбой о бесплатной поддержке, в этом случае только наши разработчики имеют доступ к ним для анализа и решения проблемы.
💻 Могу ли я изменить фон изображения в Linux, Mac OS или Android?
Да, вы можете использовать бесплатное приложение Aspose.Imaging Change Background в любой операционной системе с веб-браузером. Наш сервис обработки изображений работает онлайн и не требует установки программного обеспечения
🌐 Какой браузер мне использовать для смены фона изображения?
Вы можете использовать любой современный браузер для обработки своих изображений, например, Google Chrome, Firefox, Opera, Safari
❓ Могу ли я использовать полученное изображение в коммерческих целях?
Хотя наши приложения бесплатны, вы не ограничены в коммерческом использовании полученных изображений, избегая при этом нарушения прав третьих лиц на исходные изображения.
Imaging Change Background?