Курс по веб-дизайну · Урок 8 из 24
Лендинг на Тильде в стиле «Клякса»: сетка и анимация
Автор курса — Данил Фимушкин.
Выпуск запланирован · 28.12.2026 · 19:00 МСК
Видео будет добавлено после подготовки выпуска. Ниже — программа и задания для самостоятельной работы.
Программа урока
Теория
- Что такое дизайн-концепция?
- 4 примера сайта с разными стилями
- Что отражает дизайн-концепцию на первом экрана сайта?
- Как дизайн-концепция помогает при общении с заказчиками?
- Что такое Shape в Тильде?
- Правила создания композиции на примерах
- Композиционные ошибки при работе с графическими элементами
- Способы работы с обрезанными изображениями
- Как красиво размыть фигуру?
- Что такое «грязная тень»?
- Сетка: важный инструмент для работы с композицией
- Как быстро найти нужный блок в Тильде?
- Типичная ошибка в работе с фотографиями: пропорции людей и объектов
Делаем вместе (по видео)
- Как создать главную страницу в Тильде?
- Создаем страницу «Клякса»
- Работа с графическими изображениями и текстом
- Как создать графические фигуры в Тильде?
- Как удобно перемещать маленькие объекты?
- Тестируем создание мягкой тени
- Как включить/выключить сетку в любом блоке?
- Создаем кляксу с помощью специального сервиса
- Как переместить элемент на задний план?
- Добавляем информационные блоки и корректируем отступы
- Настройка пошаговой анимации для фигур
- Редактируем контент блока с переключателем: задаем ID
- Наглядный пример, как правильно выравнивать элементы по сетке
- Как с помощью нейросети быстро удалить фон с фото?
- Возможности сервиса для вырезания фото
- Инструмент для быстрого кадрирования изображений в Тильде
Практика после урока
1. Повторите учебный лендинг в стиле «Клякса»: первый экран, анимация форм, программа с переключателями и блок ведущих.
2. Адаптируйте страницу под разные экраны и проверьте опубликованный результат.
3. Для дополнительной практики создайте ещё одну страницу в этом стиле по тексту из материалов.
Тильда для практики курса · партнёрская ссылка
Материалы курса в Telegram
