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