Правильный дизайн одностраничника. Как сделать продающий сайт?

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

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

1. Заголовок. Длина 8-10 слов. Большой заголовок. 

– Выравнивание текста либо по левому краю, либо по центру экрана

– Превосходная читаемость – черный текст на светлом фоне или белый текст на темном фоне.

– Если фон сложный, делаете чуть прозрачную подложку под текст

2. Изображение продукта на первом экране.

– Качественное и яркое

– Это изображение должно сразу давать понять, что продаем, кому и зачем

– Картинка отражает РЕЗУЛЬТАТ решения проблемы — то есть не нужно помещать на первый экран толстую жопу, лучше поместить постройневшую девушку)

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

– Картинка просто обязана дарить позитивные эмоции, как только человек попадает на страницу.

3. Призыв к действию – CTA.

Обязательно делать призыв к действию на первом экране, потому что иначе человек не оставит заявку (не найдет форму заказа).

4. Форма заявки. 

– Подзаголовок формы (вариативно) – описывает подробнее выгоду и что получит клиент

– Фон формы отличается от фона бекграунда. Если фон бекграунда темный, форма светлая и наоборот

– Поля у формы с закругленными краями и отличаются по цвету от фона формы. Лучше белые

– Если поля сложные, то обязательно пример заполнения или подсказок

– Убираем все ненужные поля. Чем меньше полей, тем больше конверсия.

– Кнопка – Содержит CTA. – Контрастная, большая, яркая – Похожа на кнопку.

5. Видео

Видео отлично работает, если он сделано качественно и профессионально. Если видео сделано под продукт, а не просто так, то конверсию оно гарантированно увеличивает.

• Профессионально сделано
• Длительность 1 – 3 минуты. Идеально 1 минута.
• Отражает и подтверждает выгоду/особенности продукта
• Закрывает какое-то возражение
• Описывать проблему и показывает решение
• Никогда не использовать вместо изображения

6. Фон остальной части

Люди привыкли к интернету, а типографика книг давно установила неписанные правила. Черный текст – белый фон. Это Закон. Часто встречаете книги не белого фона и не черного текста? Не встречаете. Поэтому не пугайте людей. Сделайте для них привычное комфортное состояние.

• Фон всей остальной части сайта, кроме первого экрана, только белый или немного серый.
• Выделяем фоном только очень важные места, а не все подряд.

7. Пустое пространство.

Не нужно делать 5 картинок в одном месте и кучу текста. Дайте пользователю комфорт и пространство. Он все видит, не слепой. Помогите ему дизайном комфортно воспринять информацию, а не перегружайте его. Заботьтесь о пользователе. Пустое место обязательно должно быть. Во-первых, это выделит Вас среди остальных. Во-вторых, сможете отлично выделять важные моменты и CTA.

8. Текст:

• Максимум 2 шрифта на странице
• Шрифты без засечек
• Текст должен всегда комфортно читаться. Без лишних напряжений и быть контрастным к фону, особенно к сложному разноцветному фону
• Абзацы, пункты – сплошной текст всегда плохо. Его никто не читает. Не нужно добавлять чтобы был. Каждое слово должно быть продумано на сайте и не занимать драгоценно место просто так.
• Краткость – важно сокращать текст. Мало кто любит читать длинные тексты, важно дать максимум нужной информации для принятия решения в минимуме текста. Написал тексты, всегда можно сократить.
• Когда создал все тексты, отложи их на сутки или на ночь. С утра обычно они не кажутся такими гениальными. Поэтому это хорошая мотивация сделать их ещё лучше.

С уважением, Александр Федяев