Чек-лист: 29 пунктов для проверки и улучшения своего сайта. Текст + дизайн

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

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

№1
Заголовок на первом экране соответствует ключевому запросу или проблеме, с которыми приходит посетитель. В голове посетителя должен сформироваться ответ «да, мне здесь помогут». Например, вы делаете курс, на котором учите создавать собственный бренд. В таком случае результат для человека — созданный бренд, поэтому:

№2
Используйте меньше оценок и больше фактов. Оценка — это то, что человек должен понять из фактов, которые прочитал. Он должен сам сделать выводы. Например:

№3
Заголовки должны содержать ответы на ключевые вопросы посетителя. Люди листают сайт быстро и могут не прочитать ничего, кроме заголовков. Поэтому задача заголовка — заинтересовать. К примеру, вы страховой брокер, и люди думают, что у вас они заплатят больше, чем в страховой:

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

№5
Описывайте кейсы вместо отзывов. Сами по себе отзывы не информативны, поэтому лучше показать, какая задача была у человека и как именно её помогли решить.

№6
Текст должен отличать вас от конкурентов. Если все говорят про скорость, сделайте помимо этого акцент ещё и на качество. При этом, лучше смотреть на тех конкурентов, с которыми вы находитесь в одних источниках трафика.

№7
Нужно подкреплять текст смысловыми иллюстрациями. Если рассказываете о том, какие крутые и подробные планировки делаете — покажите пример реальной планировки и укажите, какие детали в ней важны.

№8
Говорите не о себе, а о клиенте. О том, как вы решаете его задачи. Клиенту не важно, какие вы хорошие. Ему важно только то, поможете вы ему или нет.

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

№10
Формы сбора контактов должны доносить результат конкретно и полезно, чтобы человек понимал, зачем ему их оставлять. Желательно давать сразу что-то, через что человек поймёт, что вы крутые: бесплатную консультацию, пробный период.

№11
Не делайте длинные формы захвата. Чем больше полей, тем менее охотно их заполняют. Собирайте только те данные, которые вам нужны для продажи.

№12
Описывайте путь. Часто, человек не до конца понимает суть процесса. Расскажите ему, что произойдёт после первого касания, чего ему нужно ожидать и к чему готовиться.

№13
Вовлекайте, а не продавайте. Если клиент вас не знает и у вас не супер-дешёвый продукт не пытайтесь закрыть на какое-то действие на первом экране. Вовлекайте — дайте ссылку на какой-то конверсионный блок, который вызовет доверие. Например, если вы продаёте курс за 50 000 ₽:

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

№15
Максимум 3-4 размеров шрифта: заголовок Н1, подзаголовок, описание и 1 размер для прочих не основных элементов.

№16
Единообразные толщины у шрифтов. Если первый заголовок жирный, то все остальные заголовки на странице тоже должны быть жирными.

№17
Единая стилистика иконок и иллюстраций: один набор с похожими персонажами/деталями, цвета и толщины линий.

№18
Одинаковые отступы между элементами: заголовок и подзаголовок; между блоками; сверху и снизу внутри плашек. Отступы между смысловыми блоками должны быть больше отступов внутри самих блоков, чтобы визуально были очевидны переходы между блоками.

№19
Используйте сетки и вертикальные направляющие: весь важный контент должен быть выровнен по трём-четырём силовым линиям. Силовые линии — это вертикальные линии, которые направляют весь контент.

№20
Самый яркий цвет используйте для конверсионных кнопок и блоков. Всего на странице не больше 5 цветов: для шрифта, для основного фона, для подложек, для акцента и для второстепенного акцента.

№21
Не используйте стоковые картинки, их все сразу отличают, доверие падает. Лучше свои собственные, но не сильно хорошего качества, чем «счастливых людей» со стоков. Используйте фотографии с сайта unsplash, там много ещё не заезженных бесплатных картинок.

№22
Анимация ради анимации не нужна. Задача анимации — акцентировать внимание на элементы, а не украшать. Добавляйте её только на те элементы, которые человек точно должен увидеть.

№23
Элементы ради элементов не нужны. Лучше сконцентрировать внимание на заголовке, чем на какой-то красивой бессмысленной штучке. Дополнительный декор может быть полезен либо для отстройки от конкурентов, либо когда нужно произвести впечатление, а не продать.

№24
Посмотрите конкурентов, придумайте, как зацепить взгляд, чтобы выделиться среди них не только текстом: цвет, композиция, видео. Если для ниши принято использовать синий — найдите оттенок синего, который будет выделяться или рискните использовать фиолетовый.

№25
Не используйте креатив, чтобы удивить. Пусть привычные элементы будут в привычных местах, как у всех. Потому что там их и ищет человек. Например: логотип слева вверху, телефон справа вверху.

№26
Аккуратно используйте фоновые подложки. Обычно, на них либо плохо читается текст, либо не видно сам фон. Лучше вынести важный визуал отдельно от текста — не экономьте место.

№27
Сделайте кнопки, реагирующими на наведение. Чтобы было интуитивно понятно, что она работает и что-то произойдёт. Можно чуть изменять оттенок, добавлять анимацию или инвертировать цвет.

№28
Не делайте строки слишком длинными — их тяжело читать. Постарайтесь уместить длину в 80 символов. А чем длиннее строки, тем больше должно быть расстояние между ними. Если текст больше 2 строк выровнен по левому краю, особенно в длинных строках.

№29
Не используйте красивые и сложно читаемые шрифты. Главное, чтобы было легко читать, а эстетика на втором плане.

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

Если сайта у вас ещё нет, и вы хотите сделать его с нуля, то мы можем разработать подробную смысловую структуру будущего сайта за 10.000₽. Проанализируем ваши бизнес-процессы, основных конкурентов, аудиторию и создадим поблочный план сайта, который покажет, как именно мы убедим ваших посетителей оставить заявку. Читайте подробнее и оставляйте заявку у нас на сайте →https://www.kontora.name/