Как сравнить готовую страницу сайта с согласованным макетом

Основание сравнения: макет и готовая версия

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

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

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

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

Содержание меняет размеры и расположение

Текст в макете и настоящий текст

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

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

Изображение и видимая область

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

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

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

Цвет и шрифт: совпадение и читаемость

Иерархия и контраст текста

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

Для проверки контраста есть измеримый ориентир. Рекомендации WCAG по доступности веб-контента на уровне AA задают обычному тексту минимум 4,5:1. Для крупного текста порог составляет 3:1. Этот показатель рассчитывают по цветам текста и фона; различия оттенков на глаз для оценки недостаточно. Специалист показывает измерение для цветов, которыми текст выводится в браузере.

В пояснении к требованию крупным считается текст от 18 пунктов (pt) или от 14 пунктов при полужирном начертании. Поэтому одно название «заголовок» ещё не выбирает подходящий порог. Размер относится к отображению на странице. Заказчику полезнее получить название проверенного элемента и результат замера, чем общую отметку «цвета правильные».

Управляющие элементы и декоративные линии

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

Для визуальных частей, необходимых, чтобы распознать элемент управления или его состояние, WCAG устанавливает контраст не ниже 3:1 с соседним цветом, однако это требование не делает обязательной рамку вокруг каждой кнопки: узнаваемое содержимое может обозначать сам элемент. Неактивные элементы исключены из этого требования. Дизайнер и разработчик поэтому объясняют, что именно они измерили. Здесь эти критерии помогают обнаружить проблему цвета; полное соответствие сайта требованиям доступности принимают отдельным набором проверок.

Ширина экрана: перестроение и потеря элементов

Другая композиция на узком экране

Ряд карточек может превратиться в столбец. Это нормальное изменение композиции, если посетитель читает те же предложения и добирается до действия.

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

В критерии WCAG о перестроении для вертикально читаемой страницы используется ширина, эквивалентная 320 CSS-пикселям: обычное содержание остаётся доступным без прокрутки в двух направлениях. Для частей, которым необходима двумерная композиция, есть исключение, например для карты или таблицы данных. Исключение относится к этим частям. Оно не объясняет, почему соседнее описание услуги выходит за экран.

Увеличение текста и привычный масштаб

При обычном масштабе сверяют внешний вид. Затем смотрят, сохраняется ли содержание при увеличении текста.

WCAG предусматривает увеличение текста до 200% без потери содержания или функций, за исключением субтитров и изображений текста. Для выбранной страницы это повод посмотреть, не исчезает ли часть названия услуги, не накрывает ли кнопка пояснение и остаётся ли доступен текст формы. Способ масштабирования объясняет специалист. Заказчик фиксирует видимую потерю, а разработчик подбирает исправление. Такой просмотр сохраняет предмет приёмки: оценивают расположение и чтение элементов, а прохождение заявки в учётную систему принимают отдельно.

Состояния элементов: макет и взаимодействие

Наведение, фокус и открытый элемент

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

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

Ошибка ввода и длинное пояснение

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

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

Пакет замечаний для следующей версии страницы

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

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

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

Для следующей версии в задание ШТАБ ИТ на доработку страницы входят утверждённый макет, актуальные материалы, адрес тестовой страницы, перечень расхождений и решения по спорным состояниям. Исполнитель получает основания для исправления, а заказчик — порядок повторного просмотра. Общая приёмка сайта у разработчика включает и другие вопросы; здесь результатом служит принятый внешний вид этой страницы при названном содержании и состояниях. Работу удобно сверять на тестовой версии сайта, где можно показать исправления до их выхода на основную страницу. В итоговом перечне остаются принятые элементы, ещё открытые замечания и изменения, которые заказчик поручил отдельно.