Идеальный Landing Page. Создаем продающие веб-страницы

Обратите внимание на отдельный бэкграунд для первого экрана и отдельный бэкграунд для отзывов. Отзывы четко обособлены, в их оформлении применяется много разных «фишек»: кавычки, оформление прямой речи.

Но самое главное – выделение смысловых групп элементов: первого экрана и отзывов.

Оформление текста

В медийном пространстве существуют свои правила оформления текста.

В техническом оформлении не рекомендуется красный шрифт.

Не следует также выделять текст с помощью Caps Lock – это воспринимается как крик на посетителя.

Человек легче воспринимает короткие строки. Чем короче строка, тем с большей охотой человек будет читать текст. Именно поэтому в газетах делают колонки.

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

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

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

Размер от 12 до 18 px. Размер шрифта на сайте должен быть не менее 12 пикселов.

Читать текст с экрана труднее, чем с бумаги. К тому же у многих пользователей плохое зрение и получается, им нужно идти за очками, чтобы разобрать рекламный текст. Тут уже не до покупки. Любые сложности и неудобства ведут к потере клиентов.

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

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

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

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

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

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

На картинке представлены страницы сайтов для сравнения (рис. 5.9). Есть страница с более мелкими шрифтами и более крупными.

Какой проще воспринимается? Естественно, левая страница воспринимается проще, чем правая.

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

Для ссылки применяется уникальный цвет: если посмотреть на картинку, можно точно сказать, что ссылка находится на второй строке текста, потому что она подчеркнута и выделена цветом.

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

Рис. 5.9. Структура страниц сайтов для сравнения

Но клиента этим простым объяснением не взять. Он очень быстро отличит грамотный текст от текста с ошибками. А для пользователя ошибки в лендинге – это «триггер» недоверия.

Если у вас хорошая грамотность, то доверие пользователя – ваше. Старайтесь избегать «ляпов» и в мелочах. Например, русские кавычки – это кавычки «лапки» или «елочки». Не используйте две «верхние» кавычки «…». Это признак дурного тона.

Применяйте, где необходимо, тире, а не дефис.

Используйте маркированные списки-буллиты.

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

Первый экран

Перечислим основные элементы первого экрана: логотип, дескриптор, заголовок (выгода), подзаголовок (дополнительная выгода), кнопка действия или форма заказа.

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

Рассмотрим подробно, как создаются все элементы.

Заголовок