Курс веб дизайну UX / UI DESIGN (FIGMA) + PROTOTYPING. Я так бачу!

Введення у дизайн

• Познайомимося, поговоримо про те, що таке UX\UI дизайн, UX vs UI: у чому різниця
• Хто такий UX\UI дизайнер і що він має вміти?
• Варіанти роботи UX\UI дизайнером та розвитку кар’єри: плюси та мінуси
• Обговоримо вдалі та невдалі приклади сайтів
• Зареєструємось на beehance та dribble”

Figma Start, основи роботи із програмою

• Чому фігма? Переваги інструменту
• Створимо команду для спільної роботи над дизайн-проектом
• Базовий інструментарій, знайомство з інтерфейсом Figma
• Сплануємо по етапах роботу над підсумковими проектами для портфоліо. Проведемо дослідження джерел.
• Почнемо роботу над першим проектом для портфоліо дизайнера

Figma: разом малюємо лендінг

• Як дизайнер підходить до проектування сайту?
• Основні блоки посадкової сторінки та правила їх розміщення: логотип, заголовки, категорії, іконки, зображення тощо.
• Вивчимо та намалюємо елементи різного типу: покрокові інструкції
• За підтримки ментора створимо першу сторінку сайту
• Зберемо moodboard для своїх проектів

Тренди дизайну, деталізація макета

• Дизайн-тренди. Порівняємо скевоморфізм, FLAT, material, бруталізм, isometric, glass morphism
• Подивимося різні стилістичні прийоми: білий простір, нестандартна сітка, градієнт, акцент на типографіку, 3D, grunge, реалізм тощо.
• Як вибрати стиль для конкретного проекту?
• Як стежити за трендами дизайнеру-початківцю?
• Деталізація макета: від scetch-малюнок через wireframe до реалізації
• Різні рівні промальовування дизайн-проектів: коли і що краще використовувати. Мокап чи прототип: що показати замовнику?
• Метод Франкейштейна у дизайні: не так страшно, як звучить

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Типографіка, шрифтові пари, верстка тексту

• Введення у типографіку. Основні поняття, які важливо знати дизайнеру UX\UI: інтерліньяж, kerning, serif і т.д.
• Критерії вибору шрифту та інших параметрів тексту
• Дізнаємося, з чого складаються шрифти, які є правила верстки тексту, як створюється шрифтова ієрархія
• Використовуємо калькулятор для визначення розміру шрифту
• Обговорюємо можливості та обмеження використання різних шрифтів

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Введення в композицію та робота з простором

• Що таке композиція та навіщо вона потрібна? Відмінності динамічної та статичної композиції
• Підбираємо якірні об’єкти для привернення уваги
• Вивчаємо системи відступів, роботу з об’єктами
• Закон Фіттса, закон Хікса, закон Якобса, закон загального поля, закон схожості, принцип бритви Оккама, правило «мікро та макро», правило «внутрішнього та зовнішнього» у дизайні
• Створюємо ритм та вибудовуємо ієрархію сайту за рахунок композиції

Зображення та графіка для інтерфейсів

• Як правильно підібрані зображення, іконки та ілюстрації допомагають передати настрій продукту
• Зображення, які привертають увагу
• Джерела пошуку зображень у роботі дизайнера

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Сітки: колонні, модульні, колажні

• Навіщо дизайнеру потрібні сітки, які вони бувають, з яких елементів складаються, як використовуються
• Вивчаємо мікромодульність
• Визначаємо кроки під час вибору сітки

Колір у дизайні інтерфейсів

• Колір як один із інструментів створення правильної ієрархії в інтерфейсах
• Колірні моделі: CMYK, HEХ, колірне коло
• Психологія сприйняття кольору
• Лайфхакі вибору правильної колірної схеми: дізнаємося, як і коли потрібно додавати колір

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Адаптив: мобільна версія сайту

• У сучасному світі обов’язково враховуються користувачі мобільних інтерфейсів, адже люди частіше відвідують сайти саме з гаджетів, що носяться.
• Плюси та мінуси чуйного дизайну
• Як перебудовуються блоки з робочого столу на мобайл: кілька моделей
• Під керівництвом викладача адаптуємо сайт під мобільну версію

Дизайн патерни, кнопки, форми, навігація

• На занятті ми дізнаємось, як створювати інтерактивні елементи
• Вивчимо елементи управління та навігації: види та стани кнопок, проектування форм зворотного зв’язку, календарі, меню та навігація

Figma: створення складних сторінок

• Створюємо складні сторінок з формами з використанням компонентів, варіантів та стилів
• Познайомимося з auto-layout, як створювати компоненти та варіанти

Резюме та портфоліо дизайнера, питання на співбесіді

• Складемо список ідей, де брати проекти для портфоліо
• Заведемо та почнемо заповнювати профіль дизайнера на LinkedIn
• Дізнаємося, що питатимуть на співбесіді і як до неї підготується
• Навчимося працювати із замовниками безпосередньо
• Сформуємо план кар’єрного розвитку після закінчення курсу

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Типи сайтів: landing-page, сайт-портфоліо, інтернет-магазин та ін.

• Основні елементи Інтернет-магазину: картки товарів, каталог, кошик, навігація та ін.
• Починаємо роботу над другим проектом для свого портфоліо (Інтернет-магазин)

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Проектування мобільних додатків: старт проекту

• Етапи роботи над мобільним додатком.
• Розробка концепції, ресерч (дослідження).

Основи дизайн-мислення. UX-стратегія

• Робота з брифом: mind mapping та інформаційна архітектура. Визначення та особливості Цільової аудиторії.
• Метод персон

UX-дослідження: аналіз конкурентів персони та карти емпатії .Customer journey map та User flow

• Сustomer Journey Map.
• Юзер флоу (User Flow).

Менторська сесія

Прототипування: елементи сайту та скетчинг. Прототипування: wireframing

Дизайн мобільного додатку

• Проектування дизайну мобільних додатків зі застосуванням гайдлайнів під iOs/Android

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

• Як дизайн перетворюється на код?
• Готуємо макет для передачі розробнику
• Знайомимося з панеллю розробника
• Вивчаємо основи верстки
• Що верстальнику потрібно для комфортної роботи
• Підтримка відносин із клієнтами

Менторська сесія

• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо нагляд, формуємо критерії успішних проектів

Робота у Photoshop: базовий інструментарій програми

• Знайомимося з новим інструментом
• Як видаляти фон біля об’єктів
• Як прибирати непотрібні об’єкти з зображень
• Працюємо над зображеннями для своїх проектів у портфоліо

Figma: практикум зі створення ілюстрацій

• Як самостійно намалювати іконки та інші зображення
• Практикуємося малювати у Figma

Менторська сесія

• Відслідковуємо прогрес проектів, оцінюємо кейс на Behance.
• Отримуємо фідбек за своїми домашніми завданнями.
• Аналізуємо проекти одногрупників під керівництвом викладача.
• Тренуємо надивленність, формуємо критерії успішних проектів.

Резюме дизайнера

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

Захист фінального проекту.