Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Причины отсутствия поддержки AVIF в Safari
Джон Хеншоу написал небольшой пост про причины отсутствия поддержки AVIF в Safari — "Why WebKit supports AVIF but Safari does not".
Поддержка AVIF есть в Chrome и Firefox, единственным браузером, который не поддерживает новый формат изображений, остаётся Safari. Похожая ситуация была с WebP — Safari стал последним браузером, который добавил его поддержку. Со стороны это может показаться странным, потому что декодер AVIF был добавлен в WebKit в апреле 2021. Проблема заключается в том, что Safari не использует код WebKit для декодирования изображений, он делегирует эту работу системным библиотекам. Это означает, что поддержку нового формата в Safari стоит ждать тогда, когда его поддержка появится на уровне всей операционной системы. С учётом того, что Apple делает два мажорных обновления ОС в год, появление поддержки AVIF может занять некоторое время.
#graphics #safari
https://www.coywolf.news/webmaster/why-webkit-supports-avif-but-safari-does-not/
Джон Хеншоу написал небольшой пост про причины отсутствия поддержки AVIF в Safari — "Why WebKit supports AVIF but Safari does not".
Поддержка AVIF есть в Chrome и Firefox, единственным браузером, который не поддерживает новый формат изображений, остаётся Safari. Похожая ситуация была с WebP — Safari стал последним браузером, который добавил его поддержку. Со стороны это может показаться странным, потому что декодер AVIF был добавлен в WebKit в апреле 2021. Проблема заключается в том, что Safari не использует код WebKit для декодирования изображений, он делегирует эту работу системным библиотекам. Это означает, что поддержку нового формата в Safari стоит ждать тогда, когда его поддержка появится на уровне всей операционной системы. С учётом того, что Apple делает два мажорных обновления ОС в год, появление поддержки AVIF может занять некоторое время.
#graphics #safari
https://www.coywolf.news/webmaster/why-webkit-supports-avif-but-safari-does-not/
Coywolf News
Why WebKit supports AVIF but Safari does not
WebKit added support for the AVIF image format in April 2021, but it’s still unavailable in Safari. Its absence is because Apple chose an unconventional method for decoding images in its browser.
Forwarded from UX Notes (Антон Григорьев)
Евгений Бондковски написал, как сделать графики и диаграммы привлекательнее.
— Облегчите сетку вспомогательных линий: уменьшите их количество, толщину, яркость; оставьте только горизонтальные или вертикальные линии; уберите засечки и стрелки на осях, уменьшите подписи. Иногда сетку можно убрать вовсе;
— Скруглите углы (почти все интерфейсы вокруг такие) и добавьте градиентов. Ими можно залить площади под линейными графиками и столбцы диаграмм;
— Выберите дополнительные цвета, близкие по тону основному цвету бренда или презентации;
— Главный параметр можно выделить, показав остальные градиентами серого или оттенками второго цвета;
— Цвета могут добавить в диаграммы лишней информации. Избегайте пары красного и зелёного цвета, если только вы не показываете положительные и отрицательные значения. Выбирайте цвета одинаковой насыщенности, чтобы какие-то параметры случайно не стали выглядеть второстепенными;
— Второстепенные параметры (график за прошлый год или планируемый прирост) можно показывать пунктирной линией или штриховкой;
— Используйте цвет бренда, даже если это красный цвет и вы показываете рост продаж;
— Старайтесь разные параметры показывать разными типами диаграмм, подходящими для отображения таких данных.
#data_visualization #graphics
— Облегчите сетку вспомогательных линий: уменьшите их количество, толщину, яркость; оставьте только горизонтальные или вертикальные линии; уберите засечки и стрелки на осях, уменьшите подписи. Иногда сетку можно убрать вовсе;
— Скруглите углы (почти все интерфейсы вокруг такие) и добавьте градиентов. Ими можно залить площади под линейными графиками и столбцы диаграмм;
— Выберите дополнительные цвета, близкие по тону основному цвету бренда или презентации;
— Главный параметр можно выделить, показав остальные градиентами серого или оттенками второго цвета;
— Цвета могут добавить в диаграммы лишней информации. Избегайте пары красного и зелёного цвета, если только вы не показываете положительные и отрицательные значения. Выбирайте цвета одинаковой насыщенности, чтобы какие-то параметры случайно не стали выглядеть второстепенными;
— Второстепенные параметры (график за прошлый год или планируемый прирост) можно показывать пунктирной линией или штриховкой;
— Используйте цвет бренда, даже если это красный цвет и вы показываете рост продаж;
— Старайтесь разные параметры показывать разными типами диаграмм, подходящими для отображения таких данных.
#data_visualization #graphics
vc.ru
Как нарисовать красивый график или диаграмму. Приемы оформления — Дизайн на vc.ru
В этой статье я хочу показать как можно сделать графики и диаграммы не только удобными, но и красивыми. Покажу подходы к выбору цветов, способы органично вписать их в общий дизайн, и оформительские приемы, которые сделают их интереснее визуально. Эти советы…
Forwarded from UX Notes (Антон Григорьев)
Артём Плаксин написал о доступности изображений.
— Альтернативный текст нужен фотографиям, стикерам и смайликам, логотипам, дополняющим статью изображениям;
— Не нужен иконкам списков, декоративным иконкам вроде телефона рядом с номером телефона или конверта рядом с адресом электронной почты, декоративным изображениям и картинкам с подписями;
— В этом случае атрибут alt оставляйте пустым;
— Для тега svg добавляйте атрибут aria-hidden="true";
— Альтернативный текст к картинке должен кратко описывать изображение. Например: «Люди сидят на диванчиках и работают за ноутбуками»;
— Желательно уложиться в 80 символов, использовать простые предложения, начинать с заглавной буквы и не ставить точку в конце, не упоминать роль элемента: изображение, графика, иконка;
— Можно указать категорию изображения: фотография, логотип, скриншот.
#accessability #graphics
— Альтернативный текст нужен фотографиям, стикерам и смайликам, логотипам, дополняющим статью изображениям;
— Не нужен иконкам списков, декоративным иконкам вроде телефона рядом с номером телефона или конверта рядом с адресом электронной почты, декоративным изображениям и картинкам с подписями;
— В этом случае атрибут alt оставляйте пустым;
— Для тега svg добавляйте атрибут aria-hidden="true";
— Альтернативный текст к картинке должен кратко описывать изображение. Например: «Люди сидят на диванчиках и работают за ноутбуками»;
— Желательно уложиться в 80 символов, использовать простые предложения, начинать с заглавной буквы и не ставить точку в конце, не упоминать роль элемента: изображение, графика, иконка;
— Можно указать категорию изображения: фотография, логотип, скриншот.
#accessability #graphics
Хабр
Accessibility картинок. Как сделать изображения доступными?
Accessibility картинок Всем привет! Меня зовут Артём Плаксин, я незрячий специалист по цифровой доступности и работаю в VK. Почитать о моей работе в офисе вы можете в одном из постов этого блога....
Forwarded from UX Notes (Антон Григорьев)
Анастасия Скопина написала об эмодзи в интерфейсе.
— Допустимо ли их использовать, зависит от сферы продукта, целевой аудитории, географии и Tone of Voice;
— Скорее да: сервисы для детей, сфера красоты, дизайн. Скорее нет: B2B, B2G, медицина, ToV задаёт строгий официальный стиль;
— С эмодзи 73% людей считают вас более дружелюбным. Но люди постарше чаще воспринимают их негативно;
— Одни эмодзи могут по-разному воспринимать в разных странах. Например, в арабских странах 🙏 (сложенные руки) почти не используется, так как не ассоциируется с молитвой, в Китае 👋 (взмах руки) символизирует разрыв отношений и дружбы;
— Эмодзи хорошо работают на приветственном экране (сделать первый контакт как можно дружелюбнее), при выборе пола или страны (можно заменить иконки), в пустых состояниях (разбавить сухой текст), диалогах (более человечное общение, визуальные якоря), как бейджи (объединить товары в группу), в попапах (показать, позитивное это сообщение или нет, и если нет — немного сгладить негатив);
— Кроме того их часто используют в пушах, формах обратной связи, некоторых кнопках (как замена иконки или усилитель текста);
— В некоторых продуктах вроде Ноушена эмодзи помогают пользователю лучше ориентироваться в своём контенте.
#graphics
— Допустимо ли их использовать, зависит от сферы продукта, целевой аудитории, географии и Tone of Voice;
— Скорее да: сервисы для детей, сфера красоты, дизайн. Скорее нет: B2B, B2G, медицина, ToV задаёт строгий официальный стиль;
— С эмодзи 73% людей считают вас более дружелюбным. Но люди постарше чаще воспринимают их негативно;
— Одни эмодзи могут по-разному воспринимать в разных странах. Например, в арабских странах 🙏 (сложенные руки) почти не используется, так как не ассоциируется с молитвой, в Китае 👋 (взмах руки) символизирует разрыв отношений и дружбы;
— Эмодзи хорошо работают на приветственном экране (сделать первый контакт как можно дружелюбнее), при выборе пола или страны (можно заменить иконки), в пустых состояниях (разбавить сухой текст), диалогах (более человечное общение, визуальные якоря), как бейджи (объединить товары в группу), в попапах (показать, позитивное это сообщение или нет, и если нет — немного сгладить негатив);
— Кроме того их часто используют в пушах, формах обратной связи, некоторых кнопках (как замена иконки или усилитель текста);
— В некоторых продуктах вроде Ноушена эмодзи помогают пользователю лучше ориентироваться в своём контенте.
#graphics
vc.ru
Эмодзи в продуктовом дизайне: тренд или табу? — Дизайн на vc.ru
Допустимо ли использовать смайлики в цифровых продуктах? Интерфейс ведь тоже общается с пользователем, почему бы и его «речи» не придать оттенок нужной эмоции? В этой статье мы разберёмся, когда и где уместно использовать эмодзи.