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