Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн


Дизайн Форум


Про дизайн и web дизайн




Главная     Галереи Дизайна (29)




  Статьи о дизайне





  Галереи дизайна

Промышленный дизайн, графический дизайн, гламурные картинки, иконки, аватары.

  Помощь Дизайнеру!

Советы по дизайну. Философия, психология и трудовые будни дизайнера.



  Как сделать продающий дизайн. Создание
  лендинга





Сделайте так и вы потесните конкурентов! Композиционные и психологические приемы построения лендинга - эффективной продающей страницы web сайта.

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

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


Информационные блоки на продающей странице

Шапка продающего сайта ничем не отличается от шапки обычного тематического сайта

В шапке landing page размещаются:
  1. Логотип в левой части. На одном уровне с логотипом можно обозначить:
    Телефон, Адрес компании, Почту, Скайп, кнопку "Бесплатный заказ звонка" или "Беаплатная консультация"

  2. Ниже (не обязательно для одностраничников) располагаем горизонтальное меню навигации по сайту. Пункты меню могут быть разные, но кнопки "контакты" и "о компании" ставим справа в конце списка:
    Продукция, Каталог, Услуги, Отзывы, Партнерам, О компании, Контакты

Имиджевый блок продающей страницы (Landing page) сайта

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

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

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

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


Информационные блоки лендинга

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

Блок - Самообслуживание
Это могут быть:
  1. Калькулятор стоимости товара

  2. Форма поиска товара по заданным параметрам

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



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



Блок - Халява, Сэр!
Обозначается бесплатная услуга и возможность ее подключения. Здесь же возможен второй блок про простую установку или быструю регистрацию. Обязательно большая кнопка "Установить", "Заказать" или "Зарегистрироваться".



Блок - Наши успехи
Информация о компании, успехи и достижения компании. Все, что добавит кредит доверия - грамоты, награды, сертификаты.



Блок - Наша продукция или Наши проекты
  1. Основные товары - фото, графика, слайдер

  2. Описание основных преимуществ товара, что появилось нового (если предусмотрено улучшение товара), совместимость (если это программа)

  3. Перечисление видов товара. Фото, слайдер, видео вставка
Можно комбинировать с блоком Наши успехи (сравнение до и после) и кнопкой Заказать.



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

  2. Инфографика тарифов, количество продаж, количество регистраций, количество довольных

  3. Наименования, бренды, перечень цен

  4. Места, где работает продукт, количество продаж, количество клиентов


Контентный блок
Новости компании, обзоры, статьи.


Блок - Преимущества работы с нами или Что получите Вы

  1. Почему нам доверяют. Почему выбирают нас. Описание наших преимуществ - инфографика с описанием

  2. Этапы работы с нами - графика

  3. Что вы получаете, работая с нами - перечисление, графика

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


Блок подписки

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


Блок оплаты

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


Блок рекомендаций

Отзывы клиентов - графика. Благодарности.


Наши клиенты, партнеры или поставщики

Перечисление партнеров - текст или графика с описанием.


Блок о сотрудниках компании

Руководство компании - фото и цитата. Клиент менеджеры компании- фотографии с указанием должности и телефона.


Блок присутствия в соцсетях

Формы регистрации в группах компании в соцсетях. Значки соцсетей, нравится, подписчики.


Блок ожидаемого действия

Этот блок размещается на LP несколько раз.
Это может быть:
  1. Кнопка - Создать, Заказать, Зарегистрироваться (последнее напоминание)

  2. Форма подписки на рассылку

  3. Форма сотрудничества (стать партнером)

  4. Форма - Задать вопрос

  5. Блок акции или скидки

Подвал продающей страницы

Нижний информационный блок может включать в себя:
  1. Местоположение компании на карте. Возможна компбинация с реквизитами и телефоном

  2. Реквизиты компании, контакты, меню навигации по сайту и по товарам, копирайт

  3. Варианты оплаты - мелкие значки платежных систем или перечисление вариантов оплаты


Также на продающей страничке должен присутствовать онлайн-консультант. И не лишним будет присутствие промо-кодов на скидку.


Контент и структура лендинга

Требования к продающему тексту

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

Обязательная структура landing page

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

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

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

Важное условие - формы для регистрации должны быть предельно простыми и понятными. Лучше расположить такую форму вверху - ближе к началу страницы.

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

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

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

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

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

Еще Стив Круг в 2002 г. говорил, что сайт должен быть праздником для посетителя и посетитель должен чувствовать себя на сайте комфортно. Если вы этого добились - вы решили задачу по созданию landing page.

Обязательный контент для продающего сайта

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

  2. Обязательны крупные заголовки

  3. Понятный призыв к действию

  4. Убедтельные изображения и тексты. Вы должны убедить посетителя, что заказать нужно именно здесь

  5. Минимальное количество предложений товаров и услуг на странице. В идеале - одна цель на странице

  6. Очень важно указать контактную информацию, политику конфиденциальности и реквизиты компании

  7. Обязательно наличие схемы проезда до офиса компании

  8. Лицо компании - ваши сотрудники. Фото сотрудников в подробном разделе "О компании" лишними не будут

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

  10. Товаров должно быть много (чтобы можно было выбирать), товары должны иметь: фотографию, описание, характеристики, обзоры, отзывы и обязательно крупно и заметно - цену. Предложение товара должно быть понятно пользователю

  11. На сайте должен быть фильтр поиска по параметрам товара

  12. Простая регистрация с указанием минимума информации о себе, но в любом случае нужно изучать своих клиентов

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

  14. При всем при этом сайт должен быстро грузиться

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

Пример продающей страницы


Схема главной и внутренней страниц продающего сайта интернет магазина

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

Дизайн продающего сайта Дизайе landing page

Автор Клюев М. 2015


Смотрите также:
Веб дизайн и создание сайтов - мое портфолио
Интерфейсы, web дизайн, графика
Что такое Landing page









  Rambler's Top100  


Web дизайн и создание сайтов       Пользовательское соглашение

Карта сайта      Наверх