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