Результат
Разработан Landing page в демонстрационных целях
Задача
Стояла задача продемонстрировать навыки резиновой вёрстки (Window container) сайтов на Tilda, используя Z-блоки, анимацию и программные модификации
Запуск сайта: 29.12.2023 г.
Шрифт и цвета
Цвета
Темная тема на сайте увеличивает эффект премиальности, имеющийся фотоконтент так же «требовал» темного фона. Сайт выполнен в стиле минимализм, поэтому использовано минимум цветов
Шрифт
Для заголовков и текста был выбран шрифт Inter Display
#FFFFFF
#020202
ОСОБЕННОСТИ проекта
Резиновая вёрстка
Сайт выполнен по Window container (резиновая вёрстка). Данный тип вёрстки следует использовать, когда есть качественный фотоконтент, который стоит продемонстрировать. Для резиновой вёрстки зачастую подходит стиль минимализм.
Главное отличие резиновой вёрстки от вёрстки по Grid container, заключается в отсутствии «ушей» на больших экранах слева и справа от контента. Если верстать по гриду, то, независимо от размера экрана монитора, ширина сайта будет всегда одна (1200px). Следовательно, слева и справа останется незаполненное пространство.
При резиновой вёрстке, такой проблемы нет, контент заполняет собой всё свободное пространство, растягивается на всю ширину экрана, размеры шрифтов при этом не меняются.
Аналогом резиновой вёрстки считается Autoscale: контент пропорционально увеличивается или уменьшается в зависимости от размера экрана. Но автоскейл имеет ряд минусов касательно скорости загрузки, а также дизайна: размеры шрифта могут стать слишком большими на широких экранах, в результате чего потеряется утонченность дизайна
Главное отличие резиновой вёрстки от вёрстки по Grid container, заключается в отсутствии «ушей» на больших экранах слева и справа от контента. Если верстать по гриду, то, независимо от размера экрана монитора, ширина сайта будет всегда одна (1200px). Следовательно, слева и справа останется незаполненное пространство.
При резиновой вёрстке, такой проблемы нет, контент заполняет собой всё свободное пространство, растягивается на всю ширину экрана, размеры шрифтов при этом не меняются.
Аналогом резиновой вёрстки считается Autoscale: контент пропорционально увеличивается или уменьшается в зависимости от размера экрана. Но автоскейл имеет ряд минусов касательно скорости загрузки, а также дизайна: размеры шрифта могут стать слишком большими на широких экранах, в результате чего потеряется утонченность дизайна
Grid container
Window container
Модификации и анимация
На сайт было добавлено несколько небольших модификаций: для плавного доскролла страницы и для блока с товарами. Так же была настроена базовая анимация появления элементов снизу экрана
Результат работы
Проект завершён
Сайт был создан в демонстрационных целях, чтобы наглядно показать разницу между Window и Grid container