4 этапа создания лендинга в Balsamiq Mockups

Хочешь сделать посадочную страницу своими руками? "Потому что никто не поймет как я хочу!" Хорошо, тогда в этой статье ты узнаешь, как сделать макет landing page всего за один вечер, и научишься максимально доступно объяснять любому дизайнеру свои задумки с первого раза. Для этого понадобится карта персонажей твоей целевой аудитории, программа Balsamiq Mockups и твоя свежая голова. Ну что ж, начнем! Итак, этапы создания макета посадочной страницы:

1. Создание блоков в прототипе макета;
2. Наполнение блоков содержимым;
3. Логическая структуризация блоков;
4. Оформление блоков с учетом юзабилити и эргономики.

Несложно? Совсем! Это как собрать конструктор лего: есть гора с деталями - основные строительные, мелкие добавочные, готовые конструкции, специфичные детальки, подходящие только для какого-то определенного элемента. И у каждой детали есть различные критерии. Так же к любому лего набору прилагался «проспект»-инструкция, демонстрирующая в каком порядке собирать детали, чтобы получить, предположим, виллу у моря. Данная статья - это тот самый «проспект», который поможет структурировать все данные о твоем продукте и после - составить макет посадочной страницы. Эта статья тебе точно поможет, если:

1. Ты считаешь, что никто не создаст твой landing page лучше тебя самого;
2. Но ты плохо разбираешься в софте и программах;
3. А Balsamiq Mockups кажется неуправляемым и диким;
4. И уж тем более ты не хочешь по 3 раза присылать дизайнеру правки и злиться, почему он не видит так, как я хочу.

Я собрала воедино все свои ошибки и типичные ошибки разработчиков посадочных страниц, и теперь делюсь с тобой всей этой инфой. Во время обучения свои первые макеты я создавала по 2-3 дня. А у тебя получится за один вечер. Не трать время впустую, делай всё сразу так, как должно быть. Хватит лирики, переходим к четким действиям.

Шаг 1. Создание блоков в прототипе макета

Программа Balsamiq Mockups (или просто - Бальзамик) мне при первом открытии показалась дикой с огромным множеством инструментов («Какие из них нужны? Как вставить картинку? Как обозначить, что это будет иконка? Где вообще находится эта кнопка со «скругленными» краями?!»). Поэтому первый мой макет состоял из квадратиков и подписей. Потом я мучительно долго объясняла дизайнеру, что где должно находиться и как всё должно смотреться… комшар, одним словом. Теперь учись как надо. Открываешь Balsamiq Mockups, нажимаешь Project - New Mockup, создаешь новый мокап-файл. Перед тобой чистый лист. Поздравляю, ты видишь первый лист своего макета. В прототипе макета должны быть: 1.     Указанная область посадочной страницы Нужна для того, чтобы визуально воспринимать рамки, в которых ты работаешь, как бы создавать себе представление того, что посетитель твоей страницы будет видеть у себя в окошке. Так же эти рамки помогут дизайнеру приобрести более четкое представление об области, в которой он должен работать. Область обозначается при помощи инструмента Browser. *После создания рабочей области посадочной страницы я советую тебе скопировать получившийся мокап-файл в качестве 3х экземпляров (нажимаешь правой кнопкой мышки на мокап-файл и выбираешь функцию «Clone»). 2.     Хэдер с пространственным расположением элементов В хэдере *(верхняя часть страницы) тебе нужно будет указать 4 обязательных элемента: логотип, дескрипт логотипа, триггер-яйцо (содержит самое сильное преимущество компании с цифрах), номер телефона с указанием времени приема звонков. Все элементы оформляются при помощи инструмента Text. *Если твой макет получится «ох какой» длинный, то допускается добавление быстрого меню при помощи инструмента Link Bar; 3.     Первый экран с оффером Выделяй область первого экрана, чтобы видеть на нем перегруженность. Дизайнеру же легче будет оценить количество свободного пространства. Так же пропиши заранее заготовленные шаблоны:

• оффера по выбранной тобой модели («вкусное» прилагательное+товар+от 100 рублей+за 1 день+по москве»);
• подзаголовка или триггеров (характеристики продукта, преобразованные в выгоды потребителя);
• СТА (Получи жирафа на велосипеде) с формой захвата данных (имя, номер телефона, почта и кнопкой «Получить жирафа»)

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

1. Блок-характеристики продукта;
2. Блок-составные части продукта;
3. Блок-гарантии;
4. Блок о достижениях/преимуществах твоей компании;
5. Блок-партнеры;
6. Блок-кейс;
7. СТА (Call-to-action, призыв к действию с формой захвата данных);
8. Блок-преимущества клиента от использования твоего продукта.

Вышеперечисленные блоки создаются при помощи инструментов Text, Image и Icon. Ву а ля! Прототип макета готов.

Шаг 2. Наполнение блоков содержимым

Готовая структура макета перед твоими глазами. Теперь заполняем её информацией. Открываешь карту персонажей целевой аудитории и прописываешь на каждый критерий по 3 «закрытия» (3 характеристики товара, которые бы удовлетворяли вопрос посетителя «почему купить?»). Для этого необходимо описать свойства твоего продукта по нескольким критериям. Критерии – это интересная для твоего покупателя информация, необходимая для совершения покупки (цена, условия доставки, состав продукта, качественные характеристики продукта). Поэтому в карте персонажей целевой аудитории для каждого критерия ты должен дописать хотя бы по 3 свойства продукта, удовлетворяющих данным критериям выбора. После – вся необходимая информация будет у тебя как на ладони. Осталось перенести данные с mind-карты в блоки макета и сформулировать оффер. Считай, макет посадочной страницы почти готов.

Шаг 3. Логическая структуризация блоков

Теперь приступаем к самому противоречивому моменту: к процессу построения логической структуры макета. Тебе необходимо расположить блоки в такой последовательности, чтобы каждый последующий блок являлся логическим продолжением предыдущего или его пояснением. К примеру, по стандарту, второй блок должен демонстрировать товар «лицом», а последующий блок – раскрывать выгоды, которые данный продукт принесет пользователю. Но в некоторых нишах (B2C, где чек достаточно высок, а качество продукта определяется только после того, как покупатель использовал его, например Туризм, Организация праздников, Инфо-бизнес) место третьего блока могут заполнять кейсы с отзывами (как социальное доказательство качества товара), в других нишах (B2B сферы, например Доставка товаров, Аренда офисов) – в третьем блоке может быть Блок-осуществление процесса покупки. Угадать верное (читай: самое эффективное) расположение блоков невозможно, даже если ты выстроишь блоки в соответствие с логической структурой. Но получить более ясную картину поведения посетителя можно при помощи тестирования лендинга или путем анализа данных в Яндекс Метрике/Google Analytics.

Шаг 4. Оформление блоков посадочной страницы с учетом юзабилити и эргономики

И наконец – последний рывок перед тем, чтобы отправить макет дизайнеру. Получившийся проект landing page необходимо «причесать» в соответствие с правилами эргономики и юзабилити (в данной статье ты можешь ознакомиться с ними). На этом этапе тебе надо будет оценить удобство навигации посетителя посадочной страницы по странице. Для этого ты можешь провести простое тестирование: распечатываешь макет и несешь 10 знакомым (В программе есть функция экспорта проекта в PNG-файлы). Смотришь, как они ориентируются, что делают. И в соответствие с результатом вносишь корректировки. Например, объединить несколько блоков в один, повесить быстрое меню или добавить хувер *(верхний слой) на блок с фотографиями (смотреть статью с примерами переструктуризации). Вот теперь ты точно готов отдавать макет на дизайн. Сохраняй проект своего landing page, экспортируй его в PNG-формат и отправляй исполнителю. На все вопросы дизайнера «А как должен выглядеть этот блок?», ты можешь гордо отвечать: «Так, как я указал в макете». И никаких больше правок по 3 раза и траты своих нервов на донесение авторских идей – дизайн ленда будет готов уже через несколько дней.

Заключение:

Итак, в этой статье ты узнал 4 основных этапа создания макета посадочной страницы: 1. Создание блоков в прототипе макета. Можно разделить на 4 основных шага: a)     Указанная область landing page; b)    Хэдер с пространственным расположением элементов; c)     Первый экран с оффером; d)    Блоки с необходимой для посетителя информацией; 2. Наполнение блоков содержимым. Доработка карты персонажей: выписать по 3 свойства продукта, закрывающие критерии покупки для твоего покупателя (цена, условия доставки, состав продукта, качественные характеристики продукта); 3. Логическая структуризация блоков. Расположить блоки в последовательности, где каждый последующий блок является логическим продолжением или пояснением предыдущего блока. 4. Оформление блоков с учетом юзабилити и эргономики. Оформить получившийся макет в соответствие с правилами эргономики и юзабилити. Сократить длину ленда за счет структуризации блоков (примеры реструктуризации тут). Теперь ты полноценный лендостроитель – поздравляю! Можешь приходить работать к нам в агентство) Продуктивного тебе настроения и высоких конверсий!