Курс WEB-дизайнер

Курс дозволяє опанувати професію 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 роки досвіду в веб-дизайні