Курс-професія
для старту у вебдизайні

• Розбираємо допоміжні функції Figma
• Додаткові інструменти WebGL для створення концепту і трансляції віжену

Робимо копію вебсайту.

Завершити копію вебсайту.

• Розбираємо види композицій
• Базові принципи композиції: симетрія, асиметрія, центровані композиції
• Використання простору, вирівнювання та баланс
• Види сіток та їхні адаптації під мобайл пристрої

Робимо макети з використанням різних видів сіток.

Створити лендинг на 4 екрани з 3 різними сітками та композиціями.

• Як підібрати колір: комбінації, що працюють, вибір за сенсом та значенням
• Вплив кольорів на емоції та сприйняття
• Підбір кольорів під конкретні теми та аудиторію

Підбираємо колірні схеми та комбінації.

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

Протягом тижня робити фотки в одній колірній гамі за принципом: один день — один колір. Поділитися мудбордом у ТГ-чаті.

• Типографічні композиції
• Принципи типографічних композицій: ієрархія, контраст, вирівнювання
• Комбінації шрифтів
• Робота зі шрифтом
• Вибір шрифтів: serif, sans-serif, display
• Вирівнювання та інтервал між символами та рядками

Створюємо інформаційний скелет — органічну шрифтову композицію на основі статті з Вікіпедії.

Розробити типографічну композицію для обраного проєкту. Створити 3 види композиції головних блоків з різними сітками.

• Створення та використання компонентів у Figma
• Відмінності між компонентами та групами
• Налаштування автолейаутів, використання їх для адаптивних дизайнів

Створюємо комплексні макети з використанням компонентів та автолейаутів.

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

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

Завершити створення лендингів.

• Збір та рисерч інфи
• Опис функцій та структурної частини
• Прямі та непрямі конкуренти

Ознайомитись із брифом. Проаналізувати ЦА, визначити їхні потреби та очікування. Провести дослідження ринку та визначити прямих і непрямих конкурентів. Описати сильні та слабкі сторони конкурентів.

• Figma jam та її інструменти
• Як обрати аудиторію для проведення інтерв'ю
• Оформлення інтервʼю
• Генерація гіпотез

Розробити декілька користувацьких персон на основі зібраних даних. Створити базову мапу шляху клієнта (CJM) для обраного проєкту.

• Навігація та архітектура сайту
• Структурування інформації, конструкція сторінок
• Job Story & User Story
• Маркетингові моделі

Розробити детальну мапу сайту для обраного проєкту.

• На чому тримаємо фокус
• Як пітчити свій мудборд і продавати його
• Де шукати референси
• Методика Йоганнеса Іттена та «емоційна складова» того, що ми створюємо

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

• Патерни поведінок
• Інклюзивний дизайн

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

Створити паперовий прототип сайту клієнта.

Внести правки в попередні домашні роботи на основі фідбеку

• Low-fi прототип
• Чому дизайнеру важливо задати вектор для копірайтингу
• Клікабельність прототипів у Figma
• Як зробити прототип для мобайл-версії

Зробити UX-прототип власного проєкту і копірайтинг, адаптувати прототип під мобайл-версію.

• Створення концепту
• Як створити візуально привабливий та функціональний UI-концепт
• Коли потрібна варіативність, а коли — лише одна сильна ідея

Створити й оформити UI-концепт.

• Основні принципи Google Material Design та Apple Human Interface Guidelines
• Як їх використовувати при створенні власних дизайн-систем
• Створення бібліотек для розробників та для дизайнерів
• Експорт анімації та документація

Створити власну дизайн-систему для корпоративного сайту.

• Responsive та Adaptive дизайн
• Коректне відображення сайту на різних пристроях
• Мобільний дизайн
• Найкращі практики для створення мобільних інтерфейсів

Створити мобільну версію 3 лендингів або одного лендингу і сайту клієнта.

• Розбираємо поширені помилки
• Виконуємо практичні вправи для виправлення помилок
• Бест практики для уникнення помилок у майбутніх проєктах

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

Знайти приклади 3 невдалих дизайнів, проаналізувати їх та запропонувати свої правки.

• Види мов програмування
• Як передавати робочі матеріали
• Що дизайнеру треба знати про розробку

• Інтерактивні прототипи у Figma
• Як працювати в Principle
• Створення анімації в WebGL

• Створити анімацію за допомогою WEB JL.
• Створити власну анімацію (анімація скролу, завантаження елементів тощо).
• Запакувати ці проєкти в презентацію на Dribbble.

• Індивідуальність у дизайні
• Як знайти свій унікальний дизайнерський стиль
• Артдирекшн на фрилансі

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

• Цикли та процеси роботи над проєктом
• Як планувати й організовувати робочий процес
• Повний цикл: реалізація реального проєкту від ідеї до презентації

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

• Перспективи на фрилансі
• Кар'єрні шляхи для дизайнерів
• Варіанти розвитку → артдиректор, продакт, синьйор дизайн-лід
• Вимоги та навички для різних ролей

• Розбираємо сайт-білдери
• Порівняння різних платформ

Створюємо портфоліо Skvot у Webflow.

Завершити створення портфоліо на обраному сайт-білдері.

• Презентація драфтів проєктів

• Рев’ю на портфоліо студентів
• Приклади портфоліо діджитал-кріейторів
• Підготовка до співбесіди