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