Дизайн-джем #17: инклюзивный дизайн, а также хранилища, плагины, гайды и туториалы для работы с иконками
В доступном дайджесте от Redmadrobot Design Lab.
Роботы до мигающих лампочек любят симбиоз пользы и красоты. Каждую неделю все самые захватывающие находки мы публикуем в нашем Telegram-канале Design Jam. В прошлом дайджесте мы рассказали историю создания знаменитых шрифтов Univers, Theinhard, Graphic и погрузились в мир визуальных символов и скрытых смыслов в плакатах и постерах.
В новом выпуске мы расскажем об универсальных дизайн-солдатах — иконках. Поделимся полезными ресурсами по теме и покажем, где скачать готовые наборы иконок для своих проектов.
Но первым делом поговорим об инклюзивном дизайне. Изучим интересные статьи и поговорим об инструментах, которые помогут сделать дизайн вашего продукта дружелюбнее и доступнее для всех пользователей, независимо от особенностей их здоровья.
С ограничениями здоровья время от времени может столкнуться каждый: будь-то перелом руки или проблемы со зрением или слухом. Если такие факторы не мешают взаимодействовать с продуктом, то в этом заслуга инклюзивного дизайна. Для начала вспомним его основные принципы, чтобы вплотную подойти к вопросу пользовательского опыта.
Понятность, отзывчивость, удобство функций и интерфейсов — эти и другие принципы легли в основу стандарта доступности web-контента — WCAG, разработанного Консорциумом всемирной паутины. В нем прописаны критерии доступности интернет-среды. Сухая на первый взгляд теория, станет твёрдой опорой для понимания основ инклюзивного дизайна.
Google публикует свои рекомендации по созданию доступной среды с примерами, как делать не нужно. У Apple также есть свой гайд по доступности, где в пример приводятся продукты компании.
Гайдлайн по цифровой доступности есть и у «Сбера». Его подготовила Валерия Курмак — специалист по практике Human Experience. В 2016 году она провела одно из самых больших исследований по инвалидности в России, результаты которого и легли в основу гайда. Также Валерия запустила образовательный курс про цифровую доступность.
Ну а теперь объединим теорию с практикой — ловите инструменты для проверки доступности дизайна. Для начала изучим правила контрастности, которые основаны на стандарте WCAG, после чего можно почитать подробный гайд для создания доступных продуктов от правительства США. В нём описано, какими должны быть цвета, изображения, заголовки, фреймы и другие элементы.
А теперь «пощупаем» софт. Например, на macOS есть как платные программы для проверки контрастности цветов, так и бесплатные, например, Stark. Это плагин для Figma, с помощью которого можно проверить контрастность и воспользоваться симулятором дальтонизма, чтобы посмотреть, как видят ваш дизайн люди с этим зрительным расстройством. Так же можно заценить ещё один плагин и полезный сервис по теме.
В инклюзивном дизайне нельзя забывать и про тексты. Как сделать контент более доступным подскажет гайд от Mailchimp. Например, не стоит забыть про использование “Alt” при вёрстке заголовков и изображений, чтобы программы для слабовидящих могли распознать и озвучить необходимую информацию.
Ну а если голова требует пищи для размышлений, то почитайте статью железного QA-инженера Максима Осадчего. В ней он разбирается в важном вопросе: дизайн какого сайта доступнее — Пенсионного фонда или Общества инвалидов.
А чтобы читать про инклюзивный дизайн на регулярной основе, загляните в Telegram-канал «Не исключение». В нём публикуются новости, последние технологии, инструменты и лучшие кейсы из мира инклюзивного дизайна. Например, как разработчики сделали игру The Last of Us Part II доступной в том числе и для слабовидящих игроков. Если надоело читать или вы аудиал — у автора есть подкаст по теме.
Мы верим, что в скором будущем, понятие «ограничения здоровья» навсегда исчезнет из нашего лексикона. Этому во многом поспособствуют разные бионические протезы, экзоскелеты и другие изобретения.
Подробнее о том, как поменяется в будущем качество жизни людей с ограниченными возможностями здоровья, можно почитать на сайте журнала Dezeen, посвященного дизайну и архитектуре. Теме доступности там посвящен отдельный раздел сайта.
Спасибо рободизайнеру Даше Князевой за помощь в подготовке материалов. Применение всех принципов и инструментов из нашего дайджеста точно сделает любой дизайн лучше, а мир более открытым и отзывчивым для всех людей, независимо от ограничений здоровья.
А теперь поговорим про иконки. Независимо от того, как меняется ваш дизайн, требования к иконкам всегда остаются прежними — они должны быть ясными, функциональными и простыми. Начнём с больших хранилищ с иконками в разных стилях.
На сайте Nucleo вы найдёте больше 30 тысяч иконок. Например, тут есть набор по теме инклюзивного дизайна. Примерно столько же иконок опубликовано на сайте Streamline Icons. Там можно скачать плагин для Figma для быстрого поиска по иконкам и NPM (менеджер пакетов), чтобы легко скопировать и вставить код значка в проекты React, Angular или Vue.js из приложения Streamline.
Для самых взыскательных дизайнеров есть хранилище IconFinder с почти 5 млн иконок: от пиксель-арта до плоского дизайна. Что особенно приятно — там много бесплатных наборов для использования в коммерческих проектах.
Руководитель дизайн-отдела Microsoft написал статью о том, как все дизайн-команды компании объединились, собрали инсайты среди пользователей и провели редизайн иконок. Спойлер: по исследованиям Microsoft, пользователям не нравится плоский дизайн и приглушенные цвета, их привлекает яркость и движение.
А если жажда знаний еще не утолена — советуем прочитать большое и подробное руководство по созданию иконок от дизайнера из Сан-Франциско, с отдельным разбором того, как использовать их в системе дизайна. В переводе 🤓
Дизайнер Стефан Дзиаллас aka Iconwerk не нуждается в представлении. Именно он создавал иконки для Facebook, Cisco, Mercedes-Benz, Google, Skype, Ikea, Tiffany и других известных брендов. Если хотите узнать про начертания иконок для Volvo или про особенности системы иконок для европейского лоукостера, заглядывайте на его сайт.
В Telegram-канале дизайнера Сергея Чикина публикуется много интересного про пиктограммы, иконки, знаки и символы. А еще автор проводит интересные опросы среди подписчиков на тему иконок.
И напоследок мы приберегли настоящий бриллиант — бесплатный видеокурс по созданию иконок от дизайн-команды Chapps. В нем есть как теория, так и практика, и даже файл с домашней работой. Открываем тетради, ой, Figma, и начинаем грызть гранит науки 🤖
Создавайте полезные и доступные продукты, и подписывайтесь наш Design Jam в Telegram. Да пребудет с вами сила роботов!
Cпасибо за отличный и очень полезный обзор.
Спасибо вам!
Ребят, спасибо! однозначно в закладки!
Подскажите, какие есть приложения для работы с инклюзивностью на андроид. Браузеры с редактором исходного кода и поиску по нему, контрастность дальтонизм и т.д.