Дизайн-система и UI-кит: в чем же разница?

Подписаться 17 тыс.

Просмотров 21 тыс.

50% 1

Рассказываю, чем отличается дизайн-система от UI-кита. В чем основные сходства и различия.
***
Личное наставничество: impoliakov.ru/n...
Бесплатный Практикум по старту в профессии: t.me/AlekseiPol...
Ранний доступ к видео и эксклюзивный контент: boosty.to/impol...
Меня зовут Алексей Поляков, я профессиональный UI/UX дизайнер с более чем 10-летним опытом. За эти годы я прошел путь от создания графики до разработки сложных, многофункциональных интерфейсов для корпораций-гигантов российского рынка и топовых digital-агентств Москвы.
📩 Сотрудничество и проекты: im.poliakov@yandex.ru
***
★ Дизайн-система мобильного приложения ★
👉 Дизайн мобильного приложения в Figma (Часть 7: Дорабатываем приложение) cutt.ly/HEHIvgq
👉 Дизайн мобильного приложения в Figma (Часть 6: График и карточки) cutt.ly/SEp60wX
👉 Дизайн мобильного приложения в Figma (Часть 5: User Flow и дизайн главного экрана) cutt.ly/5WY4ygm
👉 Дизайн мобильного приложения в Figma (Часть 4: Дизайн блока авторизации) cutt.ly/DQ8D9Vg
👉 Дизайн мобильного приложения в Figma. Часть 3: Логотип, UI-кит и дизайн экранов приложения cutt.ly/iQLcoXu
👉 Дизайн мобильного приложения в Figma. Часть 2: Цвета и шрифты cutt.ly/EQPYbpe
👉 Дизайн мобильного приложения в Figma. Часть 1: Проектирование cutt.ly/zQvgykD

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 85

@im.poliakov 20 дней назад

Личное наставничество: impoliakov.ru/nastavnichestvo Бесплатный Практикум по старту в профессии: t.me/AlekseiPoliakov_Bot Ранний доступ к видео и эксклюзивный контент: boosty.to/impoliakov

@fabiaaaaan23 2 года назад

так просто, быстро и понятно не объяснял еще никто) спасибо

@ffonlfoff5005 2 года назад

Если посчитать сколько раз за видео ты сказал «окей», то этим можно будет обернуть земной шар 2,5 раза 😂

@yakovserebrianskyi1203 2 года назад

Самое лучшее разъяснение материала! Спасибо большое, Алексей!

@im.poliakov 2 года назад

Пожалуйста 🙏

@Natali_Shurashova 2 года назад

Видео -супер! Спасибо за структурную информацию и наглядность - запоминается очень хорошо такой формат.

@SemenovBushcraft 2 года назад

Классное видео! Хорошо бы только слово "О`кей" реже встречалось.

@anngoler6797 10 месяцев назад

крутяк!!! 🔥

@АлександрЧкан-ч6и 2 года назад

Благодарю! :)

@Singlesincehigh 2 года назад

Спасибо, стало все понятно 🙈

@krissisem Год назад

Ничего не поняла

@ArtemKobyakov 11 месяцев назад

Окей, фичи это паттерны)

@uxui_expert 2 года назад

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

@ИльяИванищин Год назад

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

@ateyvan 3 года назад

ОКЕЙ

@ganeesy 3 года назад

Хотелось бы в твоем исполнении посмотреть следующее: 1. Работа с библиотеками (создание, подключение, экспорт, импорт и тд.) 2. Создание сложного дашборда с графиками и таблицами для какой нибудь CRM системы. 3. Подготовка макета к созданию темной темы

@im.poliakov 3 года назад

Спасибо за идеи Хорошие темы 👍

@konstantinshishlyannikov5677 2 года назад

Ui kit это не только библиотека компонентов, но и стилей тоже, а это шрифты, цвета, тени, скругления. Система эта документация, набор правил для использования кита в том числе. Но и многое другое, как например правила написания кода и использования токенов и ещё чего угодно (что придумает дизайнер)

@aharito Год назад

Похоже, большинство дизайнеров вообще не знают, что такое дизайн-система. Сегодня я хотел найти в Ютубе лучшие практики построения именно дизайн-системы на Фигме. А нашел тыщу роликов о том, как быстро начиркать кучу "красивых" фреймов с названиями типа Frame 372, никак не связанных друг с другом, абсолютно не используя ни стили, ни компоненты. Этакий Фотошоп на Фигме. Твой же подход (наконец-то нашёл!) комплексный , близок к моему, буду смотреть и сравнивать со своим. P.S. Вместо слова-паразита "Окей" лучше говори "Олл райт", так будет смешнее 😀Ну а вообще - благодарю за видео.

@vallerqq 5 месяцев назад

Дизайн система охватывает дизайн и код, т.е. в ДС входит: граф. элементы, документация, стили, фреймворки и гайдлайны. UI Kit - это набор граф. элеметов, хорошо если с описанием :)

@SmolenskAVtoRU Год назад

Алексей! Ты же русский парень. Далеко не глупый! Что ты постоянно "Окей" да "Окей"? Подсел на это дерьмо! Выплюнь его изо рта! Забыл русские слова? "Хорошо", "ладно", "отлично", "здорово" и ещё много подобных в тему! Оживи в себе часть русской культуры!

@Bugelhagen Год назад

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

@Olenich Год назад

Короче говоря, ввел в заблуждение тысячи зрителей и зачем-то прорекламировал NASA. Хоть бы сам что-то посмотрел про дизайн-системы перед тем, как навешивать тут.

@egovoruhin Год назад

Божественная логика. Есть кит, но он не может быть без цветов и шрифтов, а вместе с ними это уже дизайн-система. Чушь и запудривание мозгов новичкам. Согласны? Ок!

@zhelezodesign90 2 года назад

Алексей, приветствую! Отличная подача материала. Не мог бы ты рассказать алгоритм действий во время получения заказа. (Как не бояться брать заказ, что делать если у заказчика нет тз)

@АртемАртеменконезабывайвыходит Год назад

в чем отличие разработки дизайн лендинга интернета магазина или соц сети какое время на разработку и цена?

@tohakuz58 3 года назад

Коротко, но емко и понятно. Спасибо за Ваши полезные видео.

@aharito Год назад

Обсуждение идей с заказчиками я веду на простом и быстром языке Low-fi прототипов: шрифт вроде есть, но это Comic Sans, цвета тоже есть, но их всего два - черный и синий. Это тот редкий случай, когда дизайн-система и UI Kit почти одно и то же. В целом же ты безусловно прав, очень наглядно всё показал.

@enivanksetra5207 Год назад

Слово паразит Окей

@autmi 2 года назад

Фичи - это функциональные преимущества продукта. Сложные компоненты (состоящие из нескольких простых) можно так и называть: сложные. Или составные. Или комплексные.

@ИльяИванищин Год назад

Есть более подходящее название из атомарного дизайна - организмы

@autmi Год назад

представляю как вы приходите на дейлик и говорите команде: мы тут вчера со вторым дизайнером новый организм сделали )))

@deniov4 2 года назад

Просто, быстро и понятно. Спасибо, лайк и подписка👌🏽

@daozenovich3800 2 года назад

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

@im.poliakov 3 года назад

Знали разницу между UI-китом и Дизайн-системой?

@ЛюдмилаТараненко-е7б 3 года назад

Путалась в этих понятиях. Благодаря твоему визуальному объяснению всё стало на свои места))

@Teo-dd6vr 2 года назад

Не , вообще не знал :) , спасибо!

@egovoruhin Год назад

Да нет никакой разницы. Раньше все это называли китом, набором элементов, принципами дизайна. Теперь придумали новый термин и лепят его куда не попадя.

@diatm1506 Год назад

Разве нет разницы между компонентами и элементами?

@vit_prosto_vit 3 года назад

Залез, называется, просто глянуть как макетик на фигме для мобильного приложения сверстать по-бырому) Итог: весь день на Вашем канале) Спасибо, Алексей! Материал огонь!)

@im.poliakov 3 года назад

Пожалуйста)

@natali24287 Год назад

Ох, ещё больше запутал((

@djuseycoding4890 2 года назад

По сути и ничего лишнего. Отличное видео!

@d9d9-d 3 месяца назад

Очень хорошо объясняете)

@dariakabyka6142 Год назад

🔥

@joker__joker_why_so_seriou2520 Год назад

👍👍👍

@sergeybogachuk7320 3 года назад

Алексей, спасибо, что кнопочки показываете на экране) успехов вам!

@im.poliakov 3 года назад

Спасибо за отличное предложение!

@МарияСоколова-о5у 2 года назад

Как чётко и по делу, все сохраняю, чтобы пересмотреть)

@krystynatymofiejewa189 Год назад

Спасибо очень полезное видео

@vadikkaz112 6 месяцев назад

лайк. комментарий )

@abdullahsaipov7973 Год назад

Спасибо! Исчерпывающяя инфа!

@ОлегЛадыгин-ф9ю 2 года назад

-Согласны? -Узнали!

@dimitrobuznitskii4559 Год назад

Окей...окей...окей )

@ivankanonik4583 Год назад

Кайф, наконец-то на понятном языке нашёл видео 🔥

@Momin1 2 года назад

Очень полезное видео без воды 👍🏻

@margobal44 Год назад

Спасибо)

@alexandrava8692 Год назад

спасибо!

@АленаРыкова-щ5л Год назад

Спасибо большое за видео!!!❤️

@somebody6459 3 года назад

Ради хорошего контента и коммент не жалко. Правда ролики хотелось бы по-длинее, но это мелочи жизни)

@im.poliakov 3 года назад

🤝

@yappix 2 года назад

Братан, ты сложно объяснил. UI KIT это UI комплект из заранее созданных элементов, которые не могут жить без инструкций и исходного редактирования. А исходное редактирование это и есть дизайн система, которая содержит в себе стандартизацию и инструкцию для элементов, …….

@kseniyaputilina6614 3 года назад

Очень полезное видео, спасибо)*

@sergeybogachuk7320 3 года назад

И подача как всегда на высоте) еще одно спасибо!

@ganeesy 3 года назад

Алексей, видео огонь! 🔥

@ИвановИванов-т6ю 3 года назад

Кайф

@ОльгаГригорьева-в6ж 2 года назад

спасибо большое, очень понравилось! скажите, пожалуйста, такие знания необходимы всем дизайнерам или каким-то отдельным направлениям?

@seniorpomidorro 3 года назад

лайкос

@im.poliakov 3 года назад

🤟

@1vohr3 Год назад

Отличный урок как всегда!!!

@vladimir_killas 2 года назад

Леша сделай акцент на разбор видео по созданию дизайна (первого экрана)

@ruslanvybornov1237 2 года назад

супер, крутое объяснение, спасибки)))

@im.poliakov 2 года назад

🤝

@erofeev1989 2 года назад

Спасибо! Все более чем понятно!))

@im.poliakov 2 года назад

🤝

@eugenevas25 Год назад

Большое спасибо за видео! Коротко, понятно, без воды)

@kotnewman1537 3 года назад

спасибо за контент, вы топчик

@im.poliakov 3 года назад

Пожалуйста и спасибо!

@Obraveliss Год назад

Спасибо за тяжкий труд

@seniorpomidorro 3 года назад

лойс!

@im.poliakov 3 года назад

👍

@merriment0 Год назад

очень жаль, что такие дилетантские видео выпадают первыми при поиске. Нет, дизайн-система - это гораздо больше и масштабнее, чем просто ui-кит + токены... Ржака. Не ходите к этому автору на курс.