Мы уже касались вопроса прототипирования сайтов в одной статье, сейчас рассмотрим более детально тонкости создания прототипа конкретно для лендинга.
Прототипы посадочных страниц называются мокапами (mockup с английского “макет”). Сам по себе мокап – это полноценный лендинг, только без дизайна, сама его суть и костяк.
Лендинг имеет определенные цели, достижение которых главным образом зависит от правильной структуры и смысла. Поэтому в этом вопросе дизайн, безусловно, важен, но вторичен. Ведь у тебя могут быть самые красивые в мире обои и мебель, но никакого толку с этого, если в квартиру нет входа.
Этапы подготовки
Наверное, уже стало понятно, что создание прототипа – это не просто разметка схемы от руки. Но теперь станет еще страшнее, ведь стоит узнать и о других важных этапах, без которых приступать к созданию прототипа нельзя. Итак, вот алгоритм действий:
- Изучение компании заказчика и заполнение брифа.
- Анализ конкурентов.
- Определение ЦА и назначения лендинга.
- Выделение и распределение смыслов по категориям.
- Разработка структуры.
- Создание прототипа с текстами.
Первый и второй пункт некоторые специалисты меняют местами. Потому что если сначала изучить конкурентов и нишу, то будет проще задать нужные вопросы клиенту и выделить его главные особенности. Анализ конкурентов обязателен, потому что мы должны как минимум не отставать от рынка, а как максимум переплюнуть существующие предложения.
Смыслы
Главная задача при создании прототипа – обозначить основные смыслы и упаковать их в блоки в правильном порядке. Как найти эти смыслы?
Есть два основных подхода. Первый – использовать рабочие схемы лендингов и подгонять под них информацию о продукте заказчика. Берешь подходящий шаблон, вписываешь предложения, преимущества и призывы к действию – вуаля, страница готова. Но такой метод плох по целому ряду причин, лендинг не будет работать эффективно и станет позором в портфолио.
Второй подход – создание структуры на основе брифа. Ты задаешь клиенту сотню вопросов о его продукте. Желательно сделать это в разговоре, а не давать заполнять письменно, потому что так могут открыться новые грани бизнеса и неочевидные нюансы.
Записать нужно все ответы, даже мелочи. Может быть, именно незначительная деталь окажется ключевой в уникальном торговом предложении или просто станет хорошим дополнением какого-нибудь перечисления.
Из ответов строится карта смыслов – выделяются самые главные мысли, основные отличия от конкурентов, преимущества, возможные СТА. Потом смыслы группируются по схожести, чтобы из каждой группы сделать отдельный блок на лендинге. Именно этот подход позволяет создать действительно уникальный сайт, который будет работать.
Тексты
Нередко мокапы делаются слишком схематично, на них обозначается только расположение блоков с пометками “Текст”, “Заголовок”, “УТП”. Такой результат может быть промежуточным для маркетолога в процессе работы, но не окончательным. Нужно прописать все тексты до малейшей сноски.
Во-первых, тогда будет ясно, как все реально смотрится на странице – количество строк, размеры букв, расположение. Во-вторых – так доносится смысл. Не структурой, а наполнением. Ну и подбор картинок и фонов будет намного проще, когда понятно, что будет уместно в том или ином блоке.
Что можно сказать о самих текстах? Они емкие, броские, короткие. На лендинге не место длинным статьям, заголовки и предложения должны схватываться в одно мгновение. На лендинге хорошо работают всевозможные перечисления с сопровождающими их иконками, инфографика, небольшие описания.
Призыв к действию
Лендинг должен иметь конечную цель, чаще всего это получение контактов пользователя для дальнейшей работы с ним. При любых раскладах нельзя оставлять страницу без СТА и формы заявки – читатель видит продукт, ему нравится предложение, он не против сотрудничать. И что дальше? Не заставляй его искать контакты, сделай сразу кнопку для связи.
Хорошо, когда СТА появляется на первом экране, в конце лендинга и в середине (даже не раз, если лендинг длинный). Очень неплохо, если призыв к действию не обязывает посетителя к оплате или другим рискам – удачными формами будут просьбы оставить заявку, зарегистрироваться для бесплатного скачивания материалов и т.д. Если просить сразу в лоб купить что-то, это пугает и отталкивает, но этот нюанс зависит от ниши.
Нужно ли делать красиво?
В идеале созданием прототипа должен заниматься маркетолог, а не дизайнер. Но непременно нужно иметь понятие об основах дизайна и композиции, чтобы позже дизайнер смог из мокапа сделать сайт.
На этапе прототипирования не стоит слишком много думать о цветах и формах, только оформить их в общий концепт – темный или светлый фон, выделение цветом блоков, если это принципиально для передачи смысла.
Но что касается эстетики, то она важна. Ведь прототип показывается заказчику, это его первое впечатление о работе. Заказчик не до конца понимает, что с дизайном все будет намного лучше – он уже видит наработки. Поэтому в первую очередь смысл, но во вторую – ровные блоки, нормальные отступы, читабельные шрифты и гармоничная композиция.
«Как повысить шансы на утверждение вашей работы» – полезная онлайн-премьера, которая пригодится как при сдаче дизайна, так и при презентации прототипа заказчику.
Чтобы сделать красиво, лучше использовать не Word или (упаси господи) Paint, а специальные программы. В них легко рисовать нужные элементы и ровно их расставлять:
- Moqups;
- Balsamiq;
- Axure;
- Flinto;
- Mockflow;
- Hotgloo.
Можно также использовать Figma или Corel, если ты в них ловко работаешь.
Помни, что для создания прототипа не нужно много – есть бесплатные программы и сервисы. Но для создания качественного прототипа, который впоследствии станет эффективным лендингом, нужно намного больше: знание основ маркетинга, веб-дизайна, копирайтинга. Если интересно, то мы этому научим. Записывайся на онлайн-коучинг «Веб-дизайнер: счастливый билет в Таиланд».
