Веб-дизайн з графічним дизайном

HTML та CSS (близько 6 днів)

Вступ до HTML

Базовий фреймворк

Теги для створення тексту (h1-h6, p, br, span)

Команди форматування тексту

Інтеграція графіки

Посилання (внутрішні, зовнішні, телефон, mailto link)

Фавікони

Списки та таблиці

Правильна структура синтаксису

Перевірка за допомогою інструменту валідації W3C

Вступ до CSS

Варіанти інтеграції специфікацій CSS (внутрішній, зовнішній, вбудований стиль)

Основні команди (оформлення тексту, колір шрифту, колір фону)

Контейнери HTML

Використання та стилізація контейнерів

Інтеграція YouTube та Google Maps

Відео та аудіо плеєр

Об'єктна адаптація

VS Code (приблизно 1 день)

Вступ до VS Code

Додаткові розширення для VS Code. (наприклад, Live Server, Emmet Commands, Copilot (AI))

Використання ШІ в поєднанні з VS Code

Техніки макетування (близько 4 днів)

Класи, ідентифікатори, селектори

Ознайомлення з моделлю вставки

Відступи, поля, рамки, рамки-радіуси та їх скорочення

Вступ до Flex-Box

Макети з флекс-боксом

Вирівнювання за допомогою Flexbox

Вступ до системи Grid

Макети з сіткою

Вирівнювання за допомогою системи сітки

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

Загальні властивості відображення тегів

Фонові зображення

Статуси та значення (приблизно 1 день)

Введення псевдокласів (hover, active, focus, nth-child, first-child, last-child)

Псевдоелементи (::before, ::after, content)

Специфіка (значення кодів)

Позиціонування (приблизно 2 дні)

Вступ до позиціонування

Статичне, абсолютне, фіксоване, липке, відносне

Ліворуч, праворуч, зверху, знизу, z-індекс

Меню, що випадають

:target

:target у поєднанні з меню навігації та модальностями

Форми (приблизно 2 дні)

Вступ до бланків

Набір полів, легенда

Вхідні дані, текстові області, мітки, значення, ім'я, вибірки

Автозаповнення

Дизайн форм за допомогою CSS

Інтеграція php-скрипту в дії зі штучним інтелектом

Ефекти та шрифти за допомогою CSS (приблизно 1 день)

Ефекти переходу CSS

Перехід, фільтр, трансформація

Колірні градієнти, тінь від поля, тінь від тексту

Інтеграція шрифтів з @font-face

Адаптивний веб-дизайн (близько 2 днів)

Вступ до адаптивного дизайну

Медіа-запити, точки зупинки

Пейзаж, портретний режим

Адаптивні зображення з наборами зображень та srcsets

Редагування зображень, стиснення зображень

Створення зображень за допомогою штучного інтелекту

Пошукова оптимізація (приблизно 1 день)

Вступ до SEO

Оптимізація на сторінці та використання текстів, згенерованих штучним інтелектом

Оптимізація продуктивності для покращення SEO та презентація відповідних інструментів

Техніки та взаємодія CSS (близько 2 днів)

Змінні CSS

Темний режим

Обчислення за допомогою CSS

Вступ до CSS анімації

Тривалість, затримка, напрямок, функція таймінгу, кількість ітерацій, режим заповнення

Анімована кнопка бургера

Односторінковий сайт та багатомовність (приблизно 2 дні)

Вступ до односторінкових сайтів

Плавна прокрутка

Інтеграція бібліотеки fontawesome

Робота з графікою SVG

Інтеграція шарів та налаштування CSS

Багатомовні сайти

Розширення та фреймворки (приблизно 1 день)

Вступ до Bootstrap

Використання компонентів Bootstrap

Адаптивний дизайн за допомогою Bootstrap

JavaScript (близько 3 днів)

Вступ до JavaScript

Методи JavaScript/jQuery

Створення jQuery Lightbox

Змінні

Оператори If-else

Прокрутка, вікно, зміна розміру

масиви

Цикл For-loop

Математичний об'єкт

Законодавчі вимоги та управління проектами (близько 2 днів)

Інтернет-право

Авторські права щодо ШІ/КІ

Доступність

Управління проектами

Робота над проектом (близько 10 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

Програмне забезпечення для дизайну, штучний інтелект та сучасні робочі процеси в дизайні (приблизно 2 дні)

Adobe Creative Cloud: Photoshop, Illustrator, InDesign з першого погляду

Affinity Suite: фото, дизайнер та видавництво з першого погляду

Бібліотеки Creative Cloud, Adobe Fonts, Adobe Colour та Adobe Stock

ШІ в процесі проектування: Firefly, генеративні інструменти, підказки

Можливості, обмеження та сфери застосування штучного інтелекту

Основи графічного дизайну (близько 2 днів)

Мистецтво vs дизайн

Дизайн-дисципліни, принципи дизайну та дизайн-процес

Дизайн-мислення та розробка ідей

Дизайнерські закони сприйняття

Візуальний потік та компонування

Взаємозв'язок між фігурою та землею

Форма та колір (приблизно 2 дні)

Точка, лінія, поверхня та форма

Формат і пропорції

Теорія кольору та кольорові ефекти

Контрасти, гармонії та кольорові концепції

Колір в контексті бренду, впливу та читабельності

Зображення (приблизно 3 дні)

Якість та формати зображень

Піксельна та векторна графіка

Візуальна мова, візуальний вплив та візуальний сторітелінг

Дослідження, мозкові штурми та мудборди

Зображення в корпоративній комунікації

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

Права на зображення/права на використання

Типографіка та верстка (близько 3 днів)

Класифікація та вибір шрифтів

Читабельна типографіка, детальна типографіка

Типографічні ієрархії

Робочий процес в дизайні макета

Шрифтова область і сітка дизайну

Розробка та оцінка концепцій макетів

Огляд виведення файлів (друк, цифровий)

Фірмовий та брендовий дизайн (близько 1 дня)

Корпоративний дизайн vs фірмовий стиль

Дизайн логотипу, знаку та словесного/зображувального знаку

Система кольорів, форм і типографіки в фірмовому стилі

Стилістичні орієнтири та системи послідовного дизайну

Доступність (приблизно 1 день)

Основи доступного дизайну

Критерії дизайну для доступної комунікації (наприклад, розбірливість, контрастність, вибір кольорів)

Цифрові медіа та крос-медіа (приблизно 1 день)

Основи цифрової публікації та адаптивного дизайну

Формати файлів для веб, додатків та соціальних мереж

Адаптація контенту з підтримкою ШІ для різних каналів

Оптимізація макетів на основі ШІ для мобільного дизайну

Робота над проектом (близько 5 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту