Перейти к содержимому
  • Блок 3 - Составление макета (каркаса) лендинга

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

    4 занятий в этой категории

    1. Зачем и как создавать макет лендинга

      12 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/12_%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B0_%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3%D0%B0_%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD.mp4.ded75261e0caa27d3c09f13d1dfe1792.mp4 20 До 30 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-3-sostavlenie-maketa-karkasa-lendinga%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

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

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

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

      1. Большой выбор готовых элементов
      2. Все разбито по модулям
      3. Мощный инструмент работы с иконками

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

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

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

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

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

      1. Логотип
        Если он есть и за него не стыдно. Если он никудышный, то смело от него избавляйтесь. Логотип имеет смысл для продажи только в том случае, если за ним стоит бренд. Его можно заменить дискриптором. Это объяснение того, что будет на лендинге.
         
      2. Номер телефона
        Можно расположить в правом верхнем углу не только телефон. Здесь могут располагаться название города, несколько телефонов, почта и т.п. Главное, чтобы тут была контактная информация.
        Почему это важно? Сразу вспоминайте себя, как ведете в интернете, как смотрите на страницу и т.д. У русского человека, как правило, этот шаблон просмотра выглядит буквой Z. И вы должны соответствовать такой модели.
        То есть, ваша задача быть предсказуемыми и понятными. Не нужно менять контакты и логотип местами. Это фундаментальное правило. Нарушая его, вы рискуете своими продажами.
         
      3. Заголовок
        В него помещаем вашу выгоду. Она должна быть ключевой, которая закрывает ту саму ключевую потребность в формате подробного и объемного предложения. Схема заголовка – выгода + выгода + выгода. Их мы берем именно из своей карты. Вы берете ключевую потребность персонажа и то, что получилось справа, сокращаете до "консистенции" одной выгоды. Такой заголовок будет заинтересовывать клиента, так как он будет написан именно для него.
         
      4. Кнопка
        Кнопка должна быть только одна, яркая и выделяющаяся. Но на данном этапе над цветом и формой думать вам не нужно. Ваша задача – написать текст на кнопку. Существует 2 решения:
         
      • Призыв к действию
        Есть ниши, в которых что-то просить на первом экране неправильно, так как для совершения какого-то действия нужно еще время. Можно не писать "купить", а "изучить больше информации". Это своего рода призыв посмотреть на экран 2.
        Все, конечно же, зависит сильно от ниши и товара. Но если вы дошли до данного этапа, то текущее понимание персонажа высокое, и вы уже знаете, что будете просить у клиента.
      • 0 комментариев
      • 612 просмотров
    2. Проектирование блока с преимуществами

      13 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/13_%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B2%D1%82%D0%BE%D1%80%D0%BE%D0%B3%D0%BE_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0.mp4.78dbab531503975e1338bc301cd985c1.mp4 5 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-3-sostavlenie-maketa-karkasa-lendinga%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Второй блок нашего макета – "Выгоды". Суть этого блока – ответить на вопрос "Что я здесь получу?". Именно здесь должно быть написано то, что клиенту нужно, что его интересует, что он хочет. Далее покупатель листает ниже и думает "А в чем будет моя выгода?". То есть, здесь вы объясняете, что именно получит человек, воспользовавшись вашим предложением.

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

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

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

      В итоге на втором экране вы отвечаете на вопрос "Что получит посетитель после приобретения вашего товара?". То есть, вы описываете его конкретные выгоды и убеждаете покупателя в том, что это именно это ему нужно.

      • 0 комментариев
      • 296 просмотров
    3. Проектирование блока с доказательствами выгод

      14 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/14_%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D1%80%D0%B5%D1%82%D1%8C%D0%B5%D0%B3%D0%BE_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0.mp4.fb97610209e094622295b0ce350ebadd.mp4 6 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-3-sostavlenie-maketa-karkasa-lendinga%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

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

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

      • 0 комментариев
      • 224 просмотра
    4. Советы по проектированию макета

      15 4, 25, 2, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2016_06/15_%D0%A1%D0%BE%D0%B2%D0%B5%D1%82%D1%8B_%D0%BF%D0%BE_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B0_%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3%D0%B0.mp4.584458a48a665610a4ec059cb78c77db.mp4 8 До 10 минут <a href='https://creatura.club/profile/1-evgeniy-zubov/' data-ipsHover data-ipsHover-target='https://creatura.club/profile/1-evgeniy-zubov/?do=hovercard&referrer=https%253A%252F%252Fcreatura.club%252Fcourses%252Frazrabotka-landingov-v-adobe-muse%252Fblok-3-sostavlenie-maketa-karkasa-lendinga%252F' title="Перейти в профиль Евгений Зубов" class="ipsType_break">Евгений Зубов</a> Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      1. Старайтесь прятать формы.
        Не пугайте ими своих клиентов. Единственный случай размещения – если в ней только одно поле, например, для ввода телефона. Во всех других случаях формы лучше делать под кнопками. Если вы будете рано показывать, что вам что-то нужно от человека, то вы можете его спугнуть.
        А вам нужно получить от него информацию именно тогда, когда человек нажмет на кнопку, когда захочет приобрести товар. Чем короче будет форма, тем лучше для конверсии. Можно сначала спросить номер телефона, а потом по телефону спрашивать всю остальную информацию.
         
      2. Откажитесь от счетчиков
        Вы думаете, что это сподвигнет клиента что-то приобрести. Но на 2016 год в большинстве ниш никто не доверяет данным счетчикам, это воспринимается как давление. Но отказываться от ограничения по времени не нужно. Но писать его нужно не в виде счетчика, а в виде обычного текстового блока.
         
      3. Не нужно экспериментировать с блоками
        Старайтесь в лендинге между красотой и понятностью выбирать понятность. Очень малое количество товаров продается по внешнему виду.
         
      4. Не меняйте порядок блоков
        Если нарушите структуру, человек может запутаться и потерять весь смысл. Делайте 1 кран, затем выгоды, затем доказательства, закрытие потребностей.
         
      5.  Переделывайте формулировку выгод и возражений
        Чаще всего имеет смысл немного переделать формулировку данных блоков, когда переносите их из карты на макет. В макете может находиться слишком большой объем текста, который не нужен на лендинге. Вы должны быть на грани подробности описания и объема текста. Лендинг, в первую очередь, создает общее восприятие.
      • 0 комментариев
      • 286 просмотров
×