1 место на Tilda Design Battle 2023 - разбор проекта

3 сентября прошел третий Tilda Design Battle, на котором я заняла первое место. В этот раз темой стал легендарный промышленный дизайнер Инго Маурер, про которого необходимо было сделать лонгрид за 15 часов. В 9:00 открыли задание, а к 23:59 — нужно было отправить ссылку.

Сразу скажу, что еще до начала я провела небольшой анализ прошлых двух баттлов и сделала несколько выводов, о которых я напишу подробно далее. Но первое, что мне показалось важным на конкурсе — это продемонстрировать возможности Тильды и пошаговой анимации, поэтому, хоть наша студия и испытывает особую любовь к модификациям, я решила почти не использовать код в этом проекте. На сайте добавлена лишь одна модификация появления заголовка на первом экране, поэтому 99% сайта сделано лишь с помощью возможностей конструктора.

Здесь я хочу рассказать о приёмах в дизайне и верстке, которые я использовала и объяснить, почему, по моему мнению, жюри выбрали мой проект в номинанты, и большинство зрителей проголосовали за сайт.

Как только я увидела тему баттла, то сразу поняла, что раз речь идет о дизайнере ламп, то будет логично использовать переключатель света на всем проекте — белый и черный: в какой-то момент свет на сайте включается, в какой-то -- выключается. Но было важно продемонстрировать это по-особенному эффектно и добавить какую-либо еще идею, так как показалось, что тема с переключателем света достаточно банальна.Так получилось, что ни у кого из номинантов в таком виде этой анимации не было.

Следующая задумка родилась на втором блоке во время отрисовки дизайна. Набросав первые два экрана с переключателем, я подумала, что необходимо дать какую-то роль линиям.

Если у первой линии она была понятна, то решение для второй до меня дошло не сразу. Мне показалось, что будет неожиданно для посетителя сайта увидеть, что вторая линия расположена не просто для сетки и композиции на сайте, а у нее есть особое предназначение -- она показывает следующую страницу журнала, частичка контента которой находится уже в поле зрения. Согласитесь, было неочевидно на втором блоке, что описание дизайнера — это часть следующего экрана, что создало так называемый «вау эффект». С этого момента я решила изложить весь контент в виде журнала с помощью горизонтального скролла — так родилась главная задумка верстки.

Дело оставалось за малым -- нарисовать блоки по аналогии и технически все настроить

Всего на сайте 3 основные анимации, которые мы наблюдаем на протяжении всего сайта:

Уменьшение и закрепление логотипа

Оставляете так, если не нужно, чтобы менялся цвет, но в нашем случае добавляются еще несколько шагов, так как цвет логотипа меняется три раза:

5. То же самое проделываете с пунктами меню, только без шага уменьшения;

6. Блоки в которых находятся меню имеют visible overflow

Продвинутым должно быть не так сложно после инструкции. Но с кодом инверсии цвета это можно сделать намного легче -- мне было важно не использовать код, поэтому проделала все с пошаговой анимацией.

Переключатель света

По сравнению с предыдущей анимацией, переключатель света на всем блоке работает намного проще

Журнальная верстка

До этого проекта мы не использовали горизонтальный скролл в таком формате, но теоретически это казалось нетрудно.

И, действительно, такая верстка работает по принципу обычного горизонтального скролла

Инструкция:

3. Копируем анимацию шейпа на остальные объекты, которые находятся на нем, меняя только trigger offset на координату Y (расположение элемента)

4. Смотрим на результат, корректируя под себя значения

Моя основная задача заключалась в том, чтобы подчеркнуть основные моменты, управляя вниманием посетителя с помощью анимации, при этом сделать проект читабельным и интересным с помощью идей с переключателем света и журнала.

Спасибо всем. Надеюсь, было полезно)

Ссылка на телеграм-канал