Верстка лендинг пейдж: Цена верстки лендинга в Москве — YouDo

Другие варианты самостоятельного создания лендинга

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

Кроме того, можно сделать бесплатный лендинг своими руками в фотошопе, заверстать его, используя минимальное количество кода, например, с помощью программы Dreamweaver, и разместить на собственном домене. Достаточно создать файл index.html, style.css и папку с картинками. На такой веб-странице можно разместить любые картинки с продуктом, видео-материалы, краткое описание, несколько call-to-action кнопок.

И ничего лишнего.

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

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

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

В течение 7-ми дней вам дается возможность оценить полный функционал WYSIWYG редактора, выбрав из Галереи любой шаблон как для десктопа, так и адаптированный (responsive) под мобильные устройства, и настроив его под себя. За это время вы можете поработать с конструктором секций и широким набором виджетов, системой аналитики и Центром оптимизации конверсии, воспользоваться многочисленными интерграциями, а также купить или привязать свой домент прямо из Личного кабинета. 

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

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

По материалам: business.tutsplus.com

02-07-2018

Пользовательские CSS для landing page в ClickDimensions – Блог ClickDimensions

Хотите расширить возможности создания landing page или использовать шаблон страницы, подключить к ней собственный CSS? Сегодня мы пошагово расскажем, как это делать.

Пожалуй, редактор Block для создания landing page в ClickDimensions подойдет для создания страниц «с нуля», но маркетологи могут нуждаться в использовании готового или шаблонного дизайна целевой страницы. В этом случае редактор FreeStyle поможет подключить свой собственный HTML и CSS на создаваемой микро-странице, посвященной, например, какой-то акции или мероприятию.

Допустим, у вас есть готовая таблица стилей CSS, само собой, вы не захотите переносить все вручную, копируя и вставляя его в заголовок между тегами <style>. Но вы можете включить свои стили в таблицу стилей своего HTML, используя тег <link>. Если вы решите пойти по этому пути, необязательно размещать ваши файлы CSS где-то снаружи, можно использовать диспетчер документов ClickDimensions для их хранения.

 Чтобы сделать это, вам понадобятся:

• HTML вашей landing page, которые надо будет скопировать и вставить в редактор FreeStyle;
• Ваш CSS-файл сохранен и готов к загрузке в диспетчер документов;
• Созданная landing page с выбранным редактором FreeStyle для дальнейшей настройки в ClickDimensions.

Сначала создадим в разделе Web-контент ClickDimensions нашу landing page, настроив следующие параметры до сохранения:

После того, как вы сохранили запись, необходимо открыть дизайнер и в открывшемся окне редактора перейдите в меню «Source» и вставьте свой HTML:

Обратите внимание: внутри тега <head> есть тег <link>, который выглядит так:

“<link href=”assets/css/main.css” rel=”stylesheet” />”

Затем вам нужно будет загрузить свой файл CSS в диспетчер документов, а после загрузки обновить этот тег, чтобы ссылаться на новое местоположение файла CSS. Самый простой способ – разместить ссылку на загруженный файл на странице временно. Нажмите еще раз кнопку Source и перейдите в режим редактирования. Нажмите кнопку настройки гиперссылки. Перейдите в открывшемся окне на вкладку FILE:

Затем выберите «Загрузить файл»:

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

После вставки на страницу ссылки на CSS-файл вернитесь к представлению «Source», укажите в атрибуте href только что созданную ссылку (тег <a>). Затем вставьте это в атрибут href тега <link>, вызывающего стили CSS:

После копирования и вставки URL-адреса удалите ссылку, которую добавили ранее на страницу. Тег <link> должен выглядеть примерно так:

<link href=”https://app.clickdimensions.com/blob/clickdimesionscom-ajvpp/files/main.css” rel=”stylesheet” />

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

Если необходимо посмотреть в полном размере и вне редактора landing page, сохраните ее и нажмите кнопку «Embed», выберите «Вставить как ссылку» и перейдите по ссылке:

Все готово, можно публиковать, использовать в email-рассылках и для других нужд маркетинга. Также стоит отметить, что вы можете использовать этот метод несколько раз на одном и том же микро-сайте, поэтому, если у вас верстка с сеткой, которую вы используете, и набор стандартных стилей компании, которые существуют в разных CSS-файлах, вы можете вставить оба эти файла, используя два отдельных <link>.

Читайте также нашу  статью о добавлении собственного favicon для создаваемой landing page!

заказать создание лендинг пейдж под ключ

1.Бриф 2.Анализ 3.Проектирование 4.Дизайн 5.Верстка 6.Заполнение 7.Релиз

Обсуждение деталей

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

Определение целевой аудитории

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

Создание структуры

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

Проработка UX и UI дизайна

Составляем Customer Journey Map. Проектируем макеты сайта в векторном редакторе, продумываем удобство и наглядность пользовательского интерфейса. В том числе создаем адаптивные прототипы под мобильные устройства. Разрабатываем иконки, иллюстрации, анимации, готовим UI-киты и типографику.

Реализуем визуальную часть сайта

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

Размещение контента

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

Тестирование и запуск

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

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

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

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

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

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

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

Дизайн посадочной страницы от Данна Петти.

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

• Продвижение новых продуктов
• Растущие списки подписчиков
• Увеличение продаж и потенциальных клиентов
• Получение аналитических сведений и данных с помощью форм

Рекомендации по дизайну целевой страницы

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

1. Визуальная простота

Визуальная простота отображается на главной странице Conversionlab.

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

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

2. Отличная целевая страница начинается с отличных медиа

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

Привлекательная фотография увеличивает количество конверсий на целевой странице Uber.

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

Исследования влияния видео на целевые страницы показывают, что видео оказывают большее влияние, чем неподвижные изображения, где «71% респондентов подтверждают, что видео конвертируется лучше, чем другой контент.”Видео помогают с SEO, поддерживают взаимодействие с пользователем и лучше объясняют посетителям продукт или услугу. Еще один фактор, благоприятствующий видео, заключается в том, что при правильном использовании они могут заменить многословную копию, которая потенциально может повредить конверсии.

3. Важность цвета

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

Прекрасное использование цвета на целевой странице Мэйсоном Ярнеллом для Mixpanel.

Вот несколько советов, как эффективно использовать цвета:

• Поймите, как использовать высокие и низкие цвета, которые позволяют создавать высокую контрастность, которая напрямую связана с читаемостью копии.
• Создайте цветовую палитру, состоящую из совместимых цветовых комбинаций и основанную на дополнительных / противоположных цветах.
• Адресные цвета с точки зрения психологии и маркетинга.В зависимости от продукта / услуги используйте цвета, которые передают правильное сообщение (например, зеленый — это цвет, который передает безопасность, доверие и спокойствие, и, следовательно, его использование наиболее подходит для продуктов, связанных с финансами).
• Учитывайте цветовую символику при нацеливании на различную демографию. В разных культурах цвета интерпретируются по-разному, поэтому то, что работает для одной пользовательской базы, может не работать для другой.
• Поймите, что интерпретация цвета варьируется от пола к полу, и не существует «пуленепробиваемого» решения, когда дело доходит до выбора одного.

Цвет, используемый на целевой странице Balkan Brothers.

5. Адаптивный дизайн целевой страницы

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

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

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

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

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

Контент — Основа великой высадки Страница

1.Броские и лаконичные заголовки

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

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

Броский и лаконичный заголовок на целевой странице Taster’s Club.

Эффективный заголовок целевой страницы:

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

2. Настойчивый призыв к действию

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

Lyft использует яркие призывы к действию.

Можно улучшить свою «игру с кнопками» призывов к действию, применив следующие советы:

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

3. Психологические аспекты

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

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

Использование социального доказательства на целевой странице Unbounce.

4. Использование людей на целевых страницах

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

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

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

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

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

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

Распространенные ошибки в дизайне посадочной страницы

1. Нет изображений или графика низкого качества

Картинка стоит тысячи слов. — Пословица

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

2. Макеты страниц со слишком большим содержанием и сложностью

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

Сложный макет, перегруженный «шумом» — слишком много текста и информации.

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

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

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

Простой, но эффективный дизайн целевой страницы морды.

3. Несканируемая копия

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

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

Сводка

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

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

• • •

Дополнительная информация в блоге Toptal Design:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Убийственный заголовок и подзаголовок
• Изображение героя
• Возможности и преимущества
• Социальное доказательство
• Формы
• Призыв к действию

Ознакомьтесь с некоторыми образцами работы с целевой страницей Penji.

Пример # 1:

Пример № 2:

Пример № 3:

Пример № 4:

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

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

Прокрутите вниз до категории UX / UI и выберите «Дизайн веб-сайта». Затем заполните детали проекта и предоставьте их как можно больше, чтобы составить четкое описание проекта.Если вы можете предоставить изображения и ссылки для вдохновения, то тем лучше.

Ожидайте получения первого черновика через 24–48 часов. Затем вы можете попросить внести изменения, если вы не на 100 процентов удовлетворены дизайном. Преимущество использования платформы Penji заключается в том, что вы можете указывать и комментировать сам дизайн для внесения изменений.

Когда вы подписываетесь на любой план Penji, вы также можете запросить столько изменений, сколько захотите.В отличие от других дизайнерских услуг, редактирование осуществляется за дополнительную плату. С Penji мы предлагаем вам исправления по НУЛЕВОЙ СТОИМОСТИ.

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

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

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

Ваша целевая страница не должна ходить вокруг да около.В тот момент, когда ваши потенциальные клиенты попадают на него, они должны сразу знать, что вы предлагаете, в первые три секунды. Определите, в чем заключается ваше уникальное торговое предложение (УТП), и кратко объясните его в заголовке. И Моз сделал это в шести словах. Заголовок короткий, приятный и энергичный. В нем объясняются преимущества того, что получают их клиенты при подписке на их услуги.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обновлено 3 декабря 2020 г.

Об авторе

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

Анатомия идеального дизайна целевой страницы | Повысьте конверсию

Повысьте конверсию за счет эффективного дизайна целевой страницы

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

Заголовки, копии и индикаторы доверия

1.Заголовки страниц должны соответствовать тексту объявления

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

2. Четкие и лаконичные заголовки

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

3. Безупречная грамматика

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

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

4. Используйте индикаторы доверия

Для неэффективного способа построения доверия добавьте отзывы, обзоры, упоминания в прессе, гарантийные печати, а также сертификаты доверия и безопасности третьей стороны (Better Business Bureau, VeriSign и т. Д.). Когда компания ACLens, производящая очки и линзы, начала использовать VeriSign, она увидела рост конверсий на 41% и рост дохода на транзакцию на 58%.То же самое может произойти с любой целевой страницей в Интернете.

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

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

5. Используйте сильный призыв к действию

После того, как посетитель прочитает заголовок, очень важно, чтобы он знал, что делать дальше. В случае Mozilla Firefox, когда они изменили свой призыв к действию с «Попробовать Firefox 3» на «Загрузите сейчас — бесплатно», он превзошел исходный призыв к действию на 3.6% и имел уровень достоверности более 99%, что привело к увеличению на 500 загрузок во время теста.

‍

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

6. Кнопки и призыв к действию должны выделяться

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

Размещение и контент

7. Держите его выше складки

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

8. Всегда проводите тестирование

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

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

‍

9. Используйте изображения и видео, относящиеся к копии

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

‍

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

10. Будьте проще со ссылками

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

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

Какие цвета использовать на своих сайтах?

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

Почему я должен включать формы на целевые страницы?

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

‍

‍

Преобразуйте больше лидов с Formstack.

Подпишитесь на 14-дневную БЕСПЛАТНУЮ пробную версию Formstack и начните собирать больше потенциальных клиентов.

‍

Адаптивный дизайн посадочной страницы

Введение

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

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

Мы включили несколько великолепных дизайнов, чтобы вдохновить вас использовать наши практические советы по созданию волшебства с помощью GetResponse Landing Page Creator.

Создание целевых страниц для мобильных устройств

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

В маркетинге целевая страница предназначена для одной конкретной цели.

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

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

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

Что такое задний привод?

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

Кайла Найт, автор журнала Smashing Magazine

Вот некоторые статистические данные из Информационного бюллетеня о мобильных технологиях Pew Research Center:

• 58% взрослых американцев имеют смартфоны.
• 32% взрослых американцев владеют электронными книгами.
• 42% взрослых американцев владеют планшетными компьютерами.

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

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

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

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

Зачем нужны адаптивные целевые страницы?

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

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

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

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

Настольный компьютер против мобильного

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

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

Согласно исследованию 10ZiG, к марту 2017 года мобильный трафик на веб-сайты превзойдет настольный трафик с учетом текущих темпов роста. Как видите, адаптивность — лучшая стратегия на будущее.

Эффект ROPO

Невозможно провести четкую грань между покупками онлайн и офлайн. Согласно недавнему исследованию Forrester, до 88% потребителей изучают информацию в Интернете, прежде чем совершить покупку.Веб-сайты часто служат выставочными залами и источниками информации, но преобразование происходит в автономном режиме.

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

Различия в UX для мобильных и настольных ПК

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

Размер экрана ограничен

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

Проблемный набор текста

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

Пуговицы меньше

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

Изображение загружается медленнее

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

Лучшие практики в дизайне целевой страницы

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

Насколько важна секция ATF?

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

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

• Мощный заголовок
• Вспомогательный подзаголовок
• Пьеро выстрел
• Список преимуществ
• Четкий призыв к действию
• Отзывы клиентов

Где должна быть размещена кнопка CTA?

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

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

Следует использовать длинные или короткие целевые страницы?

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

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

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

Первый мобильный

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

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

Возврат инвестиций

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

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

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

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

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

1. Улучшенное взаимодействие с пользователем
2. Улучшенные показатели конверсии
3. Увеличение продаж
4. Меньшее количество жалоб

GetResponse Landing Page Creator

Вы уже знаете, насколько важна целевая страница для успешной маркетинговой кампании по электронной почте.Вот несколько функций GetResponse Landing Page Creator, которые могут вас заинтересовать:

Адаптивный дизайн

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

Встроенные веб-формы

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

100+ шаблонов

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

Редактор изображений

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

Без кодировки HTML

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

A / B тестирование

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

Полезные напоминания

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

Выбор позиции

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

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

Блочные элементы

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

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

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

Изображения в элементах блока

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

Измерение эффективности с помощью статистики целевых страниц

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

Перейдите в раздел «Управление целевыми страницами» на панели управления, где вы увидите эскизы всех своих целевых страниц. Справа — доступная статистика:

• Подписчики с коэффициентом регистрации

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

• Посетители и уникальные посетители

Эта статистика показывает общее количество посещений вашей целевой страницы и количество уникальных посетителей.

Лукбук целевой страницы

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

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

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

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

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

Открою тебе секрет.

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

Итак, приступим.

Познакомьтесь со своей аудиторией

Исследование рынка — важный шаг в процессе создания целевой страницы.

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

Опросите своих клиентов.

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

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

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

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

Итак, чем это может вам помочь?

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

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

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

Но об этом позже.

Изучите своих конкурентов.

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

• Легко ли понять, что они предлагают?
• Торт купить легко?
• Целевая страница загромождена и сбивает с толку?

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

Будьте умны с копией

А теперь пришло время сформулировать ваше всеобъемлющее сообщение. Как вы хотите выглядеть? Какие обещания вы хотите дать? Какую историю ты хочешь рассказать?

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

Дело не в тебе, дело в них.

Это важно понимать — пользователи Интернета эгоистичны.

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

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

Пишите как человек, а не как в учебнике.

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

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

Разработайте свое ценностное предложение.

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

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

• ‘Ожидайте большего. Плати меньше.’ 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 дает вам возможность легко создавать профессиональный визуальный контент с помощью настраиваемых шаблонов, от графики веб-сайтов и социальных сетей до видеороликов, инфографики и презентаций.

Зарегистрируйте бесплатную учетную запись сегодня и пройдите тест-драйв!

Как создать посадочную страницу: пример использования Balsamiq Cloud | Академия каркасного моделирования

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

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

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

Как мы проектируем

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

Вот как обычно вытряхивает.

1. слов — Соберите информацию и кратко изложите проект в тексте.
2. Эскизы — Начните разработку с эскизов эскизов — абстрактных мини-эскизов страниц, которые выглядят как блоки и завитки. Традиционно это можно сделать ручкой и бумагой, но я использую функцию быстрого рисования в Balsamiq.
3. Каркасы — Реализуйте идеи из наших эскизов, используя диаграммы зон для идентификации элементов. Начните создавать каркас, добавляя больше деталей и исследуя иерархию элементов на экране и описывая функции и поведение.
4. Визуальный дизайн — Начните компоновку дизайна с выделения макета в оттенках серого. Добавьте подробную информацию, укажите положение, вес и размер элементов. Начните итеративно добавлять цвет и уточнять элементы на экране. Я оставляю много времени для частых проверок и повторений на этапах каркасного и визуального проектирования.

Рассмотрим подробнее.

Сначала слова

Начните с текстового описания

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

Проясните свои пользовательские истории

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

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

Проведите инвентаризацию

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

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

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

Просмотрите и подтвердите

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

Эскизы миниатюр

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

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

Идентифицировать элементы

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

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

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

Каркасы

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

Работа снаружи внутрь: организация зон

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

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

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

Работа наизнанку: добавить деталь

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

На рисунке ниже показано, как этот вид с высоты птичьего полета становится более сфокусированным, когда мы увеличиваем масштаб для отображения фактического содержимого. В этом случае я использовал функцию Transform Control (CTRL + T или CMD + T), чтобы преобразовать эти прямоугольники в компоненты из библиотеки и превратить нарисованные объекты Line of Text в настоящий текст.

Когда мы будем готовы к проверке на этом уровне точности, мы вместе с командой проведем пошаговое руководство.

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

Визуальный дизайн

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

Итеративная копия

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

Начните изучать визуальные концепции

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

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

Обзор дизайна

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

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

Итерации

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

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

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

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

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

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

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

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

Drupal Enterprise 7: Редактировать макет целевой страницы (также известной как узел) | IT @ UMN

Следующие инструкции предназначены для веб-сайтов, использующих конфигурацию UMN Drupal Enterprise 7 (DE7) по умолчанию.

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

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

Проезд

1. Щелкните Меню на панели инструментов администратора .
   
   
2. Щелкните Content на панели инструментов Menu .
   
   
3. При желании используйте фильтры в верхней части страницы Content , чтобы найти страницу, которую вы хотите редактировать, введя Заголовок , Тип , Автор , Статус публикации (Да или Нет) , или Словарь и нажав Применить .
   
   
4. Щелкните ссылку заголовка страницы в столбце Заголовок страницы, которую нужно отредактировать.
   
   
5. Щелкните вкладку Настроить отображение .
   
   
6. Щелкните ссылку макет в столбце Операции рядом с Переопределение полной страницы .
   
   
7. Выберите Radix в раскрывающемся меню «Категория».
   
   • Примечание : всегда следует использовать макеты Panopoly. Они работают согласованно со всеми основными современными веб-браузерами и используют адаптивный дизайн.
8. Выберите макет, который вы хотите применить к своей странице.
9. Щелкните Продолжить . Вы увидите предварительный просмотр нового макета с панелями отображения, назначенными областям, связанным с новым макетом.
10. Установите флажок Создать новую ревизию .
    

    Примечание: Этот флажок должен быть установлен автоматически. Если он не отмечен, проверьте его.

11. Нажмите Сохранить . Вы должны увидеть схему регионов и панелей, которые соответствуют новому макету и расположению содержимого, отображаемого в макете.
    
12. Выберите состояние публикации в раскрывающемся меню Выберите действие (обязательно).
    
    • Черновик : в этом состоянии страница остается частной. Вы можете продолжать работать со страницей, не обращая на нее внимания.
    • Требуется проверка : в этом состоянии страница остается частной, но страница помечается как готовая к редактированию.
    • Опубликован : в этом состоянии страница становится общедоступной. Публикация страницы также сделает ее доступной для просмотра в любых меню или автоматических списках (также называемых представлениями), которые могут ссылаться на страницу.
      
13. Введите сообщение, чтобы указать свои изменения в Сообщение журнала для этого поля изменения состояния.
14. Нажмите Сохранить . Вы должны увидеть сообщение о состоянии Настройки обновлены .
15. Щелкните вкладку View , чтобы увидеть новый макет, примененный к странице содержимого.
    • Примечание : если вы выбрали Черновик или Требуется проверка в раскрывающемся списке Изменить состояние , вместо этого щелкните Просмотреть черновик ..

Дополнительная информация