Чек-лист: 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/

0
26 комментариев
Написать комментарий...
Марина Рощупкина

Про шрифты больная тема. Статья огонь

Ответить
Развернуть ветку
Илья Слюсарев

Автор: Использовать много элементов, шрифтов, цветов на лендинге — плохо
Тоже автор: использует овердофига элементов, цветов, шрифтов при оформлении этой статьи ¯\_(ツ)_/¯ 

Г — логика

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Так это, учи других тому, чего не умеешь сам же!

Ответить
Развернуть ветку
Аркадий Иванов

Конечно, за два заголовка h1 в примерах вас камнями закидают некоторые специалисты)
Но вообще статья огонь!

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Упс :) Надеюсь, сеошники читают какие-то другие материалы. Но я имел ввиду здесь приоритет заголовков с точки зрения дизайна, конечно. Спасибо!

Ответить
Развернуть ветку
Чайка О.

Не надейтесь )
"Чек-лист для проверки и улучшения своего сайта" - это сильная приманка.
h1 может быть и больше одного - это смотря как сверстать страницу. А Гугл так вообще говорит, что ему всё равно. Видимо, устал взывать к здравому смыслу.

Ответить
Развернуть ветку
Arthur Kuizn

Со структурой всегда круче 😎

Ответить
Развернуть ветку
Даниил Клинчук
Автор

С какой такой структурой? Которая делается перед созданием сайта?

Ответить
Развернуть ветку
Яков Чайкин

«Описывайте кейсы вместо отзывов» - отличная мысль, только пример нерелевантный. Кому какое дело, что вы 227 котлов установили за год? Это много или мало? И главное, где тут кейс, я ничего не понимаю о вас из этой цифры. 

Про 43 тонны туда же, ну, установили и установили, как говорит Лебедев 

Ответить
Развернуть ветку
Даниил Клинчук
Автор

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

Ответить
Развернуть ветку
Sergio Molotkoni

Годно

Ответить
Развернуть ветку
Kirill WD

Спасибо, по текстам много годноты. Будет полезно и для дизайнера. Часто подправляю копирайт за заказчиками, думаю 100% пригодится. Закинул в notion)

Ответить
Развернуть ветку
Sined Vokuzh

В закладки! 

Ответить
Развернуть ветку
Elena M

Отличная статья. Я бы чуть поправила в пункте 26. Если картинка иллюстрирует важную мысль, то картинку лучше  разместить НАД мыслью. Посетитель сайта обычно смотрит на картинку, а потом читает тексты вокруг. А если внимание прыгает снизу вверх, это раздражает.
Но в целом написано хорошо и очень наглядно :)

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Да, справедливо. Лучше, конечно, отталкиваться от конкретной задачи. Мне кажется, что картинка может идти первой, когда она говорит всё сама по себе, вообще без поддержки текстом. А если всё таки смысл считывается из заголовка, то может и наоборот

Ответить
Развернуть ветку
Jamshidbek Axmedov

Спасибо вам большое. Это было очень интересно и полезно. 

Ответить
Развернуть ветку
Andrey Smirnov

Очень полезно, особенно для начинающих, жду еще статей от автора! 👍🏻

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Спасибо! Скоро будет про поиск и выбор подрядчиков :)

Ответить
Развернуть ветку
Дмитрий Некрасов

Сейчас передам своим подрядчикам, чтоб по вашим пунктам правили наш сайт. Спасибо большое! Где можно ещё с вашими текстами/работами ознакомиться?

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Круто! Пусть всё переделывают :) Можно вот тут примеры работ посмотреть: https://kontora.name/case

Ответить
Развернуть ветку
Константин

Хорошая статья, спасибо. Данил, есть вопрос по шрифтам: сколько всего шрифтов можно использовать в рамках одного лендинга? Не начертаний, а именно шрифтов. Есть ли какая-то норма?

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Лучше до двух. Один для заголовков, а второй для основного текста. При этом для заголовков можно использовать чуть более декоративный. Потому что в больших размерах декоративные могут читаться прилично. Но вообще, всё сильно зависит от умения сочетать шрифты. Если только начинаешь, то лучше использовать один

Ответить
Развернуть ветку
Кемран Асфандеров

Взял несколько мыслей по смыслам себе в применение (пункты 4 и 5) ибо также занимаюсь маркетингом, Даниил - ценную инфу раздаете! Благодарю вас

Ответить
Развернуть ветку
Эдуард Лебедев

спасибо, классный материал

Ответить
Развернуть ветку
Robert Coolige

Друзья, можете, пожалуйста, предоставить ссылки на сайт(-ы) русскоязычный (-ые) где дизайн отличный и текст такого же качества. Честное слово, не встречал еще такие на просторах RuNet

Ответить
Развернуть ветку
Даниил Клинчук
Автор

Так это, не знаю, что в вашем понимании отличное качество. Но вообще сейчас уже много хорошего контента. Грех будет не оставить на себя ссылку: https://kontora.name/case

Ответить
Развернуть ветку
23 комментария
Раскрывать всегда