Автор: Анастасия Свеженцева
В этом проекте вы осваиваете ключевые возможности создания веб-проектов на Tilda Zero Block: от верстки свободных композиций до применения принципов отзывчивого дизайна.
Шаг 1. Знакомство с Tilda Zero Block и погружение в проект
Подготовим Tilda к работе: подключим шрифты с библиотеки шрифтов Google Fonts, оглядимся в стандартных блоках, сделаем первые шаги в Zero block
Шаг 2. Создадим витрину промо-страницы (первый экран) по дизайну в Figma
Сверстаем первый экран сайта с учетом всех тонкостей дизайна Figma. Освоим основные инструменты верстки: тексты, изображения, векторные объекты, кнопки. Сделаем наш дизайн отзывчивым с помощью Grid и Window Container
Шаг 3. Разработаем интерактивный каталог с интересными шрифтовыми стилями
Зададим шрифты и шрифтовые стили. Сверстаем наведенное состояние для выбранного пункта каталога. Научимся перемещать объекты между разными zero-блоками
Шаг 4. Сверстаем популярные подборки по нестандартной сетке
Освоим работу с композицией и сеткой в Tilda Zero Block. Применим дизайнерские лайфхаки для ускорения дизайна в редакторе Тильды, такие как дублирование группы объектов
Шаг 5. Добавим атмосферный блок с цитатой
Освоим верстку «внахлест» и реализуем наезжание объекта из одного Zero-блока на другой. Тем самым добьемся эффекта мягкой границы между блоками лонгрида. А также вас ждет мини-лайфхак — применение двух шрифтов в одном абзаце
Шаг 6. Создадим интерактивную демонстрацию с помощью Tilda ToolTip
С помощью координат Window Container сделаем так, чтобы интерактивные подсказки цеплялись к нужным местам фотографии
Шаг 7. Освоим работу с панелью слоев и подготовим коллаж капсулы
«Нулевой» блок (Zero Block) — это профессиональный редактор внутри Тильды, в котором тоже есть слои, как в популярных графических редакторах. Работа со слоями помогает делать интересные коллажи в дизайне, а затем анимировать каждый слой
Шаг 8. Разработаем блок с отзывами и настроим формы сбора контактов
Возьмем стандартный компонент «Форма» и с помощью панели свойств настроим ее стили, как в дизайне. А также снова попробуем технику «нахлест» для сквозной графики у двух блоков (векторная линия)
Было полезно? Ставь лайк
#tilda #web-дизайн #вебдизайн #разработкавеб-сайтов #разработкасайтов