Создание дизайна лендинга в photoshop: Разработка дизайна посадочной страницы (Landing Page) в Photoshop для стартапа в сфере путешествий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

реально существуют

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

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

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

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

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

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

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

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

Дополню. Размещайте

НАСТОЯЩИЕ

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

Покупают у тех, кому доверяют, у тех, кто лжет никогда не купят

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 Текст Landing Page

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

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

Текст.

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

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

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

3.2 Дизайн

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

здесь

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо за внимание. Пока.

Лучшие фрилансеры в России › Дизайн и арт › Дизайн сайтов › дизайн лендинга 751

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

Услуги дизайнеров лендингов

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

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

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

Как выбрать дизайнера для разработки лендинга

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

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

выбираем оптимальный первый экран для Landing page

Экраны лендинга

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

Главный экран лендинга

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

Вторая часть лендинга

Таким образом, схема построения лендинга выглядит так:

Экраны лендинга

Некоторые трудности может вызвать адаптация макета сайта для разных разрешений экранов. Запомните, что ориентироваться вам нужно не на разрешение, а на размер окна браузера. Так, например, вы знаете, что средний размер экрана монитора — 1024×768 пикселей. В таком случае высота макета НЕ должна составлять 768 пикселей в высоту. Она должна соответствовать высоте окна браузера. То же касается мобильных версий макетов.

Какого размера делать лендинг

При разработке landing page нужно делать несколько макетов: для широких экранов, для планшетов и для телефонов. Расположение информационных блоков на макетах будет отличаться в зависимости от экрана.

Основную сложность представляет разработка дизайна первого экрана лендинга. Практика показывает, что для десктопа разработчики чаще всего выбирают ширину в 1000px и высоту в 680px. Причина этого в том, что настроить дизайн сразу под 4 устройства (монитор ПК, ноутбук, планшет и смартфон) довольно сложно. Дополнительная проблема — окно браузера, размер которого пользователи могут менять как угодно.

Зависимость размеров от изменения размера окна браузера

Оптимальная высота лендинга для десктопных браузеров — в районе 600-800px, а для мобильных устройств — 400-500px. Далее расскажем, почему лучшими считаются именно эти варианты.

Сначала рассчитывается усредненная высота всех устройств. Для упрощения задачи нужно сократить количество возможных вариантов. Самый часто встречающийся размер больших экранов (монитора ПК, ноутбука или планшета) — 1000–1200px, маленьких экранов — 320–360px (имейте в виду, что экраны смартфонов Apple имеют высоту 375px).

Получив приблизительные данные, рассчитываем идеальный размер. Большим экранам оптимально будет присвоить 600–800px, а маленьким — 400–500px.

Еще один популярный вариант — использовать в CSS единицы измерения vw (ширина вьюпорта) и vh (высота вьюпорта). Если вы зададите высоту блоку width 100vh, то на любом экране он будет равняться 100 % высоты вьюпорта. В этом случае вам не придется задавать размеры под каждый экран индивидуально, а результат будет хорошо отображаться на большинстве устройств.

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

Если с высотой разобраться сложнее ввиду неодинаковых размеров окошек различных браузеров, то с шириной все гораздо проще. Мы выяснили, что разрешение экрана, например, ноутбука — 1024×768 пикселей. Оптимальной высотой мы обозначили 600px, остальная часть уйдет под меню браузера и строку меню операционной системы. Для ширины достаточно 1000px. Остальное займет полоса прокрутки и вертикальные границы браузера. По этому же принципу рекомендуем выбрать оптимальный размер лендинга для остальных устройств.

Примеры идеального первого экрана

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

Однако начнем с лендинга, оформленного неправильно.

Плохой пример оформления лендинга

На этом сайте главного экрана нет как такового. Мы видим фотографию и длинный сплошной текст до конца страницы. Мобильная версия выглядит не лучше:

Отображение лендинга в мобильной версии

Здесь нет ничего, кроме текста. Найти контакты сложно, форма заявки отсутствует, нет УТП и корректных заголовков.

Теперь обратите внимание на следующий пример:

Пример удачного оформления первого экрана лендинга

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

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

Пример лендинга по доставке еды

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

Оформление второго экрана лендинга по доставке еды

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

Дизайн целевой страницы в Фотошоп / Creativo.one

Финальный результат:

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

Мы начнем с разметки, очень быстро разработав макет при помощи Adobe Photoshop. Мы будем использовать некоторые базовые и средние по сложности техники, чтобы создать этот дизайн, а затем иметь возможность переделать его. Давайте начнем!

Материалы для урока

Чтобы следовать шагам урока вам потребуются некоторые (бесплатные) материалы:

Готовим документ

Шаг 1

Мы начнем с создания нового документа Photoshop. Для этого перейдите в меню Файл > Создать (File > New). Используйте настройки, указанные ниже. Вы можете создать документ любых предпочитаемых размеров, в интернете нет фиксированной ширины.

Шаг 2

Давайте добавим несколько направляющих, чтобы дать нашему шаблону достаточно места и сделать его сбалансированным. Я не всегда использую преднастроенную сетку, но установка направляющих линий обеспечит аккуратность и поможет определить ширину нашего сайта. Перейдите в меню Просмотр > Новая направляющая (View > New Guide) и установите несколько направляющих. Я обычно выбираю 1000px для ширины сайта и добавляю несколько линий по краям, чтобы оставить свободное место.

Заметка: Направляющие, используемые в этом уроке: вертикальные на 200px, 500px, 700px, 900px и 1200px.

Совет: Вы также можете использовать Photoshop плагин GuideGuide , чтобы ускорить процесс.

Шаг 3

Согласно с Этикетом Photoshop, мы аккуратно все организуем, чтобы было легко управлять документом и редактировать его. Давайте создадим три группы слоев и назовем их Заголовок, Контент, Подвал. Чтобы создать группу, перейдите в меню Слои > Новый > Группа (Layer > New > Group) и назовите каждый, как было указано выше. Для быстрого создания групп, кликните по иконке папки в панели слоев.

Работаем над зоной заголовка

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

Шаг 1

Для начала давайте создадим фон блога. В группе «Заголовок» нарисуйте прямоугольник черного #000000 цвета, используя инструмент Прямоугольник (Rectangle Tool). В моем случае я нарисовал фигуру размером 1400x728px и поместил ее в верхней части документа.

Теперь загрузите фотографию Chillin’ in the sun, перетяните ее в документ Photoshop и разместите над слоем с прямоугольником. Переименуйте слой с изображением во что-нибудь понятное, например я использовал IMG. Нажмите и удерживайте кнопку Alt и переведите указатель мыши на слой с фото, пока не увидите маленькую стрелку, указывающую вниз, после чего кликните левой кнопкой мыши и отпустите ее. Вы только что создали обтравочную маску (Clipping Mask). Для завершения, уменьшите Непрозрачность (Opacity) слоя IMG до 70%, чтобы текст, который мы поместим наверх, был читаемым.

Теперь нажмите Ctrl + T, чтобы изменить размер фото под ваши нужды.

Совет: Удерживайте кнопку Shift и вы сможете трансформировать фото пропорционально.

Шаг 2

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

Создайте новую группу с названием «Навигация», поместите ее под группой «Заголовок». После этого, выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте белый прямоугольник между первой и последней вертикальной направляющей. Установите высоту на 60px, чтобы элементы навигации могли «дышать» и выглядели опрятно. Наконец, передвиньте блок навигации на 30px вниз, чтобы получить эффект невесомости, который отлично смотрится с нашим изображением.

Шаг 3

Теперь давайте нарисуем логотип и добавим несколько ссылок, чтобы придать нашей панели пригодный для использования вид. Для логотипа я просто написал «Grttd», используя шрифт Playfair Display (Bold Italic) размером 26px и темно-серым цветом #0e0e0e.

Для ссылок навигации я использовал шрифт Source Sans Pro 14px с увеличенным расстоянием между буквами. Для главного призыва к действию «Sign up» я использовал Жирный (Black) зеленый #96c218 цвет. Мы закончили с группой «Навигация», поэтому сверните ее, кликнув на маленькую иконку треугольника рядом с именем группы.

Шаг 4

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

Так как у нас довольно темный фон, для верхней части более логично использовать бледный текст, чтобы создать высокий контраст и обеспечить читабельность. Я использовал белый #FFFFFF текст, набранный шрифтом Source Sans Pro (Black) 80px с высотой строки 86px. Поместите его примерно на 120px ниже от панели навигации, чтобы у текста было достаточно места, и он воспринимался как важный.

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

Для более вдохновляющих комбинаций оцените: Google Web Fonts Typographic Project  и статью A Beginner’s Guide to Pairing Fonts.

Для этого урока я использовал белый #FFFFFF шрифт Playfair Display (Italic) размером 26px и переместил его на 40px ниже от основного заголовка.

Шаг 5

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

Создайте новую группу, назовите ее «Пример», затем выберите инструмент Эллипс (Ellipse Tool) и, удерживая нажатой клавишу Shift, нарисуйте круг. В моем случае его размер 60x60px. После этого поместите чье-либо лицо над кружком и, удерживая клавишу Alt, наведите указатель мыши на слой с кругом, пока не увидите маленькую стрелку, указывающую вниз, после чего кликните левой кнопкой мыши и отпустите ее, чтобы создать Обтравочную маску. Теперь вы можете изменить размер изображения, нажав Ctrl + T.

Для этого урока я использовал случайное лицо с User Inter Faces.

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

Теперь нам нужно поместить индикатор беспрерывных заметок. Давайте создадим другой круг, на этот раз меньший и разместим в нем число. Просто, но понятно и отлично справляется со своей работой. Для цвета круга я заново использовал прежний зеленый #96c218 цвет. В моем случае, размер круга 30x30px, текст внутри него белый #FFFFFF Source Sans Pro (Bold) 14px.

Теперь давайте назовем нашего пользователя и объясним, что означает цифра. Выберите инструмент Горизонтальный текст (Horizontal Type Tool), введите имя и длину беспрерывного пользования сервисом. В моем случае я использовал шрифт PT Serif (Bold Italic) 16px для имени и Source Sans Pro (Regular) 13px для объяснения. Убедитесь, что высота строки достаточная, чтобы элементы могли «дышать».

Отлично, последнее, что мы сделаем перед переходом в группу «Контент». Нам нужен элемент Призыва к Действию (Call To Action — CTA), чтобы пользователь мог сделать что-нибудь после того, как увидел изображения и прочитал заголовки. Создайте новую группу «CTA», установите основной цвет на белый #FFFFFF и выберите инструмент Прямоугольник (Rectangle Tool). После этого нарисуйте прямоугольник, в моем случае его размер 280x60px. Обратите внимание на согласованность высоты кнопки и навигационной панели.

После этого, напишите убедительное описание для кнопки. Я использовал «START LIVING →», цвет — тот же темно-серый #0e0e0e, шрифт Source Sans Pro (Semibold) 16px с трекингом (Tracking) 140.

Шаг 6

Теперь мы закончили с группой «Заголовок». Давайте откроем группу «Контент» и создадим еще одну — «Описание». Мы поместим заметный заголовок с более детализированным описанием всего сайта. Важно повторить CTA-элемент, поэтому пользователю не нужно будет много раздумывать, и он сможет произвести действие, когда будет готов.

Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и поищите «сильный» шрифт для вашего заголовка. В моем случае, я использовал красивый и элегантный, но авторитетно выглядящий Playfair Display (Black) 60px. Убедитесь, что у этого заголовка достаточно свободного места, я сместил его на 100px вниз от изображения в заголовке.

Выберите инструмент Горизонтальный текст ( Horizontal Type Tool), затем создайте прямоугольник, кликнув и перетянув указатель мыши. В моем случае это блок размером 600x140px, в котором я поместил убедительный текст, чтобы заставить пользователя кликнуть на кнопку. Для чистой визуальной иерархии, текст описания должен быть меньшим и не таким тяжелым. В нашем примере использовался серый #666666 шрифт PT Serif (Regular) 18px, высота линии 28px. Весь элемент нужно сместить на 50px вниз от заголовка, чтобы получился чистый и профессиональный макет.

После прочтения текста пользователь может захотеть попробовать сервис, поэтому будет разумно повторить кнопку CTA-элемента. Откройте группу «Заголовок», найдите группу «CTA» и дублируйте ее, нажав Ctrl+J. После этого, переместите ее в «Описание» и измените цвет кнопки на прежде использованный зеленый #96c218, для текста мы используем белый #FFFFFF цвет. Сместите кнопку на 50px вниз для последовательного расстояния между элементами.

Пока выглядит хорошо. Давайте поместим простую линию, визуально разделяющую блок описания от текста. Выберите инструмент Линия (Line Tool), установите Толщину (Weight) на 1px и нарисуйте горизонтальную линию от первой до последней вертикальной направляющей. В уроке я использовал светло-серый цвет #e6e6e6, который не слишком заметен, но при этом отлично выполняет свою работу.

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

Шаг 7

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

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

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

После этого создайте текстовый блок с размером примерно 300x160px, используя инструмент Горизонтальный текст (Horizontal Type Tool) и напишите пример сообщения в дневнике благодарности. Я использовал шрифт PT Serif (Italic) 16px темно-серого цвета #666666, использованного ранее.

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

Шаг 8

Теперь, когда мы закончили с группой «Вдохновление», давайте перейдем к последней секции нашего лендинга. Финальный CTA-элемент (с некоторыми дополнительными деталями) поощрит пользователей зарегистрироваться, введя email адрес.

Создайте группу с названием «Email», перейдите к предыдущей папке, чтобы найти слой с заголовком, после чего дублируйте его, нажав Ctrl + J, и переместите в новосозданную группу. Измените заголовок на что-нибудь побуждающее к действию и переместите его примерно на 100px вниз от линии, сохраняя при этом согласованность.

Отлично! Теперь установите основной цвет на светло-серый #f5f5f5, выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте блок для поля email. Он должен быть такой же высоты, как и главная CTA кнопка, а ширина не так важна. В моем случае его размер 430x60px. Затем выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите «Введите ваш email» или что-нибудь в этом роде. Убедитесь, что используете достаточно темный текст, который будет легко читаем.

Теперь переходите к группе «Описание» на панели слоев и найдите группу «CTA». Дублируйте ее, нажав Ctrl + J, затем переместите в группу «Email». Поставьте кнопку справа от поля email и отцентрируйте весь элемент.

Шаг 9

Мы почти закончили! Давайте свернем все группы и откроем папку «Подвал». Установите основной цвет на темно-серый #2d2d2d и, используя инструмент Прямоугольник (Rectangle Tool), нарисуйте прямоугольную фигуру полной ширины с высотой около 230px. Это будет фон для подвала, который поможет контрастно выделить зону контента.

Перейдите в папку «Навигация» и слой с логотипом, дублируйте их, нажав Ctrl + J, затем перейдите в группу «Подвал». Измените цвет на белый #FFFFFF, после чего переместите навигацию примерно на 50px ниже от края прямоугольника.

Наконец-то, возьмите инструмент Горизонтальный текст (Horizontal Type Tool) и поместите несколько ссылок, которые могут пригодиться пользователям. Убедитесь, что сгруппировали ссылки для легкости в навигации. Для урока я взял шрифт Source Sans Pro (Semibold) 16px для заголовков групп и PT Serif (Regular) 14px для самих ссылок.

Поздравляем!

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

Я буду рад услышать ваши отзывы и увидеть результаты этого урока!

Автор: Tomas Laurinavicius

Источник:

design.tutsplus.com

Создание идеального лендинг пейдж (на примере удачных сайтов)

Нет ничего более увлекательного в работе над сайтом, чем когда все специалисты объединяют собственные усилия, чтобы сделать новый идеальный лендинг пейдж или главную страницу веб-проекта. Дизайнеры, иллюстраторы, маркетологи, программисты и даже отдел стратегического менеджмента – все трудятся единой командой. В ходе разработки добавляются какие-то детали по SEO, оптимизируется стратегия привлечения клиентов, придумываются иконки и т.п.

Сегодня хотим поделиться советами по созданию landing page, которые наверняка пригодятся в решении данной задачи. Текущая статья является переводом этой заметки. Да, и вообще в сети встречается достаточно много полезных ресурсов по теме: в блоге мы уже писали о сервисах OnePageLove  и Land Book, где можно ознакомиться с лучшими примерами дизайнов в нише, также есть публикация про оптимизацию целевых страниц и многие другие.

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

Содержание:

• Как найти сайты, у которых есть чему поучиться.
• Анализ на примере трех вариантов.
• Используем изученную информацию.

Найдите компании со схожими задачами

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

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

То есть, вместо прямолинейного подхода:

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

Попробуйте что-то вроде:

«Позволяет чувствовать себя комфортно в новых местах».

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

Пример №2. Допустим, ваша компания пытается решить проблему отсутствия общего средства коммуникации между разработчиками, дизайнерами и бизнесом. Если рассматривать данную сферу, то лидирующими проектами с похожими стремлениями и целями будут:  Airtable, Intercom и Slack.

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

Новые тренды в дизайне landing page

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

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

Или, например, решение от Airtable: можно ли найти что-то более привлекательное, чем интерактивная база данных? — да, это дети, пользующиеся интерактивной БД.

Теперь взглянем на будущее:

Airtable  — февраль 2018

Intercom  — запус 5-го февраля 2018

 Slack  — август 2017

Обучение на примере удачных сайтов

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

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

1. Блок хедер

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

Основные наблюдения по хедеру:

• Он весьма привлекательный и объемный.
• Остается в самой верхней части экрана (кроме Intercom — там фиксированное меню при прокрутке).
• 5–6 ссылок.
• Есть элемент для призыва к действию (CTA). Лучший вариант у Intercom — кнопка CTA объединена с запросом на введение адреса электронной почты.

2. Заголовок и подзаголовок

Что сразу бросается в глаза:

• Короткий заголовок: 3–5 слов.
• Текст должен быть понятным, темного цвета и выделяться жирным шрифтом.
• Подзаголовок содержит следующую информацию: кто мы, что мы умеем делать, в чем наши преимущества.

3. Главная иллюстрация

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

Airtable 

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

Intercom 

• Стиль на любителя, но он хорошо демонстрирует ссылки на сообщения и открытые письма.

Slack 

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

4. Оптимизация CTA через запрос на регистрацию

Это хороший подход. Он показывает как просто создать аккаунт и ускоряет процесс взаимодействия с пользователем. Особенно интересная реализация у Intercom — в пространстве под вводом Email указаны дополнительные полезные опции. Если у вас имеется больше полей, обязательно почитайте советы как улучшить онлайн форму регистрации.

Некоторые особенности дизайна в нижней части страницы

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

Основные детали:

• Вся информация представлена достаточно кратко.
• Логотипы клиентов оформлены в спокойных серых тонах.
• Повторение похожих полей призыва к действию (т.е. запроса на регистрацию).
• Достаточно объемные футеры.

Суммируем все полученные полезные подсказки

В итоге получился следующий дизайн (разрабатывался для Reqfire.com):

Вот что удалось почерпнуть в качестве вдохновения при создании дизайна landing page из рассмотренных выше проектов:

• Хедер можно делать похожий, но с более свободным пространством.
• Для заголовка выбираем эффектный и солидный шрифт, например, Libre Baskerville.
• Главное изображение: ознакомившись вариантом из Slack, было бы неплохо постараться создать иллюстрацию, демонстрирующую функции вашего приложения/сервиса, но без использования скриншота.
• Бонус: вы также можете добавлять видео или простую анимацию.

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

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

размер лендинг страницы — учимся делать landing page в фотошопе

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

Как делать лендинг пейдж в фотошопе

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

[lpgen]

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

Размеры landing page в фотошопе

Можно посоветовать универсальный способ – создавать макет  таким образом, что бы размеры лендинга в пикселях были 960 пикселей в ширину, а высота – 1500-2500 пикселей. Дело в том, что размер в 1000 пикселей – это разрешение среднестатестического экрана пользователя. Но, опять же, мобильные устройства не попадают под эту планку и для этих девайсов подходят только адаптивные (мобильные) версии интернет – ресурсов.

Дизайн лендинга в фотошопе

Для того, что бы наглядно ознакомиться с тем, как создавать собственный landing page в графическом редакторе, следует ознакомиться с уроками дизайна лендинга в фотошопе в сети Интернет. Благо, что подобных видеогайдов в сети хватает с лихвой, стоит лишь ввести корректный запрос в поисковике.

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

статья из блога IT-школы Hillel

Пожалуй, в современном мире не встретить ни одного человека, который бы не слышал о такой программе как Adobe Photoshop, да и вообще о компании Adobe.

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

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

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

А вот еще несколько:

1. Новый способ самовыражения

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

Как? рисовать в фотошоп!

С помощью тысяч обучающих программ (tutorials), найденных в интернете, вы можете легко выразить свои творческие идеи посредством Photoshop и обработки фото. Кстати, из обычного хобби это может перерасти в хороший способ заработка и изучение основ UI/UX дизайна.

В Photoshop можно здорово покреативить

2. Возможность научиться редактировать фото

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

Превращайте любительское фото в профессиональное

3. Тренировать глаз

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

Работа с изображениями подразумевает множество визуальныx аспектов

4. Быть в тренде

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

Одной из самыx современныx тенденций в digital сфере является теxника коллажа

5. Photoshop – инструмент для бизнеса

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

Рекомендуем курс по теме

• Основы дизайна
  basic

Красивая и «​вкусная»​ картинка имеет большое значение для привлечения клиентов

6. Moodboard и визуализация

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

Мудборды помогают создавать качественный уникальный визуальный продукт

7. Photoshop – способ войти в сферу веба

Сайты, баннеры, реклама в Facebook, имейл-рассылки и личные подписи – все это создается в Photoshop.

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

Создание дизайна сайта в Photoshop — начало продвижения в сети.

Прежде чем сайт станет кодом, он сначала должен стать макетом

Так что же можно сделать с помощью программы Adobe Photoshop?

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

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

Создание целевой страницы для туристических сайтов

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

Документы

Для удобства отслеживания вам потребуются следующие документы (предоставляются бесплатно):

1. Фотографии, связанные с путешествиями
2. Fonts PT Serif, Aller, Open Sans от Fontsquirrel.com
3. Аватар

Подробнее:

1. 5 веб-сайтов для поиска и загрузки бесплатных шрифтов
2. 8 шрифтов для распознавания, используемых в приложениях или на веб-сайтах

Подготовить документы

Шаг 1

Начните с создания нового документа ( File> New. ), используя настройки, показанные ниже.

Шаг 2

Настройте несколько ссылок, чтобы макет выглядел сбалансированным и занимал достаточно места.Это обеспечит совершенство пикселей и ширину сайта. Разделите пространство на две вертикальные половины, чтобы создать центральную составляющую. Перейдите в View> New Guide. и разместите несколько ссылок. Многие люди часто выбирают ширину веб-страницы 1000 пикселей и добавляют пути из угла, чтобы освободить место.

Примечание: Пути, используемые в этом руководстве: по вертикали на 200 пикселей, 260 пикселей, 700 пикселей, 1140 пикселей и 1200 пикселей.

Совет: Вы также можете использовать плагин GuideGuide Photoshop, чтобы ускорить этот процесс.

Шаг 3

Далее мы создадим группы классов с заголовками «Заголовок», «Функции», «Социальные доказательства», «CTA» и «Нижний колонтитул». Сохранение этого стиля Photoshop поможет вам все организовать и легко перемещать или редактировать. Чтобы создать группу, перейдите в Layer> New> Group. и назовите каждый заголовок, как указано. Чтобы быстро создать группу, просто щелкните значок.

Заголовок область дизайн (заголовок)

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

Шаг 1

Сначала мы изменим цвет фона на цвет, привлекающий взгляд, в этом примере используется светло-серый #ebebeb . Затем откройте группу «Заголовок» и с помощью инструмента «Прямоугольник » (U) нарисуйте прямоугольник размером 1000×600 пикселей и поместите его между вертикальными направляющими. Затем загрузите изображение, перетащите его в документ Photoshop и поместите на слой прямоугольника.Затем, удерживая нажатой клавишу Alt , наведите указатель мыши на слой изображения, пока не увидите маленькую стрелку, указывающую вниз, затем отпустите. Это создаст обтравочную маску. Теперь нажмите CMD + T и измените размер изображения по своему усмотрению.

1. 10 распространенных проблем в Photoshop и основные способы их устранения

Совет: удерживайте Shift для пропорционального изменения.

Шаг 2

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

Шаг 3

Теперь поместите простой логотип и панель навигации вверху. Выберите инструмент Horizontal Type Tool (T) и напишите заголовок слева. Убедитесь, что заголовок легко читается и вокруг него достаточно места.Логотип будет в верхнем левом углу, потому что это популярное веб-соглашение и то, чего ожидают многие посетители. Здесь используйте шрифт Aller для заголовка и Open Sans для элементов навигации.

Шаг 4

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

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

Шаг 5

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

Шаг 6

Создайте простую форму электронной почты, позволяющую посетителям вводить свой адрес электронной почты и подписываться на список. Создайте новую группу с именем Электронная почта . Используйте инструмент Rounded Rectangle Tool (U) с радиусом 3px , чтобы создать простой белый ( #FFFFFF ) вход.

Шаг 7

Добавьте текст подсказки, чтобы все понимали, куда писать свой адрес электронной почты, и создайте кнопку с призывом к действию. Используйте Open Sans серого цвета 13px (слегка полужирный) ( #bdbdbd ) для ввода и белый Open Sans text (полужирный) 13px ( #FFFFFF ) для текста кнопки. Выберите привлекательный цвет для основного призыва к действию, чтобы он выделялся и побуждал к действию.

В этом примере мы будем использовать зеленый цвет ( # 51a200 ) для основного призыва к действию. Выберите инструмент Rectangle Tool (U) и нарисуйте прямоугольник, расположенный над белым входом. Затем, удерживая нажатой клавишу Alt , наведите указатель мыши на синий прямоугольник, пока не увидите значок стрелки вниз, отпустите клавишу, чтобы создать обтравочную маску.

Конструкция Площадь Характеристики (характеристики)

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

Шаг 1

Сверните группу заголовков, щелкнув маленькую стрелку рядом с именем группы. Теперь нам нужно создать немного другой фон для области тела сайта. Здесь используйте инструмент Rectangle Rounded (U) с радиусом 5px и белым #FFFFFF . Установите вновь созданную форму чуть выше основного фонового слоя.

Шаг 2

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

Создавая привлекательную информацию для веб-сайта, вы должны убедиться, что она четкая и не слишком длинная. Используйте шрифты разного веса, размера и цвета для создания иерархии изображений. Наконец, но очень важно использовать много места. В данном случае мы используем вариант шрифта Open sans , # 545454 темно-серый и светло-серый # a2a2a2 .

Дизайн из Social Proo area f (Отзыв)

Шаг 1

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

Во-первых, необходимо тонко отделить предыдущую область. Здесь используйте инструмент Line Tool (U) , установленный на 1px со светло-серым # e8e8e8 .

Шаг 2

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

В разделе «Социальное доказательство» следует использовать комментарии или цитаты клиентов. Для котировок используется шрифт PT Serif , а для остальных — Open Sans с различными вариациями размера и веса.

Шаг 3

Вы должны оставить немного места перед именем, чтобы создать аватар. Выберите инструмент Ellipse (U) и удерживайте нажатой клавишу Shift , чтобы нарисовать круг. Наконец, скопируйте и вставьте аватар над слоем с кругом и наведите курсор на слой с аватаром, удерживая клавишу Alt , чтобы создать обтравочную маску.

Чтобы сделать вещи лучше организованными, создайте две группы в группе Social Proof и разделите классы отзывов в отдельные группы.

Дизайн для Окончательный призыв к действию (призыв к действию)

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

Шаг 1

Разделите предыдущую область той же линией. Найдите слой с прямой линией и просто нажмите CMD + J , чтобы продублировать его, а затем переместите под отзывы, чтобы освободить место.

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

Шаг 2

Перейдите в группу заголовков и найдите группу образцов, затем скопируйте ее ( CMD + J ) и переключитесь на группу Final CTA. Поместите его под сообщением и немного настройте, добавив зеленую обводку вокруг поля ввода.

Щелкните правой кнопкой мыши входной слой и выберите Blending Options. , затем примените эффект Stroke , как показано ниже, здесь используется цвет # 51a200 .

Дизайн Нижний колонтитул (нижний колонтитул)

Мы завершили команду Final CTA, поэтому, пожалуйста, сократите ее и расширьте команду Footer. Наконец, введите несколько ссылок на внутренние страницы и поместите простой текст об авторских правах в новую строку.Здесь используйте для ссылок шрифт Open Sans (слегка полужирный).

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

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

Желаю всем успехов!

См. Также: Инструкции по созданию веб-сайтов в Photoshop (Часть 1): Создание темы для ремесленных мастерских

Идеи дизайна посадочной страницы для юридических услуг

Целевые страницы

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

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

Несколько целевых страниц

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

Удобный дизайн

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

Больше чем текст

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

Предложение и действие

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

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

Копия целевой страницы

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

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

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

Как создать целевую страницу с высокой конверсией (12 основных элементов)

Создание хорошей целевой страницы — это не ракетостроение, но это требует некоторой работы.

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

Так как же демистифицировать процесс и раскрыть целевую страницу, чтобы удивить наблюдающий мир?

Продолжайте читать, и я вам его выложу.

Что такое целевая страница?

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

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

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

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

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

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

Фактически он выполняет две цели конверсии в одном простом дизайне:

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

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

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

Преимущества эффективных целевых страниц

Есть несколько преимуществ эффективных целевых страниц, помимо увеличения конверсии.

Получение рейтинга SEO

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

Реклама предстоящего продукта или продажи

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

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

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

Сделайте процесс покупки / подписки более эффективным

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

Правда о хороших целевых страницах

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

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

Например, рассмотрим эти три сценария:

• На одной целевой странице продаются кроссовки с нулевым падением для ультрамарафонцев.

• Другая целевая страница приглашает внутренних маркетологов на двухдневную конверсионную конференцию в Торонто.

• Третья целевая страница предлагает сомелье пройти онлайн-тест на пары.

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

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

(Среди множества других факторов.)

Так что один размер не подходит всем.

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

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

Как создать целевую страницу, конвертирующую

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

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

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

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

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

9 основных элементов целевой страницы

1. Убийственный заголовок

Заголовок — это там, где все начинается — интерес, внимание и понимание.

Это то, что заставляет посетителя остаться и узнать больше о том, что вы предлагаете — или нет.

Вот что ему нужно для выполнения:

• Заголовок должен привлечь внимание читателя.

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

• Заголовок должен быть коротким. Никогда не делайте его более 20 слов и желательно ограничьте его до 10.

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

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

Во-первых, взгляните на эту целевую страницу популярного инструмента дизайна UX.

Заголовок короткий, приятный и быстро доходит до сути. Этот продукт явно создан для команд.

Если посетитель относится к смелому заявлению InVision или вдохновлен им, это вызовет у них интерес и побудит узнать больше.

Затем взгляните на заголовок из PictureMarketing. Он не пытается быть умным, но точно определяет, для чего предназначена услуга.

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

Как только посетитель попадает на эту страницу, он знает, что предлагает компания.

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

Теперь мы рассмотрим не такой простой пример.

Заголовок

Monsoon: «Мы работаем над продуктами» привлекает внимание, но не сообщает посетителям, что именно они предлагают.

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

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

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

Если ваш продукт или услуга слишком сложны, чтобы их можно было описать 10–20 словами, это может быть эффективным подходом.

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

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

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

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

2. Убедительные подзаголовки

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

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

Вот что нужно иметь в виду, создавая свой:

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

• Подзаголовок должен иметь элемент убедительности.

• Подзаголовок может быть немного более глубоким и подробным, чем основной заголовок.

Например, взгляните на домашнюю страницу Slack:

Его основной заголовок «Где работа» достаточно лаконичен и привлекает внимание.

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

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

Также стоит отметить, что объяснение не всегда должно идти после наиболее убедительного утверждения на странице.

Например, служба поддержки

переворачивает заголовок и подзаголовок на следующей целевой странице.

Главный заголовок страницы, на что указывает более крупный шрифт и центральное расположение, — «Приятное обслуживание клиентов».

Хотя фразу «Служба поддержки для команд, которые настаивают на этом» размещено над основным заголовком, это явно подзаголовок.Он намного меньше и не так заметен.

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

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

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

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

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

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

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

3. Рисунки

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

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

Итак, выбирая и размещая изображения, помните, что

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

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

• Картинка должна быть качественной.

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

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

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

Эти изображения забавны и привлекают внимание.

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

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

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

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

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

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

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

Наверное, не слишком много людей.

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

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

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

Довольно простой звонок.

4. Объяснение

Ваша целевая страница должна четко отражать то, что вы предлагаете.

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

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

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

• Объяснение может быть объединено с заголовком или полностью отделено.

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

Таким образом, ваше объяснение не обязательно должно отделяться от заголовка и подзаголовка.

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

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

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

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

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

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

Asana решает эту проблему с помощью визуального прохождения своей платформы.

Это гораздо легче понять, чем текстовое объяснение, и для большинства посетителей оно гораздо интереснее.

5. Кое-что о боли

Ваша первая реакция на этот подзаголовок может быть такой: «Что-то о…? Разве это не очень расплывчато? »

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

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

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

Вот как это сделать на целевой странице:

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

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

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

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

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

Для начала я начну с простого интерактивного элемента — викторины:

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

6. Кое-что об удовольствии

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

Есть два основных способа включить это в свою целевую страницу:

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

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

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

Но вы не просто продаете таблетку. Вы продаете свободу, облегчение и радость.

Тот же принцип можно применить ко многим различным продуктам.

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

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

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

А если не считать свой продукт «эмоциональным»?

Вы все еще можете заставить эту тактику работать.

Чтобы проиллюстрировать этот момент, мы рассмотрим целевую страницу из Mixpanel. Компания продает услуги A / B-тестирования. Не все так эмоционально, правда?

Конечно, в руках некоторых маркетологов.

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

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

А теперь взгляните на эту страницу с Reputation.com.

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

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

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

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

7. Способы связи

Является ли ваш бизнес законным?

Тогда проясните это на своей целевой странице.

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

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

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

Вот что следует иметь в виду, добавляя контактную информацию на свою целевую страницу:

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

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

Например, исследуя эту статью, я побеседовал с одним из представителей Placester. Она была любезной, вежливой и ответила на мои вопросы.

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

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

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

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

Но чат — не единственный способ сделать вашу компанию доступной для посетителей.

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

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

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

8. Гарантия

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

Само слово повышает вероятность конверсии.

Вот что следует иметь в виду при создании целевой страницы:

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

• При отсутствии какой-либо явной гарантии продукта (например, удовлетворения, возврата денег и т. Д.) Вы можете предоставить другой тип гарантии: например, «100% гарантия отсутствия спама».

• Разместите гарантийное заявление рядом с CTA. Эта близость поможет потенциальному клиенту получить последнюю уверенность и быть готовым к конверсии.

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

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

Notarize.com под кнопкой CTA, вероятно, будет чрезвычайно привлекательной для потенциальных клиентов, которые не решаются попробовать услуги электронного нотариуса.

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

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

9. Мощный призыв к действию

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

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

Это то, что в конечном итоге превращает посетителей в клиентов.

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

Сделайте это большим. В общем, чем больше, тем лучше.

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

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

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

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

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

Например, этот призыв к действию для Crazy Egg усиливается изображением человека, указывающего на него:

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

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

Он прекрасно расположен, а копия кнопки «Reimagine retargeting» проста, но вдохновляет.

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

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

Это, вероятно, принесет странице приличный коэффициент конверсии.

В

Sprout Social есть еще один отличный пример высококонтрастной кнопки CTA.

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

В CTA

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

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

7 основных советов по созданию высоко конвертируемых целевых страниц

1. Выберите лучший конструктор посадочных страниц

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

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

Редактирование перетаскиванием также поможет вам без особых усилий размещать элементы.

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

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

2. Сделайте все возможное с помощью своего ценностного предложения

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

По сути, он отвечает на вопрос: «Что это для меня?»

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

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

Вот что следует иметь в виду при создании своего:

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

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

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

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

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

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

Но это утверждение полностью сосредоточено на вашей компании, а не на вашей аудитории. Вы можете исправить это, переписав его как «У вашего сайта будет 99,98% времени безотказной работы!»

Видите разницу?

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

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

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

Repumatic использует упрощенную стратегию с этим простым списком результатов.

К концу этого списка читатель точно знает, в чем ему поможет платформа.

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

3. Сохраняйте простоту вещей

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

Взгляните, например, на целевую страницу Картера, на которую я попал из их платной рекламы в Google.

Цвета очень приятные, а дизайн выглядит довольно чистым, но здесь много чего происходит. Я, , думаю, , они пытаются продвигать свою новую линию Carter’s Kids, но изображения преобладают над текстом.

Теперь посмотрим на этот пример целевой страницы от Boden.

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

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

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

4. Покажите людям социальное доказательство

Социальное доказательство — это количество лайков, репостов, подписчиков, пинов, твитов и т. Д. У вашей компании. Разместите их на видном месте на целевой странице.

Почему?

Согласно исследованию Hubspot, 71 процент миллениалов с большей вероятностью купят что-то, если это рекомендовано в Интернете.

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

Если вы посмотрите на верхнюю часть сайта мамочкиного блоггера Ким Бонджорно, вы увидите, что она вложила свое социальное доказательство прямо в свой призыв к действию: «Присоединяйтесь к моим более чем 70 тысячам поклонников и получайте мою еженедельную новостную рассылку!»

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

Вот как их правильно интегрировать:

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

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

• Отзывы должны быть конкретными. Блестящие обобщения не могут служить хорошим свидетельством. Лучшие свидетельства — это те, которые подкреплены реальными числами, реальными данными и конкретными приложениями.

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

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

Эти подлинные фотоотзывы делают рецензентов более понятными для читателей.

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

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

5. Используйте коммерческое видео

Видео становится способом, которым люди пользуются информацией. Фактически, по данным Cisco, к 2020 году видео будет составлять 80 процентов мирового интернет-трафика.А YouTube — вторая по популярности поисковая система после Google.

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

Рекламное видео не должно быть длинным и увлекательным. Фактически, самые эффективные видеоролики продолжаются от 30 секунд до двух минут.

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

6. Удаление элементов навигации

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

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

Вот как это сделать:

• Начните с объяснения

• Продолжайте пользоваться преимуществами

• Включите свои отзывы

Это наиболее очевидный и убедительный метод структурирования целевой страницы.

И вам не нужно быть тонким с этой структурой. Совершенно нормально, если в дизайне целевой страницы есть разделение на разделы.

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

Это особенно важно для длинных целевых страниц.

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

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

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

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

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

К счастью, это не обязательно.

Просто посмотрите этот пример страницы на Spotify:

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

Upwork, с другой стороны, предлагает услуги фриланса в США и за рубежом, поэтому они используют несколько CTA через строку поиска и кнопки:

И это прекрасно.

Основная цель — просто предоставить посетителям несколько возможностей для конверсии на странице.

7. A / B Test Your Landing Страница

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

Вы видите ожидаемое количество конверсий? Если нет, то где люди теряются?

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

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

Заключение

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

Так что не напутайте!

К счастью, создание мощной целевой страницы с высокой конверсией — это не ракетостроение.

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

Как создать целевую страницу в 2021 году [+ Советы и лучшие инструменты]

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

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

Ты забыл? Большой. Тогда вы только что вспомнили одну из величайших цитат из фильма в истории кино.

Да, я говорю о знаменитом «Я сделаю ему предложение, от которого он не сможет отказаться».

Вито Корлеоне сказал это своему крестнику. И это сработало.

Вы собираетесь сказать это посетителям вашего сайта. И поверьте мне, это БУДЕТ работать.

Что я имею в виду? То, что ВЫ собираетесь на создать целевую страницу , они не смогут устоять.

Что такое целевая страница?

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

В основном это то место, куда ваша аудитория и / или новые посетители перенаправляются при нажатии на ссылку, которая соответствует желаемой целевой странице.

Каковы следующие шаги?

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

Собирайте электронные письма и превращайте посетителей в потенциальных клиентов или совершайте продажу, верно?

Но как?

Создание отличной целевой страницы — это ответ, который вы ищете.

И я знаю, что вы слышали о целевых страницах раньше, но знаете ли вы, что это такое?

Я приму это как нет, поэтому давайте начнем с основ.

Небо голубое, трава зеленая, а целевая страница НЕ является домашней страницей.

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

На самом деле цель у него одна и единственная: преобразование .

Повторяйте за мной.

Преобразование.

Прямо тут и там.

Технически, целевая страница — это то место, куда вы «приземляетесь» (видите, что я там делал?) После нажатия на онлайн-рекламу или электронное письмо (CTA).

И согласно Hubspot « типичная целевая страница конвертируется от 5 до 15%, но некоторые высокооптимизированные целевые страницы конвертируются на 30% или выше ».

Неплохо, правда?

Есть 2 типа целевых страниц:

1. Справочные целевые страницы
2. Транзакционные целевые страницы

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

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

Зачем вам нужна целевая страница

Итак, для чего используется целевая страница и зачем она вам нужна?

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

Длинный ответ:

1. Это помогает вам привлекать потенциальных клиентов

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

Поскольку адаптивные целевые страницы — лучший способ привлечь потенциальных клиентов, точка!

И не только любые лиды, но и качественных лидов . Круто, правда?

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

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

2. Это чрезвычайно эффективная и действенная реклама

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

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

3.Это помогает вам занять более высокий местный рейтинг

Знаете ли вы, что, согласно ThinkWithGoogle, « 18% локальных поисков смартфонов привели к покупке в течение дня по сравнению с 7% не локальных поисков »?

Довольно большой, правда?

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

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

Как быстро добиться этого?

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

4. Он предлагает лучший пользовательский опыт

Запомните мои слова.

Каждые. Пользователь. Является. Уникальный.

И они хотят, чтобы с ними так обращались.

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

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

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

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

Как создать высокоэффективную целевую страницу за 10 простых шагов

Создание целевой страницы для вашего веб-сайта с нуля — это одно.

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

Это не ракетостроение.

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

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

1. Создайте образ

Никто в истории «Да, я хочу это» никогда не говорил «Да, я хочу это», хотя на самом деле этого не хотел.

И обратите внимание, как я не использую слово «нужда». Потому что дело не в том, что тебе нужно. То, что они хотят.

И для этого вы должны знать, кто они.

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

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

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

Персона — это ваша идеальная целевая аудитория .

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

Все вышеперечисленное требует проведения опросов клиентов, онлайн-исследований и, конечно же, существует множество простых и чрезвычайно удобных инструментов, которые помогут вам создать свой образ, предлагаемого платформами, такими как Xtensio, Digital Marketer, Demand Metric и другие.

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

2. Определите свою цель

Прежде чем приступить к созданию своей потрясающей целевой страницы, вы должны знать, ПОЧЕМУ вы хотите ее создать.

Другими словами, каким будет ваш призыв к действию.

Обычно это:

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

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

Итак, что это будет для вас?

3. Ориентируйтесь на правильные ключевые слова

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

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

Так что советую остановиться на более конкретных терминах.

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

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

Например, представьте, что вы — кондитер из Рима, специализирующийся на канноли.

Вместо использования широких терминов, таких как «шеф-кондитер» и «канноли», следует использовать «шеф-кондитер канноли в Риме». Имеет смысл, правда?

4. Напишите броский заголовок

Я не могу не подчеркнуть важность заголовков.

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

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

Итак, что делает заголовок отличным?

Давайте разберемся с загадками магнитных заголовков на нескольких примерах.

Example # 1

The Attention — Grabbing One

Вы знаете, что хотите.Вы просто не могли выразить это словами. Итак, Adobe сделала это за вас.

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

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

Пример № 2

Тот, где вы объясняете, что это такое

Слова сильны. И поверьте мне, когда ваш продукт или услуга уникальны, их достаточно.

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

Пример № 3

Слишком короткий — и сладкий — сопротивляться

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

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

Нет ничего проще.

5.Создайте неотразимый призыв к действию

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

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

Как эти:

Вечнозеленая эффективность FOMO

FOMO означает «страх упустить» и является одним из самых популярных слов нашей эпохи.Давайте посмотрим правде в глаза.

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

NETFLIX знает об этом. И они ловко применяют FOMO к этому здесь, чтобы сказать вам: «Эй, ты собираешься пропустить следующий лучший сериал? Шутки в сторону?».

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

Разговор о мощном послании, верно?

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

Простота для победы

У ваших посетителей есть сила. Но не терпение. И вы не имеете права тратить свое время. Так что заставьте их понять суть и сделать это быстро. Как? Сохраняя это простым. Не используйте сложные слова и каламбуры, которые никто не поймет (и не посмеет), кроме вас. Вместо этого используйте простой язык и ясное сообщение, которое поможет вашему посетителю понять идею за секунду. И нажмите кнопку.

Как здесь Spotify.

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

Precision Means Trust

Ваши посетители хотят знать:

1. Чем вы занимаетесь
2. Чем вы хотите, чтобы они делали

Так что будьте спортом и дайте им то, о чем они просят.

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

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

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

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

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

Вы в игре?

6. Используйте визуальный контент

Я знаю, что вам не нужно слышать от меня, что изображение стоит 1.000 слов. Но вот и все. Я сказал это.

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

Согласно исследованию Microsoft 2018 года, средняя продолжительность концентрации внимания составляет 8 секунд.

8 секунд!

А кто вам лучший друг, когда дело доходит до привлечения внимания человека?

Именно мой друг. Изображения и видео.

Мне нравится эта целевая страница Daily Harvest.

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

Это минималистичное и красочное фото кричит о здоровом, простом и высококлассном.

Даже если вы понятия не имеете, что такое Daily Harvest, вы получите полную картину на одной целевой странице.

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

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

7. Свяжите целевую страницу с объявлением

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

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

Потому что они просто не знают, что с этим делать!

8. Добавьте социальное доказательство

Представьте, что вы в супермаркете со своим другом.

Пока вы не решаете, какой шампунь купить, она говорит:

«Эй, а почему бы тебе не купить шампунь Х?».

Как бы вы отреагировали в этом случае?

Вы бы просто купили это?

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

Тогда я думаю, вы понимаете мою точку зрения.

Опрос потребителей, проведенный Bright Local в 2018 году, показал, что « 91% потребителей доверяют онлайн-отзывам так же, как личным рекомендациям ».

Это демонстрирует, как социальное доказательство может повлиять на покупателя.

Будь то продукт или услуга, социальное доказательство может направить посетителя вниз по воронке конверсии.

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

Существует так много разных типов социальных доказательств, которые вы можете использовать:

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

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

9. Добавьте отслеживание аналитики

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

Ну, нет. Не раньше, чем вы добавите в него отслеживание аналитики.

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

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

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

10. Оптимизируйте свою целевую страницу

И последнее, но не менее важное: оптимизация.

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

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

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

Заголовок:

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

Мета-описание:

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

Теги заголовка:

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

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

Содержимое:

Да. Контент — это король.

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

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

Выбор идеальной платформы для вашего бизнеса

Теперь, когда вы все распланировали, пора перейти к интересной части.

Собственно, создайте свой лендинг!

Вот и все. Потому что обо всем будет судить создатель целевой страницы, который вы выберете.

Профессиональные оптимизированные шаблоны

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

На самом деле дело не в том, чего вы хотите. Речь идет о том, что является обязательным, если вы имеете в виду успех.

Наступает 2021 год.

Ваши посетители обучены и активны. Не поленитесь на этом.

Оптимизация для мобильных устройств

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

Инструмент A / B-тестирования

Каждый посетитель индивидуален.Каждый рынок индивидуален. Тем не менее, A / B-тестирование жизненно важно, если вы хотите конверсий.

И это единственный способ узнать, окупается ли ваша кампания.

Интеграции

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

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

Все просто.

Добавление собственного кода

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

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

Разнообразие возможностей мультимедиа

Знаете ли вы, что, согласно исследованию EyeViewDigital, использование видео на целевой странице может повысить конверсию до 80% (pdf)?

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

Analytics

Знайте, где ваши посетители переходят, что им нравится, а что нет.

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

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

Это инструмент, к которому нельзя относиться легкомысленно.

Несколько учетных записей пользователей

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

И единственный способ выиграть — это соблюдать правила.

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

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

Я знаю, это может показаться большой работой.

И на самом деле, это займет у вас изрядное количество времени.

Но ведь успех не для слабонервных, правда?

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

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

1.Ландинги

Цена : четыре плана. Бизнес: Core: 29 долларов в месяц, создание: 45 долларов в месяц, автоматизация: 59 долларов в месяц, Suite: 209 долларов в месяц.

Бесплатная пробная версия : Да. Все планы включают 14-дневную бесплатную пробную версию.

Описание :

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

2. Unbounce

Цена: три тарифных плана, ежемесячный и годовой, от 79 долларов в месяц.

Бесплатная пробная версия : Да, 30-дневная пробная версия доступна для всех пользователей.

Описание:

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

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

3. Instapage

Цена: два тарифных плана.Ядро: 99 долларов в месяц. Предприятие: индивидуально.

Бесплатная пробная версия: Да, существует 14-дневная бесплатная пробная версия, включающая все функции плана Core.

Описание:

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

Многофункциональный и эффективный, Instapage поставляется с простыми инструментами A / B-тестирования, обогащенными аналитическими функциями, что позволяет вам выбрать, какой из них лучше подходит для вас.

4. Leadpages

Цена: три плана: Standard, Pro и Advanced. Стандартный план на 2 года стоит 17 долларов в месяц.

Бесплатная пробная версия: Да, все планы включают 14-дневную бесплатную пробную версию.

Описание:

Leadpages — это цифровая платформа для генерации лидов, которая позволяет настраивать целевую страницу с нуля.

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

5. Lander

Цена: два плана, годовой и ежемесячный, от 16 долларов в месяц.

Бесплатная пробная версия: Да, вы можете попробовать оба плана бесплатно в течение 14 дней.

Описание:

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

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

6. Shortstack

Цена: пять планов. Бесплатный план. Стартер: 29 долларов в месяц. Бизнес: 99 долларов в месяц. Агентство: 199 долларов в месяц. Бренд: 499 долларов в месяц.

Бесплатная пробная версия : да.

Описание:

Shortstack — это программа для маркетинговых кампаний и целевой страницы, идеально подходящая для всех, кто имеет базовые знания в области программирования.

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

7. LaunchRock

Цена: два плана. Стартер: бесплатно. Профессиональный: от 5 долларов в месяц. M

Бесплатная пробная версия: да.

Описание:

LaunchRock — это бесплатное веб-программное обеспечение, рекомендованное для начинающей аудитории.

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

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

К сожалению, в нем отсутствует инструмент A / B-тестирования, и в нем мало возможностей для настройки.

Что можно и нельзя

Вы знаете правила. Вы играете в игру. Но ты выигрываешь?

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

Do’s

• Будьте проще. Сделайте чистый и простой внешний вид с минимизированной и прямой информацией.

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

• Используйте маркированный список и цифры. Они помогают нашим читателям быстрее усваивать информацию. (8 секунд, помните?)

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

Не использовать

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

• DDНе запрашивайте дубликаты или слишком много информации. Время — золото. Как и конфиденциальность.

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

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

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

Вам

Psssst! Идите сюда! Позвольте мне помочь вам надеть ваш победный пояс через плечо. Потому что вы только что получили награду Landing Page Master 2019.

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

Вы это заслужили.

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

Или оставьте комментарий, сообщив нам «секрет целевой страницы».Обещаем, что никому не расскажем, кроме подписчиков!

Landing Page Photoshop — ноябрь 2021 г.

06032020 Ребята Это в основном учебник по созданию веб-страниц в Photoshop. В этом видео я научу вас, ребята, как создать профессиональную целевую страницу на тел. Отбросьте инструменты дизайна, чтобы создать свой собственный потрясающий веб-сайт в Интернете.

Шаблон целевой страницы бесплатного Psd ресторана

Это поможет нам упростить выравнивание элементов веб-дизайна.

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

Ad Utilize Wixs Drag. Все начинается с профессионального веб-сайта. Дизайн целевой страницы, созданный с лаконичным и современным дизайном.

Ваша целевая страница должна доказать и дать им ответ и разрешить любую боль, которую он испытывает. TheHam создает Photoshop с простым и минималистичным дизайном, чтобы показать ваше творчество. Бесплатная загрузка Tajam Free One Page PSD Template.

Как создать простую целевую страницу с помощью Photoshop CC — YouTube. Объявление Никогда не было так просто использовать Adobe Photoshop. Узнайте, что такое создатель веб-сайтов Wix.

02062017 Созданный дизайнером Самиром Тимезгуидой, этот бесплатный шаблон целевой страницы PSD был построен на сетке 1170 пикселей и поставляется в виде многослойного файла Photoshop со смарт-объектами. Так что, если вы хотите создать веб-сайт, шаблон PSD подскажет вам лучший способ сделать это. Целевая страница Upto — это полностью редактируемый шаблон целевой страницы в Adobe Photoshop.

02122017 Для этой целевой страницы мы будем полагаться на сетку. Узнайте, что такое создатель веб-сайтов Wix. Регулярно появляются новые функции для упрощения действий и экономии времени.

Ad Utilize Wixs Drag. Регулярно появляются новые функции для упрощения действий и экономии времени. В этом уроке я проведу вас через процесс создания простой и ориентированной на конверсию целевой страницы приложения.

01052021 Этот шаблон целевой страницы имеет светлый и темный макеты и был создан с помощью BootStrap 4.Мы можем использовать популярную сетку 960 Grid System. Что вы будете создавать.

Он отличается чистым и современным дизайном и может быть использован для объявления о запуске вашего стартапа. Загрузите ZIP-файл 960 Grid System с официального сайта проекта, извлеките его содержимое, а затем откройте PSD-файл Photoshop с 12 столбцами. Есть шаблоны, которые основаны на формате PSD и могут.

Upto Landing Page Concept Бесплатный веб-шаблон. Хорошо, используйте приложение Tuts Android для демонстрации, подчеркивая его особенности и преимущества и используя призывы к действию повсюду.Загрузите самую популярную целевую страницу.

Все начинается с профессионального веб-сайта. 28032016 theHam — это бесплатный PSD-шаблон целевой страницы для творческих деловых или личных портфолио. Шаблон целевой страницы 87 Скачать бесплатно в формате PSD.

Drop Design Tools для создания собственного потрясающего веб-сайта в Интернете. PSD-шаблоны сейчас в моде, поскольку они имеют безумную графику и помогают создавать веб-сайты, не похожие ни на какие другие. 12052015 Преобразование целевых страниц в Adobe Photoshop.

Целевая страница

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

Объявление Еще никогда не было так просто использовать Adobe Photoshop.

изображения посадочной страницы Бесплатные векторы Стоковые Фото Psd

Шаблон целевой страницы бесплатного Psd ресторана

Посадочная страница Mendesain Sebuah Aplikasi в Photoshop

изображения посадочной страницы Бесплатные векторы Стоковые Фото Psd

PSD to HubSpot Made Simple: пошаговое руководство

Как преобразовать файлы Photoshop в страницы HubSpot

Когда дело доходит до разработки веб-сайта или целевой страницы, важным аспектом является создание базового каркаса и дизайна макета, прежде чем вы сможете создать шаблон в Интернете.Это можно легко создать в программе-макете, такой как Adobe Photoshop, Adobe XD или Figma. Среди программ наиболее распространенным выбором для создания каркаса или макета является Photoshop.

После того, как вы закончили каркас или макет в Photoshop, следующим шагом будет создание вашего шаблона в HubSpot CMS. Если вы спросите любого веб-разработчика или эксперта по маркетингу, они скажут вам, что лучшая программа для этой части процесса — HubSpot.

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

Что такое файл Photoshop Document (PSD)?

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

Файл PSD позволяет веб-дизайнерам или разработчикам работать с отдельными слоями изображений даже после того, как файл уже был сохранен.Хотя Photoshop является лучшим выбором для большинства компаний при разработке и реализации идей, дизайнов и окончательных черновиков проекта при их представлении клиентам, существует более эффективный и простой способ продемонстрировать свой веб-дизайн. Это преобразование PSD в HubSpot.

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

Советы по преобразованию PSD в HubSpot

HubSpot упрощает преобразование файлов с помощью преобразования PSD в HubSpot.Он позволяет вам создать свою веб-страницу или желаемый шаблон в Photoshop, а затем использовать тот же файл для создания шаблона в HubSpot. Это дает вам возможность визуализировать, как шаблон будет работать с менеджером дизайна.

Что такое преобразование PSD в HubSpot? Это модернизированный и эффективный способ заняться процессом проектирования и создания ваших веб-страниц.

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

При работе с группой экспертов начальные шаги преобразования PSD в HubSpot следующие:

• Составить перечень требований
• Отправьте ваш файл команде преобразования PSD в HubSpot
• Получите консультационные услуги от руководителей (больше нет бесплатных услуг по расценкам)
• Начало предоставления услуг по разработке из PSD в HubSpot
• Адаптивное тестирование для анализа качества
• После утверждения шаблоны редактируются и публикуются

Преимущества преобразования PSD в HubSpot

Специалисты

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

HubSpot COS предоставляет вам все, что вам нужно. Наряду с HubSpot COS преобразование PSD в HubSpot поможет вам добиться заметного, мощного присутствия в Интернете и использовать все возможности вашего веб-сайта с наименьшими усилиями.

• Вы создадите более отзывчивый и удобный для устройств веб-сайт.

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

• Вы создадите более безопасный веб-сайт .

Преобразование

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

• HubSpot упрощает редактирование.

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

• Получите удобную навигацию по сайту.

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

• Получите техническую поддержку от HubSpot или сертифицированного партнерского агентства.

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

Встроенные инструменты оптимизации с Photoshop для HubSpot

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

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

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

Инструменты преобразования PSD в HubSpot

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

Гибкие темы веб-сайтов

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

• Создание и тестирование многоязычного контента

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

• Редактор страниц с перетаскиванием

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

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

• Сообщение с указанием авторства контакта

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

Как нарезать файлы PSD в HubSpot

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

• Очень важно сохранить фоновое изображение, верхний и нижний колонтитулы как отдельные файлы.
• Еще один важный шаг, о котором следует помнить, — это выбрать опцию «Сохранить для Интернета» во время экспорта.
• Как только вы начнете работать с HubSpot Design Manager, вы можете создать новый шаблон с помощью Template Builder.
• Вы можете начать использовать модули после того, как создадите новый шаблон и присвоите ему имя.
• После того, как вы выполнили описанные выше шаги, вы можете начать удалять ненужные модули и добавлять части вашего дизайна. Вы можете начать этот процесс с помощью файла заголовка. Затем вставьте изображения в текстовые модули вместе с файлами. Для процесса очень важно, чтобы вы называли модули в соответствии с типами изображений или файлов, размещенных внутри каждого модуля. Это поможет вам легко найти то, что вы ищете, если вы захотите отредактировать файлы или изображения позже.
• Вы можете добавить собственный стиль с помощью CSS в каждый модуль.
• Также можно использовать исходный код для изменения размера изображений или изменения дизайна, если дизайн или размер изображения не соответствует макету так, как вам нужно или вы хотите, чтобы он соответствовал.

PSD для разработки HubSpot

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

Редактор кода

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

• Модули HubSpot можно использовать для построения структуры макета для ваших шаблонов.
• Вы можете перетаскивать эти модули с помощью функции редактирования страницы перетаскиванием.
• Вы также можете поменять местами или разделить модули пополам.
• Вы можете легко разместить эти модули в разных строках и сгруппировать несколько моделей для стилизации или оптимизации.
• HubSpot также предоставляет различные модули содержимого, такие как Image Slider, Rich Text или Custom HTML module. Вы можете максимально использовать эти модули, чтобы удовлетворить практически любые ваши требования к проектированию. HubSpot также предлагает модуль Custom HTML, который позволяет добавлять настройки в строке.

Редактировать CSS и инструменты глобального модуля

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

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

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

Руководство по преобразованию PSD в HubSpot

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

1. Знайте свою аудиторию

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

2. Знайте, что сохранить, а что потерять

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

3. Создание образа покупателя

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

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

4. Персонализированная персонализация контента

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

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

5. Постройте каркас

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

6. Преобразование PSD в страницы HubSpot

Последний шаг процесса — перенос файлов PSD в HubSpot. Когда веб-сайт будет готов к работе, вы должны отредактировать записи DNS и переместить домен с предыдущей платформы на HubSpot. На этом процесс преобразования PSD в Hubspot завершен.

7. Создайте эффективный шаблон

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

8. Создайте веб-страницу

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

9. Заполните содержимое

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

PSD в HubSpot Take Aways

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

Как создать целевую страницу, конвертирующую

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

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

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

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

Открою тебе секрет.

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

Итак, приступим.

Познакомьтесь со своей аудиторией

Исследование рынка — важный шаг в процессе создания целевой страницы.

Если вы не знаете, кто ваши клиенты и что их мотивирует, как вы соблазните их купить то, что вы продаете? Найдите время, чтобы познакомиться с ними.

Опросите своих клиентов.

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

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

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

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

Итак, чем это может вам помочь?

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

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

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

Но об этом позже.

Изучите своих конкурентов.

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

• Легко ли понять, что они предлагают?
• Торт купить легко?
• Целевая страница загромождена и сбивает с толку?

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

Будьте умны с копией

А теперь пришло время сформулировать ваше всеобъемлющее сообщение. Как вы хотите выглядеть? Какие обещания вы хотите дать? Какую историю ты хочешь рассказать?

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

Дело не в тебе, дело в них.

Это важно понимать — пользователи Интернета эгоистичны.

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

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

Пишите как человек, а не как в учебнике.

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

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

Разработайте свое ценностное предложение.

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

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

• ‘Ожидайте большего. Плати меньше.’ Target, розничная компания.
• «Короткие ссылки, большие результаты.» Bitly, сервис сокращения URL-адресов.
• «Все, что нужно для продажи в Интернете». Shopify, платформа электронной коммерции.

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

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

• Каналы социальных сетей
• Презентационные поля
• Объявления
• Визитки

Помните, это ваше введение, и вы хотите произвести хорошее первое впечатление.

Отвечайте на вопросы до того, как их зададут.

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

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

Сквош любые проблемы.

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

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

• Если вы думаете, что пользователя может беспокоить стоимость? Объясните, почему ценник оправдан.
• Могут ли они быть обеспокоены тем, насколько легко использовать ваш продукт? Укажите любую поддержку, которую вы предлагаете, например телефонные линии или руководства пользователя.
• Могут ли они не решаться передать свои личные данные? Сообщите им, какие меры безопасности у вас есть, чтобы скрыть их данные.

Выберите подходящее доменное имя.

Если у вас его еще нет, вам понадобится отличное доменное имя для вашего сайта.

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

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

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

Ослепите своим дизайном

Исследование Google показало, что мы решаем, красив ли веб-сайт в пределах от 1/50 до 1/20 секунды, и эта сложность пагубно сказывается на воспринимаемой красоте.

Итак, что мы можем сделать с нашими целевыми страницами, чтобы добиться успеха?

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

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

Взгляните на редизайн новой домашней страницы Visme в качестве примера.

Подумайте о своем макете.

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

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

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

Выбирайте цвета с умом.

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

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

Дизайн для пользователя.

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

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

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

Вот некоторые из них, на которые стоит обратить внимание:

Получайте удовольствие от обучения!

7 простых побед для вашей целевой страницы

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

1. Создайте четкие призывы к действию (CTA).

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

Вот пример от Uber.

2. Выберите настоящие изображения, чтобы показать, что вы настоящий.

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

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

Ниже приведен пример целевой страницы TransferWise.

3. Используйте социальное доказательство, чтобы завоевать доверие.

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

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

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

Вот пример из gohenry.

4. Корректируйте свою работу.

Нет ничего более неприятного, чем целевая страница, усеянная ошибками.

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

5. Сделайте вашу копию доступной для всех.

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

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

Источник изображения

6. Проверьте свой дизайн.

После создания целевой страницы приступайте к ее тестированию. A / B-тестирование сравнивает две целевые страницы, чтобы вы могли увидеть, как ваша страница конвертируется.

Вы можете узнать больше об этом в Crazy Egg.

Источник изображения

7. Не бойтесь перемен.

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

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

Готовы создать целевую страницу с высокой конверсией?

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

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

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

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

Зарегистрируйте бесплатную учетную запись сегодня и пройдите тест-драйв!

.