4 Способа Создать Лендинг Пейдж, Одностраничный Сайт [АйТи бубен]

В настоящее время можно наблюдать, как Тильда (+Elementor, Wix и подобные сервисы) уничтожают рынок кастомной разработки лендингов.

И это тот самый случай, когда «плохое быстрое решение» побеждает «хорошее медленное».

Потому что в разработке лендингов есть два классических кейса:

1. Мы точно уверены в услуге, она не будет изменяться еще 2-3 года и мы готовы зафиксировать все решения на этот срок.

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

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

Для исследования рынка или проверки как будет продаваться ваш товар (который вы только планируете закупить) гораздо удобнее за вечер склепать текстовый говно-лендинг, выкатить его в паблик и собрать фидбек про услугу. Чем два дня писать ТЗ\прототипы дизайнеру с разработчиком, платить 1500-2000$, потом месяц ждать результат и еще месяц допиливать все возникшие моменты.

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

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

Что такое лендинг пейдж

Лендинг, лендинг пейдж — это просто одностраничный сайт.

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

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

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

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

Варианты создания лендингов

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

1. Конструкторы лендингов, сайтов, генераторы white-page

• Конструктор сайтов Nethouse популярный российский конструктор сайтов, более 9 лет на рынке, более 1 миллиона регистраций. Предоставляет полный комплекс услуг, связанных с регистрацией домена, созданием, размещением и продвижением сайта. Бесплатный тариф «Старт» позволяет не только оценить работу, но и работать предоставляя страницу с 5 товарами, 20 фотографиями и SSL-сертификатом — бесплатно.

• Блочный конструктор SendPulse, в котором можно сверстать простой сайт абсолютно без знания кода. На готовый лендинг можно добавить сделанных в сервисе SendPulse чат-ботов (Telegram, Facebook Messenger
, WhatsApp и ВКонтакте), с помощью форм — собирать адреса и прочие данные и использовать их для дальнейших рассылок. Мы стремимся создать одно рабочее пространство с множеством нужных бизнесу функций, чтобы вы могли работать в одном сервисе, а не тратить время и деньги на несколько разных. Можно привязать три платежные системы, чтобы принимать деньги от клиентов: ЮMoney, PayPal и Fondy. После этого останется лишь поставить на лендинг кнопку оплаты, выбрать систему и указать название товара и сумму. Лендинги доступны всем клиентам SendPulse,

  включая бесплатные тарифы — простой зарегистрируйся в SendPulse. В SendPulse вам будет доступна базовая аналитика — просмотры и переходы по ссылкам лендинга за неделю, месяц или квартал. Если нужны более подробные цифры, подключите аналитику. Мы предусмотрели возможность подключить «Google Аналитику» и «Яндекс.Метрику» к вашему лендингу. Кроме того, можно установить на лендинг пиксели Facebook и ВКонтакте, чтобы создавать ретаргетинговые кампании в этих соцсетях. Обзор конструктора лендингов SendPulse.

• Сервис LPmotor это конструктор сайтов, лендингов и квизов с полным арсеналом инструментов (CRM-система, воронка продаж, аналитика, корзина, платежная система). Создание сайта и настройка основных функций — бесплатно.

• Marquiz (Марквиз) — конструктор маркетинговых квизов.

Для арбитражников со склонностями:) к клоакингу: Конструкторы сайтов/генераторов white-page с возможностью вставки JS-кода:

1. Strikingly. Для добавления

   HTML-кода жмём слева «Add New Section» — «App Store & HTML» (доступно только для PRO-версии).

2. Bookmark. Вставка кода «Modules» — «Code».

3. Simvoly. Для добавления собственного кода «Add Widget» — «Code».

4. Yola. Добавление собственного кода возможно при покупке подписки.

5. Jimdo. Чтобы добавить собственный код, выбираем нужный блок, нажимаем «Add Element» — «More elements and Add-ons» — «Widget/HTML Element».

6. Hipolink. Вставляем собственный код при помощи блока «HTML блок».

7. Mozello. Добавить собственный код в настройках конструктора.

8. Webnode. Перед публикацией нас попросят подтвердить телефон. Если не хотите палить свой номер, используйте смс-активаторы. Чтобы добавить свой код, нажимаем плюсик, а затем на HTML.

2. Лендинг на WordPress плагинах как альтернатива конструкторам сайтов

Часто в комментариях в блогах и на форумах WordPress называют лучшим конструктором сайтов. Но WordPress вовсе не является конструктором сайтов – это CMS (Content Management System) с открытым кодом. Для обычных пользователей, далеких от HTML

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

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

• Elementor Website Builder бесплатный и премиум плагин от 49 долларов в год.

• Плагин EZP Coming Soon Page позволяет создать лендинг на вордпресс с формой захвата. Плагин совместим с большинством шаблонов WordPress.

• Плагин Coming soon and Maintenance mode позволит легко и быстро c помощью конструктора landing page создать страницу без знаний верстки. Включает множество особенностей, например: настройка множества параметров, редактор CSS3 свойств, SEO оптимизация, позволяет добавлять на страницу meta description, keywords и многое другое. У плагина есть pro версия с расширенным функционалом.

Недостатки WordPress по сравнению с конструктором сайтов:

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

   FTP.

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

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

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

3. Бесплатные шаблоны Landing Page на HTML

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

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

4. Хостинги с конструкторами сайтов

Если, вы не новичек и у вас есть уже какой-то сайт, посмотрите не предоставляет ли ваш хостинг провайдер услугу Конструктор сайтов (Website Builder, Site Builder). Очень часто эта услуга предоставляется бесплатно и выходит намного дешевле, чем платить специализированным сервисам. Ниже список хостинг провайдеров, которые предоставляют услугу конструктора сайтов.

• Новейший конструктор Craftum от ТаймВэб. Создайте уникальный сайт без программирования – соберите из готовых блоков или придумайте дизайн с нуля. 10 дней бесплатно.

• Конструктор от CityHost (СитиХост) предлагает 200 готовых шаблонов, удобная настройка для SEO оптимизации. Онлайн конструктор сайтов уже включен во все тарифы хостинга.

• Лучшие конструкторы сайтов и платформы по разработке сайтов

Конструктор Лендинг Пейдж для бизнеса от 490 руб./мес. – Bloxy.ru

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

Your browser does not support the video tag.

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

Your browser does not support the video tag.

В редакторе вы видите сайт таким, каким он будет в интернете. 4 кнопки для настроек: изменить контент, настроить дизайн, копировать, удалить. Мышкой можно перетащить. Кому нужны эти сложности, если можно делать в удовольствие.

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

Your browser does not support the video tag.

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

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

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

Your browser does not support the video tag.

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

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

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Подробнее

Позвоните мне

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

Отзывы о bloxy на startpack Отзывы о bloxy в vk. ru

Как создать целевую страницу за 5 минут или меньше

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

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

СОДЕРЖАНИЕ

1. Что такое целевая страница?
2. Когда следует использовать целевую страницу?
3. Передовой опыт создания целевых страниц
4. Как сделать бесплатную посадочную страницу (даже если у вас нет сайта)
5. Как создать целевую страницу для WordPress
6. Примеры целевых страниц
7. Инструменты и службы, используемые в этом руководстве

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

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

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

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

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

Когда следует использовать целевую страницу?

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

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

Или, возможно, вы запускали программу в прошлом, но не уверены, когда запустите ее снова. Один из моих лучших (и самых дешевых!) советов по стратегии таков: ВСЕГДА держите список ожидания.

Когда я предлагал индивидуальный дизайн веб-сайта, я всегда вел 6-месячный список клиентов, чтобы мне не приходилось беспокоиться о том, когда появится следующий проект. замените кнопку продаж на форму списка ожидания — вы будете удивлены, СКОЛЬКО людей регистрируется сразу после закрытия корзины — убедитесь, что вы записали эти адреса!

Передовые методы работы с целевыми страницами

1. Целевые страницы должны иметь одну цель — и убедитесь, что вы получили подписку по электронной почте! Держите свое сообщение ясным и не пытайтесь запутать пользователя, предлагая другие вещи на той же странице.
2. Имейте четкий призыв к действию — подписаться на ваш список? Скачать халяву? Записаться на пробную версию вашего продукта или услуги?
3. Сделайте ваши целевые страницы простыми и лаконичными. Удалите всю навигацию в верхнем колонтитуле, блоки нижнего колонтитула или разделы боковой панели, чтобы страница не отвлекалась.
4. Если вы используете изображение на странице, убедитесь, что оно соответствует назначению страницы. И помните — это изображение, скорее всего, будет отображаться при публикации страницы в социальных сетях, поэтому вам нужно убедиться, что оно подходит и привлекает внимание.
5. После того, как ваш пользователь подписался, обязательно отправьте его на страницу благодарности, чтобы вы могли отслеживать отправки в своем аналитическом программном обеспечении (см. видео ниже для получения дополнительной информации об этом).

Как сделать бесплатную посадочную страницу (даже если у вас нет сайта)

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

Хотите бесплатно создать собственную целевую страницу? Подпишитесь на бесплатную пробную версию ConvertKit и сразу начните создавать свои собственные отличные целевые страницы.

Как создать пользовательскую целевую страницу для WordPress

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

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

(примечание: я сделал этот видеоурок некоторое время назад — сайт, показанный в видео, больше не активен, а новейшая версия Beaver Builder выглядит немного по-другому — но принцип работы тот же)

Примеры целевых страниц

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

Как привлечь и удержать премиум-клиентов
Идеи для получения оплаты

Инструменты, используемые в этом руководстве по публикации в блоге

ConvertKit – Простое в использовании программное обеспечение для рассылки новостей
Beaver Builder – плагин, который я использую для создания всех своих пользовательских макетов страниц дизайна в WordPress добавить форму на страницу (вы можете увидеть ее в действии на моей странице халявы).

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

Научитесь дизайну

21 ноя

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

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

Не знаете с чего начать? Мы вас прикрыли! В этом посте мы покажем вам, как создать собственную целевую страницу, выделить ее из толпы и узнать, как ее можно использовать по-разному — и все это в Sketch. Когда вы закончите читать, вам не нужно будет звонить в Хьюстон по поводу каких-либо проблем.

Готовимся к запуску 🚀

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

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

Но в чем разница между веб-сайтом и целевой страницей?

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

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

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

• Герой. Баннер, отделяющий навигацию от остального содержимого страницы. Это первое, что увидят ваши посетители, что делает его лучшим местом для привлечения их внимания и направления их в правильном направлении.
• Ценностное предложение. Заявление, которое информирует о предлагаемом вами продукте и о том, что отличает вас от конкурентов. Вы можете использовать баннер героя, чтобы сослаться на свое ценностное предложение.
• Призыв к действию (CTA). Короткое сообщение, которое побуждает вашу аудиторию к действию — нажать на ваше объявление, загрузить электронную книгу или добавить товар в корзину. Вы можете добавить CTA в свой дизайн в виде ссылок и кнопок.
• Социальное доказательство. Это помогает посетителям доверять вашим услугам, даже если они никогда не встречались с вами и не слышали о вас. Обычно вы увидите это как раздел с отзывами или отзывами от текущих клиентов.

Как создать лендинг в Sketch

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

Есть дизайны, которыми можно похвастаться? В настоящее время мы проводим конкурс #SketchDesignChallenge , посвященный целевым страницам! Загляните в наш Твиттер, чтобы получить шанс выиграть Macbook Air и какой-нибудь подарок от Sketch.

Добавьте шаблон монтажной области и настройте сетку макета

Как обычно, все начинается с монтажной области. Нажмите A , чтобы вызвать инструмент Artboard, и выберите Web > Medium в раскрывающемся меню в Инспекторе. Помните об увеличении высоты монтажной области по мере добавления разделов, но пока это будет работать хорошо!

Далее добавим сетку столбцов, чтобы разделить текст и визуальные элементы. Чтобы определить его, используйте ярлык ⌃ ⌘ L или перейдите к View > Canvas > Настройки макета.

После открытия модального окна «Параметры макета» введите следующие значения:

• Общая ширина: 1200 пикселей
• Смещение: 120 пикселей
• Количество столбцов: 12
• Ширина поля: 24 пикселя
• Ширина столбца: 78 пикселей

Нажмите Подтвердите , и вы должны получить что-то вроде этого:

Эта настройка отлично подходит для создания адаптивного веб-дизайна — и именно ее мы используем для домашней страницы Sketch!

Создайте панель навигации

Нажмите R и щелкните и перетащите, чтобы создать прямоугольник размером 1440×80 пикселей. Вы всегда можете настроить эти значения с помощью элементов управления в Инспекторе. Для нашего дизайна мы зададим навигационной панели белый фон (#FFFFFF). Затем добавьте тень со следующими значениями, чтобы панель навигации выделялась на фоне остальной части целевой страницы:

• Цвет: #000000
• Альфа: 5
• Х: 0
• Д: 10
• Размытие: 20

Хотите работать с более удобными ярлыками? У нас есть список!

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

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

Дизайн

Раздел героев

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

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

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

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

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

Включает СТА

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

Чтобы сделать собственную кнопку CTA, создайте прямоугольник размером 195×52 пикселей и установите стиль угла Rounded и радиус 15. Чтобы сделать его заметным — как мы сделали с панелью навигации — вы можете добавить тень следующим образом. значения:

• Цвет: #000000
• Альфа: 10
• Х: 0
• Д: 20
• Размытие: 40

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

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

Добавьте несколько фактов

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

Давайте начнем с создания прямоугольника 1440×240 пикселей, удаления границы и размещения его прямо под основным разделом. В нашем примере мы придаем прямоугольнику сероватый цвет (#F3F4F5).

Чтобы построить показатели, создайте два текстовых слоя для рисунка (80 пикселей, полужирный) и описания (15 пикселей, обычный). Как только они у вас появятся, введите какую-нибудь копию и разместите слои рядом. Затем выберите их, удерживая ⇧ , и либо сгруппируйте их, используя ⌘ G , либо превратите их в символ, используя ⌘ Y .

Теперь вам нужно продублировать эту группу или символ три раза, используя ⌘ D , и распределить копии по прямоугольнику. Чтобы убедиться, что ваши метрики равномерно распределены, выберите их все и нажмите кнопку Tidy в Инспекторе. Вы также можете отрегулировать расстояние с помощью маркеров Smart Distribute на холсте.

Между Tidy и Smart Distribute неравномерное расстояние вам ничего не даст.

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

Создайте прямоугольник размером 1440×370 пикселей, удалите границу и поместите его прямо под разделом кратких фактов. Для этого мы выбрали белый (#FFFFFF) цвет фона. Затем добавьте текстовый слой, чтобы дать разделу заголовок (35 пикселей, полужирный) — например, «Что говорят наши клиенты».

Давайте воспользуемся прямоугольником 110×110 пикселей в качестве контейнера для изображений аватара. Удалите границу и закруглите углы до 18, чтобы придать ей гладкий вид. Затем щелкните цвет заливки в Инспекторе, чтобы заменить заливку, и выберите пятый вариант вверху. Здесь вы можете перетащить изображение со своего рабочего стола или автоматически заполнить свой аватар, щелкнув значок данных и выбрав Sketch Data > Faces .

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

Хотите более быстрый способ добавления изображений в качестве заливки? Заполните его автоматически, выбрав Данные эскиза > Грани !

Нижний колонтитул похож на нижнюю булочку в гамбургере веб-дизайна. Это отличное место, чтобы предоставить посетителям дополнительные ссылки на ресурсы, такие как информация о продукте, политика конфиденциальности и страницы в социальных сетях. Для этого дизайна нижнего колонтитула мы используем прямоугольник размером 1440 x 265 и задаем ему черный фон (#000000), чтобы помочь сосредоточить внимание на остальной части целевой страницы.