Дизайн сайта: как поставить задачу дизайнеру и принять результат

Как понять, что макет решает задачу

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

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

• Назовите основное действие: «Запросить расчёт монтажа по готовому проекту» точнее, чем «Увеличить конверсию».
• Опишите исходный вопрос посетителя: он сравнивает исполнителей или уже выбирает состав услуги.
• Укажите сведения для решения: состав работ, ограничения, порядок расчёта цены, подтверждения компетенции.
• Определите результат приёмки: человек находит ответ и проходит согласованный сценарий без подсказок автора макета.

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

Задание описывает содержание, а не настроение

По слову «современный» макет не принять. Если в задании названы реальные материалы компании и вопросы покупателя, дизайнер сможет объяснить каждое решение через содержание страницы, а заказчик получит основание для замечаний, которое не зависит от личного вкуса.

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

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

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

Референсы нужны с объяснениями

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

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

• «Нравится, что состав услуги виден до формы» — содержательное замечание.
• «Нужна такая же анимация» — повод уточнить, что она объясняет покупателю.
• «В сравнении пакетов легко увидеть различие» — критерий, который можно применить к своему макету.
• «Здесь мало текста» — неполное требование, пока не названы вопросы, на которые посетитель всё равно получит ответы.

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

Навигация и порядок блоков ведут к решению

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

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

Читаемость можно обсуждать без вкусового спора

Бледный текст теряет смысл. Для измеримого ориентира можно включить в задание критерий WCAG 2.2 о контрасте: обычному тексту требуется отношение не ниже 4,5:1, а для крупного текста предусмотрен порог 3:1, причём исключения и определение крупного текста описаны в стандарте.

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

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

Замечание «сделать ярче» лучше заменить названием элемента и результатом измерения. Тогда дизайнер исправляет конкретную пару цветов. Заказчик получает проверяемое изменение вместо новой версии всего визуального стиля.

Мобильный вариант принимают как отдельный сценарий

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

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

Для нажатий можно принять критерий Target Size (Minimum): базовый размер цели составляет 24 × 24 CSS-пикселя. Стандарт описывает исключения, в том числе достаточное расстояние между небольшими целями. Для основной кнопки обращения удобнее сделать заметную область нажатия, чем опираться на исключение для тесно расположенных элементов.

• Текст и кнопки не обрезаются на узком экране.
• Порядок блоков сохраняет смысл услуги, даже если колонки стали вертикальными.
• Форма остаётся доступной при появлении клавиатуры.
• Меню закрывается понятным действием и не скрывает нужный раздел навсегда.
• Изображение не выталкивает описание и цену за границы экрана.

Передача в разработку включает состояния

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

В стандарте WCAG 2.2 критерий 3.3.1 относится к текстовому определению автоматически обнаруженной ошибки ввода. Для заказчика смысл простой: посетитель понимает, какое поле требует исправления. Красная рамка без пояснения оставляет причину неизвестной. В макете стоит показать не только ошибку, но и путь обратно к нормальной отправке. Так дизайнер передаёт разработчику законченный сценарий, а менеджер компании сможет объяснить посетителю, что произошло.

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

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

Согласованный дизайн можно объяснить словами

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

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

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

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