Що дізнаєтеся на курсі
Спочатку ви освоїтеся в Tilda, а потім візьметеся перетворювати макети з Figma в повноцінні сайти і налаштовувати просунуті анімації. Вас чекає практика по верстці нестандартних композицій, робота з покроковою анімацією і адаптація дизайну під мобільні. За час курсу ви виконаєте проект з бойового брифу з цікавими композиціями і анімаціями, освоїте систему створення сайтів на Tilda Zero Block, станете сміливіше в експериментах і втіленні власних ідей!
чому навчитеся
- вибудовувати робочий процес і організовувати роботу по створенню сайтів в Тільді
- верстати дизайни з Figma з унікальним дизайном в Tilda Zero Block
- працювати з сіткою і робити чуйний дизайн за допомогою Grid і Window Container
- анімувати елементи сайту за допомогою базової і просунутої покрокової анімації
- додавати зображенням анімацію з ефектом паралакс
- налаштовувати просунуту тригерну анімацію при взаємодії з об'єктами на екрані
- адаптувати дизайн під смартфони та планшети
- додавати і налаштовувати форми на сайті для збору замовлень
Проект 1. Верстка унікального дизайну з Figma в Tilda Zero Block-командна гра Figma і Tilda
Крок 1. Знайомство з проектом та огляд Tilda
Крок 2. Створимо вітрину промо-сторінки (перший екран) по дизайну в Figma
Крок 3. Розробимо інтерактивний каталог з цікавими шрифтовими стилями
Крок 4. Зверстаємо популярні добірки по нестандартній сітці
Крок 5. Додамо атмосферний блок з цитатою
Крок 6. Створимо інтерактивну демонстрацію за допомогою Tilda ToolTip
Крок 7. Освоїмо роботу з панеллю шарів і підготуємо колаж капсули
Крок 8. Розробимо блок з відгуками і налаштуємо форми збору контактів
Проект 2. Принципи анімації в Tilda Zero Block-від прототипів до просунутої анімації в тільді
Крок 1. Знайомство з покроковою анімацією в Tilda Zero Block, Налаштування анімації заголовка і фото продукту в першому екрані
Крок 2. Оркестровка анімації груп об'єктів з власною траєкторією за допомогою таймлайну
Крок 3. Створюємо інтерактивний шоурил з анімацією по наведенню курсору
Крок 4. Анімуємо інтерактивний каталог
Крок 5. Анімуємо м'яке поява дизайнерських колекцій при скролле блоку
Крок 6. Анімуємо ефектну заставку, що відкриває перший екран сайту
Проект 3. Мобільні версії і адаптація в Zero Block для планшетів і телефонів
Крок 1. Адаптація Zero Block під планшети — тонкощі адаптивної верстки на Тільді
Крок 2. Адаптація Zero Block під мобільні телефони і середовище для тестування на популярних смартфонах
Крок 3. Адаптація меню для мобільного в Zero block-створюємо"гамбургер"
https://privatelink.de/?https://breezzly.ru/catalog/tilda-design