UI/UX дизайн у Figma: від макета до портфоліо
Проєктування інтерфейсів сайтів і застосунків у Figma — від першого макета до інтерактивного прототипу та власного портфоліо.
- 01: Вступ до веб-розробки — Як працюють сайти, backend і frontend. Sublime Text, перша HTML-сторінка, теги, атрибути, CSS-стилі.
- 02: Мова HTML — Структура HTML5, основні теги, веб-форми, валідація, таблиці, семантична верстка та стандарти.
- 03: Історія та стандарти — Розвиток інтернету, WWW, XHTML, блокові та лінійні елементи, заголовки H1-H6, редактори та браузери.
- 04: Основи CSS — Синтаксис CSS, правила каскадності, групування та успадкування стилів, пріоритети.
- 05: Селектори CSS — Комбіновані селектори, групування та успадкування, пріоритети стилів у CSS.
- 06: Посилання та шляхи — Тег посилання, відносні та абсолютні шляхи, URL/URN, фрагменти сторінки, іменування папок.
- 07: Списки, символи, метадані — Марковані та нумеровані списки, Unicode, MIME-типи, метадані KEYWORDS та DESCRIPTION, SEO-основи.
- 08: CSS. Блокова модель та позиціонування — Box model, border/margin/padding, обтікання, навігація, Relative/Absolute/Flex/Fixed.
- 09: Шрифти та текст — Шрифтове та текстове оформлення, вирівнювання, інтерліньяж, кернінг, колір, написання текстів для Web.
- 10: Кольори та зображення — Колірні моделі в CSS, формати JPEG/GIF/PNG, фонові зображення, градієнт, тіні, UI-генератори.
- 11: Розташування елементів (CSS) — Relative/Absolute, z-index, селектори по ієрархії, класи та ідентифікатори, зовнішні таблиці стилів.
- 12: Таблиці — Структура таблиці, об'єднання комірок, оформлення класами, карти посилань, застаріла таблична верстка.
- 13: Медіазапити — Синтаксис медіазапитів, логічні оператори, viewport, стратегії адаптивності, орієнтири по розмірах екрану.
- 14: Псевдокласи та анімації CSS — Псевдокласи тексту, посилань, кнопок, оформлення списків, бібліотека Animate.css, практика блоків.
- 15: Підсумки базової верстки — Розподіл наповнення та оформлення, ініціатива доступності Web, розміщення сторінок в інтернеті.
- 16: Адаптивність та кросбраузерність — Гумовий сайт, media-запити, Flexbox, сітки, особливості браузерів, інструменти перевірки.
- 17: Flexbox — Гнучкий контейнер, осі, порядок елементів, багаторядковість, коефіцієнти зростання/стиснення, вирівнювання.
- 18: Advanced CSS — Складні селектори, !important, псевдо-елементи, трансформації, БЕМ, Bootstrap, SASS/LESS.
- 19: Основи JavaScript — Підключення JS, jQuery, обробка подій, показ/приховання елементів, робота з мережею, JS-фреймворки.
- 20: Оформлення веб-проєкту — Фон, градієнти, тіні, типографіка, спецсимволи, формати зображень, Favicon, SVG та Canvas.
- 21: Знайомство з Figma — Фрейми, компоненти, Auto Layout, стилі — сучасний інструмент UI-дизайнера та верстальника.
- 22: UI-кіт та прототип у Figma — Design System, кольорові токени, варіанти компонентів, інтерактивний прототип для клієнта.
- 23: UX Research та проєктування — User Persona, Customer Journey Map, wireframes, usability testing — думаємо як користувач.
- 24: Анімація CSS та JavaScript — Keyframes, transitions, GSAP, Lottie — живі ефекти на сайті без Flash та додаткових плагінів.
- 25: Adobe Photoshop для Web — Нарізка макету, оптимізація зображень для завантаження, мокапи, ретуш для сайту.
- 26: Motion Design: анімація інтерфейсів — Smart Animate у Figma, мікроанімації, After Effects для лого — як зробити дизайн живим.
- 27: Ведення власних проєктів та фріланс — Upwork, Behance, GitHub Pages — портфоліо, ставки, NDA, перший контракт на веб-дизайн.
- 🚀: Інструменти верстальника. Дипломна робота — Домен та хостинг, Git, таск-трекери, збирачі, мініфікатори. Публікація власного сайту.
