1/4 how to make

нормальной кириллицы мало — с этим мы уже определились. обычно все уходит в крайности: либо стерильно и безопасно, либо слишком декоративно, и через три экрана от шрифта уже устаешь. поэтому задача звучала немного противоречиво — сделать практичный интерфейсный шрифт, но оставить в нем живость. рассказываем, как создавали Lebowski by Pragmatica

Минутка веб:

Эффект объема и переката контента по краям экрана

🚦 Как 2ГИС превратил «зелёную волну» в интерфейс

Я кайфанул от статьи, это прям продуктово покопаться в таком незначительном элементе) Даня из команды Транспорт в 2ГИС рассказывает, как в навигаторе запускали подсказку для проезда светофоров без лишних остановок. Идея звучит просто: если известны состояния светофоров по маршруту, можно подсказать водителю скорость, при которой он попадёт в зелёную волну. Но в машине простой идеи недостаточно, потому что каждый новый элемент на экране конкурирует не с красивой пустотой, а с дорогой, маршрутом, манёврами, камерами и вниманием водителя. Самое интересное в кейсе, как команда искала форму для этой подсказки. Текстовые сообщения оказались слишком тяжёлыми, одно число требовало постоянного сравнения, а зона спидометра уже была занята предупреждениями. В итоге решение собралась из двух слоёв: плашка с диапазоном скорости даёт точность, а аналоговая шкала с зелёной зоной помогает быстро понять, в потоке ты или нет. Отдельно сильная часть кейса, что дизайнер не остановился на макетах, а полез в математику стрелки, код и параметры анимаций, чтобы фича доехала до релиза в нужном виде. Внутри: – Почему «просто показать скорость» оказалось плохой постановкой задачи; – Как интерфейс навигатора ограничивает любое новое решение; – Почему зелёная волна должна ощущаться как состояние, а не как уведомление; – Как диапазон скорости оказался понятнее одного целевого числа; – Зачем в интерфейсе появился аналоговый спидометр с зелёной зоной; – Как анимации помогают дать обратную связь без лишнего шума; – Почему дизайнеру пришлось проверять техническую реализацию самому; – Что 2ГИС планирует добавить дальше: награды за серию зелёных светофоров и новые города. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Сегодня начинается FIFA World Cup 2026! ⚽️

Впервые в истории турнир с 48 командами станет более доступным 💜 Сурдоперевод Опять же впервые в истории FIFA трансляция с сурдопереводом на каждом матче. Это иммерсивный опыт для глухих и слабослышащих болельщиков: переводчики передают не только игровые моменты, но и ключевые звуковые сигналы — свистки арбитра, рёв трибун, эмоциональные сдвиги атмосферы, — чтобы зрители чувствовали каждый момент в реальном времени. Всё это живёт в официальной аппке FIFA World Cup 2026™. Я хотела протестировать её на доступность, но она недоступна в рф. Субтитры На стадионах они идут на бегущих строках, табло и экранах, плюс по ссылкам в приложении — для тех, кто хочет следить за голосовым контентом во время матча. Хаптика Это доска размером с планшет с рельефной схемой поля. Кладёшь пальцы на поверхность и следишь за игрой на ощупь: по схеме движется магнитное кольцо — мяч, а у каждого события свой паттерн вибрации — пас, подкат, удар. Незрячий болельщик буквально чувствует игру: где мяч, в какую сторону атака, гол. Будут на стадионах в Далласе, Нью-Йорке, Сиэтле и Ванкувере. Сенсорные пакеты и сенсорные комнаты На каждом стадионе будут доступны сенсорные пакеты с шумоподавляющими наушниками, fidget-инструментами и средствами коммуникации. Также будет оборудована сенсорная комната с приглушённым освещением, звукоизоляцией, тактильными арт-объектами и мягкими сиденьями. Моя дочка устаёт от шума, и для нас такие комнаты — огромное спасение. Когда вокруг 50 тысяч кричащих людей, возможность выйти на десять минут в тихое место, выдохнуть и вернуться к игре — спасает от побега с игры ) Официальное приложение турнира тоже сделано с учётом доступности — обещают регулируемый размер шрифта, настройку цветового контраста и субтитры к видео. Ну вот это я проверить не могу. Если вы не в рф, качните, гляньте, что там. И если несложно, напишите в комментах, как всё реализовано на самом деле. Очень интересно ) На сайте FIFA посмотрела быстро: работает со скринридером (но нужно тщательнее проверять), альты прописаны, даже есть изображения в разных размерах, значит сайт быстрее загрузится, контрастность гуд, таб работает, зуммируется все прекрасно, текст не обрезается. И знаете, это большая работа. Просто молодцы! За кого болеть будем? ⚽️
Когда ищешь нужный экран в плохо структурированных макетах Figma.
Абстрактные формы — быстрый способ добавить глубину, ритм и настроение в макеты, не перегружая их деталями. Собрали подборку файлов: от мягких градиентов и 3D‑фигур до дудлов, цветочных элементов и монохромных паттернов — всё, чтобы ускорить работу над фонами, обложками и акцентами в интерфейсе.
🔶 Abstracto Demo Демо‑набор крупных цветных PNG‑форм, которые хорошо работают как выразительные фоны и центры композиции. 🔶 Texturas Abstractas Пакет текстур, удобных для фоновых заливок, наложений и лёгкого «зашумления» плоских макетов. 🔶 Geometrical Abstraction with Gradients Серия геометрических абстракций с мягкими градиентами, напоминающими плакатный графдизайн и digital‑арт. 🔶 AbstractForms Vol.1 Коллекция аккуратных фигур, которые можно собирать в постеры, аватары и иллюстративные блоки. 🔶 Abstract Lines Подборка линий и контуров, добавляющих движение и ритм фонам, шапкам и разделителям секций. 🔶 Fondos Abstractos 3D‑фоны с неоновыми формами и глубиной, которые хорошо работают как обложки и главные экраны. 🔶 Abstract Blob Vector Shapes Набор векторных «блобов» и пятен, которые удобно использовать как мягкие подложки под текст и карточки. 🔶 50 Abstract Posters & Wallpapers Part 2 Коллекция готовых постеров и обоев, которые можно брать в качестве фонов и референсов. 🔶 Abstract Geometric Waves Геометрические волны и полосы, создающие динамичный рисунок для фона. 🔶 Glassmorphism Wallpaper Abstract 3D Figure Обои с абстрактными 3D‑фигурами в стиле стекломорфизма, идеальны под UI-заставки. 🔶 12 Abstract Banners Free 12 готовых баннеров с яркой графикой, оптимизированных под веб и соцсети. 🔶 Abstract Geometric Pattern Simple Shapes 03 Простые геометрические паттерны из базовых форм для повторяющихся фонов и плиточной сетки. 🔶 M‑513 Abstract 3D Illustrations Набор 3D‑иллюстраций, которые можно использовать как ключевые визуалы в лендингах и презентациях. 🔶 Gradient Abstract Banners Баннеры на градиентных подложках, хорошо заходящие как промоблоки, превью и обложки. 🔶 3D Abstract Shapes Коллекция объёмных 3D‑форм, годящихся для центральных изображений, постеров и визуальных акцентов. 🔶 Monochrome Abstract Монохромные абстракции со сдержанной графикой, которые поддерживают минималистичный и строгий визуальный стиль. 🔶 36 Abstract Graphic Elements Pack 36 графических элементов, из которых удобно собирать коллажи и декоративные композиции. 🔶 Free Abstract Flower Elements Collection Набор «цветочных» элементов, стилизованных для декоративных вставок и паттернов. 🔶 350 Vector Doodles Weird Creatures & Abstract Forms Большая коллекция векторных дудлов с причудливыми существами и абстрактными формами для живых, экспериментальных макетов. [Фабрика Дизайна]
🤓 Дизайн—Разминка 99 будет особенной 🔥
🟣 в этот раз задачу предлагаете вы 🟣 кидайте в чат продуктовую или околопродуктовую задачу: скрин экрана, флоу, фича, что угодно из вашей практики. 🟣напишите коротко задание что правим 🟣 мы выберем лучшую и разомнёмся на ней все вместе присылайте сюда @Designwarmups_chat designwarmups.com сайт проекта
😜 Пользователи не врут. Они просто плохо помнят, как работают
Кирилл Улитин и Стася Кабанова из МойОфис разбирают проблему, с которой сталкивается почти любое исследование: человек на интервью рассказывает не сам опыт, а его отредактированную версию. Он забывает мелкие действия, упрощает сценарий, пропускает автоматические шаги и иногда сам не замечает, как на самом деле обходит неудобства продукта. Поэтому команда попробовала контекстное интервью: сначала поговорить с пользователем, а потом смотреть, как он реально выполняет задачу в живой системе. В этот момент начинают проявляться вещи, которые нельзя достать обычными вопросами. Кто-то вытаскивает фотографию через инструменты разработчика, потому что интерфейс не дает скачать ее нормально. Кто-то раскладывает окна как личный рабочий дашборд. Кто-то компенсирует неудобство продукта связкой из нескольких приложений. Внутри: – Почему обычное интервью часто показывает логичную версию опыта, а не реальную; – Как внимание, память и социальная желательность искажают ответы пользователей; – Чем контекстное интервью отличается от глубинного интервью и юзабилити-теста; – Почему наблюдение помогает находить не только боли, но и обходные практики; – Когда можно просить пользователя выполнить задачу прямо во время исследования; – Зачем заранее предупреждать участника, что нужно будет показывать экран и рабочие действия; – Как диаграмма сходства помогает разобрать разрозненные наблюдения; – Когда контекстное интервью полезно, а когда оно не даст соразмерной ценности. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Самые интересные UX-исследования происходят не в мобилках и вебе.
🔵Авиация В работе пилотов, где ответственность за пассажиров и экипаж колоссальны важны скорость и предсказуемость в UX. Поэтому даже самые современные самолёты сохраняют большое количество физических переключателей и кнопок, на первый взгляд расположенных хаотично. Исследования неоднократно показывали, что в стрессовых условиях пилоты быстрее находят нужный физический элемент управления, чем соответствующую функцию на экране. 🔵Автомобили Похожая ситуация сейчас происходит а автомобильных интерфейсах — китайские производители так и норовят перевести большинство управления на тач-скрины, спрятав управляющие элементы куда-нибудь во второй, а то и в третий уровень меню 🔵Медицина Многие медицинские системы выглядят устаревшими не потому, что их забыли обновить. Иногда это осознанное решение. Врач, который годами работает с определённым интерфейсом, может совершать меньше ошибок в знакомой среде, чем в новой и визуально более современной. 🔵Электростанции После анализа ряда инцидентов выяснилось, что проблема часто заключалась не в нехватке информации, а наоборот — в её избытке. Когда оператор одновременно получает десятки предупреждений, критически важный сигнал может просто потеряться. 🔵Космос В космической отрасли при тестировании интерфейсов чаще задают вопрос: что произойдёт, если всё пойдёт не по плану? Астронавтов регулярно тренируют на отказах оборудования и потере связи в аварийных сценариях, но катастрофы могут происходить и из-за ошибок на Земле — при проектировании интерфейсов. Один из самых известных примеров — потеря космического аппарата Mars Climate Orbiter Loss. Причина была удивительно простой: одна команда использовала метрическую систему измерений, другая — имперскую. В результате аппарат стоимостью более ста миллионов долларов был потерян ещё до начала научной миссии. Этот случай напоминает важную вещь: интерфейс — это не только кнопки и экраны. Это ещё и язык, обозначения, единицы измерения, правила передачи информации между людьми и системами. Авиация, медицина, атомная энергетика и космонавтика уже давно показали: хороший интерфейс — это тот, который помогает человеку принимать правильные решения. Возможно, именно поэтому самые ценные уроки UX рождаются не в приложениях для доставки еды, а там, где цена ошибки измеряется совсем другими величинами. 🌊🌊
#14 Фигма зовёт вайбкод обратно на холст
Фигма выложила майский Workflow Lab про Code to Canvas. Если коротко: прототип, который вы собрали в коде через Cursor, Codex, Claude Code или другой агент, можно затащить обратно в Фигму как редактируемые экраны. Дальше уже смотреть флоу целиком, править компоненты, токены, состояния и при желании пушить изменения обратно в код. Сама связка «дизайн-код-дизайн» не новая. Интереснее другое. Последний год все очень радостно продавали вайбкодинг как короткий путь: написал промпт, получил интерфейс, запустил, погнал дальше. Типа Фигма больше не нужна, дизайнеры мешают скорости, агент сам всё соберёт. А потом выясняется, что быстро собранный экран всё равно надо где-то нормально посмотреть. Вайбкодинг быстро даёт экран, но плохо показывает продуктовый сценарий целиком В браузере ты видишь один экран. Иногда пару состояний, если не лень потыкать. В коде видишь компоненты, файлы, стили, условия. А продуктовый флоу целиком обычно расползается по вкладкам, роутам и «сейчас я тебе покажу, только сначала залогинюсь». Для разработки ок, для обсуждения интерфейса так себе. У меня так постоянно. Быстро сделал фичу, локально вроде работает, в голове всё ясно. Потом открываешь рядом несколько экранов и видишь: • кнопка называется иначе • пустое состояние забыто • фильтр ведёт себя странно • мобильная версия поехала • пользователь попадёт в тупик и будет смотреть на экран как на квест от плохого диза И всё. Твоя «почти готовая» фича уже не такая готовая В доке Фигма прямо описывает похожий сценарий. Агент берёт локальный прототип, переносит уникальные экраны на холст, использует компоненты и стили из дизайн-системы, добавляет страницу с саммари. Потом дизайнеры уже могут смотреть и чинить: где лишний элемент, где лучше взять нормальный компонент, где просела иерархия, где токены уехали итд Это хорошая роль для Фигмы. Она не обязана быть местом, где всё начинается. Иногда она может быть местом, куда продукт возвращается на проверку. Быстро накидали в коде, положили на холст, посмотрели весь сценарий, привели в чувство, отправили обратно в разработку. Тут, кстати, спор «фигма или код» становится совсем уставшим. В реальной работе чаще нужен круг: 1. быстро собрать рабочий вариант 2. увидеть весь флоу рядом 3. поправить продуктовую логику 4. вернуть изменения туда, где это реально живёт Главное, чтобы этот круг не превратился в новый ритуал ради ритуала. Типа сначала агент сделал экран, потом агент перенёс его в Фигму, потом агент поправил, потом агент вернул в код, а команда всё это время сидела и смотрела на красивую автоматизацию. Дизайнерское решение всё равно кто-то должен принять. Пока что, желательно человек. Что думаете? ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
🆕 Новые настройки меню в ME100
Теперь в блоке ME100 доступно ещё больше настроек для разных устройств. Для мобильной версии: 🟠можно выбрать один из 4 вариантов выпадающего меню: на весь экран, на всю ширину экрана, в виде боковой панели или классического выпадающего меню; 🟠настроить отображение логотипа: показывать логотип, текст или оба элемента одновременно; 🟠добавить разделитель между пунктами меню. В десктопной версии теперь можно выбрать от 1 до 4 колонок для подменю, чтобы удобнее организовать большое количество разделов. Как вам обновления? Делитесь в комментариях! 💬 #tildaupdates
#13 Replit хочет дать агентам насмотренность
Replit 15 мая добавил в каталог MCP новый сервер Lazyweb. Если коротко, он позволяет агенту искать по базе из 257k+ реальных экранов приложений. Replit прямо пишет: для UI-референсов и дизайн-исследований. На первый взгляд, маленькая новость из списка обновлений. Добавили ещё один MCP, ну ок. Но для вайбкодинга это довольно важная штука. Потому что сейчас у AI-интерфейсов есть очень узнаваемая болезнь. Попросил собрать сервис, личный кабинет, страницу вакансии, CRM или дашборд, и через минуту получаешь что-то аккуратное, чистенькое и до боли одинаковое. Карточки, табы, серые подписи, синий акцент, график, три метрики сверху. Всё вроде нормально. Только ощущение, что этот экран уже видел тысячу раз и ни один раз не хотел им пользоваться. Проблема часто не в том, что модель не умеет рисовать. Она рисует как среднее арифметическое интернета. А среднее арифметическое обычно выглядит как SaaS, который стесняется сказать, чем он занимается. У агента появляется не только промпт, но и шанс посмотреть, как похожие задачи уже решили живые продукты Это уже ближе к работе дизайнера. Перед тем как делать новый сценарий, ты смотришь, как это устроено у других. Не чтобы скопировать. Просто чтобы понять, какие паттерны вообще существуют, где люди обычно ошибаются, какие решения уже стали привычными, а где можно сделать иначе. Например, тебе надо собрать экран подписки. Вариант «сделай красиво» почти гарантированно даст три карточки с тарифами и зелёную кнопку. А если агент видит реальные примеры, он хотя бы может заметить детали: – где показывают ограничения тарифа – как объясняют пробный период – куда прячут отмену – как оформляют сравнение – где начинается тёмная сторона UX После этого уже можно спорить. Не с пустым экраном и не с абстрактным «сделай современно», а с конкретными паттернами. Это полезнее, чем бесконечно гонять модель по кругу, пока она сама случайно не попадёт в нормальное решение. Конечно, референсы не спасают от плохого дизайна. Можно насмотреться 257 тысяч экранов и всё равно собрать помойку. Особенно если агент будет просто усреднять всё подряд. Но сама идея правильная: интерфейс нельзя делать только из текста в промпте. Ему нужен визуальный и продуктовый контекст. Для дизайнеров тут есть смешной момент. Раньше насмотренность была чем-то личным: папки с референсами, скриншоты, закладки, сохранёнки, чужие продукты, которые ты руками разбирал. Теперь эта насмотренность постепенно превращается в подключаемый источник данных для агента. Референсы становятся не только материалом для дизайнера, но и частью работы инструмента. Агент может искать примеры, сравнивать паттерны, приносить варианты, а дизайнер уже решает, что из этого имеет смысл. Ну, если дизайнер вообще есть в процессе, а не где-то потом приходит чинить результат. По мне главное, чтобы такие базы не превратили всё в ещё более одинаковую массу. Если агент будет брать референсы как повод подумать, это полезно. Если как повод собрать «усреднённый лучший экран», то мы просто получим SaaS-дашборд 2.0, только теперь с доказательной базой. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Mobile Chat Kit — UI Kit c 50+ экранами
#ui-kits">Install
UX-исследования для дизайнеров
У многих дизайнеров исследования долго живут где-то рядом с работой. Вроде понятно, что это важно, но на практике чаще всё упирается в макеты, сроки и бесконечное «давайте просто сделаем красиво и посмотрим». А потом начинается самое весёлое. Продакт просит обосновать решение. Руководитель хочет понять, почему экран именно такой. Разработка спрашивает, точно ли это кому-то нужно. И если под рукой только вкус и референсы, разговор быстро превращается в спор мнений. С исследованиями проще. Ты видел, как человек проходит сценарий, где он завис, где не понял текст, а где не заметил кнопку. Или почему он начал сомневаться и вообще ушёл не туда. После такого защищать решение сильно легче, потому что у тебя появляется нормальная опора, а не просто «я так вижу». На днях ко мне пришла Катя Акатова, руководитель отдела пользовательских исследований в Ozon, и рассказала про их курс «UX-исследования для дизайнеров». До этого они с командой запускали внутренний курс по исследованиям, его прошли уже 200+ человек: дизайнеры и продакты. Теперь собрали вот отдельную программу для всех, кто хочет нормально разобраться в исследованиях без всякой духоты. 🤌 Что внутри: – 60 уроков с массой прикладной инфы и рекомендациям, которые основа на большом опыте; – как понять, когда исследование реально нужно; – как выбрать метод, найти респондентов, провести интервью или UX-тест, разобрать результаты и собрать из них понятную презентацию для команды. – отдельно есть немодерируемые количественные UX-тесты, тест первого клика, тест сценария, тест предпочтений и тест 5 секунд. 😎 Кто будет вас учить: – Катя Акатова, руководитель отдела пользовательских исследований; – Алена Бородина, руководитель группы «Опыт покупателя»; – Анна Юсупова, ведущий исследователь пользовательского опыта; – Варвара Скобелева, ведущий исследователь пользовательского опыта; – Артур Сафаров, исследователь пользовательского опыта; 🙏 Формат удобный Уроки короткие, от 4 до 20 минут. Можно проходить в своём темпе, доступ к курсу дают на 4 месяца. Есть практика и два тарифа: «Всё сам» и «С обратной связью». В тарифе ОС вы дополнительно будете получать разбор конкретного ответа на задание и рекомендации по его улучшению. Кайф и только! Я сам, честно, на работе очень не любил исследования, но зря. Когда полюбил и подружился с исследователями, то жить стало проще и решения проталкивать х10 раз быстрее. Поэтому, мастхэв для тех, кто хочет этот навык освоить И конечно, для моих любимок промик на 10% скидку: HIVACANCIES10 🔠 Пройти курс 🔠 Пройти курс 🔠 Пройти курс
Elegant Squares
А этот плагин позволяет создавать мозаичную текстуру простым перетаскиванием мыши по экрану Install
Беспилотные Waymo
Waymo разрабатывает технологию полностью беспилотных такси. Увидела статью в New York Times и пошла с Клодом проверять, а что же по доступности? А они-то молодцы! Начали ей заниматься давно. Причем как физической, так и цифровой! Клод сделал интерактивный отчёт со всеми WCAG-критериями, user journey и рекомендациями → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/ А тут давайте тут расскажу, что мне очень понравилось. Заказать поездку можно только через мобильное приложение Waymo One. После вызова к вам приезжает полностью пустой электромобиль и всё взаимодействие от посадки до климат-контроля и музыки идёт через приложение. И вот его-то и разберем. · Приложение работает с VoiceOver (iOS) и TalkBack (Android). Во время поездки информация дублируется голосом, включая статусы («машина приехала», «можно отстегнуть ремень»). · Audio guidance («Голосовые подсказки»): при приближении к автомобилю приложение через динамик телефона проговаривает расстояние и направление. · Honk to find («Посигналить для поиска»): кнопка в приложении удалённо подаёт звуковой сигнал автомобиля. · Световые сигналы фар: визуальный аналог гудка для глухих и слабослышащих. · Extra time to board: пассажир может заранее выбрать увеличенное время на посадку, чтобы водительский автомобиль дольше ждал. · Braille-надписи на кнопке двери и поручнях. · Текстовые субтитры всех голосовых объявлений на экране в салоне. · Приложение минималистично. Основной экран — это карта с минимумом элементов. Как же это важно! · Фирменная анимация «радара». При поиске машины над кнопкой появляется вращающаяся дуга, напоминающая лидар-сканер. Такой индикатор активности системы. · Микро-взаимодействия и тактильная отдача. Когда машина подъезжает, телефон даёт характерную вибрацию. Анимация подсказывает, с какой стороны и на каком расстоянии автомобиль. · Инициалы на крыше. При заказе пассажир может включить отображение своих инициалов на куполе автомобиля. Приложение подсказывает: «Ищите свои буквы». Ну гениально же ) · Waymo проводит регулярные юзабилити-сессии с участием людей с нарушениями зрения, слуха, подвижности и когнитивными особенностями. Недоработки тоже есть и они в отчете → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/
Логика фёрст или что происходит до дизайна 👀
Многие заказчики в диджитал оценивают цифровые продукты по визуалу — красиво или нет, современно выглядит или уже устарело. И это нормально, потому что они не погружены в разные процессы. На практике дизайн — это одна из финальных стадий работы. В хорошем диджитал-продукте до появления первых экранов всегда прорабатываются сценарии, логика и поведение пользователя. Да, это не самая «зрелищная» часть работы, но именно она определяет, насколько продукт будет понятным и удобным. Хочу показать, как это устроено у нас в Агентстве.Анкора На скриншоте — кликабельные прототипы приложения «ЕлиПили». Того самого проекта, за который мы получили серебро на Workspace Digital Awards — так что в этой теме мы реально шарим. За время работы мы собрали несколько прототипов под разные пользовательские сценарии. В какой-то момент это превращается в довольно сложную систему: сеть экранов, переходов и взаимосвязей. Но именно внутри этой системы и формируется продуманный и удобный пользовательский опыт. С такими прототипами мы приходим к заказчику на презентацию🔥: просим открыть ссылку и начать пользоваться приложением. Дальше мы наблюдаем и задаём вопросы: ☑️ Понятен ли текст на экране? ☑️ Что вы сделаете дальше? ☑️ Замечаете ли нужную кнопку? ☑️ Понимаете ли, какое действие от вас требуется? там еще 100500 вопросов обычно )) Такие простые тесты помогают находить слабые места в логике продукта. Заказчик почти всегда лучше нас понимает свой бизнес. И через его реакцию мы видим, где пользователь может запутаться, какие элементы остаются незамеченными и какие гипотезы не работают. Потому что любой диджитал-продукт — это, по сути, набор гипотез. Хороший дизайн начинается не всегда с цветов, шрифтов и красивых экранов. Он начинается с понимания того, как человек будет пользоваться продуктом и насколько простым и понятным окажется его путь — от первого действия до результата.
#12 Фигма Make лезет в реальный код
Фигма 28 мая выкатила важный апдейт Make: теперь инструмент можно подключить к локальной кодовой базе. Открываешь существующий проект, выбираешь элемент на экране, правишь свойства, отступы, цвет, размер, раскладку, а агент уже находит нужное место в коде и вносит изменения. Пока это ограниченная бета в десктопном приложении для Mac. И сама Фигма честно пишет, что лучше всего это подойдёт дизайнерам, у которых уже есть доступ к кодовой базе компании. Раньше вайбкодинг в дизайне чаще был про быстрый черновик. Собрал экран, показал идею, выбросил половину, что-то утащил в работу. Вроде полезно, но всё равно чуть отдельно от настоящего продукта. А теперь Фигма Make пытается работать с тем местом, где продукт уже живёт. Самый важный вопрос теперь: кто имеет право двигать кнопку, если эта кнопка уже в коде? Потому что визуальная правка реального интерфейса звучит очень соблазнительно. Увидел, что отступ кривой, выбрал блок, поправил. Текст не тот, поменял. Цвет уехал, вернул. Не надо писать разработчику «можешь тут 8 пикселей вместо 12», ждать, объяснять, показывать скрин, потом снова смотреть, что получилось. Но чем ближе дизайнер подходит к коду, тем быстрее появляются взрослые вопросы: 1. кто проверяет такие изменения 2. что считается безопасной правкой 3. где начинается логика, а где просто внешний вид 4. кто отвечает, если агент поменял не тот компонент 5. как откатиться, если всё поехало Фигма это понимает, поэтому делает не «пуш в прод», а нормальный путь через разработку. Изменения сначала лежат как локальные коммиты. Можно создавать ветки, смотреть историю, откатываться, а потом открыть пулл-реквест, чтобы инженеры проверили правку как обычное изменение в коде. И это, по-моему, правильная часть новости. Не сам факт, что дизайнер может подвигать блок в живом проекте. А то, что Фигма пытается встроить это в нормальный процесс разработки. Через ветки, коммиты, проверку и возможность отката. Потому что без этого будет весело примерно два дня. Потом кто-то визуально поправит карточку, агент заденет общий компонент, уедет ещё десять экранов, разработчик откроет код и спросит, кто вообще это сделал. Но я бы не хотел, чтобы это стало режимом «дизайнеры теперь сами чинят фронт». Скорее это должно быть как быстрый слой для понятных UI-правок. Поправить отступ. Проверить состояние. Подкинуть вариант. Открыть пулл-реквест. Дальше уже обычная проверка. Ещё важная штука: Фигма разрешает копировать экраны из Make обратно на холст как слои, обсуждать с командой и потом приносить решения назад в код. Это уже похоже на нормальный круг: продукт живёт в коде, команда думает на холсте, изменения возвращаются через понятный процесс. Если Фигма сможет удержать этот круг без бардака, будет сильно. Потому что дизайнеру часто не нужен ещё один генератор красивого прототипа. А вот дизайн-ревью проводить и за качеством прода следить гуд, ибо разработчики лажают оч часто. ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Дизайн-система через Claude Code
Я никогда не любил работать с ДС и компонентами, особенно, когда АИ ещё не было в целом. Дизайн-система это такая штука, которая никогда не заканчивается. Сегодня добавили новый компонент, завтра поменяли состояние, потом где-то в продукте уже уехала версия, а в библиотеке всё ещё живёт старый вариант. И начинается обычная рутина. Проверить состояния. Сверить компоненты. Понять, что отстало от продакшна. Поправить в нескольких местах. Убедиться, что дизайнеры не разнесли всё по разным файлам. Работа важная, но максимально не самая весёлая) И вот это как раз очень похоже на задачу, которую можно отдавать AI-агенту. Не творческую часть, где надо думать головой, а именно поддержку порядка: сверять, находить расхождения, подтягивать правила, дополнять состояния, помогать не превращать ДС в свалку. Даниил из Pixel Perfect 3 июня в 18:00 мск покажет, как это работает на практике. Будет не учебный кейс, а живой AI SaaS-стартап для голосовых агентов. Он соберёт дизайн-систему через Claude Code и Figma MCP, а потом на её базе сверстает экраны продукта. 😎 Что будет полезного Покажет, как собирать ДС через Claude Code и Figma MCP, даст 4 скилла для Claude Code под сборку и поддержку своей дизайн-системы, и разберёт, какую рутину реально можно отдать агенту. Если работаете с дизайн-системами или просто устали руками вылавливать одни и те же расхождения залетайте посмотреть. Ща отставать уже не модно, нужно быть в трендах инструментов и снимать с себя кучу рутины ✨ Эфир пройдёт в канале, приходите Кстати, кто уже занимается ДС через клод, какой у вас пайплайн? Как работаете? 🔠 Подписаться на канал Даниила 🔠 Подписаться на канал Даниила 🔠 Подписаться на канал Даниила
UX-исследования для дизайнеров
У многих дизайнеров исследования долго живут где-то рядом с работой. Вроде понятно, что это важно, но на практике чаще всё упирается в макеты, сроки и бесконечное «давайте просто сделаем красиво и посмотрим». А потом начинается самое весёлое. Продакт просит обосновать решение. Руководитель хочет понять, почему экран именно такой. Разработка спрашивает, точно ли это кому-то нужно. И если под рукой только вкус и референсы, разговор быстро превращается в спор мнений. С исследованиями проще. Ты видел, как человек проходит сценарий, где он завис, где не понял текст, а где не заметил кнопку. Или почему он начал сомневаться и вообще ушёл не туда. После такого защищать решение сильно легче, потому что у тебя появляется нормальная опора, а не просто «я так вижу». На днях ко мне пришла Катя Акатова, руководитель отдела пользовательских исследований в Ozon, и рассказала про их курс «UX-исследования для дизайнеров». До этого они с командой запускали внутренний курс по исследованиям, его прошли уже 200+ человек: дизайнеры и продакты. Теперь собрали вот отдельную программу для всех, кто хочет нормально разобраться в исследованиях без всякой духоты. 🤌 Что внутри: – 60 уроков с массой прикладной инфы и рекомендациям, которые основа на большом опыте; – как понять, когда исследование реально нужно; – как выбрать метод, найти респондентов, провести интервью или UX-тест, разобрать результаты и собрать из них понятную презентацию для команды. – отдельно есть немодерируемые количественные UX-тесты, тест первого клика, тест сценария, тест предпочтений и тест 5 секунд. 😎 Кто будет вас учить: – Катя Акатова, руководитель отдела пользовательских исследований; – Алена Бородина, руководитель группы «Опыт покупателя»; – Анна Юсупова, ведущий исследователь пользовательского опыта; – Варвара Скобелева, ведущий исследователь пользовательского опыта; – Артур Сафаров, исследователь пользовательского опыта; 🙏 Формат удобный Уроки короткие, от 4 до 20 минут. Можно проходить в своём темпе, доступ к курсу дают на 4 месяца. Есть практика и два тарифа: «Всё сам» и «С обратной связью». В тарифе ОС вы дополнительно будете получать разбор конкретного ответа на задание и рекомендации по его улучшению. Кайф и только! Я сам, честно, на работе очень не любил исследования, но зря. Когда полюбил и подружился с исследователями, то жить стало проще и решения проталкивать х10 раз быстрее. Поэтому, мастхэв для тех, кто хочет этот навык освоить И конечно, для моих любимок промик на 10% скидку: HIDIS10. Действует до конца июня 🔠 Пройти курс 🔠 Пройти курс 🔠 Пройти курс