Единый стиль сайта и рекламных страниц: что включить в правила для подрядчиков

Сайт и реклама выглядят как одна компания

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

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

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

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

Как выбрать необходимый объём правил

Большой брендбук может не помочь. Дизайнер найдёт в нём историю логотипа, но не узнает, как показать ошибку в форме или оформить акцию на телефоне. Руководство для сайта лучше собрать вокруг работы, которая повторяется у разных исполнителей: рекламных страниц, баннеров, карточек товаров и форм обращения. Для каждого вида нужен образец с настоящим содержанием и объяснение допустимых изменений. Короткий документ рядом с этими образцами полезнее отдельной презентации: устаревшую картинку легче принять за правило, если дата её изменения и действующая версия спрятаны в другом месте.

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

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

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

Заголовки, текст и расстояния

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

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

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

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

Цвет передаёт смысл вместе с текстом

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

В задание на дизайн можно включить отдельные критерии ГОСТ Р 52872-2019. Статус документа указан в карточке Росстандарта, а требования и исключения — в тексте стандарта. Несколько выбранных критериев задают условия приёмки оформления. Полная оценка сайта по стандарту охватывает больше требований.

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

Фотографии и графика поддерживают предложение

Сначала выбирают предмет съёмки. Одинаковая обработка фотографий не объяснит предложение, если снимок оборудования заменён случайной картинкой офиса: по одному оформлению посетитель не узнает, что именно ему предлагают и почему изображение здесь уместно.

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

• Содержание кадра. Видно, какой товар, работу или свойство услуги показывает фотография; декор не выдаётся за изображение предложения.
• Ракурс и свободное место. В образце обозначено, где находится главный предмет и где может появиться надпись.
• Обрезка. Важная деталь у края остаётся видна и в горизонтальном баннере, и в узкой карточке на телефоне.
• Роль графики. Схема объясняет связь или последовательность, а фотография показывает предмет; формат выбран по задаче блока.

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

Яндекс рекомендует заполнять альтернативный текст изображения — атрибут alt. Он помогает понять содержание, если картинка недоступна. В руководстве нужен пример осмысленного описания, связанного с соседним текстом: случайная фотография не станет полезной только от заполненного атрибута.

Кнопки и формы выглядят одинаково в работе

Ошибка не выглядит как успешная отправка. Макет показывает лишь один момент, а посетитель ещё ошибётся в поле, дождётся ответа или столкнётся со сбоем, поэтому правила распространяются и на состояния элементов во время работы.

Образец формы связывает внешний вид с результатом действия. Если заявка не отправилась, сообщение объясняет, как повторить попытку и сохранятся ли введённые данные. Успешное завершение, напротив, сообщает человеку, что обращение принято и повторять отправку не нужно. Состояния узнаваемы на всех рекламных страницах, поэтому подрядчик использует общий образец с подходящим текстом, а не придумывает отдельный язык ошибки для каждой кампании. Название кнопки тоже обещает то, что произойдёт после нажатия: запись на консультацию и покупка могут называться по-разному, но слово «Продолжить» без пояснения следующего шага заставит посетителя гадать.

• Обычное состояние. Название действия понятно до нажатия, а поле объясняет, какую информацию ввести.
• Фокус. Видно, с каким элементом человек сейчас работает.
• Ошибка. Обозначены неверное поле и причина, которую можно исправить.
• Ожидание. Человек понимает, что действие уже выполняется.
• Результат. По тексту сообщения понятно, успешно ли завершилось действие.

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

Как принимать новую страницу

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

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

• Узнаваемость. После перехода из рекламы сохраняются признаки той же компании.
• Типографика. Заголовки и основной текст занимают свои роли; длинные строки помещаются, увеличенный текст остаётся доступным.
• Действия. Главное действие отличается от второстепенных ссылок, а названия обещают фактический результат.
• Изображения. На узком экране видна важная часть фотографии, описание соответствует её содержанию.
• Форма. Ошибка объяснена словами, ожидание и результат отправки понятны.
• Отклонения. Замечание связано с определённым правилом; новое допустимое решение разобрано отдельно.

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

Что передать в следующее задание

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

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

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

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