Дизайн-система и UI-кит: в чем же разница?
Вставка
- Опубліковано 5 жов 2021
- 🔥 Дарю Практикум «Как стать UI/UX дизайнером и начать зарабатывать»
Переходи на мой сайт impoliakov.ru и забирай Практикум бесплатно 🔥
______________________________________________________
Рассказываю, чем отличается дизайн-система от UI-кита. В чем основные сходства и различия.
★ Дизайн-система мобильного приложения ★
👉 Дизайн мобильного приложения в 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
Знали разницу между UI-китом и Дизайн-системой?
Путалась в этих понятиях. Благодаря твоему визуальному объяснению всё стало на свои места))
Не , вообще не знал :) , спасибо!
Да нет никакой разницы. Раньше все это называли китом, набором элементов, принципами дизайна. Теперь придумали новый термин и лепят его куда не попадя.
Разве нет разницы между компонентами и элементами?
Дизайн-система - это не только графический язык, о котором ты рассказал, а именно связь графики и кода. Т.е. все элементы в фигме+документация+правила+философия+место с подключенным уже для разработчиков компоненты с кодом, которые они могут копировать и использовать.
В точку. Сейчас работаю над дизайн системой для крупной компании, и мы с разработчиками только название токенов для цветов обсуждали неделю, чтобы всех все устроило 😅
Хотелось бы в твоем исполнении посмотреть следующее:
1. Работа с библиотеками (создание, подключение, экспорт, импорт и тд.)
2. Создание сложного дашборда с графиками и таблицами для какой нибудь CRM системы.
3. Подготовка макета к созданию темной темы
Спасибо за идеи
Хорошие темы 👍
Если посчитать сколько раз за видео ты сказал «окей», то этим можно будет обернуть земной шар 2,5 раза 😂
Ui kit это не только библиотека компонентов, но и стилей тоже, а это шрифты, цвета, тени, скругления. Система эта документация, набор правил для использования кита в том числе. Но и многое другое, как например правила написания кода и использования токенов и ещё чего угодно (что придумает дизайнер)
так просто, быстро и понятно не объяснял еще никто) спасибо
Видео -супер! Спасибо за структурную информацию и наглядность - запоминается очень хорошо такой формат.
Коротко, но емко и понятно. Спасибо за Ваши полезные видео.
И подача как всегда на высоте) еще одно спасибо!
Большое спасибо за видео! Коротко, понятно, без воды)
Как чётко и по делу, все сохраняю, чтобы пересмотреть)
Самое лучшее разъяснение материала! Спасибо большое, Алексей!
Пожалуйста 🙏
Просто, быстро и понятно. Спасибо, лайк и подписка👌🏽
Очень полезное видео без воды 👍🏻
Алексей, видео огонь! 🔥
Спасибо большое за видео!!!❤️
Похоже, большинство дизайнеров вообще не знают, что такое дизайн-система. Сегодня я хотел найти в Ютубе лучшие практики построения именно дизайн-системы на Фигме. А нашел тыщу роликов о том, как быстро начиркать кучу "красивых" фреймов с названиями типа Frame 372, никак не связанных друг с другом, абсолютно не используя ни стили, ни компоненты. Этакий Фотошоп на Фигме. Твой же подход (наконец-то нашёл!) комплексный , близок к моему, буду смотреть и сравнивать со своим.
P.S. Вместо слова-паразита "Окей" лучше говори "Олл райт", так будет смешнее 😀Ну а вообще - благодарю за видео.
Алексей, спасибо, что кнопочки показываете на экране) успехов вам!
Спасибо за отличное предложение!
очень много нарезок, представляю как вы угарали в процессе :) Спасибо за видео!
Спасибо! Исчерпывающяя инфа!
Очень полезное видео, спасибо)*
расскажите про процесс работы с клиентом, пошагово от брифа до сдачи на верстку и все нюансы
Обсуждение идей с заказчиками я веду на простом и быстром языке Low-fi прототипов: шрифт вроде есть, но это Comic Sans, цвета тоже есть, но их всего два - черный и синий. Это тот редкий случай, когда дизайн-система и UI Kit почти одно и то же. В целом же ты безусловно прав, очень наглядно всё показал.
Очень хорошо объясняете)
Спасибо за тяжкий труд
спасибо большое, очень понравилось! скажите, пожалуйста, такие знания необходимы всем дизайнерам или каким-то отдельным направлениям?
Отличный урок как всегда!!!
Спасибо, стало все понятно 🙈
Залез, называется, просто глянуть как макетик на фигме для мобильного приложения сверстать по-бырому) Итог: весь день на Вашем канале) Спасибо, Алексей! Материал огонь!)
Пожалуйста)
Алексей, приветствую! Отличная подача материала.
Не мог бы ты рассказать алгоритм действий во время получения заказа. (Как не бояться брать заказ, что делать если у заказчика нет тз)
Спасибо! Все более чем понятно!))
🤝
Классное видео! Хорошо бы только слово "О`кей" реже встречалось.
Спасибо очень полезное видео
крутяк!!! 🔥
По сути и ничего лишнего. Отличное видео!
супер, крутое объяснение, спасибки)))
🤝
спасибо за контент, вы топчик
Пожалуйста и спасибо!
Кайф, наконец-то на понятном языке нашёл видео 🔥
Благодарю! :)
Спасибо)
спасибо!
в чем отличие разработки дизайн лендинга интернета магазина или соц сети какое время на разработку и цена?
Леша сделай акцент на разбор видео по созданию дизайна (первого экрана)
-Согласны?
-Узнали!
окей, лайк!
брендбук, фирменный стиль, айдентика чем отличия?
ОКЕЙ
Ради хорошего контента и коммент не жалко.
Правда ролики хотелось бы по-длинее, но это мелочи жизни)
🤝
А иконки являются частью дизайн-системы или кита? Должны ли они быть унифицированы в проекте или...это что-то отдельное?
Дизайн система охватывает дизайн и код, т.е. в ДС входит: граф. элементы, документация, стили, фреймворки и гайдлайны. UI Kit - это набор граф. элеметов, хорошо если с описанием :)
Фичи - это функциональные преимущества продукта. Сложные компоненты (состоящие из нескольких простых) можно так и называть: сложные. Или составные. Или комплексные.
Есть более подходящее название из атомарного дизайна - организмы
представляю как вы приходите на дейлик и говорите команде: мы тут вчера со вторым дизайнером новый организм сделали )))
🔥
лойс!
👍
👍👍👍
Ох, ещё больше запутал((
лайк. комментарий )
Окей, фичи это паттерны)
Кайф
Окей...окей...окей )
Ничего не поняла
лайкос
🤟
Братан, ты сложно объяснил. UI KIT это UI комплект из заранее созданных элементов, которые не могут жить без инструкций и исходного редактирования. А исходное редактирование это и есть дизайн система, которая содержит в себе стандартизацию и инструкцию для элементов, …….
Короче говоря, ввел в заблуждение тысячи зрителей и зачем-то прорекламировал NASA. Хоть бы сам что-то посмотрел про дизайн-системы перед тем, как навешивать тут.
Слово паразит Окей
Божественная логика.
Есть кит, но он не может быть без цветов и шрифтов, а вместе с ними это уже дизайн-система.
Чушь и запудривание мозгов новичкам. Согласны? Ок!
Алексей! Ты же русский парень. Далеко не глупый! Что ты постоянно "Окей" да "Окей"? Подсел на это дерьмо! Выплюнь его изо рта!
Забыл русские слова? "Хорошо", "ладно", "отлично", "здорово" и ещё много подобных в тему!
Оживи в себе часть русской культуры!
очень жаль, что такие дилетантские видео выпадают первыми при поиске. Нет, дизайн-система - это гораздо больше и масштабнее, чем просто ui-кит + токены... Ржака. Не ходите к этому автору на курс.