Создание лендингов во многих компаниях сегодня поставлено на конвейер, и результаты этого «творчества» – соответствующие. Страницы выходят похожими одна на другую лишь с небольшими различиями. Они лишены оригинальных решений и авторских идей, которые привнесли бы в них свою «изюминку», выделили бы их среди других.
Данная статья посвящена им – landing page с «изюминкой». Конечно же, они не являются панацеей, способной дать качественный трафик без комплексного продвижения в Сети... Однако, их можно смело назвать удачным решением и важной составляющей целого комплекса, который облегчает привлечение трафика.
Расширенная форма оформления заказа с калькулятором
Разрабатывая лендинг «под ключ» для компании «ТОП Массив», мы предложили не совсем обычную форму заявки. Она объединена с калькулятором, который позволяет заказчику увидеть ориентировочную стоимость заказываемой перегородки, а также с конструктором, который позволяет выбрать целый ряд параметров: от высоты и ширины дверного проёма до материала и цвета изделия, а также вида стекла.
Кто-то спросит: «Зачем все эти сложности?»... Что ж, компания получит свои лиды даже при оформлении шаблонной заявки – но мы исходили из интересов заказчика. Ему однозначно будет интересно увидеть то, как будет выглядеть перегородка в том или ином решении, и уже после этого оформлять заказ.
Две кнопки “Call to Action”
Необычные лендинги предлагают расширенные решения. Создание сайта-лендинга для авторемонтного сервиса “KDSS сервис” направило специалистов “SerpTop” по пути разработки сразу двух кнопок, призывающих к действию. Одна из них предлагает задать вопросы специалистам, вторая – записаться на ремонт.
Сомневающиеся автовладельцы нажимают на первую кнопку и получают желаемую информацию – ну а те, кто уже определился, нажимают на вторую. Такой подход позволил увеличить конверсию и создать не только красивый, но и эффективный лендинг.
Конкретные цифры и факты
Нижеприведённое решение не является новым, однако хорошо работает, а потому мы его и используем. Заказчикам нужны не расплывчатые фразы о многолетнем опыте работы или сотрудничестве с целым рядом компаний. Им нужны конкретные цифры и примеры, говорящие лучше любых слов. Именно такое решение мы использовали при создании лендинг-пейдж для компании «ЩЛЗ», которая занимается обрамлением лифтовых порталов.
Потенциальный заказчик может увидеть, с какими застройщиками уже работает компания, их число, а также сколько лет она ведёт свою деятельность.
Переходим на личности
Что может быть хуже скучного вечера, который никак не закончится? Спросите в “Serptop” – и мы Вам ответим: безликий landing! Разрабатывая решение для офтальмологической клиники «Сфера», мы понимали, что оно должно быть ярким и запоминающимся. Кто мог представить своё детище лучше, чем его основатель – главный врач, профессор, доктор медицинских наук?
Так клиника обрела своё лицо, а пациенты поняли, что имеют дело с настоящим профессионалом, который знает и любит своё дело, вкладывая в него свою душу.
Всего один клик – и дело в шляпе!
Опять же, фишка с привлечением потенциального клиента на страницу бренда в соцсетях через лендинг не нова. Разрабатывая одностраничник для итальянского бренда колготок “Omsa”, мы попробовали уйти от стандартных решений в виде обычных иконок, а создали красивый блок.
В нём отображены реальные фотографии из профиля компании в “Instagram”, а также представлена информация о том, что именно там проводятся акции, конкурсы и печатаются новости. Многих посетителей заинтересовало это предложение, а потому количество подписчиков увеличилось.
Отзывы клиентов/пациентов/покупателей/партнёров
Разрабатывая одностраничник для офтальмологической клиники «Сфера», мы решили, что пациенты желали бы узнать не только о методах лазерной коррекции зрения, но и о впечатлениях тех, кто уже прошёл лечение по тому или иному из них. Для этого были созданы разделы с реальными отзывами пациентов.
Результаты налицо!
Возможность увидеть результаты работы той или иной компании (например, её реализованные проекты) – лучше всяких слов. Именно поэтому мы используем модули под названием «Проекты» с галереями, в которых представлены фотографии установленных дверей, перегородок, лифтовых обрамлений и прочего-прочего-прочего.
На скриншоте лендинга для компании «ТОП Массив», представленном выше, можно увидеть двери, заказанные у неё и установленные её специалистами. Заказчик может увидеть реальные результаты работы, которые не скрывают, а, напротив, демонстрируют, что вызовет его доверие.
Привлекающий внимание слайдер
Конечно же, использованием слайдера никого не удивишь, а вот его необычной реализацией – можно. Для посадочной страницы бара «Молодёжь» мы выбрали решение в виде карусели с необычным выдвижением слайдов.
Она сразу привлекает внимание посетителей, поэтому мы посвятили её событиям, которые будут проводиться в баре, сразу убив двух зайцев.
Продуманная анимация
Отличным примером удачного использования анимации может послужить сайт профессионального разработчика и дизайнера веб-приложений Себастьяна Лемпенса.
Использованная на нём анимация продуманна и изысканна, а это говорит о том, что он знает своё дело. Его сайт чем-то похож на открытку или электронную книгу-игрушку со множеством подвижных элементов, которые вдруг возникают перед пользователем или меняют свой внешний вид.
Уникальность за счёт авторских иллюстраций
Авторские иллюстрации уникальны, а потому способны выделить любой шаблонный landing и перевести его на другой уровень. Конечно же, важно, чтобы они были, что называется, в тему и по теме и соответствовали ожиданиям целевой аудитории. В качестве примера идеально подойдёт вот этот сайт компании, доставляющей экзотические фрукты на дом, с его ярким рисованным баннером.
Ещё одним примером может послужить сайт компании “Sift” с анимированными авторскими иллюстрациями, в полной мере отображающими атмосферу предлагаемого продукта. Это – необычный сервис, модифицирующий новостной контент для снижения стресса у читателей.
Одна landing page для решения двух задач
Если одна страница решает сразу две или больше задач, её называют «мультилендинг». Что это значит? А то, что решение на странице меняется в зависимости от того, что именно нужно пользователю. По такому принципу построен одностраничник для авторемонтного сервиса “KDSS сервис”.
Мы решили создать не два раздельных лендинга по ремонту KDSS “Toyota” и “Lexus”, а один-единый, использовав разные цветовые гаммы для оформления и уникальный текстовый контент для подробного описания той или иной услуги. Для каждой из марок авто есть свой прайс-лист с ценами на услуги, указаны модели, оборудованные KDSS, а также предусмотрена удобная форма для записи на диагностику, в которой владельцу предлагается указать модель его авто.
Залипалка в виде эффекта “Hover”
В переводе с английского языка “hover” значит «наводить курсор компьютерной мыши». Эффект с этим названием создаётся именно в такой момент и заключается в том, что при наведении курсора на изображение оно меняется. Этим оно привлекает внимание пользователя, который может надолго залипнуть на странице, «играясь» с изображениями. В результате он нередко оформляет покупку или заказывает услугу!
Видео по ссылке: https://freefrontend.com/assets/img/css-hover-effects/smooth-and-sharp.mp4
Разделённый экран
Ещё одно интересное решение называется “split screen”, что в переводе значит «разделённый экран». Его суть в том, чтобы пользователь обратил внимание на обе его части и гарантированно усвоил информацию, на них представленную. Этот вариант идеален в том случае, если нужно прорекламировать два товара или две услуги одновременно. Вот так это может выглядеть на практике:
Согласитесь, действительно привлекает внимание! Web-дизайнеры используют этот приём из-за его высокого юзабилити. Оно проявлено целым рядом характеристик, начиная с простоты восприятия информации и заканчивая удобством организации контента. В последнем случае split-дизайн даёт возможность расположить большой объём информации.
Использование интерактивного дизайна в формате “3D”
Поистине замечательным решением, способным продемонстрировать интерактивный 3D-дизайн во всей его красе, можно назвать лендинг многопрофильной творческой студии “Dogstudio”.
Здесь предусмотрено изменение цвета и фона, а также ракурса пса и других трёхмерных элементов – что, надо сказать, весьма и весьма впечатляет! Такой лендинг точно не потеряется среди других и станет лучшим доказательством креативности исполнителя.
Выбор фактур, цветов и декора
Мы неоднократно реализовывали данное решение на сайтах производителей дверей, но в случае с landing’ом пока существует лишь одна реализация. Это – одностраничник для компании «ТОП Массив», посвящённый межкомнатным перегородкам.
Пользователь имеет возможность выбрать необходимую высоту и ширину дверного проёма, материал для изготовления перегородки, а также её цвет. Помимо этого, ему доступен выбор вида заполнения для дверного полотна. При выборе тех или иных элементов внизу отображается итоговая стоимость перегородки, а также имеется возможность перейти в форму заказа.
Различные виды прелоадеров
Английское слово “preloader” переводится как «предзагрузчик». Это – особый индикатор, информирующий пользователя о том, что страница пребывает в процессе загрузки. Его правильное применение позволяет сделать landing более привлекательным и удобным для пользователя. Прелоадеры могут выглядеть по-разному:
Ещё одна их функция заключается в скрытии того или иного изображения на странице в процессе загрузки. Дело в том, что на разных браузерах загрузка может происходить неравномерно, из-за чего изображение плывёт. Пользователь может решить, что на сайте имеются технические проблемы, и покинуть его... А вот красивый предзагрузчик позволит избежать подобной неприятности.
Вы тоже хотите, чтобы Ваша посадочная страница не была похожа на другие и действительно работала? Обращайтесь в “SerpTop” – и мы разработаем для Вас интересное и эффективное решение!