Как понять дизайн системы?

Одной из первых задач на моей текущей работе было собрать и описать все компоненты, которые используются в продукте, попутно дополняя и улучшая детали. То есть, по сути, создать Figma-файл с дизайн-системой, который впоследствии будет перенесен в код.
В первую очередь я задался поиском качественных примеров, чтобы спиздить переиспользовать лучшие практики. Сегодня хочу поделиться своим топом дизайн-систем, реализованных в Figma, на которые стоит посмотреть, если вы хотите понять, как грамотно выстроить свой Figma-файл так, чтобы все, кто туда заходят, сразу понимали, что к чему 🚬

Atomaro
Тут постарались ребята из Ростелекома. Отдельный лайк за классно выстроенную цветовую схему на variables, которая позволяет, меняя один цвет, переключать все связанные с ним цвета. Например, таким образом можно в один клик поменять брендовый цвет и всю структуру цвета Primary..
Также хочу отметить концепцию с слотами внутри компонентов. Слот — это пустой контейнер у которого внутри свойство swap instance. Если у вас есть компоненты с произвольным контентом (например, карточка), то с помощью слота вы сможете размещать внутри произвольный контент, не детача компонент

Taiga UI
Дизайн система от Т Банка. Есть светлая и темная тема, а также крутой сторибук в котором намного больше компонентов и все можно потыкать

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

А какие дизайн-системы вы считаете эталонными? Поделитесь своими находками 🤨

💬 Тултип

Зачем продуктовому дизайнеру учить After Effects

Круто, когда ты можешь не просто показать свои макеты, но и вдохнуть в них жизнь💞 Например, с помощью After Effects. Почему именно Афтер эффектс, а не Jitter или еще какой-нибудь аналог? Обычная история для подобных сервисов, это взять урезанный функционал афтера, накинуть пресетов, выкатить в онлайн и просить деняк. Возможностей они дают намного меньше, а реальные плюсы размыты.

Дизайнеру необходимо знать только малую часть от Афтера, чтобы уже делать что-либо интересное. Я изучал этот инструмент и раньше, но сейчас вернулся к этому и последние 2 месяца активно практиковался и теперь готов показать, что получилось, а также свои мысли по поводу базовых знаний для дизайнера, который хочет красиво показать свою работу

1) Интерфейс. За что отвечает каждая из панелей. Как устроена рабочая область (сетка, направляющие) и таймлайн
2) Ключевые кадры. Это база
3) Изинги, работа с графиком скорости и силы анимации
4) Маски. Как и в каких случаях применять
5) 3D объекты. Как вставить 3D объект в сцену, покрутить его. Как сделать 3D мокап
6) Камера. Для чего она нужна, как менять её позицию и тд
7) Expressions (bounce, wiggle), которые дают эффект пружинистости в конце анимации
8) Морфинг (когда один объект принимает форму другого)
9) Анимация текста и цифр
10) Как импортировать дизайн из Figma в After Effects
11) Экспорт проекта. Bodymovin для векторных анимаций
12) Как вставить в интерфейс анимированный стикер из телеги (Не обязательно, но прикольно)

Эти знания можно получить за 2-3 месяца практики, советуясь с чатгпт и смотря туториалы на ютубе. Таким образом вы сможете вывести навык презентации на новый уровень и украсить портфолио всякими свистоперделкам. Но, главный профит в том, что при проектировании решений вы начнете чаще думать про анимацию, так как будете понимать как это можно реализовать 🤔

Хочу сделать серию постов, где подробнее расскажу про каждый из пунктов и прикреплю видосы, которые помогли мне в понимании этих основ. А пока что делюсь тем, что получилось после просмотра часового видео от индуса на ютубе

А вы делали анимации в After Effects или других инструментах? Если да — кидайте свои работы, интересно посмотреть ☺️

💬 Тултип

Необычные (но полезные) подборки

Найти иллюстрацию, иконку или 3D-модель сейчас несложно (если опустить вопрос качества 🤦‍♀️). Но есть вещи, о которых не часто вспоминаешь, пока не столкнешься в работе.

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

Email Love — галерея email-рассылок. Когда нужно придумать структуру письма и посмотреть, как другие делают баннеры, кнопки и оформление

Pushkeen — коллекция пуш-уведомлений

Logggos Club — логотипы, разбитые по категориям. Удобно, когда ищешь вдохновение или хочешь понять, как работают визуальные паттерны в разных нишах

Rebrand Gallery — айдентика брендов с шоурилами. Можно сказать rare item

Это не инструменты на каждый день. Но когда они нужны — они очень нужны

💬 Тултип

Telegram Design Contest

Две недели работы — и вот я готов поделиться своим решением конкурсного задания от Телеги 📱

Задание получилось довольно объемным: нужно было с нуля создать новую экосистему Nodes внутри сервиса и адаптировать решение под iOS и Android в светлой и темной темах.

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

1) Интеграция ботов, в том числе ИИ, которые могут использоваться участниками нодов и модерировать каналы и треды

2) Треды. Если в канале появляется side talk, не относящийся к теме, его можно перенести в тред, чтобы поддерживать порядок в беседе

3) Интеграция аппов в видеозвонки. Пользователи смогут использовать встроенные аппы Телеги как для рабочих задач (транскрибация беседы, доска для мыслей), так и для развлечений (квизы и другие совместные игры)

4) Приложения в каналах. Можно добавить приложение в канал и, например, вместе с другими участниками зарубиться в Веселого фермера 😀

В своем решении я ограничил пользователя одним Node-профилем на аккаунт. Внутри этого профиля он может создавать сколько угодно нодов на разные тематики — работа, друзья и так далее.
Присоединиться к ноду можно по пригласительной ссылке или найдя его в общем поиске, если нод публичный. Также сама Телега будет рекомендовать ноды по схожим тематикам.

Поиск точки входа
Затем перешел к поиску точки входа. Первая идея — разместить ее в шапке и переключаться между чатами и нодами. Но я быстро отказался от этого решения, потому что:
— Ноды — это не вид чатов, а отдельный сервис со своим профилем, сообщениями, контактами и звонками.
— В шапке и так много навигации, которую нельзя трогать, так как она связана со сторис и эмодзи-статусом — фичами, важными для конвертации обычных юзеров в премиум.
В общем, после нескольких заходов я решил, что лучше всего оставить навигацию в нескольких точках:
— Долгое нажатие на кнопку настроек раскрывает все аккаунты и связанные Node-профили.
— В Node-профиль можно перейти из раздела «Настройки».
— Двойной тап по кнопке настроек переключает пользователя с основного аккаунта на Node-профиль. Такое же решение используется в Инстаграме, поэтому подумал, что для пользователя это не будет чем-то из ряда вон.

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

При создании решения для IOS я уже знал, что навигация в андроидовской Телеге отличается кардинально, поэтому это не стало сюрпризом. Спасибо ребятам из Свеженьких, которые поделились скринами. Затем на помощь пришел мой старенький Meizu, на котором я продолжил изучать структуру андроидовского решения.

Финальный босс
В конце меня ждал финальный босс — анимация решения в After Effects. Изначально я выделял на это минимум два дня, но со всеми темными и светлыми темами у меня остался всего один день. Когда я сел за анимацию, стало понятно, что этого точно не хватит. А без анимации все 100500 макетов можно выкидывать. Я начал переживать, но тут повезло — срок сдачи продлили на день, и это помогло доделать решение (даже получилось жидкое стекло сделать)

Итоги
Результаты будут позже, но уже сейчас могу сказать, что вынес много полезного из всего процесса.
📱 Фигма-файл, макеты и 📷 превью можно посмотреть в специальном конкурсном канале

💬 Тултип

Внутренняя кухня Домклика

Сегодня делюсь подборкой интересного чтива 🧐 про то, как устроены внутренние процессы у ребят в Домлике

Как выстроить работу команды продуктовых дизайнеров, не привлекая внимания санитаров
Делятся практическими форматами работы дизайн-отдела (ревью, синки, проектные встречи) и микрокультурами, которые реально улучшают продуктивность и коммуникацию в команде. И всё это подано через живые кейсы и форматы, делающие работу менее рутинной. Например, решение ребуса в начале дня для настройки нестандартного мышления или написания эссе о проделанной работе от лица героев Звездных Воин

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

Как понять, что продуктовый дизайнер работает неэффективно
Описывают признаки слабой эффективности (нет влияния на метрики, плохие решения, отсутствие инициативы) и дают конкретный план исправления через KPI, обратную связь и PIP. И в конце — когда пора принимать жёсткие решения 🔫

А какие интересные фишки в устройстве рабочего процесса есть у вас в компании?
Поделитесь в комментариях — всегда интересно посмотреть, как это устроено у других 👁

💬 Тултип

Lab UI

Врываемся в новый год с красивым UI Kit от Дани из Лабпикс

— Токены, основанные на семантике
— Режимы с Liquid glass, Ambient-материалы с solid-поверхностями
— Прогрессивные тени и размытия, Blur'ы
— Авто-адаптивы на мобилки
— Тёмная и светлая темы
— 30+ UI-компонентов
— 400+ авторских иконок (мне прям зашли)
— Флаги всех стран мира

Мне понравилось оформление UI Kit, прям по дизайнерски сделано 😌, а также грамотно выстроенная структура кита. Отдельный респект за внимание к деталям — описание компонентов и их превьюшки 💪

Заценить кит

💬 Тултип

Новый блок в Базе Знаний

Я собираю большую доску в Miro с полезными ссылками и ресурсами по дизайну и называю её «База знаний». В прошлый раз я делился блоком на тему UI (150+ ссылок). В этот раз — фокус на UX.

Внутри 100+ ссылок на практичные материалы: статьи, видео, кейсы, гайдлайны и много других полезностей. Все ссылки разложены по категориям:
• Карта эмпатий
• CJM
• User stories
• JTBD
• Персоны
• Постановка проблем
• Дизайн-концепт
• Брейншторминг
• Mindmap
• RICE & ICE (приоритизация)
• Информационная архитектура
• User flow
• Проектирование
• Прототипирование
• Ревью
• Юзабилити
• Доступность
• Основные принципы UX
• Тексты в интерфейсе

Это не «просто подборка ссылок», а рабочая база: чтобы освежить знания, углубиться в конкретную тему или быстро найти нужный инструмент под задачу.
Сохраняйте себе и делитесь с коллегами 💔

🗂 В Базу Знаний 🫱

💬 Тултип

Dynamic Island и Live Activity

Сегодня хочу поговорить про основные моменты, которые стоит учитывать при проектировании таких прикольных штук, как Dynamic Island и Live Activity.

Dynamic Island — это интерактивная область в верхней части экрана iPhone (начиная с iPhone 14 Pro), которая пришла на смену привычной «моноброви». Она динамически меняет размер и форму, отображая уведомления, текущие процессы и элементы управления: музыку, таймеры, звонки и т. д.
Пользователь может взаимодействовать с ней — нажимать или удерживать для быстрого доступа к функциям приложения.

Самый частый и, пожалуй, самый удобный кейс — миниатюра того, что у вас сейчас играет в Spotify, Яндекс Музыке или где там еще вы музыку слушаете

Что учесть

Dynamic Island может быть в нескольких состояниях:

Compact — маленькая «таблетка»

Minimal — таблетка + кружок, когда отображаются две активности одновременно (пока редко видел вживую)

Expanded — при удерживании Compact превращается в расширенное состояние, где пользователь может совершать действия. Например:
в Compact при прослушивании музыки мы видим только обложку трека и анимированные звуковые волны, а в Expanded — можем переключать треки, ставить на паузу и управлять воспроизведением.

Важно помнить, что внутри области Dynamic Island физически находятся фронтальная камера и датчики. Поэтому ничего к поверх них не рисуем и всегда учитываем safe-зоны.

Live Activity — это виджеты реального времени, которые отображаются на экране блокировки и внутри Dynamic Island. Они показывают актуальную информацию о происходящих событиях: доставка еды, поездка на такси, спортивные матчи и другие процессы, которые важно отслеживать здесь и сейчас.
Обновляются автоматически, без необходимости открывать приложение.

Самые известные примеры лично для меня — Самокат, Ozon и Додо.

Что учесть

1) Live Activity — это про «прямо сейчас»
Он должен показывать актуальные данные и регулярно обновляться. Анимации здесь очень помогают — они улучшают считываемость и ощущение «живого» процесса.

2) Ограничение по времени.
У Live Activity есть свой жизненный цикл — он не может отображаться дольше 8 часов. В идеале — 15–30 минут.
Поэтому сюда не закладываются долгоиграющие события вроде таймера до следующего Нового года 🙂

Узнать подробнее про проектирование Dynamic Island и Live Activities можно в этом гайде 📱
Также посмотрете видос с живыми примерами 📱
И бонус — рабочие макеты от Додо 🦤 с этими островками

Проектировали ли вы когда-нибудь такие штуки и для каких задач?
Поделитесь своими инсайтами 👇

💬 Тултип

База знаний от дизайнера Figma

Оказывается не я один страдаю складированием всяких ссылок и ресурсов по дизайну 🥲
Сегодня хочу поделиться интересной находкой — Design Library от Daniela Muntyan, дизайнера из Figma.

Что внутри:
Портфолио — хорошие примеры и ориентиры по уровню
Лучшие практики — шрифты, гайдлайны, доступность и другие приколы
Вдохновение — иллюстрации, логотипы, индустриальный дизайн
А также дизайн-системы, user research и книги, на которые стоит обратить внимание

Смотреть ➡️

Короче, рекомендую сохранить, чтобы неспешно просматривать и использовать в работе ⛏

💬 Тултип

Больше всего меня цепляют авторские каналы, где дизайнеры делятся полезными находками, своими мыслями и реальным опытом. Один из таких каналов — «В погоне за дизайном». Без воды, лишнего шума и с чётким фокусом на практику 😙

Ануар публикует подборки топовых портфолио дизайнеров — отличный способ вдохновиться и быстрее обновить своё. Делится собственными UI-концептами, которые хорошо заходят в X , и в целом много рассуждает про визуал, приёмы и подходы к дизайну. Также поддерживает дизайнерское комьюнити, сообщество ребят с открытыми портфолио с самыми разными компетенциями. Но больше всего меня зацепила его дизайн-библиотека — аккуратно собранная коллекция полезных ссылок по UI и UX, практических советов и ресурсов, к которым реально хочется возвращаться. Еще и оформлено все красиво 👑

В общем, если ищешь качественный дизайнерский контент без лишнего пафоса — смело рекомендую подписаться и прокачивать свой дезигн