Курс дозволяє опанувати професію 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:
- Означення прототипування та його роль у дизайні веб-сайтів
- Інструменти для створення прототипів:
- Важливість тестування прототипів перед реалізацією
Як зробити сайт зручним для всіх (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 роки досвіду в веб-дизайні
Більше інформації
Дякуємо, що поділилися своєю історією!
Дуже приємно читати, що навчання з GoIT допомогло вам пройти шлях від сумнівів до впевненості у новій професії. Бажаємо вам яскравих досягнень, натхнення й постійного розвитку у світі ІТ!