Курсы Web Design / UI/UX

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

Модуль 1. Інтерв'ю з бізнесом та формування продуктових гіпотез

• Бриф клієнта та його аналіз
• Яку проблему має бізнес
• Для кого бізнес створює продукт
• Наскільки цей бізнес зрілий
• Як бізнес заробляє гроші
• Як бізнес конкурує на ринку
• Яких результатів бізнес очікує досягти
• Підготовка до інтерв'ю зі стейкхолдером
• Продуктова гіпотеза
• Шаблон для аналізу продуктового брифу
• Шаблон плану перевірки гіпотез
• Шаблон Lean UX Canvas в FigJam та Miro (українською)
• Картка воркшопу Lean UX Canvas
• Тест до модуля

Модуль 2. Аналіз потреб користувачів

• Як цифрова трансформація змінює взаємодію з користувачами
• Компактний метод Jobs to be Done
• Що варто знати про персону
• Ціннісна пропозиція та "знеболювальне"
• Як шукати користувачів
• Шаблон завдань користувача згідно з методологією Jobs to be Done
• Шаблон прото-персони
• Шаблон канви ціннісної пропозиції в Miro та FigJam (українською)
• Картка воркшопу ціннісної пропозиції
• Тест до модуля

Модуль 3. Аналіз глибинних інтерв'ю

• Місце продукту в житті користувача
• Ментальна модель
• Аналіз якісних даних
• Побудова ментальної моделі
• Чек-лист перед проведенням інтерв’ю
• Список порад для аналізу відповідей респондентів
• Картка воркшопу ментальної моделі
• Тест до модуля

Модуль 4. Моделювання користувацького шляху

• Всюди воронки
• Сценарії в моделюванні користувацького досвіду
• Мапа користувацького шляху (CJM) та креслення сервісу (Service Blueprint)
• Продуктові метрики
• Шаблон мапи шляху користувача (CJM) в Miro FigJam (українською)
• Картка воркшопу CJM
• Тест до модуля

Модуль 5. Аналіз конкурентів

• Що таке конкуренція
• Конкурентна перевага
• Як аналізувати конкурентів
• Аналіз конкурентів на практиці
• Шаблон для категоризації конкурентів
• Шаблон таблиці для аналізу конкурентів
• Картка воршопу по аналізу конкурентів
• Тест до модуля

Модуль 6. Продуктовий експеримент

• Типи продуктових експериментів
• Типи прототипів
• Дизайн складних продуктів
• Картка продуктового експерименту
• Тест до модуля

Модуль 7. Аналіз результатів тестування концепції продукту

• Чому ми тестуємо концепцію продукту
• Ролі на експерименті
• Вибір типу експерименту
• Вибір метрик
• Дієві та беззмістовні метрики
• Підготовка до тестування
• Дашборд експерименту
• Чек-лист перед проведенням подуктового експерименту
• Шаблон дашборду експерименту
• Картка воркшопу по аналізу результатів експерименту
• Тест до модуля

Модуль 8. Презентація результатів

• Про що цікаво слухати стейкхолдерам
• Структура презентації для стейкхолдерів
• Шаблон структури презентаціях
• Чек-лист перед презентацією
• Тест до модуля

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

• Заняття у зручний час
• Доступ до запису занять
• Домашні завдання
• Підтримка ментора
• Сертифікат про проходження курсу
• Можливе повернення коштів до 3-го уроку

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

• Таня Зав'ялова - Досвідчена дизайн-лідерка
• Юрій Терницький - Сертифікований дизайн-лідер

Викладачі онлайн-курсу 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

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

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

На курсі студенти отримають досвід роботи з адаптивним дизайном, розуміння етапів розробки сайтів та інтерфейсів, знання принципів юзабіліті сайтів та застосування основ композиції та роботи з кольором. Будуть працювати з Photoshop, Illustrator, Figma, Invision, Zeplin, а дипломний проєкт стане хорошим доповненням у портфоліо.

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

Вступ до Веб-дизайну

• Що вас чекає на курсі
• Роль дизайнера у проекті
• Знайомство з графічними редакторами Adobe Photoshop, Adobe Illustrator
• User Flow / User Journey Map / Site map
• Практичне заняття

Figma: вивчаємо інтерфейс. Робота з інструментами та панеллю параметрів. Wireframes та тестування ідеї

• Figma: вивчаємо інтерфейс та вчимося з ним працювати
• Тестування ідеї
• Wireframes. Основи прототипування
• Практичне заняття

Дизайн система. Навігация та робота над логотипом

• Вивчаємо навігацію та структуру сайту
• Логотип, упаковка та презентація (логобук)
• Елементи дизайн системи та як з нею працювати
• Практичне заняття

Типографіка. Модульні сітки та їх налаштування. Вчимося створювати свої індивідуальні сітки

• Типографіка та сітки
• Модульна сітка
• Адаптив
• Практичне заняття

Композиція та колір

• Композиція
• Колір
• Практичне заняття
• Material design. Інструкції з людського інтерфейсу

Эвристики Нільсена

• Usability для дизайну інтерфейсу користувача
• Эвристики Нільсена
• Практичне заняття

Mobile application (IOS / Android)

• Material design. Форми. Рух. Взаємодія. Спілкування
• Material design. Допомога та відгук
• Презентація
• Практичне заняття

Behance and Dribbble

• Material design. Діалоги, меню, панель навігації, навігаційні ящики, навігаційна рейка, віджети
• Behance and Dribbble
• Плагіни для Figma
• Практичне заняття

СRM та додаткові програми для дизайну

• Робота над CRM
• Додаткові програми для побудови і презентації дизайну
• Практичне заняття

Створення CV, проходження співбесіди і подальший пошук роботи

• Складання CV та підготовка до співбесіди
• Практичне заняття

Портфоліо

• Портфоліо на Behance
• Портфоліо на Dribbble
• Практичне заняття

After Effect

• After Effect
• Практика. Захист проєкту

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

• Відеозаписи занять та всі матеріали завжди доступні
• Практичні заняття проходять раз на тиждень по 2,5 години
• Особистий зворотний зв’язок від викладача
• Факультативні заняття "English for IT"
• Можлива заморозка курсу при необхідності
• Дипломний проєкт
• Закритий чат учнів з викладачем і куратором
• Додатковий модуль з HR-ом PowerCode Academy по підготовці до співбесіди

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

Клим Євтушенко - Викладач курсу "Web design" y Powercode Academy, UX/UA designer

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

Figma

• Огляд інтерфейсу.
• Фрейм. Основні інструменти.
• Створення модульної сітки.
• Компоненти
• Тест та вирівнювання.Створюємо стилі.
• Колір, градієнти, фотографії. Обводка та ефекти: блюр, тінь. Створюємо стилі.
• Бібліотека
• Autolayout
• Прототипи у Фігма і розумна анімація.
• Панель коду та експорт
• Плагіни

Adobe Photoshop

• Вступ в Photoshop
• Інструменти
• Робота з файлами та зображеннями
• Робота з шарами і масками
• Виділення та маски
• Робота з шарами

Adobe Illustrator

• Вступ в Illustrator
• Робота з кольором та текстом
• Патерни
• Робота з ефектами

Adobe After Effects

• Вступ в After Effects
• Робота з шарами
• Плагіни в After Effects
• Робота з текстом

UI/UX Basic

• Вступ. Професія дизайнера. Поняття, принципи, етапи розробки
• Дослідження. Stakeholder ітерв'ю та знайомство з проєктом
• UX. Що це і навіщо. Основні патерни
• Карта емпатій, персона, CJM
• Інформаційна архітектура. Task Flow, User Flow. Low & High fidelity wireframes
• UI. Герштальт. Трендові стилі. Мінімалізм - це важко)
• Шрифти і шрифтові пари + теорія кольору
• Анімація прототипів. Основи Motion
• Теорія кольору, іконки, дизайн системи
• Основи юзабіліті. Інклюзивний дизайн. Сервісний дизайн

UI/UX Advanced

• Зручний інтерфейс
• Юзабіліті-тестування
• Сервісний дизайн
• Форми і UX-дослідження
• Кейс по сервісному дизайну
• Design thinking, Патерни взаємодії, евристики Нільсена
• Проектування CRM-систем
• E-commerce
• UI або візуальна концепція
• Дизайн-системи і патерни
• Мобільний UX/UI
• Текст в інтерфейсі
• Анімація елементів інтерфейсу
• Дизайн на основі даних
• A/B-тести
• Робота над проектом
• успішна презентація
• UX + Agile
• Кар'єра в UX

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

• Робота з експертами
• Портфоліо
• Зворотній зв'язок
• Ефективне навчання
• Диплом
• Технології
• Закритий телеграм-чат
• Допомога з працевлаштуванням для успішних студентів

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

• Олександр Соколов - Middle UI/UX Designer at LinkUp Studio
• Ольга Стахів - Freelance UI/UX Designer
• Олег Дубей - Засновник Webboost Digital Marketing Agency

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

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

Модуль: UX Product Design

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

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

Професійні поради та кар'єрне просування

• Створення портфоліо
• Презентація своїх ідей і проєктів
• Поради від кар'єрного фахівця щодо підготовки та проходження співбесіди

Вимоги для проходження курсу

Знання основ UI/UX.

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

• Живі заняття онлайн (3 заняття на тиждень по 3 години)
• Старт курсу щомісяця
• Робота над реальними проєктами
• Ізраїльська методика Телем
• Підтримка ментора
• Допомога курс координатора
• Сучасна LMS-система
• Система оцінки знань

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

• Сергій Коваленко - Senior UI/UX designer, Founder at Siegfried Design Buro
• Олег Вакарчук - Middle UI/UX designer, Freelance
• Олег Сліпченко - Product Designer at Slots City

На курсі ви навчитесь проводити дослідження конкурентів, вивчите поведінку своїх потенційних клієнтів, познайомитесь з трендами веб-дизайну, дізнаєтесь про створення Customer journey map та про інші складові на початку роботи.

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

Модуль 1. UX дизайн: Аналіз користувачів, дослідження та підготовка до проєктування

• Етапи роботи веб-дизайнера
• Дослідження, методи та прийоми
• Початок проєктування
• Методології, які допоможуть в проєктуванні своїх ідей і вибір основного функціоналу

Модуль 2. Інструменти дизайну

• Adobe Photoshop. Знайомство з інтерфейсом програми, основні інструменти
• Робота з практичним завданням, закріплення навичок роботи
• Adobe Illustrator. Основи роботи з Adobe Illustrator
• Робота із практичним завданням. Розробка графічних елементів та робота з ілюстраціями
• Знайомство з Figma. Основні інструменти
• Фрейм створення прототипу. Інтерактивний прототип

Модуль 3. Основи веб-дизайну

• Типографіка та шрифти
• Модульні сітки
• Дизайн система, UI Kit, Guideline, StyleGuide
• Адаптивний дизайн

Модуль 4. Mobile Apps дизайн

• Особливості дизайну мобільних додатків
• Створення проєктів
• Створення прототипів мобільних додатків, їх важливість і тонкощі, які варто враховувати

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

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

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

Вальковська Тетяна - Практикуючий дизайнер з досвідом більше 15 років

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

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

Теми:

• Що таке веб-дизайн та хто такий веб-дизайнер. Етапи створення сайтів
• Figma для веб-дизайнера. Інструменти
• Баланс та композиція у веб-дизайні
• Стилі сайтів, пошук референсів. Де брати контент для сайту
• Логіка на сайті. Структура лендінгу
• Основи типографіки. Вайрфрейм високої деталізації лендингу
• Основи колористики. Психологія кольору
• Макет лендінгу
• Вау анімація лендінгу
• Основи адаптиву та адаптивна версія під мобільний телефон

Після курсу учень

• Опанує базові навички веб-дизайну 
• Зрозуміє логіку роботи сайтів
• Опанує мистецтво гармонійного поєднання кольорів і шрифтів для створення стильного та зручного дизайну
• Навчиться структурувати контент, правильно розміщувати текст, зображення та різні інтерактивні елементи

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

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

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

Варвара Прокопчук - UI/UX Designer, Owner BARVA.design.studio

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

Підготовка

• Знайомство з професією
• Ефективний день
• Інструменти тайм-менеджменту
• Що таке сайт. Завдання сайту
• Типи сайтів
• Функціональні блоки сайту
• Етапи створення сайту

Figma

• Реєстрація та встановлення Figma на MacOs і Windows
• Інтерфейс головного екрана
• Інтерфейс робочого простору
• Текст
• Ліцензія на шрифти
• Завантаження та встановлення шрифтів на MacOs та Windows
• Заливка, обведення, градієнт
• Олівець і Pen Tool
• Групування, фрейм і секція
• Ефекти
• Режими накладення
• Робота із зображеннями
• Булеві операції
• Маски
• Стилі
• Компоненти та варіанти
• Вирівнювання
• Auto Layout
• Інструмент Scale
• Гарячі клавіші
• Плагіни
• Експорт
• Обкладинка файлу

Як проєктувати зручний та стильний дизайн

• Базові поняття типографіки. Анатомія шрифту
• Класифікація шрифтів
• Принципи та правила типографіки
• Композиція
• Введення в колористику
• Кольорові схеми
• Психологія кольору
• Сітки в UX/UI-дизайні
• Контент і нейромережі
• Інтерфейс і його елементи
• Наглянутість
• Аналіз ідеї
• Конкурентний аналіз
• Аналіз цільової аудиторії
• Складання структури сайту
• Копірайтинг для сайту
• Складання мудборда
• Вайрфрейм, макет, прототип
• Адаптація і респонсів

Портфоліо

• Де розміщувати портфоліо
• Як упакувати свою роботу
• Практика з оформлення кейса
• Як оформляти портфоліо на Behance
• Пакування портфоліо на Dribbble
• Пакування портфоліо в Telegram
• Створення особистого бренду в Instagram

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

• UX-дослідження
• CJM і персони
• Site Map
• Створення вайрфрейму з високою деталізацією
• Сторінка каталогу і навігація Інтернет-магазину
• Оформлення картки товару
• Корзина, яку не кидають
• Сторінка оформлення замовлення

Цикл проєкту

• Бриф
• Інтерв'ю із замовником
• Технічне завдання
• Договір
• Презентація роботи замовнику

Конструктор сайтів

• Інтерфейс головного екрану
• Інтерфейс робочого простору
• Стилі
• Внутрішні налаштування
• CRM
• Підключення домену
• Підключення оплат
• Налаштування інтернет-магазину

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

• CV дизайнера
• Фріланс та найм
• Проходження інтерв'ю
• Тестове завдання
• Cover Latter
• LinkedIn
• Робота через телеграм канали
• Біржі фрілансу

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

• Структурована програма курсу
• Підтримка ментора
• Щоденна практика
• 80+ корисних інструкцій та матеріалів
• Доступ до платформи
• Чат ком'юніті 24/7
• Розбір домашніх завдань
• Персональна допомога у складанні резюме
• Допомога у працевлаштуванні у пакеті VIP

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

Зіноватна Юлія - 5+ років досвіду роботи в дизайні