Внедрение дизайн-системы сложнее чем реализация

Часто в чатиках и дизайнерских комьюнити вижу истории о том, как небольшая команда на молодом проекте берётся за дизайн-систему. Один-два дизайнера, десяток разработчиков, быстрые договорённости с фронтами — и вот, ресурсы выбиты, процесс пошёл. Завидую… Когда дизайнеры начинают работать над дизайн-системой, их главный фокус — сама реализация: какие компоненты нужны, как их организовать, какие механизмы использовать. И это действительно важно. Если команда маленькая, а проект свежий, достаточно просто начать — остальное наладится в процессе. Но что, если у вас сотни разработчиков, миллионы пользователей, а дизайн-системы нет вовсе? Более того, нет даже базового UI Kit’а, от которого можно было бы оттолкнуться? В таких условиях всё усложняется. Конкретные решения уже не так важны, на первый план выходят процессы, политика и поиск союзников. Нужно договариваться, продвигать ценность дизайн-системы, убеждать команды, которые привыкли работать по старым схемам. И главное — внедрять систему так, чтобы не спровоцировать саботаж (а такое бывает), когда команды будут стараться работать старыми методами игнорируя новые процессы и всячески тормозить внедрение новой системы. Иначе даже самая идеально спроектированная дизайн-система останется просто очередной папкой в Фигме. Дизайн-система — это не только про кнопки и компоненты. Это про людей, процессы и умение менять культуру работы. Это важно не упускать, и не зацикливаться только на токенах и компонентах. - - 🛫 Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru
Изображение поста

Finesse UI – Figma UI Kit

Дизайн система в тематике «Финансы» Install 😗 Фигмач
Изображение поста

💻 Ваш опыт как ценность для бизнеса

Обычно дизайнеры, рассказывая о себе, описывают задачу, решение, результат. Кто-то добавляет метрики. Мало кто говорит какая была стратегия, какие цели у команды и цели персональные, пришли ли к этим целям и какую ценность получил бизнес. — Я собрал UI-кит. — А он был нужен? Его потом использовали? На что это повлияло? — Я выполнял задачи X в рамках стрима Y. — Как это помогло команде достичь целей? Какую ценность получил бизнес? — Я внедрил процесс M. — Какую проблему ты решал? Как это отразилось на команде? И так далее. Одно и то же можно подать по-разному, если понимать, на что реально влияют твои решения. Для этого правда нужно погрузиться в задачу и выяснить накой чёрт это вообще всё затеялось. И даже это ещё не всё. После реализации нужно прийти к менеджеру или аналитику или тимлиду и узнать результаты. И не просто спросить метрики, но и выяснить что они означают и на что влияют. И, наконец, что планируется делать дальше с проектом: остановить, провести исследование и собрать ОС, проверить гипотезы на основе релиза и т.д. Примеры 🥴 В рамках экспериментов повысили CR (конверсию) на 10%, что увеличило прибыль компании на ХХ. 🥴 Внедрение дизайн-системы сократило время frontend-разработки с двух недель до пяти дней, что повлияло на общий time to market в рамках стрима. 🥴После серии удачных и неудачных экспериментов мы смогли повысить ключевую метрику Х и далее проект выделили в отдельный стрим и собрали команду. За время экспериментов мы собрали большое количество ОС и инсайтов, что помогло качественно улучшить фичу. Теперь это один из ключевых проектов в департаменте. #трудоустройство @design_awesome
Изображение поста

💻 Топ-5 мировых дизайн систем, которые задают стандарты в UI/UX-дизайне

Мы собрали самые мощные примеры дизайн-систем от Apple, Google, IBM, Microsoft и Atlassian — разбор ключевых компонентов, принципы работы и бесплатные UI-киты в Figma. Читать пост →
Изображение поста
Плaгин Figr Identity — помогает создавать и поддерживать дизайн-системы, обеспечивая единообразие и скорость работы.
Moon Design System
Moon — это продуктовый дизайн-систем для Yolo Group, который помогает поддерживать целостность пользовательского опыта и оптимизировать ресурсы дизайна и разработки. Обновление включает выравнивание компонентов Figma с сайтом Moon.io, добавление переменных цветовых стилей, смену шрифта на DM Sans, а также улучшение состояния кнопок (по умолчанию, при наведении и в фокусе). #UIkit ОТКРЫТЬ
Изображение поста
⚡️ PUKSEL
Ребята из студии Crauch собрали универсальный UI-kit и поделились им без смс и регистрации Что они подготовили: — 23 компонента и 565 вариантов, собранных по принципам атомарного дизайна; — Три цветовые темы — светлая, темная, грейскейл; — Все параметры можно кастомизировать под конкретные задачи; — Можно расширять и превращать в полноценную дизайн-систему. ➡️ Забрать UI-kit ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Конструктор спектра оттенков из выбранного цвета на базе Chatium для интерфейсов различных дизайн-систем на примере компонентов GetCourse
Изображение поста
Расписание курсов на весну 🌼
Паттерны дизайн-менеджмента — узнаете, как эффективно управлять дизайн-командой на примере крупной компании. 🗓 1 марта 💸 Рассрочка Дизайн-системы — сможете отличить UI-кит от дизайн-системы и узнаете, как организовать эффективное взаимодействие с разработчиками. 🗓 7 марта 💸 Рассрочка Дизайнер: старт в профессии — разберетесь в четырех направлениях дизайна, чтобы выбрать, какое из них вам ближе. 🗓 7 марта 💸 Рассрочка UX/UI-дизайнер — научитесь проектировать удобные интерфейсы, которые решают задачи пользователей и помогают бизнесу расти. 🗓 13 марта 💸 Рассрочка UX/UI-дизайнер Plus — как годовая, только больше! С дополнительным модулем о продуктовом дизайне, а также оплачиваемыми стажировками и практикой в Т-Банке, Авито и Redis Agency. 🗓 13 марта 💸 Рассрочка Продакт-менеджер — научитесь создавать и развивать цифровые продукты, сможете пройти оплачиваемую стажировку и решить кейсы крупных брендов. 🗓 31 марта 💸 Рассрочка Арт-дирекшн цифрового продукта — нарастите экспертизу в создании цифровых продуктов, научитесь системно работать с визуальным стилем бренда и делать его полезным для бизнеса. 🗓 26 мая 💸 Рассрочка
Изображение поста
Вакансия!
Ищем к себе в команду Яндекс 360 дизайнера дизайн-системы. Чем предстоит заниматься: Разрабатывать и улучшать компоненты системы, чтобы обеспечить единообразие и удобство использования в рамках всей продуктовой экосистемы. Затем — внедрять созданные компоненты и стили в реальные продукты, обеспечивать их корректное отображение и поведение на различных платформах и устройствах. Кроме того, нужно готовить подробные руководства и спецификации об использовании компонентов, чтобы все участники команды единообразно применяли дизайн-решения. Откликнуться и почитать про вакансию можно тут По всем вопросам можно в личку Лёше, нашему сенсею дизайн-систему @Don_leksey
Изображение поста
Вебинары о дизайн-системах
Собрали три лекции — об ошибках, принципах, которые можно нарушать, и работе в стартапах. Дизайн-системы: принципы и крайности Саша Тер-Авакян — ведущий дизайнер в Wolt (part of DoorDash). До этого работал в «Яндексе», «Сибур Диджитале», Альфа-Банке. Он рассказал про принципы, которыми руководствовался, когда работал над дизайн-системами в разных компаниях, и как эти принципы можно нарушать. Дизайн-системы для стартапов, которые достались по наследству Узнаете, как объяснить работодателю необходимость дизайн-системы и как лучше и выгоднее продавать свои решения. Дизайн-система в американском стартапе Игнат Голдман — дизайн-директор Grabr & GrabrFi. Был дизайнером в Яндексе, VK а также имеет богатый опыт создания интерфейсов в качестве разработчика. Он рассказал об ошибках и советы по оптимизации работы, а также что бы делал, если бы начинал стартап сейчас. → Курс «Дизайн-системы» начинается уже сегодня, 5 марта. Присоединяйтесь, чтобы научиться структурировать элементы интерфейса и придумать правила, которые будут понятны не только дизайнерам, но и другим участникам команды.
Изображение поста
💎💠 10 эвристик Нильсена
Я уже писала об известных именах для продуктовых дизайнеров, там вы можете познакомиться с тем, кто такой Якоб Нильсен, а в этом посте мы рассмотрим принципы, которые он вывел и которые помогают нам в работе. 1️⃣Видимость статуса системы Пользователь должен понимать какое сейчас состояние системы, но важно не переборщить, чтобы не создавался информационный шум. Нужно привлекать внимание клиента только к тем моментам, на которые он может как-то повлиять, если речь идёт об ошибкам и предупреждениях, об остальных он должен просто знать. Также клиенты должны понимать где фокус курсора, что кликабельно, а что нет, поэтому все элементы ввода и управления должны быть интерактивными со всеми необходимыми состояниями. 2️⃣Соответствие между системой и реальным миром Используемые термины и элементы-аналоги физическому миру должны работать и пониматься аналогично и в цифровом интерфейсе. Например, элемент свитчер — это переключатель из физического мира. Понимание, когда он включён и выключен, должно быть таким же, как и в реальном мире. 3️⃣Пользовательский контроль и свобода Пользователь должен знать, что он может делать в системе и к чему приведут его действия. Если действие невозможно отменить — мы предупреждаем пользователя об этом. В дизайне интерфейса мы стараемся, чтобы пользователь понимал, как он может «выйти» из сценария или «вернуться» туда, где был. Для этого у нас есть значки «крестик», «отмена», «стрелка», «хлебные крошки». 4️⃣Последовательность и стандарты Чем меньше нового нужно учить пользователю при взаимодействии с интерфейсом, тем быстрее и качественнее он работает с системой. В этом плане нам поможет дизайн-система и история изменений, заказов и пр. C их помощью клиентам не нужно будет знакомиться с каждый элементом, а возможность посмотреть историю позволит вспомнить и отследить то, что необходимо. 5️⃣Предотвращение ошибок Чтобы сократить количество ошибок пользователем, используем подсказки к кнопкам, полям и формам. Предупреждаем пользователей о последствиях тех или иных критических действий с помощью модалок и предупреждений. 6️⃣Узнаваемость, а не воспоминание Не нужно заставлять клиентов помнить, например, в Jira есть доска, которая отражает состояние задачек, всегда можно посмотреть что в работе, что на очереди, а что пора ревьюить. Система должна помогать клиентам помнить меньше и напоминать, чтобы ничего не было забыто;) 7️⃣Гибкость и эффективность использования У каждого пользователя свой опыт в работе с интерфейсами. Кто-то пользуется кнопкой «Отменить», а кто-то крестиком, а кто-то вообще пользуется клавишей ESC. Нужно учесть опыт разных клиентов для обеспечения комфортного взаимодействия для большинства. 8️⃣Эстетичный и минималистичный дизайн Чем больше информации, тем сложнее в ней ориентироваться. Тут нам помогут законы UX. Группируйте, упрощайте и дозируйте. 9️⃣Помощь пользователям в устранении ошибок Подсказывайте клиентам как они могут исправить возникшую ошибку: «проверьте соединение с интернетом», некорректность введённых данных в таком-то поле и т. д. 1️⃣0️⃣Справки и документация Не зря до сих пор существуют инструкции к бытовой технике и другим физическим вещам. Некоторые пользователи разбираются самостоятельно, но если возникает тупик всегда должно быть место, где можно найти ответ:) ——— 🏆 ПРОактивный дизайн 📚 Книжный клуб 🧠 Cаморазвитие
Изображение поста
Вебинары о дизайн-системах
Собрали три лекции — об ошибках, принципах, которые можно нарушать, и работе в стартапах. Дизайн-системы: принципы и крайности Саша Тер-Авакян — ведущий дизайнер в Wolt (part of DoorDash). До этого работал в «Яндексе», «Сибур Диджитале», Альфа-Банке. Он рассказал про принципы, которыми руководствовался, когда работал над дизайн-системами в разных компаниях, и как эти принципы можно нарушать. Дизайн-системы для стартапов, которые достались по наследству Узнаете, как объяснить работодателю необходимость дизайн-системы и как лучше и выгоднее продавать свои решения. Дизайн-система в американском стартапе Игнат Голдман — дизайн-директор Grabr & GrabrFi. Был дизайнером в Яндексе, VK а также имеет богатый опыт создания интерфейсов в качестве разработчика. Он рассказал об ошибках и советы по оптимизации работы, а также что бы делал, если бы начинал стартап сейчас. → Курс «Дизайн-системы» начинается 5 марта. Присоединяйтесь, чтобы научиться структурировать элементы интерфейса и придумать правила, которые будут понятны не только дизайнерам, но и другим участникам команды.
Изображение поста
Design System Radar
Design System Radar — специализированный плагин Figma, предназначенный для пользователей дизайн-системы. Этот плагин расширяет возможности пользователя, предоставляя надежные инструменты для обеспечения соответствия стандартам системы дизайна, уделяя особое внимание переменным интервалов и стиля. Это важный инструмент для дизайнеров, которые стремятся поддерживать высокий уровень последовательности и точности в своих проектах. #figma #plugin
Изображение поста
🦾 Нейросеть NotebookLM для дизайна
NotebookLM — инструмент на базе искусственного интеллекта, который помогает упорядочивать данные, анализировать их и генерировать новые идеи. В этой статье разберём, как UX-дизайнеры могут использовать NotebookLM для своей работы и какие преимущества это даёт в работе над UX-дизайном и дизайн-системами. https://itsets.ru/ai-v-dizayne/neyroset-notebooklm-dlya-dizayna-kak-ispolzovat-ai-dlya-uskoreniya-raboty
Изображение поста
✍️ Что такое дизайн-система и зачем она нужна
Если ты новичок в UI/UX-дизайне, возможно, ты слышал термин «дизайн-система», но не до конца понимаешь, чем она отличается от обычного UI-кита и почему о ней так много говорят. В этой статье разберёмся, зачем нужна дизайн-система, какую пользу она приносит всей команде продукта, что такое Storybook и токены, а также как хорошая дизайн-система влияет на бизнес-метрики. https://golnk.ru/AgZXW
Изображение поста
💘 Atomize Pro
Самая передовая дизайн-система для Figma Открыть в Figma #файлы #designsystem 🌙 Luuna | Design
6 трендов дизайн-систем в 2025 — с реальными примерами
Статья о работе дизайнера в Авито: разработка библиотек элементов и технических спецификаций. Узнайте об улучшениях опыта работы с дизайн-системами Читать на DSGNERS! | #статьи
Изображение поста
6 трендов дизайн-систем в 2025 — с реальными примерами
Статья о работе дизайнера в Авито: разработка библиотек элементов и технических спецификаций. Узнайте об улучшениях опыта работы с дизайн-системами Читать на DSGNERS! | #статьи
Изображение поста
6 трендов дизайн-систем в 2025 — с реальными примерами
Статья о работе дизайнера в Авито: разработка библиотек элементов и технических спецификаций. Узнайте об улучшениях опыта работы с дизайн-системами Читать на DSGNERS! | #статьи
Изображение поста