Как сделать лендинг самому — пошаговая инструкция. Как сделать лендинг самому: инструкция от маркетолога

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

Грамотные веб-мастера, зарегистрированные на Юду, предлагают комплексную разработку landing page, в которую входит:

  • создание макета сайта
  • выбор домена, регистрация на хостинге
  • создание уникального торгового предложения (УТП)
  • формирование дизайна всех страниц сайта
  • создание оригинального запоминающегося фавикона
  • подключение Яндекс.Метрики и Google AdWords

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

Исполнители Юду предлагают широкий спектр услуг по созданию и настройке лендинга любой тематики. Стоимость landing page зависит от нескольких факторов:

  • тип верстки (кроссбраузерная или фиксированная)
  • количество страниц сайта
  • необходимость оказания дополнительных услуг (анализ конкурентов, установка Яндекс.Метрики и Google AdWords, регистрация на хостинге)

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

Почему стоит воспользоваться услугами исполнителей Юду?

Специалисты Юду оказывают профессиональные услуги по созданию сайтов всех видов в Москве. У них вы можете заказать под ключ разработку не только landing page, но и:

  • сайтов-визиток
  • многостраничных информационных или новостных проектов
  • корпоративных сайтов
  • блогов
  • интернет-магазинов

Преимущества сотрудничества с веб-мастерами, зарегистрированными на youdo.com:

  • цена на любую из услуг формируется индивидуально
  • работа со всеми видами HTML-верстки (адаптивной, резиновой, фиксированной)
  • разработка интернет-страниц в современных версиях кодов: HTML4 и HTML5
  • создание дизайна сайта любой сложности
  • предоставление услуг поддержки и продвижения лендингов
  • оперативное выполнение работ строго в соответствии с вашими пожеланиями

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

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

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

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

Стоимость лендинговой страницы

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

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

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

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

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

    Техническое задание

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

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

    Дизайн

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

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

    • От 1000 до 3000 - простовато, зачастую не очень профессионально, на мой вкус
    • От 4000 до 8000 - вполне удобоваримое качество, но не всегда стабильное. Большие портфолио, и, думаю, большинство заказчиков останутся довольны результатом.
    • От 9000 до 15000 - часто складывается впечатление слегка завышенной цены, но просматривая портфолио, все таки виден стабильный результат. Эта ценовая категория пользуется популярностью. В основном, лично мне не нравилась стилистика работ. А когда сомневаешься, в таких делах, риск не очень оправдан.
    • Категория 20 и выше - часто зависит от эго дизайнера. Много талантливых художников работает в этой категории - такие сайты впечатляют, но для моей задачи это было лишним. Может быть дополнена проработанным прототипом, что создает впечатление подхода к работе “с головой” и хоть как-то оправдывает дороговизну.
    Сначала мне понравилось портфолио дизайнера, который целился в последнюю категорию. Пообщавшись и немного поторговавшись, он сказал, “могу сделать без изысков”, вдвое снизив цену, но это меня и оттолкнуло. Я побоялся платить за “полуфабрикат” от дорогого дизайнера, который снизошел, чтобы что-то для меня, так и быть, сваять. Пусть лучше это будет полноценная работа с нормальной отдачей за те же деньги от кого-то еще.

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

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

    Верстка

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

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

    Было несколько предложений за 1500-2000 руб, потом несколько за 6000 руб и еще парочка 10000+ руб.

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

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

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

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

    Backend

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

    Я использовал Slim Framework , подключив к нему несколько библиотек:

    • Illuminate Database (он же Eloquent - компонент Laravel) - для работы с базой
    • PHP dotenv - для конфигурации в разных окружениях
    • recaptcha - чтобы защититься от спама
    • PHPMailer - для отправки писем
    Код хранится в репозитории на

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

    Здесь мы рассмотрим вариант бесплатного создания лендинга из html шаблона. Кстати, ваш лендинг будет на 100% адаптивным подо все мобильные устройства. А это сегодня важно.

    Итак, вот пошаговый план самостоятельного создания лендинга:

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

    #1 — Скачиваем бесплатный html шаблон лендинга

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

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

    #2 — Заменяем картинку на главном экране

    Когда скачаете — откройте папку «blue» и внутри вы найдете несколько файлов с расширением html. Кликните два раза на тот, который называется index.html.

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

    Теперь нам надо его отредактировать. И удобнее всего это делать с помощью программы Notepad++ . Скачайте её и установите себе на компьютер.

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

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

    Теперь копируйте это изображение в папку «images». Поменяйте его название на «banner.jpg». То изображение, которое уже называется «banner.jpg» в этой папке, переименуйте во что-нибудь другое.

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

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

    Если все ОК, то переходим к редактированию текста.

    #3 — Редактируем текст на главном экране

    Кликайте правой кнопкой мыши по файлу «index.html» и выбирайте «Открыть с помощью — Notepad++».

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

    И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.

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

    :

    После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:

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

    Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа — прописываем наши конкретные предложения. Например: «Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН — от 5400р. ЕНВД без сотрудников — от 2100р.» Вставляем этот текст вот сюда:

    Теперь меняем текст кнопок таким же образом. Пишем на белой «Заказать», на прозрачной — «Подробнее».

    В итоге у нас получается вот такой главный экран лендинга:

    #4 — Затемняем фоновую картинку

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

    Более светлый называем, например «overlay2.png», а более темный — просто «overlay».

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

    #5 — Заменяем форму подписки

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

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

    То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:

    Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)



    Есть вопросы?

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам: