Создание дизайна лендинга: приоритеты и особенности процесса

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

Дизайн лендинг-страницы: что главное?

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

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

Готовы сделать вам сайт прямо сейчас!Обсудить проект

Какими могут быть цели создания лендинга? Вариантов несколько, для каждого из них можно предложить несколько вариантов структуры дизайна. Приведём три группы целей, а затем рассмотрим их с точки зрения дизайна.

1. Повышение продаж. Речь обычно идёт о конкретном продуктовом предложении – товаре, услуге, комплекте («товар + товар» «товар + услуга», «услуга под ключ»), акционном предложении (скидка, бонус при покупке, специальная цена при выполнении целевого действия и т.д.). Данная цель относится к финансовым, она направлена на рост продаж и повышение коммерческой прибыли компании.
2. Сбор маркетинговой информации. В данном случае мы можем собирать контакты целевой аудитории или, например, проводить опрос пользователей, предоставляя им взамен какую-либо потребительскую ценность – скидку, бонус, товар в подарок, пробник товара и т.д. Такое взаимодействие является обычно разовым, однако это зависит от того, какая именно информация и для решения каких задач собирается с помощью лендинга.
3. Регистрация в маркетинговой программе. Страница будет использоваться в целях создания «зацепки» для построения долгосрочного контакта с клиентом. Это может быть лендинг для подписки пользователя на e-mail-рассылку или Telegram-канал, регистрации в бонусной программе с выдачей виртуальной дисконтной или бонусной карты, скачивания мобильного предложения и т.д. Главная особенность – на этом этапе не осуществляется продажа, а пользователя следует замотивировать войти в длительный контакт с компанией.

Дизайн для лендинга, нацеленного на продажи

Главным элементом такого лендинга будет форма заказа товара / услуги или обратного звонка для оформления покупки или записи на оказание услуги по телефону. Следовательно, все составляющие дизайна должны служить тому, чтобы пользователь нажал на кнопку «Заказать» («Купить», «Позвоните мне» и т.д.). В идеале эта кнопка всегда должна быть в зоне видимости посетителя лендинга, независимо от скроллинга страницы.

При этом необходимо продумать, какая информация необходима представителю целевой аудитории для принятия решения о покупке – и представить её на лендинге в максимально удобном и структурированном виде, используя все возможности дизайна для этого.

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

Настроим контекстную рекламу в Яндекс.Директ!Обсудить проект

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

Дизайн для лендинга, нацеленного на сбор информации

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

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

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

Дизайн для лендинга, нацеленного на промоушн

Лендинги, целью которых является совершение первого контакта с представителем целевой аудитории и втягивание его в долгосрочное взаимодействие, пожалуй, самые яркие и живые. Дело в том, что чаще всего промостранички, которые должны стимулировать у пользователя желание подписаться на Вашу рассылку или получить бонусную карту, имеют игровой характер. Пользователь вовлекается в игру, ему обещают какую-то выгоду или подарок – и он охотно выполняет несложное для него действие, чтобы их получить.

Дизайнер может использовать при разработке прототипа промолендинга яркие элементы, анимацию, образы, вызывающие живую реакцию – именно вовлечение пользователя в эмоциональное взаимодействие с лендингом позволит достичь поставленной цели. Высота лендинга при этом может быть любой – как в один полный экран, так и в несколько. Главное, чтобы кнопка, ведущая к выполнению целевого действия, всегда оставалась у пользователя на виду.

Создание дизайна лендинга: этапы

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

1. В какой цветовой гамме должен быть решён дизайн? Если у компании есть корпоративные цвета, то их необходимо использовать при разработке дизайна лендинга. Если их нет или они по какой-то причине неприменимы в данном случае, то главный и дополнительные цвета должны определяться тематикой лендинга, возможно – оформлением товара, который он продвигает и т.д.
2. Какие элементы бренд-бука должны присутствовать в дизайне лендинга? Если у компании есть логотип, фирменный шрифт и другие элементы визуального брендирования, использующиеся при оформлении корпоративных материалов, они должны быть перечислены в ТЗ и прикреплены к нему в виде графических файлов с хорошим разрешением. При этом необходимо особо оговорить возможность внесения изменений в элементы оформления бренда (инверсия, искажение, отражение, отображение в иной цветовой гамме, украшение «по сезону» – снегом, листьями, цветами и т.д.). Это существенно сэкономит время разработки и позволит избежать переделок.
3. Какие смысловые блоки должны получить визуальное отображение в лендинге? Блоковая структура – это, пожалуй, главная отличительная черта большинства лендингов. Именно от этого элемента должен отталкиваться дизайнер при разработки визуального оформления. Блоки должны быть визуально отделимы друг от друга, каждый отвечает на конкретный вопрос, например, о цене, о возрасте целевого потребителя, о цвете товара и т.д. Не стоит создавать излишне много блоков, но те, которые Вы включаете в структуру, не должны совмещать ответы на несколько вопросов. Каждый из блоков может иметь индивидуальное оформление, например, выделяться своим цветом, рамкой, изображением и т.д. Но также приемлемым вариантом является разработка универсального дизайна блока и использование его для всех элементов данного типа.
4. Какие навигационные и интерактивные элементы должны быть включены в структуру лендинга? Кнопки, меню, формы обратной связи, окно онлайн-чата и т.д. – всё это должно быть продумано и проработано визуально. При этом следует учитывать не только цветовую и стилистическую совместимость элементов, но и необходимость акцентирования отдельных элементов на фоне других без нарушения визуальной гармонии.

Настроим сквозную аналитикуОбсудить проект

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

Заказчик выбирает один из вариантов прототипа дизайна лендинга (с пожеланиями по доработкам или без таковых). После этого готовый дизайн передаётся верстальщику для «натягивания» на программную основу лендинга.

Дизайн лендинга создан: что дальше?

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

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

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

• читабельность всех текстовых элементов – от названия компании в шапке лендинга до информационных текстов и контактной информации: они должны быть достаточно контрастными, набранными однозначно прочитываемыми шрифтами, не слишком мелкими и не закрытыми навигационными и иными элементами дизайна;
• визуальная гармоничность сочетания цветов и элементов дизайна – если того не подразумевает общие tone of voice бренда, они не должны быть кричащими, шокирующими, дисгармоничными;
• простота нахождения нужной пользователю информации, она не должна теряться за дизайном, требовать долгого и раздражающего поиска;
• отсутствие «перекосов» дизайна – да, мы помним, что лендинг уже прошёл техническое тестирование, но это не гарантирует того, что какой-то мелкий баг не был упущен.

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

Сколько стоит дизайн лендинга?

Обычно в случае, когда владелец бизнеса принимает решение заказать дизайн лендинга отдельно, у него имеется в штате собственный IT-специалист, который способен сверстать готовый дизайн и внедрить его на веб-страницу, а вот дизайнер как штатная единица – отсутствует. Да, такая ситуация – не самая типичная для российского рынка электронных маркетинговых услуг, но она встречается. Если это – Ваш случай, то Вас наверняка заинтересует, какие на дизайн лендинга сейчас принято назначать цены. Универсальной цены, конечно, не существует – всё зависит от сложности проекта, количества и качества предоставленных заказчиком элементов и т.д. Если Вы спросите, сколько стоит дизайн лендинга без вёрстки, то в 2024 году разные дизайнеры и студии назовут Вам суммы в границах от десяти до двухсот тысяч рублей.

Если Вам требуется дизайн лендинга, стоимость Вы можете узнать прямо сейчас, позвонив в нашу студию Creators Group по телефону указанному на сайте или заказав обратный звонок на нашем сайте. Мы готовы создать для Вас лендинг с нуля или предложить любой из видов услуг, необходимый для разработки посадочной страницы по отдельности – дизайн, вёрстку, копирайтинг.