Некоторые особенности творческих идей для лендингов в веб-дизайне. Форма обратной связи. Данные о предоставляемом продукте или услуге

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

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

Простой, но симпатичный дизайн. Плюс в том, что можно войти на сайт через Facebook, не тратя время на регистрацию.

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

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

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

Фишка этого дизайна — простота. Простое меню и яркий слайдер отлично сочетаются.

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

Дизайн не перегружен лишними элементами, сразу можно посмотреть все характеристики и цены товара.

Развлекательные сайты

Просто и со вкусом. Сразу ясна цель страницы — просмотр документального видео.

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

Этот сайт выше всех похвал. Блестяще продуманный дизайн и обилие интерактивных элементов никого не оставят равнодушным.

В дизайне этой страницы, посвященной франшизе о Гарри Поттере, использованы знакомые фанатам цвета, фразы и имена.

Эта страница не только выглядит красиво, она еще и очень функциональна: множество интерактивных элементов, интеграция с Google Maps, использование вкладок.

Uncrate и после редизайна не меняет своей традиции расположения всех разделов сайта в удобном верхнем навигационном меню.

Этот сайт демонстрирует всю мощь графического дизайна и веб-разработки. Лучше зайти на него и самостоятельно убедиться в этом.

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

Визуальная составляющая этого сайта потрясающая. Яркие образы мгновенно захватывают внимание пользователей.

Jay-Z точно знает, как нужно развлекаться. На его сайте статьи, изображения и другой контент представлен в виде интерактивных плиток.

В этом дизайне использованы природные оттенки, отлично сочетающиеся с главными вопросами, поднятыми на сайте.

Лендинги-портфолио

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

В этом примере очень интересное сочетание цветов. Более того, на странице у всех элементов использована одинаковая структура фонов, под дерево.

Здесь очень удачно использован «олдскульный» стиль, дизайн каждого элемента продуман до мелочей и уникален. Благодаря бесконечному скроллингу на этом сайте наслаждаться такой красотой можно долго.

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

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

Пример необычного плиточного дизайна.

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

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

Иконки и ничего лишнего. Хороший пример минималистичного дизайна.

Страница-портфолио отображает самое главное — примеры работ.

Розничная торговля

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

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

Ничто не отвлекает посетителя от созерцания прекраснейших часов.

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

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

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

Toyota сделала сайт в стиле Pinterest для любителей Camry. Здесь можно найти множество фотографий, статей, статистики.

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

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

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

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

Плавающая красная кнопка в середине экрана делает свое дело: на нее очень хочется нажать.

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

При разработке дизайна обычно учитывают ряд моментов: макет и верстка страницы, внешний вид и расположение логотипа, заголовка, кнопок и форм. Кроме того, важно понимать, где должны располагаться цены на услуги, специальные предложения, описание продукта, как эти блоки должны быть оформлены, какое количество текста и изображений на странице оптимально. Зачастую клиенты уходят с сайтов, в частности, с landing page — дизайн «не зацепил». В голове пользователя неосознанно формируется мысль: «Если дизайн у них не очень, а на сайте невозможно ничего найти, то где гарантия, что можно пользоваться их услугами?». Чтобы такого не происходило, вам нужен красивый лэндинг.

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

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

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

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

Если у вас нет времени и возможностей самостоятельно заниматься разработкой дизайна, просто зарегистрируйтесь на 1C-UMI в 2 клика и создавайте действительно крутые лэндинги!

Целевая страница или лендинг или landing page - та страница, та информация, которая впервые, в большинстве случаев, знакомит пользователей (и потенциальных клиентов) с брендом и его услугами/товарами. Это даже не сайт в привычном для нас понимании. Это более сложная вещь, выразимся так, которая представляет информацию всё ту же, что и на сайте, но в более сжатом и конкретном виде, как говорится, «по делу без излишеств». Казалось бы, что выглядеть это должно скучным и унылым, а на деле даже тот, кому и услуги бренда-то не нужны, «зависают» на страничках и смотрят, читают, пытаются узнать, как оформлено и прочее. Представьте, что такой пользователь бывает магическим способом еще заворожен так, что все равно умудряется что-то купить/заказать или уж точно, добавить страничку в закладки.

Вот почему? Как они (веб-дизайнеры) это делают?

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

Не все так просто

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

Шаблонность

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

В результате появляются такие лендинги как pinestreet , youate , ginventory , baronfig . Структура каждого из них узнаваема и не оригинальна (по сути), но визуализация в целом, оформление, расположение отдельных элементов, типографика придают каждой целевой странице свой характер и уникальность .

Ясность CTA

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

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

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

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

В свою очередь целевая страница Taster"s Club решает сразу несколько идей, что мы описали выше. Это и персональный подход, и яркие CTA, и создание дизайна понятного для разного типа пользователей. Интерес в данном случае представляет тот момент, что данный лендинг является и домашней страницей виски-клуба.

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

Если же кликнуть на JOIN NOW, то начинается настоящая забава. Изначально предстоит выбрать свой клуб (тип виски), который вам более всего нравится и затем увидеть возможные варианты членства и цены для приобретения. Уже затем можно еще раз кликнуть по кнопке «Присоединиться» и перейти к форме для заполнения платежной информации.

Иерархия, поток и примеры целостности

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

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

В свою очередь, лендинг компании H.BLOOM также информативен и понятен, хотя имеет, наверное, самый маленький размер в отличие от большинства шаблонов. Для начала обратим внимание, что поскольку тематика посвящена цветочным композициям и букетам, то подобран был и достаточно элегантный шрифт, несколько небольших изображений (большее количество на лендинге попросту не требуется). И все. Более здесь нет ничего из контента.

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

Особый интерес представляет и еще одна секция - HOW IT WORKS. Люди в большинстве своем заняты чем-то и не любят сложностей, поэтому секция стала идеальным способом устранить любые сомнения. Всего в трех шагах показывается, как работает компания и что, и зачем должен сделать пользователь: консультация - график работы - конечный результат. Банально , скажете вы, это и так понятно . Одно дело понятно, но никогда не мешает лишний раз повторить и проговорить.

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

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

Кнопка CTA создана яркой и несколько нарочитой, её невозможно упустить, но при желании можно узнать и подробности проекта Patreon. При этом новой страницы не появится, а появится небольшое видео, поясняющее, как работает платформа. Или же можно пролистать страницу.

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

Аналогично построен и лендинг Wave , который представляет приложения для управления малым бизнесом. Но. Вместо того, как это обычно бывает, представлять само приложение, его возможности, веб-дизайнеры решили сразу сообщить для кого оно и зачем. И отобразили это и на изображении, и заголовком. И правильно подобранное изображение, в данном случае, говорит больше, чем обилие текста или пояснений, отзывов, комментариев. Уже если пользователю интересно приложение, он может пролистать страницу и узнать подробности, но они не первоочередное и не самое значимое для брендинга.

Выводы

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

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

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

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

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

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

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

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

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

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

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

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

Long и Short landing page;

Оne step и Two steps landing page.

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

значит, дневная конверсия составила 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 блока, и каждый отвечает за свою часть захвата.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

«Встречают по одёжке…», гласит известная пословица. Что ж, в случае с интернет-маркетингом это в 9 случаях из 10 совершенно справедливо.

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

Первое правило дизайна: «Не заставляйте меня думать!»

Ключевое правило веб-дизайна сформулировано в Стивом Кругом. Вышедшая в далёком 2000 году книга «Не заставляйте меня думать» актуальна спустя 15 лет.

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

В чём суть правила? Среднестатистический потребитель не хочет думать. Зайдя на сайт или продающую страницу, он хочет рассуждать по принципу «так, понятно… а вот это… а вот и то, что мне нужно». И как часто владельцы сайта сами строят препятствия на пути у потенциального покупателя! Бездарный дизайн лендинга – то, что забивает первый гвоздь в крышку гроба вашего проекта.
Как же выглядят типичные ошибки?

4 ошибки, снижающие конверсию

Ошибки №1 и №2

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

  • В первом случае «дизайнеры» используют заезженные, безжизненные шаблоны. Утянутые с flaticon.com бесплатные пиктограммы, таймеры на весь экран со «специальными предложениями» и другие прелести – прилагаются.
  • Второй случай намного хуже первого, и, ей-Богу, лучше бы горе-дизайнеры лепили всё по одному (но хорошему) шаблону. Речь идёт о случаях, когда дизайн абсолютно не соответствует предлагаемому товару. Визуально «тяжёлые» блоки, тёмно-коричневый цвет, текстуры кожи, дерева и золота в лендинге, продающем чай для похудения? Легко!
    Как этого избежать
  • Остерегайтесь бесплатных «стандартных» шаблонов. Они могут быть очень яркими и красочными, но абсолютно не выражающими суть вашего товара. Обратитесь к профессионалам, которые придадут лендингу действительно уникальный вид.
  • Чётко определитесь с ЦА. Если это девушки, то и дизайн landing page должен быть в меру «девчачьим» – в зависимости от товара. Если вы продаёте дрели новейших моделей, то пусть и дизайн landing page будет сдержанным, «профессиональным» – ведь именно этого ждёт мужская аудитория. Запомните: не получится угодить всем.

Ошибка №3

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

  • Мелкий шрифт. Это хуже… хуже всего, в общем. Когда текст набран крошечными буковками, ваш потенциальный клиент НЕ БУДЕТ напрягать зрение дольше нескольких секунд, и просто закроет страницу. Смиритесь. И начните, наконец, использовать большие буквы.
  • Слишком много текста. Лендинг может состоять и из 5, и из 25 блоков (последнее даже лучше – при соответствующем исполнении). Однако ни один из них не должен быть перегружен текстом. 90% людей визуалы – так дайте им картинки, образы, которые легко считываются и запоминаются. «Не заставляйте меня думать!» — не забыли?
  • Светлый текст на тёмном фоне, капслок, восклицательные знаки!!!, и другие мелочи. Всё это напрямую относится к дизайну. Текст в лендинге должен легко читаться. А читаемость зависит не только от того, как построена фраза, но и от того, как она выглядит.

Как этого избежать?

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

Ошибка №4

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

Ваш лендинг выглядит:

  • банальным
  • пошлым и безвкусным
  • кричащим «у нас нет собственных фотографий, поэтому мы покажем приторную картинку»
  • а главное – это ощутимо снижает конверсию

Если вы стесняетесь, или вам некого фотографировать в качестве сотрудников – разоритесь на 5 долларов ради платного аккаунта на фотостоках.

Немного о usability

К дизайну также относится «юзабилити» лендинга. Слово usability не имеет адекватного перевода на русский язык. «Удобство использования» – достаточно близкий перевод, лишённый, впрочем, оригинального «вкуса».
От того, как расположены и как выглядят элементы интерфейса на вашей landing page, во многом зависит решение посетителя о покупке.

Говоря упрощённо:

  1. Кнопка «купить» выглядит вызывающе, кричаще? «Мне что-то навязывают», думает клиент, и навсегда уходит с вашей страницы.
  2. Кнопка «купить» находится в неочевидном месте, её трудно найти? Клиент снова уходит.

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

Помните, для чего нужен лендинг

Есть лендинги с прекрасным дизайном, грамотной структурой, идеально подобранными шрифтами. Всё замечательно, но конверсия почему-то мизерная. В чём же проблема? В том, что посадочная страница создаётся исключительно ради одного дела. Ради продажи.
Все элементы лендинга – дизайн, текст, структура – должны быть заточены на то, чтобы побудить посетителя сделать заказ. Это не так просто, и за деревьями легко не увидеть леса. Помните об этом.

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то