- Статьи
- 5 мин на чтение
10
Практический метод брендинга
Каждый дизайнер рано или поздно сталкивается с проблемой выбора цветов для интерфейса. Он начинает с одного цвета бренда, но не знает, как подобрать другие, чтобы они с ним сочетались. В результате получается уродливый интерфейс, неспособный передать сильный образ, который бы ассоциировался с брендом.
Чтобы не выбирать случайные цвета наугад, есть практический метод, который даёт лучший результат. С его помощью вы поймёте, как подбирать наиболее подходящие цвета бренда и применять их к различным элементам интерфейса.
Дизайнеры допускают одну распространённую ошибку — они используют либо слишком много цветов, либо слишком мало. Пример выше демонстрирует интерфейс, в котором нет цветов. Он функционален, но отсутствие брендирования вызовет недоверие у пользователей. С другой стороны, в дизайне справа все цвета стоят на своих местах. В результате он производит впечатление надёжности, которое привлекает пользователей.
Слишком большое количество цветов также вредит бренду. Пример ниже демонстрирует интерфейс, в котором присутствует их обширный диапазон. В результате образ бренда выглядит бессвязным и непоследовательным. Когда пользователи думают о бренде, у них не возникает визуальный образ, потому что цветовая палитра слишком хаотичная.
В дизайне справа палитра более согласованная. Здесь есть дисциплина и контроль в выборе цветов. Помимо этого здесь цвета соответствуют элементам интерфейса. В результате он выглядит более эстетичным и формирует сильный образ бренда.
Содержание статьи
Четыре цвета
Чтобы создать устойчивый образ бренда нужно четыре цвета: чистый цвет (pure hue), светлый тон (tint), тёмный тон (shade) и тон с добавлением серого (tone). Дальше всё зависит от правильного применения. Вы будете использовать чистый цвет, чтобы создать светлый и тёмный тона, а также тон с добавлением серого.
Чистый цвет (Pure hue)
Основной цвет бренда — чистый цвет. Это эталонный цвет, на базе которого вы будете создавать другие цвета. Цвет должен быть ярким, красочным и насыщенным. Оранжевый в примере выше — это чистый цвет.
Применение
Чистый цвет — достаточно выразительный, поэтому следует использовать его дозированно и только для выделения небольших элементов. Например, применять его в визуальных подсказках, ссылках и активных вкладках. Не окрашивайте в чистый цвет большие элементы, такие как панель навигации, кнопки и поверхности, иначе при просмотре интерфейса они будут слишком отвлекать и утомлять.
Обратите внимание, как в плохом дизайне оранжевый цвет кричит и требует внимания. Высокая насыщенность и чистота цвета делают его ярким. Поэтому используйте такие цвета дозированно, для небольших элементов. Думайте о чистом цвете, как о специи. Вы применяете его, чтобы подчеркнуть естественный вкус пищи, а не перебить его.
Светлый тон (Tint)
Затем вы создаёте светлый тон, добавляя в чистый цвет белый, что приводит к максимальной яркости и низкому уровню насыщенности. В примере ниже яркость светлого тона равна 100%, а насыщенность — 7%.
Применение
Светлые тона — ненасыщенные, поэтому они хорошо подходят для больших поверхностей. Вы также можете использовать их, чтобы выделить текст на тёмном фоне. Однако не используйте светлый тон для кнопок призыва к действию на светлом фоне, потому что его будет трудно заметить.
Тёмный тон (Shade)
Для создания тёмного тона вы также будете использовать чистый цвет. Вместо белого, вы будете смешивать его с чёрным. В результате вы получите цвет с низким уровнем яркости и средней насыщенностью. В примере ниже вы видите, как тёмный тон оранжевого превращается в тёмно-коричневый цвет.
Применение
Тёмные тона позволяют сделать кнопки призыва к действию доступными для людей с нарушениями зрения. Если бы вы окрасили кнопки в чистый цвет, коэффициент доступности был бы неудовлетворительный. Однако кнопка с использованием тёмного тона поддерживает высокий контраст по отношению к белому тексту, и тем самым соответствует стандартам доступности.
Также тёмный тон можно использовать для того, чтобы выделить элементы высокого приоритета в режиме тёмной темы. Например, в примере выше тёмный тон есть на карточке «Следующая сессия» («Next session»). Поскольку это самый важный элемент, этот тон позволяет выделить его на светлом фоне.
Также полезно использовать тёмные тона для заголовков. Как правило, большинство дизайнеров выбирают для заголовков чёрный цвет. Однако тёмный тон обеспечивает высокий контраст и делает текст более брендированным и привлекательным.
Тон с добавлением серого (Tone)
Последний цвет для выбора — тон с добавлением серого. Его получают путём сочетания чистого цвета с серым цветом. Он обладает средней яркостью и немного более насыщенный, чем светлый тон. На поверхности он выглядит серым, но при ближайшем рассмотрении вы заметите разницу.
Применение
Используйте тон с добавлением серого для основного текста, подписей и метаданных. Это позволит сделать вторичный текст контрастным по отношению к заголовку и улучшит иерархию информации.
Текст, в котором есть тон с добавлением серого, выглядит лучше, чем серый текст, потому что дополнительный оттенок придаёт ему яркости. Это делает общий дизайн более брендированным и целостным.
Тон с добавлением серого также можно применять к неактивным иконкам и пунктам меню. Более низкий контраст цветов хорошо показывает неактивные состояния интерактивных элементов.
Типографика
Цвет – мощный элемент брендинга. А типографика — дополнительный элемент, вишенка на торте. В большинстве интерфейсов используют базовые шрифты, которые выглядят устаревшими и универсальными. Уникальный шрифт может придать интерфейсу больше индивидуальности и характера.
Вы с лёгкостью исправите непривлекательный интерфейс, если будете следовать этому руководству. Вам лишь нужно правильно выбрать и применить четыре цвета бренда в интерфейсе. Это не устранит глубоко укоренившиеся проблемы с юзабилити, но улучшит образ бренда и произведёт доверительное первое впечатление на пользователей.
Перевод статьи How to Fix Apple’s Illegible White Button Labels из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
Загрузка...
