- #SkladchinaVip
- #1
[Breezzly] Создание эксклюзивных сайтов с анимацией на Tilda Zero Block [Анастасия Свеженцева]
- Ссылка на картинку
-
Что узнаете на курсе
Сначала вы освоитесь в Tilda, а затем возьметесь превращать макеты из Figma в полноценные сайты и настраивать продвинутые анимации. Вас ждет практика по верстке нестандартных композиций, работа с пошаговой анимацией и адаптация дизайна под мобильные. За время курса вы выполните проект по боевому брифу с интересными композициями и анимациями, освоите систему создания сайтов на Tilda Zero Block, станете смелее в экспериментах и воплощении собственных идей!
Чему научитесь
Проект 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 — создаем «гамбургер»
Сначала вы освоитесь в 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 — создаем «гамбургер»