Цветовые пространства и контрастность для доступного дизайна.
RGB, HSL, HSB, Lab, LCh, OKLCH - цветовые пространства или системы представления цвета. А в чем работать дизайнеру?
Конечно, нужно соблюдать стандарты по цвету и контрастности.
А дальше давайте сделаем рейтинг.
4⃣ RGB (Red, Green, Blue)
Человеческий глаз способен различить больше цветов, чем отображают многие устройства. Обычные мониторы показывают небольшой набор sRGB. Но сейчас все современные устройства Apple и многие OLED-экраны поддерживают на 30% больше цветов, чем sRGB.
3⃣ HSL/HSB (Hue, Saturation, Lightness/Brightness)
Часто используется, хотя в нем страдает однородность: в силу особенностей зрения, хроматические цвета с одинаковым значением яркости (например, желтый и фиолетовый) не выглядят одинаково светлыми и вот здесь проблема с доступностью. Когда вы пытаетесь осветлить или затемнить объект, то могут получиться блеклые цвета и нечитабельный текст.
2⃣ Lab (CIELAB), LCh (CIELCh)
Значения цвета в LAB задаются через светлоту (Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность. A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.
Вот как построена система цвета у Stripe, которые хотели сделать свой сайт доступным, но оставаться в своей дизайн-системе.
🏆And the winner is ... Oklab и OKLCH (Lightness, Chroma, Hue, alpha).
Математика OKLCH ближе к работе наших глаз. У OKLCH предсказуемая яркость — легко сохранить контрастность и читаемость текста. Статья от создателей Oklab и OKLCH.
Это пространство новое, создано в 2020 г., но уже есть в генераторах палитр, например huetone.ardov.me - здесь вы найдете палитры от Semrush, Stripe, IBM и оценку цвета стандартами APCA, WСAG. А ребята из "Злых марсиан" сделали свой генератор.
По материалам:
✧ Видео от дизайнера Мета о разработке доступной дизайн-системы
✧ Статья от “Злых марсиан” про OKLCH
✧ Цветовые пространства: большой обзор
✧ Проектирование доступных цветовых систем
RGB, HSL, HSB, Lab, LCh, OKLCH - цветовые пространства или системы представления цвета. А в чем работать дизайнеру?
Конечно, нужно соблюдать стандарты по цвету и контрастности.
А дальше давайте сделаем рейтинг.
4⃣ RGB (Red, Green, Blue)
Человеческий глаз способен различить больше цветов, чем отображают многие устройства. Обычные мониторы показывают небольшой набор sRGB. Но сейчас все современные устройства Apple и многие OLED-экраны поддерживают на 30% больше цветов, чем sRGB.
3⃣ HSL/HSB (Hue, Saturation, Lightness/Brightness)
Часто используется, хотя в нем страдает однородность: в силу особенностей зрения, хроматические цвета с одинаковым значением яркости (например, желтый и фиолетовый) не выглядят одинаково светлыми и вот здесь проблема с доступностью. Когда вы пытаетесь осветлить или затемнить объект, то могут получиться блеклые цвета и нечитабельный текст.
2⃣ Lab (CIELAB), LCh (CIELCh)
Значения цвета в LAB задаются через светлоту (Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность. A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.
Вот как построена система цвета у Stripe, которые хотели сделать свой сайт доступным, но оставаться в своей дизайн-системе.
🏆And the winner is ... Oklab и OKLCH (Lightness, Chroma, Hue, alpha).
Математика OKLCH ближе к работе наших глаз. У OKLCH предсказуемая яркость — легко сохранить контрастность и читаемость текста. Статья от создателей Oklab и OKLCH.
Это пространство новое, создано в 2020 г., но уже есть в генераторах палитр, например huetone.ardov.me - здесь вы найдете палитры от Semrush, Stripe, IBM и оценку цвета стандартами APCA, WСAG. А ребята из "Злых марсиан" сделали свой генератор.
По материалам:
✧ Видео от дизайнера Мета о разработке доступной дизайн-системы
✧ Статья от “Злых марсиан” про OKLCH
✧ Цветовые пространства: большой обзор
✧ Проектирование доступных цветовых систем
❤2👍1🍾1
Недавно мы познакомились со Светой Бондаренко, автором канала Неограниченные возможности. Наш сегодняшний материал перекликается с ее постом о проектировании интерфейсов для людей с дальтонизмом.
Около 10% населения Земли имеют ту или иную форму цветовой слепоты (дальтонизма). Слепота может быть как в отдельном спектре, так и означать полную невозможность различать цвета.
На что ориентироваться, чтобы сделать дизайн для таких людей доступным?
◆ Не полагайтесь только на цвет
Классический пример — часто при вводе логина и пароля ошибка подсвечивается красным. Лучше, если помимо цвета, в таких формах будет еще ориентир — например, иконка с восклицательным знаком.
◆ Делайте контрастно
Контрастный фон различим для всех, это основа создания доступного интерфейса. Проверяйте свои макеты в Фигме с помощью специальных плагинов:
Color Blind
A11y - Color Contrast Checker
Для быстрой проверки наложите поверх фрейма с интерфейсом серый прямоугольник и поставьте режим отображения Saturation. Так он станет черно-белым и будут заметны основные неконтрастные элементы.
◆ Используйте паттерны и текстуры
Тогда даже неконтрастные элементы интерфейса не смешаются друг с другом. Еще об этом есть классный пост у наших коллег.
◆ Избегайте «кислотных» цветов
Лучше не использовать такие цвета в интерфейсах, но если это необходимость — не ставьте их друг рядом с другом. При взгляде на подобные сочетания формируется «остаточное изображение», и это значительно затрудняет восприятие информации у любого человека.
Материалы:
Designing For (and With) Color Blindness
Make your design system accessible — Part 1: Color
en<able> - о дизайне
Около 10% населения Земли имеют ту или иную форму цветовой слепоты (дальтонизма). Слепота может быть как в отдельном спектре, так и означать полную невозможность различать цвета.
На что ориентироваться, чтобы сделать дизайн для таких людей доступным?
◆ Не полагайтесь только на цвет
Классический пример — часто при вводе логина и пароля ошибка подсвечивается красным. Лучше, если помимо цвета, в таких формах будет еще ориентир — например, иконка с восклицательным знаком.
◆ Делайте контрастно
Контрастный фон различим для всех, это основа создания доступного интерфейса. Проверяйте свои макеты в Фигме с помощью специальных плагинов:
Color Blind
A11y - Color Contrast Checker
Для быстрой проверки наложите поверх фрейма с интерфейсом серый прямоугольник и поставьте режим отображения Saturation. Так он станет черно-белым и будут заметны основные неконтрастные элементы.
◆ Используйте паттерны и текстуры
Тогда даже неконтрастные элементы интерфейса не смешаются друг с другом. Еще об этом есть классный пост у наших коллег.
◆ Избегайте «кислотных» цветов
Лучше не использовать такие цвета в интерфейсах, но если это необходимость — не ставьте их друг рядом с другом. При взгляде на подобные сочетания формируется «остаточное изображение», и это значительно затрудняет восприятие информации у любого человека.
Материалы:
Designing For (and With) Color Blindness
Make your design system accessible — Part 1: Color
en<able> - о дизайне
🔥5👍1🏆1
🔮 Привет, на связи Анжелика 🙂
Хочу поделиться с вами нашими ближайшими планами. Мы перевели статью про Duolingo на английский язык. Нам помогали нейропсихолог из США и переводчик из Австралии, который работает с дислексией. Ну какой match, да? Статья получилась прекрасная. Именно такого уровня язык я мечтала видеть в английской версии.
Сейчас мы составили чек-лист, что нужно сделать перед публикацией на Medium, это и проверка интерфейсов, и обновление иллюстраций, сопроводительное письмо в Duolingo и еще много нюансов.
Теперь решаем, выпускать ли англоязычные кейс и статью одновременно или все же выдержать паузу между ними.
Это наш первый выход на компанию такого уровня. Никаких ожиданий нет. Нами руководит только одно - наши мысли могут получить развитие, а пользователи - доступную цифровую среду.
#enable_duolingo
Хочу поделиться с вами нашими ближайшими планами. Мы перевели статью про Duolingo на английский язык. Нам помогали нейропсихолог из США и переводчик из Австралии, который работает с дислексией. Ну какой match, да? Статья получилась прекрасная. Именно такого уровня язык я мечтала видеть в английской версии.
Сейчас мы составили чек-лист, что нужно сделать перед публикацией на Medium, это и проверка интерфейсов, и обновление иллюстраций, сопроводительное письмо в Duolingo и еще много нюансов.
Теперь решаем, выпускать ли англоязычные кейс и статью одновременно или все же выдержать паузу между ними.
Это наш первый выход на компанию такого уровня. Никаких ожиданий нет. Нами руководит только одно - наши мысли могут получить развитие, а пользователи - доступную цифровую среду.
#enable_duolingo
❤7🔥3⚡1
Пост-знакомство 🎉
Мы поняли, что за все время существования канала мы так и не представились 🌚 Пришло время выйти из тени и рассказать о себе!
🔮Анжелика:
— Привет, я Анжелика, старший коммуникационный дизайнер, который переходит в продукт. Главный ориентир года - человечность и помощь. Хочу работать с цифровой доступностью, сделать продукт со смыслом и пользой и больше экспериментировать.
Обожаю искусство.Душнила.
🧿Ася:
— Привет! Я Ася, дизайнер интерфейсов. Раньше занималась архитектурой, которую нежно люблю до сих пор, и коммуникационным дизайном. Изучаю, как создавались и развивались разные продукты, и каким образом их делали доступными для людей с разными потребностями. А еще преподаю джазовые танцы 🕺
Мы познакомились осенью 2022 г. в рамках учебного проекта, и нас так захватила эта тема, что мы продолжаем работу уже после того, как он закончился. В этом канале — наши мысли о дизайне: доступном, полезном и просто классном
Мы открыты к сотрудничеству! Пишите @anzhelikagerman и @asstaroverova
Мы поняли, что за все время существования канала мы так и не представились 🌚 Пришло время выйти из тени и рассказать о себе!
🔮Анжелика:
— Привет, я Анжелика, старший коммуникационный дизайнер, который переходит в продукт. Главный ориентир года - человечность и помощь. Хочу работать с цифровой доступностью, сделать продукт со смыслом и пользой и больше экспериментировать.
Обожаю искусство.
— Привет! Я Ася, дизайнер интерфейсов. Раньше занималась архитектурой, которую нежно люблю до сих пор, и коммуникационным дизайном. Изучаю, как создавались и развивались разные продукты, и каким образом их делали доступными для людей с разными потребностями. А еще преподаю джазовые танцы 🕺
Мы познакомились осенью 2022 г. в рамках учебного проекта, и нас так захватила эта тема, что мы продолжаем работу уже после того, как он закончился. В этом канале — наши мысли о дизайне: доступном, полезном и просто классном
Мы открыты к сотрудничеству! Пишите @anzhelikagerman и @asstaroverova
❤12🔥5👏1🕊1
«Волосы — не главное»
🧿Привет! На связи Ася. Сегодня хочу поделиться кейсом «Волосы — не главное» от High Voltage Brains
Студия делала фирменный стиль для фонда «Подари жизнь» в День детей, больных раком. Он простой и запоминающийся — красный фон, мягкий шрифт и паттерн, который напоминает волосы.
Партнерами стали барбершоп Chop-Chop и временные татуировки Unicorns Out. Мне понравилось, как через это обогатился смысл дизайна: яркий плакат с надписью «Волосы — не главное» смотрится в парикмахерской иронично, цепляет и запоминается.
Еще студия сделала маску для ныне запрещенной социальной сети, которая за неделю набрала 186000 просмотров.
Итог: дизайн и продвижение вызвали интерес к проблеме, в соцсетях люди делились своими историями облысения из-за рака. Охват за неделю — 2 500 000 человек!
Когда о проблеме говорят, она перестает быть стигматизированной → люди, которые с ней столкнулись, перестают чувствовать себя «неправильными». Это и есть одна из задач инклюзивного дизайна.
Кейс на сайте агентства
🧿Привет! На связи Ася. Сегодня хочу поделиться кейсом «Волосы — не главное» от High Voltage Brains
Студия делала фирменный стиль для фонда «Подари жизнь» в День детей, больных раком. Он простой и запоминающийся — красный фон, мягкий шрифт и паттерн, который напоминает волосы.
Партнерами стали барбершоп Chop-Chop и временные татуировки Unicorns Out. Мне понравилось, как через это обогатился смысл дизайна: яркий плакат с надписью «Волосы — не главное» смотрится в парикмахерской иронично, цепляет и запоминается.
Еще студия сделала маску для ныне запрещенной социальной сети, которая за неделю набрала 186000 просмотров.
Итог: дизайн и продвижение вызвали интерес к проблеме, в соцсетях люди делились своими историями облысения из-за рака. Охват за неделю — 2 500 000 человек!
Когда о проблеме говорят, она перестает быть стигматизированной → люди, которые с ней столкнулись, перестают чувствовать себя «неправильными». Это и есть одна из задач инклюзивного дизайна.
Кейс на сайте агентства
❤17🌚1
🔮 На связи Анжелика. Начинаю серию практических постов про типографику и цифровую доступность.
Вам нравятся актеры Райан Гослинг и Райан Рейнольдс? (картинка 1) Мне очень! Но проблема в том, что я их не различаю. А что если мы подчеркнем ярче их особенности? (картинка 2) Ну вот теперь я их не перепутаю! )))
Но при чем тут типографика? Для цифровой доступности очень важно, чтобы шрифт был читабельный и разборчивый.
Хорошую читабельность обеспечивает достаточное межбуквенное и межстрочное расстояние.
Разборчивость я показала на картинке 3 и 4: буквы и цифры 1, L, I, 0, O, o похожи по строению и могут плохо читаться рядом друг с другом, как в колонке слева. Поэтому лучше выбрать шрифты из правой части, где они хорошо различимы, особенно это заметно на последней "заблюренной" картинке.
По мотивам этой статьи.
#Доступнаятипографика
en<able> - о дизайне
Вам нравятся актеры Райан Гослинг и Райан Рейнольдс? (картинка 1) Мне очень! Но проблема в том, что я их не различаю. А что если мы подчеркнем ярче их особенности? (картинка 2) Ну вот теперь я их не перепутаю! )))
Но при чем тут типографика? Для цифровой доступности очень важно, чтобы шрифт был читабельный и разборчивый.
Хорошую читабельность обеспечивает достаточное межбуквенное и межстрочное расстояние.
Разборчивость я показала на картинке 3 и 4: буквы и цифры 1, L, I, 0, O, o похожи по строению и могут плохо читаться рядом друг с другом, как в колонке слева. Поэтому лучше выбрать шрифты из правой части, где они хорошо различимы, особенно это заметно на последней "заблюренной" картинке.
По мотивам этой статьи.
#Доступнаятипографика
en<able> - о дизайне
🔥10👍2❤1🤣1
ДАЙТЕ МНЕ ПОБЕДИТЬ: история Специальной Олимпиады в России
Всем привет! На связи Анжелика 🔮 В отпуске открылось второе дыхание и накопилось очень много материалов. Буду рассказывать постепенно.
Начну август с восхищения и вдохновения этими ребятами, сильные, смелые, талантливые и абсолютно феноменальные 💜
Видео по ссылке - https://www.youtube.com/watch?v=gcnwB-3zzIo
Мне очень понравился комментарий под видео:
Операция - специальная
Олимпиада - специальная
Организаторы - специальные
Драма - человеческая.
Но хочу добавить: Помощь - общая.
Ну и не могу не сказать про дизайн и искусство в этом видео: потрясающая картина Тайная вечеря Рауфа Мамедова и брендинг парусного клуба ZigZag, который делали ребята из Nimax.
en<able> - о дизайне
Всем привет! На связи Анжелика 🔮 В отпуске открылось второе дыхание и накопилось очень много материалов. Буду рассказывать постепенно.
Начну август с восхищения и вдохновения этими ребятами, сильные, смелые, талантливые и абсолютно феноменальные 💜
Видео по ссылке - https://www.youtube.com/watch?v=gcnwB-3zzIo
Мне очень понравился комментарий под видео:
Операция - специальная
Олимпиада - специальная
Организаторы - специальные
Драма - человеческая.
Но хочу добавить: Помощь - общая.
Ну и не могу не сказать про дизайн и искусство в этом видео: потрясающая картина Тайная вечеря Рауфа Мамедова и брендинг парусного клуба ZigZag, который делали ребята из Nimax.
en<able> - о дизайне
❤5🐳1
Хотела добавить, что я неслучайно оставила ссылку на видео в открытом формате с подчеркиванием, так как для людей с плохим зрением так проще опознать ссылку. Также видела запросы от людей, чтобы ссылки в тг всегда подчеркивались, так как не выделение цветом не спасает.
🔥7👌1
This media is not supported in your browser
VIEW IN TELEGRAM
Приложение Букмейта стало доступно незрячим людям.
Теперь оно в полноценном режиме поддерживает работу со скринридерами. Чтобы скринридер корректно воспроизводил интерфейс, необходима специальная разметка. В последней версии приложения размечены и подписаны все значимые элементы: кнопки, разделы и другие объекты.
Что важного в адаптации:
✦ Сгруппировали повторяющиеся элементы, чтобы информация, когда её зачитывает скринридер, не дублировалась без необходимости
✦ Разметка помогает незрячему пользователю перемещаться по элементам последовательно, останавливаясь там, где ему интересно
✦ Над адаптацией работала в том числе группа незрячих экспертов.
Я давно слежу за развитием этого приложения, в 2022 году их сервис купил Яндекс, который является одной из ведущих компаний по работе с цифровой доступностью. Но такие адаптации можно делать не только в крупных компаниях :)
По закону жанра тут должен быть вопрос: а вы адаптируете свои приложения? Но поставлю лучше опрос )
en<able> - о дизайне
Теперь оно в полноценном режиме поддерживает работу со скринридерами. Чтобы скринридер корректно воспроизводил интерфейс, необходима специальная разметка. В последней версии приложения размечены и подписаны все значимые элементы: кнопки, разделы и другие объекты.
Что важного в адаптации:
✦ Сгруппировали повторяющиеся элементы, чтобы информация, когда её зачитывает скринридер, не дублировалась без необходимости
✦ Разметка помогает незрячему пользователю перемещаться по элементам последовательно, останавливаясь там, где ему интересно
✦ Над адаптацией работала в том числе группа незрячих экспертов.
Я давно слежу за развитием этого приложения, в 2022 году их сервис купил Яндекс, который является одной из ведущих компаний по работе с цифровой доступностью. Но такие адаптации можно делать не только в крупных компаниях :)
По закону жанра тут должен быть вопрос: а вы адаптируете свои приложения? Но поставлю лучше опрос )
en<able> - о дизайне
⚡7🙏1
Внедряете цифровую доступность в сайты/приложения?
Anonymous Poll
3%
Да, я в Яндексе
35%
Да, работаю с цифровой доступностью
49%
Нет, но хочу
14%
Нет, не успеваю
Сегодня у нас большая радость — мы закончили работу над нашим кейсом «Дуолинго для людей с дислексией»!
Первая часть работы была сделана в начале июня — тогда мы опубликовали статью на vc, которая собрала много положительных откликов и даже залетела в подборку «Журналус» от студии Артемия Лебедева. Ссылка на нее — в первом комментарии.
Авчера вечером сегодня ночью мы опубликовали кейс и статью на английском!
Мы очень рады, что довели работу до этого этапа. И много благодарности людям, которые помогали нам с переводом на английский и анимацией для кейса ❤️
Будем рады вашей поддержке!
Статья на Medium (не забудьте включить vpn):
https://medium.com/@enabledesignteam/four-features-for-inclusive-design-using-duolingo-app-as-an-example-db3ef8c60fd0
Кейс на Behance:
https://www.behance.net/gallery/176846711/Duolingo-For-Dyslexic-People
en<able> - о дизайне
Первая часть работы была сделана в начале июня — тогда мы опубликовали статью на vc, которая собрала много положительных откликов и даже залетела в подборку «Журналус» от студии Артемия Лебедева. Ссылка на нее — в первом комментарии.
А
Мы очень рады, что довели работу до этого этапа. И много благодарности людям, которые помогали нам с переводом на английский и анимацией для кейса ❤️
Будем рады вашей поддержке!
Статья на Medium (не забудьте включить vpn):
https://medium.com/@enabledesignteam/four-features-for-inclusive-design-using-duolingo-app-as-an-example-db3ef8c60fd0
Кейс на Behance:
https://www.behance.net/gallery/176846711/Duolingo-For-Dyslexic-People
en<able> - о дизайне
Medium
Four features for inclusive design using Duolingo app as an example
We are En<able> design Team: Asya and Anzhelika.
❤11🔥3🍾3🤩1👀1