Дизайн — статьи о сайтах
В продуктовом магазине макет часто рисуют на одном «идеальном» товаре, а в каталоге живут сотни разных: весовые и штучные, акционные, закончившиеся, с длинными названиями и без фото. Правки начинаются, когда сайт наполнили реальными данными. Ниже описано, как построить согласование, чтобы такие сюрпризы нашлись до вёрстки.
Что именно вы согласуете: структуру, данные или оформление
Разделите согласование на три шага и идите по порядку. Сначала структура: какие блоки есть на странице и в каком порядке. Затем состав данных: какие поля есть у товара и откуда они берутся. И только потом визуальное оформление. Если обсуждать шрифты и цвета, пока не решено, показывать ли цену за килограмм, правки будут ходить по кругу: изменится поле, и поплывёт весь блок.
Какие товары должны попасть в макет
Попросите дизайнера собрать страницу не на одном образце, а на наборе «неудобных» случаев. Минимум такой:
- штучный товар с названием в 80–90 символов;
- весовой товар с шагом, например 100 г, и ценой за килограмм;
- товар по акции со старой и новой ценой;
- товар, которого нет в наличии;
- товар без фотографии;
- товар с несколькими вариантами фасовки.
Если такие случаи есть в вашем ассортименте, они обязательно встретятся на сайте. Дешевле увидеть их на макете, чем править готовый шаблон.
Условный пример: карточка товара в каталоге
Возьмём вымышленную карточку «Сыр полутвёрдый, нарезка, 150 г». На макете она выглядит аккуратно: фото, название в две строки, цена, кнопка «В корзину». Теперь задайте вопросы:
- Что будет, если название займёт четыре строки: обрежется с многоточием или сдвинет кнопку вниз?
- Где показана цена за килограмм, если покупатель сравнивает разные упаковки?
- Как выглядит карточка со скидкой: старая цена зачёркнута, процент указан или нет?
- Чем заменяется кнопка «В корзину», когда товар закончился: «Сообщить о поступлении», блок похожих товаров или просто серая надпись?
- Как выбирается количество весового товара: счётчик «− 1 +» с шагом 100 г или поле для ввода?
Каждый ответ должен быть нарисован на макете, а не оставлен «на усмотрение разработчика». Тогда у вас и у исполнителя одинаковое понимание, и спорить позже не придётся.
Мобильная версия: рисуем сразу, а не «потом адаптируем»
Корзину нередко собирают с телефона, в очереди или по дороге домой. Поэтому согласуйте экран шириной около 360 пикселей так же внимательно, как десктоп. Проверьте, помещаются ли в карточку цена и счётчик, не перекрывает ли закреплённая панель корзины кнопки, видны ли сумма заказа и порог бесплатной доставки, если он у вас есть. Фильтры в каталоге на узком экране лучше показать отдельным открывающимся окном и нарисовать оба состояния.
Как организовать круги правок, чтобы они заканчивались
- Назначьте одного человека с правом последнего слова. Замечания от склада, курьеров и оператора заказов он собирает в один список до встречи.
- Разделяйте правки на два типа: «в макете ошибка» и «появилось новое требование». Вторые обсуждаются отдельно, с оценкой сроков и стоимости.
- Проверяйте макет на реальных данных: возьмите 20–30 позиций из вашей товарной выгрузки и сверьте названия, единицы измерения и наличие фото.
- Фиксируйте согласие письменно по каждой странице и каждому состоянию, а не фразой «в целом нормально».
Проверочный список перед подписью
- Показаны штучный и весовой товары, акция, отсутствие в наличии, отсутствие фото.
- Длинное название не ломает карточку.
- Понятно, откуда берётся каждое поле: из учётной системы, вручную или из файла поставщика.
- Нарисованы мобильная версия и состояния кнопок.
- Указано, что видит покупатель, когда заказ не набирает минимальную сумму.
- Есть место для информации о составе и сроке годности, если вы её публикуете; за точность этих данных отвечает ваша команда.
- Список замечаний собран у одного ответственного и закрыт.
Если все пункты отмечены, макет можно передавать в вёрстку: риск, что придётся переделывать готовые шаблоны, будет заметно ниже.
