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

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

Когда ищешь нужный экран в плохо структурированных макетах 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 Большая коллекция векторных дудлов с причудливыми существами и абстрактными формами для живых, экспериментальных макетов. [Фабрика Дизайна]

7 дней бесплатного обучения UX/UI-дизайну!

🔥 Организовали для тебя бесплатный онлайн-интенсив по UX/UI-дизайну с практикой, обратной связью и куратором. За 7 дней ты: 1. Ты сверстаешь 5 макетов в Figma с нуля; 2. Изучишь основы UX/UI-дизайну; 3. Разберёшься с композицией, цветом и типографикой; 4. Научишься создавать адаптивный дизайн; 5. Получишь советы к твоей работе от экспертов; 6. Научишься использовать ИИ в дизайне; 7. Узнаешь 9 способов найти первый заказ даже без опыта. В итоге ты создашь 5 качественных работ, которые не стыдно добавить в портфолио или продать, освоишь азы работы с Figma и получишь море бесценного опыта в UX/UI-дизайне. 👉 Ухватить бесплатно такой ценный материал Наши ученики стабильно зарабатывают на веб-дизайне с 2019 года по всему миру.
Плагин «3D Transformer» by Simon.Xuzi
Плагин для превращения любого изображения в подобие 3D макета 📱 Скачать плагин 📱 #plugin
Lorem Ipsum
Простой генератор случайного текста. Пригодится, если нужно быстро протестировать макет, а тексты для проекта еще не готовы Install
UX-исследования для дизайнеров
У многих дизайнеров исследования долго живут где-то рядом с работой. Вроде понятно, что это важно, но на практике чаще всё упирается в макеты, сроки и бесконечное «давайте просто сделаем красиво и посмотрим». А потом начинается самое весёлое. Продакт просит обосновать решение. Руководитель хочет понять, почему экран именно такой. Разработка спрашивает, точно ли это кому-то нужно. И если под рукой только вкус и референсы, разговор быстро превращается в спор мнений. С исследованиями проще. Ты видел, как человек проходит сценарий, где он завис, где не понял текст, а где не заметил кнопку. Или почему он начал сомневаться и вообще ушёл не туда. После такого защищать решение сильно легче, потому что у тебя появляется нормальная опора, а не просто «я так вижу». На днях ко мне пришла Катя Акатова, руководитель отдела пользовательских исследований в Ozon, и рассказала про их курс «UX-исследования для дизайнеров». До этого они с командой запускали внутренний курс по исследованиям, его прошли уже 200+ человек: дизайнеры и продакты. Теперь собрали вот отдельную программу для всех, кто хочет нормально разобраться в исследованиях без всякой духоты. 🤌 Что внутри: – 60 уроков с массой прикладной инфы и рекомендациям, которые основа на большом опыте; – как понять, когда исследование реально нужно; – как выбрать метод, найти респондентов, провести интервью или UX-тест, разобрать результаты и собрать из них понятную презентацию для команды. – отдельно есть немодерируемые количественные UX-тесты, тест первого клика, тест сценария, тест предпочтений и тест 5 секунд. 😎 Кто будет вас учить: – Катя Акатова, руководитель отдела пользовательских исследований; – Алена Бородина, руководитель группы «Опыт покупателя»; – Анна Юсупова, ведущий исследователь пользовательского опыта; – Варвара Скобелева, ведущий исследователь пользовательского опыта; – Артур Сафаров, исследователь пользовательского опыта; 🙏 Формат удобный Уроки короткие, от 4 до 20 минут. Можно проходить в своём темпе, доступ к курсу дают на 4 месяца. Есть практика и два тарифа: «Всё сам» и «С обратной связью». В тарифе ОС вы дополнительно будете получать разбор конкретного ответа на задание и рекомендации по его улучшению. Кайф и только! Я сам, честно, на работе очень не любил исследования, но зря. Когда полюбил и подружился с исследователями, то жить стало проще и решения проталкивать х10 раз быстрее. Поэтому, мастхэв для тех, кто хочет этот навык освоить И конечно, для моих любимок промик на 10% скидку: HIVACANCIES10 🔠 Пройти курс 🔠 Пройти курс 🔠 Пройти курс
хороших кириллических шрифтов для интерфейсов мало. еще меньше — понятных примеров, как использовать их в реальных продуктах ✏️
10 июня в 18:00 (gmt+3) делаем открытый воркшоп про кириллицу в ui. вместе с дизайн-лидами pragmatica ⚪️ дианой кузнецовой и ⚪️ денисом суворовым расширим базу кириллических шрифтов, разберем, как работают шрифтовые пары, и научимся применять выразительный шрифт, чтобы добавить характер интерфейсу✏️ формат: 1,5 часа онлайн, теория + практика будем работать с макетами участников и с интерфейсами большой практики, где есть кириллица: покажем, как применять Lebowski by Pragmatica и другие дополняющие шрифты пять человек попадут на разбор своих работ, для этого нужно пройти регистрацию и заполнить анкету. зрители тоже смогут тренироваться и пробовать миксовать шрифты на готовых макетах от нас ⚪️ регистрация в боте collective
Обновление: MakeNumbersSequence v0.5.2
Чаще всего скрипт используют для нумерации бирок, билетов, этикеток и других печатных макетов с целыми числами. Но поскольку в поле Increment можно задавать любое числовое приращение, я доработал десятичные числа. Корректные ведущие нули для дробных чисел Если последовательность содержала дробные значения, ведущие нули рассчитывались некорректно. Теперь скрипт смотрит на длину целой части числа: 0001 → 0051.3 → 0151.9 → 2151.2 Выравнивание количества знаков после запятой Если числа имеют разное количество знаков после запятой, можно автоматически привести их к одному формату с помощью Zeros Trailing: 1.000 → 11.125 → 41.500 Изменение значений стрелками Значения в полях Start, End и Increment можно изменять клавишами ↑ и ↓. Подробнее о скрипте #illustrator #text
💕 Автономия дизайнера начинается с доступа к информации
Сара Пол из NNG разбирает важную вещь: дизайнерская автономия это не когда дизайнер сам принимает все решения. Это когда у него достаточно контекста, чтобы влиять на продуктовую повестку, приоритизацию и roadmap, а не только двигать кнопки в уже утвержденном решении. Главная проблема больших организаций в том, что знание расползается по командам. Аналитика лежит у одних, саппорт слышит боль пользователей, исследования делались в соседнем продукте, roadmap меняется в другом канале, а дизайнеру часто прилетает только обрывок задачи. Автор предлагает собирать из этого информационный пайплайн: искать данные, строить отношения, создавать места для обмена контекстом и превращать разрозненные сигналы в понятную рекомендацию. Внутри: – Почему автономия дизайнера зависит не от должности, а от качества контекста; – Как саппорт, аналитика, прошлые исследования и roadmap помогают увидеть проблему целиком; – Зачем дизайнеру строить отношения с экспертами и соседними командами; – Почему важно понимать upstream и downstream зависимости своего решения; – Как дизайн-операционный гайд снижает поток задач «просто отполировать макет»; – Зачем создавать кросс-функциональные встречи и каналы, если тебя не зовут в нужные обсуждения; – Почему сильная рекомендация должна показывать trade-off, а не просто продавать один вариант; – Как поддерживать информационный пайплайн, чтобы он не превратился в кладбище старых заметок. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
🆕 Новый способ импорта макетов из Figma в Zero Block
Теперь переносить макеты из Figma в Zero Block можно практически в пару кликов, а главное — без ограничений по количеству импортов и независимо от вашего тарифа в Фигме. Для этого достаточно установить наш официальный плагин. О том, как работает новый импорт, рассказываем в карточках поста 👉 Подробная инструкция в Справочном центре: https://help-ru.tilda.cc/zero/figma-import 🎨 Плагин Figma to Tilda: https://www.figma.com/community/plugin/1641181103081348397/figma-to-tilda А вы ждали возможность импорта без лимита? Делитесь впечатлениями в комментариях! 💬 #tildaupdates
3/3
сейчас выпустили начертание regular, а в сентябре выйдет thin и bold. залетайте на сайт и оставляйте почты, чтобы не пропустить релиз в сентябре! отмечайте нас на макетах и присылайте, как тестите шрифт в чат. мечтаем собрать свою галерею работ с Lebowski.
2/3
Lebowski by Pragmatica создан для интерфейсов, брендинга и цифровых продуктов — ведь именно в цифровой среде и живет наша коммуникация сегодня. мы хотели сделать его самодостаточным, чтобы он задавал настроение макету, но при этом удобным для реальной работы. он выразительный, но не супер-нарядный. в нем есть характер, плотность и немного странности, чтобы цеплял глаз в макетах. а ещееее это шрифт бесплатный! скачивайте его, чтобы использовать и в личных, и в коммерческих проектах, но продавать его нельзя 🚫
😊 Дизайнеру уже мало просто хорошо рисовать
В этом разговоре Брайан Ловин из Ноушн очень точно описывает, куда вообще сдвигается роль дизайнера. Границы между дисциплинами размываются, и все меньше смысла делить работу на «это дизайн», «это код», «это продукт». Если хочешь влиять на результат, приходится понимать, как устроены инструменты, как думают инженеры, где заканчиваются возможности моделей и почему одни идеи в проде разваливаются, а другие нет. Самое важное здесь не в очередном наборе AI-инструментов. Главное, что дизайнеру теперь нужно уметь выходить за пределы макета: собирать прототипы в коде, разбираться в ограничениях Фигмы, понимать, как ИИ читает структуру интерфейса, и держать в голове не только красивую картинку, но и всю систему целиком. Не ради моды, а потому что иначе влияние на продукт быстро заканчивается. Внутри: – Почему дизайнеру уже недостаточно оставаться только в рамках интерфейсов; – Как в Notion прототипы все чаще уходят из Фигмы в рабочую кодовую базу; – Почему общение с инженерами стало частью нормального дизайн-процесса; – Зачем понимать реальные ограничения AI-моделей, а не фантазировать про их будущее; – Как хорошие примитивы, имена слоев и структура помогают ИИ работать точнее; – Почему доработка в IDE часто полезнее, чем бесконечные промпты; – Как непоследовательность ИИ одновременно ускоряет работу и создает хаос; – Почему способность глубоко сосредоточиться становится отдельным конкурентным преимуществом. ➡️ Смотреть видос (EN) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
🌸 Т-образный дизайнер это не про «уметь всё понемногу»
Юрий Ветров в отрывке из «Паттернов дизайн-менеджмента» разбирает T-образного специалиста как ответ на реальную проблему продуктовых команд. Чем сложнее продукт, тем дороже становится конвейер, где один человек собирает требования, второй рисует, третий исследует, четвертый объясняет разработке, а пятый пытается вернуть всё обратно в продукт без потерь. Главная мысль в том, что современному дизайнеру недостаточно хорошо делать макеты. Ему нужно понимать бизнес, продуктовые требования, пользователей, разработку, аналитику, ограничения платформы и процесс запуска. Не на уровне «я теперь продукт-менеджер и фронтендер», а на уровне, который позволяет брать ответственность за результат, договариваться с командой и проводить решение до живого продукта. Внутри: – Почему сложные дизайн-задачи почти всегда лежат на стыке ролей; – Как узкая специализация увеличивает транзакционные издержки; – Почему дизайнеру важно отвечать не только за макет, но и за продукт; – Зачем продуктовый дизайнер должен понимать менеджеров, разработчиков и бизнес; – Почему лучшая спецификация часто не документ, а работающий продукт; – Какие hard skills и soft skills формируют T-образного специалиста; – Чем отличаются осведомленность, умение, экспертиза и лидерство; – Почему автоматизация и работа руками становятся частью современной дизайн-практики. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
UX-исследования для дизайнеров
У многих дизайнеров исследования долго живут где-то рядом с работой. Вроде понятно, что это важно, но на практике чаще всё упирается в макеты, сроки и бесконечное «давайте просто сделаем красиво и посмотрим». А потом начинается самое весёлое. Продакт просит обосновать решение. Руководитель хочет понять, почему экран именно такой. Разработка спрашивает, точно ли это кому-то нужно. И если под рукой только вкус и референсы, разговор быстро превращается в спор мнений. С исследованиями проще. Ты видел, как человек проходит сценарий, где он завис, где не понял текст, а где не заметил кнопку. Или почему он начал сомневаться и вообще ушёл не туда. После такого защищать решение сильно легче, потому что у тебя появляется нормальная опора, а не просто «я так вижу». На днях ко мне пришла Катя Акатова, руководитель отдела пользовательских исследований в Ozon, и рассказала про их курс «UX-исследования для дизайнеров». До этого они с командой запускали внутренний курс по исследованиям, его прошли уже 200+ человек: дизайнеры и продакты. Теперь собрали вот отдельную программу для всех, кто хочет нормально разобраться в исследованиях без всякой духоты. 🤌 Что внутри: – 60 уроков с массой прикладной инфы и рекомендациям, которые основа на большом опыте; – как понять, когда исследование реально нужно; – как выбрать метод, найти респондентов, провести интервью или UX-тест, разобрать результаты и собрать из них понятную презентацию для команды. – отдельно есть немодерируемые количественные UX-тесты, тест первого клика, тест сценария, тест предпочтений и тест 5 секунд. 😎 Кто будет вас учить: – Катя Акатова, руководитель отдела пользовательских исследований; – Алена Бородина, руководитель группы «Опыт покупателя»; – Анна Юсупова, ведущий исследователь пользовательского опыта; – Варвара Скобелева, ведущий исследователь пользовательского опыта; – Артур Сафаров, исследователь пользовательского опыта; 🙏 Формат удобный Уроки короткие, от 4 до 20 минут. Можно проходить в своём темпе, доступ к курсу дают на 4 месяца. Есть практика и два тарифа: «Всё сам» и «С обратной связью». В тарифе ОС вы дополнительно будете получать разбор конкретного ответа на задание и рекомендации по его улучшению. Кайф и только! Я сам, честно, на работе очень не любил исследования, но зря. Когда полюбил и подружился с исследователями, то жить стало проще и решения проталкивать х10 раз быстрее. Поэтому, мастхэв для тех, кто хочет этот навык освоить И конечно, для моих любимок промик на 10% скидку: HIDIS10. Действует до конца июня 🔠 Пройти курс 🔠 Пройти курс 🔠 Пройти курс
➕➕➕➕➕➕➕➕
ура, это новый сезон в senior designer! вместе с ⚪️ бюробукв мы сделали шрифт Lebowski by Pragmatica — кириллицу для цифры, которой не хватало — отдаем её комьюнити бесплатно. название появилось на втором звонке: вспомнили сцену из «большого лебовски» 🎳, где герой говорит про ковёр, который really tied the room together это была идеальная метафора — шрифт не главный объект системы, а вещь, которая задаёт характер и стиль всему макету. в ближайшие две недели расскажем, как создавали шрифт, где его можно применять и как использовать. ещё collective захэдят воркшоп про кириллицу в ui и будет конкурс. призы — жир. в общем, погрузим на 360. как забрать шрифт? шрифт выйдет в открытый доступ 2 июня — но до релиза его заберут те, кто отметится в боте senior designer. кажется речь о тебе, dude
Interactive PDF Export — плагин для экспорта Figma-макетов в полноценные интерактивные PDF-формы. Поддерживает реальные поля ввода, чекбоксы, радио-кнопки и другие интерактивные элементы.
#11 Claude Code и Фигма: бардак теперь тоже автоматизируется
Чел взял модули из Фигмы, подключил Claude Code через MCP и попробовал собрать из этого React-компоненты. Получилось, кстати, нормально: чистая структура файлов, аккуратный код, визуально близко к макету. Только перед этим он целый день объяснял Claude, что вообще происходит. Это опыт Росса Любе. Он не просто кинул макет агенту и получил готовый продукт. Сначала пришлось дать вводные по проекту, дизайну, сборке, компонентам и правилам. И вот после этого Claude Code смог выдать приличный результат. В этой истории хороша именно приземлённость. Без сказок про замену дизайнера и разработчика. Обычная рабочая реальность: агент может помочь, если ему нормально объяснить задачу. Примерно как с младшим разработчиком. Дал структуру, показал правила, потом проверил руками. Дал мутный макет и надежду на чудо, получил лотерею. С Фигмой тут тоже всё становится интереснее. Раньше неаккуратный файл мог жить годами. Дизайнер голосом объяснял, что имел в виду, разработчик сам догадывался, продакт что-то уточнял в чате. Все как-то вывозили. С агентами такой номер проходит хуже. Если в Фигме всё названо как попало, компоненты живут в трёх версиях, состояния забыты, а рядом лежит слой Rectangle 4827, агент просто ускорит бардак. Он быстрее соберёт не то и быстрее принесёт результат, который выглядит почти правильно. А «почти правильно» в интерфейсе иногда бесит сильнее, чем совсем плохо. Я в Hirehi, к слову. использую тоже связку, только не Claude, а Codex + MCP. Макет теперь собираю за минуту на фронте, потом остаётся чуть пофиксить и готово. Но и в Фигме там порядок) Долго я этого избегал, и очень-очень зря. Получается, что Фигма для агента уже не просто картинка. Ему нужны нормальные следы работы: 1. Понятные названия 2. Компоненты без хаоса 3. Состояния 4. Токены 5. Пояснения и ограничения Всё то, что раньше часто считалось скучной уборкой после дизайна. Теперь это становится входными данными для ИИ. Самый смешной момент в статье вообще про людей. Автор пишет, что мутная часть процесса всё равно остаётся до Фигмы и Claude: обсуждения, субъективщина, согласования, разное понимание задачи. Можно подключить хоть десять агентов, но если на созвоне все говорили разное и никто ничего не записал, агент просто красиво автоматизирует недосказанность. Claude Code + Фигма MCP проверяет не только силу ИИ. Он ещё показывает, насколько у команды всё прибрано до прихода агента. Что будет больнее для дизайнеров: научиться работать с агентами или впервые нормально прибраться в своих файлах? ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Чистим цвета для печати by kate_dsgn_
Полезное видео, благодаря советам из которого ваш цвет макета при печати будет предсказуемым. #лайфхак