Как выбирать цвета для темной и светлой темы так, чтобы на них было комфортно смотреть
#графика #цвет #дизайн #интерфейс #ui #ux
Сегодня хочу рассказать про другую область, которая меня интересует уже как минимум две трети жизни: графический дизайн и дизайн интерфейсов в частности.
Не буду делать долгий экскурс в историю про то, как я учился работать в фотошопе по журналу «Игромания», вместо этого расскажу о том, что меня интересует в настоящий момент в этой области — принципы создания гармоничного и доступного интерфейса.
И хотя основной вид моей деятельности — это программирование, но из-за того, что я работаю в сфере веб разработки, то мне часто приходится либо верстать готовый дизайн, либо придумывать свой.
Я никогда систематически не изучал принципы дизайна, однако у меня всегда интуитивно было понимание того, что дизайн поддается каким-то пусть даже и гибким, но правилам. Это особенно заметно в области дизайна интерфейсов приложений.
Есть типовые элементы, такие как кнопки, переключатели, списки, заголовки и т.д. Эти элементы позволяют создать иерархию на странице с помощью формы, параметров шрифтов и цветов.
Но возникают вопросы:
• Как выбрать ширину и высоту элемента?
• Какими должны быть размер и толщина шрифта?
• Какие цвета выбрать, чтобы они сочетались?
Допустим, с выбором размеров все более-менее понятно. Часто встречаются значения кегля шрифтов или размера кнопок, кратные 8: 16, 24, 32 и т.п. Это называется модульной сеткой и большинство дизайн систем используют одинаковый шаг (очень часто — 8 пикселей).
Работая с готовыми компонентами, которые были созданы дизайнерами сам невольно привыкаешь к таким правилам и начинаешь делать с учетом этой сетки.
Другое дело — цвет
С цветом всё настолько сложно, что есть даже отдельная область под названием колористика, которая изучает закономерности и особенности восприятия цвета.
На самом деле, при создании интерфейса программы приходится очень тщательно подбирать цвета в зависимости от их применения.
Пару лет назад, во время создания очередного прототипа, я решил воспользоваться руководством Apple Human Interface Guidelines для подбора цветов темной и светлой темы. Мне хотелось, чтобы мой прототип выглядел также как и оригинальные приложения Apple, такие как заметки, календарь и другие.
Для меня оказалось большим открытием то, что для каждого цвета у Apple есть как минимум 2 варианта для светлой и темной темы по отдельности.
При использовании этих цветов они идеально смотрятся как на белом, так и на черном фоне. Такие казалось бы незначительные на первый взгляд изменения в яркости цвета оказалось играют огромную роль при восприятии цвета.
WCAG и доступный дизайн
Рекомендации для доступного веб-контента (WCAG) помогают оценить то, насколько цвета сочетаются по контрасту. Считается, что контраст 3:1 является оптимальным для комфортного определения элементов интерфейса и их состояния (например, при наведении на кнопку).
Однако, стандарт WCAG достаточно старый и возможно такие рекомендации были актуальны для старых устройств. Сейчас у дисплеев контраст лучше, особенно у AMOLED-дисплеев. Лично на мой взгляд контрастность 2:1 уже выглядит хорошо.
Если проверить все цвета Apple для светлой темы, то выяснится, что контрастность WCAG для них как минимум 2.1 (за исключением желтого).
Для оценки цветов по контрастности есть очень классный инструмент — huetone. Поэтому я теперь вместо того, чтобы просто так перебирать цвета, сначала опираюсь на рассчитанные значения контрастности. Только после этого пытаюсь «дожать» цвет до желаемого, что, как оказалось, не всегда возможно физически из-за особенностей восприятия цвета.
Подводя итог, для себя я сделал следующий простой и очевидный в ретроспективе вывод:
на белом фоне цвета должны быть темнее, а на темном — ярче
На сколько темнее и на сколько ярче — это достаточно размытая граница и здесь действительно играет роль субъективное восприятие.
С помощью таких инструментов оценки контрастности как WCAG можно точно измерить контрастность на начальном этапе, а не прикидывать ее буквально «на глаз».
#графика #цвет #дизайн #интерфейс #ui #ux
Сегодня хочу рассказать про другую область, которая меня интересует уже как минимум две трети жизни: графический дизайн и дизайн интерфейсов в частности.
Не буду делать долгий экскурс в историю про то, как я учился работать в фотошопе по журналу «Игромания», вместо этого расскажу о том, что меня интересует в настоящий момент в этой области — принципы создания гармоничного и доступного интерфейса.
И хотя основной вид моей деятельности — это программирование, но из-за того, что я работаю в сфере веб разработки, то мне часто приходится либо верстать готовый дизайн, либо придумывать свой.
Я никогда систематически не изучал принципы дизайна, однако у меня всегда интуитивно было понимание того, что дизайн поддается каким-то пусть даже и гибким, но правилам. Это особенно заметно в области дизайна интерфейсов приложений.
Есть типовые элементы, такие как кнопки, переключатели, списки, заголовки и т.д. Эти элементы позволяют создать иерархию на странице с помощью формы, параметров шрифтов и цветов.
Но возникают вопросы:
• Как выбрать ширину и высоту элемента?
• Какими должны быть размер и толщина шрифта?
• Какие цвета выбрать, чтобы они сочетались?
Допустим, с выбором размеров все более-менее понятно. Часто встречаются значения кегля шрифтов или размера кнопок, кратные 8: 16, 24, 32 и т.п. Это называется модульной сеткой и большинство дизайн систем используют одинаковый шаг (очень часто — 8 пикселей).
Работая с готовыми компонентами, которые были созданы дизайнерами сам невольно привыкаешь к таким правилам и начинаешь делать с учетом этой сетки.
Другое дело — цвет
С цветом всё настолько сложно, что есть даже отдельная область под названием колористика, которая изучает закономерности и особенности восприятия цвета.
На самом деле, при создании интерфейса программы приходится очень тщательно подбирать цвета в зависимости от их применения.
Пару лет назад, во время создания очередного прототипа, я решил воспользоваться руководством Apple Human Interface Guidelines для подбора цветов темной и светлой темы. Мне хотелось, чтобы мой прототип выглядел также как и оригинальные приложения Apple, такие как заметки, календарь и другие.
Для меня оказалось большим открытием то, что для каждого цвета у Apple есть как минимум 2 варианта для светлой и темной темы по отдельности.
При использовании этих цветов они идеально смотрятся как на белом, так и на черном фоне. Такие казалось бы незначительные на первый взгляд изменения в яркости цвета оказалось играют огромную роль при восприятии цвета.
WCAG и доступный дизайн
Рекомендации для доступного веб-контента (WCAG) помогают оценить то, насколько цвета сочетаются по контрасту. Считается, что контраст 3:1 является оптимальным для комфортного определения элементов интерфейса и их состояния (например, при наведении на кнопку).
Однако, стандарт WCAG достаточно старый и возможно такие рекомендации были актуальны для старых устройств. Сейчас у дисплеев контраст лучше, особенно у AMOLED-дисплеев. Лично на мой взгляд контрастность 2:1 уже выглядит хорошо.
Если проверить все цвета Apple для светлой темы, то выяснится, что контрастность WCAG для них как минимум 2.1 (за исключением желтого).
Для оценки цветов по контрастности есть очень классный инструмент — huetone. Поэтому я теперь вместо того, чтобы просто так перебирать цвета, сначала опираюсь на рассчитанные значения контрастности. Только после этого пытаюсь «дожать» цвет до желаемого, что, как оказалось, не всегда возможно физически из-за особенностей восприятия цвета.
Подводя итог, для себя я сделал следующий простой и очевидный в ретроспективе вывод:
на белом фоне цвета должны быть темнее, а на темном — ярче
На сколько темнее и на сколько ярче — это достаточно размытая граница и здесь действительно играет роль субъективное восприятие.
С помощью таких инструментов оценки контрастности как WCAG можно точно измерить контрастность на начальном этапе, а не прикидывать ее буквально «на глаз».