Создание эксклюзивных сайтов с анимацией на Tilda Zero Block. Анастасия Свеженцева, Breezzly

Что узнаете на курсеСначала вы освоитесь в 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. Анимируем мягкое появление дизайнерских коллекций при cкролле блокаШаг 6. Анимируем эффектную заставку, открывающую первый экран сайтаПроект 3. Мобильные версии и адаптация в Zero Block для планшетов и телефоновШаг 1. Адаптация Zero Block под планшеты — тонкости адаптивной верстки на ТильдеШаг 2. Адаптация Zero Block под мобильные телефоны и среда для тестирования на популярных смартфонахШаг 3. Адаптация меню для мобильной в Zero block — создаем «гамбургер»