Заказ дизайна лендинга проще принять, если заранее определить комплект передачи: какую задачу решает страница, какие материалы готовы, что показано в компьютерном и мобильном макетах и какие решения получает разработчик. Тогда обсуждение не заканчивается оценкой одного красивого первого экрана.
Ниже — практический бриф и проверка готового комплекта. Они относятся к дизайну одной страницы. Вёрстка, подключение формы и публикация сайта — отдельные работы. Состав конкретного пакета можно проверить в карточке дизайна лендинга DDRW.
Начните с действия посетителя и готового содержания
Опишите человека, который откроет страницу, и действие, к которому его нужно подготовить. Например, в учебном сценарии компания предлагает обслуживание оборудования: посетитель должен понять состав услуги и отправить заявку на оценку. Это помогает выбрать содержание и форму обращения, но не доказывает, что страница принесёт заданное число заявок.
В брифе нужны ответы, которые можно использовать в макете:
| Вопрос | Что передать дизайнеру |
|---|---|
Какое предложение показываем? | Название, состав, ограничения, условия обращения |
Кто принимает решение? | Роль посетителя, основные вопросы, язык страницы |
Какое действие главное? | Отправить одну форму, связаться или перейти к определённому предложению |
Чем подтверждается предложение? | Реальные работы, фотографии, документы или факты с правом публикации |
Что уже готово? | Логотип, фирменные ориентиры, тексты и изображения |
Кто согласует? | Один ответственный, который собирает обратную связь команды |
Если предложение ещё меняется каждую неделю или тексты существуют только в виде идей, сначала потребуется подготовка содержания. Она влияет на объём работы. Дизайн по готовому бренду не означает разработку логотипа, всей айдентики и полного текста с нуля.
Выбор между одной страницей и несколькими разделами лучше закрыть заранее. Для этого есть отдельный материал о лендинге и многостраничном сайте.
Согласуйте прототип и смысл основных блоков
Прототип показывает порядок информации и путь к действию до подробного визуального оформления. Для каждой секции запишите, на какой вопрос она отвечает. Повторяющиеся слова «качество», «опыт» и «надёжность» ещё не объясняют, зачем нужен отдельный блок.
Условная структура страницы обслуживания оборудования может выглядеть так:
- Предложение и главное действие: что обслуживаем и как запросить оценку.
- Подходящие задачи: какие случаи входят в услугу.
- Состав работы: что команда делает и что требует отдельной оценки.
- Подтверждение опыта: реальные примеры с разрешением на публикацию.
- Порядок обращения: какие сведения нужны и что произойдёт после заявки.
- Ответы на основные вопросы и одна форма связи.
Это учебный пример из шести смысловых блоков, а не обязательная формула. У другого бизнеса доказательства могут находиться раньше, а отдельный FAQ не понадобиться. Важно согласовать, что команда считает основным блоком и какие элементы входят в него. Иначе «добавим ещё одну небольшую секцию» постепенно меняет утверждённую структуру.
До визуальной концепции подтвердите тексты и порядок разделов. Изменение состава предложения после согласования прототипа может потребовать нового проектирования, даже если цвета и шрифты останутся прежними.
Рассматривайте макеты ПК и телефона как одну систему
Мобильная версия показывает, как та же информация работает в других условиях: узкая строка, вертикальная последовательность, управление касанием. Она должна сохранять смысл предложения, подписи полей и главное действие. Простое уменьшение компьютерного изображения этого не объясняет.
В комплекте полезно видеть поведение длинных заголовков, кнопок и реальных текстов. Например, что происходит, если название услуги занимает три строки, фотография имеет другую пропорцию или пользователь увеличивает текст. Запишите правила переноса, максимальную ширину текста и порядок блоков между двумя показанными состояниями. Сами два макета не описывают автоматически каждую промежуточную ширину.
W3C объясняет требование reflow: при изменении доступной ширины содержание должно перестраиваться без потери информации и функций, с оговорёнными исключениями для содержимого, которому необходимы два измерения. Для дизайна это повод проверять чтение и последовательность, а после разработки — фактическое поведение страницы. По статичным макетам нельзя подтвердить доступность готового сайта.
Покажите состояния формы и повторяющихся элементов
Одна кнопка в обычном состоянии не описывает весь сценарий. Для формы согласуйте исходное состояние, фокус поля, ошибку, отправку и подтверждение результата. Укажите, какие данные сохраняются при исправлении ошибки и что пользователь увидит при неудачной отправке. Конкретная серверная обработка относится к реализации и подключению формы.
| Элемент | Что должно быть понятно в передаче |
|---|---|
Поле | Подпись, подсказка, обязательность, фокус и ошибка |
Кнопка | Название действия, состояния, поведение длинной подписи |
Уведомление | Где появляется, о чём сообщает, что делать дальше |
Повторяющаяся карточка | Правила изображения, длины текста и выравнивания |
В рекомендациях W3C по уведомлениям формы подчёркивается понятная обратная связь об успехе и ошибках. Поэтому «красная рамка» без текста не является достаточным описанием сценария для разработчика. Нужны сообщения и их связь с действием.
Для управления с клавиатуры предусмотрите видимое состояние фокуса. Оно помогает человеку понимать, какой элемент сейчас выбран; это объясняется в материале W3C о видимом фокусе. Полноценную проверку клавиатурного управления проводят уже на работающем интерфейсе.
Соберите правки и проверьте комплект передачи
Собранный раунд правок — одна согласованная обратная связь от ответственного человека. В ней удобно указывать элемент, проблему, желаемый смысл и приоритет. «Увеличить название, потому что оно теряется рядом с фото» даёт больше информации, чем «сделать сильнее». Противоречащие друг другу комментарии команды стоит согласовать до передачи дизайнеру.
В пакете DDRW предусмотрены одна визуальная концепция и два раунда таких правок в пределах утверждённой структуры. Новый бренд, дополнительные страницы или полная смена предложения требуют отдельной оценки. Зафиксируйте, какие замечания закрыты, а какие приняты как ограничение либо вынесены за текущий объём.
Перед завершением проверьте, что вы получили редактируемые макеты в согласованном формате, повторяющиеся компоненты, основные размеры и состояния, пояснения и доступные для экспорта элементы. Уточните права на используемые изображения и шрифты. Ссылка с разрешением только на просмотр может быть полезна для согласования, но условия передачи редактируемых исходников должны быть определены отдельно и выполнены.
Отделите принятие дизайна от запуска сайта
Пакет DDRW охватывает одну посадочную страницу до шести основных смысловых блоков на основе готового бренда: согласованный прототип, макеты для компьютера и телефона, основные состояния одной формы, компоненты и пояснения. Его результат — подготовленный комплект дизайна.
Программирование, размещение на хостинге, аналитика и передача заявок не появляются от наличия макета. Их планируют отдельно. После реализации понадобятся проверки страницы на устройствах, ошибок формы и реального получения обращения. Порядок такой проверки разобран в материале о приёмке сайта.
Открыть дизайн лендинга в магазине — посмотреть действующие условия и согласовать исходные материалы. Для первого обсуждения подготовьте заполненный бриф, готовый текст и список того, что ожидаете получить при передаче в разработку.
