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