Бесплатный видеокурс: основы UI дизайна

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой статье речь пойдет про плейлист по основам UI дизайна, который состоит из 22 видео.

За почти 15 часов ты узнаешь про все необходимые (на мой взгляд) основы UI дизайна: что это такое, что нужно уметь, знать, понимать и т.д. касательно теории и практики. Все видео можно смотреть на скорости 1.25х или 1.5х, чтобы сэкономить время 😉.

Этот «курс» подойдет для недизайнеров и новичков, которые только начали интересоваться профессией или ищут больше знаний.

Чтобы быстрее постигать новые навыки, призываю читать описание и переходить по ссылкам под видео, если я их оставлял. Тебе ещё поможет чтение статей и просмотр других видеоблогов от других авторов. Главное, чтобы они не впаривали тебе курсы, а давали знания и навыки здесь и сейчас. P.S.: я ничего не продаю.

Оглавление

Весь плейлист →

01. Дизайн это дизайн?
13*:14*Перед тем, как разбираться в UI хочется сказать пару слов про то, что дизайн это проектирование (т.е. дизайн)…

02. Дизайн принцип: Единство
9:58Это первый ролик плейлиста по UI дизайну, в котором важно просто понять то, что смотреть на свою работу надо в целом, а не углубляться в какие-то детали.

03. Дизайн принцип: Баланс
52:08Постарался раскрыть тему и закрыть основные вопросы по теме баланса, как его найти и что можно использовать (свойства) для достижения баланса. Некоторые темы, а точнее свойства будут разобраны в отдельных темах, поэтому свойства рассмотрел обзорно.

04. Дизайн принцип: Белое пространство
35*:59*В этом видео про значимость белого пространства в дизайне. Дополнительно можно нагуглить и почитать про белое пространство по этим запросам: spacing in web design, white space ui или на русском белое пространство в веб-дизайне и т.д.

05. Дизайн принцип: Выравнивание
26*:05*Рассказал и показал про основные идеи и сам принцип выравнивания.

06. Дизайн принцип: Повторение
12*:22*Ты уже знаешь этот принцип, а здесь я тебе просто напоминаю о нем.

07. Дизайн принцип: Близость
13:03Коротко про принцип близости из гештальт-психологии.

08. Теория цвета на коленке
22:50Рассказал про цвет, про его функцию в UI, про состояния, про теорию цвета, про схемы, про HSB vs HSL и почему на это можно забить.

09. Дизайн принцип: Контраст
18:39Контраст важен для создания точки интереса. Суть его проста: сделать элементы разными. Чтобы это сделать можно использовать разные свойства и в видео рассказываю как

10. Дизайн принцип: Иерархия
24*:59*Чтобы сделать хорошую визуальную иерархию, надо сперва понять с чем работаешь и расставить приоритеты, а после уже играться с визуалом. В плейлисте по основам UX есть большое видео про информационную архитектуру.

11. Типографика в веб-дизайне
44:47Основные термины и правила, а также советы по типографике, которые подойдут новичкам для понимания такой сложной темы как типографика и подбор хорошей гарнитуры. Я не рассказал про кавычки и правила оформления, но это все есть в книгах по типографике

е12. Сетки в веб-дизайне
01:21:31Большое и основательное видео про основы построения сеток и вообще про сетки в веб-дизайне в целом.

13. UI практика: Копирование
35:20В этом пролике я показываю как копирование чужих работ помогает набить руку в отрисовке компонентов, насмотренности, а также в поиске более удобных решений

14. UI практика: Дашборд
01:50*:45*В этом видео за 2ч показываю как новичкам подступиться к рисованию концепции простого дашборда

15. UI практика: Лэндинг
01:18:10В этом видео рисую лэндинг от мобилы до десктопа, а в следующем покажу как его сверстать, чтобы у тебя было понимание основ html/css.

16. UI практика: Основы html/css и flexbox
Все части — 4ч 20минВ серии видео сжатообъясняю основы html css и flexbox. На примере верстки простого лендинга от мобильного вида до десктопного.

• Часть 1 — что такое html, css и flexbox. Вёрстка шапки
• Часть 2 — про позиционирование элементов и продолжение вёрстки
• Часть 3 — верстка блока списка возможностей продукта
• Часть 4 — верстка блока про мобильное приложение
• Часть 5 — верстка тарифов
• Часть 6 (финал) — подвал лендинга и как проверить вёрстку

17. UI практика: Дизайн-системы на коленке
27:27
В этом видео рассказываю что такое дизайн-система, кому она нужна, кто ее делает, что в ней должно быть. Также показываю примеры популярных дизайн-систем.