{"id":4111,"title":"\u041a\u043e\u043d\u043a\u0443\u0440\u0441: 1 \u043c\u043b\u043d \u0440\u0443\u0431\u043b\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439","url":"\/redirect?component=advertising&id=4111&url=https:\/\/vc.ru\/promo\/257455-konkurs-dlya-razrabotchikov-s-prizovym-fondom-v-1-mln-rubley&hash=09fdce1da8605e1f5eb2b2aacbabb68d2796e6e436b92ac6cf8255b39ccae26a","isPaidAndBannersEnabled":false}
Дизайн
red_mad_robot

Дизайн-джем #17: инклюзивный дизайн, а также хранилища, плагины, гайды и туториалы для работы с иконками

В доступном дайджесте от Redmadrobot Design Lab.

Роботы до мигающих лампочек любят симбиоз пользы и красоты. Каждую неделю все самые захватывающие находки мы публикуем в нашем Telegram-канале Design Jam. В прошлом дайджесте мы рассказали историю создания знаменитых шрифтов Univers, Theinhard, Graphic и погрузились в мир визуальных символов и скрытых смыслов в плакатах и постерах.

В новом выпуске мы расскажем об универсальных дизайн-солдатах — иконках. Поделимся полезными ресурсами по теме и покажем, где скачать готовые наборы иконок для своих проектов.

Но первым делом поговорим об инклюзивном дизайне. Изучим интересные статьи и поговорим об инструментах, которые помогут сделать дизайн вашего продукта дружелюбнее и доступнее для всех пользователей, независимо от особенностей их здоровья.

Microsoft

С ограничениями здоровья время от времени может столкнуться каждый: будь-то перелом руки или проблемы со зрением или слухом. Если такие факторы не мешают взаимодействовать с продуктом, то в этом заслуга инклюзивного дизайна. Для начала вспомним его основные принципы, чтобы вплотную подойти к вопросу пользовательского опыта.

Понятность, отзывчивость, удобство функций и интерфейсов — эти и другие принципы легли в основу стандарта доступности web-контента — WCAG, разработанного Консорциумом всемирной паутины. В нем прописаны критерии доступности интернет-среды. Сухая на первый взгляд теория, станет твёрдой опорой для понимания основ инклюзивного дизайна.

w3.org

Теперь заглянем на GitHub и изучим примеры доступных интерфейсов, чек-лист по проектированию инклюзивного дизайна и другие полезные вещи. Если хочется сразу приступить к делу — откройте чек-лист.

Как распознать возникновение проблем у пользователя с ограниченными возможностями и как их решить — описано в гайде от Microsoft. В нём собраны полезные инструменты для дизайн-исследований. И обязательно посмотрите видео, как команда Xbox проводила интервью среди пользователей с инклюзией.

Microsoft

Google публикует свои рекомендации по созданию доступной среды с примерами, как делать не нужно. У Apple также есть свой гайд по доступности, где в пример приводятся продукты компании.

Apple

Гайдлайн по цифровой доступности есть и у «Сбера». Его подготовила Валерия Курмак — специалист по практике Human Experience. В 2016 году она провела одно из самых больших исследований по инвалидности в России, результаты которого и легли в основу гайда. Также Валерия запустила образовательный курс про цифровую доступность.

Ну а теперь объединим теорию с практикой — ловите инструменты для проверки доступности дизайна. Для начала изучим правила контрастности, которые основаны на стандарте WCAG, после чего можно почитать подробный гайд для создания доступных продуктов от правительства США. В нём описано, какими должны быть цвета, изображения, заголовки, фреймы и другие элементы.

А теперь «пощупаем» софт. Например, на macOS есть как платные программы для проверки контрастности цветов, так и бесплатные, например, Stark. Это плагин для Figma, с помощью которого можно проверить контрастность и воспользоваться симулятором дальтонизма, чтобы посмотреть, как видят ваш дизайн люди с этим зрительным расстройством. Так же можно заценить ещё один плагин и полезный сервис по теме.

В инклюзивном дизайне нельзя забывать и про тексты. Как сделать контент более доступным подскажет гайд от Mailchimp. Например, не стоит забыть про использование “Alt” при вёрстке заголовков и изображений, чтобы программы для слабовидящих могли распознать и озвучить необходимую информацию.

Mailchimp

Ну а если голова требует пищи для размышлений, то почитайте статью железного QA-инженера Максима Осадчего. В ней он разбирается в важном вопросе: дизайн какого сайта доступнее — Пенсионного фонда или Общества инвалидов.

pfrf.ru

А чтобы читать про инклюзивный дизайн на регулярной основе, загляните в Telegram-канал «Не исключение». В нём публикуются новости, последние технологии, инструменты и лучшие кейсы из мира инклюзивного дизайна. Например, как разработчики сделали игру The Last of Us Part II доступной в том числе и для слабовидящих игроков. Если надоело читать или вы аудиал — у автора есть подкаст по теме.

Мы верим, что в скором будущем, понятие «ограничения здоровья» навсегда исчезнет из нашего лексикона. Этому во многом поспособствуют разные бионические протезы, экзоскелеты и другие изобретения.

Подробнее о том, как поменяется в будущем качество жизни людей с ограниченными возможностями здоровья, можно почитать на сайте журнала Dezeen, посвященного дизайну и архитектуре. Теме доступности там посвящен отдельный раздел сайта.

Спасибо рободизайнеру Даше Князевой за помощь в подготовке материалов. Применение всех принципов и инструментов из нашего дайджеста точно сделает любой дизайн лучше, а мир более открытым и отзывчивым для всех людей, независимо от ограничений здоровья.

А теперь поговорим про иконки. Независимо от того, как меняется ваш дизайн, требования к иконкам всегда остаются прежними — они должны быть ясными, функциональными и простыми. Начнём с больших хранилищ с иконками в разных стилях.

На сайте Nucleo вы найдёте больше 30 тысяч иконок. Например, тут есть набор по теме инклюзивного дизайна. Примерно столько же иконок опубликовано на сайте Streamline Icons. Там можно скачать плагин для Figma для быстрого поиска по иконкам и NPM (менеджер пакетов), чтобы легко скопировать и вставить код значка в проекты React, Angular или Vue.js из приложения Streamline.

Для самых взыскательных дизайнеров есть хранилище IconFinder с почти 5 млн иконок: от пиксель-арта до плоского дизайна. Что особенно приятно — там много бесплатных наборов для использования в коммерческих проектах.

Руководитель дизайн-отдела Microsoft написал статью о том, как все дизайн-команды компании объединились, собрали инсайты среди пользователей и провели редизайн иконок. Спойлер: по исследованиям Microsoft, пользователям не нравится плоский дизайн и приглушенные цвета, их привлекает яркость и движение.

На портале Icons8 огромное хранилище иконок, а в его блоге публикуют гайды и туториалы. Можно узнать, как сочетать иконки из разных наборов или создать один гармоничный. А ещё оцените небольшой (всего 12 минут) туториал про анимацию иконки в After Effects.

Добавляем к себе в закладки еще один крутой блог. Дизайнер Елена Чжан пишет про основы иконографики, рассказывает про сетки и правильное построение иконок. Для старта можно изучить статью о семи принципах дизайна иконок — есть как на языке оригинала, так и в переводе.

А если жажда знаний еще не утолена — советуем прочитать большое и подробное руководство по созданию иконок от дизайнера из Сан-Франциско, с отдельным разбором того, как использовать их в системе дизайна. В переводе 🤓

Дизайнер Стефан Дзиаллас aka Iconwerk не нуждается в представлении. Именно он создавал иконки для Facebook, Cisco, Mercedes-Benz, Google, Skype, Ikea, Tiffany и других известных брендов. Если хотите узнать про начертания иконок для Volvo или про особенности системы иконок для европейского лоукостера, заглядывайте на его сайт.

В Telegram-канале дизайнера Сергея Чикина публикуется много интересного про пиктограммы, иконки, знаки и символы. А еще автор проводит интересные опросы среди подписчиков на тему иконок.

И напоследок мы приберегли настоящий бриллиант — бесплатный видеокурс по созданию иконок от дизайн-команды Chapps. В нем есть как теория, так и практика, и даже файл с домашней работой. Открываем тетради, ой, Figma, и начинаем грызть гранит науки 🤖

Создавайте полезные и доступные продукты, и подписывайтесь наш Design Jam в Telegram. Да пребудет с вами сила роботов!

{ "author_name": "red_mad_robot", "author_type": "editor", "tags": ["rmrdesignlab","rmr","redmadrobot","icons","accessibility"], "comments": 4, "likes": 44, "favorites": 196, "is_advertisement": false, "subsite_label": "design", "id": 163226, "is_wide": true, "is_ugc": false, "date": "Fri, 02 Oct 2020 15:21:25 +0300", "is_special": false }
0
4 комментария
Популярные
По порядку
4

Cпасибо за отличный и очень полезный обзор.

Ответить
1

Спасибо вам!

Ответить
1

Ребят, спасибо! однозначно в закладки!

Ответить
0

Подскажите, какие есть приложения для работы с инклюзивностью на андроид. Браузеры с редактором исходного кода и поиску по нему, контрастность дальтонизм и т.д.

Ответить
Читать все 4 комментария
Сооснователь «Самоката» — о первых деньгах, армейском опыте, конкуренции между сервисами и транспорте курьеров

Вячеслав Бочаров окончил военно-финансовое училище, два года отслужил по контракту в Чечне, а потом ушел в ритейл и логистику — работать с «Магнитом» и «Почтой России». Теперь он развивает свой стартап, оборот которого за прошлый год — 9,7 млрд рублей.

NYT: руководители Google уходят из-за главы компании Сундара Пичаи — он медлит, не рискует и зациклен на мнении общества Статьи редакции

«Ещё никогда не было так легко убедить руководителей Google отказаться от стабильной семизначной зарплаты ради возможности работать в другом месте», — говорят в Кремниевой Долине.

Сундар Пичаи The Verge
ТМК и Агентство инноваций Москвы запустили акселерационную программу для московских стартапов

Трубная Металлургическая Компания (ТМК) и Агентство инноваций Москвы запустили акселерационную программу в рамках трека «Московского акселератора» PipeIndustryTech.

Как начать экспортировать и продавать свои товары онлайн: советы Почты России

Мы расскажем, какие российские товары востребованы за рубежом, пошагово объясним, как начать экспортировать, и опишем подводные камни, с которыми может столкнуться продавец.

В Москве запретят посещать кафе и рестораны без прививки, отрицательного теста на Covid-19 или антител Статьи редакции

Проверять их будут по QR-кодам.

Уроки 2020 года или как мы выросли в два раза быстрее рынка
Сервис Pump запустил подписку на бензин и заправку без участия водителя в Москве, Петербурге и Сочи Статьи редакции

Количество бензина в баке контролируют датчики, а заливает топливо заправщик.

Кейс. Как увеличить конверсию приложения на 6,3% за счет графического ASO?

Показываем на примере приложения для занятий спортом, как с помощью качественной и продающей графики на странице в Google Play увеличить конверсию из просмотра в установку на 6,3%. Бонус: пять примеров конвертирующей графики.

Декаданс венчурного капитала: как взращиваются современные «единороги»

DoorDash предлагал клиентам пиццу за $16 из ресторана, где она стоит $24. Сервис проката самокатов Bird терял $27 на каждые заработанные $10. Примеров компаний, предоставляющих субсидируемый инвесторами сервис, масса: Uber, WeWork, Airbnb и другие. Весь их «дистрапшн» — продажа доллара за полцены.

Evrone News #04: сравниваем кроссплатформенные фреймворки, вспоминаем DevOps-продукт, хвалимся новым клиентским кейсом

Анонсируем новые материалы Evrone для тех, кто любит копаться в проектах и деталях разработки. Сегодня — разбираемся в технологиях, вспоминаем дорогой нашему сердцу (правда, архивный) внутренний проект, на котором мы учились DevOps’ить и управлять, и показываем клиентский кейс.

Starlink запланировала покрыть всю планету спутниковым интернетом в сентябре 2021 года Статьи редакции

После выхода спутников на рабочую орбиту компания начнёт переговоры о предоставлении услуг со странами.

Комментарии
null