Лендинг пейдж - создание красивого одностаничника

2 472
- 23 минуты

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

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

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

Лендинг - что это такое простыми словами

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

 

Мы уже отметили, что разработка может вестись несколькими путям. Традиционный, когда в процессе участвуют несколько специалистов (минимум 3-5) и у каждого свои обязанности. И ускоренный с помощью сервисов верстки и конструкторов сайтов. Именно об ускоренном пути разработки мы сегодня и расскажем.

Ускоренный путь разработки

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

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

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

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

Плюсы и минусы использования конструктора

Среди положительных моментов, которые говорят “за” использование конструкторов в web разработке, можно выделить:

  • Все системы дают пробный период (бесплатный) для ознакомления. По времени это от 7 до 30 дней. За это время вы можете начать разработку своего продающего одностраничника.
  • Большинство сервисов предоставляют хостинг (место на дисках, где расположены файлы сайта). Это удобно, если вы торопитесь.
  • Время. Создание лендинга, его наполнение и запуск вполне может пройти за считанные дни - это в десятки раз быстрее и дешевле, чем разработать и запустить лендинг без конструктора.
  • Самые популярные конструкторы имеют обширную библиотеку шаблонов. Вы можете запросто собрать типовой для вашего бизнеса сайт. Это незаменимый инструмент, если вы быстро хотите протестировать нишу. Ведь нет необходимости ждать несколько недель окончания разработки, чтобы понять зайдет тема или нет.
  • Функционал и кастомизация. Сегодня любой сервис вам предоставит обширный набор элементов с возможностью тотальной подстройки под ваше видение идеальной посадочной страницы. Лид-формы, текстовые блоки, слайдеры для фото товаров и отзывов, видео-контент и другое. Все это с возможностью настроить местоположение на странице, тени, толщину линий, шрифт и многое другое.
  • Функция мультилендинга. Эту функцию предоставляют не все конструкторы. Заключается она в том, что сайт не статичен, а изменяется согласно запросам пользователя, чтобы сделать ему наиболее персонализированное предложение.

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

  • Как только закончится ваш тестовый период система потребует оплатить тариф. Причем тариф зависит от тех возможностей, которые вы выбрали. Чем их больше, тем дороже. И, стоит сказать, что стоимость таких сервисов достаточно велика.
  • Другая сторона медали, когда вы все еще не понимаете, подходит ли вам этот сервис, а тестовый тариф не дает возможности добавить на сайт все необходимые элементы и функционал. Хотите полные карт-бланш? Оплатите тариф. Распространена также и ситуация, когда на вашем сайте размещается рекламный баннер. Хотите вы того, или нет. Это характерно для полностью бесплатных конструкторов и некоторых с бесплатным тестовым периодом.
  • Шаблоны. Не важно сколько их. 100 или 1000. Их видел каждый пользователь и, может быть не каждый, но многие их использовали. Поэтому, не стоит ждать от них уникальности. Стоит отметить, что товарный бизнес сплошь и рядом работает на копиях сайтов конкурентов и шаблонных одностраничниках.

    Объяснение такое, что если уже найдена работающая связка (из рекламного объявления, контента и дизайна лендинг пейдж для продажи товаров), то не нужно ничего больше придумывать. Когда “золотой сезон” (период наибольшего спроса) товара исчисляется неделями или днями, то важно запуститься как можно быстрее. В то же время, если вы запускаете какой-нибудь авторский, уникальный проект, то уникализация дизайна - ваш приоритет.
  • Стоит ли считать это недостатком, но даже имея на руках готовые блоки из которых по кирпичикам можно создать свой ресурс, то вам все еще необходимы специальные знания и умения. Разработать продающую структуру, понимать принципы UX, иметь чувство стиля и понимать какой дизайн лучше отработает на целевой аудитории. Даже имея на руках все инструменты лучше заказать разработку лендинга под ключ, если речь идет о сложном продукте и функционале для вашего ресурса.

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

Обзоры на конструкторы

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

Tilda.cc

На сегодняшний день - самый раскрученный сервис. Отличается простым, понятным интерфейсом и приятным дизайном. Для новичков в разработке есть большая подборка обучающих видео и блог, который ведет компания. Из плюсов: многофункциональность и наличие более 100 шаблонов, которые постоянно улучшаются и изменяются. Еще один плюс - 14 дней триального периода. Хватит, чтобы, не спеша протестить функционал сервиса. Есть и минусы: дороговизна сервиса - 9000 рублей за год или 6000 по партнерской скидке. Еще один минус - обязательное расположение логотипа компании внизу страницы.Чтобы убрать его приобретаем платный тариф.

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

Flexbe.ru

“Идеальный сервис для новичков” - так его называют. Его козырь - интуитивно понятные настройки даже для новичка и возможность на старте выбрать какой это будет сайт (одностраничник или многостраничный ресурс). Поговорим о минусах - их много: цена (скромный тариф “Стартовый” обойдется в 13 у.е. в месяц, “Бизнес” - 27 у.е./месяц, “Ультра” - 54 у.е./месяц.) - просто грабеж для малого бизнеса, мало возможностей для SEO - оптимизации и крайне маленькая библиотека шаблонов.

Lpgenerator.ru

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

 

Из минусов стоит отметить, что сервис все-таки ближе к сервисам верстки, чем к конструкторам. Совсем новичкам тут будет туго. Надо уделить время предварительной подготовке. Хотя бы на пару дней обложиться обучающими материалами и изучить основной функционал сервиса. Еще один большой минус - цена. Около 800 рублей в месяц на базовом тарифе (если платить помесячно) и почти 600 при оплате на год. И на “Стартовом” тарифе сильно ограничен функционал и, нонсенс, не по всем вопросам оказывается техническая поддержка.

Elementor

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

  • Информационный ресурс;
  • Сайт-визитку;
  • Продающий товарный лендинг;
  • Небольшой корпоративный сайт;
  • И некоторые другие.

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

 

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

Приобретение готовых лендингов

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

  • Дешевизна. Шаблоны с минимальной адаптацией стоят до 50$. Такой вариант гораздо дешевле, чем заказывать создание landing page с нуля под ключ.
  • Экономия сил и времени. Вы купили шаблон и подогнали его под свой бизнес. Остается запустить рекламу и получать трафик и лиды. Нет необходимости искать исполнителя для работы и контролировать его работу.

Но, есть и минусы такого подхода:

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

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

Подготовительные работы

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

Первое, что нужно сделать при создании сайта - определиться с целью. Если вы создаете Landing Page, то ваша основная цель - продажа в лоб или сбор контактов для прогрева (как альтернативное действие). Целями могут быть также: звонок, посещение офиса, запись на услугу, консультация и другое. Теперь, когда мы знаем цель - время двигаться дальше.

Сбор семантики

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

 

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

 

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

Весь собранный список вы можете прогнать через указанные выше программы, чтобы расширить семантику. Оптимально для лендинга наличие 30-150 ключей в ядре. После окончания сбора исключите мусорные ключи. Какие ключи считать мусорными? Те, которые не соответствуют вашему товару или услуге: вы можете отсечь любителей халявы и тех, кто покупает самое дешевое, убрав из ядра слова “дешево” и “бесплатно”. Если вы не продаете какую-либо продукцию, но она попала к вам в ядро - смело исключайте или начните ее продавать.

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

Выбор домена и хостинга

Обычно этот пункт ставится на первое место в подобных статьях, но мы считаем, что это не верно. Сейчас объясним почему.

Доменное имя - имя вашего сайта в интернете. Это то, что вы видите или набираете в строке поиска (site.ru, к примеру). Выбор доменного имени решает многое. Доменное имя должно быть:

  • Коротким и запоминающимся.
  • Легко читаться при написании латинскими буквами.
  • Содержать в себе значимое ключевое слово. Вот для этого сначала мы собрали ядро, чтобы знать, какой запрос самый значимый. Вернемся к примеру, с постельным бельем. Может быть, что популярным в вашем регионе будет не запрос “постельное белье” а, к примеру, “сатин”. Тогда нужно покупать доменное имя “satin.ru” или с добавлением региона “satin36.ru”.

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

Купить его можно на сайте reg.ru. Цены там часто снижены на 90% (от 199 рублей) и при покупках нескольких доменов сразу предоставляются еще большие скидки. Еще приобрести доменное имя можно сразу у хостеров - так проще и не будет проблем с DNS серверами (если покупаешь доменное имя в одном месте, а хостинг - провайдера выбираешь другого, то могут возникнуть проблемы с подключением - необходимо прописывать вручную адреса серверов для подключения).

Важный момент при выборе доменного имени - выбор доменной зоны. На данный момент регистратор reg ru осуществляет регистрацию в 745 доменных зонах. Их разделяют на:

  • Национальные. Есть у каждой из стран. В России к ним относятся домены .RU, .SU и .РФ, в Беларуси – .BY, в Украине – .UA и так далее.
  • Международные. Их также часто называют общими. К числу таких доменов относятся –. COM, ORG, .NET и другие.
  • Тематические. Здесь располагаются сайты, сгруппированные по своей направленности: финансы (.FINANCE, .MONEY), развлечения (.GAME, .GAMES, .FUN) и так далее.

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

С выбором хостинга все проще - вам нужно, чтобы хостинг - провайдер имел мощные сервера, был как можно дешевле и имел отзывчивую, компетентную техподдержку. Можем порекомендовать хостинг, который соответствует всем этим параметрам - beget.com. Цены начинаются от 1700 рублей за год аренды. Выдается бесплатный SSL - cертификат.

Выбор CMS

Системы управления контентом сайта (Content Management System – CMS) делятся на две большие группы: бесплатные и платные (коробочные). Почти ¾ рынка занимают три системы: WordPress (30,47%), Joomla (25,59%) и 1С-Битрикс (7,83%). Популярность обусловлена удобством и функционалом. Первые две системы отлично подходят для разработки сайта визитки, информационного сайта, портфолио или лендинга. 1С-Битрикс - специфическая CMS. Она используется только крупными заказчиками при наличии большого количества данных, которые надо синхронизировать между собой.

Лендинг пейдж на WordPress

Если вы от кого-то слышали, что WordPress это сложно, то не верьте им. На WordPress работает около 30% сайтов в рунете и если бы это было сложно, то не было бы такой популярности. Процесс установки до безобразия прост. Установите CMS на своем сайте, войдите в панель управления WP. Все - можете приступать к добавлению нужных плагинов и созданию своего ресурса.

Лендосик на Joomla

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

Сайт на 1С-Битрикс

Обычно, стабильные и производительные платформы - “тяжелые”. А значит, что при их работе будут наблюдаться сложности с загрузкой. На деле, при грамотной внутренней оптимизации, присутствии модулей - ускорителей и выборе правильного хостинга система просто “летает”. Эта CMS используется корпоративными клиентами и ценится за безграничные возможности интеграции с любыми сервисами. 1С-Битрикс можно «на лету» интегрировать не только во внутренние сетевые коммуникации, но и под конкретные задачи: для ведения бухгалтерии, управленческого и складского учета – в систему 1С-Предприятие.

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

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

  • Цветовой гамме. Светлый/темный, трехцветный, многоцветный
  • По восприятию – яркий или нейтральный. Для сайтов компаний лучше выбирать нейтральные тона - тут все решает разум. А вот если вы продаете, скажем, зонтики с забавным принтом, то ваш сайт должен быть ярким.
  • Наличие графики. Можно выделить: стандартный стиль, художественный и минималистичный. Блоги лучше всего оформлять в стиле минимализма, если вы продаете необычные вещи (крафтовые), то не пожалейте сил и времени на художественный стиль оформления.
  • Шрифтовое наполнение. Большой/малый кегль, шрифт с засечками или без них.
  • И другое.

 

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

Верстка и наполнение

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

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

Если у вас товарный landing page, то уделите время детальной проработке карточек товаров, информации о доставке и социальным доказательствам (отзывам, которые показывают, что ваш товар покупают и люди довольны покупкой). Тем, кто через одностраничник продает свои услуги необходимо использовать сайт для презентации персональных успехов.

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

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

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

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

Интересна услуга?
Давайте обсудим детали!
Оставьте Ваши контактные данные
и мы перезвоним