Как создать landing page урок 3

Скетч для landing page

3 части как я делаю скетч:

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

Скетч для landing page - Что такое скетч
Скетч для landing page — Что такое скетч

Выглядит он так.

Скетч для landing page - Скетч
Скетч для landing page — Скетч

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

Скетч для landing page - ТЗ - техническое задание
Скетч для landing page — ТЗ — техническое задание

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

Скетч для landing page - Набросок блоков на странице
Скетч для landing page — Набросок блоков на странице

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

Для начала, какими программами я пользуюсь для создания скетча? Я уже более двух лет пользуюсь программой Adobe Photoshop. Почему именно ей? Первое. Мы всегда можем объединить несколько слоев, например, квадратики, кружочки, тексты, картинки в один слой. Это отлично помогает при макетировании, например. Второе. Я могу вставлять готовые картинки, логотипы, или их наброски. Третье. Я могу разметить цветовым фоном блоки, или их части. Давайте, попробуем нарисовать пару скетчей в фотошопе. Для этого мы нажимаем кнопку «создать», делаем ширину 1000 и высоту, например, 3000, или 4000. Высоту можно будет всегда удлинить.

Скетч для landing page - Выбираем ширину и высоту
Скетч для landing page — Выбираем ширину и высоту

Далее переходим в слои. Вкладка справа, внизу. Здесь нажимаем папку, называем первый слой «заголовок». Второй – «фон», или «картинка». Третий – «контакты». «Логотип + ДЦТ», «яйца», «форма». Форма – в смысле форма захвата.

Скетч для landing page - Первый экран
Скетч для landing page — Первый экран

Это будет наш первый экран, поэтому мы называем его «первый экран» и вносим все эти папки внутрь первого экрана.

Скетч для landing page - Переносим папки внутрь первого экрана
Скетч для landing page — Переносим папки внутрь первого экрана

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

Скетч для landing page - Самый простой способ, чтобы ищущий клиент в интернете заказал у вас на сайте
Скетч для landing page — Самый простой способ, чтобы ищущий клиент в интернете заказал у вас на сайте

Первое. Клиент вбивает поисковый запрос. Если это контекстная реклама, или видит рекламу, если это, например, соцсети, или баннерная реклама, или тизерная. Далее он видит от трех, до семи предложений, или оферов. Затем переходит по ним. Открывает только те страницы, которые загрузились первыми. Далее смотрит на предложение на целевой странице. Оно должно быть равно предложению в рекламе. Если оно не совпадает, значит, человек уходит и листает дальше следующий сайт. Если предложение его устраивает, он начинает искать инструкцию на сайте, какой следующий шаг требуется от него, что он получит за свое действие. Далее необходимо дать ему инструкцию, по которой он сможет связаться с вами и далее заставить его правилом СТА ( Call to action) отправить заявку на сайте, или позвонить. Следующее правило DMMT.

Скетч для landing page - Правило DMMT
Скетч для landing page — Правило DMMT

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

Итак, начнем делать лендинг пейдж. Выберем тематику. Тематика будет «шумоизоляция автомобиля». Переходим к написанию заголовка. Для этого необходимо было проанализировать несколько конкурентов, понять их цены, суть их УТП и что они вообще могут предложить. Заголовок должен коротко и ясно объяснять, что вы продаете и основную выгоду при покупке услуги, или товара у вас. Например, «капитальный ремонт квартиры от 8900 рублей кв.м», или «купим ваше авто по рыночной цене за 30 минут». Или в нашем случае – «профессиональная шумоизоляция авто от 12 000 рублей». Причем, 12 000 рублей я вынес чуть ниже.

Скетч для landing page - Заголовок
Скетч для landing page — Заголовок

И теперь я расскажу про такую вещь, как подзаголовок. Подзаголовок несет в себе дополнительную ценность для клиента. Например, «профессиональная шумоизоляция авто» — это чем болеют большинство гаражных сервисов и они предлагают просто шумоизоляцию авто. А мы можем предложить именно профессиональную, в хорошем сервисе. Конечно же, немаловажную ценность несет цена услуги и она примерно такая же, как по рынку, или даже ниже. Естественно, ее мы помещаем в подзаголовок и также помещаем два места, где располагаются сервисы, это Дмитровское шоссе и город Железнодорожный. Этот текст будет мельче. Также Дмитровское шоссе и Железнодорожный мы сделаем цветом голубоватым и пометим, что это будет ссылка. Ссылка, при которой человек, нажимая, например, на Дмитровское шоссе, пролистывается вниз лендинга, где может записаться именно в этот сервис.

Скетч для landing page - Подзаголовок
Скетч для landing page — Подзаголовок

Также, чтобы упростить себе работу, мы нажимаем на кнопку «просмотр» и нажимаем «новая направляющая». Добавляем вертикальную направляющую и двигаем ее к центру. Это у нас будет 500 пикселей, половина от 1000. И теперь мы сможем спокойно размещать элементы по центру лендинг пейджа. Подзаголовки также могут быть, например, «составим смету уже завтра и подарим дизайн-проект», или «приедем к вам и купим на месте». То есть та дополнительная ценность, которая нужна прямо сейчас клиенту.

Переходим к картинке. Картинка – это визуализация, или процесса, или мечты результата. Если, к примеру, мы продаем ремонт и обслуживание кондиционеров, то необходимо будет поставить картинку с человеком, который ремонтирует кондиционер. Если продаем установку пластиковых окон – это результат. Пластиковое окно с радостной семьей рядом. Тут работает правило «покупка на эмоции». Если человек увидит себя на лендинге, то это половина успеха. Если это ландшафтный дизайн, это опять же результат, значит, много зеленого газона и основные элементы ландшафтного дизайна – альпийская горка, прудик и так далее. Где брать картинки? Конечно, картинки лучше всего использовать свои. Съездить, сфотографировать свои работы в хорошем качестве, заказать хорошую обработку фотографий. Но можно взять их с бесплатных фотобанков, например, dreamstime.com. Например, на ландшафтный дизайн выдает вот такие картинки.

Скетч для landing page - Картинки по ландшафтному дизайну на бесплатном фотостоке dreamstime.com
Скетч для landing page — Картинки по ландшафтному дизайну на бесплатном фотостоке dreamstime.com

Dreamstime , free digital photos, free-image Free photos bank и так далее. Фотобанков очень много, в основном иностранных.

Скетч для landing page - Фотобанки
Скетч для landing page — Фотобанки

Также можно брать картинки из Яндекс картинки и Google Image. Они вполне подходят для первых вариантов лендинга.

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

Скетч для landing page - Выдача в Яндекс Картинки по запросу шумоизоляция авто
Скетч для landing page — Выдача в Яндекс Картинки по запросу шумоизоляция авто

Почему я лезу сначала в Яндекс Картинки? Яндекс Картинки работает над технологией Яндекс сео, т.е. он подставляет те картинки, на которые пользователь обращал больше всего внимания, это значит, что конверсия с этих картинок, возможно, будет больше, чем с других картинок, которые мы сами придумаем себе в голове. Есть два варианта. Первый вариант – это использовать просто картинку внутренней шумоизоляции, что не очень красиво будет смотреться на лендинге. И второй вариант – это использовать визуализацию того, что будет сделано. Поэтому, я поступлю следующим способом. Я возьму какой-нибудь автомобиль, возьму автомобиль, который пользуется популярностью для шумоизоляции. Для этого мы пользуемся подсказками наших клиентов, которые заказали лендинг пейдж на шумоизоляцию, например, Honda Accord. Ищу картинку на Honda Accord сбоку.

Скетч для landing page - Honda Accord сбоку
Скетч для landing page — Honda Accord сбоку

Зачем это нужно? На этой картинке можно будет показать, в каких местах мы собираемся делать шумоизоляцию автомобиля. Беру картинку Honda Accord, сохраняю ее себе в картинки. Сохраняю эту картинку в папку с нашим скетчем и помещаю в Фотошоп.

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

Скетч для landing page - Обозначаем кружочком на картинке место, где будет шумоизоляция
Скетч для landing page — Обозначаем кружочком на картинке место, где будет шумоизоляция

Для того, чтобы вместе совместить два элемента, мы нажимаем на кнопку «прямоугольник», возможно, даже оставим группу 1, совмещаем вместе, исправляем двери в цвет, который нам необходим, чтобы он хотя бы как-то отражался и было понятно, что за текст написан, делаем, естественно, более мелкий текст, пишем «двери» и оставляем. Таким образом, при наведении на картинку, или на текст «двери», у нас будет какое-то описание появляться. Либо, если не описание, то человек может просто нажать на «двери» и пролистнуть вниз, где идет описание услуги, что конкретно мы делаем. Далее мы делаем тоже самое для остальных четырех элементов шумоизоляции. Как вы видите, я скопировал просто этот элемент, эту группу элементов и теперь ее размножаю насколько раз мне нужно.

Скетч для landing page - Размножаем группу элементов на нужное количество раз
Скетч для landing page — Размножаем группу элементов на нужное количество раз

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

Скетч для landing page - Элементы на лендинге
Скетч для landing page — Элементы на лендинге

Также могу сделать очень интересный элемент. Нажимаю Alt + Print Screen на выбранной мной Опере, открываю Adobe Photoshop, создаю новый слой, выбираю правой кнопкой мыши на инструменте «прямоугольная область», меняю ее на «овальную область», выбираю ее, круглую, например. Нажимаю Ctrl + C, Ctrl + V. Уменьшаю так, как мне необходимо. И могу вставлять, например, в раздел с потолком, т.е., чтобы было понятно, что визуализировать нужно будет дизайнеру.

Скетч для landing page - Что будет необходимо визуализировать дизайнеру
Скетч для landing page — Что будет необходимо визуализировать дизайнеру

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

Скетч для landing page - Логотип дескриптор
Скетч для landing page — Логотип дескриптор

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

Скетч для landing page - Логотип и дескриптор
Скетч для landing page — Логотип и дескриптор

Переходим к блоку «контакты». В контактах первый и самый главный элемент – это номер телефона. В нашем случае мы будем использовать номер -7499… Почему? Потому, что все наши клиенты из Москвы и Московской области. Мы его делаем крупным.

Скетч для landing page - Контакты, телефон
Скетч для landing page — Контакты, телефон

Также есть в блоке «контакты» несколько интересных элементов, на которые обычно не обращают внимание ребята, которые только начинают делать лендинг пейджи. Первое. Необходимо использовать Call to Action над телефоном. Например, «есть вопросы – звоните». И звонить будут только те, у кого есть вопросы. Либо «хотите заказать – звоните». Значит, будут звонить те, кто хочет заказать. В нашем случае мы будем использовать «есть вопросы – звоните» для того, чтобы увеличить количество звонков на телефон. Под телефоном мы расположим блок «часы работы». «ПН – ВС 9,00-21,00». Подгоняем его по размеру. Не обязательно его делать крупным, можно сделать мелко.

Скетч для landing page - Call to Action. Часы работы
Скетч для landing page — Call to Action. Часы работы

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

Скетч для landing page - Кнопка обратного звонка
Скетч для landing page — Кнопка обратного звонка

Как оказалось, по опыту и по исследованиям в вебвизоре, очень часто на кнопку нажимают потому, что на ней есть слово «бесплатно». Теперь переходим к блоку «яйца». Блок «яйца» из себя представляет какие-то преимущества по сравнению с конкурентами. Обычно это факты, например, если открыть сайт m-context.ru, блок присутствует сверху по центру – «с нами работают МБМ, Mercedes, RealPRgroup. Более 5000 Яндекс Директ кампаний! Снижаем цену клика!».

Скетч для landing page - Блок яйца
Скетч для landing page — Блок яйца

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

Скетч для landing page - Блок яйца на лендинге
Скетч для landing page — Блок яйца на лендинге

Теперь мы можем подвинуть блоки так, как нам нужно и переходим к блоку «форма захвата». На первом экране не всегда нужна форма захвата, но на первом варианте лендинга я вам крайне рекомендую поместить форму захвата. То есть, открытая форма, которая выделена каким-то цветом, возможно, ярким и в которой есть информация о том, как быстро с вами связаться и, главное, зачем с вами связываться быстро. В форме захвата есть несколько очень важных элементов. Первое. Это заголовок. Опять же, первый раз, когда мы создаем лендинг пейдж, мы ничего сверхъестественного не придумываем, делаем также, либо как у конкурентов, либо самый простой и бесплатный вариант, безболезненный для оставления заявок нашим клиентам. Бесплатный расчет, поэтому мы здесь напишем «закажите», «заказать бесплатный расчет», «стоимость». Увеличиваю картинку, дабы прибавить ей веса для того, чтобы наши потенциальные клиенты видели, что мы предлагаем.

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

Скетч для landing page - Форма захвата
Скетч для landing page — Форма захвата

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

Скетч для landing page - Топ 3 фобий формы захвата
Скетч для landing page — Топ 3 фобий формы захвата

Мы забыли кнопку. Делаем кнопку. Делаем ее также серым. Элементы, все одинаковые элементы мы делаем одного цвета. И пишем на кнопке, на этот раз в обычном наклонении «заказать бесплатный расчет». Подчеркиваем, так как это кнопка. Также крайне желательно в заголовке формы указывать в повелительном наклонении первый глагол – «закажите бесплатный расчет стоимости». Кнопка Смотрим, как выглядит первый экран. Он еще не до конца закончен, но начинает уже вырисовываться.

Скетч для landing page - Кнопка
Скетч для landing page — Кнопка

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

Скетч для landing page - Блок никакого спама
Скетч для landing page — Блок никакого спама

Давайте, посмотрим на другую форму захвата, например, «Получить расчет под ваш проект. Введите свой телефон и через 72 часа у вас на руках готовый проект оборудования. Введите свой телефон, мы перезвоним вам в течение 15 минут. Получить расчет – это бесплатно. Заполнение заявки вас ни к чему не обязывает, вы можете отказаться в любой момент».

Скетч для landing page - Пример формы захвата
Скетч для landing page — Пример формы захвата

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

Скетч для landing page - Пример одной из форм захвата
Скетч для landing page — Пример одной из форм захвата

Давайте, также сделаем и на этой форме, переделаем немного кнопку, сделаем «заказать расчет» и снизу напишем – «это бесплатно». Сделаем помельче «это бесплатно». Люди читают мелкий текст, поэтому мы можем на этом сыграть и, давайте, немного оттянем и посмотрим, как будет выглядеть наш лендинг, наша первая страница. «Профессиональная шумоизоляция авто от 12 000 рублей, Дмитровской шоссе, Железнодорожный». Давайте, также подпишем букву «г». Но первый и самый важный постулат в копирайтинге – проговаривать весь текст вслух. Главное, чтобы он резал слух. «Профессиональная шумоизоляция авто, потолок, багажник, днище, колесные арки, двери». «Закажите бесплатный расчет стоимости. Введите свой телефон и через15 минут получите идеальное комплексное решение для вашего авто». «Введите телефон». Здесь также можно написать «свой», прямо на язык, можно сказать, падает. «89051231212». «Заказать расчет. Это бесплатно. Заполнение заявки вас ни к чему не обязывает, вы можете отказаться в любой момент». Пока оставляем этот вариант. После того, как мы уже закончим лендинг, мы также еще раз пройдемся по первому экрану, также прочтем и поймем, насколько хорошо у нас информация отлежалась и на свежую голову будет понятно, хорош текст, или плох. Логотип «шумоизоляция автомобиля в Москве и Московской области. Работаем 10 лет! Бессрочная гарантия. Подробный фотоотчет». Давайте, уберем восклицательный знак, он здесь лишний. «Есть вопросы? Звоните» — телефон, «часы работы ПН-ВС 9.00-21.00», «позвоните нам бесплатно».

Скетч для landing page - Предварительный просмотр первой страницы лендинга
Скетч для landing page — Предварительный просмотр первой страницы лендинга

Теперь необходимо поместить еще два элемента на первую страницу. Они не обязательные, но я должен о них все-таки сказать. Первый – это меню. И второе – это акция. Начнем с меню. Для начала я передвину все блоки чуть ниже, выровняем их и в самом верху мы разместим несколько кнопок. Кнопки будут отображать меню. При нажатии на кнопку, человек видит, например, наши цены. Он нажимает на кнопку «наши цены» и лендинг прокручивается к месту, где есть наши цены. Если «наши работы», то значит передвигается к нашим работам. Зачем это нужно? На самом деле люди сейчас очень побаиваются лендингов, они не понимают, почему нет меню на сайте навигационного и имитацию меню мы размещаем на первой странице в самом верху. Есть разные вариации навигационного меню. Например, как на m-context. Сначала его нет, просто стоят кнопки, прокручивается ниже и уже стоят и телефон, и несколько кнопок, и логотип.

Скетч для landing page - Меню
Скетч для landing page — Меню

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

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

Скетч для landing page - Акция
Скетч для landing page — Акция

Итак, мы получили первый экран. Теперь мы можем его просто отключить, включить, или передвинуть, как нам необходимо и переходим к следующим блокам. Я буду рисовать все блоки, которые необходимо поместить на лендинг. Насколько они нужны и необходимы именно в вашем случае, я не знаю. Всегда можно попросить нарисовать дизайн, а потом уже на верстке убрать лишние блоки. То есть, если мы попросим дизайнера нарисовать 3-4-5 лишних блоков, никто от этого не пострадает. Поэтому будем рисовать все блоки на нашем скетче.

Скетч для landing page - Пробуйте рисовать все блоки на скетче
Скетч для landing page — Пробуйте рисовать все блоки на скетче

Следующий блок будет у нас называться «мы в цифрах». И всплывает очень важное правило, что каждый блок должен быть с заголовком. Поэтому начинаем мы с заголовка. Логотип, или название компании в цифрах, чтобы показать, что мы, опять же, не шарашкина контора, а крупная компания. Насколько хорошо работает этот блок? Во-первых, что он из себя представляет. Это какие-то цифры, факты о нас, тоже повторение яиц, но оно сделано для того, чтобы показать, что есть определенный индекс доверия к нам, sousel proof. Например, то, что мы на рынке 10 лет, или пишем даже так – «10 лет на рынке шумоизоляции». Причем, 10 лет мы можем отсюда вынести и поместить в кружочек. Размер шрифта можете выбирать сами. Я буду его делать чуть мельче. Сделаю блок очень маленький, юркий, чтобы люди одновременно его видели, но не останавливались лишний раз на нем. Для этого делаю, опять же, отдельную папку, помещаю «10 лет на рынке шумоизоляции» и кружочек в одну папку. Размножаем блок. Второй у нас будет сколько автомобилей мы уже обслужили, например, 800 шт. Пока можно делать даже безграмотно, главное накидать, что вы хотите этим блоком объяснить человеку. Сколько моделей, например, автомобилей мы обслуживаем, например, 80 марок, или моделей. Это можно подсмотреть у конкурентов, например, если необходимо, либо этот блок пока оставить и не трогать. И что-то еще четвертое, пока я еще не знаю, еще не решил. Перед логотипом я напишу еще «компания», чтобы уж точно убедить клиента и объяснить ему, что мы – компания.

Скетч для landing page - Блок Мы в цифрах
Скетч для landing page — Блок Мы в цифрах

Следующий блок. Что мы продаем, сетка цен. В нашем случае, что мы делаем, какую услугу мы предоставляем. «Какую шумоизоляцию мы делаем». Также я обязательно сделаю прямоугольник и выделю этот блок отдельным цветом для того, чтобы наш дизайнер понял, что его нужно будет выделять отдельно в видный цвет какой-нибудь. Попробуем написать немного текста. «Наши специалисты выполнят частичную, или полную шумоизоляцию для вашего авто». И здесь, естественно, текст этот сделаем маленьким, подзаголовок будет. Здесь необходимо нам уже разделить и таргетировать аудиторию. Во-первых, можно сделать и показать, что мы делаем, как раз-таки, четыре элемента шумоизоляции, это потолок, двери, багажник, днище. Давайте, пока просто мы нарисуем это, например, потолок. Опять же, поместим в отдельную папку, чтобы можно было всегда убрать, переместить, сдвинуть и тому подобное. Потолок сделаем пока. Можно сделать другим цветом, как вам угодно. Я пока не буду усложняться, мне пока достаточно просто пока накидать и понять, как будет выглядеть у нас и нужно ли это вообще помещать на лендинг.

Скетч для landing page - Блок что мы продаем, сетка цен
Скетч для landing page — Блок что мы продаем, сетка цен

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

Скетч для landing page - Таргетируемся на покупателя
Скетч для landing page — Таргетируемся на покупателя

Во-первых, не боимся взять любой из представленных автомобилей и сразу же клиенту мы покажем ценник на автомобиль, который он хочет сделать, хотя бы минимальный, а дальше он уже может сделать какие-то для себя выводы. Назовем это не просто «наши цены», а «на полную шумоизоляцию авто», чтобы было понятно, крайне понятно, чтобы человек не звонил и не спрашивал: «А что вы тут предлагаете, я не понимаю.». И подставим картинки. Я сейчас найду в Яндекс Картинках для каждого класса и подставлю их сюда. Вообще это работа для дизайнеров, но займусь я этим сейчас. Помещаем опять это все в одну папку, чтобы потом это все не терялось и не раскидалось. Знаете, что хороший дизайнер именно так и делает. Я не дизайнер, но, так как я делаю это для себя любимого, либо для клиента любимого, неважно, в любом случае лучше соблюдать порядок, чтобы потом, если нужно что-то переделать, можно было сделать это очень быстро. Бренды и картинки, конечно, в нашем случае имеют приоритет. Опять же, этим будет заниматься уже сам дизайнер, мы просто покажем, что должно быть, а он должен будет сделать. Внедорожники, минивэны и кроссоверы у нас идут чуть ниже. Равняем все.

Скетч для landing page - Наши цены
Скетч для landing page — Наши цены

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

Скетч для landing page - Кнопки под каждым классом авто
Скетч для landing page — Кнопки под каждым классом авто

Давайте, посмотрим, увидим, что есть тоже вот «стоимость настройки Яндекс Директа» у меня, на моем сайте m-context и здесь есть под каждой отдельный вариант, например, «начальный», «оптимальный» и «продвинутый» и есть кнопка «показать», чтобы человек, если он точно определился, что ему нужно, он нажимал и мог заказать.

Скетч для landing page - Делайте кнопки под каждым из вариантов
Скетч для landing page — Делайте кнопки под каждым из вариантов

Тоже самое и здесь. Причем, здесь есть тоже метод «золотого унитаза».

Скетч для landing page - Используйте метод золотого унитаза
Скетч для landing page — Используйте метод золотого унитаза

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

Скетч для landing page - Используйте таблицы цен для сравнения своих продуктов. услуг
Скетч для landing page — Используйте таблицы цен для сравнения своих продуктов. услуг

Дополнительно входит в шумоизоляцию, добавляем какие-то преимущества бесплатные, в нашем случае это полный фотоотчет проделанной работы, такси от нас и до дома бесплатно, антискрип четырех дверных обшивок тоже бесплатно и мойка автомобиля – бесплатно. Также еще необходимо было добавить, подумал и решил, что необходимо добавить цены к отдельному, если, вдруг, человек захочет шумоизоляцию сделать отдельную, потолок, двери, багажник, днища и колеса. То есть, будут отдельные ценники на них. Также, наверное, дополнительно нужно сделать кнопки, но это я по пути уже добавлю, сейчас нужно просто накидать основное. В итоге сейчас что необходимо сделать? Необходимо понять, что лендинг для нас сейчас – это как книга, т.е. мы начинаем ее читать сверху вниз и нам необходимо, чтобы все логично сочеталось. То есть, сначала компания какая-то, допустим, название компании в цифрах, далее «наша компания выполнит частичную и полную шумоизоляцию для вашего авто», отдельно «наши цены на полную шумоизоляцию авто», здесь я решил ничего не бить, а в отличие от конкурентов, которые делают бессмысленные таблицы, в которых ничего непонятно. И дополнительную ценность мы добавляем в подарках, четыре подарка. Решил сразу добавить кнопки, заказать отдельные, например, потолок у нас идет и так далее.

Скетч для landing page - Добавляем кнопки
Скетч для landing page — Добавляем кнопки

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

Скетч для landing page - Увеличиваем ценность услуги
Скетч для landing page — Увеличиваем ценность услуги

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

Скетч для landing page - Таблица сравнения
Скетч для landing page — Таблица сравнения

Пока решил отложить сравнение нашей шумоизоляции с шумоизоляцией в других компаниях и добавить блок немного другой. Я решил все-таки разбить ценовой диапазон в три типа, как у меня сделано на сайте. Почему? Потому, что есть еще уровень шумов все-таки, шумоизоляцию делают ради уровня шумов и как итог должен быть, либо уход шумов в 30-35%, 35-50%, либо 50-75%. И это разные ценовые категории. Поэтому, наверное, сначала сделаю таблицу, сейчас я ее начну рисовать. Называю ее «таблица цен». Это не таблица сравнения, это таблица цен.

Скетч для landing page - Людям интересны результат и цена
Скетч для landing page — Людям интересны результат и цена

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

Скетч для landing page - Таблица шумов
Скетч для landing page — Таблица шумов

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

Как вы видите, лендинг начинает рисоваться сам по себе, т.е. здесь видно, по умозаключению, что сначала у нас идет первая картинка, что мы делаем, что у нас профессиональная шумоизоляция авто. Цены мы сейчас, конечно же, не регулируем, это сделаем чуть позже. Что есть компания, она крупная, в цифрах это видно. Какую шумоизоляцию мы делаем, видно, что мы делаем четыре вариации, это потолок, двери, днище, багажник. Здесь, кстати, есть капот, надо его тоже пометить, я его помечу. Далее идут наши цены, напомню, шумоизоляция авто с понижением шума до 50%, т.е., если у нас вот здесь ниже будет премиум вариант, средний. И здесь расписаны все наши классы, т.е. идет таргетинг уже конкретно по классам, чтобы человек примерно прикидывал, сколько будет стоить ему нормальная шумоизоляция до 50%, плюс дополнительно что в шумоизоляцию входит, т.е. идут подарки. И далее мы расписываем, что, в принципе, мы можем сделать и круче, и сделать хуже, в зависимости от того, что вам нужно, что по результату вам нужно. И сейчас мы пометим, сделаем небольшой блок «наши материалы». «Наши материалы» мы сделаем другого цвета блок, как мы уже стали привыкать, в котором мы расскажем, что мы делаем немного из других материалов, нежели наши конкуренты. Это, как раз, покажет, мы выделимся от наших конкурентов не в прямой форме, а в завуалированной.

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

Скетч для landing page - Просматриваем лендиг, выявляем то, что необходимо исправить, или добавить
Скетч для landing page — Просматриваем лендиг, выявляем то, что необходимо исправить, или добавить

Например, материал изофлекс и материал StP, с которыми работают мои заказчики.

Скетч для landing page - Таблица материалов
Скетч для landing page — Таблица материалов

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

Скетч для landing page - Выделяем детали машины
Скетч для landing page — Выделяем детали машины

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

Скетч для landing page - Первый экран
Скетч для landing page — Первый экран

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

Скетч для landing page - О компании, какая делается шумоизоляция
Скетч для landing page — О компании, какая делается шумоизоляция

Далее наши цены. Шумоизоляция с понижением шума до 50%, т.е. то, что его больше всего интересует, идет сразу. Скажем так, не в бровь, а в глаз.  Дополнительно идет шумоизоляция, т.е. идут дополнительные бесплатные преимущества, исходя из ваших пожеланий, мы можем сделать лучше, хуже, или так, как мы до этого писали.

Скетч для landing page - Наши цены. Дополнительно входит в шумоизоляцию
Скетч для landing page — Наши цены. Дополнительно входит в шумоизоляцию

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

Скетч для landing page - Наши материалы
Скетч для landing page — Наши материалы

И что теперь? Теперь нужно добавить два блока, основных. Первое. Это блок с гарантиями. И второй блок – это блок с кейсами. Их можно разделить, но я буду делать их сообща. Гарантии у нас выходят из кейсов, т.е., если мы сделали хорошие, качественные кейсы, то и там можно расписать гарантии. Сначала я распишу гарантии, просто покажу несколько наших преимуществ, например, то, что мы снижаем шум, а второе, что у нас не будет, а точнее 100% отсутствие следов разборки салона. Естественно, у нас есть фотоотчет. Сохранение дилерской гарантии на автомобиль, это тоже очень важный момент. Соблюдение сроков и возврат, если, вдруг, что. Но это опционально, опять же, нужно будет обговаривать это с заказчиком. И дальше сразу же пойдут кейсы. Мы сначала показываем, какие мы хорошие, что мы гарантируем, а потом показываем, как мы это делаем. Делая шумоизоляцию, мы гарантируем 100% отсутствие следов разборки салона, 100% отсутствие скрипов в салоне, что тоже очень важно, соблюдение сроков выполнения работ, как вы понимаете, самое важное и сохранение дилерской гарантии на автомобиль. Я думаю, это очень хорошие, приличные гарантие, которые я, к сожалению, не нашел у конкурентов.

Скетч для landing page - Блок гарантии
Скетч для landing page — Блок гарантии

И теперь мы переходим к блоку «наши работы», или кейсы. Здесь нужно, наверное, остановиться поподробнее. Если открыть мой сайт m-context.ru и спуститься в блок «результаты», здесь можно увидеть много видео, много текста. Все это нужно и все это люди смотрят и читают. Конечно, не во всех нишах люди читают, анализируют, что происходит с ваими до, после, скажем так, но для каждой ниши делать этот блок обязательно. Люди в любом случае смотрят на социальное доверие и чем оно выше, тем вероятность того, что человек оставит заявку, естественно, выше.

Скетч для landing page - Пример блока наши результаты
Скетч для landing page — Пример блока наши результаты

Здесь все просто, мы начнем делать блок «наши работы», кейсы и будем делать одинаковые блоки, которые можно будет потом добавлять дополнительно, пока не наберется, например, 10-15 работ совершенно различных автомобилей. Конечно же нужно показать свою целевую аудиторию здесь, чтобы люди себя увидели на этом сайте, на этом лендинге и увидели в результатах работ свой автомобиль. Те автомобили, которые чаще всего приезжают в автосалон, чтобы делать шумоизоляцию и помещаем здесь. Узнаю автомобиль, первый автомобиль это будет Тойота Камри. Какие параметры человеку интересны? Ему интересно, что было сделано, я думаю, это неудивительно. Второй момент. Вы пытаетесь это проанализировать сами, что конкретно человеку может быть интересно. Понимаете, если вы поместите просто фотографии, человеку, в принципе, не особо интересно. Если вы поместите фотографии плюс что было сделано, плюс каждая фотография отдельно подписана, плюс будет цена работы, отдельно будут сроки, я думаю, именно это и привлечет новых клиентов в ваш бизнес через лендинг пейдж.

Скетч для landing page - Кейсы
Скетч для landing page — Кейсы

Давайте, попробуем это сделать более грамотно. В итоге получили вот такой блок. Тойота Камри, цена работы, срок выполнения, что было сделано, расписали конкретно, что было сделано и результат – уменьшение шума на 65%. Я думаю, что достаточно будет 4 фотографий на эту машину вполне, вот в таком виде. Может быть, нужно подписать, скорее всего, даже понадобится подписать каждую фотографию, поэтому на всякий случай мы подвинем таким вот образом блоки и напишем «подпись 1» и т. д. Главное здесь аккуратность, чтобы было все аккуратно оформлено, не как обычно авось прокатит, а аккуратно оформлено, тогда это действительно приносит результат. Делаем акцент на результат и делаем результат цветом белым. Вот в таком виде, я думаю.

Скетч для landing page - Наши работы
Скетч для landing page — Наши работы

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

Скетч для landing page - Разделяем кейсы горизонтальной линией
Скетч для landing page — Разделяем кейсы горизонтальной линией

Также еще заметить, на m-context есть очень прикольная кнопка «хочу такой же результат». Работает она очень просто – всплывающее меню и написано «заказать такой же результат». Давайте, поместим ее также на нашу работу. Для этого мы просто возьмем кнопку «заказать расчет – это бесплатно». Подвинем кнопку, случайно ее скинул. Можно даже рядом с результатом поместить, чтобы визуализация была максимальная, написать «хочу такой же результат». Я думаю, вполне будет хорошо работать кнопка. Но ее нужно, естественно, тестировать.

Скетч для landing page - Кнопка хочу такой же результат
Скетч для landing page — Кнопка хочу такой же результат

И также еще добавлю один из вариантов наших работ, давайте, подвину еще этот кейс, подвину его немного ниже. Почему? Потому что потом я буду дорабатывать, доделывать кое-какие элементы различные, также буду увеличивать заголовки, т.е. делать их не 24 шрифтом, а больше. Сейчас это довольно модно, во-первых, а потом это действительно разделять будет наш лендинг на составляющие и человек будет читать именно то, что нам нужно. А нам нужно, чтобы он читал ту информацию, которая ему нужна. Для этого нужно выделить заголовки. Можно их сделать, например, 30 шрифтом. На самом деле получается довольно емкий лендинг, т.е. он довольно короткий, при этом он очень-очень информативный и все понятно.

Скетч для landing page - Увеличиваем размер шрифта заголовков
Скетч для landing page — Увеличиваем размер шрифта заголовков

Осталось несколько элементов. Как мы помним, у нас еще есть Дмитровской шоссе, г.Железнодорожный. Естественно, мы должны поместить после наших работ также карту. Поэтому сейчас я доделую кейсы и мы займемся картой. Блок « где мы находимся» нужен тогда, когда мы хотим, чтобы клиент, во-первых, знал, где мы находимся, во-вторых, его через этот блок можно пригласить к нам в офис. Давайте, посмотрим несколько вариаций. Первое это, например, «наш офис продаж» и «мы ждем вас в нашем офисе продаж» и показываем на карте, где находится наш офис продаж, хотя бы один из офисов продаж.

Скетч для landing page - Пример карты офиса продаж
Скетч для landing page — Пример карты офиса продаж

И второй вариант. География доставки оборудования, география доставки чего-либо, например, можно пометить в api Яндекс Карт синим «мы выезжаем к вам бесплатно», красный – «куда мы можем доставить торговое оборудование» и показать то, что необходимо.

Скетч для landing page - Пример карты географии доставки оборудования
Скетч для landing page — Пример карты географии доставки оборудования

Для этого можно сначала зайти под своим паролем в Яндекс, потом вбить «api Яндекс Карт» и здесь конструктор карт. Далее здесь вы сможете сделать ту карту, которая вам нужна. Торговое оборудование, грузоперевозки и тому подобное. Можно все, что угодно. Во-первых сохранить карту и вообще очень удобно работать с ними и рисовать, что вам нужно. На первом этапе этого вам вполне хватит. Также этот код вы отдадите просто своему программисту и он установит его на сайт.

Скетч для landing page - Код карты
Скетч для landing page — Код карты

В нашем случае у нас два офиса. Сначала я помечу первый офис, найти место на карте. Помечаем его, без номера, без всего, пока просто устанавливаю точку. И ставлю еще одну точку дополнительно. Вторая точка у меня будет город Железнодорожный. В итоге ставим две точки на карте. Люди примерно понимают, что, где и как. Копируем код и его я помещу просто на лендинг в виде текста. Чтобы потом его не забыть, сделаю его мелким. Сейчас я могу просто скопировать карту и поместить ее, как должно выглядеть для дизайнера.

Скетч для landing page - Карта для шумоизоляции
Скетч для landing page — Карта для шумоизоляции

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

Скетч для landing page - Где мы находимся
Скетч для landing page — Где мы находимся

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

Скетч для landing page - Пример выделения на блоке географии
Скетч для landing page — Пример выделения на блоке географии

А сейчас мы просто пометим, что, например, красным и синим мы сделаем в api Яндекса, здесь можно сделать разного цвета. Красным и голубым помечу два адреса на карте.

Скетч для landing page - Помечаем красным и голубым два адреса на карте
Скетч для landing page — Помечаем красным и голубым два адреса на карте

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

Скетч для landing page - Блок Где мы находимся
Скетч для landing page — Блок Где мы находимся

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

Скетч для landing page - Блок Остались вопросы
Скетч для landing page — Блок Остались вопросы

Далее необходимо сделать очень важный момент. Называется кнопка «момент». Я помещу ее прямо в блок «остались вопросы». Она должна быть такого голубоватого цвета, чтобы было понятно дизайнеру, что это кнопка, ссылка и подчеркнута. Что эта кнопка из себя представляет? Это пришло к нам из зарубежного интернет-маркетинга. Я думаю, что вы знаете, что ВКонтакте есть кнопка «наверх», у меня на сайте есть кнопка «наверх». Везде есть кнопка «наверх». Почему она должна быть и внизу самом страницы? Давайте, посмотрим, как оформлен блок «остались вопросы», кстати, на m-context.

Скетч для landing page - Пример блока Остались вопросы
Скетч для landing page — Пример блока Остались вопросы

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

Скетч для landing page - Кнопка Наверх
Скетч для landing page — Кнопка Наверх

И теперь остался один момент. Это футер. Футер на m-context сделан чуть посложнее, чем сделаем мы. Мы будем его делать в более простой форме. Назовем его «футер». И для начала мы скопируем из первого экрана несколько элементов. Первое. Это логотип и второе – это контакты. Это то, что нам нужно еще раз повторить человеку, чтобы он понял, что мы крупная компания.

Скетч для landing page - Футер
Скетч для landing page — Футер

Поместили это на сайт и также на сайт нужно поместить очень важный момент. Нужно поместить реквизиты. Что мы за компания, чтобы человек ни в коем случае даже не мог подумать, что вы какая-то контора и у вас нет ИП, ООО и тому подобное. Потому что, если у вас нет ИП, то люди обычно с вами никак не будут разговаривать, или ООО. ОГРНИП наберем и адрес. Адрес может быть физический, юридический, это абсолютно неважно. Я думаю, крупные компании, вы знаете, что нужно брать из реквизитов. Также возможно нужно ИНН поместить, но это уже опционально, опять же.

Скетч для landing page - Реквизиты
Скетч для landing page — Реквизиты

Теперь, давайте, пройдемся, посмотрим еще раз наш лендинг. По-хорошему, первая вариация лендинга, это она и есть. Человек попадает на сайт, видит, что мы делаем, где мы располагаемся, наши предложенпия. Цена, «заказать прямо сейчас». Компания, какую шумоизоляцию мы делаем, ценовое предложение. Наши цены, таргетированно уже идем по автомобилям. Дополнительно увеличиваем цены с бесплатными няшками. Далее мы можем предложить вам подешевле, подороже. Дополнительная ценность, опять же, поднимаем ценность. Какими материалами мы делаем автомобиль, почему мы делаем именно этими материалами автомобили. Не просто так, мы делаем и все, а именно объясняем, почему. Мы рассказываем ему логичную историю. Далее. Делая шумоизоляцию, мы гарантируем, даем какие-то гарантии, помечаем гарантии. Наши работы, блок с работами, с видео также, здесь будет видео. Где мы находимся. И остались вопросы. Вот первый набросок нашего лендинга. Что теперь нужно сделать, когда вы закончите свой скетч? Нужно сохранить его и пойти погулять как минимум 2-3 часа, лучше часов 12 и через 12 часов посмотреть свежим взглядом на этот лендинг и доработать то, что вы посчитаете нужным, либо не дорабатывать ничего. Возможно, где-то текст добавить, проговорить его вслух для себя и посмотреть, насколько он для вас адекватен.

Автор статьи:

Дата публикации: 02.09.2015

Нравится информация? Ставь лайк!
Пройди тренинг МОНСТРЫ МАРКЕТИНГА
Лучший тренинг по контекстной рекламе в РУНЕТЕ!
Успей по низкой цене!