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

💎 Курс "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 #вебдизайн

[@user-mx3fo4iv8p]

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

[@user-gi9yf7ps4y]

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

[@user-xl9ls2wq8q]

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

[@galinadunaeva8754]

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

[@oksana_hosi]

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

[@ivlasova]

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

[@user-rs6sn2ie4t]

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

[@alyona_brise]

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

[@user-ub5pv7qx4g]

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

[@maiya71]

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

[@user-so6fp4rn7x]

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

[@ViktorBezgin]

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

[@---ob2pw]

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

[@natalivakheta4853]

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

[@YanaLiechtenstein]

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

[@user-yz1oi2vm3i]

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

[@Singlesincehigh]

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

[@yarrryna]

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

[@starkgold2624]

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

[@PSlastix]

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

[@olkakosharska7888]

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

[@user-su8pz5qn4x]

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

[@user-dp4wm8fx5e]

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

[@user-ox8no4pw3v]

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

[@user-cw4ig7fy7r]

Thanks it was very useful!

[@jannakr]

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

[@user-xi6no2ts3p]

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

[@user-uq3zx2le2k]

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

[@lumilkaa]

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

[@MelineWald]

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

[@pinkpanther2349]

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

[@Lana_Kulko]

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

[@user-xs8ty9dg5s]

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

[@eldarhelsinki]

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

[@kistochka_design]

Спасибо!)

[@July-beauty]

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

[@user-nf5ek9pr8h]

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

[@Teddi7372]

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

[@user-ij9ng6om1d]

Благодарю 🙏

[@user-li6dd8le7g]

Спасибо 🙏🏻

[@user-kf6yp2sj6l]

Спасибо😊

[@user-ee4lw5uj3f]

Спасибо ☺️

[@soundmorozov]

Трижды лайк!

[@user-yu8tc9ht7e]

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

[@annancyro]

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

[@nazgulkalykova9815]

Спасибо!

[@dettlance]

спасибо 🙏

[@citycattv5050]

Спасибо🐎

[@tinatintodua3606]

Spasibo za information)

[@tablerones]

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

[@tablerones]

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

[@user-sm7eu6lc3q]

Спасибо🤗

[@user-md9wk7bv9m]

Спасибо 🤗

[@grigorysteblyanko3584]

Спасыбо)

[@viki8design]

Спасибо ❤

[@LaLu85558]

Спасибо 👍

[@user-vw9pu1mc6h]

Спасибо
🎉

[@annasoinikova1217]

Благодарю))

[@ulkerram111]

thanks you!:)

[@ethanhunt3865]

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

[@nastyaivanova6397]

спасибо!

[@mskarpdsk]

Спасибо )

[@m.elmira2515]

спасибо)

[@m.sirotina]

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

[@user-mf1md5xo3j]

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

[@umka1321]

Спасибо.

[@user-mf9vj8ct1z]

Спасибо!!!

[@bystrovagency]

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

[@Vor.Sasha_1972_Marshall]

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

[@user-vn1dy7en6w]

Спасибо

[@JuliaKrav]

Дякую)

[@user-fl3ut8qq5k]

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

[@Darya_Nam]

спасибо

[@Torrez421]

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

[@oglk9338]

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

[@kiber7333]

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

[@Divaaan3]

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

[@SofyaFilippova]

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

[@camillam8315]

спасибоооо

[@SeoAudits-fv3nn]

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

[@sunnygold7589]

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

[@SofyaFilippova]

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

[@user-le1fl5qj7u]

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

[@user-nb7vn7mc6p]

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

[@SofyaFilippova]

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

[@user-le1fl5qj7u]

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

[@lespoulstandard]

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

[@bohdanshvaikovskyy9312]

Дякую

[@aperkarapetyan4432]

👍👍👍

[@ghevondrobertghazarian5625]

SPASIBAAA

[@feemgoodinc]

Спайсон!

[@theoty-js]

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

[@lucky_d168]

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

[@alicerexed5588]

[@botirtursunov2795]

nixuya ne ponyal no ochen interesno

[@riowio4481]

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

[@valerii199]

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

[@helll764]

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

[@P_Matveev]

Где логичное завершение данного видео сам ui кит?

[@SofyaFilippova]

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

[@user-ux9vu4cn6k]

Спасибо!)

[@AnnaNestera]

Спасибо!

[@user-by7gm4rz1z]

спасибо!

[@sashfomin]

Спасибо)

[@8damager8andreee84]

Спасибо

[@sashavolkova9626]

спасибо

[@user-xx4oh2kf9c]

Дякую)

[@jenyaandmisha1197]

Спасибо!

[@sergeydesigner-lo1ve]

Спасибо!

[@denismuravev2673]

Спасибо!