Веб-дизайн для бизнеса: как принять макет сайта до разработки
Что проверить в дизайне корпоративного сайта: иерархию, смысл первого экрана, мобильные состояния и читаемость реального контента. Сценарий приёмки.
Спасибо! Заявка принята.
Не удалось отправить заявку. Попробуйте позже.
Оглавление статьи · 7 разделов
На презентации макета руководитель видит большую фотографию, знакомый логотип и аккуратные заголовки. Впечатление приятное, но принять бизнес-сайт по этой картинке рано. Нужно проверить, узнаёт ли посетитель свою задачу, понимает ли предложение и может ли сделать следующий шаг на телефоне. Для приёмки возьмите несколько реальных сценариев и контент, который компания действительно разместит.
Выберите задачи, ради которых человек открывает сайт
Для производителя это могут быть проверка характеристик, получение чертежа и запрос расчёта. Для сервисной компании — проверка территории, выбор вида ремонта и запись мастера. Запишите задачи словами посетителей, а не названиями внутренних разделов. Фраза «посмотреть каталог» ещё не говорит, что человек хочет выяснить в каталоге.
Выберите для встречи три пути с разными исходами. Первый — быстрый: клиент знает, что ему нужно. Второй — сравнительный: он выбирает из двух решений. Третий — нештатный: подходящего варианта нет либо исходных данных для расчёта недостаточно. Удачный дизайн помогает завершить и такой путь: например, задаёт осмысленный вопрос вместо бесконечного перехода по похожим страницам.
Посмотрите на первый экран без объяснения дизайнера
Откройте экран человеку, который не видел проект. Через несколько секунд спросите, что предлагает компания, кому и какое действие можно выполнить сейчас. Если в ответ звучит только «какая-то технологичная компания», выясните, чего не видно: конкретной услуги, области применения, территории или следующего шага. Декоративное впечатление не заменяет удобочитаемый смысл.
Сравните важность элементов. Телефон, заголовок, кнопка, баннер и второстепенная акция не должны одновременно требовать одинакового внимания. Для страницы конкретной услуги обычно достаточно одного основного действия и понятного пути к подробностям. Когда кнопка называется «Подробнее», определите, какую информацию человек увидит: примеры работ, расчёт стоимости или условия заказа.
Поставьте в макет настоящий текст
Замените демонстрационный заголовок длинным названием вашей услуги, вставьте реальную таблицу характеристик, подпись под фото и карточку без фотографии. Покажите цену с пояснением, если она зависит от комплектации. На красивом макете с четырьмя одинаковыми названиями может не проявиться то, что в реальном каталоге подписи займут четыре строки и вытеснят кнопку.
Проверьте, кто и как будет поддерживать этот дизайн. Если для каждой новости требуется уникальная композиция, а редактор располагает только телефоном и одним снимком, через месяц раздел будет выглядеть иначе, чем на презентации. Попросите образец обычной записи, длинного материала и пустого состояния. Для сравнения составов работ полезна статья «Создание сайта недорого: как сравнить предложения и проверить смету».
Проведите приёмку с телефона
Проверьте не только уменьшенную главную, но и меню, карточку, таблицу, форму и сообщение после отправки. Выбранный пункт меню должен быть виден, кнопка закрытия — доступна, а форма — сохранять введённое при исправлении одного поля. На кликабельном прототипе это можно оценить как сценарий; фактическую работу нужно будет повторно проверить на готовой реализации.
Возьмите телефон в одну руку. Попробуйте прочитать подпись под фото, найти условия услуги и вернуться из подробностей к сравнению. Если вопрос можно решить только при увеличении страницы пальцами, отметьте его отдельно. Проверьте видимость состояния фокуса и последовательность переходов с клавиатуры на доступном интерактивном образце, а для ещё статичного макета зафиксируйте это как требование к реализации.
Отличите замечание по вкусу от проблемы пользователя
Фраза «хочу кнопку покрупнее» сама по себе не помогает дизайнеру выбрать решение. Запишите наблюдение: «на телефоне участник не заметил кнопку после таблицы и решил, что расчёт недоступен». Теперь можно обсуждать размер, подпись, расположение или сокращение таблицы. Если речь о фирменном цвете, сравните с утверждённой палитрой и проверьте, сохраняется ли читаемость текста на этом фоне.
Разделите замечания по последствиям. Ошибка, которая мешает отправить запрос, важнее спора о форме декоративной плашки. Несоответствие фирменному стилю может быть существенным, но исправление должно учитывать и навигацию, и реальный контент. В журнале замечаний сохраняйте экран, ширину, действие и ожидаемый результат. Тогда следующую версию можно проверять по тем же шагам.
Что должно остаться после встречи
Сохраните утверждённые экраны, версии для разных размеров, правила для длинных текстов и состояния интерактивных элементов. Для спорных мест укажите, кто принимает решение и к какой дате. Результат встречи — список принятых решений, а не общее впечатление «современно». По нему разработчику будет ясно, что переносить в продукт и какие сценарии показать вам при сдаче.
Последнюю проверку сделайте по ключевой странице рекламы: посетитель должен узнать обещание из объявления, понять состав услуги и увидеть рабочий следующий шаг. Такой маршрут отдельно разбирается в статье «Посадочная страница для рекламы: что проверить до запуска трафика». Дизайн можно считать готовым к разработке, когда он выдерживает эти задачи с вашим содержимым, а не только с демонстрационными картинками. Если изменился состав работ, сопоставьте предложения и смету на сайт перед согласованием следующей стадии.
Свобода от рекламной зависимости – за 1 день
ЛидБлог за 1 день превращает сайт в канал привлечения новых клиентов из Яндекс, Google и поиска в нейросетях. Работает без вашего участия
.PDF ФАЙЛ
Выберите способ связи и укажите номер, чтобы получить персональный план привлечения клиентов с помощью нового канала «ЛидБлог» и узнать стоимость внедрения
Вопросы и ответы
Нужен ли отдельный мобильный макет для формы?
Попросите показать как минимум ввод, ошибку и результат отправки на узком экране. Приёмка одной пустой формы не показывает, что произойдёт при исправлении телефона или обязательного поля.
Как проверить макет каталога, если часть фотографий ещё не готова?
Используйте реальные длинные названия и хотя бы один пример без фотографии. Убедитесь, что карточки остаются понятными и кнопки не исчезают из-за разной длины содержания.
Как сформулировать полезное замечание к дизайну?
Укажите экран, задачу, действие и наблюдавшуюся трудность. «Не нашёл условия после таблицы на телефоне» помогает выбрать решение точнее, чем рекомендация «сделать интереснее».