Команда Ozon Tech рассказала о типичных проблемах при создании дашбордов и способах их решения. Главная проблема в том, что красивые панели данных часто оказываются бесполезными из-за избытка информации и конфликта интересов между дизайнерами, аналитиками и пользователями.
Основные ошибки включают попытку поместить все метрики на одну страницу, неверные допущения о знаниях пользователей и неправильную расстановку акцентов. Решение в создании трёхуровневой иерархии: верхний уровень с ключевыми показателями и крупной типографикой, средний с визуализацией трендов, нижний с детальной аналитикой в периферийной зоне. Важно соблюдать принцип единоначалия фильтров, когда все элементы визуализации подчиняются единым правилам фильтрации. Без этого пользователь столкнётся с несогласованными данными и потратит время на настройку каждого фильтра отдельно.
Внутри:
– Почему для топ-менеджмента нужны стратегические показатели, а для специалистов детальный анализ;
– Как использовать вкладки и детализацию вместо перегрузки главного экрана;
– Зачем ограничивать яркие индикаторы для управления вниманием;
– Какие библиотеки упрощают разработку (AG Grid, Apache EChart, Recharts);
– Почему Apache Superset может заменить разработку с нуля;
– Когда использовать линейные графики, а когда радиальные индикаторы.
———
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤7👍2
Подборка лендингов и сайтов для вдохновения на предстоящую неделю
– 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 рассказал об архитектуре дизайн-системы «Ритм», которая состоит из трёх уровней: примитивы (токены), абстракции (рецепты) и экспорт (готовые компоненты). Дизайнеры работают только с экспортным слоем, не видя сложности внутренних механизмов.
Ключевая проблема в том, что дизайнеры часто неправильно применяют токены к компонентам, что ломает систему при рефакторинге. Например, кнопка проходит через пять уровней абстракций от базового токена «перпл пятисотый» до финального компонента. Figma создаёт дополнительные ограничения: только четыре переключения свойств на коллекцию, невозможность создать зависимости между элементами без костылей. Команда уже экспериментирует с нейросетями, загружая правила дизайн-системы в базу знаний AI для автоматической генерации форм на основе компонентов.
Внутри:
– Почему семантика важнее визуального оформления при объединении продуктов;
– Как три типа поверхностей (карточка, wrapper, controls) определяют поведение элементов;
– Зачем форфилду нужны слоты, иконки, суффиксы и префиксы;
– Какие альтернативы Figma используют код вместо визуального редактора;
– Почему продукт должен управлять дизайн-системой, а не наоборот;
– Как нейросети учатся не создавать новые элементы вне системы.
ДС довольно сложная, мозг подкипает, но интересно посмотреть внутрянку)
➡️ Смотреть видео
———
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤16🔥6👍3😁1
Руслан Ильясов и Антон Минеев из МТС рассказали о четырёх кейсах внедрения игровых механик во внутренние и внешние продукты компании. Самый неожиданный результат показал внутренний сервис 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
Дима из 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
Автор собрал подробный справочник базовых элементов интерфейса, разделив их на четыре группы: навигация, ввод данных, обратная связь и отображение данных. Каждый элемент объясняется простым языком с практическими примерами использования.
Особенно интересны нюансы терминологии. Например, 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
Подборка лендингов и сайтов для вдохновения на предстоящую неделю
– 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 прилы. Лайк!
➡️ Смотреть рефы
———
💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Когда я работал в Точке и в целом в РФ продуктах, была одна проблема — хотелось посмотреть решения у конкурентов или хотя бы что-то близкое, но было негде. Не существовало тогда сервисов, где бы удобно собирались флоу, скрины и прочее продуктов из России и СНГ. Был 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
Долго я тут молчал о том, как идёт работа над сервисом, а она шла каждый день по 10+ часов. И сегодня я рад вам представить версию 3.2, в которой появилась фича, которую я сам хотел сделать давно, потому что нет нигде ничего удобного.
Теперь вы можете добавить своё резюме в сервис (вручную или из файла) в профиле и удобно им управлять с ПК и телефона. Быстро исправлять какие-то данные, делиться им с рекрутерами ссылкой или файлом (его можно скачать). Резюме после публикации будет доступно по общей ссылке, которую можно шерить. И по ней будет красивая сивиха)
Это огромная работа, которую мне удалось проделать. Дизайн, разработка и куча миграций, чтобы ничего не сломать. Все, у кого были загружены сиви в старой форме, в ЛК должно появиться новое (распарсенное). Возможно, неидеально, но лучше, чем ничего.
Вы можете добавлять несколько резюме, делать дубль добавленного и чуть его менять, чтобы например проверить конверсию в ответ. Можно выбрать какое резюме будет основным для мэтча и сопроводительных писем на странице вакансии.
С телефона тоже очень удобно. В общем, пользуйтесь!) Фича бесплатная (пока что). В будущем я хочу сделать быстрый перевод на другой язык, скачивание для формата ATS, аналитику и так далее. Планы есть.
Ещё я все это завернул себе в аналитку, чтобы отслеживать все метрики по добавленным сиви и так далее. Вообще рад!
Убрал ужасные fill иконки, которые были довольно тяжелые по весу. Теперь лёкий outline стиль, как и стиль иллюстраций в блоге. Круть!
Теперь также появились и навыки. Вы можете искать в поле поиска прямо по ним (там есть небольшая инструкция) и искать вакансии с конкретными навыками, которые генерятся LLM под каждую вакансию. Из страницы вакансии по навыку можно перейти и увидеть все вакансии с ним. Теперь поиск стал ещё удобнее и эффективнее.
В сбор вакансий добавлены более 500+ Телеграм каналов. Умная LLM система собирает только вакансии, которые мне нужны, отсеивая разный мусор, который не проходит. Я очень рад, что получилось это сделать.Теперь будет кратно больше вакансий с прямыми откликами. Это первый шаг, чтобы отойти от агрегаторов. Если у вас есть подборки ТГ каналов, можете заслать мне в лс, я расширю список)
Ну и как обычно масса исправлений и улучшений.
Как вам релиз? Пишите в комменты или мне в личку, если найдёте что-то, что нужно поправить. Я слушаю каждого и быстро исправлю)
Как всегда я буду рад вашим репостам, постам в соц. сетях про новый конструктор сиви буду рад вдвойне
Приходите, пользуйтесь
ч.19 | ч.21
———
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥84❤24👍12
Анастасия Пушкарева и Полина Адрианова из 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 поста самых разных интерейсов: веб, мобилка, дашборды, графика и прочие.
Буду рад всех видеть) И рекомендациям тоже❤️
Спасибо всем, кто меня читает. Я это очень ценю и благодарен каждому лично❤️
Кроме моего основного канала есть ещё два:
1. Вакансии для дизайнеров – каждый день кроме выходных 8 вакансий из 40+ источников для графических, ux/ui и продуктовых дизов.
2. Референсы интерфейсов – каждый день по 3 поста самых разных интерейсов: веб, мобилка, дашборды, графика и прочие.
Буду рад всех видеть) И рекомендациям тоже
Спасибо всем, кто меня читает. Я это очень ценю и благодарен каждому лично
Please open Telegram to view this post
VIEW IN TELEGRAM
3❤14🔥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.
➡️ Читать статью
———
💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Александр Попов из «Цифры» рассказал об измерении удовлетворённости пользователей корпоративных систем. Главная проблема в том, что традиционные метрики вроде 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
———
💻 Курс по поиску работы
😍 Про дизайн
🔥 Вакансии дизайнерам
🎨 Референсы
Буквально недавно я зарелизил резюме в профиле, но последние 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🔥40❤13👍5
Подборка лендингов и сайтов для вдохновения на предстоящую неделю
– kinhive.com
– turn.io
– rierastudio.com/en
– literal.club/book/the-ride-of-a-lifetime-gcw03
– nicolasbussiere.com
———
– clay.earth/apple-vision-pro
– goosebumps.epic.net
– firstframe.fr
– doubleplay.studio
– benjamindauton.com
———
– cobot.co
– figma.com/slides
– bradleyziffer.com
– cluely.com
– lemon.io
———
– quadplex80.com
– helmutagency.com
– miter.com
– aether1.ai
– mikkisindhunata.com
———
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍3🔥2
Dodo и дизайн-система. Часть 4 и 5
Никита, дизайнер из команды, которая строит дизайн-системы, продолжает тему доступности и показывает, как автоматически подстраивать макеты под увеличение шрифтов. Эта фича позволяет пользователям растягивать текст на 150-300% для комфорта, и она работает как на iPhone, так и на Android. Он выбрал максимум в 300% для тестов, чтобы интерфейс не ломался даже при сильном увеличении.
Доступность учитывает разные ситуации: когда одна рука занята кофе, после травмы или при постоянных проблемах со зрением. Вместо жёстких размеров Никита советует использовать гибкие макеты, которые сами адаптируются, и добавлять минимальные ограничения для элементов.
Внутри:
– Почему доступность решает проблемы от временных травм до постоянных ограничений зрения;
– Что такое масштабирование шрифтов и как оно меняет не только текст, но и иконки или прокрутку;
– Как создать специальный режим в Figma для теста на 300% увеличения;
– Шаги: умножить базовые размеры на три и применить к типографике;
– Почему не стоит растягивать все элементы, а лучше полагаться на гибкие блоки;
– Как добавить варианты компонентов для разных сценариев без лишней работы.
И в догонку прикрепил сразу 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
Алексей, принципал-дизайнер с 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
Милан Балач во второй части статьи о 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;
– Три пути решения проблемы;
– Практики команды для быстрой обработки запросов.
———
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7🔥3👍2
Каран Равал рассказывает о проектировании дашбордов, которые помогают принимать решения под давлением. Главная проблема: многие панели показывают данные в реальном времени, но не помогают понять, что требует немедленного внимания.
Ключевые подходы включают дельта-индикаторы и спарклайны для отображения изменений, микроанимации длительностью 200-400 миллисекунд для привлечения внимания без отвлечения, и мини-историю последних изменений для снижения нагрузки на память. На примере компании по прокату автомобилей операторы смогли сократить время проверки состояния машин с нескольких часов до 5 минут благодаря объединению всех метрик в одном интерфейсе.
В здравоохранении объединение лабораторных результатов, медикаментов и аллергий в одном интерфейсе позволило кардиологам быстрее диагностировать и назначать лечение.
Внутри:
– Почему человек может обработать только 5 элементов одновременно;
– Как скелетные UI заменяют спиннеры и снижают тревожность;
– Зачем показывать «Данные на 10:42» при сбоях подключения;
– Почему спарклайны эффективнее полноценных графиков;
– Как цветовое кодирование (красный для критичного, зелёный для стабильного) ускоряет интерпретацию;
– Какие ARIA-регионы помогают озвучивать изменения для скринридеров.
———
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤8🔥6👍3