Нет идеального лендинга? Сделай его сам в 4 этапа в Balsamiq Mockups

Создаем landing page самостоятельно

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

Поскольку с вышеупомянутой проблемой сталкивается преимущественное большинство заказчиков лендинга, почему бы не попробовать воплотить свою мысль в жизнь собственными силами? Изучив нижеприведенный материал, можно научиться создавать работающую landing page буквально за один день. Если у вас и не хватит смелости воплотить задуманное в действительность самостоятельно, то хотя бы получится точнее разъяснить личные пожелания и предпочтения создателю лендинга и дизайнеру.

Что необходимо для освоения новой незнакомой информации? Участники целевой аудитории, программка Balsamiq Mockups и готовая к восприятию свежих данных голова.

Для начала стоит отметить, что создание нового макета лендинг пейдж происходит поэтапно:

  1. Разработка качественных блоков в прототипе макета.

  2. Заполнение созданных блоков требуемыми данными.

  3. Блоки структурируются по цепочке и выстраиваются в логическом порядке.

  4. Блоки оформляются, с учетом требований эргономики и юзабилити.

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

Представленный ниже материал подойдет тем, кто:

  • Уверен, что никто лучше его самого не воплотит в жизнь задуманный landing page;

  • При этом в софте и программах он разбирается слабовато;

  • А программа с пугающим названием Balsamiq Mockups кажется не менее устрашающей;

  • Нет желания отправлять дизайнеру замечания по несколько раз в день и еще 2 раза вечером и все равно злиться, что исправленное так и отличаться от первоначальной задумки.

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

Этап № 1 – Разработка блоков в прототипе маркета

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

Открыв Бальзамик, необходимо нажать Project — New Mockup, тем самым мы формируем абсолютно новый мокап-файл. Перед глазами открывается новая область – чистый лист. Это и будет первый этап к творению будущего макета. Первоначальный уровень успешно пройден. Какие составляющие должны быть в прототипе маркета?

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

  2. Хэдер с разрозненным положением всевозможных составляющих. В верхней части страницы необходимо прописать четыре обязательных составляющих:

  • логотип компании;

  • дексрипт;

  • триггер-яйцо, именно оно вмещает в себя наиболее весомую сторону компании, оформленную цифровыми данными;

  • номер контактного телефона, с обязательным указанием времени работы и периода принятия звонков.

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

Быстрое меню. Добавление

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

  • Оффера по модели, выбранной накануне. Стандартная схема выглядит так: цепляющее прилагательное+название вашего продукта+от «минимальной цены»+ за 1 день+ по городу.

  • Подзаголовка или триггеров. Сюда кратко пропишите характеристики своего продукта, насколько они выгодны будущему клиенту.

  • СТА с обязательной формой охвата информации – имени, номера контактного телефона, электронного «ящика» и кнопкой «Получи жирафа».

    Как на этом фото:

Первый экран с оффером

  1. Блоки с ключевыми данными для рядового пользователя. Тут уже дела продвигаются легче. Необходимо создать блоки, прибегнув к помощи таких программ, как: Text, Icon и Image . Какие же они – идеальные блоки? Ответ на этот вечный вопрос напрямую зависит от тех данных, которые необходимы будущему потребителю и всей пользовательской аудитории в целом. Однако на сегодня выведена схема нескольких идеальных блоков, которые в обязательном порядке должны присутствовать на лендинг пейдж:

  • Характеристика товара, продукта или услуги.

  • Составные части вашего товара.

  • Гарантии потребителя.

  • Блок, повествующий о весомых достижениях и неоспоримых преимуществах работы вашей компании.

  • Участники вашего проекта.

  • Блок-кейс.

  • СТА – активный призыв к немедленному действию, с параллельным сбором информации.

  • Описание преимуществ применения именно вашего продукта.

Все эти компоненты легко создать с программками Text, Image и Icon, после чего ваш прототип маркета можно считать успешно завершенным.

Этап № 2 – Наполнение созданных блоков информацией

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

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

  • цена;

  • условия и сроки доставки товара;

  • состав;

  • качественные характеристики.

Именно для этого в схеме действующих лиц для каждого критерия подберите 3 свойства товара, как на фото:

Наполнение критериев выбора целевой аудитории

После этой кропотливой работы, картина раскроется полностью, вся собранная и внесенная информация предстанет в полном объеме. Что нам нужно далее? Переправить все собранные данные с mind-карты и рассредоточить их в готовых блоках маркета. Укомплектовав оффер, мы получаем готовый макет вашей landing page.

Этап № 3 – Логичность в структурировании блоков

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

Невозможно взять и сходу построить информационные ячейки в правильном порядке. Каждый из нас выстраивает свою структуру, опираясь на личные рассуждение и мышление. Получить более детальную картину об эффективности своей работы можно, воспользовавшись анализом необходимой информации при помощи сервисов Яндекс Метрика или Google Analytics.

Этап № 4 – Структурирование блоков лендинга, учитывая законы эргономики и юзабилити

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

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

Отдали? Наблюдайте за их реакцией – как он себя ведут, что делают. Анализируя поведение, вносим коррективы: объединяем или разделяем блоки, располагаем меню быстрого доступа в другом месте, добавляем верхний слой на страницу, корректируем фотоснимки.

После этих правок можно отправлять созданный макет. Сохраните свой landing page в формате PNG и смело можно отсылать дизайнеру. После этого у него уже не возникнет проблем такого характера: «А как же окончательно это должно выглядеть?». Результат – ваш лендинг будет готов в кратчайшие сроки.

Наполнение страницы с учетом юзабилити

Итоги

Формирование макета лендинг пейдж проходит 4 основные ступени:

  1. Создание блоков в прототипе маркета. Делим на 4 этапа:

  • выделенная область лендинга;

  • верхний слой с выстроенным размещением составляющих;

  • основной экран с оффером;

  • блоки с важнейшей информацией.

  1. Заполнение подготовленных блоков данными. Плотная работа со схемой целевой аудитории – выписать 3 качества товара, ценных потенциальным заказчикам (стоимость, ингредиенты, доставка, привлекательность).

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

  3. Корректировка готовых блоков, учитывая требования юзабилити и эргономики.

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

Антон Виноградов

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *