Курсы Web Design / UI/UX

Даний курс спрямований на тих, хто тільки починає свій шлях у сфері дизайну. Протягом курсу ви освоїте основний інструмент, без якого не обходиться жоден UI/UX-дизайнер - Figma. По завершенні навчання ви матимете два готові проєкти, які зможете додати до свого портфоліо.

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

Підготовка до початку курсу

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

Модуль: Soft Skills

• Основні комунікативні навички
• Орієнтування у ситуації спілкування
• Управління емоціями
• Емоційний інтелект
• Критичне мислення
• Робота у команді
• Самопрезентація

Модуль 1. Дизайн сайтів

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

Модуль 2. Мобільний застосунок

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

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

• Живі вечірні заняття (19:00-22:00)
• Система оцінки знань
• Проєкти для портфоліо
• Допомога ментора
• Сертифікат про проходження курсу

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

• Сергій Коваленко - Senior UX/UI designer, Founder at Siegfried Design Bü‎ro
• Олег Вакарчук - Middle UX/UI designer, Freelance
• Олег Сліпченко - Product Designer у Slots City
• Московчук Дарина - Onereach.ai Web/Brand Designer

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

Модуль 0. Введення в професію

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

Модуль 1. Основні інструменти та програми для дизайну

Цей модуль знайомить студентів з основними інструментами та програмним забезпеченням, які є невіддільною частиною роботи будь-якого digital-дизайнера. Студенти навчаться працювати з передовими графічними редакторами та дизайнерськими інструментами:

• Adobe Photoshop: освоєння професійного редагування зображень, текстур та ефектів для створення високоякісних візуалів
• Adobe Illustrator: набуття навичок векторного дизайну для створення логотипів, іконок та ілюстрацій
• Figma: вивчення основ співпраці та прототипування в дизайні інтерфейсів та вебсайтів з можливістю спільної роботи в режимі реального часу
• Midjourney, Chat GPT: знайомство з інноваційними інструментами штучного інтелекту для генерації ідей та контенту, включаючи автоматизацію деяких процесів дизайну та текстового контенту

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

Модуль 2. Основні принципи дизайну

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

• Мудборди та референси: Навчання створення ефективних мудбордів та використання референсів для збору візуальної інформації, що слугуватиме джерелом натхнення та орієнтиром у роботі над проєктами
• Основи композиції: Вивчення ключових принципів композиції, включаючи баланс, контраст, акцентування, ритм та єдність, а також їх застосування для створення гармонійних та привабливих візуальних рішень
• Колір у дизайні: Розгляд психології кольору та його вплив на сприйняття дизайну. Студенти навчаться створювати колірну палітру, що відповідає цілям та ідентичності бренду
• Типографіка: Ознайомлення з основами вибору та використання шрифтів, створення ефективного текстового контенту, що сприяє залученню уваги й зрозумілості інформації
• Технічні вимоги до роботи з макетами: Вивчення стандартів та норм, які слід враховувати при підготовці дизайн-макетів до друку чи публікації в цифровому форматі
• Воркшоп зі створення віжуалів: Практичні заняття, де студенти матимуть можливість застосувати отримані знання на практиці, працюючи над створенням власних візуальних проєктів

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

Модуль 3. Дизайн в реалізації

У цьому модулі ми зосередимо увагу на застосуванні теоретичних знань та практичних навичок в реальних дизайнерських проєктах, з акцентом на психології сприйняття візуальної інформації, створенні ідентичності бренду, дизайні для соціальних мереж, рекламних віжуалах та корпоративних презентаціях:

• Психологія сприйняття візуальної інформації: Вивчення того, як люди сприймають візуальну інформацію, та використання цих знань для створення більш ефективного дизайну
• Айдентика: Основи створення та розробки візуальної ідентичності бренду, включаючи логотип, фірмовий стиль та корпоративну символіку
• Дизайн для соціальних мереж: Розробка концепцій дизайну та створення темплейтів для соціальних мереж, включаючи підбір колірної гами та візуального контенту
• Створення рекламних віжуалів: Навички створення ефективних рекламних віжуалів для контекстної реклами та таргетингу, з акцентом на побудову макетів, що залучають увагу та спонукають до дії
• Створення корпоративних презентацій: Техніки та практики створення презентацій, які ефективно комунікують ідеї та інформацію, використовуючи візуальні елементи

Модуль 4. Кар'єра в дизайні

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

• Брифування клієнта та роботу з технічним завданням: Навчання ефективній комунікації з клієнтами, розумінню їхніх потреб та перетворенню цих вимог на конкретні технічні завдання
• Фриланс: Основи ведення фриланс-діяльності, включаючи пошук клієнтів, ціноутворення, управління проєктами та особистим брендом
• Оформлення портфоліо: Стратегії створення ефективного портфоліо, яке демонструє найкращі роботи та професійні навички дизайнера
• Організація роботи дизайнера: Використання таск-менеджерів та контент-планів для ефективного планування та управління проєктами
• Воркшоп та підготовка до фінального проєкту: Практичні заняття, під час яких студенти застосовують набуті знання для створення стилістики соціальних мереж конкретного бренду, включаючи розробку брифу, аналіз завдань та розробку концепцій

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

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

• Живі заняття
• Ізраїльська методика Телем
• Підтримка ментора
• Робота над реальними проєктами
• Допомога курс-координатора
• Сучасна LMS-система
• Система оцінки знань
• Різні проєкти у портфоліо
• 18 практичних домашніх завдань
• Кар'єрний супровід
• Ком'юніті студентів та випускників

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

Сергій Коваленко - Senior UX/UI designer, Founder at Siegfried Design Buro

Курси 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 пари
• Структурована подача знань
• Викладачі практики
• Підготовка до працевлаштування

Курс дозволяє опанувати професію WEB-дизайнера з нуля.На заняттях ви отримаєте досвід роботи з адаптивним дизайном, розуміння етапів створення сайтів та інтерфейсів, навчитесь працювати з Photoshop, Adobe XD, Sketch, Figma, розберетесь в особливостях роботи в агенстві та на фрілансі, а дипломний проєкт стане першою роботою у портфоліо.

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

Фішки та особливості UI/UX дизайну. Введення у Figma

Хто такий UI/UX дизайнер:

• Хто такий UI/UX дизайнер
• Які ососбливості роботи в різних типах компаній
• Що робить UI/UX дизайнер на роботі

Знайомство з Веб-дизайном:

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

Figma. Підкорюємо найтоповішу програму для дизайнерів:

• Знайомство з інструментами
• Робота з різними об'єктами
• Робота зі шрифтами
• Створення обкладинки

Як створювати WOW-сайти

Види сайтів:

• З першу розберемось в типах сайтів
• Класифікація
• Приклади. Коли та які вам потрібні

Збір даних від замовника:

• З ким говорити
• Які питання задавати, аби збір був ефектним
• Як проводити таку зустріч. Правила та поради

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

Методології / Human centered design процес. UX методології:

• Які підходи існують
• Які підходи коли краще використовувати + як зібрати кейс в портфоліо

Інструменти дизайнера. Як змінювався софт:

• Які задачі виконує діджитал дизайнер
• Як змінювався інструментарій для дизайнерів
• Актуальні програми які сьогодні використовують діджитал дизайнери
• Figma як основний інструмент веб дизайнера

Як дизайн допомагає бізнесам заробляти більше

Персонажі:

• Хто такі персонажі
• Навіщо нам потрібні персонажі. ЇХ задача

Мапа шляху користувача:

• Що таке мапа шляху
• З чого складається мапа
• Як дані перетворюються на рішення

Як і навіщо аналізувати конкурентів

Аналіз конкурентів:

• Як вибрати конкурентів для аналізу
• За якими параметрами їх аналізувати

Figma від А до Я. Практика

Figma. Заглиблення у софт:

• Попрацюєте з зображеннями
• Спробуєте зробити маску
• Попрацюєте з базовими фігурами
• Попрацюєте з шрифтами

Figma. Продовження роботи:

• Скачаєте шрифт
• Попрацюєте зі шрифтами
• Попрацюєте з усіма відстанями та розмірами
• Попрацюєте з масками

Figma. Фінал:

• Попрацюєте з компонентами
• Зробите кольорові стилі та стилі шрифтові
• Поринете у figma community

Типи сайтів. Створення стилів та сіток (практика)

Елементи сайту. Стилі, сітки та автолейаути:

• Які бувають типи сайтів та їх елементи
• За якими параметрами їх аналізувати

Створення прототипів та їх адаптація

Створюємо прототип:

• Що таке прототипи
• Які інструменти прототипування існують
• Навіщо потрібні прототипи

Методи дослідження. Як виділитись серед 99% дизайнерів на ринку

Дослідження в дизайн процесі:

• Які методи досліджень існують
• Які методи коли краще використовувати

Інтерв'ю з користувачами:

• З ким говорити для вдалого інтерв'ю
• Які питання задавати, аби підвищити ефективність

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

• Що таке інформаційна архітектура
• Навіщо вона потрібна
• Як нею користуватись

Тестування інтерфейсів:

• Що таке тестування інтерфейсів
• Що саме треба тестувати
• З ким тестувати

Адаптація дизайну для мобільних девайсів. Практика

Аналіз сайтів конкурентів:

• Як правильно створювати дизайн для мобільних пристроїв
• Адаптація складних елементів

Розбір шрифтів, кольору, композиції, гармонії

Типографіка:

• Класифікація шрифтів
• Шрифтова термінологія
• Принципи типографіки

Композиція:

• Основи композиції
• Засоби гармонізації
• Композиція у кіно та мистецтві

Колір:

• Історія розвитку
• Колірне коло
• Створення гармоній

Принципи дизайну, які не варто ігнорувати

Закони і принципи дизайну:

• Закони дизайн процесу
• Takeaways
• Історія

Баухаус:

• Знайомство з історією створення та розвитку дизайн школи
• Розуміння впливу Баухаусу на світ дизайну, і те, яким він є зараз
• Аналіз ідей та принципів, що лежать в основі Баухаусу

Дизайн системи та UI kit. Розробка лендінгу (практика)

Надивленість дизайнера і як її розвивати:

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

Дизайн лендінгу:

• Особливості та цілі лендінгових сторінок
• Елементи успішного лендінгу
  • заголовки
  • візуальні елементи
  • виклик до дії (СТА)
• Приклади успішних лендінгів та аналіз їх ефективності

Дизайн система та UI kit. iOs, Android. Особливості та гайдлайни:

• Навіщо потрібні правила
• Що таке UI Kit
• З яких елементів складають UI Kit
• Етапи та переваги створення UI Kit
• Що таке Design System
• Принципи атомарного дизайну
• Приклади відкритих дизайн систем

Як зробити сайт зручним? Принципи Accessibility та адаптування

Прототипування 2.0:

• Означення прототипування та його роль у дизайні веб-сайтів
• Інструменти для створення прототипів:
  • Sketch
  • Adobe XD
  • Figma
• Важливість тестування прототипів перед реалізацією

Як зробити сайт зручним для всіх (Accessibility):

• Основні принципи доступності веб-сайтів
• Інструменти та підходи для створення доступних дизайнів
• Важливість створення веб-сайтів, які відповідають стандартам доступності

Адаптація під мобільну версію:

• Значення мобільного дизайну в сучасному веб середовищі
• Техніки адаптації веб-сайту під різні мобільні присторої
• Приклади мобільної адаптації та їх вплив на користувачів

Верстка з боку дизайнера

Як передати макет на верстку:

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

АІ в дизайні: як використовувати

Корисні сайти для дизайнерів:

• Популярні ресурси для навчання та інспірації
• Інструменти для роботи з кольорами, типографією, векторною графікою тощо
• Спільноти та оруми для обміну досвідом та підтримки

Штучний інтелект для дизайнерів:

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

Розробка сайту у Webflow. Практика

Початок роботи з Webflow:

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

Базові знання Webflow:

• Глибше розуміння структури та принципів роботи з Webflow
• Основи розміщення елементів на сторінці, робота зі зв'язками та відступами
• Навички створення і редагування компонентів та стилів у Webflow

Початок верстки реального сайту:

• Знайомство з процесом верстки веб-сайтів за допомогою Webflow на прикладі реального проєкту
• Використання знань та навичок, отриманих на попередніх уроках, для початку роботи над власним проєктом

Верстка сайту. Таби та слайдер:

• Вивчення та впровадження елементів веб-дизайну, таких як вкладки та слайдери
• Навички створення і налаштування табів та слайдерів для поліпшення взаємодії з користувачем на сайті

Webflow CMS:

• Ознайомлення з можливостями та принципами роботи з системою (CMS) у Webflow
• Навички створення та налаштування колекцій, поля для контенту та зв'язків між сторінками сайту

Анімації у Webflow + Мобільна адаптація:

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

Завершення роботи над сайтом. Фінальні налаштування:

• Оцінка та аналіз готового веб-сайту з використанням Webflow
• Вирішення останніх питань та корекція та корекція недоліків перед запуском сайту

Як "упакувати" себе і рухатись вгору по кар'єрі

Куди рухатись далі. Фріланс та агенція:

• Ознайомлення з різними шляхами кар'єрного росту в галузі веб-дизайну: робота на фрілансі та в агенціях
• Аналіз переваг і недоліків кожної з цих опцій та вибір найбільш підходящого шляху для себе

Позиціонування:

• Навички визначення та розробки унікальної пропозиції продажу у веб-дизайні
• Вивчення методів позиціонування себе на ринку та виокремлення з конкурентів

Упаковка портфоліо:

• Навички створення та оформлення професійного портфоліо для веб-дизайнера
• Вивчення ефективних методів демонстрації своїх робіт та досягнень

Як шукати клієнтів і продавати їм дорого

Пошук клієнтів. Розбір найефективніших методів:

• Вивчення різних стратегій та методів пошуку та залучення клієнтів у сфері веб-дизайну
• Аналіз ефективності різних каналів залучення та визначення найбільш підходящих для власного бізнесу

Як закрити клієнта на зум зідзвоні:

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

Особистий бренд. Де просуватись:

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

Ази Adobe Photoshop та Illustrator

Фотошоп:

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

Ілюстратор:

• Основні функції та інструменти програми Adobe Illustrator
• Векторна графіка: переваги та особливості використання
• Техніки створення логотипів, іконок, ілюстрацій тощо

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

• Допомога ментора
• Практика
• Практичні домашні завдання
• Викладачі-практики
• Навчання у зручний час
• Диплом
• Можливість вчитися з нуля
• Персональний куратор
• Дипломна робота для портфоліо
• Чат із вакансіями

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

• Іста Чебан - Продуктовий дизайнер у Київстар
• Євген Педорич - Продуктовий дизайнер у Київстар
• Олена Богатирьова - UI/UX дизайнерка
• Дмитро Загородній - 6 років досвіду у веб-дизайні
• Ігор Іванченко - Веб-дизайнер, no-code розробник
• Ірина Руденко - 3 роки досвіду в веб-дизайні

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

Теми:

• Вступ до Web-дизайну. Композиція, типографіка, теорія кольору
• Ознайомлення з Adobe Photoshop. Особливості програми, панель інструментів, гарячі клавіші, принципи роботи із шарами, формами. Застосування навичок на практиці
• Знайомство з Adobe Illustrator. Вивчення інтерфейсу, основних інструментів, принцип роботи. Створення логотипу та іконки
• Створення сайту: принципи та алгоритм. Основна ідея та завдання сайту. Збір інформації. Бриф, вимоги замовника, аналіз сайтів конкурентів, позначення цільової аудиторії. Ідеї, приклади для веб-сайту, moodboard. Структура веб-сайту. Створення варфрейму майбутнього сайту. Відображення деталізованого дизайну сайту
• Адаптивність. Правила створення адаптивних веб-сайтів. Основні дозволи для адаптивних веб-сайтів. Відображення кінцевого дизайну сайту під мобільний пристрій та планшет
• Знайомство з Figma. Вивчення інструментів, гарячі клавіші роботи з символами. Поняття плагінів та робота з ними
• Основи HTML/CSS. Використання інструмента Inspect. Передача макету на верстку
• Основи UX: генерація ідей, user stories, user flows, mind maps. Вивчення Balsamiq
• Мобільні програми: особливості дизайну під мобільні пристрої. Поняття гайдлайн мобільних ОС. Особливості створення дизайну під різні платформи iOS/Android. Ознайомлення з UI Kit. Створення мобільного застосунку
• Як презентувати проект замовнику. Робота з InVision, створення клікабельних прототипів
• Огляд анімації в After Effects
• Створення онлайн-портфоліо на Behance/Dribbble, оформлення робіт
• Життя після курсу: як розвиватись дизайнеру, де брати ідеї? Список літератури та ресурсів для самостійного навчання

Результат після проходження курсу:

• Опануйте роботу з такими програмами та сервісами як Photoshop, Illustrator, Figma, Axure, InVision, After Effects, MockFlow
• Дізнаєтеся про те, як створювати продаючій та ефективний дизайн, познайомтесь із сучасними UI/UX технологіями
• Зможете робити гарний та зручний дизайн веб-сторінок та застосунків
• Створіть власне портфоліо, яке допоможе вам на співбесіді
• Найкращі студенти отримають рекомендації від викладача та можливість пройти співбесіду у провідних iT компаніях

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

• Є можливість оплати курсу частинами
• Сертифікат після проходження курсу
• Курс збудований з урахуванням реальних вимог IT компаній
• Протягом усього курсу ведеться рейтинг успішності
• Додаткове заняття зі стратегії працевлаштування

Вивчиш не тільки необхідну базу дизайну для старту в професії, а також базові UX дослідження, анімацію, станеш з інструментом Figma на "ти", навчишся аргументувати та презентувати свої рішення команді. Якісно підготуєшся до пошуку роботи в IT компанії.

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

Введення у професію. Основи Figma

• Що таке UI/UX дизайн? Обов'язки дизайнера
• Інструменти для роботи дизайнера
• Детальне вивчення Figma (1 частина):
  • Знайомство з інтерфейсом
  • Frames&Groups
  • Об'єкти та їхні властивості (тіні, обведення, розмиття тощо)
  • Constraints (обмежувачі)
  • Криві (вектор, іконки)

Дизайн процес. Основи Figma

• Типовий дизайн процес та основні ролі: як в реальному житті
• Формати файлів з якими працює дизайнер
• Детальне вивчення Figma (2 частина і не остання):
  • Градієнти та зображення
  • Вирівнювання (Alignment)
  • Маски
  • Булеві групи
  • Робота з текстом, плагіни

Сітки та роздільна здатність екранів

• Що таке інтерфейс. Розбираємо простими словами
• Сітки. Їхні види та різниця. Колонкова сітка. Блочна. Ієрархічна. Сітка в сітці. Модульна сітка. Базові 4px і 8px (hard та soft) сітки
• Вчимось підбирати сітки під контент. Ніяких шаблонних підходів, тільки свідомий підбір і аналіз
• Правило внутрішнього та зовнішнього. Вчимось робити правильну композицію макету, яку легко сканувати очима
• Естимація (оцінка часу) проєкту. Вчимось рахувати час на дизайн

Типографіка. Тайм менеджмент

• Що таке типографіка? Як обрати шрифт. Шрифтові пари
• Швейцарська типографіка, яка часто лежить в основі мінімалістичного дизайну: кольори, контрасти, шрифти
• Як покращити типографіку на сайті і на що звернути увагу
• Тренди шрифтів. З трендами треба бути обачними, але ігнорувати їх не можна, якщо дизайнер хоче йти в ногу з часом і пропонувати сучасні рішення
• Сервіси підбору класних пар шрифті¸ Як правильно планувати свій час, що не "згорати". Техніки планування

Типи сайтів. Лендінг. Роздільна здатність. UX Writing. Правила UX

• Поширені типи сайтів. Їхні особливості
• Роздільна здатність екранів та як дизайнеру з ними працювати
• Типи макетів: Скетчінг, низькодеталізований та високодеталізований вайрфрейм, мокап та прототип. Коли який використовуємо
• Процес роботи над лендингом (односторінковий сайт). Детальний розбір секцій лендингу
• Аргументація своїх рішень. Як почати пояснювати свої рішення, щоб у них повірили
• Копірайтинг у дизайні. Чому не варто використовувати рибу текст Lorem Ipsum
• Основні правила UX дизайну. Те, що допоможе тобі у дизайні зручного інтерфейсу, орієнтованого на користувача

Композиція. UI елементи. Figma

• Основи композиції. За її допомогою ми можемо керувати увагою та почуттям користувача
• UI елементи їх стани і використання: кнопки, поля введення, радіокнопки, чекбокси тощо, основне, що необхідно для створення сайту
• Інтерактивний гайд по UI елементам
• Детальне вивчення Figma (3 частина): Auto layout, Стилі. Як тримати макет в порядку

Креативна стратегія (метод) Волта Діснея. Воркшоп

• Що таке брейнштормінг і навіщо він потрібен
• Практика генерації ідей по методу Волта Діснея. Виходимо за рамки власних уявлень

Колір. Доступність. Мудборд. Тренди

• Основи кольору. Як підібрати кольори проєкту та підібрати відтінки
• Accessibility. Доступність в дизайні. Наша дизайнерська робота полягає в тому, щоб звести до мінімуму проблеми всіх користувачів
• Тренди в UX/UI дизайні
• Пошук ідей візуального дизайну. На що звернути увагу, щоб знайти цікаву ідею
• Створення мудбордів: технічного та для клієнта
• Детальне вивчення Figma (4 частина): Створення "Системи шрифтів"

Візуальна ієрархія. Ілюстрації. Фото. Іконки

• Основи візуальної ієрархії. Найбільш ефективний інструмент, який є у дизайнера для того, щоб сайт виглядав збалансованим
• Ілюстрації: як працювати з ілюстраціями, які ілюстрації вже застаріли
• Фото: Як підібрати фото для сайту. Коли взагалі краще не використовувати фото і чим замінити
• Іконки: призначені для покращення дизайну та надання візуальної допомоги, яка надає інформацію або контекст

Практика редизайну з ментором. Воркшоп

За допомогою ментора, студенти вчаться аналізувати інтерфейс, шукати ідеї та редизайнити невдалі секції сайтів.

Як покращити UI (візуал). Тіні. Стилі у Figma

• Важливі деталі візуалу. Як покращити візуал
• Тіні: Коли використовувати і як будувати
• Вивчення стилів кольорів, тексту, тіней у Figma

Компоненти та варіанти у Figma. UI Kit проєкту

• UI kit (Набір всіх елементів, на яких будується дизайн твого сайту). Навіщо він потрібний дизайнеру та розробникам
• Детальне вивчення Components, Variants, Mapping, Variables. Що це таке, як це пришвидшує роботу дизайнера і робить макет більш професійним

Прототип. Анімація у Фігмі

• Детальне вивчення Figma: Інтерактивний прототип у Figma. Збираємо прототип лендингу
• Анімація у Фігмі: різноманітні приклади від менторів школи. Як покращити інтерфейс за допомогою анімації
• Анімація Parallax

Презентація: Урок + онлайн презентація

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

Кейс та портфоліо

• Важливість оформлення портфоліо. Як має виглядати портфоліо дизайнера
• Як правильно оформити кейс, щоб проявити свої навички в дизайні та аргументації, показати процес та результати
• Додаткові поради по кейсу в портфоліо
• Завантаження кейсу на Behance

UX дослідження. Юзабіліті. Брифування клієнта. Визначення цільової аудиторії

• Для чого нам UX дослідження
• Що таке брифування клієнта, чому важливо правильно збирати інформацію про проєкт та як це впливає на успіх проєкту
• Спілкування з клієнтом
• Базове визначення цільової аудиторії продукту. Чому важливо знати свого користувача

Sitemap. User Flow. Тригери у дизайні

• Початок роботи над дизайном інтернет магазина (e commerce). Інтернет магазин комплексний проєкт, який дозволяє закріпити отримані знання та набути нових, більш комплексних, які дадуть нашому випускнику неабиякі переваги перед іншими кандидатами
• Створення Sitemap (мапа) майбутнього сайту, щоб побудувати гарну структуру сайту та оптимізувати її за потреби
• Створення User flow сайту (візуальне зображення послідовності дій, які користувач виконує задля досягнення своєї мети на сайті
• Тригери у дизайні
• Базові засади UX. Юзабіліті (якісний показник простоти та зручності використання сайту)

Аналіз конкурентів за методом Кано

• Онлайн лекція на тему конкурентного аналізу за методом КАНО. Види функцій
• Практика конкурентного аналізу в групах та презентація напрацювань

E-Commerce. Part 1

• Дизайн форм для введення інформації. Вчимось робити швидкі та легкі форми, які будуть виконувати свою задачу та не перевантажувати користувачів
• Login & Sign up в інтернет магазині. Як краще оформити, чому не варто повторювати поле паролю і як полегшити процес користувачу
• Створюємо головну сторінку інтернет магазину
• Детальне вивчення Figma (7 частина): Як створити Drop down list, Як створити Форму

E-Commerce. Part 2

• Будуємо каталог товарів. Вивчаємо різний підхід до вибору фільтрів, сортування
• Як правильно створити картку товару, щоб не наробити хаосу
• Сторінка продукту: вчимось розмішувати великий об'єм інформації на сторінці, виділяти найважливіше та підводити користувача до цілі
• Адаптивний (adaptive) vs Чуйний (responsive) дизайн. Як і навіщо нам адаптувати макети до більших та менших розмірів девайсів? (мобілки, планшети, десктопи)

Q&A-сесія з ментором групи

Спілкування з ментором та відповіді на питання. Можливість дізнатись більше про досвід ментора та відповіді на питання, які ще не були закриті у чатах курсу.

E-Commerce. Part 3

• Кошик товарів. Дослідження свідчать, що майже 70% замовлень так і залишаються в кошику. Розбираємо, як зробити його ефективним
• Checkout (оформлення замовлення). Форма замовлення на сайті має бути швидкою та простою, тому детально пропрацьовуємо цей компонент інтернет магазину
• Сторінки помилок (404). Які вони бувають і як їх правильно пояснювати користувачам
• Адаптивний (adaptive) vs Чуйний (responsive) дизайн. Чому важливо робити дизайн під різні роздільні здатності екранів і як це робити правильно

Основи Usability Testing

• База з юзабіліті тестування. Тестуємо свої макети інтернет магазину на реальних користувачах, отримуємо фідбек і вносимо правки
• Guerilla testing (Коридорне тестування). Коли немає доступу до користувачів чи немає ресурсів для проведення повноцінного тестування

UX аудит інтерфейсу. Евристики Нільсена

Аналіз інтерфейсу по 10 Евристикам Нільсена (10 Usability Heuristics). Як проаналізувати інтерфейс, коли немає доступу до користувачів.

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

• Що це і чому це не те саме, що і UI kit? Як працювати з дизайн системами
• Найпопулярніші дизайн системи

Основи інструменту Adobe Photoshop та Adobe Illustrator

• Знайомство з інтерфейсом програм
• Ретуш, обробка фотографій (Adobe Photoshop)
• Вирізаємо об'єкти (Adobe Photoshop)
• Робота з простим вектором (Adobe Illustrator)

Ретроспектива з ментором групи

• Аналізуємо свій прогрес на курсі
• Ділимося успіхами та провалами
• Визначаємо власні зони розвитку

ШІ для дизайнерів

• Розбираємо популярні ШІ інструменти, які будуть корисними дизайнера
• Як працювати з ШІ

Співпраця з розробниками

Передача дизайн файлів девелоперам. Як правильно це зробити і на що звернути увагу.

Типи ІТ компаній. CV (Резюме)

• Типи IT компаній. Яка різниця? Що обрати і куди піти
• Soft skills. Чому вони важливі і як їх розвивати
• CV (Резюме). Створюємо резюме, яке приверне увагу рекрутерів
• Супровідний лист. Як написати і чому його варто писати новачкам

Співбесіда в ІТ. Відмови

• Співбесіда в IT. Як відбувається. Як підготуватися до ІТ співбесіди, щоб успішно пройти співбесіду і проявити себе
• Як зрозуміти, наскільки ти підходиш на вакансію. Як прокомунікувати свою недостатню відповідність
• Підготовка до співбесід: найчастіші питання, найдивніші питання
• Як психологічно підготуватися до співбесіди
• Чому відмови це окей і як це прийняти

Практика проходження співбесід (з ментором групи)

• Готуємося до проходження співбесіди по лекції з модуля
• Структуруємо всі отримані знання на курсі
• Відвідуємо симуляцію реальної співбесіди з ментором групи, відповідаємо на питання, отримуємо фідбек від ментора, що треба покращити, а що було дуже добре

Тестове завдання та випробувальний термін в ІТ компаніях. Ріст дизайнера

• Тестове завдання в IT компанії. Як підвищити шанси виконати тестове успішно
• Випробувальний термін в IT компанії. На що звернути увагу, як пройти і чому не варто боятись
• Ріст дизайнера. Junior Middle Senior: яка різниця
• Фриланс (базове знайомство з фриланс біржами
• Договір із клієнтом, на що звернути увагу
• Що далі? Як розвиватись дизайнеру?

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

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

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

• Олександра Коваль - Lead Product Designer
• Юлія Огороднік - Менторка курсу UI/UX Design: Start
• Тетяна Процько - Менторка курсу UI/UX Design: Start
• Аліна Семацька - Менторка курсу UI/UX Design: Start