Landing page дизайн: Принципы дизайна лендинга // Создание Landing Page

Содержание

Создание дизайна Landing Page / Хабр

Landing Page – (далее по тексту Целевая страница) – одностраничный сайт, построенный таким образом, чтобы обеспечить сбор контактов максимального количества целевых посетителей и максимальную конверсию в контексте его использования.

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

Так научимся же создавать качественные и красивые целевые страницы. Разобьём урок на 3 части. Содержание, Оформление и Практика.

Хронология изложения материала будет идти ОТ НАЧАЛА ДО КОНЦА, так что вы можете смело брать эту статью на вооружение при разработке своего очередного продающего шедевра. Здесь я постараюсь собрать и учесть абсолютно все, что имеет отношение к опыту человечества в разработке целевых страниц и то, что действительно работает, пока такой формат продаж еще актуален.

После теории, в разделе «Практика», мы создадим дизайн, не побоюсь этого слова, «правильной» целевой страницы, с учетом всех рассмотренных правил и рекомендаций.

Часть 1. Содержание Landing Page


1.1 Текст – это всё


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

О тексте по порядку.

1.2 Заголовок целевой страницы


Первое, что вы должны понять – целевая страница создается не для естественной поисковой выдачи, а для рекламы, для конкретного запроса или запросов, под которые будет куплена соответствующая позиция или место на площадке. И вот здесь множество веб-дизайнеров начинает лажать по-полной. Они начинают выдумывать какие-то непонятные заголовки, типа – «Вы обратились по адресу», «Мы – лучшие в своем деле», «Мы такие крутые, что нам в принципе даже не нужно писать о том, чем мы занимаемся».

Понимаете, в чем ошибка? Если пользователь набрал в поисковой строке «Пылесосы iRobot Roomba в Москве», то ему глубоко фиолетово кто вы, какие вы крутые и сколько вы лет на рынке. Он хочет видеть пылесосы iRobot Roomba и иметь возможность купить их в Москве. Чем точнее заголовок соответствует поисковому запросу, тем лучше ваша целевая страница.

Можно усилить заголовок словами «Лучшие, быстрые, самые мощные» и т.д. В результате должно получиться что-то вроде «Умные роботы пылесосы iRobot Roomba в Москве». Не стесняйтесь, это реально работает.

1.3 Меньше воды в тексте


Тут кроется очень заезженная, не всегда очевидная и, в то же время – серьезная ошибка. Вода. Пользователь чувствует воду, он читает текст до тех пор, пока его не начнет очень жестко тошнить от вашего текста. И даже если бы не было текста, а была только яркая картинка пылесоса в заголовке с ценой и кнопкой «Заказать» — то 50 из 100, возможно и купили бы этот пылесос. Но благодаря вашему тексту и потугам в сочинениях, на которые вы убили пол дня – целевая аудитория разбегается во все стороны с тошнотными позывами в сторону горе-страницы и ее автора, в частности.

Как избавиться от воды? Подкрепляйте каждое утверждение ФАКТАМИ, ЦИФРАМИ и ГРАФИКАМИ. Не нужно писать «У нас много довольных клиентов», напишите, сколько довольных клиентов, детализируйте и сегментируйте клиентов. Столько-то женщин приобрело пылесос, столько-то холостяков остались довольны чудо девайсом, столько-то часов данный пылесос сэкономил времени, столько-то часов проработал. Подкрепляйте каждое утверждение цифрами или не делайте утверждения вовсе, чтобы избавить посетителя от желания приобнять белого друга.

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

1.4 Не обманывайте


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

1.5 Выгода/Преимущества


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

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

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

1.6 Указывайте на то, что товар или услуга являются новинкой


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

1.7 Обязательно размещайте отзывы


Дополню. Размещайте НАСТОЯЩИЕ отзывы. Представьте себе ситуацию, зашел потенциальный клиент на целевую страницу, ознакомился с условиями, готов уже был приобрести товар, но наткнулся на типовые, сахарные отзывы, да еще и в придачу, на фотографии, которые уже где-то видел – либо на такой-же целевой странице, либо в каком-либо фотобанке, или в результатах поисковой выдачи. После того как пользователь почувствует обман – вы потеряете его навсегда. Покупают у тех, кому доверяют, у тех, кто лжет никогда не купят.

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

Каждый отзыв должен начинаться заголовком, которым может служить выдержка из текста самого отзыва с описанием преимущества для клиента, например, «

Благодаря пылесосу iRobot Roomba я экономлю около 20 часов на уборке в месяц…». После заголовка идет текст отзыва. Затем, имя того, кто отзыв написал и кем он является – семьянин, ген. директор, бухгалтер, домохозяйка и т.д. Важно, чтобы отзыв был подкреплен не только хорошим заголовком, но и фотографией реального человека. Подчеркивайте важные достижения клиента (благодаря продукту или услуге, естественно) в тексте жирным выделением или цветом, соответственно и в дизайне при оформлении.

1.8 Гарантия возврата денег


Гарантия возврата денег в разы повышает доверие к продавцу и помогает посетителю целевой страницы проще расстаться со своими деньгами. Обязательно сделайте такую микросекцию на целевой странице, подготовьте соответствующий текст для нее в текстовом редакторе для быстрого оформления. Желательно, также использовать печать или визуальный компонент, иконку рядом с гарантийным текстом. Такой элемент усилит эффект восприятия.

Часть 2. Оформление Landing Page


2.1 Продукт в действии


Изображение товара в шапке или на первом экране – это всё. Если вы поняли всё безрассудство написания пустых, не подкрепленных фактами текстов, то уделите это время на создание яркой и красочной картинки товара в шапке. Уделите этому достаточно времени. Экспериментируйте, улучшайте товар или услугу в Фотошопе до тех пор, пока не получите достойный результат.

Очень часто мне приходится наблюдать такой позор, как протухшая на вид пицца в шапке, черно-белая картинка автомобиля, летающий в воздухе непонятный девайс и прочие ошибки. Нужно сделать так, чтобы продукт или услугу захотелось приобрести. Если это пицца, пусть она будет такая аппетитная, с плавленым сырком, яркая, что ее захочется съесть немедля. Добавьте красок продукту, дымка, поджаристую корочку. В пределах разумного, конечно. Покажите продукт в действии. Если это приложение для мобильных устройств – сфотайте пользователя с телефоном и вашей софтиной на борту или, на худой конец, скачайте Mockup PSD с телефоном в руке и разместите скриншот приложения в рабочем состоянии. Еду отображайте яркой, горячей и готовой к употреблению. Это должно быть в шапке. Кроме того, было бы не плохо выложить видео с презентацией продукта. Лаконичный заголовок, кнопка и продукт в действии…

2.2 Кнопка призыва к действию на первом экране


Тут ни чего сложного – размещайте кнопку призыва к действию («Заказать пылесос») на первом экране. Это, конечно, не значит, что не стоит размещать этот элемент ни где более, просто постарайтесь сделать так, чтобы, зашедший на сайт посетитель увидел возможность приобрести товар или заказать услугу сразу.

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

2.3 Забудьте о попандерах


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

Здесь не идет речь о всплывающих формах, которые появляются при клике на кнопки призыва к действию, кнопки, нажатие на которые пользователь производит сам. Подконтрольные всплывающие формы работают довольно неплохо и не раздражают посетителя.

2.4 Не делайте много полей в формах


Все, для чего нужна целевая страница – это собрать контакт и отправить его на обработку менеджеру. Не добавляйте в формы обратной связи лишние поля. Имя, телефон. Возможно, E-mail, по ситуации. Но не более.

2.5 Не стесняйтесь показывать лица, адреса и телефоны


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

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

2.6 Размещайте логотипы известных брендов


Если компания, для которой вы разрабатываете целевую страницу, каким-то образом работала с известными брендами, пользовалась услугами, техникой – обязательно внизу страницы сделайте их перечисление. Обычно такая секция называется «Наши партнеры».

Итак, мы рассмотрели ключевые моменты, которые необходимо учитывать при разработке Landing Page. Давайте объединим все вышесказанное в следующем разделе, напишем текст и создадим дизайн целевой страницы в Фотошопе.

Разрабатывать Landing Page, волею судьбы, будем для Пылесоса iRobot Roomba. Пример абсолютно рандомный и пришел в голову в процессе написания данного мануала.

Для прохождения урока нам понадобятся исходные данные, которые вы можете взять с GitHub.

Часть 3. Практика


3.1 Текст Landing Page


Итак, после изучения 1 и 2 части у нас уже есть некоторое представление о том, какой должна быть «правильная» целевая страница. Этого вполне достаточно для того, чтобы написать текст. Обратите внимание, выше были приведены основные рекомендации, но в зависимости от продукта или услуги, могут добавляться свои пункты, секции и функционал – нужно изучить объект и немного подумать.

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

Текст.

  • Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.
  • Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.
  • Секция Модельный ряд (Фото – Цена – Старая цена — Купить):
    • Roomba 630
    • Roomba 870
    • Roomba 880
    • Scooba 450

  • Гарантия. Текст гарантии возврата денег под моделями.
  • Секция преимущества:
    • Заголовок: «Преимущества перед обычным пылесосом»
    • Подзаголовок: «Это исключительно «умная» техника, которая самостоятельно производит уборку помещения и после завершения работы возвращается на станцию для подзарядки»
    • #1. Экономит время. Вы экономите свои силы и время, тратя его на более приятные занятия.
    • #2. Не нуждается в управлении. Пылесос сам составляет для себя оптимальный маршрут, благодаря интеллектуальной системе AWARE.
    • #3. Компактный. Техника не займет много места и работает без подключения к электросети.
    • #4. Самозаряжаемый. Зарядки аккумулятора хватает на 2 часа, после чего робот самостоятельно возвращается на платформу для подзарядки.

  • Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.
  • Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).
  • Секция Контакты. Адрес и карта с меткой.

3.2 Дизайн


Конечный результат всех потуг можно посмотреть здесь.

Прежде, чем начнем делать дизайн, давайте определим, что нужно учитывать при создании дизайна (общие рекомендации):

  • Всегда учитывайте бренд, стиль продукта, айдентику, если таковые имеются, старайтесь рисовать сайт в одном стиле;
  • Старайтесь использовать не более 3-х цветов в дизайне и несколько производных оттенков;
  • Выберите приятные сочетания шрифтов для дизайна;
  • Не лепите элементы близко друг к другу – это признак дурного вкуса;
  • Соблюдайте вертикальный ритм при расположении элементов, дайте воздуха дизайну;
  • Не делайте слишком маленький интерлиньяж (line-height) между строками в текстовых блоках;
  • Не используйте картинки плохого качества в дизайне;
  • Сжимайте всю графику с помощью TinyPng или подобных инструментов.
  • Перед ресайзом изображения обязательно конвертируйте его в смарт объект в Photoshop, на случай, если вдруг придется увеличить картинку без потери качества.
  • В данном примере максимальная ширина контента равна 1170px (сетка Bootstrap, чистый файл в архиве references/bootstrap-1170.psd).

Теперь нарисуем дизайн по составленному в п 3.1 тексту. Углубляться в основы работы с Photoshop не будем, рассмотрим ключевые моменты при создании дизайна Landing Page. Все секции будут на всю ширину макета, а контент в пределах сетки Bootstrap. Установим шрифты Raleway из папки Fonts. Размеры и цвета вы можете посмотреть в готовом макете references/ready_design.psd.

Итак, по тексту.

  • Шапка: лого, изображение пылесоса, заголовок: «Умные роботы пылесосы iRobot Roomba в Москве», телефон, адрес, кнопка.

Сверху разместим логотип, справа – телефон и адрес. Разместим фоновое изображение таким образом, чтобы пылесос находился слева (первые 6 колонок сетки), а заголовок целевой страницы – справа. Кроме того, разместим кнопку заявки и псевдоссылку на просмотр видео.

  • Секция с видео: «iRobot Roomba в работе». Под видео – кнопка.

У секции имеется заголовок и подзаголовок, не забываем.

  • Секция Модельный ряд (Фото – Цена – Старая цена – Купить).

В следующей секции «Модельный ряд» отобразим 4 девайса. Новая цена, старая цена и кнопка заказать. Старая цена говорит посетителю о том, что работает система скидок и у него есть возможность купить аппарат дешевле. Каждый айтем размещаем в 3 колонки сетки.

  • Гарантия. Текст гарантии возврата денег под моделями. Данная секция крайне желательна, но, если у продавца нет такой опции в продажах, можно не выдумывать.

  • Секция преимущества:

Данную секцию реализуем также в сетке, как модельный ряд, но не используем отступы в сетке Bootstrap. При наведении курсора айтемы меняют свой вид, фотография плавно увеличивается (в верстке).

  • Секция отзывы. Фото – Имя – Кто есть – Текст отзыва.

Реализуем следующим образом, без особых наворотов, в пределах 10-ти колонок, две из которых занимает фотография и имя, и 8 колонок отведено под сам отзыв. Отзывы должны быть с заголовками:

  • Секция поддержки клиентов. Фото специалиста – имя – контакты (телефон, соц. сети).

Обязательный атрибут целевой страницы. Не поленитесь раздобыть настоящие фотографии поддержки продукта или услуги. В сетке размещаем следующим образом:

  • Секция Контакты. Адрес и карта с меткой.

Более подробную информацию об элементах дизайна, приемах работы, вы можете получить, скачав с GitHub исходник PSD с готовым дизайном.

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

Шаблоны сайта Landing Page под дизайн интерьера

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

Чтобы вам было легче ориентироваться по данной нише, рассмотрим три целевых страницы из ТОПа Google — кстати, все рассматриваемые фирмы работают в Санкт-Петербурге. А ближе к концу мы разберем пример тематического landing page от LPgenerator. Приступим.

Лендинги Рунета

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

В сфере дизайн интерьера landing page должен выглядеть как минимум соответствующе — странно, когда оформление страницы сильно хуже, нежели дизайн представленных кейсов.

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

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

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

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

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

Стандартный блок отзывов тоже радует глаз — фотографии живых людей и тексты, внушающие доверие.

Словом, в сфере дизайн интерьера лендинг должен соответствовать примерно такому уровню. Следующий пример также показателен.

Марина Усова, дизайнер из СПб, продвигает свои услуги через посадочную страницу, примерно соответствующую уровню предыдущей.

На главном окне — ничего особенного, все просто и лаконично. Человек опять же сразу понимает, куда попал, благодаря четкому, понятному заголовку и однозначному СТА.

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

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

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

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

Шаблоны LPstore

Магазин продающих лендингов на данный момент предлагает только одну целевую страницу, подходящую под данную нишу.

Главное окно лаконично, выполнено салатово-фиолетовыми тонами. Внизу можете разместить собственный призыв, ориентируясь на рассмотренные примеры.

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

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

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

Высоких вам конверсий! 

26-08-2015

Идеальный лендинг пейдж: дизайн, примеры, структура и советы

Известная пословица гласит: «встречают по одежке». Мы взяли на себя смелость немного ее перефразировать: «встречают по дизайну, провожают по юзабилити».

С момента своего появления дизайн лендинга пережил немало изменений. Если два года назад задача идеального landing page сводилась к тому, чтобы просто «впарить» продукт, то современный хороший лендинг просто обязан быть полезным своим потребителям.

Дизайн landing page: от старого к новому

Лендинг пейдж умер. Да здравствует лендинг пейдж!

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

Старые одностраничники, кричащие нам: Купи! Сейчас! Срочно! и заставляющие нас нервно дергаться: «а успеем-то срочно?» отжили свое. И пусть.

На смену им пришел новый, хороший дизайн лендинга, взявший лучшее у своего предшественника и усвоивший парочку новых крутых фишек:

  • Блочная подача контента, облегчающая его восприятие
  • Яркая графика и лаконичный дизайн навигационных элементов 

Все мы по сути своей — жутко ленивые создания. Ладно-ладно, львиную часть времени занимает работа, а быстрый темп жизни не оставляет нам времени на разжевывание материала. Старое и важное правило дизайна гласит: «Не заставляйте меня думать». Это правило было придумано Стивом Кругом (гуру юзабилити, написавшим много бестселлеров на тему веб-дизайна) в 2000, и остается по-прежнему актуальным в 2017 году.

  • Краткость — сестра таланта

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

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

  • Список ваших преимуществ

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

Структура лендинга: что еще должно быть?

Здесь мы приведем список элементов вашей посадочной страницы, которые, в зависимости от поставленных целей и задач, могут быть на вашем сайте:

  1. Интересный и цепляющий заголовок, часто содержащий УТП — ваше уникальное торговое предложение;
  2. Форма для заказа товара или для отправки вашего электронного адреса;
  3. Отзывы ваших клиентов (Мы советуем размещать правдивые отзывы в виде скриншотов из соц сетей или переписки, по которым вашим клиентам будет понятно, что перед глазами не подделка) ;
  4. Блок: вопрос-ответ с информацией о товарах/услугах;
  5. Контактная информация.

Чего быть не должно: 4 ошибки, которые убивают конверсию вашего сайта

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

Гоните в шею разработчика, если вам навязывают:

1. Безликий шаблон, стянутый с чужого ресурса

Тут тебе и никому ненужные устаревшие таймеры, обилие эффектов и прочий отталкивающий и раздражающий набор ерунды.

2. Дизайн не соответствует содержимому

Hand-made дизайнер уверяет вас, что тяжелые блоки, золотые вензеля на черном фоне — идеальное решение для сайта детской одежды? А сами как думаете? Мы говорим однозначное: нет! Дизайн должен помогать пользователю понять ваш продукт. Чтобы этого избежать, четко определитесь со своей целевой аудиторией. Нельзя угодить всем: выберите свою нишу, а остальное доверьте хорошей веб студии.

3. Безобразные шрифты и бестолковый текст

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

А теперь о тексте. Не пишите простыни. Мы уже говорили о лаконичной подаче информации. Напоминаем еще раз: не перегружайте людей текстом. Большинство из нас легче воспринимает визуальную информацию.

4. Не используйте чужие фото в разделах «О компании» и прочее.

Повторимся: не обманывайте своих пользователей.

Landing page: дизайн, который работает на вас

Переходим от теории к практике. За время существования нашей студии мы создали несколько современных и эффективных лендингов.

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

Первый пример лендинг пейдж:

Графические блоки с интересной идеей подачи продукта

Бывает: взглянешь на то, как представлен продукт, — а оно не цепляет. Ну вот никак.

А бывает совсем наоборот: самый обыкновенный товар представлен таким образом, что хочется сказать только одно: Вау!

Так было у нас, когда мы разрабатывали одностраничный сайт для кошачьего наполнителя SHITTY KITTY.

Фишка заключалась в крутых эффектах подачи, когда коробка с наполнителем собиралась из отдельных кусочков в виде моушен-видео.

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

Второй пример лендинг пейдж:

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

Мы разработали сайт для NUMBER PLATE KEY RING —компании, специализирующейся на продаже брелков в Великобритании.

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

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

Хотите узнать стоимость такого дизайна? Цена дизайна лендинг пейдж зависит от поставленных задач, сложности проекта, количества привлеченных сотрудников и других факторов.

 

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

Да, все предыдущие пункты обязательно должны быть соблюдены, но, чтобы ваш проект выстрелил, не создавайте его исключительно ради продажи.

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

особенности построения одностраничных сайтов, практические советы для дизайнеров

Дизайн лендинга: как сделать страницу захвата

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

Что такое лендинг?

Понятие landing page, как, в принципе, и дизайн лендинга, пришло к нам сравнительно недавно, по официальной версии из США, лет 10–12 назад. По сути, это продающий одностраничный сайт, созданный ради одной единственной цели: подготовить и довести потенциальных клиентов к покупке товара или услуги.

Дизайн лендинга: как сделать страницу захвата

Клиентов, посещающих такие целевые страницы, называют «лидами» (от англ. lead). Также «лид» могут сказать о совершенной с сайта заявке, предзаказе, то есть, об активном действии, к которому призывает страница.

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

Дизайн лендинга: как сделать страницу захвата

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Чем отличается лендинг пейдж от обычного сайта? Ну, во-первых, на нем нет сложных навигационных сеток. Во-вторых, нет меню. Все ссылки, которые есть на таких страницах, ведут, в основном, на раздел «заказать» или «оставить заявку». И, в-третьих, landing захватывает с первых минут и не отпускает, пока вы не проскролите до самого футера. Это в идеале, конечно :) .

Для кого создаются одностраничники? Для бизнеса, старт-апов. Наиболее востребован лендинг среди:

инфобизнесменов;

MLM-сетей;

продавцов собственных курсов и вебинаров;

любителей партнерских программ;

компаний, запускающих на рынок новый эксклюзивный товар или услугу, и т.д.

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

:)

Л-пейдж делят на:

Long и Short landing page;

Оne step и Two steps landing page.

Самые распространенные — Оne step Long, то есть длинные и одношаговые. Short — соответственно, короткие; их используют для сбора подписной базы, e-mail адресов и т. д. Two steps встречаются крайне редко, они делятся на две страницы: так сказать, накручивание интриги и собственно призыв к действию.

Как оценивается эффективность лендинга?

Для оценки эффективности работы посадочных страниц используется самый объективный показатель — конверсия. Конверсия — это соотношение числа посетителей, совершивших целевое действие, к общему количеству посетителей сайта. Считается она так:

сегодня на сайт зашло 250 человек, оставили заявки на консультацию 12 человек;

Дизайн лендинга: как сделать страницу захвата

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

значит, дневная конверсия составила 12/250 * 100 = 4,8%

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

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

К какому проценту конверсии надо стремиться? Это зависит от ниши бизнеса, в котором лендинг будет бороться за клиентов. Ну, например, для туристического захвата конверсия не должна опускаться ниже 9–14%, а вот для элитных товаров (тех же шуб, драгоценностей, автомобилей) конверсия в 6% будет уже за верхней границей. Абсолютный рекордсмен по конверсии, естественно, инфобизнес. На продаже обучающих курсов в удобном формате можно смело требовать 22–30%.

Особенности лендинга: практические советы

Итак, от теории переходим к практике. Дизайн лендинга имеет свои особенности и правила, придерживаясь которых можно избежать существенных ошибок с самого начала. Без чего не обойтись посадочной странице? Попробуем ответить.

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

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

3. Заголовок. Как книга начинается с обложки, так и о качестве landing можно сказать по его заголовку. При неудачном варианте процент закрытия страницы на 5–7 секунде просмотра будет очень высоким.

4. Визуализация. Максимум наглядного материала. Можно 100 раз рассказать, как работает ваш товар, но проще 1 раз показать на коротком видео ролике. Не требует ваш товар или услуга видео презентации? Тогда фото во всех ракурсах, фото довольных клиентов, счастливых покупателей…и т. д.

5. Блок с отзывами. Море позитива должно литься с вашего сайта. Отзывы должны быть привязаны к фото реальных людей, подписаны (имя, возраст, страна, город — естественно максимально близко к целевой аудитории). Безличные отзывы отталкивают и вызывают недоверие.

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

7. Призыв к действию или call to action. Призыв к действию не должен быть завершающим аккордом в самом футере страницы. Кнопки «заказать», «подписаться», «скачать», «купить» должны равномерно распределяться по всем блокам. Захотел купить, а где эта кнопка запрятана, кто его знает — это провал для конверсии.

И напоследок еще один секрет от коллег-маркетологов, чью роль в создании захватывающих страниц нельзя недооценивать. Правило AIDA:

Attention — внимание;

Interest — интерес;

Desire — желание;

Action — действие.

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

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

Вот так вот, друзья. Учимся манипулировать сознанием и становимся мастерами веб-дизайна! Подписывайтесь на мои обновления, следите за новинками, и скорых встреч! Пока-пока.

Дизайн лендинга: как сделать страницу захвата

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее :)

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Заказать дизайн лендинга в Москве — YouDo

Чтобы заказать дизайн лендинга, посетите сайт Юду. На YouDo зарегистрировано много опытных программистов, веб-дизайнеров, разработчиков, которые предоставляют полный спектр услуг:

  • оформление сайтов
  • создание макетов
  • разработку индивидуального дизайна web-странички
  • установку эксклюзивных шаблонов
  • адаптивную верстку сайтов под разные устройства

Программисты, зарегистрированные на Юду, помогут сделать современный веб-сайт и landing page недорого. В процессе разработки специалисты Юду применяют новые технологии и эффективные методы управления контентом CMS.

Исполнители Юду специализируются на создании, продвижении и технической поддержке сайтов разных типов и модификаций. Они гарантируют высокую конверсию ресурса. Специалисты Юду создают сайты и продающие страницы для таких целей:

  • оптовой и розничной торговли
  • сферы услуг разного рода
  • уникальных (эксклюзивных) товаров
  • обучающих программ (вебинаров, тренингов и пр.)

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

Особенности разработки сайтов

Специалисты Юду глубоко анализируют поставленную задачу. Они доносят пользу продукта (товара или услуги) благодаря качественному контенту, тексту, правильным формулировкам и расставляют важные акценты в дизайне.

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

Правильно оформленные посадочные страницы помогут расширить целевую аудиторию и улучшить посещение сайта.

Специалисты Юду выполняют задание в таком порядке:

  • готовят текст и прототип
  • создают новый современный дизайн или корректируют имеющийся
  • верстают и программируют сайт
  • размещают сайт на платном хостинге
  • запускают трафик

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

Стоимость услуг специалистов

У специалистов Юду можно заказать дизайн лендинга недорого. На стоимость работы влияет ряд факторов:

  • сложность проекта
  • тип сайта
  • подключение формы онлайн-оплаты
  • тестирование и интеграция сайта
  • настройка системы администрирования

Узнайте, сколько стоит работа профессионалов из прайс-листа на сайте Юду. У специалистов Юду цены самые доступные в Москве. Убедитесь в этом, ознакомившись с информацией в профилях исполнителей. 

Почему стоит обратиться к специалистам Юду?

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

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

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

Сотрудничая со специалистами, вы получите ряд преимуществ:

  • применение маркетинговых приемов
  • использование передовых технологий
  • создание качественных продающих страниц
  • уникальные дизайнерские решения

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

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

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

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

90000 Landing Page Design Inspiration For Your Next Layout 90001 90002 90003 Does beauty matter? Well, when it comes to landing page design, it can definitely influence how your offer is perceived. Ultimately, if your landing pages do not look good-or follow some best-practices-your conversions can suffer. 90004 90003 Landing pages that are well designed often convert better than those that are not, and the difference can be dramatic. Done right, design should support the text on your page and work with all other elements to prompt visitors to take action.90004 90007 But first: What are some design best practices? 90008 90003 Below we’ve rounded up tons of examples of amazing landing page design from Unbounce customers. But before we share them, let’s review some of the characteristics we typically see on great pages: 90004 90011 They’re Super Focused 90012 90003 A good landing page has only one objective: prompting visitors to do the one action you want them to do and convert. This is why 90014 many landing pages do not have menus or a ton of external links 90015 -you want your visitor to complete the call to action, not navigate away or get distracted.90004 90011 They Keep Scrolling to a Minimum 90012 90003 It can be great to include additional information about your offer on a page, but 90014 visitors should have everything they need-including the CTA button-without scrolling for days 90015. While long-form landing pages can convert in the case of complex offers, consider using lightboxes to showcase extra info instead of adding tons of page sections. 90004 90011 They Use Relevant, Engaging Visuals 90012 90003 Amazing design requires striking images.No matter how technical your offer (see the Panoply example below), you need something to break up the text. 90014 Your images should be engaging, relevant, and consistent with your brand 90015. They should also encourage visitors ‘eyes to scan the landing page and settle on the CTA button. 90004 90011 They Maintain Consistent Branding 90012 90003 Your 90014 landing page design should be consistent with your overall look 90015 so visitors can instantly recognize and associate it with your brand.This typically means using the same color scheme and design elements from your general website. It can be a tough line to walk, though, because landing pages should look different from your overall website-they’re generally simpler and do not include navigation, for example. Nonetheless, the branding and colors will often remain the same. 90004 90011 They Use F or Z Patterns 90012 90003 Research shows that 90014 most people’s eyes move around a website in an F or Z pattern 90015. The best landing page design usually takes these patterns into account.For instance, having a vertical visual on the left with the header on the top right and the CTA button a little lower on the right allows visitors to follow an F pattern-and end up with their eyes right on your CTA. 90004 90014 Not sure if your current design is driving conversions? 90015 Try out our Unbounce Landing Page Analyzer and see how your landing page scores across nine distinct performance categories. 90003 It also goes without saying that beauty is not the only thing to consider when evaluating landing page design.You want pages to look good, but they should also convert. Always combine good looks with some research about how your visitors behave to create especially 90044 effective 90045 pages. 90004 90003 This is where testing comes in. Depending on your industry, we’ve actually seen incredibly simple and understated pages perform crazy well-no design overhauls necessary. 90004 90003 And with that, let’s check out some beautiful designs! 90004 90007 The Best Landing Page Design Examples 90008 90011 1.Indochino 90012 90003 90004 90057 Image courtesy of Indochino. (Click image to see the full page.) 90003 If you’re creating a good-looking landing page, it helps to have an attractive product, which Indochino has covered. The Unbounce-built page above is an example of how Indochino provides not just tailored suits, but also handsome, tailored landing pages. 90004 90003 Here’s what we think makes this landing page design awesome: 90004 90062 90063 90014 Great visuals 90015: If you’ve got an attractive product, show it off.We get to see Indochino’s suits modeled here-and the dynamic pose helps visitors see how suave the product looks in the context of use. 90066 90063 90014 Use of space 90015: Just as importantly, visitors have all the information they need without a ton of scrolling. The CTA button is prominent and focused. This page’s design is simple and understated, but it gets the job done. 90066 90063 90014 On-brand 90015: The header text here is in a font that looks similar to the company logo, which helps create a feeling of brand consistency.90066 90075 90003 The page we see here is specifically created for men in Calgary-and designed to encourage them to take an offline action. (OK, first to book an appointment online, but then to physically visit the new showroom.) Part of successful landing page design is making offers specific to a certain audience, something that Indochino has mastered. 90004 90003 This landing page is actually 90044 so 90045 tailored that the fine details do not really make sense to someone who does not live in Calgary.You might miss that Chinook Centre is a shopping mall, for example, but the page is designed for those who know this already. 90004 90011 2. Zola 90012 90003 90004 90086 Image courtesy of Zola. (Click image to see the full page.) 90003 If you’re in the wedding industry, like online retailer / gift registry Zola, you know that design matters. The example page above showcases the company’s design savvy by serving up a simple, elegant landing page for brides and grooms-to-be. 90004 90003 Here’s what makes Zola’s page attractive: 90004 90062 90063 90014 Consistent branding 90015: It’s not immediately apparent if you’re a first-time visitor, but Zola’s branding uses shades of bluish-grey (see the hearts in the company logo).The backdrop maintains those colors while also providing excellent contrast for the images-that white wedding cake needs a contrasting background to pop. 90066 90063 90014 Simplicity 90015: Zola’s main ecommerce site is pretty busy. If the landing page included any of the standard navigation, visitors might get distracted by clicking around instead of starting their registry, which is the page’s goal. Keeping it simple means more visitors will complete the action instead of wandering aimlessly through the website.This page is perfect for directing their paid ads to as a way to lower cost-per-click. 90066 90075 90101 90011 3. Lujo 90012 90003 90004 90106 Image courtesy of Lujo. (Click image to see the full page.) 90003 This Z-pattern landing page designed for Lujo by the conversion gurus at digital agency KlientBoost manages to provide a ton of context while not being overwhelming. You could argue that there are two CTAs here-shopping the collection 90044 and 90045 watching the video. Lujo gets away with it because the video is presented so discreetly, as an extension of the product photos.It’s clear that the most important CTA on this page is checking out the collection of loungers. 90004 90003 Here’s what we love about this page: 90004 90062 90063 90014 Stunning (and consistent) visuals 90015: Not only is the product photography excellent, but it supports the Z pattern of landing page design while reinforcing the brand’s messaging. Lujo’s tagline is «put life on pause,» and everything about the visuals in this landing page reinforces that branding-from the sunhat resting on the video box to the deck shoes and the iced tea.Design should work hand-in-hand with messaging so that the text and the images combine to create an overall experience that makes sense. Lujo does that well in this landing page. 90066 90063 90014 Obvious USP 90015: Right below the photos, Lujo articulates-with both text and design elements-three unique selling points: free shipping, a five-year warranty, and New Zealand craftsmanship. Finding a way to subtly work those three ideas into the design means the visitor might not need to keep exploring before clicking that CTA button-they see these major benefits and that could seal the deal.90066 90075 90101 90011 4. Panoply 90012 90003 90004 90128 Image courtesy of Panoply. (Click image to see the full page.) 90003 Unlike some of the other examples, data analytics tool Panoply does not have an especially visually attractive product to show off-I mean, at the end of the day, it’s analytics software and not a snazzy suit. But Panoply’s landing page (designed by Directive Consulting) stands as a gorgeous testament to the fact that design and beauty are important even for technical B2B products and services.90004 90003 This is what we think makes this a beautiful (and effective) landing page: 90004 90062 90063 90014 Clever visuals 90015: Creatively showing off Panoply’s user interface in a subtle (but clear) way is one of the biggest wins of this landing page . Interesting visuals are always important, even when the product does not lend itself to photography. 90066 90063 90014 Social proof 90015: Including industry awards and a testimonial from GoDaddy above the fold-and doing so in a way that matches the overall design-is another great touch.A visitor does not need to go anywhere else on the landing page to know that industry experts trust Panoply. 90066 90075 90101 90011 5. Daily Harvest 90012 90003 90004 90148 Image courtesy of Daily Harvest. (Click image to see the full page.) 90003 Using imagery to evoke a strong emotional reaction might not be easier with any product than food. (People just need one look to tell whether or not they want to put something in their mouths.) Fortunately, Daily Harvest has a great-looking line of healthy snacks, and they’ve made strong design choices to help showcase that on this landing page.90004 90003 Here’s what we love about this page: 90004 90062 90063 90014 Animated visuals 90015: It would have been easy for Daily Harvest to use a static image of one of their smoothies here, but the brand takes it one step further. This animated hero shot is engaging-the smoothie looks like something I could have right now, if it were not for this darn computer screen-and the how-to GIFs help me immediately understand how this service works. 90066 90063 90014 Product examples 90015: The rest of the landing page is arranged with loads of lovely product images.It’s one thing to tell me you’ve got a huge catalog of nutritious treats-it’s another to show me actual examples of the meals I can order after I sign up. 90066 90075 Those slick animations are all great, but they could make for nightmarish load times on mobile. Check out Unbounce’s 2019 Page Speed ​​Report and find out how other marketers are weighing page speed vs. beauty. 90011 6. Greats 90012 90003 90004 90167 Image courtesy of Greats. (Click image to see the full page.) 90003 Fashion is all about social identity, and it’s essential for brands to exhibit attributes that consumers want to ascribe to themselves: things like authenticity, quality, and 90014 90044 cool 90045 90015.This landing page for footwear brand Greats (built by WITHIN) does a beautiful job of brand-building through design while still driving visitors to convert. 90004 90003 Here’s why we think this is a (oh no, do not say it) «great» example of landing page design: 90004 90062 90063 90014 Amazing video 90015: This whole landing page is pretty sleek, but what really knocks it out of the park is the video just below the fold. Not only does the stop animation style look awesome, but it also gives Greats a chance to elaborate on their unique selling proposition-one stitch at a time.Check it out on YouTube below. 90066 90075 90003 90183 90184 90004 90062 90063 90014 Rule of three 90015: Greats applies the rule of three throughout this layout, making the benefit statements both visually striking and easily digestible. 90066 90063 90014 Mobile-responsive 90015: This landing page looks just as good on mobile as it does on desktop. Considering that mobile is projected to account for 54% of all ecommerce sales by 2021, it’s never been more critical to make on-the-go consumers a priority.90066 90075 90101 90011 7. Unbounce 90012 90003 90004 90201 Image courtesy on Unbounce. Hey, that’s us! (Click image to see the full page.) 90003 If we do say so ourselves, this recent landing page from our brand is great at showing, not telling. We’ve all been to slow websites and navigated away immediately-but what does that mean for marketers? Sure, we could explain with a bunch of text, but the animation on the right side of this page really makes it clear why fast-loading landing pages are a must.This landing page’s design follows an effective F pattern-and it’s hard to take your eyes off the dropping conversion rate in the animation. 90004 90003 Here’s what we think looks great here: 90004 90062 90063 90014 Animation 90015: Landing page load time is not the easiest thing to show in a static image (as we found), but it’s obvious once you add in an animation. 90066 90063 90014 Visual hierarchy 90015: Fitting the most important information in this animation into an overall F layout helps keep visitors reading.The animation-and the visuals it contains-helps make what could otherwise be a pretty boring landing page more dynamic and engaging. 90066 90063 90014 Text features 90015: We jam-packed this landing page with stats to back up our claims about slow loading pages, and we want those numbers to pop so they’re often bolded. When there’s a fair amount of text on your landing page, break it up by using separate paragraphs and putting the essential information in bold. This makes it easier for visitors to scan-and take action.90066 90075 90014 Do not think you’ve got the skills to make your pages look this good? 90015 Browse our huge collection of landing page templates and see how easy it is to build and publish something beautiful by yourself, no developer required. 90003 At the end of the day, when it comes to creating beautiful, effective landing pages, it’s about combining a sense of design with an understanding of how people behave when browsing the web. When you’re designing your next landing page, get the best of both worlds by watching your CTA placement, sourcing product photos and visuals, balancing header text, and ensuring your design elements both look good and drive conversions.90004 90224 90101 90007 More great landing pages examples (related content) 90008 90003 If you’re still not feeling inspired after all these gorgeous examples, we’ve got even more Unbounce-built landing pages to show off. (What can we say? Our customers are 90044 really 90045 good at it.) Take a look at a few of the features below: 90004 90232 90063 The proof is in the pudding. See conversion rates, insider tips, and more beautiful design by reading 12 High-Converting Landing Pages (That’ll Make You Wish You Built ‘Em).90066 90063 Still not feeling it? We got ya covered. You’ll find a tons of inspiration and new landing page ideas in The Best Landing Page Examples You Gotta Save for Your Swipe File. 90066 90063 Sometimes, creating landing pages for your mobile campaigns is a whole other ballgame. Here are mobile landing page examples that’ll totally knock your socks off. 90066 90063 Finally, if you’re promoting an iOS or Android app, look no further than these incredible examples of landing pages for mobile apps before you start creating your own.90066 90241.90000 Examples of the Best Landing Page Designs in 2019 90001 90002 If you run a website, then you know how difficult it can be to convince a visitor to stay on your page and even more to convince them to buy! Your landing page’s design plays an important role. 90003 90004 How to choose your landing page’s design? 90005 90002 Designed to convert your visitors into leads or customers, landing pages focus visitors ‘attention on your value proposition in order to get them to perform an action that you have previously determined: purchasing a product, filling out a form or participating in a free trial.90003 90002 But with all the offers available and all the competitors that exist on the market, it can be hard to stand out from the crowd. For this, 90009 you must create a striking, persuasive landing page adapted specifically to your business. 90010 90003 90002 Because we know it can be difficult to find inspiration before sitting down to design your future landing page, we have selected for you ten modern and efficient landing pages that convert in 2018. 90003 90002 If you have questions about landing pages and would like to learn more before you get started, check out our articles on landing pages with best practices and concrete examples.90003 90002 These examples are taken from real sites; see for yourself! Of course, none of these landing pages is perfect: perfection does not exist, and it is up to you to adapt your design to your customers ‘requirements. We also recommend you A / B test your landing pages. 90003 90004 10 examples of the best landing page design 90005 90020 LeadQuizzes 90021 90002 LeadQuizzes is a company specialized in selling «quizzes» designed to capture «leads». We immediately notice the (very well designed) explanatory video of the service that answers basic questions such as: 90003 90024 90025 What is it for? 90026 90025 Is it relevant to me? 90026 90025 What does it offer me? 90026 90031 90002 Secondly, the orange call-to-action stands out from the rest of the page and very clearly invites you to click: «Try it Free» reassures us that we will not pay immediately and that there is a free trial.Find out more about the optimization of calls to action. 90003 90002 The social proof is obvious and well developed: the references are well-known market players, and the text indicates that more than 3 million leads have been generated via LeadQuizzes: it makes you want it! 90003 90002 90037 90003 90002 90040 90003 90002 The rest of the landing page does not disappoint either: it is built around educating the visitor of the product’s usefulness. The goal: use a (big) page to convince visitors that LeadQuizzes’s service is powerful and used by the big players in digital technologies.90003 90002 90045 90003 90002 Social proof is strongly highlighted on the LeadQuizzes landing page. It answers concrete and tangible questions that concern potential buyers: 90003 90024 90025 How many more sales will I make? 90026 90025 How many new prospects can I capture? 90026 90031 90020 GrowthHackers 90021 90002 GrowthHackers is a company that markets software to increase marketing teams ‘productivity and coordinates business development actions and new ideas from innovative teams.90003 90002 Similar to LeadQuizzes, the orange call-to-action stands out nicely from the rest of the page’s colors and invites action. We are also invited to a «free trial» to reassure a large number of visitors who would not be willing to pay until they have been convinced of the service’s usefulness. 90003 90002 90062 90003 90002 The landing page continues with navigation in the form of a drop-down menu that answers the main questions asked by potential GrowthHackers Project users. 90003 90024 90025 «Why should I use the service? «90026 90025» Why do managers love the software? «90026 90025» Who is this service for? «90026 90031 90002 We also notice that a» chat «bubble is there to ask questions: a useful feature when we are undecided or have questions.90003 90002 90077 90003 90002 As for social proof, it is highlighted in two ways: 90003 90024 90025 We see that a «community» exists around the service. 90026 90025 We see that many people use the service and are active in the community. 90026 90031 90002 One could criticize, however, that the numbers may not be visible enough. 90003 90002 90090 90003 90020 ElegantThemes 90021 90002 ElegantThemes is a company specializing in selling WordPress templates or «themes» and also markets a «builder» called Divi, which allows users to create pages in WordPress visually.On this topic, see our examples of landing page templates for WordPress. 90003 90002 We immediately see the social proof: it is the first element put forward that reassures the visitor about the service’s popularity: more than 400,000 users according to the site. 90003 90002 90099 90003 90002 We then notice that the value proposition is twofold and that two separate call-to-actions were created for the occasion: one to discover the ready-made templates and another to discover the brand’s plugins.90003 90002 Another interesting element: on the lower right side a conversation bubble appears, ready to answer questions that a visitor might ask. 90003 90002 The chat module is especially interesting since it also allows the user to send attachments, emojis, and GIFs which can only enhance the richness of the interaction. 90003 90002 90108 90003 90002 While browsing the landing page, visitors are offered the opportunity to try a «live» demonstration of the Divi Builder. This is a significant and compelling value proposition as users can discover the product directly without paying or even registering.90003 90002 90113 90003 90002 Further down on the landing page, the social proof is reiterated, and the paragraph contains an element intended to reassure potential buyers: a 30-day refund. 90003 90002 Additionally, the red-pink call-to-action contrasts with the blue background of the page, reinforcing our curiosity: we are visually attracted to the button placed in the center of the page. 90003 90020 Shopify 90021 90002 Shopify is a CMS that allows you to quickly and easily create e-commerce sites without programming knowledge.They stand out with their numerous resources available to users (guides, videos, podcasts, forums) as well as additional services that complement their core business: a store of ready-to-use «themes», a library of free photos, etc. 90003 90002 90124 90003 90002 On the landing page, the value proposition is immediately put forward: «the e-commerce platform made for you». The idea is therefore to address a large, often independent audience as evidenced by the photo illustration. 90003 90002 The special feature of this landing page is that the call-to-action contains a field for an e-mail address.This field is required to access the 14-day free trial offered just below that specifies that no credit card is required for the test: it is a major argument. 90003 90002 90131 90003 90002 90134 90003 90002 The rest of the landing page focuses on the features of the Shopify service. 90003 90002 With unique illustrations and short paragraphs, the company presents Shopify’s features and benefits to convince visitors to take advantage of the free trial or purchase a monthly subscription. 90003 90002 A major argument in the CMS sector, the widespread use of the service is highlighted with two elements: 90003 90024 90025 The graphical representation of the number of users and the income generated 90026 90025 Testimonials from real customers whose sites are online.90026 90031 90002 90149 90003 90002 The idea is to create a feeling of mimicry in the minds of visitors: «If 1,000,000 people use Shopify to create real shops without programming, so can I». 90003 90020 Salesforce 90021 90002 Salesforce needs no introduction. The king of «CRM» (Customer Relationship Management), the American company has several particularly well-developed landing pages that are worth a look. 90003 90002 90158 90003 90002 The first thing that jumps out is the illustrations and colors.An overview of solutions on Computer-Tablet-Mobile is presented on a background that inspires calm and serenity. 90003 90002 We also note that two calls to action are present on the upper left part above the fold: one for a demonstration and a second for a free trial. 90003 90002 Salesforce also offers a solution for large companies whose call to action is placed to the right of the free trial: great for capturing potential leads from large companies. 90003 90002 90167 90003 90002 When a visitor clicks on a call-to-action, they go from the home page to a landing page created specifically to convince as many people as possible to sign up for the free trial.90003 90002 Among the elements that stand out, we can see: 90003 90024 90025 The reminder of value proposition, «30-day free trial» 90026 90025 A telephone support hotline 90026 90025 The statement «no download, no software» in capital letters 90026 90025 Social proof by including logos of well-known references 90026 90025 Easy sign-up with Google+, Facebook, and LinkedIn 90026 90031 90020 Neil Patel 90021 90002 Neil Patel is a digital marketing consultant with a big reputation in the United States and around the world .His site receives several million hits a month thanks to an accessible content strategy and a variety resources created for visitors: blog articles, YouTube videos, practical guides, etc. 90003 90002 90190 90003 90002 What strikes us first on Neil Patel’s site is its uninhibited and straightforward approach to the issue. 90003 90002 The color theme is extremely simple and plays on the contrast between the orange background and the white text. The idea: ask visitors a direct, simple and short question to build engagement to a maximum.90003 90002 We also notice that the landing page offers a field (above the fold) designed to perform a live analysis of your site: it is a show of force that leads the visitor to discover by him or herself what could be improved on their own site. 90003 90002 90199 90003 90002 The particularity of Neil Patel’s site is that almost all pages are designed as landing pages each with one goal: to convert a maximum number of visitors. 90003 90002 The «Services» page, for example, (shown above) shows a long set of text that acts as a proof of authority for visitors.It explains what Neil can do for you, but also what he has done (see below) and the clients he has worked for. 90003 90002 90206 90003 90002 The approach is always very direct and focused on results and benefits. 90003 90002 Neil’s idea is to prove by A + B that he has the skills to help you improve your SEO. 90003 90002 90213 90003 90002 On the same «Services» page, the call to action comes at the end (and one can wonder, is it a good idea?). It is structured in several stages that invite visitors to enter their information in order to be contacted later.90003 90020 UpWork 90021 90002 UpWork is a world-renowned freelance platform. It allows companies to find skilled labor quickly for various assignments and allows the self-employed to register on the platform to offer their services. 90003 90002 90222 90003 90002 On the homepage, we can see from the outset that the graphical design is clear and that it is the «professional» aspect that is highlighted. Interestingly, the chosen tagline is not for freelancers but for companies. 90003 90002 The tone is direct, effective, and clear; we immediately understand the value proposition: to subcontract work efficiently.90003 90002 The call to action is placed on the left side above the fold. Its green color sets it apart from the rest of the landing page and consists of a search bar used to indicate the type of work that visitors want to outsource. If we pay attention to details, we can see that the background is actually a customer testimonial and we can watch the story: it has a lot of impact! 90003 90002 90231 90003 90002 The rest of the landing page is classic: it details the various services offered by freelancers and shows the paid offers for users.90003 90020 CodeCombat 90021 90002 CodeCombat is an interesting example. It is an educational game that allows children (and adults) to learn to program using a video game. The concept is simple: you program to progress in the game. 90003 90002 90240 90003 90002 The first interesting point of CodeCombat’s landing page is that the audience is twofold: it targets both teachers (who wish to use it in class) and children (who discover it by themselves or through by word of mouth). 90003 90002 The landing page’s focus is therefore on teaching and the program’s ease of use.Thus, we can see two calls to action: one for teachers and one for children / players. 90003 90002 90247 90003 90002 The rest of the landing page presents the benefits of using CodeCombat as well as screenshots to make the service «tangible». 90003 90002 90252 90003 90002 In a fairly traditional way, the rest reiterates the service’s strengths and includes a customer testimonial adapted to the target: that of a school principal. 90003 90004 Plated 90005 90002 Plated is a company specializing in delivering recipe ingredients: you select inspirations for recipes, and the company delivers all the ingredients needed to make the dish.90003 90002 90261 90003 90002 The first thing that strikes us about the Plated landing page is the graphic design; the colors are studied, and the company has a real visual identity. The photos of dishes stand out well, and the illustrations are well chosen. 90003 90002 Words are chosen carefully and are well suited to a target of «food lovers»: we would get hungry just looking at the site! 90003 90002 The call-to-action is clear, well placed above the fold; its green color clearly distinguishes it from the rest of the page.90003 90002 90270 90003 90002 The Plated landing page is long: you have to scroll for a long time to reach the end. However, each paragraph of the home page is thought of as an argument or a benefit in order to convince: 90003 90024 90025 Save time 90026 90025 Large range of choice 90026 90025 No more shopping 90026 90025 Quality products 90026 90025 Save money 90026 90031 90002 90287 90003 90002 We can also see a particularly attractive instant discount coupon in the header and whose color stands out.90003 90002 By offering 50% off the first order, Plated encourages the undecided to take action by decreasing the financial commitment. 90003 90002 Social proof is highlighted at the end of the landing page. Although it could have been placed higher, it remains visible and relevant. 90003 90002 90296 90003 90002 Plated offers chat support, something we find more and more on landing pages. 90003 90002 By offering this service, the idea is to make up for the lack of human interactions that one would find in stores and to provide help to undecided visitors.90003 90002 Plated’s strengths are highlighted successfully using simple, soothing images that convey simplicity and serenity to show that Plated makes your life easier. 90003 90020 MailChimp 90021 90002 MailChimp is an extremely popular automated marketing and emailing company. Their services are used by many to create e-mail, marketing and newsletter campaigns for e-commerce sites. 90003 90002 90309 90003 90002 As direct as Neil Patel, this landing page is extremely clear and straightforward: it addresses visitors in a frank manner while remaining vague: «Build your brand, Sell more stuff.». 90003 90002 This allows MailChimp to address visitors globally by avoiding excluding too many users from the outset. 90003 90002 The value proposition is as simple as possible: build your brand, sell more. 90003 90002 This straightforward and uninhibited approach is prevalent in Software as a Service (SaaS) solutions: the goal is to speak directly to business leaders of all sizes and get straight to the point. 90003 90002 Note that the call to action is very visible: it is located in the central position above the fold and offers a free trial (another one ?!).90003 90002 90322 90003 90002 As on Plated, the rest of the landing page details the benefits of using the service. This allows visitors to quickly «visualize» the service’s added value and get a clear idea of ​​the following question: «Is this service for me?». 90003 90002 By building a long landing page, you allow your visitors to «scroll» as much as they want: this allows them to answer as many questions as possible while acting as a commercial brochure to highlight your added value. 90003 90002 90329 90003 90002 By using screenshots, MailChimp allows visitors to project themselves more easily.The idea is to help visitors better understand the service by viewing a sample. This technique can be adapted to video or even in the form of a live demonstration as ElegantThemes does. 90003 90002 We note that the free trial’s call-to-action is always accessible, wherever you are on the page, here at the top right. 90003 90002 90336 90003 90002 Once in the conversion funnel, visitors land on the form page needed to activate the free trial. In order to maximize conversions, the MailChimp registration form is intentionally: 90003 90002 By limiting the number of fields to three, MailChimp allows hesitant visitors to take the plunge more easily.The commitment requested is kept to a minimum: an e-mail, a username, and a password. 90003 90002 If it were to be improved, we could consider adding quick signup via Facebook or Google that would encourage even more conversions. 90003 90002 Did you like this article? If you are inspired and want to take the plunge, read our article dedicated to Bootstrap landing page templates. It’s the perfect asset for a successful landing page. 90003 90346.90000 Landing Page Design — Boost Sales With Custom Landing Pages 90001 90002 1. Tell us what you want 90003 90004 Our interactive creative brief makes it simple to describe your design challenge and set your budget. 90005 90002 2.Get dozens of landing page designs 90003 90004 Our global community of professional designers present their ideas. You provide feedback. 90005 90002 3. Pick your favorite 90003 90004 Seven days later, choose your winning landing page design. It’s like picking your favorite child.90005 .90000 15 great landing page designs 90001 90002 The right landing page design can make or break a website — as this is the first thing your visitors will see. If you get it wrong, most people will not hang about. 90003 90002 Landing page designs should clearly convey the unique selling point (USP) for the product or service, and focus on one call to action (CTA), such as getting the visitor to register their details or to make a purchase. Whatever the goal, it’s up to the design of the page to channel the user towards it, whether through use of white space, contrasting colours or more explicit directional cues.(And having the best web design tools to hand will help you achieve this.) 90003 90002 Clear, succinct headers and sub-headers and punchy, easily scanned bullet points are the order of the day. The landing page should be prominently branded, often incorporate a hero image to communicate the product or service at a glance, and cut straight to the point to avoid users ‘attention drifting. 90003 90002 With all of that in mind, we’ve pulled together some particularly effective examples of landing page design from across the web.90003 90002 Looking for more design inspiration? Have a look at our pick of the best 404 error pages. 90003 90012 01. Angle2 90013 90002 90003 (Image credit: Angle2) 90002 Angle2 is a Ukrainian digital design agency, with a team that believes wholeheartedly in the power of brand. Apparently nothing excites them more than crafting unique, bespoke experiences that «exude your brand’s DNA» while pushing the UI envelope. 90003 90002 This new online home for its services certainly backs the claim, introducing not only some stellar work but also two awesome effects.Opening onto some massive Montserrat fonts drenched in # 2AF8EB — or turquoise to humans — we get a typographic workout worth savouring. The trick becomes a feature throughout and conveys the ‘angular’ sentiment with a superb slanted text illusion. 90003 90002 This essentially uses left and right
elements to form a 50/50 split down the middle of the viewport. From here a series of tilted text lines wrapped in tags have translate3d CSS functions applied and animated with TweenMax on hover.By applying contrasting colours to each side, it achieves a 45-degree folded aesthetic that defines the overall design. 90003 90002 Injecting the vivid blue accent colour into a largely black and white palette shows tasteful execution too, with further fun reserved for ‘The Team’ section of smiley people portraits. Here, while transitioning between each photograph, you’ll spot a fabulous fragmented filter that works a treat. 90003 90012 02. MADCLEM 90013 90002 90003 Clément Chenebault’s site is fun and fluid 90002 Since the web’s inception, developers and designers have pushed and shoved at the outer edges of what’s possible, seeking to do something new or interesting and pushing back on expectations for what a website is and how it works.This free-spirited experimentation is a hallmark of the weird, wild web. 90003 90002 Clément Chenebault’s portfolio site, MADCLEM, follows in that storied tradition of pushing boundaries, turning a simple grid of colourful squares into a fluid, malleable mass of liquid blobbery. The whole site bends and bulges with every movement you make, expanding and contracting to show little glimpses of portfolio pieces as you find your way through the gelatinous mass. The site is a fun, wavy island among an often monotonous sea of ​​same-y looking designer and developer portfolios.90003 90012 03. IBM Plex 90013 90002 90003 The single-pager for IBM’s Plex is designed to show the new font off to best effect 90002 IBM recently released its own custom font, IBM Plex; this is the first refresh of its corporate typeface since 1956 so it’s a big deal. To help introduce the typeface to the world, IBM asked studio XXIX to design and build a website to show it off. The thinking behind the design was to use images, animation and photography to tell Plex’s story while showcasing the font in exciting ways.90003 90002 What’s great is that a lot of the site serves as a way to test out the font and explore the multiple styles available to use. So you can really see it in context before you decide to start using it in projects. The site is definitely one for graphic designers and is somewhat reminiscent of a portfolio page. Especially because, despite the dense information displayed, you can continuously scroll through the different sections, as you are greeted by some inventive scroll-triggered animation.90003 90012 04. Cowboy 90013 90002 90003 Ride ’em! Cowboy’s site keeps your attention on what matters: the bikes 90002 Cowboy is a new generation of electric bikes, targeted at city dwellers in the US. As a result, its website had to be slick in order to communicate the value of a product that is looking to revolutionise a market known for churning out unattractive, clunky bikes. 90003 90002 Created by Ueno, the site uses bold typography, strong colours, great photography and is built really well, offering a first class experience to users.The bike itself takes centre stage and immediately draws the eyes of the user. 90003 90002 The transitions and magnification of bike features, as the user scrolls down, are kept subtle so the bike remains central. The focus on content and not over-engineering the experience also means the site loads quickly across all devices and is very responsive. The app for the bike has its own page and parallaxes between features and the performance data offered reveals the connected nature of the product and parallax within the boundaries of the device beautifully.90003 90012 05. Interface Lovers 90013 90002 90003 Interface Lovers ‘landing page keeps things uncomplicated and clean 90002 Designing a landing page for a site dedicated to’ interface lovers ‘is no mean feat, but Timothy Achumba — a designer for Facebook — has nailed it here. The site aims to inspire people, provide practical advice on the craft of UI design, and celebrate different designers ‘unique experiences. 90003 90002 The design places the focus firmly on content, and uses a balanced layout inspired by Achumba’s first love: print.»The design for Interface Lovers, based on a simple three-column grid taken from a newspaper layout, is uncomplicated and clean,» he says. Beautiful portrait photography draws visitors in and emphasises the site’s interest in individual stories. 90003 90002 To build the site, developer Iheanyi Ekechukwu took advantage of Tachyons, a functional CSS framework that allows for granular control over the design. The result is a gorgeous, minimal design, without any bells and whistles getting in the way.90003 90012 06. Google Fonts 90013 90002 90003 Google directs you straight to the fonts without any fuss 90002 Originally launched in 2010 Google fonts are now viewed on the web over 15 billion times a day, in over 135 languages ​​worldwide. The Google Fonts site is clean and fully responsive, using Material Design for its grid and styling. 90003 90002 In her blog post about the project, designer Yuin Chien explains that «by building in the ability to play with scale, colour and font pairings, we invite everyone to discover and seamlessly use typefaces in their projects.»And she’s right; the interface is inviting and beautiful. It’s also intuitive and fun to explore. 90003 90002 Crucially it does not force you to jump through hoops to get to the fonts; they’re right there at the top of the landing page, ready for you to play with. You can type straight into the page’s text fields to test them out. And if you’re overwhelmed by choice, Google makes it easy to narrow things down with tick boxes for font categories and handy sliders for number of styles, thickness, slant and width.90003 90012 07. MIT Technology Review 90013 90002 90003 MIT Tech Review keeps it simple 90002 So many sites go out of their way to reel in those page views with fancy tricks, it’s a relief to find a site that keeps things nice and simple. MIT’s Technology Review, first published at the end of the 18th century, has a long and proud heritage, and its site has been tailored to showcase excellent art and be a delight to read. 90003 90002 The landing page is a joy to behold, starting you off with a bold cover story, three secondary stories, and a roundup list of the day’s top stories called ‘The Download’.This enables visitors to quickly get to what matters in a no-nonsense way. 90003 90002 A large red Subscribe CTA in the top-right also immediately draws your eye, channelling visitors to the paid website options without impeding their enjoyment of the free content available. 90003 90012 08. Resn 90013 90002 90003 The mysterious ‘drop’ breaks most of the rules of conventional landing page design 90002 Now let’s look at a page that disregards most of the rules of landing page design, yet succeeds anyway.Never one to fall in line and use a standard UI pattern, design agency Resn has built a landing page centred around ‘The Drop’, an enigmatic, shimmering teardrop-shaped polygon that acts as a portal into the Resn psyche. 90003 90002 Click and hold your mouse and you get to be, variously, a greyscale, apple-themed kaleidoscope; a bat with a ouija board that uses its x-ray laser beams to strip the flesh from people in old paintings; a fun tube; a psychedelic Yakult that dispenses bizarre clipart; and goodness knows what else.90003 90002 Resn has broken many of the usual rules for creating a landing page, but the result is compelling enough that you’re likely to keep digging around if this kind of thing floats your boat, and refrain from wasting their time if not. ‘The Drop’ probably works as a perfect filter for attracting the kinds of clients the company wants to work with, and it is a truly magnificent landing page that you’ll probably never forget. 90003 90012 09. Present & Correct 90013 90002 90003 Every panel is a temptation 90002 With its neatly laid-out grid of glorious imagery, the Present & Correct site reaches out to what is surely its core audience: people who fetishise stationery.90003 90002 A graph paper background, pale grey colouring and classic font channel a school exercise book vibe and each panel displays a beautiful product. Stock is meticulously arranged into categories displayed in the top menu bar, and it’s tempting to click through the whole lot, starting with the intriguingly-titled ‘Ephemera’ section. 90003 90012 10. Monotype 90013 90002 90003 Like the company itself, Monotype’s landing page is about the power of typography 90002 «We are the company behind type,» states Monotype’s landing page, and its understated yet smart design goes hand-in-hand with this confident statement.The entire left half of the landing page design is dedicated to the company’s mission statement, and there’s a clever twist: through a dropdown you can view the text in an assortment of fonts, and in various weights and styles, to get a taste of what Monotype does. 90003 90002 The right-hand side of the page is given over to a link to the Monotype library, enterprise licence, and company news, with large ‘M’ icons in different fonts, acting like drop caps. A muted sepia colour palette keeps the focus firmly on the fonts.90003 90012 11. LS Productions 90013 90002 90003 LS Productions lures you in with cavalcade of gorgeous Scottish locations 90002 LS Productions — a stills and motion service production company based in Scotland — knows what its biggest asset is, and that’s what you’re presented with when you go to its site. A window-filling looping video showcases a selection of the company’s work, all set in beautiful locations. Scroll down and you’ll learn of its three main services: motion, stills and locations.90003 90002 By this point the landing page has already done its job. Everything below — the gorgeous location of the week, the ‘meet the team’ section — is just window dressing. If you’re looking to hire LS Productions then you’ll have already moved on to one of the main service pages, where you’ll find a wealth of relevant, well-presented information convincing you of the company’s suitability. 90003 90012 12. O’Neill 90013 90002 90003 O’Neill’s photo-heavy page sells the surf and snow dream perfectly 90002 American lifestyle brand O’Neill is largely focused on two things: surf and snow.And its US site makes that perfectly clear with an image-led landing page that sells you its clothing ranges and sports gear through stunning photography of big waves and snow-covered mountains. 90003 90002 A set of drop-down links at the top of the landing page can take you straight to what you want if you know what you’re after, but beneath that the landing page sets out to seduce you, with several large, image -led section links and Instagram galleries. It’s all quite enough to get you dashing to the beach — or the top of the nearest mountain — but not before stocking up on O’Neill gear first.90003 90012 13. Hipstamatic 90013 90002 90003 Hipstamatic’s landing page shows what the app has to offer 90002 For retro analogue photography app Hipstamatic, it’s all about demonstrating the cool features, as well as the look, feel and intuitive navigation of the app, in as engaging a fashion as possible to draw users in. 90003 90002 At the top of the page, a scrolling gallery strip showcases the ‘Hipstamatic aesthetic’ in practice, while an enormous iPhone showcases the latest version of the app, with its old-school ClassicMode and new ProMode, with more up-to- date features.Beneath that a new strapline sums up what Hipstamatic is now all about: «Make beautiful photography», with a big CTA directing you to the App Store. 90003 90012 14. Apple 90013 90002 90003 Apple’s landing page centres around beautifully shot product photography 90002 It’s no surprise that the undisputed masters of industrial design can knock together a decent website, and the effortless simplicity of Apple.com has even won it a D & AD Black Pencil. 90003 90002 The homepage slices through the company’s extensive product range and zeroes in on just one hot product of the moment.Besides the simple navigation bar across the top, it’s just beautifully shot product photography, the product name and its slogan. There is not even a CTA here — Apple sensibly assumed its tech-savvy audience will know the image and text is hyperlinked to more information. It’s a true masterclass in restraint. 90003 90012 15. Pinterest 90013 90002 90003 Pinterest is so well known, its landing page does not need to work hard to sell itself 90002 Pinterest knows what it wants, and is in no mood to beat about the bush: it’s sign up or nothing .The popular online scrapbook is confident enough in its brand and burgeoning reputation not to worry too hard about selling itself, or giving users an opportunity to browse around some boards and risk getting sidetracked. 90003 90002 Behind the signup card, one of Pinterest’s scrapbooks of glorious photography scrolls tantalisingly upwards, giving a taste of what’s on offer for users. This is a stripped-back and beautified version of what you actually get — no wordy descriptions, ads or repin info clutters up this version of the homepage.90003 90002 90003 Generate CSS (26 Sept) is a London conference dedicated to all things CSS — book your ticket now! Use the code 90148 WEBDESIGNER2 90149 for 10% off tickets (Image credit: Getty / Future) 90002 90148 Related articles: 90149 90003 .

Отправить ответ

avatar
  Подписаться  
Уведомление о