The role of color in product design: ux of color palettes

ColorScheme.Ru

Colorscheme.ru – это сервис, который дает пользователям возможность не только подобрать гармоничные цвета и оттенки, используя цветовой круг, но и познакомиться с цветовой теорией. На сайте вы найдете множество интересных статей из книги Иоханнеса Иттена “Искусство Цвета”. Рекомендую обязательно их прочитать. В них содержится базовая информация о цвете.

Помимо прочего, сервис обладает дополнительным функционалом, который может пригодиться веб разработчикам. Для них доступны специальные ключевые слова, которые можно применять для обозначения того или иного цвета при программировании на HTML, CSS, JavaScript, Flash, и др.

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

Как выбрать идеальный цвет

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

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

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

Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.

Ease of use

The Adobe Color CC is completely on-brand if you’re familiar with other Adobe products. The design is flat and simple with usability firmly at the center of things. The core idea is front and center of the page that compromises a large color wheel, samples, sliders and some color rules.

You can manually drag the color wheel around to generate new colors, view other people’s color schemes, make a scheme from an uploaded image and more. It is a very powerful web app that every designer should use. I tend not to wax too lyrical about Adobe products because they are so expensive but Adobe Color CC is free and is very, very good at what it does.

Explore Color CC

The Explore menu within the Color CC website is very interesting indeed. It is especially useful for anyone looking for inspiration or who wants a color scheme. You can select the Most popular, All, Most used, Random and then some time settings for each. What the site returns is a page full of color schemes that immediately get the creative juices flowing.

The color schemes are many and varied as you would imagine. There are literally hundreds of schemes covering every color, mood, tone and depth. If you see a scheme you like, hover the cursor over it and select info. You are taken to its own page where you can see a much larger version of it. Click the color swatch once to make it full screen.

On the right is the Actions menu. Here you can offer appreciation (Like), save it to your own library if you register or log in with your Adobe ID, share or edit a copy of it. The ability to edit a copy of a scheme is probably useful for the more artistically inclined.

Важность цвета

Быстрые ссылки

Важность цвета
Adobe Color CC
Простота использования
Сделайте схему с Color CC
Слайд, чтобы править
Исследуй Цвет CC
Создайте цветовую схему из изображения в Adobe Color CC
Использование ваших схем в дизайне

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

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

Using your schemes in a design

Adobe Color CC displays the RGB values of each color selection which you can use however you like. However, if you use Illustrator, Photoshop or other Adobe product, you can utilize the scheme directly.

As long as you are logged in with your Adobe ID when creating the scheme, you can use it within another Adobe product as you see fit. For example, in Illustrator, select Window and then Color Themes. Your saved selections from Adobe Color CC should appear automatically within the themes window for you to use directly. Just add to swatches to save them in Illustrator and go from there.

Adobe Color CC is a fantastic resource for designers of all kinds. I know of no other app that comes close to the ease of use and powerful simplicity of Adobe Color CC. Considering it’s free to use even if you don’t own any other Adobe products, I think it’s a great resource!

Mycolor.Space

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

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

Дополнительный функционал

• Поддерживает HEX и RGB
• Создание 2-х цветного градиента CSS
• Создание 3-х цветного градиента CSS

Всего доброго. Ваш MrVector 🙂

Мы в соц медиа: Инстаграм | ВК | Фейсбук | Твиттер | Телеграм Канал | Телеграм Чат для Микростокеров

Трендовые темы для микростоковых авторов на: Patreon и VK Donate

Обсудить эту новость можно на нашем форуме о фотобанках и микростоках.

П.П.С. Чтобы оставаться в курсе происходящих событий и новостей подписывайтесь на еженедельную почтовую рассылку от www.supermicrostock.ru. В каждом выпуске, помимо прочего, вы будете получать 3 горячие рекомендаций на самые перспективные темы для векторных иллюстраторов. Рассылка выходит раз в неделю по воскресеньям.

Исследуй Цвет CC

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

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

Справа находится меню «Действия». Здесь вы можете выразить признательность (как), сохранить его в своей собственной библиотеке, если вы зарегистрируетесь или войдете в систему с помощью Adobe ID, поделитесь или отредактируете его копию. Возможность редактировать копию схемы, вероятно, полезна для более склонных к творчеству.

Использование ваших схем в дизайне

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

Если вы вошли в систему со своим Adobe ID при создании схемы, вы можете использовать ее в другом продукте Adobe по своему усмотрению. Например, в Illustrator выберите «Окно», а затем «Цветовые темы». Сохраненные вами выборки из Adobe Color CC должны автоматически появиться в окне тем, чтобы вы могли их использовать напрямую. Просто добавьте образцы, чтобы сохранить их в Illustrator и перейти оттуда.

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

Adobe Color

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

• Последовательная
• Монохромная
• Треугольная
• Комплементарная
• Сплит-комплементарная
• Двойная сплит-комплементарная
• Квадратная
• Составная
• Оттеночная
• Произвольная

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

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

Дополнительный функционал

• Генерация палитры из загруженной фотографии
• Генерация градиента из загруженной фотографии
• Симулятор дальтонизма
• Поддерживает RGB, PANTONE, HSV, CMYK и LAB

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

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

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

Сервис Adobe Color CC

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

Сервис Colormind

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

Сервис Colors

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

Сервис Color Safe

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

Сервис

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

Сервис Paletton

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

Сервис Colordot

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

Сервис Colourcode

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

Сервис Material Design Palette

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

Простота использования

Adobe Color CC полностью фирменный, если вы знакомы с другими продуктами Adobe. Конструкция плоская и простая с удобством в использовании. Основная идея – это лицевая сторона и центр страницы, которая ставит под угрозу большое цветовое колесо, образцы, ползунки и некоторые цветовые правила.

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

Make a scheme with Color CC

So can someone with next to no artistic ability such as me create a scheme? Sure you can.

To start, select one of the white circles in the color wheel. Drag it around the wheel until you find a tone you like. Depending on what you have set in Color Rule, the other four colors will move to complement or contrast your color choice. That part is very easy and is quite fun on its own.

The Monochromatic rule creates four colors with a similar tone and depth to the color you select on the wheel. Triad splits the wheel into three and delivers five colors that contrast but still work together. Complementary widens the space between colors but select ones that will work well together.

The Compound rules do well at finding complementary colors. Shades selects four complementary shades of your primary selection and Custom allows you to move the five sliders wherever you like on the wheel.

Сделайте схему с Color CC

Так может ли кто-то, у кого нет художественных способностей, такой как я, создать схему? Что вы можете.

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

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

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