📱 Сторис как библиотека: в M2 вынесли сложную фичу в переиспользуемый модуль

Когда сторис начинают расти, код быстро становится тяжелым: больше сценариев, больше багов, больше поддержки. В M2 в какой то момент пришли к этому и решили не расширять фичу бесконечно внутри продукта, а собрать отдельную библиотеку, где логика работает из коробки, а UI контролирует команда, которая внедряет решение у себя. Слава Фальзан показал весь путь на практике: от экономики решения до архитектуры и API. За 2025 сторис дали сильный эффект, каждый десятый пользователь посмотрел сторис «Сделка онлайн», и 2% от просмотревших дошли до оплаченной сделки. На этом фоне команда оформила библиотеку с гибкой настройкой, Room для состояния просмотренности и понятными точками входа для интеграции. Внутри: – Почему рост фичи сторис почти всегда приводит к усложнению поддержки; – Как команда сравнила внешнее решение и собственную разработку по стоимости; – Зачем в библиотеке оставили UI на стороне пользователя, а логику внутри; – Как устроены два основных компонента: StoriesPreviewList и StoriesContainer; – Почему модель сторис упростили до Map и чем это удобно; – Как работают ключевые параметры: graphicsTransition, fullScreen, transparentBackground; – Как хранится просмотренность через StoriesShownRepository и Room; – Почему библиотеку можно использовать частями, а не только целиком. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста

👀Вдохнули-выдохнули. Мы в Паратайпе уже очень ждём весны: когда станет теплее и расцветёт вишня.

А пока делимся с вами важными ссылками с субботней лекции Саши на UX/UI Conf о шрифтах в вебе. В подборке есть и книги, и записи других лекций, и статьи. Надеемся, каждый найдёт для себя что-то интересное. ⚡️ Пара мыслей с лекции, которые могут выручить вас — Иногда шрифтовые дизайнеры добавляют прямо в название шрифта подсказку, в каких размерах его использовать — смотрите картинку к посту. — Если вы собираетесь использовать шрифт в мелком кегле, особенно на экране — межбуквенные расстояния должны быть достаточно просторными, в этом случае может помочь разрядка (положительный трекинг). — Если вы собираетесь использовать шрифт в крупном кегле, отрицательный трекинг допустим, но обязательно проверяйте его на сложных сочетаниях типа «ух», «кл», «гт» — не давайте буквам слипнуться! — Если вы хотите попробовать использовать на сайте новый для себя шрифт, обязательно посмотрите на прототип из Windows с самого старого монитора, какой найдёте, чтобы проверить экранное отображение. ⚡️ Шрифты, о которых спрашивали во время лекции (ими была сделана презентация): Роскошный Hint Эксцентричная Helsa У нас на сайте появились тестовые версии, не забывайте скачивать и примерять шрифты ⚡️ Бесплатные шрифты, которые участвовали в лекции 🐶 Текстовые: Commissioner Geologica Golos Text Golos UI IBM Plex Sans Onest PT Root UI Tilda Sans 🐶 Не совсем текстовые Lanze Martian Grotesk 🐶 Совсем не текстовые Ambidexter Kudry Weird Headline ⚡️ Статьи, курсы, инструкции и коды: 🔸Большая подборка шрифтов без бюджета с приличной кириллицей  🔸«Как разобраться в кириллице» — статья 🔸«Как разобраться в кириллице» — бесплатный курс 🔸Статья ABCDinamo о встраивании вариативных шрифтов на сайт (на английском) ⚡️ Примеры кода для вариативных шрифтов с codepen.io 🔸Изменение жирности по ховеру 🔸Анимация изменения формы независимо от курсора 🔸Анимация изменения ширины независимо от курсора 🔸Изменение жирности в той части надписи, где курсор 🔸Изменение ширины и жирности в той части надписи, где курсор ⚡️ Ещё немного полезного: 🔸Статья о микротипографе, который мы встроили в шрифт 🔸Статья о том, как включить возможности OpenType в CSS и Фигме 🔸«Тёмная сторона шрифта» суперлонгрид о технической стороне шрифта (иногда нужен VPN) 🔸Статья о том, как бесплатно попробовать шрифты 🔸Статья о многоязычных шрифтах 🔸Большая статья о шрифтовых лицензиях ⚡️ Приложения: Фонтоскоп — бесплатное приложения для теста почти всей библиотеки Паратайп в Ai, Ps, Id, Figma Инструкция по установке ⚡️ Книги (их не было на лекции, но они будут полезны): 🔸Живая типографика, Александра Королькова 🔸 Облик книги, Ян Чихольд 🔸Новая типографика. Руководство для современного дизайнера, Ян Чихольд 🔸Основы стиля в типографике, Роберт Брингхерст 🔸Мой путь к типографике, Вольфганг Вайнгарт 🔸Типографика. Порядок и хаос, Владимир Лаптев ⚡️ Лекции: 🔸Вся правда о шрифтовых парах 🔸Шрифтовая магия Буквы не то, чем кажутся
Изображение поста

Как я пилю свой продукт. Часть 27

Первая и самая главня новость Я пробил 20.000 регистраций. Сейчас стабильно регается 150-200 человек ежедневно и цифры растут. 😮 Зарплаты Я давно хотел сделать раздел зарплат, но никак не доходили руки. В 27 части дошли и раздел появился) Сейчас там уже более 1000+ сабмитов от пользователей. Я проверяю сабмиты + там есть некоторые проверки на бэке, чтобы не были сабмиты джуна на 1 млн рублей. Приходите смотреть и оставлять свою Теперь можно посмотреть зарплаты по направлению, специализации, грейду и формату работы. Плюс я сделал возможность анонимно добавить свою зарплату, чтобы сравнить себя с рынком. Там же есть динамика, учёт премий и подборка подходящих вакансий под выбранные фильтры. И да, это всё тоже нормально причесал под мобилку, потому что с телефона этим пользуются много. Жду, когда челики из Эйч стырят 1в1 раздел, как они сделали со всеми фичами, которые появились у меня, резюме, сопроводами и другим) Не благодарите. Если ваши продакты не вывозят в бэклоге фич, увольте их. Ну или ждите, пока я сделаю новые. 📢 Что ещё обновил после прошлой части: – Подкрутил отображение зарплат в вакансиях, чтобы суммы и вилки показывались понятнее; – Дополировал сам раздел зарплат: фильтры, графики, форма добавления зарплаты, мелкие баги и визуал; – Поправил вход/редиректы/авторизацию и часть моментов с оплатой; – Причесал тему (светлая/тёмная), шрифты и UI на многих страницах; – Сделал поиск точнее, чтобы было меньше случайных попаданий в выдаче; – Добавил и починил источники вакансий, чтобы вакансии лучше подтягивались и реже отваливались; – Подправил отклики и чат с рекрутерами + несколько багов на страницах вакансий; – Подчистил страницы под поисковики (в том числе новую зарплатную страницу); И да, добавил авторизацию через Яндекс) Тоже оттягивал это долго, а оказалось, что это можно было сделать за 10 минут. Ну как обычно, в целом. 0️⃣ Что по цифрам: Hirehi растёт и это радует. Потихоньку, с 0 рублями в маркетинг. – 1.4 млн показов и 48к кликов из гугла – 1.03 млн показов из 37к из яндекса – Рекорд по выручке за месяц, она тоже потихоньку растёт и подбирается к средней зарплате мидла. Я очень этому рад. Год назад я и мечтать о таком не мог Самое главное, что работает SEO. Я продолжаю писать статьи в блог и оптимизировать страницы. И ещё круто, что часто меня рекомендует perplexity, chatgpt и другие. Трафик от них тоже есть и это радует. Дальше я хочу сделать ачивки в профиль, которые за простые действия будут давать профит и вам и мне. Я откладывал это долго, но пора заняться, так как появился трафик и он стабилен. Спасибо всем, кто пользуется и пишет фидбек с отзывами мне в лс. Каждый отзыв мотивирует и даёт силы ❤️ 🔠 Смотреть вакансии 🔠 Смотреть вакансии 🔠 Смотреть вакансии ч.26
Изображение поста

Figma продолжает допиливать свой интерфейс, в UI3 вернули фиксированные панели.

www.figma.com/blog/our-approach-to-designing-ui3/
Motion designer в Game gears
Мы — Game Gears, команда из 60+ крутых специалистов, объединённых страстью к технологиям и продуктам будущего. Задачи: — производство рекламных роликов — работать в Blender/Cinema 4D — создавать графические 2Д элементы UI для видео-контента, объекты окружения, персонажей и другие ассеты под конкретные задачи из ТЗ — сборка готовых видео: монтаж, UI, саунд-дизайн, ресайзы Ожидания: — опыт создания видео контента, понимание динамической композиции — профессиональное владение 2D- и 3D-инструментами — навыки моделинга, текстуринга, лайтнинга, композинга и рендеринга — знание принципов персонажной анимации — опыт создания динамической графики, инфографики, vfx для рекламных креативов — знание видеомонтажа — портфолио с рекламными игровыми креативами обязательно Условия: — удаленка — 500-700$ за один креатив Контакт для отклика: @foreverinlovewithsummer #геймдев
Изображение поста
Графдиз vs UI/UX-дизайнер:
кто ты? Графический дизайнер — это визуальный чувак. Делает стильные баннеры, посты, афиши, фирменные стили, упаковку и постеры для концертов. Если тебе кайф работать с иллюстрациями, типографикой, оттенками и визуальными экспериметами — welcome сюда. Основные скиллы: Photoshop, Illustrator, Figma для статичных макетов, свой стиль и вкус, много насмотренности. В портфолио — яркие айдентики, луковые постеры, визитки, мерч и арт-плакаты. Это про “визуально красиво”. UI/UX-дизайнер — это цифровой архитектор. Он строит сайты и приложения, чтобы было удобно, понятно и быстро. UI (User Interface) — рисуешь кнопки, интерфейсы, меню, чтобы хотелось кликать и ничего не сломалось. UX (User Experience) — думаешь за пользователя: где потеряется, что раздражает, как ускорить путь к цели. Тут много логики и тестирования, коллаб c разработчиками и аналитиками. Рабочие программы: Figma, Sketch, иногда Protopie. В портфолио — лендинги, мобильные приложения, навигация для сервисов. Фаст-факты: • UI/UX — чаще про командную работу, графдизайнеры могут фрилансить и быть самостоятельнее • Графдизайнер делает для офлайна (печать, мерч), а UI/UX скорее про онлайн • В UI/UX чаще высокий порог входа по знаниям, зато очень много работы и рост ближе к IT • Графдиз — твой выбор, если хочется самобытного стиля и свободы визуального самовыражения • В UI/UX легко уходить в аналитику, исследования и проектирование продуктов Всё равно не можешь определиться? Глянь реальные проекты, попробуй разные задачи — и сам почувствуешь, что ближе. Больше инсайтов и разборов профессий ищи на нашем сайте. 📎 Креативити
Изображение поста
Material You — большой UI kit нового Android 12.
Изображение поста
Сайт UIBits
На этом сайте вы можете найти для себе много новых референсов для создания UI. 📱Глянуть сайт📱 #сервисы #вдохновение
Изображение поста
Дизайнеры любят говорить про UI, анализ конкурентов, боли пользователей и JTBD, но часто забывают о когортах, обобщая всех пользователей.
Именно когортный анализ и учёт когорт пользователей при проектировании сценариев часто объясняет, почему дизайн работает не так, как задумывалось. 💦💦 Когорта — это группа пользователей, объединённых общим признаком во времени. Например: новички, зарегистрировавшиеся в приложении в текущем месяце и те, кто являются пользователями более года. Те, кто сделал заказ во время определённой акции или те, кто пришёл в приложение после интервью известного фаундера. 💦💦 Особенно чувствительным для разных когорт может оказаться редизайн продукта. При редизайне важно думать о влиянии на новых и старых пользователей отдельно. Когортный подход радикально меняет способ мышления дизайнера. Ты начинаешь задавать другие вопросы: для какой группы пользователей мы делаем это изменение? Как эта когорта поведёт себя через неделю, месяц или год? Улучшится краткосрочная метрика или долгосрочное поведение? 🔵Дизайнер, который понимает когорты, начинает говорить языком бизнеса. Он начинает видеть продукт как систему во времени, а не как набор экранов в Фигме. Он перестаёт быть оформителем решений — и становится соавтором стратегии, повышая вес своих аргументов в глазах и своей и смежных команд.
Изображение поста
MockFlow — импортируйте элементы дизайна из Figma и используйте их как часть UI-блоков.
собрать понятный UI сегодня могут многие. сделать дизайн, который цепляет и идет впереди рынка — уже другой уровень.
чтобы вы стремились ко второму, мы сделали design camp — месяц реальной студийной работы c крутыми проектами для портфолио и фидбэком от менторов. в статье на dsgners наш hr lead 🍕 ксюша малова рассказала, как всё устроено и почему джунам туда идти — просто маст. новый поток стартует 10 марта — подавайте заявку тут до 26 февраля включительно, чтобы получить лучшую прокачку эва.
Изображение поста
🤖 Команды добавляют чат сбоку и кнопку «Сгенерировать» и думают, что это AI-UX
Проблема в том, что старые интерфейсы не рассчитаны на то, что система будет действовать между шагами: подсказывать до ввода, предлагать варианты, собирать черновики. То, что раньше было задачей человека, теперь стало связкой пользователь → система → пользователь. И UI должен это выдержать. Евгения Шамрай, дизайнер интерфейсов и руководитель дизайн-студии «Проект», работает с B2B-системами, где AI помогает искать, группировать, подсвечивать отклонения. Собрала 8 практических UI-паттернов для AI-функций с примерами, ошибками и формулировками. Главное отличие: обычный паттерн описывает форму («есть таблица, есть фильтр»), AI-паттерн описывает поведение («что система предлагает, что делает сама, как показывает варианты»). Внутри: — Черновик это не автоматизация: система предлагает вариант, пользователь правит, финальное решение за человеком; — Chain of Thought: не «модель обработала 12 тысяч токенов», а «посмотрела 20 заказов, выделила три с опозданием, сравнила с нормативами»; — Уровень уверенности: не проценты, а «похоже», «вероятно», «с высокой вероятностью», «есть сомнения»; — Умные фильтры: система анализирует активный экран, роль, историю и предлагает «Показать заказы, где задержка больше 1 часа?»; — Пределы системы: честное «я не знаю, потому что...» работает лучше, чем придуманный ответ. Хороший AI незаметен. Он не требует обучения, не объясняет, что он AI, и не ломает привычные сценарии. Он просто убирает лишние шаги там, где они мешают работе. А вы встраивали AI в продукт? Какие паттерны использовали? ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Texture pro kit by Catalyst UI Большая библиотека текстур различных материалов, которые могут пригодится вам при создании следующего проекта. Есть бесплатная версия.
Изображение поста
Scribblr Набор UI, который включает в себя больше 120 редактируемых скринов приложения для статей и блогов. Есть бесплатная версия
Изображение поста
Elingo - Language Learning App UI Kit by Sobakhul Munir Siroj
Платный, но достойный вашего внимания UI Kit приложения по изучению языков, включающий в себя более 150 редактируемых экранов. 📱Скачать UI Kit📱 #UIkit
Изображение поста
🌐 Не Behance единым! Ловите подборку сайтов, где можно вдохновиться работами коллег, найти референс или идею для своего концепта, собрать мудборд для заказчика.
🔶 Httpster — примеры сайтов и интерфейсов, где можно найти нестандартные решения для UX и UI 🔶 CSS Design Awards — проекты, отмеченные премией как самые красивые и оригинальные 🔶 Brutalist Websites, если нужен брутализм 🔶 Dribbble — сообщество графических дизайнеров, веб-дизайнеров, иллюстраторов и 3D-визуализаторов 🔶 Minimal Gallery — библиотека сайтов в минималистическом стиле 🔶 One page love — подборка одностраничных сайтов и шаблонов 🔶 Lapa Ninja — тысячи примеров сайтов, а также бесплатные ресурсы для работы 🔶 HUDS+GUIS — здесь можно изучать интерактивный дизайн 🔶 FWA (Favourite Website Awards) — площадка премии, которая отмечает классные работы в области цифрового дизайна и инноваций в дизайне 🔶 Dark Mode Design — царство тёмного режима 🔶 Site see — галерея сайтов с удобной фильтрацией контента по цвету и направлению [Фабрика Дизайна]
Изображение поста
Как я пилю свой продукт. Часть 26
После релиза кабинета рекрутера 2 февраля я почти не вылезал из кода. Основной фокус был не на «добавить кнопки», а на то, чтобы всё это держало нагрузку, не сыпалось и работало быстро. Коротко: докрутил рекрутерскую часть, сильно ужал расходы на инфраструктуру и снизил количество лишних запросов в Redis (примерно х10 раз), что сэкономит мне денег за месяц. 🔘 Что сделал: – Стабилизировал кабинет рекрутера: поправил гонки в БД, доработал логику откликов/чатов, метки прочитанного, статусы, ограничения и защиту API; – Причесал страницы рекрутера: список вакансий и детальная стали удобнее, добавил CTR, копирование ссылки, slug-ссылки, адаптив и кучу мелких UX-фиксов; – Сильно переработал кеши: Redis + request-scoped кеши + negative cache + gzip для данных поиска/вакансий, чтобы меньше долбить БД и API; – Снизил нагрузку на БД: батчинг аналитики и событий, буферизация через Redis, фоновые флаши и дневные агрегаты; – Подкрутил инфраструктуру: Gunicorn, CPU на проде, таймауты и health-check Redis; – Разнес монолитный главный файл на модульную структуру (bootstrap/blueprints), чтобы дальше не утонуть в хаосе; – Обновил стратегию кеширования фронта; – Добавил PWA-базу (иконки/manifest/service worker + offline fallback). Теперь можно добавить сайт на домашний экран и пользоваться как приложением; – Доработал проверку резюме и PDF: асинхронная генерация, кеш, улучшения по мобильному UI. Ну и теперь проверка резюме даёт более подробную информацию чуток) – Разбил большой css файл на 24 маленьких и ничего не сломал)) – Поработал чуть по SEO и вывел в поиск 1000+ страниц по разным параметрам, посмотрим, какой эффект это даст. 👀 Что по цифрам: – Были рекордные показы по SEO из гугла и яндекса, а также клики (всё это за 0 рублей); – Рекорд по выручке за последние 30 дней; – DAU приближается к 4к пользователей (шок). Цель 10к DAU; – Каждый день 200+ регистраций. – Сотни сопроводительных и проверок CV каждый день; – 200+ откликов добавляют в менеджер откликов ежедневно; За последний месяц, чтобы вы понимали рост, я до сих пор не осознаю пока: – Сопроводов сгенерировано на 138% больше, чем за прошлый период; – Сиви проверено на 103% больше; – Мэтчей на 133%; – Поисковые запросы на сайте на 58%; – Откликов добалвено на 103% больше; – Рост регистраций на 117%; 🌐 Из важного ещё Я научился хорошо парсить Linkedin (его не просто парсить, ибо у них закрытое апи и в целом хреновый поиск), поэтому теперь вакансий с прямым контактом будет ещё больше. Ну и расширяю сетку рекрутеров тоже. И я почти полностью ушёл от HH. Теперь их вакансий на сайте меньше 5% и только по дизайну (редко). В скором времени откажусь ещё от пары агрегаторов, чтобы давать только прямые контакты. Пришлось немного улучшить машинку, которая тянет всё это дело, ибо старая стала подтупливать) Теперь всё гуд. Сейчас цель простая: продолжать усиливать рекрутерский контур и доводить путь вакансия → отклик → чат → оффер до максимально бесшовного состояния. Весь упор сейчас буду делать на рекрутеров, чтобы привлекать их в сервис. Пока не знаю как, если есть идеи — пишите. Спасибо каждому, кто пишет фидбек в личку. Это реально помогает делать продукт лучше каждый день. А его я получаю ежедневно с массой благодарности. Спасибо!!! Если у вас есть вопросы, пожелания, предложения, приходите в лс ➡️ Смотреть вакансии ➡️ Смотреть вакансии ➡️ Смотреть вакансии ч.25
Изображение поста
Где вдохновляются зарубежные дизайнеры?
Аналог Mobbin, Screen Gallery и тд. Из плюсов: Много интересных и непривычных для дизайнеров в СНГ паттернов Из минусов: Все на китайском.. 🔗 uinotes.com #ЩLAB by r.
Изображение поста
Вайбдизайнер в Сбер
Мы создаем AI-native продукты, будущее цифрового банкинга. Наша цель — перевернуть процесс дизайна, перейти от рисования статичных макетов к созданию интерактивных прототипов на реальных данных. Задачи: — разрабатывать UX/UI в Cursor, Claude или Codex — обогащать прототипы интерактивом, анимацией и живыми данными — тестировать вместе с исследователями прототипы на реальных пользователях — фокусироваться на решении пользовательских задач и метриках Ожидания: — опыт создания продуктов с фокусом на UX — умеешь делать красивый UI и воплощать его в код — можешь сформировать вижн и позицию по продукту, растишь в себе задатки визионера — есть желание развиваться, развивать других и двигать индустрию вперед Условия: — большое дизайн-сообщество: митапы, конференции, обучение — удобный офис рядом с метро Кутузовская Как откликнуться: — присылай резюме + портфолио по адресу ivprokhorov@sberbank.ru #дизайн
Изображение поста
Хороший дизайн. Слабая аргументация
Я успел поработать в большом количестве разнообразных дизайн-команд и продолжаю убеждаться, что большинство дизайнеров склонны к интровертному типу личности, в то время, как заказчики — чаще к экстравертному. Безусловно, это не научный факт, а скорее стереотипный паттерн, имеющий статистическое отражение в моих личных наблюдениях. Деление на интровертов и экстравертов условно, так как большинство людей — «амбиверты», сочетающие черты обоих типов. Но, так как дизайн требует глубокой концентрации и долгой сосредоточенной работы с абстракциями, это коррелирует с интровертным типом мышления — фокусом на внутреннем мире, глубоком мыслительном процессе и внутренних переживаниях, что характерно для дизайнеров. Встречи, синки и питчи — динамичная среда, требующая быстрого фокуса здесь и сейчас. Выигрывает тот, кто быстрее реагирует и увереннее говорит. Дизайнер может не успевать формулировать мысль, воспринимать вопросы как атаку и в результате терять свою позицию не потому, что она слабая, а потому что она не была быстро и коротко сформулирована. Как интровертному дизайнеру отстаивать позицию Аргументация — это навык работы с контекстом, логикой и формой подачи. Всё начинается с осмысленной задачи и продуманного дизайн-решения, каждый сценарий, состояние и корнер-кейс которого должны быть сформулированы коротко и прозрачно. Лучше всего заранее готовить аргументы, на которые нужно будет опираться при возникновении вопросов или критики. Решение любой задачи можно объяснить за 1-2 минуты. Если нет — это либо плохое решение, либо оно неправильно сформулировано. Как презентовать решение я как-то уже писал. Когда решение продумано до мелочей и доступно объяснено, это уже 90% успеха. Остальные 10% — это ответы на вопросы и критику. Ни в коем случае нельзя воспринимать критику и вопросы как конфликт. Дизайнеры часто имеют с этим проблемы — воспринимают критику как личное оскорбление. Личность дизайнера и его работа — не одно и тоже. Каждый вопрос или замечание следует воспринимать не как попытку разрушить дизайн-решение, а как возможность его усилить и обогатить. Если вопросы застали врасплох и на них нет ответа в моменте — стоит поблагодарить за них — это ваш бэклог, который поможет улучшить следующую версию решения. Аргументация — это навык, а не черта характера. Это такой же скилл, как дизайн-мышление, работа с UI или исследования. И хорошая новость в том, что этот навык можно и нужно развивать — не ломая себя, а усиливая свои сильные стороны. 💦💦 Аргументация и прокачка других скиллов на ментор-сессиях: Getmentor Solvery
Изображение поста