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

​​❗ осторожно, длиннопост

Опять про доступность
Если бы мы перестали упорно игнорировать Accessibility, то люди с нарушениями жили бы чуть полнее + человек с временными ограничениями (занятые руки, невозможность слушать из-за шума, восстановление после травм) тоже был бы счастливее.
Доступность – это не только про контрастность цветов. Дизайнер, твоя хата не с краю.

Как сделать доступно? Есть гайд WCAG (версия на русском). Гайду есть 3 уровня соответствия:
🌚A – основной. Если этот уровень не достигнут, сервис доступен только для избранных.
🌝АА – идеальный. Сервис доступен для большинства людей и ассистивных технологий (скрин ридеры, альтернативные устройства ввода и пр). Необходим государственным и всем уважающим себя сервисам.
🌞ААА – специализированный. Необходим сервисам со специфичными юзерами.

Есть три важных области доступности:
1. доступ для навигации с клавиатуры. Вы можете легко провести тестирование навигации с клавиатуры (стрелки, Tab, пробел) и заметить проблемы.
2. доступ для ассистивных технологий. Используются встроенные в ОС приложения (например, Windows Narator , Mac VoiceOver или Android TalkBack), расширения для браузеров (например, Read Aloud) или сторонние приложения (например, JAWS). Вы можете установить подобный софт и потестировать интерфейс.
3. доступ для разных экранов. Суживать интерфейс в зависимости от ширины экрана – хорошо, но недостаточно. Интерфейс должен приспосабливаться не только под маленькие, но и под большие разрешения. Многие пользователи используют лупу или увеличивают интерфейс до 200%. Вы тоже можете это сделать и посмотреть, насколько доступен UI для тех, кто плохо видит мелкие элементы и вынужден все увеличивать.

Что может сделать дизайнер, чтобы повысить Accessibility интерфейса уже сейчас?
👍подобрать контрастные цвета. Проверять можно при помощи вот этих плагинов для Sketch/Figma
👍подобрать цвета, которые различимы для людей с нарушениями восприятия цвета (существует около 9 видов). Например, для человека с тританомалией красный алерт и зеленое уведомление будут выглядеть одинаково коричнево. Помогает плагин Color Blind
👍не использовать шрифт менее 12px (9pt). Лучше 16px (12pt)
👍продумать, как будут увеличиваться тексты при увеличении размера экрана до 200% (в CSS можно задать размер текста относительно размера экрана в EM/REM/%, ваша задача - проговорить это с разработкой)
👍продумать состояние "по наведению" и "активное" для интерактивных элементов. Это важно не только для обратной связи с обычными пользователями, но и для навигации с клавиатуры. Активное состояние должно быть заметно, в идеале это контрастная обводка (а не эти вот "заливка темнее на 0.000001" ).
👍продумать адаптив. Основные ширины экрана, которые вы можете покрыть дизайном (по статистике на 2021 год): 1920 + увеличение до 200% → 768 → 360
👍написать понятные заголовки. Незрячий человек должен понять, о чем страница, прослушав ее заголовок.
👍не пропускать уровни заголовков на страницах, чтобы обеспечить работу скринридера и удобную навигацию с клавиатуры. То есть, нельзя после заголовка первого уровня <h1> ставить заголовок третьего уровня <h3>. И нельзя всячески рандомно их перемешивать.
👍обеспечить понятную навигацию: не прятать ее в бургеры-хуюргеры, не делать вложенностей, поведения по ховеру, показывать хлебные крошки на внутренних страницах.
👍предоставить разработке альтернативные тексты для картинок, видео, аудио, иконок. Они будут воспроизводиться в интерфейсе для незрячих.
👍провести тестирования разработанного интерфейса на доступность при помощи сервисов автоматической проверки, пробовать взаимодействовать через сервисы чтения экрана, пробовать перемещаться клавиатурой, голосовым управлением.
👍пригласить на тестирование пользователей с ограничениями или экспертов по доступности для профессиональной проверки

Небольшой подборыч чтива:

3 шага на пути к сторителлингу: на что обратить внимание и стать королями драмы

Онбординг в приложении как инструмент retention

Оптические иллюзии в дизайне интерфейсов

#uxhorn #pleasure

#trendwatching
Сережа не чувствует запахов, но пока еще видит. Вот он и подготовил сегодняшнюю рубрику, погнали:

сегодня визуальное порно на основе горизонтального скролла. Специально бил себя по рукам, чтобы не пустить уйму всего)

1. https://www.defeatboco.com/ моё любимое! иллюстрироанный сайт с привязкой к скроллу пользователя. Сам сайт рассказывает про процесс разработки веб-продукта и подает это все в формате «приключение на 10 минут». Но мы то с вами знаем, насколько оно может затянуться…) Есть вопросики к шрифтовым решениям, акцентам и элементам интерфейса, но сторителинг вкупе с иллюстрациями - затягивает.

2. https://typographyprinciples.obys.agency/ кто-то наверняка уже видел его (да, Ксю?)). нельзя пройти мимо этого стильнейшего сайта про принципы типографики от студии Obys. Ничего непонятно, но очень интересно. На самом деле, если детально вчитываться, то максимально четкая и простая выжимка по основам грамотной типографики)

3. https://qodeinteractive.com/catalog/ простейший и кайфовый за счет плавных микроанимаций сайт студии дизайна. Переходы в кейсы и подача контента внутри, само меню, переход из одного кейса в другой… благостно максимально))

отличнейшая подборочка от нашей @yujinajina Жени разбавит этот денёк #trendwatching

1. Концептуальный вариативный шрифт Climate Crisis, который постепенно «тает» и является творческим высказыванием на тему таяния ледников и изменения климата.
https://kampanjat.hs.fi/climatefont/

2. Porter & Sail — компания, предлагающая обеспеченным миллениалам персонализированные туры по городам мира. В дизайн-бюро «Щука» сделали для них лёгкую и элегантную систему идентификации. Логотип построен на контрасте лёгких рукописных амперсандов и очень гуманистического гротеска.
https://shuka.design/porter-and-sail

3. Журнал SKVOT предлагает вопросы, которые провоцируют переключение в латеральный режим мышления и помогают искать новые творческие идеи.
https://skvot.io/ru/blog/10-voprosov-chtoby-pridumat-novoe

4. Ну и мое любимое 😉
Почему дизайн выглядит хорошо? Небольшое исследование Nielsen Norman Group | UXPUB
https://ux.pub/pochemu-dizayn-vyglyadit-horosho-nebolshoe-issledovanie-nielsen-norman-group/

#font #creative #ux #thinking #design

@asyati лови шанс 🤩

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

📈 Руководство по визуализации данных

Ребята из Германии сделали классное руководство по визуализации данных и открыли его под лицензией Creative Commons.

А чтобы никто не догадался и не оценил их труд — назвали максимально непонятно и спрятали на сайте в слабочитаемом виде.

Но я все равно нашел!

Поэтому теперь у вас есть бесплатная книга по визуальному представлению данных для отчетов и дашбордов. Подробная (150 страниц) и практическая (197 иллюстраций). В вебе, epub и pdf:

https://antonz.ru/dataviz-guide/

и в конце дня визуальный релакс от нашей Аси
#trendwatching

"В прошлый раз я подумала, что приветственное слово про хорошую погоду и про «хилемся, живем» пишет Саша в комментах к нашим подборкам, но выяснилось, что все остальные передают приветы самостоятельно. Чтош, тогда погнали по сайтам, а потом можно пойти любоваться на весенний закат ✨"


1. https://stykka.com/collections/lastdesk%E2%84%A2/products/lastdesk
Имиджевый сайт очень модного стола, тут и составляющие летают, и видео крутое, и вроде начинаешь сразу думать, может и мне такой стол нужен. И по факту — ничего лишнего, текст и столы разные, даже картонный есть

2. https://www.fontshare.com/
Сайт делал Александр Лагута с женой Екатериной, поэтому он, наверняка, вам попадался на глаза, по крайней мере кейс. Это сервис с бесплатными шрифтами для коммерческого и некоммерческого использования от индийской шрифтовой компании. Кириллицы, конечно же, неть

3. https://getensembl.com/products
Если не хотите покупать набор кастрюлек за 50 тыс с доставкой из Америки, то хотя бы посмотрите их интернет-магазин))

4. https://on-air.caricomassimo.org/
Вот этот сайт мне скорее не понравился, но я его сюда закину. Прием деления окна на 2 части не новый, в этом есть некое удобство и где-то такие штуки могут подойти. Я подумала сразу про Бреус и про часть сайта с коллекциями

5. https://us9.campaign-archive.com/?u=89138ced008e0282fe335b3a8&id=e2c7c04cbb
В канале Главреда сегодня опубликовали старую статью Ильяхова о рекламе, я с удовольствием прочитала. Там речь вроде как про 2015 год, но не скажу, что информация потеряла свою актуальность, ну а нам, вебам, завсегда такие штуки полезны