12: Создаем красивый дизайн одностраничника

Зачем нам нужен дизайн?

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

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

Чек лист по дизайну первого экрана

1. Умещается в 700px.

2. Есть дексрипт и телефон для связи.

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

4. Заголовок H1 – Размер шрифта – Большой заголовок

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

5. Подзаголовок.
– Размер шрифта – Средний заголовок

6. Изображение продукта
– Качественное и яркое
– Идентификация
– Результат решения проблемы
– Процесс использования
– Позитивные эмоции

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

Форма 

– Должно быть очевидно понятно, что это форма
– Заголовок формы – даём ценность в обмен на контакт
– Подзаголовок формы (вариативно) – описывает подробнее выгоду и что получит клиент
– Фон формы отличается от фона бекграунда. Если фон бекграунда темный, форма светлая и наоборот
– Поля у формы с закругленными краями и отличаются по цвету от фона формы. Лучше белые
– Если поля сложные, то обязательно пример заполнения или подсказок
– Убираем все ненужные поля. Чем меньше полей, тем больше конверсия.
Кнопка – Содержит CTA. – Контрастная, большая, яркая – Похожа на кнопку

 Пример хороших первых экранов.

Пример первого экрана Landing Page
Пример первого экрана Landing Page
Пример первого экрана одностраничник
Пример первого экрана одностраничник
Пример первого экрана лендинг пейдж

Видео

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

Чек-лист по видео

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

Аудио

Чек-лист по аудио

  • Без шумов, понятно, что говорят (если отзывы или запись звонка)
  • Длительность 1 - 3 минуты
  • Отражает и подтверждает выгоду/особенности продукта
  • Закрывает какое-то возражение (об этом дальше)
  • Само не проигрывается - это пугает
Что сделать?
Зайти в редактор

Проверить первый экран по чек-листу
Улучшить

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

Люди привыкли к интернету, а типографика книг давно установила неписанные правила. Черный текст – белый фон. Это Закон. 

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

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

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

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

Во-первых, это выделит Вас среди остальных.
Во-вторых, сможете отлично выделять важные моменты и CTA. 

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

Что сделать?
Зайти в редактор. 
Проверить отступы и добавить пустое пространство.

Текст

6 правил отличного оформления текста: 

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



Хочу порекомендовать отличный сервис Главред для редактирования написанного текста, повышения своего уровня написания продающих текстов. Там много примеров и очень дельных советов, причем абсолютно бесплатно. 

2 теста для текста:

  • Представьте, что видите эти тексты впервые и ничего не знаете о продукте. Что из них понятно? О чем написано? Что предлагают?
  • Беспощадно убирайте слова, которые можно исключить из ваших формулировок без потери смысла. Обычно можно сократить минимум в 2 - 3 раза.
Пример огромного количества текста и мяса на лендинге, видите, как неудобно воспринимать информацию. И пример, когда выделено самое главное, читать такой лендинг легко и приятно :
Пример правильного оформления Landing Page

Последний блок с изображением, в примере слева картинка с фотобанка и ни ценности ни выгода она не несет. Справа изображение показывает продукт - карточку, которую получите. 

Что сделать?
Зайти в редактор

Проверить тексты и сократить все лишнее
Добавить пустого пространства

Выделение важных мест

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

Примеры правильного и неправильного выделения:
Пример правильной структуры и выделения CTA Landing Page

 

Что сделать?
Зайти в редактор

Проверить фон и выделение цветом важных мест
Исправить недочеты

7 дней тестирования сервиса – бесплатно

За 7 дней можно сделать лендинг, запустить рекламу, получить заявки и продажи.
Или просто протестировать функционал сервиса и бизнес идеи. Далее от 190 руб./мес.
Создать продающий лендинг и начать продажи
Все функции сервиса без ограничений и обязательств