UI-КИТ: ЗАЧЕМ И ЧТО ДОЛЖНО БЫТЬ ВНУТРИ?

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

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

50% 1

💎 Курс "UX/UI-Дизайн" - uxui.filschool.ru
◾ Базовый курс по веб-дизайну "Основы дизайноведения" - base.filschool.ru/
◾ Полноценный курс по веб-дизайну "Дизайноведение" - filschool.ru/
◾ Ведение рабочих профилей в Instagram "Инставедение" - insta.filschool.ru/
◾ Менторство - drive.google.com/file/d/13GcE...
◾ Магазин футболок для фрилансеров - filippovashop.ru
ТАЙМКОДЫ:
00:00 - Приветствие
00:16 - Что такое UI-кит?
01:18 - Какие элементы могут быть в UI-кит?
01:42 - Кнопки
02:48 - Шрифты, заголовки
03:35 - Цветовая гамма
04:47 - Чек-боксы, радиокнопки
05:47 - Табы (переключатели) и прогресс-бар
6:22 - Ставь лайк и подписывайся, если видео оказалось полезным!
Самые полезные видео на канале:
Кто такой веб-дизайнер - • ЧЕМ ЗАНИМАЕТСЯ ВЕБ-ДИЗ...
Сколько зарабатывает веб-дизайнер - • СКОЛЬКО ЗАРАБАТЫВАЕТ В...
Навыки веб-дизайнера - • НАВЫКИ ВЕБ-ДИЗАЙНЕРА /...
Как стать веб-дизайнером - • Как стать веб-дизайнер...
Где учиться на веб-дизайнера - • ГДЕ УЧИТЬСЯ НА ВЕБ-ДИЗ...
Плюсы и минусы профессии - • ПЛЮСЫ И МИНУСЫ ПРОФЕСС...
Какой ноутбук выбрать - • Как выбрать ноутбук дл...
Этапы рабочего процесса - • ЭТАПЫ РАБОЧЕГО ПРОЦЕСС...
Кто такие UX/UI дизайнеры - • КТО ТАКИЕ UX/UI ДИЗАЙН...
Ошибки начинающих - • 🚫 ОШИБКИ НАЧИНАЮЩИХ ВЕ... , • 🚫 ОШИБКИ НАЧИНАЮЩИХ ВЕ...
Стили в веб-дизайне - • 🎨СТИЛИ В ВЕБ-ДИЗАЙНЕ
Сетки в веб-дизайне - • МОДУЛЬНЫЕ СЕТКИ В ВЕБ-...
Адаптивный дизайн сайта - • АДАПТИВНЫЙ ДИЗАЙН САЙТ...
Дизайн сайта в Figma - • ДИЗАЙН САЙТА В FIGMA
Тренды в дизайне на 2021 год - • 8 ТРЕНДОВ UX/UI ДИЗАЙН...
Как сделать портфолио - • 🔥КАК СДЕЛАТЬ ПОРТФОЛИО...
Как рассчитать стоимость дизайна - • КАК РАСЧИТАТЬ СТОИМОСТ...
Как найти первого клиента - • 🔥Как найти первого кли...
Где меня найти:
Instagram: / sofyafilippova
Instagram Filschool: / filschool.ru
Страница Вконтакте: sof_filippova
Сайт веб-студии: filippovadesign.ru
Портфолио студии: www.behance.net/filippovadesign
#kit #UI #вебдизайн

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

30 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@user-mx3fo4iv8p 3 года назад

Софья, ты умничка. Было бы круто посмотреть подробное видео про то, как ты начинала, с какими сложностями и неудачами сталкивалась, и как ты их преодолела)

@user-xl9ls2wq8q 3 года назад

О, да, ещё какое полезное видео!👍👏 Большое спасибо, Софья!🌹🍫

@user-gi9yf7ps4y 3 года назад

Большое спасибо! Без воды и ёмко. Больше таких видео. Однозначно лайк_)

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

Спасибо большое! Учусь на курсах, а разбираюсь благодаря Вам❤️

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

София, благодарю за ваш канал! Прохожу сейчас курсы, но там много не хватает

@user-so6fp4rn7x 3 года назад

Спасибо, Софья! Оказывается, я как раз делала такие UI-КИТы, только они у меня были всё время на каких-то черновиках, листочках и т.д. То, что это сё можно вот так красиво оформить и постоянно пользоваться, как-то в голову не приходило)))) Благодарю!

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

Как всегда полезно! Like💓

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

Ох, большое спасибо! Буквально позавчера делал оформление моб. Приложение, в flat дизайне, но компоненты делал сам, не зная как правильно, а вот сейчас как шаблон буду использовать, спасибо!!

@user-rs6sn2ie4t 3 года назад

Огромное спасибо! Как всегда, четко и по делу!

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

Спасибо! Очень своевременная и полезная информация 🧡

@maiya71 Год назад

София, спасибочки Вам от души! Вы всё доступно объяснили. 🌺

@PSlastix Год назад

Про отступы, гениально! И почему я раньше их не использовал в UI KIT, обязательно возьму на вооружение ))

@ViktorBezgin 4 месяца назад

Не думал что это на столько важно, годнота!!! Спасибо!))

@user-ub5pv7qx4g 3 года назад

Спасибо! Все понятно и доступно! )

@YanaLiechtenstein 9 месяцев назад

Подача супер, все наглядно, спасибо!❤

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

Спасибо большое! Очень много подчеркнула для себя !

@---ob2pw 3 года назад

Спасибо, так круто!)

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

Спасибо! Очень интересно и кратко!

@olkakosharska7888 Год назад

Очень информативно, спасибо ) иногда на курсах и меньше можно научиться)

@user-yz1oi2vm3i Год назад

Спасибо, очень полезная информация

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

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

@user-ox8no4pw3v Год назад

Класс, как всегда!

@user-su8pz5qn4x 3 года назад

Спасибо большое. Все полезно

@user-dp4wm8fx5e 3 года назад

Спасибо, полезно 👍

@user-xi6no2ts3p 3 года назад

Спасибо! Все супер!

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

Спасибо, позновательно👍

@user-uq3zx2le2k 2 года назад

Пасибо вам огромное ❤

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

Спасибо, спасибо и ещё 1000 раз спасибо! Наконец то стало понятно куда все это вкладывать и что это за зверек такой - юай кит)))

@pinkpanther2349 Год назад

Спасибо большое! 🏵️🏵️🏵️

@July-beauty 3 месяца назад

София Вы просто СУПЕРРРР ! Отличный учитель и очаровательная девушка ! Спасибо ОГРОМНОЕ за ваши уроки ! Очень достойная подача материала !

@user-oz3mb6jr5z 3 года назад

спасибо, было полезно

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

спасибо, отличное видео

@user-ij9ng6om1d 3 года назад

Благодарю 🙏

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

Спасибо, милашка Софи, за полезный видосик!

@user-ux9vu4cn6k Год назад

Спасибо!)

@Teddi7372 Год назад

Спасибо большое)

@user-cw4ig7fy7r Год назад

Thanks it was very useful!

@user-xs8ty9dg5s Год назад

Спасибо). Лайк

@soundmorozov Год назад

Трижды лайк!

@user-nf5ek9pr8h 3 года назад

Спасибо полезно )

@user-li6dd8le7g 2 года назад

Спасибо 🙏🏻

@user-kf6yp2sj6l 8 месяцев назад

Спасибо😊

@user-ee4lw5uj3f 3 года назад

Спасибо ☺️

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

Спасибо!

@citycattv5050 Год назад

Спасибо🐎

@dettlance Год назад

спасибо 🙏

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

Спасыбо)

@user-sm7eu6lc3q 3 года назад

Спасибо🤗

@viki8design Год назад

Спасибо ❤

@user-md9wk7bv9m 2 года назад

Спасибо 🤗

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

Spasibo za information)

@user-vw9pu1mc6h Год назад

Спасибо 🎉

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

Спасибо большое, по полочкам буквально. *Раньше копался с этими архивами, не знал "шО с НИмИ ДелАтЬ?"*

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

Надеюсь вы станете популярными в этом году

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

Спасибо 👍

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

Благодарю))

@user-yu8tc9ht7e 3 года назад

Будет ли это разбираться на основном курсе по веб-дизайну?

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

Спасибо )

@user-mf9vj8ct1z 2 года назад

Спасибо!!!

@user-mf1md5xo3j 2 года назад

огромное спасибо

@poberezhetssofiia8290 Год назад

спасибо!

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

Подскажите, нужно ли для каждого адаптива адаптировать и ui-kit тоже?

@m.elmira2515 Год назад

спасибо)

@Vor.Sasha_1972_ 4 месяца назад

Софья, спасибо.

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

Спасибо.

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

thanks you!:)

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

UI kit нужно делать в самом начале или когда уже готов дизайн хотя бы для главного экрана, чтоб от него уже подобрать UI систему?

@user-mq3li5bk5c Год назад

Спасибо

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

А есть ли у вас возможность сделать видео с гайдами для Андроида и iOS? Самы важные и используемые вещи в дизайне мобильных устройств. Спасибо! Всем дизайн)

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

Во-первых Софья не дизайнит мобильные приложения Во-вторых, на официальных сайтах компаний есть гайдлайны для IOS (Apple) и Android (Google)

@Torrez421 Год назад

Прикольное видео. Только поправочка, в UIKit поинты, а не пиксели) разные штуки)

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

спасибо

@m.sirotina Год назад

UI кит создается параллельно с разработкой дизайна? или уже после?

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

спасибоооо

@JuliaKrav Год назад

Дякую)

@user-le1fl5qj7u 3 года назад

Отличное видео! Подскажи, пожалуйста, я правильно понял, что создавать такой UI Kit это такой себе предмет хорошего тона? То есть вместе с готовым проектом дизайнер отдаёт весь набор элементов из этого проекта, чтобы верстальщику было легче работать?

@user-nb7vn7mc6p 3 года назад

Как меня учат, то это не предмет хорошего тона, а прямая обязанность. Не хочешь делать юи кит и анимацию? - Тогда не забудь отдать часть своего гонорара фронт-эндеру

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

Это обязательный этап работы профессионала. Если речь идет о маленький сайтах, то UI-KIT для них не нужен, создают чаще обрезанный под кнопки, всплывашки, ховеры

@user-le1fl5qj7u 3 года назад

@@SofyaFilippova Спасибо большое за ответ. Я не в сфере и не знаю всего этого, только учусь!

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

Что за UI-Kit вы разбирали? Есть ли он в открытом доступе, как хороший пример?

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

Пересмотрите видео. UI-KIT у каждого проекта свой, я не разбираю какой-то конкретный. Я говорю о о том, что может быть внутри разных UI-KIT, в зависимости от наполнения самого проекта.

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

Спасибо. А почему не рекомендуете шаблоны?

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

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

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

А чем ui-kit отличается от design system?

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

Спайсон!

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

SPASIBAAA

@SeoAudits-fv3nn 2 месяца назад

На счет того чтобы записывать там сколько отступов итд жто мне в голову не пришло я хотел потом все подровнять водогнать а так да...если записывать сначала, но много времени скэкономишь и ошибок лишних избежишь. спасибки !

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

👍👍👍

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

Большое спасибо, теперь не нужно собирать информацию из разных источников с:

@theoty-js 2 года назад

Очень приятная ^^)

@user-fl3ut8qq5k 2 года назад

как установить это все

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

Дякую

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

@lucky_d168 23 дня назад

Шаблоны нада, может поделиться кто

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

UI kit, гайдалайн, стайлгайд - по факту это одно и тоже?

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

По сути да, смотря для чего все это

@helll764 Год назад

Чем UI Kits отличаются от гайдлайнов и дизайн-систем UI/UX guideline, или гайдлайн - это документ, который содержит основные концепции дизайна. В нем указаны требования к интерфейсу, размещению компонентов, правила взаимодействия и сочетания элементов, акценты, которые нужно расставить. Это подробное текстовое руководство, которое помогает решить, каким будет интерфейс, а не набор элементов, в отличие от UI Kit. Гайдлайны часто связаны с соответствующими им наборами. Дизайн-система - это набор компонентов, правил, указаний и инструментов, которые повышают качество и скорость разработки новых продуктов и обеспечивают эффективную поддержку существующих. В нее входят и UI Kits, и гайдлайны, и шаблоны проектирования страниц. Как правило, подобные дизайн-системы применяются только в больших компаниях.