Курси Web Design / UI/UX

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

Частина 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

З нуля навчишся створювати інтерфейси, які вирішують завдання бізнесу. Пройдеш всі етапи розробки дизайну продукту. Опануєш web- і Mobile дизайн, проєктування та UX-аналітику.

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

Знайомство з професією Web UI/UX дизайнер

• Знайомство
• Дизайн та всі його галузі
• Практичний майстер-клас із закріплення всіх інструментів

Знайомство з Figma

• Знайомство з Фігмою та інтерфейсом
• Знайомство з базовими інструментами

Композиція

• Навіщо потрібна композиція
• Типи композиції
• Інструменти композиції
• Як розвивати навички композиції

Колористика (+стилі)

• Що таке колір і як він сприймається
• Основні терміни та правила в колористиці
• Поєднання кольорів
• Стилі у Figma

Типографіка (+стилі)

• Класифікація шрифтів
• Анатомія шрифту
• Інтервали
• Правила типографіки
• Ієрархія

Елементи (промальовування, компоненти)

• Кнопки
• Віджети
• Навігація

Photoshop (Растрова підготовка)

• Основи, інструменти та функціонал Фотошопу
• Ретуш фотографії
• Обрізання фону у фотографії
• Колажі, пензли, ефекти, вау-ефекти

Illustrator (Векторна підготовка)

• Основи, інструменти та функціонал Ілюстратора, як працювати
• Пайплайн розробки власного сету іконок
• Ілюстрація у флет (+пензлі), аксонометрія
• Ефекти тексту, патерни, векторне оформлення сайтів

Банери у Photoshop

• Що таке? Для чого? Приклади
• Типи застосування банерної реклами та їх особливості
• З чого може складатися банер? Обов'язкові та необов'язкові елементи
• Практичний майстер-клас "Банер у Figmа"
• Ресайз банерів

Оформлення соц.мереж

• Оформлення соціальної мережі Youtube
• Оформлення соціальної мережі Facebook
• Оформлення соціальної мережі Instagram (як працює інсталендинг)
• Оформлення власних профілів Linkedin та Behance

Лендінг + Поглиблена фігма

• Плагіни
• Стилі
• Компоненти
• Сітка
• UI Kit
• Сonstrains
• Конкурентний, крос аналіз, ЦА, портрети
• Майстер-клас "Лендінг у фігмі з усіма новими знаннями"
• Введення в прототипування (клікабельні кнопки)

Адаптивка + Оформлення на беханс

• Види Адаптивки
• Майстер-клас "Планшетна версія"
• Майстер-клас "Мобільна версія (+спеціальні плагіни)"
• Мокапи та як з ними працювати
• Майстер-клас "Оформлення на Бехансі"

Редизайн сайту

• Аудит сайту
• Складання опитування користувачів
• Аналіз конкурентів та кросов
• Складання картки сайту
• Складання та портрет користувальницької аудиторії та їх шляхів користування сайтом
• Майстер клас редизайну сайту на основі аналізу
• Написання висновку, таблиць опитувань, графіків, оформлення на беханс

Персональний сайт

• Що це й навіщо. Приклади
• Сторінки, необхідні для сайту (+складання приблизної карти сайту)
• Складові та необхідні компоненти кожної сторінки, дод. елементи

Інформаційний сайт

• Що це й навіщо. Приклади
• Сторінки, необхідні для сайту (+складання приблизної карти сайту)
• Складові та необхідні компоненти кожної сторінки, також дод. елементи
• Екрани входу реєстрації, віджети, особистий кабінет, повідомлення, налаштування профілю (лайт варіант)

Корпоративний сайт

• Що це й навіщо. Приклади
• Сторінки, необхідні для сайту (+складання приблизної карти сайту)
• Складові та необхідні компоненти кожної сторінки, також дод. елементи
• Екрани входу реєстрації, віджети, особистий кабінет, повідомлення, налаштування профілю (лайт варіант)

Інтернет-магазин

• Що це й навіщо. Приклади
• Сторінки, необхідні для сайту (+складання приблизної карти сайту)
• Складові та необхідні компоненти кожної сторінки, також дод. елементи
• Екрани входу реєстрації, віджети, особистий кабінет, повідомлення, налаштування профілю (лайт варіант)

Бонусний блок: Створення логотипу

• Типи логотипу
• Пайплайн створення логотипу
• Подання логотипу

Після курсу ти зможеш:

• Розробляти адаптивні дизайн-макети для веб-сайтів та мобільних інтерфейсів
• Розробляти кросплатформні нестандартні рішення для створення унікального продукту
• Працювати з композицією, шрифтами та друкаркою при розробці інтерфейсу, з використанням принципів каліграфії
• Визначати цілі проєкту, формувати його завдання та підбирати інструменти для створення прототипу конкретного проєкту
• Працювати з гайдлайнами iOS та Android, створювати інтерактивні прототипи та проводити їх юзабіліті-тестування
• Упаковувати та презентувати свій проект замовнику, а також наповнити власне портфоліо

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

• Інтенсивна практика і розбір домашніх завдань
• Поетапна розробка дизайну продукту відповідно до вимог замовника
• 4 гідні проєкти в портфоліо для старту кар'єри
• Допомога у працевлаштуванні, оформленні резюме та підготовка до співбесіди
• Підтримка викладачів
• Кар'єрні івенти
• Можлива оплата частинами

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

Катерина Яковішена - працює 4 роки у веб-дизайні

Ви дізнаєтеся, що таке UX-дизайн, яку роль в його розробці відіграють дослідження, які види досліджень бувають і на яких етапах розробки цифрових продуктів їх доцільно проводити.

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

Головне про UX-дослідження

• Що таке досвід взаємодії (UX)
• Ключова мета UX-дизайнера
• Як і навіщо досліджують досвід взаємодії
• Гіпотези та експеременти в UX
• Ключові предмети та теми UX-досліджень
• Етапи UX-досліджень та їхні задачі

Типи UX-досліджень

• Дослідження очікувань та дослідження поведінки
• Кількісні та якісні дослідження

Огляд методів UX-досліджень та їхніх задач

• Методи та інструменти UX-досліджень
• Як навчитись проводити UX-дослідження

Після проходження курсу ви зможете:

• Розуміти етапи UX-досліджень та їхні задачі
• Познайомитися з різними темами та предметами UX-досліджень
• Розрізняти різні типи UX-досліджень
• Орієнтуватися в ключових методах UX-досліджень
• Оцінювати доцільність використання різних методів дослідження
• Розпочати поглиблене вивчення UX-дизайну

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

• Стартуй будь-коли та навчайся у власному темпі
• Теоретичні модулі
• Знання про види досліджень
• Додаткові матеріали
• Цифровий сертифікат
• Підтримка від спільноти студентів
• Служба підтримки CASES

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

Анатолій Попель - Засновник та керівник платформи Creative Practice

Ви навчитеся проєктувати, створювати та запускати адаптивні сайти у візуальному редакторі. Ці уроки дадуть вам уявлення про інтерфейс, основні елементи конструктора і найкращі практики створення сайтів. Опанувавши його, ви зможете швидко і якісно створювати сайти під ключ самостійно або в команді.

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

Теми:

• Початок роботи
• Веб-структура
• Основні елементи
• Компоненти
• Основи стилізації
• Розмітка
• Адаптивний дизайн
• Основні поняття взаємодії
• CMS і динамічний вміст
• Колекції полів CMS

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

• Самостійне онлайн навчання у власному темпі
• Стартуй навчання у будь-який момент
• Керс англійською мовою але є субтитри
• Тільки теорія

Курс присвячений практичним аспектам роботи з редактором Webflow та створенню простих посадкових сторінок з його допомогою.

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

Знайомство з інтерфейсом

• Вступ до курсу
• Знайомство з інтерфейсом Webflow
• Webflow проти інших онлайн-конструкторів

Створення розмітки

• HTML-розмітка у Webflow
• Розмітка сторінки в Webflow (HTML-частина) та робота з блоками DIV
• Робота з текстом в Webflow
• Робота з зображеннями та компонентами
• Створення навігації

Створення розмітки сторінки

Створення розмітки невеликої посадкової сторінки.

Підключення стилів

• Панель стилів у Webflow
• Робота з селекторами
• Робота з версткою тексту
• Робота з тлом, обведенням та ефектами
• Анімації у Webflow та їхні типи

Підключення стилів

Підключення стилів та додавання на сторінку візуального оформлення.

Адаптивна верстка

• Робота з точками перебудови (breakpoints)
• Робота з класами в адаптивному дизайні
• Особливості створення адаптивного сайту
• Анімація на мобільних пристроях

Створення адаптивної версії сторінки

Створення адаптивної версії дизайн посадкової сторінки.

Публікація сайту

• Мета-інформація та інші додаткові елементи сайту
• Базова робота із інспектором коду
• Робота з доменом та хостингом

Підготовка сайту до публікації

Публікація готового сайту на Webflow

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

• За попередньою підпискою стартуй навчання в будь-який момент
• Самостійне навчання онлайн у власному темпі
• Сертифікат після проходження курсу
• Бажано мати знання роботи з Figma для проходження курсу

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

Антон Лукащук - дизайнер цифрових продуктів та партнер в HAPPY Design studio, експерт Креативної Практики

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

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

Робота з базовими фігурами та ефектами

Знайомство з інтерфейсом, робота з базовими фігурами та ефектами, застосування булевих операцій, експорт робіт.

Основи малювання пером

Створення контурів за допомогою інструментів перо та олівець.

Фотографії, маски та режими накладання

Як працювати із зображенням та масками, для чого потрібні режими накладання.

Після проходження курсу ви зможете:

• Вільно орієнтуватися в інтерфейсі та навігації Figma
• Працювати з інструментами створення макетів
• Створювати прості фігури у Figma
• Налаштовувати вигляд об'єктів у макеті
• Застосовувати логічні операції
• Ефективно організовувати елементи у Figma

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

• Практичні завдання
• Перевірка домашніх робіт
• Отримання сертифіката
• Підтримка від спільноти студентів
• Додаткові матеріали
• Служба підтримки CASES

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

Марія Ланова - графічна дизайнерка та ілюстраторка в CASES, експертка Креативної Практики

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

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

Що таке інтерфейси та як їх створюють

• Що таке інтерфейс
• Коротка історія графічних інтерфейсів
• Огляд процесу створення інтерфейсів

UX-дослідження

Аналіз користувацького сценарію застосунку.

Дослідження користувацького досвіду (UX-дослідження)

• Ключові складові проєктування інтерфейсу
• Гіпотези, експеременти та розуміння
• Профілі користувачів (UX-персони)
• Способи дослідження користувацького досвіду

Створення схематичних екранів застосунку

Створення схематичних екранів застосунку та користувацького сценарію.

Проєктування інтерфейсу (UX-дизайн)

• Логічна карта проєкту
• Користувацький сценарій
• Схематичний прототип
• Раннє тестування
• Пояснювальна записка

Сценарій взаємодії

Створення сценарію взаємодії застосунку.

Дизайн інтерфейсів (UI-дизайн)

• Анатомія інтерфейсу
• Типові пристрої для інтерфейсів та їх відмінності
• Базова дизайн-система для інтерфейсу

Створення макетів застосунку

Створення макетів для екранів вашого застосунку.

Зручність інтерфейсів

• Головне про зручність інтерфейсів
• Комфортні тексти
• Комфортна колірна палітра
• Тестування як засіб забезпечення зручності

Інтерактивний прототип застосунку

Розробка інтерактивного прототипу, використовуючи макети вашого застосунку.

Після проходження курсу ви зможете:

• Досліджувати досвід взаємодії
• Аналізувати інтерфейси
• Розробляти схематичні екрани застосунку
• Створювати сценарій взаємодії
• Створювати макети застосунку
• Створювати інтерактивний прототип застосунку

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

• Перевірка домашніх робіт
• Теоретичні й практичні модулі
• Додаткові матеріали
• Цифровий сертифікат
• Підтримка від спільноти студентів
• Служба підтримки CASES

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

Анатолій Попель - Засновник та керівник платформи Creative Practice

Ви познайомитеся з можливостями нейромережі Midjourney та зрозумієте, як досягти від штучного інтелекту потрібного результату.

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

Налаштування мережі Midjourney

• Що таке Midjourney та як вона може допомагати дизайнеру
• Реєстрація в Discord та Midjourney
• Генерація картинок і корисні команди
• Галарея Midjourney
• Платні пакети Midjourney

Як налаштувати потрібний Prompt

• Що таке промпт
• Як налаштувати промпт, що дасть потрібний результат
• Маркери промпту
• Розділення маркерів
• Сервіси для генерації промптів

Стилі

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

Команди

• Що таке команди та як вони можуть пришвидшити роботу з Midjourney
• Марні команди
• Корисні команди
• Корисні функції
• Як довести генерації до ідеалу

Midjourney у взаємодії з іншими нейромережами

Аналоги та замінники Midjourney:

• DALL-E, Leonardo, Kandinsky, Stable Diffusion
• Нейромережі для генерації відео, звуку, тексту
• Дипфейки в Midjourney
• Adobe Firefly та Drag You GAN

Після проходження курсу ви зможете:

• Налаштовувати підсказки (промпти)
• Генерувати зображення в Midjourney
• Створення генерації в різних стилях
• Пришвидшувати роботу з нейромережами
• Покращувати якість генерації
• Розумітися на альтернативах Midjourney

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

• Стартуй у будь-який момент та навчайся у власному темпі
• Практичні модулі
• Перевірка домашніх робіт
• Додаткові матеріали
• Цифровий сертифікат після проходження курсу
• Підтримка від спільноти студентів
• Служба підтримки CASES

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

Володимир Чернер - CEO New Strategies Group

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

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

Огляд галузі вебдизайну

• Вступ у поняття вебдизайну
• Історія виникнення інтернету
• Історія розвитку вебдизайну
• Типи вебсайтів
• Типи фахівців та організацій, що працюють з сайтами

Анатомія вебсайтів

• Текстові елементи
• Списки у вебсайтах
• Форми
• Навігація
• Інтерактивні елементи

Кросплатформність вебсайтів

• Адаптивний дизайн
• Відмінності та настільні версії сайтів
• Стратегії розробки вебсайту

Ключові принципи зручності вебсайтів

• Головне про зручність
• Закони композиції та закони гештальту в вебдизайні
• Відгук вебсайтів
• Принципи зручності у роботі з текстами
• Принципи зручності у роботі з кольором

Базові елементи вебсайту

Створення простого набору інтерфейсних елементів вебсайтів (UI Kit).

Форма замовлення для вебсайту

Створення форми замовлення з декількох кроків, екрану кошика та листа.

Адаптивний головний екран та меню

Створення 7 версій екрана посадкової сторінки для різних пристроїв.

Макет посадкової сторінки

Створення настільного та мобільного представлення посадкової сторінки.

Інтерактивний прототип

Створення інтерактивного прототипу з викликом модальних вікон та покроковим замовленням.

Після проходження курсу ви зможете:

• Розумітися на анатомії вебсайтів
• Розробляти прості інтерфейсні елементи
• Створювати адаптивний дизайн
• Використовувати принципи зручності вебсайтів
• Розробляти макети посадкової сторінки
• Створювати інтерактивні прототипи

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

• Починай навчання будь-коли і вчись у власному темпі
• Перевірка домашніх робіт
• Підтримка від спільноти студентів
• Служба підтримки CASES
• Цифровий сертифікат після проходження курсу