Курс Web Design Pro

Курс Web Design Pro - це комплексна програма, завдяки якій ви не тільки дізнаєтеся про UX/UI, але й на практиці навчитеся всього, що має знати вебдизайнер. Саме цей фахівець створює концепцію для майбутнього сайту або додатка, вигадує структуру та переходи на сторінки відповідно до логіки користувача та потреб замовника.

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

Вступ

• Знайомство. Вступ до курсу
• Поняття: дизайн, інтерфейс, UX, UI, Product Designer
• Роль UX/UI дизайнера в проєкті
• Етапи розробки проєкту

Інструменти дизайнера

• Огляд інструментів. Figma, Miro, Balsamiq, Notion, After Effects та інші
• Методи пришвидшення роботи у Figma
• Плагіни та ресурси. Figma Community
• Порядок та структурування документа

Цифрові продукти і їхнє просування

• Що таке цифровий продукт?
• Види цифрових продуктів
• SEO (основи пошукової оптимізації)
• SMM (основи просування в соцмережах)
• Контекстна реклама

UX-дослідження й архітектура

• UX-стратегія
• Юзабіліті та аксесебіліті
• Брифінг
• Діалог із замовником
• Постановка завдань, цілей та бізнес вимоги
• Конкурентний аналіз
• Візуальний аналіз
• Опитування ЦА
• Jobs to be done (JTBD). JTBD interview. Job Story
• Персони, Карта емпатії, User Stories
• Customer Journey Map
• Модель Кано
• User Flow
• Структура проєкту
• UX-копірайтинг

Де шукати натхнення

• Мудборд
• Ресурси для натхнення, розвиток "гостроти ока", тренди
• Методи генерування ідей

Дизайн системи та UI-кіти

• Особливості застосування та відмінності
• Компоненти. Навігація, елементи, блоки
• Огляд UI kit для iOS/Android
• Плагіни та лайфхаки

UI-концепція

• Підходи Mobile First / Desktop First
• Скетчинг, Warframing, Прототипування
• Модульні сітки. Анатомія. Види сіток
• Іконки в інтерфейсах, стиль та формати
• Фото та ілюстрації - технічні вимоги, тренди, корисні ресурси
• Шрифти. Де шукати? Як поєднувати?
• Типографія. Робимо текст зручним для читання
• Композиція. Візуальна ієрархія, теорія близькості та інші прийоми
• Кольори. Як вибирати? Інструменти, ресурси
• Адаптивний дизайн
• Auto Layout

Гайдлайни

• Як їх застосовувати?
• Огляд гайдлайнів для Android, iOS
• Огляд Material Design
• Огляд Fluent Design Guidelines

Основи анімації

• Основи UI-анімації
• Анімація інтерфейсу/іконок/ілюстрацій у Figma
• Анімація інтерфейсу/іконок/ілюстрацій в After Effects

Аналітика

• Google Analytics
• Hotjar

Тестування

• Сценарії для тестування
• Складання гіпотез для покращення інтерфейсу
• Юзабіліті тестування
• А/В тестування

Передавання макетів у розробку

• Обов'язкові елементи
• Особливості передачі сайтів та додатків розробникам

Портфоліо. Публікація кейсу на Behance

• Особливості різних ресурсів
• Як оформляти кейси?
• Часті помилки та лайфхаки

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

• Підтримка ментора
• Проєкт в портфоліо
• Сертифікат про проходження курсу