10 лучших лендингов на Tilda

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

Собрали 10 примеров стильных лендингов на Tilda — для вдохновения всем, кому предстоит оформить свой проект.

SOPICO VIZ

Сайт: sopicoviz.ru

В чем крутость. На сайте студии архитектурной визуализации много кейсов — серьезных и детализированных 3D-рендеров интерьера и зданий. Все проекты объединяет легкий дизайн — уже на первом экране летящие стулья, округлые кнопки, динамичные шрифты с растягивающимися буквами.

Дальше блоки плавно перетекают один в другой, как будто фото интерьера всплывают из воды. Где-то поверх указаны программы, навыки команды и прочие формальности. А общее настроение подтверждают формулировки в основном тексте: «сложные штуки дрюки», «МАГИЯ, не иначе!». 

Где пригодится. SOPICO VIZ транслирует универсальные идеи — плавные блоки и акцентные шрифты можно применить в любой сфере, где уместен креатив. Например, онлайн-школе для детей, студии загара или даже портфолио корректора, если он работает с художественными книгами и текстами для контент-маркетинга.

Парикмахерские mute°

Сайт: mute.moscow

В чем крутость. На сайте парикмахерской логично увидеть стильные стрижки и фото довольных клиентов после окрашивания или завивки. Но mute° нарушают ожидания — уводят все фото и фон в черно-синий градиент, размывают часть сайта сверху и снизу.

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

Где пригодится. Дизайн с уклоном в эстетику можно выбрать для сферы ухода и бьюти — салонов красоты, SPA-центров или флоатинга. А также авторских и камерных студий, например по растяжке, йоге, танцам. 

Modern English School

Сайт: modernenglish.pro

В чем крутость. Школа английского языка для взрослых оформила свой сайт как рабочий стол Apple MacBook. Папки из этой операционной системы есть в каждом блоке — они ведут на попапы с мотивационным письмом и информацией от лица преподавателей.

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

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

Новогодний тостер от Unisender

Сайт: toster.unisender.com 

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

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

Где пригодится. Спецпроект с музыкой на фоне и интерактивными кнопками можно сделать на Tilda в Zero Block, а также с помощью кода на HTML. Это уместно к тематическому или профессиональному празднику. Например, магазин цветов может создать спецпроект к 8 Марта, а детский лагерь — к началу летних каникул.

Artem Kashakov

Сайт: kashakov.art 

В чем крутость. Через сайт-визитку продуктовый дизайнер делает акцент на аналитике и исследованиях, решении задач бизнеса. Простая, но интересная анимация усиливает впечатление — отдельные слова напечатаны кодом, встроены в бегущую строку или заново набиваются спецсимволами.

На странице всего три основных раздела — этого достаточно, чтобы узнать о специалисте больше и посмотреть кейсы. Внутри каждой карточки акцент не столько на UX/UI, сколько на цифрах и результатах. Дизайнер не оставляет будущему клиенту другого выбора, кроме как нажать на кнопку с мессенджером или «Связаться со мной».

Где пригодится. Акценты уместны в портфолио любого специалиста. Если вы работаете на стыке креатива и логики — можно подсветить свою профессию, фокус внимания и достижения через дополнительный стиль текста и небольшие анимации.

Котики и растения

Сайт: catsandplants.ru 

В чем крутость. Инфографика в виде лендинга объясняет, какие растения стоит убрать подальше от мягких лапок, а какие подойдут для домашнего озеленения. В меню только два раздела для быстрого перехода — «токсичные» и «безопасные».

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

Где пригодится. Идея подойдет для любой инфографики — на лендинге можно отразить инструкцию по тому, как ухаживать за лицом, работать за ноутбуком или выбирать фрукты в магазине. Анимация не даст заскучать, а в иллюстрации можно ненавязчиво встроить продукцию бренда.

Синие кладовки

Сайт: siniekladovki.ru

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

Лендинг не ограничивается стоковыми фото на синем фоне — дальше идут стандартные разделы с услугой и стоимостью, картой и FAQ. При наведении на кладовку из каталога отображается продуманная фотография — с чемоданом для ориентира.

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

Слова Славярика

Сайт: https://slavyarik.tilda.ws/words 

В чем крутость. В каждое термин словаря заложен свой стиль шрифта и тематическая анимация. Тут и жесты руками, и папка, есть даже пиксельный бабушкин ковер. Блоки интерактивные — при клике отображается всплывающая подсказка с термином и синонимами. Весь лендинг вписан в один экран, похожий на коллаж или мудборд. Такая верстка называется Bento UI. В Японии bento — это еда, упакованная в порционные контейнеры. А на странице сайта в контейнеры упакованы текстовые блоки и картинки.

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

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

POKAIFU

Сайт: pokaifu.com 

В чем крутость. Сайт веб-студии POKAIFU сочетает фирменный акцентный шрифт с 3D-объектами. Пользователь управляет не курсором, а точкой — она растягивается до кнопки «Смотреть» на кейсе, активирует появление котиков и резиновых уточек.

Лендинг сам по себе выглядит как сильное портфолио — у них на странице по кайфу, могут и вам собрать такую же. После главного экрана сразу же идут кейсы в бенто-сетке. У каждого проекта свое серьезное и не очень оформление, что дополнительно подчеркивает мысль об универсальности навыков у дизайнеров.

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

Мари Лебедева

Сайт: lebedeva-photo.tilda.ws 

В чем крутость. Портфолио фотографа начинается с вдохновляющего слогана — «Помогаю влюбиться в себя с помощью объектива». Часть текста написана от руки, чтобы сделать акцент на «себя» и передать ощущение съемки, на которой можно быть неидеальной.

Остальные разделы портфолио — это тоже сторителлинг с погружением в детали съемки и более крупными примерами разных кадров. Чтобы упорядочить и  сбалансировать фото и текст, дизайнер выбрал журнальный стиль и перенес часть тезисов на простые плашки. 

Где пригодится. Если в портфолио нужно показать много визуального контента, общих планов и макросъемки, все кадры можно объединить через тезисы — рассказать в лендинге «историю» о своей работе. Важно сразу выбрать единый стиль и оформить остальные блоки по брендбуку. Такой прием подойдет иллюстратору, фотографу, художнику, резчику по дереву, керамисту. 

Какие задачи можно решить с помощью контента на лендинге

Мы разобрали 10 стильных лендингов, которые решают маркетинговые и бизнес-задачи с помощью разных элементов — текста, дизайна шрифтов, анимации, музыки. Все собрали на Tilda с помощью Zero Block или кода HTML. 

Вот какие выводы можно сделать из анализа дизайна:

• Если нужно получить заявки на простую услугу, в композиции нужно собрать знакомые разделы «Преимущества», «Кейсы», «Тарифы», «Почему нам можно доверять». Можно выбрать верстку в стиле «бенто» и расставить акценты через простую анимацию при наведении.
• Если важно создать впечатление и через лендинг показать результат от услуги, подойдет интересная верстка и эффекты — появление нового объекта, размытие, глитч.
• Для спецпроекта на первый план выходит содержание. Например, обучающий лонгрид или поздравление для коллег. Элементы лендинга должны направлять пользователя по ходу чтения и помогать ему выполнить действие.