Курси проходять у форматі Live-вебінарів, де буде багато практичних кейсів, лайфхаків та досвіду. А для закріплення знань у тебе будуть домашні завдання з фідбеком від кураторів.

Початківцям, які хочуть навчитися UI- дизайну

Для тих, хто починає освоювати Figma і не знає, з чого почати

UX-дизайнерам, які хочуть прокачати навички UI

Фрілансерам, які хочуть отримати базові знання в дизайні

Тим, хто вже спробував себе у професії та зрозумів, що не вистачає фундаментальних знань композиції, типографіки, сіток

Кому підійде цей курс

На курсі ми почнемо відкривати безмежний веб-дизайн. Ми дізнаємось, як брифувати клієнта, робити прототипи. Які є правила у веб-дизайні, що можна порушувати, а що категорично не можна. Для створення курсу ми згадали труднощі, з якими стикались на початку кар’єри, і розповімо, як з ними боротися. Ми зібрали багаторічний досвід наших senior-дизайнерів, додали купу практики і вуаля: Welcome to the UI-design!

Про що буде курс

Програма курсу

Знайомимось зі студентами, розповідаємо, про що курс. Говоримо про важливість професії, про те, що повинен вміти дизайнер та які у нього бувають задачі. Поговоримо про відмінності UI від UX дизайну, про програми для створення дизайну інтерфейсів.

Знайомство з UI дизайном

01

Композиція та сітки: які вони бувають. Правила зовнішнього та внутрішнього. Робота з пропорціями та сітки.

03

Основи UI: Композиція, сітки

Можливості роботи у Figma. Інтерфейс та інструменти. Як будуються фрейми, як працюють розміри екранів, панель налаштувань, функція прототипування.

02

Figma, базові знання

Все про типографіку та про те, як її зробити правильно та чому ми не чіпаємо letter-spacing

04

Основи UI: Типографія

Розберемось із тим, як поєднувати кольори, що таке контраст та як скласти композицію тільки завдяки кольору.

Основи UI: Колір

05

Разом малюємо та збираємо головну сторінку. Що таке мудборд і які задачі він вирішує, як презентувати його клієнту. Збір дизайну перших двох екранів сторінки на практиці – це початок курсової роботи. Починаємо разом, продовжуєш самостійно.

07

Збираємо разом головну сторінку

Що таке ресерч і навіщо його використовувати. Прототипи, типи прототипів, навіщо потрібні, як робимо. Що таке юзер флоу. Як UI виконує функцію UX.

06

UX, прототипи, ресерч, спілкування з клієнтом

Розробимо внутрішні сторінки, поспілкуємось про масштабування дизайну та як підтримувати макет у порядку.

08

Відмальовуємо внутрішні сторінки

Відповідаємо на запитання,
проставляємо бали, даємо фідбек

Перевіряємо всі роботи

09

Figma+. Додаткові можливості

Як розповісти історію на сайті

10

11

Стилі (кольори, текст, інше). Компоненти. Стайлгайд, UI-кіт, ховермап. Показуємо як малювати картку товару. Чекліст плагінів під різні запити.

Що таке сторітелінг. Як правильно подавати інформацію на сайті. Режисура та порядок подачі інформації. Написання тексту на сайт. Важливі блоки на сайтах різних типів.

Фотостоки. Інші ресурси з безкоштовним контентом. Конструктори сайтів. 3д і моушен. Робота з ізорбраженнями: які зображення використовуємо (розмір, зміст). Та багато іншого важливого для дизайнера.

12

Додаткові інструменти дизайнера + Робота із зображеннями

Формат svg. Все про іконки: створення, лайфхаки, візуальна маса.

Відмальовка іконок

13

Співбесіда, як на ній поводитись. Презентація себе клієнту. Як оформлювати портфоліо і продавати себе.

15

Hard і soft скіли

Основні екрани, логіка адаптації сторінок і дизайну під різні екрани. Використання сітки. Елементи і відступи. Паралельна відмальовка мобільної та планшетної версій.

14

Адаптація сторінок

Перевірка другої курсової роботи, відповіді на питання і фідбек. Ми будемо давати правки, а ти – вносити їх та презентувати роботи.

16

Перевіряємо всі роботи

Навіщо і коли користуватись Autolayout та компонентами. Як правильно спланувати свою дизайн-систему та масштабувати проект

Додаткові можливості компонентів та все про autolayout

17

Анімація в Figma та презентація робіт клієнту

Анімація в After Effects. Lottie

18

19

Інтерактивний прототип. Анімуємо картку товару для e-commerce. Презентація дизайна клієнту.

Що то за звір такий і що в ньому можна зробити. Як перенести із Фігми, а також як вставити це потім на сайт

Як зробити розробників справжніми друзями дизайнера та як треба взаємодіяти із командою. Що треба відмалювати, скільки і коли.

20

Передача макетів на розробку

Webflow. Базово про інструмент

21

Дві години — одне завдання на всіх. Це супер складно, але супер скілово. Після батлу відкриваються чакри швидкого, креативного дизайну, але то не точно)

23

А давайте батл?

Як готувати резюме та портфоліо, як пройти співбесіду та написати листа в компанію мрії. А також поговоримо про фріланс-біржі.

22

Пошук роботи

Це фінальна презентація, де ви покажете третю курсову, а ми дамо настанови, куди далі рухатись. Онлайн-обнімашки, вітання)

24

Фінальна презентація

Автори курсу

Подивись, що ми робимо

Залишились питання?

Ми маємо ще багато чого цікавого для тебе: