Курс Основи Web дизайну

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

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

Вступ до UI/UX Design

• Знайомство
• UI/UX Design
• Принципи юзабіліті
• Професія дизайнера
• Soft skills
• Tech skills
• Класифікація сайтів

Основи роботи у Figma

• Фрейм
• Робота з зображеннями
• Робота з лініями
• Робота з масками
• Робота з міжрядковою відстанню
• Робота з текстом
• Робота з формою
• Компоненти
• Auto layout

Основи дизайн мислення

• Етапи дизайн-мислення
• UX стратегія
• Usability & Accessibility
• Визначення витрат на взаємодію
• 10 евристик Якоба Нільсена
• Закон Теслера
• Айтрекінг
• Закон Міллера
• Закон Хіка
• Закон Фіттса
• Лендінг
• Конструктори сайтів
• Правила сприйняття інформації. Патерни

UX дослідження та архітектура (part 1)

• Цикл розробки інтерфейсу
• Road Map
• User Persona
• Empathy map
• Методи UX досліджень
• Брифінг
• Double Diamond
• Психологія користувача в рамках інтерфейсу
• Юзабіліті аудит
• Практика

UX дослідження та архітектура (part 2)

• Інформаційна архітектура та її принципи
• Навігаційні та пошукові системи
• Mind Map
• Знайомство з User Flow
• FigJam

UX дослідження та архітектура (part 3)

• Use Case
• User Scenario
• UCD
• JTBD
• Модель Кано
• Композиція
• Патерни нейрофізіології
• Сітки
• Правило "Зовнішнього-внутрішнього"

Типографіка

• Основи типографіки
• Швейцарська типографіка
• Класифікація шрифтів
• Комбінація шрифтів
• Типографіка IOS & Android
• Експериментальна типографіка
• Контурні шрифти
• Велика типографіка
• Надписи від руки, текст навколо фігури
• Накладення фото на текст
• Видима сітка
• Монохром/Бруталізм/Текстури/Плоский дизайн

Теорія кольору (part 1)

• Теорія кольору
• Психологія кольору
• Колірні схеми
• Практика

Теорія кольору (part 2)

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

Основні компоненти сайтів

• MVP
• Типи навігації
• Принципи навігації
• Функціональні блоки
• Контентні блоки
• Слайдер
• Карточки
• Список
• Форми
• Фільтри/сортування
• Поп-ап
• Footer
• Елементи інтерфейсу
• Чекбокси / Радіобатони / Toggle / Controls
• Notifications

e-Commerce. Структура сайту

• e-Commerce
• Структура сайту
• Принципи візуального дизайну
• Sketching
• Короткотривала пам'ять та юзабіліті
• Формати графічних файлів у вебдизайні

Розробка CJM

• Принципи Гештальту
• User Flow для e-Commerce
• Створення CJM

Ефективна сторінка продукту

• Закріплення матеріалу на практиці
• Ефективна сторінка продукту
• Цілі продуктової сторінки
• Аналіз сторінок
• Практика (візуальні вправи)

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

• Айдентика
• Колірний профіль
• UX-копірайтинг
• Передача макетів в розробку

Методології

• Оцінка складності проєкта
• Типи клієнтів
• Типи контрактів
• Agile
• Waterfall
• Scrum
• Kanban
• Jira
• Confluence
• BackLog
• Планінг-покер
• Ретроспектива

Гайдлайни та документація

• Style Guidе
• Design System
• Підбір корисних посилань на різні сервіси
• Атомарний дизайн
• Дизайн-токени
• Темний режим
• Деталі при розробці
• Знайомство з HTML & CSS

Акцентування. Дизайн-система. UI-Kit

• Базовий стиль
• Анатомія стилю
• Візуальна логіка
• Основні принципи логіки
• Робоча пам'ять
• Способи акцентування
• Система. Аналіз системи
• UI-Kit
• Розвиток надивленості

Тестування. Анімація Parallax

• Тестування юзабіліті
• Методи юзабіліті-тестування
• Перевірка ідеї. Quick Usability Checks
• Parallax ефект
• Базові інтерактивні анімації
• Механіка анімацій
• Хореографія анімацій

Responsive & Adaptive дизайн

• Responsive
• Adaptive
• Breakpoints
• Мудборди
• Mobile First
• Desktop First

Особливості мобільної розробки

• Процес розробки мобільного застосунку
• Область натискання
• Розташування елементів
• Історія
• Версії
• Вимоги до сітки
• Відстані
• Розміри елементів & Сторінка 404
• Сенсорний екран
• Breakpoints
• Brainstorming

Behance

• Підготовка кейсу на Behance
• Критерії успішного оформлення кейсів
• Розбір прикладів
• Складання структури макетів
• Підготовка анімацій

Працевлаштування

• Процес проходження співбесід
• Запитання на співбесідах
• Важливі запитання до рекрутера, які варто задати
• Платформи для пошуку роботи
• Фріланс: плюси та мінуси
• CV
• Розбір прикладів

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

• Заняття в режимі онлайн-трансляції
• Доступ до матеріалів в особистому кабінеті після закінчення навчання
• Навчання зосереджене на практиці
• Сертифікат після успішного закінчення навчання
• До шостого заняття ви можете повернути 100% внесених за навчання коштів
• В кінці курсу виконується дипломний проєкт

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

• Валерія Хайрова - UI/UX Designer at Allergo
• Юлія Жуковська - UI/UX Designer at Sendor Holdings Limited
• Антоніна Сивак - UI/UX Designer
• Олена Кришталь - UI/UX Designer
• Альона Ляшенко - UI/UX Designer at Linkos Group
• Таісія Квітка - UI/UX Designer at Ecosoft
• Джастіна Нипорко - UI/UX Designer at Sendor Holdings Limited
• Ганна Тищенко - Freelance UI/UX and Marketing Designer at SimplyDepo
• Аліна Ахмедова - Product Designer at Vodafone
• Анастасія Мирошниченко - UX/UI (Product) Designer at Luxoft
• Юля Казнєвська - Design Team Lead at Paint Digital
• Яна Моргун - Product Designer at Slotegrator