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

От Евгений Зубов

• 22 июня, 2016
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 минут Евгений Зубов display: none; https://creatura.club/uploads/ Средняя сложность display: none;
1. Установите программу Balsamiq
2. Создайте новый документ
3. Спроектируйте первый экран лендинга
4. В задании прикрепите скриншот первого экрана

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

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

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

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

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

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

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

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

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

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

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

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

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