Поздравляем вас с днем 4.04! Сегодня не только красивая дата, но и день интернета по версии Папы Римского. Отличный повод поговорить о роли страницы с ошибкой 404 и полюбоваться на лучшие образцы креативности. Под катом — немного истории и много картинок: смешных, красивых и интерактивных.
Привет, Хабр! Меня зовут Вадим, я мобильный разработчик в СберМаркете. В этой статье расскажу, как провести профилирование (оно же измерение производительности или оценка перформанса) в react native приложениях: как выявить источник проблем и решить их. В русскоязычных источниках не так много информации по данной теме. Я потратил немало времени, чтобы со всем разобраться, поэтому попытаюсь восполнить этот пробел и для вас :)
Сегодня трудно найти веб сайт, на котором нету хотя бы одного изображения, может быть у вас есть такой пример? На странице в интернете можно сразу увидеть много разных изображений: фото пользователя в личном кабинете, фото товара на маркетплейсе, иконка на вкладке браузера, иконка корзины на кнопке «добавить в корзину», анимированное изображение‑открытка от бабушки в мессенджере, [и еще тысяча примеров].
Если вы как‑то связаны с вебом то вам будет полезно иметь общее представление об этих images, как минимум, и уметь с ними работать как максимум. Давайте попробуем разобраться с этим вопросом?
В недалеком прошлом, я рассказывал, про то, как можно создавать свои кастомные элементы через генерацию мэша, будет полезно ознакомиться для понимания многих аспектов этой статьи.
Сегодня будем разбирать альтернативный способ создания, использую VectorApi.
Рассмотрим, как работает painter2D, какими функциями обладает и зачем оно может вам пригодиться.
Всем привет! Меня зовут Анна Бугрий, я старший продуктовый дизайнер и работаю в сфере шесть лет. Последние два года создаю совершенный опыт и дизайн для пользователей СберМаркета. Команда, в которой я работаю, отвечает за главный экран приложения и навигацию на всех платформах.
В этой статье я расскажу, как мы решились полностью переделать главный экран, какие исследования для этого потребовались и как мы проходили этот сложный путь.
Приложениями пользуются разные люди, и некоторым из них для этого нужны вспомогательные технологии — например, скринридеры (программы экранного доступа). Такие программы могут озвучить контент на странице, если приложение соответствует определённым стандартам. Например, они могут прочесть текст из параграфов и заголовков, списки, альтернативные описания изображений, ссылки, переключатели и другие интерактивные элементы. Таким образом скринридеры обеспечивают доступ незрячих пользователей к контенту и сервисам.
Повышая доступность интерфейса для пользователей скринридеров, мы также улучшаем его доступность и для людей с другими особенностями здоровья. Например, для тех, кто использует системную настройку «Экран вслух» или взаимодействует с интерфейсом с помощью голосового управления.
Однако навигация со скринридерами по страницам и экранам отличается от обычной, поэтому нужно соблюдать несколько правил при сборке интерфейса приложений.
Привет! Я Вячеслав Дорогинин, занимаюсь фронтендом WebView клиентского приложения Лавки. В этой статье расскажу, как мы адаптировали приложение для работы с популярными скринридерами, с какими трудностями столкнулись и как их решили.
«Темная тема», «темный режим», «ночной режим», «дарк мод» — опция, которая сейчас есть практически в каждой операционной системе, приложении, браузере, сайте. Она окрашивает фоновые элементы графического интерфейса в темный цвет, а текст — в белый.
Многие текстовые редакторы и интегрированные среды разработки (IDE) предлагают темную тему по умолчанию. Например, популярный в веб-разработке (и не только) Sublime Text.
Нельзя сказать точно, когда именно появился термин «темный режим», однако за последние несколько десятков лет темный вариант графического интерфейса превратился в набирающую обороты функцию в самых популярных приложениях, сайтах и операционных системах.
Тем не менее отображение информации белым по темному существует очень давно — еще до появления технологии ЭЛТ, на смену которой впоследствии пришли ЖК и OLED.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
<label>;inputmode="numeric" улучшающий мою жизнь;Давайте начнём!
Стоит только коснуться производственной специфики, как стандартные подходы разваливаются на куски — даже если у вас уже есть огромная дизайн-система на основе популярной методологии Material Design. Я — Аня Труфанова, делаю дизайн для MES (manufacturing execution system). Нам пришлось взять дизайн-систему и наполнить ее уникальными фичами и кастомными компонентами, адаптированными под нестандартные условия. Сейчас я поделюсь, что именно мы переосмыслили и какие фичи добавили.
Абсолютно стандартное начало: в Figma размещался набор из примерно тысячи иконок, которые успешно перенесли в проект. Все собрали, потестили и зарелизили. Про автоматизацию никто не думал, поскольку задача казалась «одноразовой». Ну а в случае последующих обновлений или дополнений каких-то элементов ручной труд должен был занять несколько минут. Что тут может пойти не так?
Под катом про знакомый всем «человеческий фактор», плюс краткий гайд по автоматизированному экспорту картинок из Figma в рабочий проект.
С 12 марта 2024 года показатель FID (First Input Delay) из семейства Core Web Vitals заменён новой метрикой — INP (Interaction to Next Paint), которая отражает скорость отклика сайтов. Необходимость такой замены, среди прочего, подтверждают данные об использовании Chrome: согласно им, 90% времени пользователь проводит на странице после её загрузки. Таким образом, важно тщательно измерять скорость реагирования сайта на протяжении всего жизненного цикла страницы. В этом и помогает метрика INP.
Меня зовут Коновалов Илья. Я Performance Engineer и Front-end Developer в медицинской компании «СберЗдоровье». В этой статье я расскажу, что такое INP и как работать с новой метрикой.
При работе над паттерном навигации моя команда выяснила интересный факт — мало материалов для дизайнеров. Я провела своё исследование: поговорила с разработчиками, проанализировала множество приложений и заглянула в гайдлайны.
В статье покажу три самых популярных вида навигации, которые есть на рынке на начало 2024 года. Я выкладывала этот материал на английском языке и собрала 25 тысяч просмотров. Теперь делюсь ей с русскоязычным комьюнити.
Вы узнаете:
• какие основные виды навигации существуют,
• как логически работает навигация,
• некоторые особенности и различия платформенных решений (iOS vs Android).
Расскажу, почему найти что-то в приложении бывает так трудно. Вы сходу будете отличать, где хорошая навигация, а где продуктовая команда недоработала.
Зачем нужны фотостоки, если нейросети готовы производить бесконечное количество нужных вам изображений? Расскажу, как мы получили несколько несколько сотен фотореалистичных изображений людей и пакет иконок для коммерческого сайта с помощью нейронок, потратив ~50 часов дизайнеров и $60 на Pro Plan Midjourney.
Плюс, конечно, наша насмотренность и опыт, которым я сейчас поделюсь с вами!
Решил поделиться своим опытом как я собирался сделать сервис управлением ЭДО провайдерами по правилам SOLID.
Для начала я решил составить архитектуру сервиса, решил что класс управления api должен включать в себя http клиент как зависимость, так как не все могут захотеть использовать requests для выполнения запросов, еще это даст возможность переехать на асинхронную версию. Изучив документацию системы Диадок, я узнал что запросы можно выполнять как в JSON формате так и используя RPC модели. Поэтому я назвал класс DiadocJSONClient и он использует библиотеку requests для http запросов.
Привет! Это первая статья из серии разборов элементов веб-вёрстки для дизайнеров интерфейсов (и немного аналитиков). Разберём атрибуты разных тегов, свойства, которые можно к ним применить, поведение в разных обстоятельствах. А главное – как они влияют на то, что видит пользователь на экране (и слышит), и какие неочевидные моменты можно продумать в дизайне заранее.
Начнём со ссылок, которые обозначаются в HTML тегом <a></a>.
В последнее время на Хабре было несколько статей про темные паттерны. Вообще, тема этичного дизайна, или дизайна, который руководствуется ценностями, сейчас довольно сильно раскручивается. Скорее всего это ответ на промышленный дрейф в сторону все более манипулятивных приемов, которые используются на рынке.
Очевидно, что темные паттерны работают, иначе их бы не использовали. Но корпорации редко публикуют результаты своих экспериментов. Я решила поискать, проверялись ли какие-нибудь темные паттерны в научных статьях и что вообще исследователи знают про них.
Обновление дизайна UI в проекте, который уже запущен в релиз - тема скользкая. Когда, как, а главное — зачем это делать? В этой статье я расскажу, как этот вопрос решался в нашем конкретном случае и поделюсь своими мыслями и советами на эту тему.
Тип-расширение (extension type) – это абстракция, которая происходит на этапе компиляции и "оборачивает" существующий тип, предоставляя для него новый, сугубо статический интерфейс. Типы-расширения являются важным компонентом статической интеграции с JavaScript (static JS interop), поскольку они позволяют легко изменять интерфейс существующего типа (что критически важно для любого вида взаимодействия) без затрат на создание реального объекта-обёртки.
Типы-расширения позволяют строго определить набор операций (или интерфейс), доступных для объектов базового типа, который называется типом представления. При определении интерфейса для типа-расширения вы можете оставить некоторые методы типа представления, отбросить другие, заменить некоторые из них и добавить новую функциональность.