Вдохновляемся дизайном — от сайта парикмахерской до портфолио фотографа
Сотни компаний предпочитают собирать свои сайты в конструкторе Tilda. Если пойти дальше готовых блоков, можно разработать уникальный лендинг — с необычной версткой, залипательно анимацией и атмосферной музыкой.
Собрали 10 примеров стильных лендингов на Tilda — для вдохновения всем, кому предстоит оформить свой проект.
| Сайты для бизнеса — управление вниманием и плавный переход к заказу | |
| Портфолио специалистов — трансляция экспертности | |
| Тематические спецпроекты — повышение узнаваемости через креативную верстку |
Сайт: sopicoviz.ru
В чем крутость. На сайте студии архитектурной визуализации много кейсов — серьезных и детализированных 3D-рендеров интерьера и зданий. Все проекты объединяет легкий дизайн — уже на первом экране летящие стулья, округлые кнопки, динамичные шрифты с растягивающимися буквами.
Дальше блоки плавно перетекают один в другой, как будто фото интерьера всплывают из воды. Где-то поверх указаны программы, навыки команды и прочие формальности. А общее настроение подтверждают формулировки в основном тексте: «сложные штуки дрюки», «МАГИЯ, не иначе!».
Где пригодится. SOPICO VIZ транслирует универсальные идеи — плавные блоки и акцентные шрифты можно применить в любой сфере, где уместен креатив. Например, онлайн-школе для детей, студии загара или даже портфолио корректора, если он работает с художественными книгами и текстами для контент-маркетинга.
Сайт: mute.moscow
В чем крутость. На сайте парикмахерской логично увидеть стильные стрижки и фото довольных клиентов после окрашивания или завивки. Но mute° нарушают ожидания — уводят все фото и фон в черно-синий градиент, размывают часть сайта сверху и снизу.
На странице много простых таблиц — в них только текстом передали преимущества, услуги и стоимость. Такой прием из шаблонных блоков помог сбалансировать яркие акценты. Фото стрижек тоже есть, но ближе к середине сайта и в тоновой обработке. Снимки скорее передают эстетику, характер гостей парикмахерской, а не просто демонстрируют кейсы мастера.
Где пригодится. Дизайн с уклоном в эстетику можно выбрать для сферы ухода и бьюти — салонов красоты, SPA-центров или флоатинга. А также авторских и камерных студий, например по растяжке, йоге, танцам.
Сайт: modernenglish.pro
В чем крутость. Школа английского языка для взрослых оформила свой сайт как рабочий стол Apple MacBook. Папки из этой операционной системы есть в каждом блоке — они ведут на попапы с мотивационным письмом и информацией от лица преподавателей.
В свободной и хаотичной верстке нашлось место для пленочных фотографий из путешествий, коллажей, стикеров с заметками. Так дизайнер передал ощущение подготовки к приключению — сборки чемоданов, покупке билетов. Еще прием показывает, что школа не учит «грамматике по учебнику», а выбирает современные методики — на разговорную лексику.
Где пригодится. Сайт с коллажной версткой подойдет проектам, в которых важно транслировать ценности и показать процесс, а не дать четкий алгоритм. Например, обучающим курсам, ивент-агентствам, магазинам брендовой одежды и необычных подарков.
Сайт: toster.unisender.com
В чем крутость. Спецпроект с первого экрана погружает в атмосферу праздника — елочные игрушки и гирлянды в фирменных цветах, анимация снега и даже настоящая музыка. А узнаваемый маскот органично выглядит с мешком подарков.
Дальше сайт полностью интерактивный — чтобы перейти к поздравлению, пользователю нужно выбрать профессию и стиль на открытке. Дизайн в виде кнопок, которые меняют цвет при выборе, подталкивает к действию. В этом есть смысл — команда проекта постаралась написать интересные тексты, которыми будут делиться, а не просто прочитают и закроют сайт.
Где пригодится. Спецпроект с музыкой на фоне и интерактивными кнопками можно сделать на Tilda в Zero Block, а также с помощью кода на HTML. Это уместно к тематическому или профессиональному празднику. Например, магазин цветов может создать спецпроект к 8 Марта, а детский лагерь — к началу летних каникул.
Сайт: kashakov.art
В чем крутость. Через сайт-визитку продуктовый дизайнер делает акцент на аналитике и исследованиях, решении задач бизнеса. Простая, но интересная анимация усиливает впечатление — отдельные слова напечатаны кодом, встроены в бегущую строку или заново набиваются спецсимволами.
На странице всего три основных раздела — этого достаточно, чтобы узнать о специалисте больше и посмотреть кейсы. Внутри каждой карточки акцент не столько на UX/UI, сколько на цифрах и результатах. Дизайнер не оставляет будущему клиенту другого выбора, кроме как нажать на кнопку с мессенджером или «Связаться со мной».
Где пригодится. Акценты уместны в портфолио любого специалиста. Если вы работаете на стыке креатива и логики — можно подсветить свою профессию, фокус внимания и достижения через дополнительный стиль текста и небольшие анимации.
Сайт: catsandplants.ru
В чем крутость. Инфографика в виде лендинга объясняет, какие растения стоит убрать подальше от мягких лапок, а какие подойдут для домашнего озеленения. В меню только два раздела для быстрого перехода — «токсичные» и «безопасные».
Все тезисы в тексте подкрепляются гиперссылками на исследования. На сайте много анимации — с первого же экрана два зорких глаза следят за мышкой, а пушистый хвост недовольно машет по сторонам. Композиция выглядит органично, так как дизайнер поработал над сочетанием цветов, эмоциями и поведением рисованных кошачьих.
Где пригодится. Идея подойдет для любой инфографики — на лендинге можно отразить инструкцию по тому, как ухаживать за лицом, работать за ноутбуком или выбирать фрукты в магазине. Анимация не даст заскучать, а в иллюстрации можно ненавязчиво встроить продукцию бренда.
Сайт: siniekladovki.ru
В чем крутость. На главном экране самые разные вещи, которые обычно можно найти на балконе, бодро залетают в синюю кладовку: кресло, шлем, коньки, пуховик. После анимации взгляд цепляется уже за саму услугу — аренда места на складе.
Лендинг не ограничивается стоковыми фото на синем фоне — дальше идут стандартные разделы с услугой и стоимостью, картой и FAQ. При наведении на кладовку из каталога отображается продуманная фотография — с чемоданом для ориентира.
Где пригодится. Бренд с необычным названием может обыграть его с помощью лендинга — изменить все цвета на один фирменный, добавить в каждый раздел метафору или маскота. Важно не переборщить и оставить основные элементы узнаваемыми. Например, для офлайн-услуги это точный адрес и карта, кнопка заказа или обратного звонка.
В чем крутость. В каждое термин словаря заложен свой стиль шрифта и тематическая анимация. Тут и жесты руками, и папка, есть даже пиксельный бабушкин ковер. Блоки интерактивные — при клике отображается всплывающая подсказка с термином и синонимами. Весь лендинг вписан в один экран, похожий на коллаж или мудборд. Такая верстка называется Bento UI. В Японии bento — это еда, упакованная в порционные контейнеры. А на странице сайта в контейнеры упакованы текстовые блоки и картинки.
После клика по слову открывается три карточки с синонимами и примерами употребления. Сам термин вписан в композицию, есть анимации-пасхалки. Например, можно открыть краешек письма. Чтобы в глаза зрителя не рябило, задний пестрый фон сильно размыт.
Где пригодится. Спецпроект в формате словаря, книги или серии писем пригодится брендам, которые работают со сложными для аудитории сферами. Например, атомной энергетикой, ингредиентами для изготовления косметики, строительством ЖК. Главное — найти баланс между развлекательным дизайном и серьезным содержанием.
Сайт: pokaifu.com
В чем крутость. Сайт веб-студии POKAIFU сочетает фирменный акцентный шрифт с 3D-объектами. Пользователь управляет не курсором, а точкой — она растягивается до кнопки «Смотреть» на кейсе, активирует появление котиков и резиновых уточек.
Лендинг сам по себе выглядит как сильное портфолио — у них на странице по кайфу, могут и вам собрать такую же. После главного экрана сразу же идут кейсы в бенто-сетке. У каждого проекта свое серьезное и не очень оформление, что дополнительно подчеркивает мысль об универсальности навыков у дизайнеров.
Где пригодится. С помощью анимации на Tilda можно выйти с пользователем на диалог — показать, что с сайтом стоит активнее взаимодействовать. И предложить что-то интересное для этого. Например, если у вас дизайн-бюро, пекарня, магазин детских развивающих игрушек.
Сайт: lebedeva-photo.tilda.ws
В чем крутость. Портфолио фотографа начинается с вдохновляющего слогана — «Помогаю влюбиться в себя с помощью объектива». Часть текста написана от руки, чтобы сделать акцент на «себя» и передать ощущение съемки, на которой можно быть неидеальной.
Остальные разделы портфолио — это тоже сторителлинг с погружением в детали съемки и более крупными примерами разных кадров. Чтобы упорядочить и сбалансировать фото и текст, дизайнер выбрал журнальный стиль и перенес часть тезисов на простые плашки.
Где пригодится. Если в портфолио нужно показать много визуального контента, общих планов и макросъемки, все кадры можно объединить через тезисы — рассказать в лендинге «историю» о своей работе. Важно сразу выбрать единый стиль и оформить остальные блоки по брендбуку. Такой прием подойдет иллюстратору, фотографу, художнику, резчику по дереву, керамисту.
Мы разобрали 10 стильных лендингов, которые решают маркетинговые и бизнес-задачи с помощью разных элементов — текста, дизайна шрифтов, анимации, музыки. Все собрали на Tilda с помощью Zero Block или кода HTML.
Вот какие выводы можно сделать из анализа дизайна:
Читайте только в Конверте
Отправляйте красивые письма, делитесь классным контентом, привлекайте больше платящих клиентов. До 1 500 писем бесплатно.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
