Прототип – первый шаг в создании Лендинга

Прототип – первый шаг в создании Лендинга

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

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

Важность дизайна

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

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

Размеры

Веб-дизайнеры определили оптимальные размеры для посадочной страницы. Максимальная ширина страницы не должна превышать 1920 пикселей. Аналогичная ширина должна быть и у фоновых объектов. Для наполнения страницы используется область 960 пикселей. Стандартов по высоте никто не устанавливал, но по умолчанию за пределы 700 пикселей выходить не стоит.

Оформление первой страницы

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

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

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

Варианты выравнивания

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

Но как показывает опыт, такие заголовки не цепляют аудиторию. В них нет эмоций, они ни чем не привлекают. Развернутый заголовок требует уже большего места, но не должен быть больше двух строк. Его логично выровнять по левому краю, собственно, как мы привыкаем читать слева направо. Это же касается и остальных текстовых блоков. Центрировать имеет смысл лишь пометки к картинкам или триггеры.

Порядок размещения текстовых блоков и графики

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

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

Страница должна выглядеть свободной

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

Подводя итоги

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

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

Хотите заказать прототип?

Наш практический опыт в создании лендингов гарантирует Вашему проекту высокие, стабильные результаты в оптимальный срок.

Полезная информация