Курс Web Design з нуля

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

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

Введення в курс. Знайомство з професією веб-дизайнера

• Про професію
• Основні закони User Experience і як їх примінити на практиці
• Типи сайтів: класифікація і основні відмінності
• Робота в Figma, Adobe Photoshop і Adobe Illustrator

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

• Платформи і сайти, де дизайнер початківець може почати кар'єру
• Практика: резюме в Figma. Знайомство з програмою і вчимося складати резюме, яке відповідає потребам ринку

Методи захисту свого проекту/дизайну і успішної роботи з критикою замовника

• Як працювати з критикою замовника
• Методики захисту свого проекту
• Розбір домашніх завдань і аналіз помилок

Основи Visual design. Створення банера для сайту

• Правила роботи з композицією і відступами
• Підбір шрифтів
• Теорія кольору
• Практика: створюємо банер для веб-сайту. Застосовуємо вивчені знання на практиці і оприділяємо, чому банер грає ключову роль

Основи accessibility інтерфейсів

• Базові вимоги до доступності
• Підбираємо контрастність і шрифт для кращого сприйняття
• Аналізуємо домашні роботи і обговорюємо розповсюджені помилки

Основи респонсив дижайну, сітки і брейкпоінти. Створення лендінгу

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

Естимація і дедлайни

• Як оприділяти терміни на виконання задач
• Як не порушувати дедлайни
• Поради по комунікаціям з клієнтом
• Аналізуємо лендінги студентів і виявляємо найчастіші помилки

Основи UX, Design thinking. Створення брифу, аналіз конкурентів

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

Аналіз існуючого дизайну, евристична оцінка юзабіліті. Редизайн сторінки в інтернеті

• Правила юзабіліті Нільсена і їх застосування в аналізі дизайну
• Практика: аналіз і покращення дизайну сторінок сайту

Розбір домашнього завдання "Редизайн сторінки в інтернеті"

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

Найкращі практики в e-commerce. Створення головної сторінки інтернет-магазину для десктопа і мобільного

• Практики і тренди по створенню інтернет-магазинів
• Елементи і блоки для головної сторінки інтернет-магазину
• Практика: малюємо головну сторінку в розширені 1440х900 (десктоп) і 812х375 (мобільний)

Розбір домашнього завдання "Головна сторінка інтернет-магазину"

Огляд попереднього домашнього завдання студентів

UIKit, Design System, Atomic design. Створення каталога, карточки товару для десктопа і мобільного

• Використання базових компонентів для великого сайту
• Різниця між UIKit і Design System
• Практика: продовжуємо роботу над інтернет-магазином - робимо каталог і карточки товарів

Розбір домашнього завдання "Каталог, карточка товару для десктопа і мобільного"

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

Створення корзини і процесу оформлення замовлення. Десктоп і мобільна версія

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

Розбір домашнього завдання "Корзина, процес оформлення замовлення для десктопа і мобільного"

• Аналізуємо роботи студентів
• Особливості реалізації функцій на мобільному пристрої

Інтерактивна презентація проекту в Figma

• Створення інтерактивних моделей сайту
• Як "продавати" дизайн клієнту

Захист курсового проекту

• Захищаєм курсовий проект
• Радуємось успішному проходженню курсу :)

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

• Все що в пакеті Lite
• Доступ до матеріалів та відео назавжди
• Сертифікат про проходження курсу
• Відеозаписи всіх живих лекцій в кабінеті
• Перевірка ДЗ з коментарями від тренера
• Фінальний проект - готовий кейс
• Відеозаписи блоку "IT Career"

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

Олександр Чмира - Senior Experience Designer