Прототип как фундамент дизайна landing page

ALKsO8FKU E 1 Прототип как фундамент дизайна landing page sajt dizain

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

Как преодолеть эту преграду и максимально сократить задержки по срокам сдачи проекта? Сегодня мы рассмотрим банальный способ ускорить разработку дизайна вашего лендинга.

Истинная цель дизайна

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

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

Пример 1. Недоработанный прототип

%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80 %D0%BD%D0%B5%D0%B4%D0%BE%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%BD%D0%BD%D0%BE%D0%B3%D0%BE %D0%BC%D0%BE%D0%BA%D0%B0%D0%BF%D0%B0 Прототип как фундамент дизайна landing page sajt dizain

Рис.1. Пример недоработанного мокапа (прототипа)

Представляете, если вот такой макет дизайнер отрисует точь-в-точь? А ведь любые его попытки реализовать такое ТЗ будут субъективными, т.е. риск, что вы/клиент не примет дизайн, увеличивается.

Пример 2. Доработанный прототип

%D0%A5%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B9 %D0%BC%D0%BE%D0%BA%D0%B0%D0%BF Прототип как фундамент дизайна landing page sajt dizain

Рис.2. Пример доработанного мокапа (прототипа)

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

1) Размеры рабочей области

Прежде чем приступить к созданию прототипа, вы должны знать, что есть определенные стандарты веб-дизайна посадочной страницы. Так, под контентную область в ширину дается 960px (общая ширина макета — 1920px — такого размера вам предстоит искать фоновые изображения). В высоту стандарта нет, но желательно придерживаться размеров до 700px.

%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D1%8B %D1%80%D0%B0%D0%B1%D0%BE%D1%87%D0%B5%D0%B9 %D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8 Прототип как фундамент дизайна landing page sajt dizain

Рис.3. Размеры рабочей области

2) Оформление элементов первого экрана

Уже на этапе составления ТЗ вы можете примерно представить, какого размера использовать шрифты. Необязательно знать точные размеры, главное — соблюдать пропорции относительно других элементов. Так, самый большой шрифт используется в заголовке первого экрана. Именно поэтому вам нужно заранее использовать не очень длинные заголовки (до 10 слов), т.к. текст может просто не поместиться в блоке. Чуть меньше — шрифт призыва к действию и кнопки, а также основных выгод/подзаголовка. Самый маленький — шрифт дескриптора. Телефон и логотип также должны быть крупными, т.к. логотип отвечает за узнаваемость, а номер — важный элемент следующего шага.

Также исключите эксперименты в вопросе расположения элементов: большинство посетителей привыкли видеть логотип слева или по центру в шапке, а номер телефона – справа. Дескриптор — под логотипом или правее логотипа, не более 4-6 слов. Не нужно отходить от этих правил.

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

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

%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9 %D1%8D%D0%BA%D1%80%D0%B0%D0%BD Прототип как фундамент дизайна landing page sajt dizain

Рис.4. Пример первого экрана в доработанном мокапе

3) Выравнивание текстов и заголовков

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

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

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

4) Расположение текстов и графических элементов в блоке

В последнее время при разработке мокапов мы стараемся размещать текст правее от изображения/видеоролика, если оно напрямую связано с содержанием текста. Большинство людей давно привыкли к журнальной верстке, поэтому текст справа от изображения воспринимается привычнее.

Рассмотрим несколько примеров.

Пример 1. Кейсы

В любом кейсе фотографии и описание выполненных работ — ключевые элементы. Именно они добавляют обычному отзыву реалистичности и демонстрируют вам реальные выполненные работы для реального клиента. Поэтому логичнее расположить изображение вначале (т.е. слева), а уже правее описать его содержание. Ниже — сам отзыв.

%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5 %D0%BA%D0%B5%D0%B9%D1%81%D0%B0 Прототип как фундамент дизайна landing page sajt dizain

Рис.5. Пример оформления кейса на этапе разработки мокапа

Пример 2. Блок с дополнительными выгодами

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

%D0%B4%D0%BE%D0%BF.%D0%B2%D1%8B%D0%B3%D0%BE%D0%B4%D1%8B %D0%B2 %D1%82%D0%B0%D0%B9%D1%81%D0%BA%D0%B8%D1%85 %D0%BC%D0%B0%D1%81%D1%81%D0%B0%D0%B6%D0%B0%D1%85 Прототип как фундамент дизайна landing page sajt dizain

Рис.6. Пример оформления блока с доп.выгодами на этапе разработки мокапа

5) Оставляйте свободное пространство

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

Главное — не переборщить с этим пространством (как в примере недоработанного прототипа).

%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%80%D0%B0%D0%BD%D1%81%D1%82%D0%B2%D0%BE %D0%B2 %D1%82%D0%B7 Прототип как фундамент дизайна landing page sajt dizain

Рис.7. Пример свободного пространства в мокапе

Вывод

Дизайн посадочной страницы — самый трудоемкий этап с точки зрения согласования, т.к. напрямую связан с субъективным «нравится/не нравится». Именно поэтому необходимо делать фундамент еще на этапе создания прототипа. Чтобы ускорить разработку проекта и упростить работу дизайнеру, нужно учесть следующие моменты в своем мокапе:

— Учитывайте размеры контентной области (960px в ширину)
— Соблюдайте пропорции в размерах шрифтов и элементов первого экрана
— Не экспериментируйте с расположением ключевых элементов первого экрана (логотип, номер, дескриптор, заголовок, форма заявки)
— Выравнивайте заголовки по левому краю (в редких случаях допускается по центру), тексты — только по левому краю (кроме триггеров и подписей фотографий)
— В блоках с кейсами и дополнительными выгодами старайтесь располагать тексты правее от графических материалов
— Оставляйте на мокапе достаточно свободного пространства

Источник

Если статья Вам понравилась или была полезной, поделитесь ей с друзьями в социальных сетях:
Читайте также:

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

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