У нас небольшой ребрендинг и большая радость! Сегодня опубликовали свою первую статью на VC!
https://vc.ru/design/716792-4-fichi-dlya-inklyuzivnogo-dizayna-na-primere-prilozheniya-duolingo
В статье мы рассказываем, как работали с инклюзивностью, в частности с дислексией, как анализировали Duolingo, другие приложения и расширения для браузеров, как проводили нарративное интервью, работали с гипотезами, прототипировали, тестировали и, конечно, фейлили ))
Мы заложили много пользы: ссылки, таблицы, цитаты, видео. Надеемся, вам будет полезно!
en<able> - о дизайне
https://vc.ru/design/716792-4-fichi-dlya-inklyuzivnogo-dizayna-na-primere-prilozheniya-duolingo
В статье мы рассказываем, как работали с инклюзивностью, в частности с дислексией, как анализировали Duolingo, другие приложения и расширения для браузеров, как проводили нарративное интервью, работали с гипотезами, прототипировали, тестировали и, конечно, фейлили ))
Мы заложили много пользы: ссылки, таблицы, цитаты, видео. Надеемся, вам будет полезно!
en<able> - о дизайне
vc.ru
4 фичи для инклюзивного дизайна на примере приложения Duolingo — Дизайн на vc.ru
Мы — команда дизайнеров EnAble: Ася, Альбина, Анжелика. Расскажем, как делали приложение Duolingo доступным для дислексиков, как впервые работали с инклюзивностью.
❤4🔥1🎃1
Бесплатный гайд от IDEO по проектированию инклюзивных продуктов.
Human-centered дизайн - процесс совершенно не линейный, у каждого проекта свой путь, свой характер. Но очень важно следовать определенному плану, который хорошо структурирован в этой книге, и искать свое уникальное решение.
Скачать гайд
en<able> - о дизайне
Human-centered дизайн - процесс совершенно не линейный, у каждого проекта свой путь, свой характер. Но очень важно следовать определенному плану, который хорошо структурирован в этой книге, и искать свое уникальное решение.
Скачать гайд
en<able> - о дизайне
❤3🔥1👨💻1
Билайн, Альянс по защите детей в цифровой среде и Everland запустили курс цифровой грамотности для незрячих детей. Но я бы посоветовала и всем дизайнерам его посмотреть.
Материалы разработаны незрячими экспертами. Ребята расскажут про:
- айтрекер
- скринридер
- дисплей Брайля
- программа Линка
и многое другое
en<able> - о дизайне
Материалы разработаны незрячими экспертами. Ребята расскажут про:
- айтрекер
- скринридер
- дисплей Брайля
- программа Линка
и многое другое
en<able> - о дизайне
❤4🔥1🤓1
Инвалидность - это наш бизнес!
С таким манифестом выступают 500 компаний, которые собрались в одну коллаборацию Valuable500.
Не стесняясь, не боясь обидеть или задеть, они говорят прямо и откровенно о том, что инклюзивные лидеры создают инклюзивный бизнес. Инклюзивный бизнес создает инклюзивное общество. Совместная работа ускоряет и масштабирует систему.
Весь сайт говорит о смелости и даже дерзости, как будто людям уже надоело молчать, они устали, что их задвигают, не считаются с ними и они показали себя, какие они красивые, необычные и то, что они занимаются бизнесом.
Смело? Очень!
en<able> - о дизайне
С таким манифестом выступают 500 компаний, которые собрались в одну коллаборацию Valuable500.
Не стесняясь, не боясь обидеть или задеть, они говорят прямо и откровенно о том, что инклюзивные лидеры создают инклюзивный бизнес. Инклюзивный бизнес создает инклюзивное общество. Совместная работа ускоряет и масштабирует систему.
Весь сайт говорит о смелости и даже дерзости, как будто людям уже надоело молчать, они устали, что их задвигают, не считаются с ними и они показали себя, какие они красивые, необычные и то, что они занимаются бизнесом.
Смело? Очень!
en<able> - о дизайне
❤3🔥2😭1
Исследования и дизайн.
Мы пришли в исследования совсем недавно, поэтому искали встречи с профессионалами, чтобы услышать их мнение о нашем сайд-проекте "Duolingo для дислексиков". И вот нам посчастливилось поговорить с Костей Ефимовым лично.
Костя - соавтор канала @postpostresearch, исследователь с 20-летним опытом, социльный психолог и приятный собеседник. Говорили о нарративном интервью, о том, как его проводили, какие ошибки совершали, почему действовали так, а не иначе, как искали респондентов, кто нам помогал (спойлер - все). Когда искали информацию про этот тип глубинного интервью, мы закопались в социологических и психологических трудах, не поняли, как вообще это применять в дизайнерской практике, а вот Костя прояснил нам многое.
После разговора мы почувствовали еще больше мотивации продолжать исследовать и применять это в дизайне.
Сегодня на канале @postpostresearch как раз пост про силу нарративного интервью.
Мы пришли в исследования совсем недавно, поэтому искали встречи с профессионалами, чтобы услышать их мнение о нашем сайд-проекте "Duolingo для дислексиков". И вот нам посчастливилось поговорить с Костей Ефимовым лично.
Костя - соавтор канала @postpostresearch, исследователь с 20-летним опытом, социльный психолог и приятный собеседник. Говорили о нарративном интервью, о том, как его проводили, какие ошибки совершали, почему действовали так, а не иначе, как искали респондентов, кто нам помогал (спойлер - все). Когда искали информацию про этот тип глубинного интервью, мы закопались в социологических и психологических трудах, не поняли, как вообще это применять в дизайнерской практике, а вот Костя прояснил нам многое.
После разговора мы почувствовали еще больше мотивации продолжать исследовать и применять это в дизайне.
Сегодня на канале @postpostresearch как раз пост про силу нарративного интервью.
❤3💋1
Цветовые пространства и контрастность для доступного дизайна.
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