Введення у дизайн
- Познайомимося, поговоримо про те, що таке 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.
- Отримуємо фідбек за своїми домашніми завданнями.
- Аналізуємо проекти одногрупників під керівництвом викладача.
- Тренуємо надивленність, формуємо критерії успішних проектів.
Резюме дизайнера
- Приклади вдалих резюме дизайнера.
- Що треба писати, чого уникати.
- Як складати резюме новачкові і куди подаватися.
- Починаємо працювати над дизайном резюме.
Захист фінального проекту.
