Цвет и контраст — 2 важнейших элемента доступного дизайна

Цвет

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

  • Красный — часто означает опасность или что-то негативное
  • Ярко зеленый — обычно несет положительный смысл

Паттерны повышают контраст

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

Контраст

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

  • Принцип 1: учитывать интересы всех пользователей
  • Принцип 2: обеспечить гибкость использования
  • Принцип 3: обеспечить простое и интуитивное использование
  • Принцип 4: упростить восприятие информации

Советы и инструменты, которые помогут вам начать:

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

Пусть дизайн будет смелым, наглядным, осмысленным

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

Подбирайте цвета осознанно

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

Используйте белое пространство

Создайте смелый интерфейс, который вовлекает пользователя в процесс.

Используйте силу цвета

Цвет — это ключевой компонент дизайна. Он помогает сделать дизайн смелым, наглядным и осмысленным.

Учитывайте контекст

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

Изучайте значения цветов

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

Думайте о продукте в целом

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

Пользуйтесь доступными инструментами по подбору цветов:

  • getstark.co — используйте Stark при работе в Sketch. Инструмент позволяет быстро оценивать цветовой контраст и смотреть дизайн в контексте разных нарушений цветовосприятия.
  • colordrop.io — упрощает просмотр и поиск цветовых палитр.
  • lolcolors — забавно представленные цветовые палитры.
  • material.io — позволяет одновременно проверить контрастность разных цветовых палитр на разных экранах.
  • coolors.co — большой выбор одноцветных палитр.

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/