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

Идет набор на курс!
Срок обучения
4 місяці, 32 заняття, 74 години
Стоимость:
Стоимость за весь курс
13 200 грн.
Описание
Курс веб дизайну UX / UI DESIGN (FIGMA) + PROTOTYPING. Я так бачу!

На курсі ти навчишся працювати з Figma – безкоштовною та суперкрутою програмою, яка використовується фахівцями з веб-дизайну в усьому світі. Якщо ти досі використовуєш Photoshop, ми чекаємо саме тебе.

Веб-дизайнер – це фахівець, який повинен “продати” кінцевому споживачеві товар або послугу за допомогою створеного інтерфейсу. Люди часто тільки на основі дизайну сайту приймають рішення про покупку, і саме веб-дизайнер повинен максимально відповідально підходити до своєї роботи.

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

Після курсу ви зможете впевнено використовувати Figma, працювати з замовником, застосовувати різні стилі, розробляти концепцію сайту, презентувати проект, готувати макет для верстальника.

Викладач: Ольга Макарова

  • UX/UI designer
  • 4+ роки комерційного досвіду (Digital агенції, продуктові компанії, фріланс, стартапи);
  • Розробляла дизайн інтернет-магазинів, B2B-сервіси, беттингові системи;
  • Працювала із клієнтами з усього світу.
Дни недели занятий на выбор
Время занятий на выбор
Занятий в неделю
Длительность занятия
Часы занятий
Группы
Возраст аудитории Студенты, Взрослые
Вид подготовки Базовый курс
Город Киев
Преподаватель специалист-практик
Учебные материалы
Пробное занятие
Документ об окончании Сертифікат
Опции Групповые занятия
Трудоустройство Нет
Условия трудоустройства

Запись на курс

Пользователи
Select people to associate with this registration.
This registration is for
Select person
Person type
New Контакт

Программа обучения

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

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

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

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

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

Курс проводитLemon.School, Онлайн курси
Адрес:
  • м. Харків