Курси Web Design / UI/UX

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

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

Модуль: 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

Опануй інструменти Adobe та Figma, навчись створювати логотипи, іконки та адаптивні веб-сайти. Вивчай композицію, типографіку, анімацію та багато іншого.

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

Теми:

• Adobe Illustrator. Векторна графіка
• Adobe Illustrator. Обробка контуру
• Натхнення та карта асоціацій. Працюємо з FigJam
• Figma. Вивчення функціоналу
• Композиція. Сітки. Вертикальний ритм
• Типографіка
• Колористика
• Дизайн логотипу та логобуку
• Дизайн іконок та кнопок
• Стилі та компоненти
• Auto layout
• Адаптивний дизайн
• Брендинг та айдентика
• Wireframe
• Мудборд та дизайн система для свого проєкту
• Типи сайтів. Створення Landing Page
• Дослідження та бриф
• Дослідження бізнесу та цільової аудиторії
• Конкурентний аналіз
• User Flow. Site map
• User Stories. User scenario
• Об'єднання аналітики
• Анімація Figma
• Adobe Photoshop. Створення колажу
• Adobe Photoshop. Обробка фото

В кінці курсу виконується дипломний проєкт

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

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

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

• Крістіна Стефанишина - Web Designer
• Ксенія Скипенко - Web Designer at TrueDesign
• Єлизавета Чепугова - Graphic Designer at Nasha Idea
• Вікторія Ільїна - Designer at DCoast Design studio
• Джастіна Нипорко - UI/UX Designer at Sednor Holdings Limited
• Таісія Квітка - UI/UX Designer at Trendo
• Анна Пудова - UI/UX Designer at Pudova Designer

Дізнайтеся, як проводити UX дослідження та використовувати отримані результати для створення клієнтоцентричних продуктів.

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

Теми:

• UX дослідження та які задачі вони вирішують
• Процес UX дослідження. Планування, підготовка
• Дослідження та тести. Занурення
• Аналіз та синтез результатів
• Дослідницький звіт
• Етика дослідника, юридичні норми та стандарти

В результаті курсу ви опануєте:

• Desk research
• Інтерв'ю
• Модероване UX тестування
• Розробка дизайну дослідження
• Кікоф з замовником
• Розробка гайдів
• Оцінка за UX евристиками
• JTBD
• Аналіз та синтез зібраних даних
• Беклог задач
• Пріоритезація задач

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

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

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

• Лєна Поліщук - Дизайнерка користувацького досвіду та методологиня досліджень
• Анфія Резнікова - UX-дослідниця та менеджерка дослідницьких проєктів

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

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

Базовий семестр

• Технології АІ
• Технології АІ для вирішення універсальних задач
• Хмарні технології та бази даних
• Orientation in development: Low-Code та No-Code платформи, Front-End та Back-End

Основи UI/UX

• Професія веб і UI/UX дизайнера
• Інтерфейси. Приклади інтерфейсів
• User Experience

Підготовка до розробки веб проєкту

• Види сайтів
• Продуктовий та сервісний дизайн
• Створення та обробка брифа і технічного завдання

Робота з аудиторією, види користувачів

• Аналіз аудиторії
• Потреби аудиторії
• Петля цінностей
• Воронка продажів
• Види користувачів
• Принципи сприйняття і психологія користувачів
• ЦА
• Сценарії користувача

Customer Journey Mapping

• Компоненти та типи Customer Journey Map
• Алгоритм створення CJM

Інформаційна архітектура

• Контент-стратегія. Визначення вимог до контенту. Робота з контентом
• Навігаційний дизайн
• Wireframe
• MVP, MVL
• Тестування прототипів
• Axure
  • Введення в Axure. Огляд можливостей
  • Робота з бібліотеками
  • Інтерактивність в Axure
  • Інтерактивний прототип

Веб-дизайн

• Moodboard як інструмент по створенню креативної концепції продукту
• Сітка і композиція в інтернеті
• Типографіка
• Основи колористики
• Цікава подача інформації
• Приватне позиціонування
• CTA
• Елементи Лендінзі
• Іконки
• Форми і кнопки
• Стилі в веб-дизайні

UI

• UI-kit створення і підбір шаблонів
• Повідомлення / помилки (оповіщення користувача)

Дизайн системи

• Atomic Design
• IBM visual language
• Fluent Design (Microsoft)
• Material Design (Google)
• iOS (Apple) VS Windows
• Дизайн для Retina
• Guideline

Мобільні інтерфейси

• Особливості інтерфейсів для десктоп, планшетів і мобільних пристроїв
• Типографіка в мобільних інтерфейсах
• UI паттерни
• Адаптивний дизайн, чуйний дизайн
• Гібридні і нативні мобільні додатки
• Особливості платформи iOS, інструкція по гайдам, UI кіти
• Особливості платформи Android, інструкція по гайдам, користності. Відмінності від iOS
• Navigation
• Тренди мобільного дизайну

Тестування Usability

• Юзабіліті-тестування
• Hallway testing
• Remote usability testing
• Expert review
• A/B testing

UI для VR/AR/MR

Види відмінності, де застосовуються

Баннери

Види, відмінності, де застосовуються

Редизайн, гіпотези

• Редизайн. Специфіка застосування
• Гіпотези щодо поліпшення

Soft Skills

• Правила презентації проєктів і гіпотез
• Резюме, портфоліо

Фінальний іспит

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

• Пройдете всі етапи розробки дизайну продукту з нуля
• Заняття 2 рази на тиждень по 2 пари
• Структурована подача знань
• Викладачі практики
• Підготовка до працевлаштування

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

Підготовка

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

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+ років досвіду роботи в дизайні

Курс складається з двух блоків: hard skills (курс Вебдизайн - розвиток професійних навичок) та soft skills (заняття з управління собою та проєктами, розвиток персональних навичок). Навчаємо підлітків з нуля. Вступне тестування на рівні Beginner - на логіку та базове володіння комп'ютером. Модуль Працевлаштування - робота з реальними замовниками, симуляція проходження співбесід, оформлення професійного портфоліо та резюме тощо.

План курсу

Освітні результати

Hard skills (Рівень Beginner):

• Первинне портфоліо робіт з 4-ох проєктів на behance.com
• Формування базових навичок вебдизайнера
• Реалізація досліджень та робота з персонами (онлайн та офлайн)
• Практика роботи в Trello: система управління проєктами і їх ведення
• Індивідуальний проєкт: робота над сайтом
• Прототипування та пропрацювання сценаріїв у Figma
• Активна робота з реферальними рішеннями в Behance та Dribble
• Створення hi-fi прототипів
• Тестування: офлайн та онлайн
• Індивідуальна та командна робота над технічними завданнями від замовника в установленні часові рамки

Hard skills (Рівень Advanced):

• Основи прожект менеджменту, методам Agile, Waterfall, Kanban
• Метод управління проєктами, техніка Scrum
• Досвід роботи з реальним замовником
• Основи клієнтоорієнтованого підходу, аналіз потреби замовників
• Складання повноцінного резюме (CV), верифікація в HR менеджера/рекрутера
• Оформлення мотиваційного/супровідного листа до резюме
• Симуляція проходження співбесіди
• Оформлення профайлу на linkedin, дослідження job порталів
• Пошук замовників/компаній, особливості роботи на freelance
• Юридичні особливості трудових відносин в Україні

Soft skills:

• Емоційний інтелект
• Самоідентифікація
• Лідерство
• Цілепокладання
• Мотивація та дисципліна
• Тайм-менеджмент
• Самопрезентація
• Комунікація - конфліктологія - перемовини
• Мистецтво публічного виступу
• Робота в команді та з замовником

Результат навчання

IT сфера цінує знання та досвід. Підліток отримує:

• Профорієнтацію, підготовку до вступу у профільний університет, профорієнтацію
• Здатність працювати на рівні Junior дизайн спеціаліста після модуля Працевлаштування
• Стажування/працевлаштування в компаніях-партнерах Ampli
• Професійне портфоліо власних та командних робіт
• Міжнародний сертифікат в разі успішного проходження навчання
• Рекомендаційний лист від компанії, де студент проходив стажування для вступу до університету та подальшого працевлаштування

Перша робота:

• Рівень Beginer плюс Модуль Працевлаштування дають знання на рівні Junior спеціаліста та дозволяють отримати першу роботу
• Програма навчання складається із командних проєктів та їх захисту (пітчів) перед вебдизайнерами та HR менеджерами IT компаній
• Для наших випускників в Ampli працює кар'єрний сервіс з пошуку стажування та першої роботи
• Тож окрім першого досвіду випускники отримують рекомендаційні листи для вступу в університет та подальшого працевлаштування

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

• Тривалість навчання - 6 місяців (24 тижнів/занять)
• Групове онлайн навчання з тренером - дизайн-спеціалістом рівня Middle+, групою підлітків та супроводом стаді-менеджера
• Завдання для роботи серед тижня: відео-підручник (1-5 відео на тиждень), тести до нього, практичні завдання, додаткові матеріали (галузеві статті, ін.) Перевірка завдань тренером. Спілкування у чаті
• Групове онлайн заняття з тренером по hard skills вихідними, раз на тиждень (субота або неділя, 2 години, онлайн у zoom/google meets)
• Онлайн-практикуми з тренером по soft skills (надпрофесійні навички) раз на тиждень (1.5 години)
• Зворотний зв’язок для батьків:
  • раз/місяць статус навчання по програмі від стаді-менеджера
  • раз/три місяці - відгуки тренера

Автори програми

• Ольга Шевченко - Vintage
• Еліях Семьонов - PDF filter
• Христя Митсак - Global Tech Makers
• В'ячеслав Школьний - Cogniance
• Женя Скрябіна - Luxoft
• Олександр Валіус - Eleks
• Устим Гануляк - EPAM
• Олександра Лукавецька - WebIT.Agency

Комплексний практичний курс про створення інтерфейсів та вебпроєктів. Після його завершення ви станете майстром Figma, отримаєте від 2 проєктів в портфоліо та створите інтерактивний прототип мобільного застосунку.

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

Місяць 1

Вступне заняття

• Вступне заняття курсу. В його межах обговоримо програму навчання та практичний бриф
• Розберемо базові поняття
• Познайомимося з процесом створення вебпроєкту

Анатомія інтерфейсу: основи

Урок, на якому ми знайомимо студентів з першими елементами та їхніми станами, а також з основами роботи з Figma для дизайнерів інтерфейсів.

Онбординг

• Урок, де ми познайомимось з основами онбордингу та слайдерів
• Дізнаємось, як генерувати зображення, працювати з модальними вікнами

Шоти та презентація робіт

• Урок, на якому будемо знайомитися з шотами та Dribble
• Навчимося створювати обкладинки та описи для проєктів
• Публікація робіт

Місяць 2

Інформаційна архітектура та навігація вебсайтів

Урок, де ми розберемо інформаційну структуру сайтів, шапку сайту, однорівневу та багаторівневу навігацію, хлібні крихти, бічну навігацію, футер та навігацію в футері.

Створення карти сайту та різних видів навігації

Урок з розробки карти сайту та представлення її у вигляді навігації.

Розбір напрацювань

Розбір робіт студентів, роз'яснення помилок, підказки, як перетворити напрацювання з навігації в готовий шот.

Навігація в мобільних застосунках

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

Створення мобільної навігації та робота з користувацькими сценаріями

Урок, на якому ми навчимося створювати типові зразки мобільної навігації: нижню панель, бургер-меню, а також - користувацький сценарій (Userflow).

Розбір напрацювань

Аналізуємо роботи студентів та типові помилки.

Головний екран посадкової сторінки

• Знайомство з Hero Section
• Анатомія сторінки
• Типові композиції
• Знайомимось з інструментами, що допомагають створити крутий ключовий образ
• Розробляємо шоти на основі головного екрану

Розбір робіт студентів

• Аналіз напрацювань по Hero Section
• Розбір робіт студентів

Місяць 3

Типові блоки посадкової сторінки

Урок, присвячений будові посадкових сторінок, їхній анатомії та типовим блокам.

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

• Знайомство з ChatGPT як інструментом для створення правдивого контенту
• Урок зі створення підказок (промтів)
• Робота з Language Tool для перевірки контенту
• Знайомство з Freepik для практики в створенні графічного контенту для сайту

Розбір напрацювань

• Розбір напрацювань студентів
• Рекомендації щодо покращень їхніх робіт

Мобільна версія сайту та адаптивний дизайн

• Адаптивний дизайн та його ключові принципи
• Робота з авторозмітками та іншими інструментами Figma
• Створення мобільної версії сайту

Розбір напрацювань

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

Створення дизайну сторінки: від пошуку візуального стилю до верстки

Урок, на якому викладач показує процес створення посадкової сторінки та версткою кожного блоку посадкової сторінки після Hero Section, включно з формою заявки.

Розбір напрацювань

Розбір робіт студентів по мобільній версії.

Фінальний розбір напрацювань, підготовка шотів до публікації

Додатковий, фінальний розбір напрацювань.

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

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

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

• Юрій Галюк - Customer Experience Lead at ELEKS
• Антон Лукащук - Дизайнер цифрових інтерфейсів, Webflow-розробник
• Віталій Дячук - E-commerce Lead Designer at League Design Agency
• Вадим Гайдай - Провідний вебдизайнер в League Design Agency

На курсі ви вивчатимете: основні інструменти графічних редакторів, ретуш та оброблення фотографій, створення різноманітних макетів, візиток, банерів, іконок, логотипів, підготовку до друку, створення дизайнерських макетів для веб-сайтів та мобільних версій сайтів.

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

Теорія Веб-дизайну

• Інтернет, веб-сторінка
• Веб-дизайн
• Колір
• Композиція
• Шрифт
• Основні принципи комп'ютерного дизайну
• Стилі, тренди
• Спілкування із замовником

Практика по Adobe Photoshop

• Основне про Adobe Photoshop
• Панель інструментів
• Малювання фігур та об'єктів
• Робота зі слоями
• Робота з текстовими слоями
• Робота із зображеннями
• Дизайн логотипу
• Дизайн візитки
• Дизайн рекламного банеру
• Робота з готовим шаблоном
• Підготовка мобільної версії сайту
• Дизайн емейл розсилок
• Підготовка та передача макетів замовнику

Практика по Adobe Illustrator

• Основне про Adobe Illustrator
• Робота з вектором та растром
• Робота з контурами та об'єктами
• Робота з текстами
• Розробка іконок
• Магія інструменту Shaper
• Підготовка зображень для завантаження на Shuttershtock

Практика по Figma

• Інтерфейс, створення облікового запису
• Створення базових векторних фігур та ефекти, використання сітки
• Робота з текстом, глобальні стилі
• Авторозмітка (autolayout)
• Робота з плагінами, community
• Компоненти
• Створення мобільного додатку
• Прототипування та аніміції

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

• Курс в Хмельницькому
• Для дорослих та молоді від 14 років
• 2-чі на тиждень по 2 год. 18:30 - 20:30
• Дні навчання: середа, п'ятниця
• 4 місяці / 32 заняття
• Багато практики
• Індивідуальний підхід
• Актуальна програма навчання

Розглядаємо матеріал на прикладі реальних кейсів та вебпроєктів. Навчаємо за власною методологією для ефективного засвоєння матеріалу. Ти зможеш одразу використовувати свої знання на практиці.

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

Тема 1. Вступний урок

• Огляд можливостей платформи
• Функціонал та переваги платформи
• Обмеження та лімітації в інструментах
• Створення та налаштування проєкту

Тема 2. Огляд інтерфейсу

• Знайомство з інтерфейсом
• Контрольна панель
• Канвас
• Top-bar
• Навігаційна breadcrumb панель

Тема 3. Панель стилів

Робота з панеллю стилів.

Тема 4. Вебструктура

• Вступ до HTML & CSS
• Box-model

Тема 5. Ієрархія елементів

Робота з ієрархією елементів.

Тема 6. Базові елементи

• Елементи
• Body
• Section
• Container
• Columns
• Div-block

Тема 7. Компоненти

• Компоненти
• Navbar
• Створення кастомних компонентів

Тема 8. Юніти

• Панель юнітів
• Юніти

Тема 9. HTML теги та класи

• HTML теги
• Класи
• Типографіка
• Стейти елементів

Тема 10. Лейаути

• Спейсинг (margin, padding)
• Display setting (show/hide)
• Модель Flexbox
• Grid
• Позиціонування елементів

Тема 11. Верстка блоків

• Верстка без дизайн макету
• Перенесення макету з Figma

Тема 12. Адаптивна верстка

Робота з адаптивною версткою.

Тема 13. Webflow CMS: створення, редагування та апдейт

• Створення колекцій CMS
• Додавання колекцій на сайт

Тема 14. Створення дизайну на базі Webflow CMS

• Стилізація колекцій
• Створення шаблону сторінок колекції

Тема 15. Інтерекшени та тригерні анімації

• Панель інтерекшенів
• Налаштування тригерних анімацій

Тема 16. Webflow SEO та паблішинг проєкту

• Вступ до SEO
• Мета-теги
• Маркування H1, H2, H3...
• Alt теги для зображень
• Панель аудиту
• Кейси з оптимізації під SpeedPageInsights
• Підключення домену та публікація проєкту

Тема 17. Кастомний код: розширюй функціонал своїх проєктів на Webflow

• Сніпети коду
• Як працювати зі сніпетами
• Розбір анатомії елементів, до яких застосовується сніпет (на практичному прикладі)
• Як інтегрувати сніпет коду на свій сайт
• Публікація сніпету

Бонусний урок. Пошук клієнтів на фріланс-майданчиках

Особливості пошуку клієнтів на фріланс-біржах у 2023 році.

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

• Будувати веб-сайти з нуля у Webflow
• Проєктувати веб-інтерфейси
• Швидко створювати різні сайти
• Перетворювати свій сайт

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

• Практичний досвід роботи у Webflow з нуля
• Додаткові матеріали та мануали
• Зручний доступ до всіх уроків, матеріалів курсу
• Портфоліо на основі домашніх завдань

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

Йосип Кобаль - UX/UI Designer, Ringostat (Netpeak Group)