13 августа

Как использовать цвета в диджитал пространстве?

10 советов от дизайнера, работавшего с Google, Twitter и Mitsubishi.

Фото: PR.uz

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

Ниже — 10 практических советов по тому, как выбирать цвета и использовать их в веб-дизайне от дизайнера Ника Бабича, который работал с Google, Twitter и Mitsubishi.

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

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

Например, можно использовать основной цвет бренда в качестве функциональных элементов, как это делает McDonald’s, например. На сайте call-to-action кнопки «Заказать сейчас» и «Загрузить приложение» выделены знаковым жёлтым цветом.

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

Как бренду создать собственную цветовую схему

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

2. Вдохновляйтесь природой

Если бренд ещё не закрепил за собой определённые цвета, можно вдохновиться природой. Пользовательские интерфейсы, построенные по такой цветовой схеме, будут органично выглядеть, поскольку в природе всё продумано априори. Всё просто: сделайте снимок на природе, а чтобы извлечь цвета используйте Adobe Extract Theme.

3. Изучите психологию цвета

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

4. Откажитесь от чёрного текста

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

5. Основных цветов не должно быть много

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

6. Правила пользования отдельными цветами

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

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

7. Цвета должны быть доступными

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

Дизайн интерфейса требует постоянной проверки цветового контраста и иконок. В этом могут помочь разные инструменты. Один из них — WebAIM Contrast Check.

При тестировании пользовательского интерфейса особенно обратите внимание на отключенные состояния. Отключенное состояние обычно возникает при низкой контрастности, что ухудшает читаемость отображаемого текста и иконок. WCAG (Web Content Accessibility Guidelines) требует контраста не менее 4,5:1 для текста и текстовых изображений даже при отключенном состоянии.

8. Не цветом единым

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

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

9. Проверьте цветовую схему в деле

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

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

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

10. Регулярно проводите инвентаризацию интерфейса

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

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

Читайте также:

Андрей Сафронюк: «Данные Global Innovation Index подтверждаютcя статистикой предприятий Orient Group»

29 сентября

Маркетплейс Rozetka временно приостановил свою деятельность в Узбекистане

29 сентября

Магазин мужской одежды Vip Brand использует диких животных для продвижения товаров

29 сентября

Популярные новости

Кейс для Dorco: как разработка детальной коммуникации увеличила продажи бритвенных станков на 19%

Маркетплейс Rozetka временно приостановил свою деятельность в Узбекистане

Abstract подготовил серию имиджевых роликов для Pure Milky

Количество пользователей Facebook и Instagram в Узбекистане составляет более 10 млн человек

Основатель Abstract Visuals о том, почему продакшенам не стоит работать напрямую с клиентами

Магазин мужской одежды Vip Brand использует диких животных для продвижения товаров

В Ташкенте откроется кино- и фотошкола Tashkent film school

Google обыграла успешное столкновение космического корабля NASA с астероидом

IT Park объявляет тендер на создание web-платформы

Больше новостей