Курс UI/UX Design

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

Частина 1. Програма WEB

UI/UX дизайнер та його дизайн-процес

• Чим займається UI/UX дизайнер?
• Що він робить, а що НЕ робить?
• Класифікація інтерфейсів
• Інструменти
• Про що читати та чим надихатися?
• Збираємо та налаштовуємо все необхідне для комфортної роботи

UI елементи. Атомарний дизайн

• Базові компоненти інтерфейсу - як створювати, куди дивитися
• Ознайомлення з Гайдланами Material Design
• Що таке атомарний дизайн та як його застосовувати?

Типові Web-патерни

• Концепція патернів в інтерфейсах
• Навіщо вони потрібні та як їх грамотно застосовувати
• Де дивитися приклади та в кого вчитися
• Патерни ми вивчаємо протягом усього курсу

Сітки та композиція

• Як працюють сітки?
• Розбираємось з ритмами, вагами, видами сіток, компоновок контенту та їх поведінкою

Адаптивний дизайн

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

Колористика в UI

• Як працювати з кольорами в інтерфейсах?
• Палітри, референси, колірні схеми

Типографіка в інтерфейсах

• Стилі тексту у Figma
• Типографічні гайдлайни
• Адаптивна друкарня
• Шрифтові пари
• Розмірності та базис типографічної схеми
• Типографічний ритм

Предпроєктне дослідження та збір даних

• Які питання слід поставити під час першої розмови з клієнтом?
• Без яких документів не можна починати роботу над дизайном?
• Що заповнюєте ви, а що ваш замовник?
• Розбираємо на реальних кейсах

Конкурентний аналіз

Розглянемо методи дослідження ринку, прямих та непрямих конкурентів, навчимося використовувати дизайн-патерни, які вже перевірені відомими компаніями та впровадимо їх у свій інтерфейс.

Створення Landing Page

• Правила створення лендінгів Фоомулу AIDA
• Що потрібно дізнатися щодо його створення

Information Architecture

• Що таке інформаційна архітектура
• Типи інформаційних архітектур
• Як проєктувати інформаційну архітектуру

E-commerce

• Розглянемо 5 типів покупців за N/N Group
• Проєктуємо сторінки E-commerce сайту
• Розставляємо тригери

Дизайн-системи

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

Motion Design

• Які програми можна анімувати інтерфейс?
• Розглянемо як це робити у Figma та Jitter, також проведемо огляд інших програм

Бонус 1: Робота з фріланс-біржами UpWork та Fiverr

• Найскладніше для дизайнера - взяти перший проєкт
• Я привертаю досвідчених фахівців, які розкажуть, як працюють 2 топові біржі та як взяти на них перших клієнтів

Бонус 2: Ведення соцмереж

Одним із найпотужніших джерел ваших майбутніх клієнтів на даному етапі є соцмережі. Ви будете мати всі інструменти, щоб запустити їх і зробити так, щоб кожен ваш потенційний клієнт став реальним. Одним із найпотужніших джерел ваших майбутніх клієнтів на даному етапі є соцмережі. Ви будете мати всі інструменти, щоб запустити їх і зробити так, щоб кожен ваш потенційний клієнт став реальним.

Частина 2. Програма Mobile

Основи мобільних додатків та їх гайдлайни

• Чим відрізняється IOS від Android?
• Які типові елементи інтерфейсу виділяють ці платформи
• Що можна змішувати в кроссплатформі, а що ні? Відповідаємо на всі ці запитання

Ключові паттерни мобільних додатків

• Розбираємось з базовими патернами мобільних додатків
  • Логін та реєстрація
  • Головна сторінка програми
  • Паттерни навігації
  • Error Messages
  • Онбординги та перші екрани входу
  • Каталоги
  • Фільтри та пошукова навігація
  • Чати
  • Календарі та планування графіка
  • Персональна сторінка, профайл

Комунікація з клієнтом, Vision - опитування живого бізнесу

Головне завдання досвідченого дизайнера - зрозуміти, у чому біль реального клієнта та правильно заповнити документацію, щоб не упустити важливі деталі.

Аналіз інтерв'ю з користувачем. Lean Canvas та інші артефакти

• Що робити з інформацією, яку "навалив" вам клієнт?
• Ключові канваси та дескрибація інтерв’ю

Глибинні інтерв'ю

Customer Journey Map або CJM ("Карта подорожі клієнта")

Job Stories

Job Story допомагають зібрати важливу інформацію про потреби людей та передати її різним членам команди, не втративши суті.

Формування списка фіч продукту

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

User Flow - будуємо наш додаток

High fidelity prototypes

Тестування мобільного додатку

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

Концептування мобільного додатку

Вибір візуального стилю та створення концепту ключових екранів мобільного додатка.

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

Створення дизайн-системи для всього проєкту.

Створення дизайну всього мобільного додатка

За наявності опрацьованих кроків усі попередні стадії завдання полягає лише в розмноженні дизайну на прототипи решти сторінок.

Додаткові артефакти: іконка додатку та екрани для апстору

Дизайнер повинен вміти супроводжувати продукт на всіх стадіях його розробки, впрот до випуску в продакшн.

Особливості курсу

• 96 годин колективних занять
• 24 години індивідуального консультування
• Понад 10 реальних кейсів
• Online формат

Викладачі курсу

Марія Кострова - Senior UI/UX designer