Дизайнер, привет
22.7K subscribers
1.65K photos
111 videos
5 files
1.54K links
Реклама и связь: @generalsupport
Канал с вакансиями: @jun_hi_vacancies
Канал с рефами: @refs_hi

———

Пишу о дизайне и жизни ❤️

product designer
ex: магнит, x5 retail, точка, whoosh, unabank
Download Telegram
📊 Дашборды: как найти баланс между красотой и пользой

Команда Ozon Tech рассказала о типичных проблемах при создании дашбордов и способах их решения. Главная проблема в том, что красивые панели данных часто оказываются бесполезными из-за избытка информации и конфликта интересов между дизайнерами, аналитиками и пользователями.

Основные ошибки включают попытку поместить все метрики на одну страницу, неверные допущения о знаниях пользователей и неправильную расстановку акцентов. Решение в создании трёхуровневой иерархии: верхний уровень с ключевыми показателями и крупной типографикой, средний с визуализацией трендов, нижний с детальной аналитикой в периферийной зоне. Важно соблюдать принцип единоначалия фильтров, когда все элементы визуализации подчиняются единым правилам фильтрации. Без этого пользователь столкнётся с несогласованными данными и потратит время на настройку каждого фильтра отдельно.

Внутри:
– Почему для топ-менеджмента нужны стратегические показатели, а для специалистов детальный анализ;
– Как использовать вкладки и детализацию вместо перегрузки главного экрана;
– Зачем ограничивать яркие индикаторы для управления вниманием;
– Какие библиотеки упрощают разработку (AG Grid, Apache EChart, Recharts);
– Почему Apache Superset может заменить разработку с нуля;
– Когда использовать линейные графики, а когда радиальные индикаторы.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥157👍2
🔔 Inspiration #159

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥

altcap.com
mont-fort.com
workflow.design
vanta.com
thenewindustrials.com

———

tryklack.com
ziphq.com
dyte.io
elimar.lmigroupintl.com
instant.so

———

officeofoverview.com
fruitful.com
chainzoku.io
studionuts.com.br
wise.com/us

———

totems-soclage.com
bisougallery.com
arqui9.com
devin.ai
three.studio

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥2👍1
🤖 Дизайн-система Wildberries и как AI меняет подход к проектированию

Влад из Wildberries рассказал об архитектуре дизайн-системы «Ритм», которая состоит из трёх уровней: примитивы (токены), абстракции (рецепты) и экспорт (готовые компоненты). Дизайнеры работают только с экспортным слоем, не видя сложности внутренних механизмов.

Ключевая проблема в том, что дизайнеры часто неправильно применяют токены к компонентам, что ломает систему при рефакторинге. Например, кнопка проходит через пять уровней абстракций от базового токена «перпл пятисотый» до финального компонента. Figma создаёт дополнительные ограничения: только четыре переключения свойств на коллекцию, невозможность создать зависимости между элементами без костылей. Команда уже экспериментирует с нейросетями, загружая правила дизайн-системы в базу знаний AI для автоматической генерации форм на основе компонентов.

Внутри:
– Почему семантика важнее визуального оформления при объединении продуктов;
– Как три типа поверхностей (карточка, wrapper, controls) определяют поведение элементов;
– Зачем форфилду нужны слоты, иконки, суффиксы и префиксы;
– Какие альтернативы Figma используют код вместо визуального редактора;
– Почему продукт должен управлять дизайн-системой, а не наоборот;
– Как нейросети учатся не создавать новые элементы вне системы.

ДС довольно сложная, мозг подкипает, но интересно посмотреть внутрянку)

➡️ Смотреть видео

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
116🔥6👍3😁1
🎮 Как МТС внедрила геймификацию и подняла retention на 32%

Руслан Ильясов и Антон Минеев из МТС рассказали о четырёх кейсах внедрения игровых механик во внутренние и внешние продукты компании. Самый неожиданный результат показал внутренний сервис SAM, где спрятали эмулятор с ретроиграми вроде Mario и Boogerman прямо в витрине приложений.

В приложении «Мой МТС» запустили новогодний адвент-календарь с 30 мини-играми на 30 дней. За прохождение начислялась внутренняя валюта для промокодов партнёров или игровой косметики. NPS среди игравших вырос на 3-4%, заметно увеличился трафик в экосистемные сервисы. В «МТС Карме» за месяц MAU подскочил на 46%, а количество обратной связи между сотрудниками выросло на 22,5%. Команда предупреждает о рисках фрода: если механика связана с промоакциями, всегда найдутся те, кто придёт только за кодами для перепродажи.

Внутри:
– Почему одна рулетка лучше тридцати мини-игр по багам и рискам;
– Как защитить промоакции от перепродажи кодов на сторонних площадках;
– Зачем привязывать задания к разным сервисам экосистемы;
– Какие трудозатраты понадобились для роста MAU на 32% (спойлер: две бутылки пива);
– Почему важно различать внутреннюю и внешнюю мотивацию пользователей;
– Как геймификация из маркетингового аттракциона становится системным инструментом.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
15🔥5👍2
🛠️ DevTools для дизайнера: как проверять вёрстку без страха перед кодом

Дима из Voximplant написал руководство по использованию инструментов разработчика для дизайнеров. Главная мысль: открыть DevTools это как поднять капот у автомобиля. Не нужно разбирать двигатель, достаточно понимать, где что находится.

Самая полезная функция для дизайнера это инспектор элементов. При наведении на элемент DevTools подсвечивает отступы цветом: зелёный показывает padding (внутренние отступы), оранжевый показывает margin (внешние). Вкладка Computed показывает финальные значения после всех вычислений браузера, а Styles показывает исходные CSS-правила и откуда они пришли. В Responsive Design Mode можно проверить адаптив, выбрав конкретное устройство или задав размеры вручную. Справа есть ручка для плавного изменения ширины, чтобы заметить момент, когда начинаются проблемы с вёрсткой.

Внутри:
– Как быстро достать SVG-логотип через Copy element;
– Зачем нужна вкладка Network для скачивания защищённых изображений;
– Как тестировать идеи прямо в браузере без Figma;
– Почему изменения видны только вам до обновления страницы;
– Какие пять основных зон есть в интерфейсе DevTools;
– Как конкретные значения отступов упрощают фидбек разработчикам.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
23🔥8👍2😁2🤯1
📚 40 элементов интерфейса для начинающих дизайнеров

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

Особенно интересны нюансы терминологии. Например, Bottom navigation в мобильных приложениях называется по-разному: Navigation bar в Material Design и Tab bar в Human Interface Guidelines. А меню из трёх точек имеет сразу три варианта: кебаб (вертикальные точки), фрикадельки (горизонтальные точки) и бенто (сетка квадратиков как в сервисах Google). Автор также объясняет важные различия: радио-кнопки позволяют выбрать только один вариант, а чекбоксы несколько; тост исчезает автоматически, а уведомление может быть постоянным.

Внутри:
– Почему аккордеон и коллапс это разные элементы;
– Как три точки превратились в кебаб и фрикадельки;
– Зачем нужны хлебные крошки и откуда такое название;
– Чем селект отличается от дропдауна;
– Почему минимальный размер кнопки 44×44 пикселя;
– Какие шесть типов диаграмм чаще всего используют в интерфейсах.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
24🔥5👍1
🔔 Inspiration #160

Подборка лендингов и сайтов для вдохновения на предстоящую неделю 🔥

evervault.com/customers
phive.pt/en
dolsten.com
aurelienvigne.com
anon.com

———

jakub.kr
flipcash.com
halfspace.ai
composio.dev
workos.com

———

matcharen.com
rmoon.me
ning-h.com
metalab.com
tomdimajo.com

———

balance.michael-aust.com
apple.com/os/ios
racepointglobal.com
leoleo.studio
avnier.com

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
7👍2🔥1
Рефы

Когда я работал в Точке и в целом в РФ продуктах, была одна проблема — хотелось посмотреть решения у конкурентов или хотя бы что-то близкое, но было негде. Не существовало тогда сервисов, где бы удобно собирались флоу, скрины и прочее продуктов из России и СНГ. Был mobbin, но он на мир.

Сегодня эта проблема решилась ребятами из screenoteka.com, которые собрали скрины уже из 74+ приложений. Ребята разбирают каждое приложение на 100% и в итоге у них получилась большущая библа на 5000+ сценариев, 17000+ экранов, а ещё 200 видео скрин-кастов флоу и микроанимаций.

Это еженедельно растущая коллекция, которую ребята активно масштабируют и развивают. И большой им лайк, что делают это своими силами. Я знаю, насколько это нелегко, особенно сейчас, в год вайбкодинга.

Удобный функционал:

продуманный поиск
древо сценариев
нативные скролл-экраны (скроллшоты)
хотспоты в сценариях
подсказки
возможность скачать любой экран

Доступ ко всей библиотеке можно получить по подписке — и да, если вы делаете анализ конкурентов и хотите найти паттерны быстро, то это точно того стоит 👌

Есть бесплатный доступ к последним 2 добавленным приложеням. Кстати, каждую неделю добавляется по 4 прилы. Лайк!

➡️ Смотреть рефы

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
42🤔8🔥7😢7🤯6👍3😁1
🔥🔥 Встречайте, Hirehi 3.2 или как я пилю свой продукт часть 20

Долго я тут молчал о том, как идёт работа над сервисом, а она шла каждый день по 10+ часов. И сегодня я рад вам представить версию 3.2, в которой появилась фича, которую я сам хотел сделать давно, потому что нет нигде ничего удобного.

🔘 Удобная работа с резюме
Теперь вы можете добавить своё резюме в сервис (вручную или из файла) в профиле и удобно им управлять с ПК и телефона. Быстро исправлять какие-то данные, делиться им с рекрутерами ссылкой или файлом (его можно скачать). Резюме после публикации будет доступно по общей ссылке, которую можно шерить. И по ней будет красивая сивиха)

Это огромная работа, которую мне удалось проделать. Дизайн, разработка и куча миграций, чтобы ничего не сломать. Все, у кого были загружены сиви в старой форме, в ЛК должно появиться новое (распарсенное). Возможно, неидеально, но лучше, чем ничего.

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

С телефона тоже очень удобно. В общем, пользуйтесь!) Фича бесплатная (пока что). В будущем я хочу сделать быстрый перевод на другой язык, скачивание для формата ATS, аналитику и так далее. Планы есть.

Ещё я все это завернул себе в аналитку, чтобы отслеживать все метрики по добавленным сиви и так далее. Вообще рад!

🔘 Новые иконки
Убрал ужасные fill иконки, которые были довольно тяжелые по весу. Теперь лёкий outline стиль, как и стиль иллюстраций в блоге. Круть!

🔘 Поиск по навыкам и навыки
Теперь также появились и навыки. Вы можете искать в поле поиска прямо по ним (там есть небольшая инструкция) и искать вакансии с конкретными навыками, которые генерятся LLM под каждую вакансию. Из страницы вакансии по навыку можно перейти и увидеть все вакансии с ним. Теперь поиск стал ещё удобнее и эффективнее.

🔥 One more thing...

В сбор вакансий добавлены более 500+ Телеграм каналов. Умная LLM система собирает только вакансии, которые мне нужны, отсеивая разный мусор, который не проходит. Я очень рад, что получилось это сделать.Теперь будет кратно больше вакансий с прямыми откликами. Это первый шаг, чтобы отойти от агрегаторов. Если у вас есть подборки ТГ каналов, можете заслать мне в лс, я расширю список)

Ну и как обычно масса исправлений и улучшений.

Как вам релиз? Пишите в комменты или мне в личку, если найдёте что-то, что нужно поправить. Я слушаю каждого и быстро исправлю)

Как всегда я буду рад вашим репостам, постам в соц. сетях про новый конструктор сиви буду рад вдвойне ❤️❤️

Приходите, пользуйтесь 😍

➡️ Смотреть вакансии
➡️ Смотреть вакансии
➡️ Смотреть вакансии

ч.19 | ч.21

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥8424👍12
👨‍🏫 Как VK обучает дизайнеров проводить немодерируемые UX-тесты

Анастасия Пушкарева и Полина Адрианова из VK рассказали о создании программы обучения дизайнеров немодерируемым исследованиям. Главная цель в демократизации исследований: дизайнеры могут быстрее проводить тесты, находясь в контексте продукта.

Программа занимает три недели и включает записи лекций, практику на реальных кейсах и работу с ментором. После нескольких итераций команда пришла к формату с готовыми кейсами и данными для анализа. В первой версии дизайнеры должны были искать задачи из своей работы и набирать по 50-60 респондентов на каждый тест, что оказалось невыполнимо. Теперь они выбирают из базы кейсов по мотивам реальных исследований VK и работают с уже собранными данными. После четырёх волн обучения команда перешла от потокового формата к точечному: теперь ментор прикрепляется к дизайнеру индивидуально без привязки к кварталу.

Внутри:
– Почему немодерируемые тесты проще для обучения, чем классические;
– Как диаграмма Ганта помогает управлять рабочей группой исследователей;
– Зачем нужны тесты с самопроверкой по сложным темам;
– Почему дизайнерам пришлось делать шаблон презентации в Figma;
– Какие «правила клуба» установили для совместной работы;
– Как мастер-классы помогают закрепить конкретные навыки.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
10👍4🔥1😁1
🚀 Превращаем Фигма макеты в живое приложение без кода

Фёдор из Notamedia показал способ создания рабочих прототипов мобильных приложений через связку Figma, Cursor, Expo и Git. Главная идея в том, чтобы использовать ИИ-редактор кода Cursor для автоматического превращения макетов в React Native приложение.

Процесс начинается с подготовки макета: все элементы должны иметь понятные названия, чтобы ИИ лучше понимал структуру. Затем через Figma MCP (специальный сервер) Cursor получает доступ к макету и с помощью команды get_code изучает структуру фрейма. После создания базового проекта через npx create-expo-app достаточно скопировать ссылку на фрейм из Figma и отправить в чат Cursor с нужной командой. Результат можно сразу посмотреть на смартфоне через приложение Expo Go, просто отсканировав QR-код.

Внутри:
– Зачем нужны «Записи и правила» в настройках Cursor;
– Как Git спасает от случайного переписывания кода ИИ-агентом;
– Почему важно правильно называть элементы в макете;
– Как запустить прототип на любом смартфоне через Expo Go;
– Какие команды нужны для сохранения работы через Git;
– Почему навыки вайб-кодинга скоро станут обязательными для дизайнеров.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
31🔥17👍5
Тут много новеньких, поэтому короткой строкой напомню

Кроме моего основного канала есть ещё два:

1. Вакансии для дизайнеров – каждый день кроме выходных 8 вакансий из 40+ источников для графических, ux/ui и продуктовых дизов.

2. Референсы интерфейсов – каждый день по 3 поста самых разных интерейсов: веб, мобилка, дашборды, графика и прочие.

Буду рад всех видеть) И рекомендациям тоже ❤️

Спасибо всем, кто меня читает. Я это очень ценю и благодарен каждому лично ❤️
Please open Telegram to view this post
VIEW IN TELEGRAM
314🔥6
🏭 Измерение UX в enterprise-системах, где у пользователей нет выбора

Александр Попов из «Цифры» рассказал об измерении удовлетворённости пользователей корпоративных систем. Главная проблема в том, что традиционные метрики вроде NPS не работают: пользователи не могут просто уйти к конкуренту, они вынуждены использовать систему по приказу руководства.

Вместо HEART от Google для enterprise подходит фреймворк CASTLE от Nielsen Norman Group: Cognitive Load (когнитивная нагрузка), Advanced Feature Usage (использование продвинутых функций), Satisfaction (удовлетворённость), Task Efficiency (эффективность задач), Learnability (обучаемость) и Errors (ошибки). На металлургическом производстве редизайн интерфейса MES-системы сократил время регистрации партии с 45 до 15 минут, количество ошибок снизилось с 23% до 4%, а ROI составил 420% за первый год.

Внутри:
– Почему пользователи создают «теневые» процессы и ведут параллельный учёт в Excel;
– Как NASA Task Load Index помогает измерить когнитивную нагрузку;
– Зачем анализировать частоту использования обходных путей;
– Почему важно наблюдать за пользователями в естественной среде;
– Как связать улучшение UX с бизнес-показателями и ROI;
– Какие метрики использовать вместо Retention и Engagement.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥7👍4
Как я пилю свой продукт. Часть 21

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

🔘 Аналитика
Теперь у каждого сиви можно посмотреть статистику. Откуда заходили и с каких стран за 7, 30 и 90 дней. Вэлком :)

🔘 Дубль на английском
Резюме на русском можно 1 кнопкой продублировать на английский. А затем уже английское резюме править как удобно, оно не зависит от РФ. У него своя статистика, своя ссылка. В списке они помечаюстя какое на каком языке. В резюме на англ не получится писать на русском, тост об этом подскажет). Продублировать можно из кебаб меню (...) которое.

🔘 Курсы
Новый раздел в резюме, если вам нужно добавить доп.образование.

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

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

Из гугла за последние 3 месяца 255 000 показов и 12 000 кликов. Средняя позиция 9.4, офигеть) Это круто! Для сравнения в предыдущий период 3 месяцев (май-август) было всего 86 700 показов и 3 700 кликов. А позиция была 22.8!!! А сейчас 9.4.
SEO работает и это круто!) Графики посещаемости растут от месяца к месяцу.

В общем, я рад, что всё немного развивается и лучшей поддержкой от вас будет репост и совет другу) Ну и оформление ПРО подписки, конечно.

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

➡️ Смотреть вакансии
➡️ Смотреть вакансии
➡️ Смотреть вакансии

ч.20 | ч.22

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥4013👍5
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍3🔥2
Dodo и дизайн-система. Часть 4 и 5

Никита, дизайнер из команды, которая строит дизайн-системы, продолжает тему доступности и показывает, как автоматически подстраивать макеты под увеличение шрифтов. Эта фича позволяет пользователям растягивать текст на 150-300% для комфорта, и она работает как на iPhone, так и на Android. Он выбрал максимум в 300% для тестов, чтобы интерфейс не ломался даже при сильном увеличении.

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

Внутри:
– Почему доступность решает проблемы от временных травм до постоянных ограничений зрения;
– Что такое масштабирование шрифтов и как оно меняет не только текст, но и иконки или прокрутку;
– Как создать специальный режим в Figma для теста на 300% увеличения;
– Шаги: умножить базовые размеры на три и применить к типографике;
– Почему не стоит растягивать все элементы, а лучше полагаться на гибкие блоки;
– Как добавить варианты компонентов для разных сценариев без лишней работы.

И в догонку прикрепил сразу 5 часть: она про документацию ДС. Очень жирно! Никите лайкос за такую пользу.

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
28🔥13👍1🤯1
🔍 Как по-настоящему понять пользователя: от Double Diamond до нейросетей

Алексей, принципал-дизайнер с 15-летним опытом, рассказал о первом ромбе системы Double Diamond и том, как исследовать пользователей при ограниченном бюджете. Главная мысль: пока гипотезы не подтверждены статистикой и реальными пользователями, они остаются просто предположениями.

В классическом подходе первый ромб включает интервью со стейкхолдерами, работу с аналитикой, интервью с пользователями, опросы и анализ конкурентов. При интервью важно слушать 80% времени и задавать вопросы только 20%, использовать правило «5 почему» и не искать готовых решений. На примере email-приложения Noetro команда через анализ форумов нейросетями выяснила, что пользователи хотят использовать входящие письма как ту-ду задачи. Решением стала папка «Дайджест», где письма остаются непрочитанными до ручной отметки «Готово».

Внутри:
– Почему важно визуализировать карту проблем в Miro или FigJam;
– Какие метрики запрашивать у аналитиков для валидации гипотез;
– Зачем платить респондентам $60-100 за интервью;
– Как формулировать Problem Statement через паттерн потребности;
– Почему нейросети лучше искать боли на форумах, чем спрашивать напрямую;
– Какие 30 из 80 болей email-пользователей закрыли в MVP.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥3👍2
📺 Дизайн для телевизоров: практические принципы 10-футового интерфейса

Милан Балач во второй части статьи о TV-дизайне разбирает практические аспекты проектирования интерфейсов для телевизоров. Главный принцип: все платформы (Roku, WebOS, Android TV, Fire TV, tvOS) используют одинаковую схему управления через D-pad, OK и Back, что позволяет создавать универсальные решения.

Ключевые ограничения включают необходимость отступов в 5% от краёв экрана (или 60 точек сверху/снизу и 80 по бокам), базовый размер текста от 24px вместо привычных 16-18px для веба, и обязательное визуальное выделение фокуса через масштабирование, инверсию цветов или рамки. Интересный приём: использование 13 колонок вместо 12 позволяет последнему элементу «полки» лучше выглядывать из-за края. Ввод текста через D-pad требует около 38 нажатий для фразы «hey there» против 9 на мобильном устройстве.

Внутри:
– Почему нечётное количество колонок решает проблему overscan;
– Как использовать длительное нажатие для удвоения функций кнопок;
– Зачем Prime Video переназначает кнопку Up для функции X-Ray;
– Почему вертикальное движение меняет группы, а горизонтальное элементы внутри;
– Как PNG с прозрачностью оживляет жёсткие интерфейсы;
– Какие три пропорции постеров (2:3, 16:9, 1:1) используются для разного контента.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
12👍3🔥2
🔧 Как поддерживать компоненты дизайн-системы после запуска

Рама Крушна Бехера из команды Razorpay рассказал, что происходит с компонентом после того, как его выпустили. Оказывается, запуск это только начало. Дальше команда получает запросы от дизайнеров и разработчиков, оценивает их и решает, что чинить, что улучшать, а что оставить как есть.

В команде выстроили чёткий процесс. Все запросы приходят в один Slack-канал, каждую неделю проводят созвоны для разбора задач, а для типовых вопросов создали бота, который отвечает вместо команды.

Внутри:
– Два типа запросов и как их различать;
– Как понять, баг это или неправильное использование;
– Система приоритетов P0, P1 и P2;
– Три пути решения проблемы;
– Практики команды для быстрой обработки запросов.

➡️ Читать статью (V*N)

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥3👍2
📊 От данных к решениям: UX-стратегии для дашбордов реального времени

Каран Равал рассказывает о проектировании дашбордов, которые помогают принимать решения под давлением. Главная проблема: многие панели показывают данные в реальном времени, но не помогают понять, что требует немедленного внимания.

Ключевые подходы включают дельта-индикаторы и спарклайны для отображения изменений, микроанимации длительностью 200-400 миллисекунд для привлечения внимания без отвлечения, и мини-историю последних изменений для снижения нагрузки на память. На примере компании по прокату автомобилей операторы смогли сократить время проверки состояния машин с нескольких часов до 5 минут благодаря объединению всех метрик в одном интерфейсе.

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

Внутри:
– Почему человек может обработать только 5 элементов одновременно;
– Как скелетные UI заменяют спиннеры и снижают тревожность;
– Зачем показывать «Данные на 10:42» при сбоях подключения;
– Почему спарклайны эффективнее полноценных графиков;
– Как цветовое кодирование (красный для критичного, зелёный для стабильного) ускоряет интерпретацию;
– Какие ARIA-регионы помогают озвучивать изменения для скринридеров.

➡️ Читать статью

———

💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Please open Telegram to view this post
VIEW IN TELEGRAM
18🔥6👍3