Кейс: как мы сделали стильный сервисный сайт на Тильде, который не похож на шаблонные решения

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

Привет, на связи Молния! Наша фишка — креативные сайты на Тильде, и в рейтинге Рунета мы №1 среди разработчиков сайтов на Tilda Publishing в России.

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

China Logist MD — логистическая компания, которая специализируется на выкупе товаров с таких площадок, как Aliexpress, 1688, Таобао и т. д. Они доставляют товары в Россию любыми способами, но в основном — по воздуху, а также помогают выбрать лучшую фабрику для поставок.

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

Целевая аудитория заказчика — предприниматели, они занимаются торговлей как онлайн, так и офлайн, товары заказывают преимущественно из Китая. А ключевое действие, которое должен совершить пользователь на сайте — оставить заявку на нужный товар, далее China Logist MD сделают всё сами: подберут нужную фабрику и удобный способ доставки.

Главным запросом по дизайну было понятно донести, что доставка происходит именно из Китая. Чтобы более точно понять, как должен выглядеть будущий сайт, наша команда вышла брифинг-созвон с клиентом. Так как экспресс-формат не подразумевает правок, нужно с первого раза попасть в ожидания: для этого обсудили референсы. Рассматривали различные варианты: как яркие и насыщенные деталями, так и минималистичные.

Первый референс — сервисный сайт с хорошо проработанными типографикой и акцентами. Главный из них — активная анимация на первом блоке, которая и привлекла внимание нашего клиента.

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

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

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

Основными цветами сайта выбрали белый и серый, а акцентным — синий. Это не только создаёт чистую картинку, но и воздушную в прямом смысле слова: синий ассоциируется с небом, а белый и серый с облаками.

Дизайнер долго думал, как можно показать, что доставка происходит именно из Китая. Хотелось донести это сразу с первого блока, и, пересмотрев референсы, мы решили соединить карту и анимацию, привлекающую внимание: так родилась идея с самолётами. Они летят чётко по направлению из Китая в разные точки России. Анимация не только заставляет пользователей залипнуть из-за плавного движения, но и решает главный запрос заказчика — понятно обозначить «маршрут» поставок.

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

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

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

Заказчик попросил по возможности разместить на сайте калькулятор, в котором пользователь сможет предварительно рассчитать стоимость доставки и понять, какой формат ему подходит. Мы реализовали эту функцию без использования кода: в Тильде есть стандартный блок, в котором можно настроить различные параметры, например, радиокнопки для выбора конкретного пункта из списка, ползунки для выбора количества/объёма товаров. В зависимости от выбора пользователя форма автоматически подсчитывает стоимость. Если всё устраивает, в этом же блоке можно оставить заявку.

Как правило, все секреты кроются в деталях. Так и в работе над сайтом. Добавить креативности сервисной странице помогла анимация:

• активная на первом блоке привлекает внимание и показывает, откуда происходит доставка;
• по скроллу и наведению на всём сайте концентрирует внимание пользователей на важной информации.

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

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

Лендинг для China Logist MD почти сразу после запуска оценили наши коллеги с Тильды и добавили его в подборку #madeontilda . Видео-кейс в соцсетях более активно собирал комментарии, чем другие кейсы, а некоторые дизайнеры просили сделать туториал на анимацию с 1 блока. Сайт привлекает внимание не за счёт ярких решений, а благодаря небанальным решениям задач с помощью анимации и акцентных элементов.

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

Эти кейсы с похожей сферой бизнеса, но выглядят они по-разному и не похожи друг на друга.

Сайт Factory2basket не минималистичный, а, наоборот, наполнен деталями. Он имеет более яркие и сочные цвета. Плашки оформлены с помощью линий, углы более острые. А вот анимация наоборот менее активная.

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

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

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