Курс UX/UI Design

Викладачі онлайн-курсу Web Design в A-Level розробили програму таким чином, щоб у рамках навчання кожен зміг послідовно ознайомитися та навчиться користуватися всіма цими інструментами та сервісами.

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

Модуль 1 - Основи графічного дизайну

Історія дизайну. Брендинг. Айдентика

• Знайомство з фундаментальними подіями і іменами в історії дизайну
• Філософія дизайну
• Розбір термінології в дизайні
• Студенти отримують теми для проєктів
• Додаткова література і фільми

Знайомство із графічним редактором PS. Основні інструменти. Растрові зображення

Знайомство із графічним редактором AI. Основні інструменти. Векторні зображення

Основи композиції. Характер форми. Психологія композиції

• Поняття композиції
• Основні елементи композиції
• Композиційний центр
• Текстури і фактури у композиції
• Що таке гармонія і як її досягти?

Колористика. Основи кольорознавства. Психологія сприйняття кольору. Способи поєднання кольорів

• Основні характеристики кольору
• Способи змішування кольорів. Режими RGB та CMYK
• Способи поєднання кольорів
• Психологія сприйняття кольорів
• Чому ми реагуємо на колір і як підібрати палітру для проєкту?
• Колористичні прогнози і тенденції

Символіка форми. Знаки. Семіотика

• Що таке семіотика і навіщо в ній розбиратися?
• Знак. Види знаків
• Символізм
• Семіотичний аналіз
• Конотація і риторика
• Свідомий підхід до створення зображень

Сітки та пропорції в дизайні. Золотий перетин. Числа Фібоначчі

• Пропорції в дизайні
• Золота пропорція
• Модулор і золотий перетин
• Модульні сітки

Типографіка. Види шрифтів. Шрифтові пари. Стилі шрифтів

• Основи типографіки
• Типи шрифтів
• Параметри набору тексту
• Як поєднувати шрифти в проєктах
• Емоційне забарвлення шрифтів
• Практика в AI

Верстка тексту. Правила оформлення текстових блоків

• Вирівнювання тексту
• Що не можна робити з текстом
• Леттерінг
• Верстка великих масивів тексту

Логотип. Етапи роботи над логотипом

• Принципи створення логотипу
• Етапи роботи над логотипом
• Колір у логотипі
• Практичність і адаптивність у використанні
• Презентація логотипу

Етапи роботи над проєктом. Розвиток ідеї. Референси. Мудборд

• Портфоліо
• Комунікація
• Бриф і ТЗ
• Референси і мудборд
• Етапи роботи над проєктом

Інфографіка. Ілюстрація. Створення персонажів, принтів, патернів

• Що таке інфографіка?
• Види, техніки і стилі. Як не плутати між собою?
• Іконки в дизайні. Правила створення і використання

Друкарська підготовка. Особливості та сфери застосування

• Підготовка макетів до друку
• Ефекти
• Нюанси у роботі з текстом

Брендбук. Гайдлайни. Підготовка до презентації

• Розбір інтерфейсу і можливостей Behance
• Рекомендації для підготовки презентації
• Відмінності між брендбуком і гайдлайнами
• Що таке UI KIT?

Модуль

Модуль 2 - Створення Landing page

Етапи розробки проєктів. Опис етапів розробки проєкту. Що таке прототипування і навіщо воно потрібне?

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

Figma. Початок роботи

• Що таке композиція?
• Елементи композиції
• Основи композиції
• Основні принципи
• Інтерфейс Figma
• Редактор файлів

Що таке Landing Page. Формула AIDA. Прототипи Landing Page

• Landing Page
• Навіщо потрібні цільові сторінки
• Основні блоки цільових сторінок
• Що таке формула AIDA? Як її використовувати
• Як зробити прототип та як зробити хорошу цільову сторінку?

Сітка. Робота з секціями (Обкладинка, Інфо-блоки)

• Що таке сітка і навіщо вона потрібна?
• Види сіток
• Композиція за допомогою сітки
• Ритм
• Інфо-блоки

Робота з запереченнями. Робота з секціями (Блоки переваг та вигод, Блоки довіри, Блок дії. Call to Action та очікування відвідувача)

• Що таке заперечення відвідувача?
• Як з ними працювати?
• Блоки вигоди та переваг
• Блок довіри
• Блок дії

Форми. Що таке форми? Дизайн форм. Валідація

• Що таке форми та навіщо вони потрібні?
• Основні типи форм
• Основні правила роботи з формами

Responsive

• Як створити сітку?
• Розміщення елементів по сітці
• Сітка Bootstrap
• Adaptive чи Responsive
• Як зробити Responsive дизайн

Практика - RESPONSIVE LANDING доопрацювання та оптимізація для респонсив, фінальні доопрацювання.

Теорія по сітках bootstrap та брейкпоінти

Mobile First. Основні правила респонсив дизайну

Модуль

Модуль 3 - Мобільні додатки

Введення в мобільні додатки. iOS vs Android та web app. Що таке гайдлайни? Що таке ретина? Особливості побудови мобільних додатків (скелет екрану). Основні тренди

• Види мобільних додатків
• Що таке iOS та Android?
• Гайдлайни
• Навігація
• Тренди

User flow mobile app. Realtimeboard

• Що таке IA та user-flow
• Які бувають формати
• Що таке Скетч, Wireframes, Прототип
• Паттерни навігацій

Splash screen - перше, що побачить користувач. Що таке splash screen? Його призначення

• Мудборд та референси. Чим вони відрізняються і де їх брати?
• Splash screen. Onboarding
• Екрани та елементи програми
• Дизайн-система (кейси)

Основні стани екранів згідно з виданою темою

• Закони UX-дизайну
• Дизайн-принципи
• Дизайн-система (кейси)

Стан форм, валідація, другорядні екрани

• Активація та залучення
• Які є механіки залучення?

Практика: опрацювання всіх екранів додатків

Практика: порізка іконок, експорт зображень та шрифтів

Практика. Фінальні доопрацювання

Модуль

Модуль 4 - E-commerce

Figma. Робота з компонентами та автолейаутами

Інформаційна архітектура E-Commerce. Що таке архітектура проєкту?

• Що таке IA?
• Для чого потрібна IA?
• Компоненти

UX Сценарії - User Stories UX сценарії, персонажі, мапа сайту, мапа сценаріїв

• Що це і для чого потрібно?
• Які бувають дослідження?
• Як створити персону?
• UX сценарії
• Навіщо потрібна CJM?
• Як побудувати CJM?

Чеклист юзабіліті інтернет магазину. Що таке чеклист юзабіліті для IM? Як його скласти та основні помилки

• Що це таке?
• Основні критерії
• Структура сторінок
• Головна сторінка
• Навігація по сайту
• Пошук по сайту
• Каталог товарів
• Картка товару
• Кошик
• Оформлення замовлення

Картка товару. Що таке картка товару? Правила її побудови

• Для чого потрібна?
• З яких елементів складається?

Категорії та фільтри. Практика категорії та фільтри. Правила їх побудови. Відпрацювання

• Правила побудови
• Категорії та фільтри
• Категорії: для чого потрібні, як працюють
• Фільтри: для чого потрібні, види фільтрів
• Сортування товару: для чого потрібне?

User flow. Розбір та практика кошик та чекаут, stepper. Старт роботи над степпером, оформлення замовлення

• Типи кошиків
• Основні елементи кошику
• Що таке чекаут?
• Як зробити чекаут?

Внутрішні та додаткові сторінки. Стан та валідація форм

• Які внутрішні сторінки бувають?
• Їх призначення

Практика з додаткових модулів. Мега меню, фільтри, соціальні плагіни

• Що таке мегаменю?
• Коли використовується?
• Типи мегаменю

Практика: респонсив для online store

Популярні фреймворки для інтернет-магазинів. Практика

• Популярні фреймворки
• Їх класифікація

Додаткова практика із розбором ДЗ. Робота над помилками

Дипломна робота

Опис

Дипломна робота включає в себе на задану вчителем тему створення власного дизайну інтернет-магазину та додавання його на сторінку Behance у вигляді презентації. Завданням є створити магазин в desktop версії та зробити адаптиви (мобільна версія та планшет). В дипломній роботі присутніми повинні бути 8 обов'язкових сторінок магазину.

Захист дипломної роботи

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

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

• 24 заняття з англійської мови
• Майстер клас по складанню резюме та проходження співбесід
• Консультація з рекрутером та тестова співбесіда
• Супровід до моменту працевлаштування менеджером, закріпленим за групою

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

• Войтенко Іван - Freelancer
• Малихіна Любов - Product Designer
• Романенко Сергій - UI/UX, Web-designer
• Таньпетер Володимир - UI/UX designer
• Кормишева Ольга - UI/UX designer
• Фоміна Олена - Digital designer