Вайрфрейм

Чем вайрфрейм отличается от макета?

На этапе вайрфрейма решают, «что и где разместить», а на этапе макета — «как это будет выглядеть». В вайрфрейме только серые блоки и места под текст, а в макете появляются цвета, фото и шрифты.

Этапы разделяют потому, что исправления на них стоят по-разному. Поменять порядок блоков — дело нескольких минут, а если менять порядок после макета, придётся заново подгонять размеры фото и отступы.

Ощущение пустоты при просмотре бесцветного вайрфрейма — это нормально. На этом этапе смотрите только на порядок и размер блоков, а разговор об атмосфере отложите до макета — тогда комментарии получатся гораздо чётче.

Некоторые студии не выделяют этап вайрфрейма. Тогда первый макет выполняет и его роль, поэтому, получив первый макет, проверьте сначала порядок блоков, а не цвета.

Что входит в вайрфрейм?

В вайрфрейм входят список страниц, порядок блоков на каждой странице, места для кнопок и переходы между страницами. Умения рисовать не нужно: достаточно прямоугольников с подписями вроде «Главное фото» или «Прайс-лист».

Для записи или заказа, которые проходят через несколько экранов, полезно нарисовать стрелки между экранами. Такую схему экранов вместе с переходами иногда называют «вайрфлоу» (wireflow).

Места под текст лучше примерно подогнать под реальную длину фраз. Если в место на одну строку попадёт описание на пять строк, на этапе макета расположение снова поплывёт.

Вайрфрейм пригодится даже для одностраничного лендинга. Даже на одной странице порядок блоков сверху вниз — это и есть путь, по которому движется клиент.

• Список страниц: какие страницы и сколько, например главная · о нас · меню · как добраться
• Порядок блоков: что идёт сверху вниз на одной странице
• Кнопки действий: где и сколько раз появляются кнопки звонка · записи · заявки
• Переходы: на какой экран ведёт каждая кнопка
• Мобильная версия: в каком порядке выстраиваются блоки, стоящие на компьютере рядом

Как нарисовать вайрфрейм самостоятельно?

С листом бумаги и ручкой черновик можно сделать за 30 минут. Если порядок уже определён, первая консультация с исполнителем пройдёт гораздо быстрее.

Рисунок не обязан быть аккуратным. Исполнитель смотрит не на умение рисовать, а на то, «что идёт первым» и «что обязательно должно быть». Если удобнее на компьютере, расставьте прямоугольники в программе для презентаций — или просто сфотографируйте рисунок на бумаге.

1. 01Выпишите 5 вопросов, которые клиенты чаще всего задают по телефону или в сообщениях.
2. 02Составьте список страниц с ответами на них. Небольшому заведению часто хватает одной страницы.
3. 03Нарисуйте вытянутый по вертикали прямоугольник размером с экран телефона и заполните его сверху блоками с ответами — в порядке важности.
4. 04Определите последнее действие клиента (запись · звонок · маршрут) и нарисуйте блок с кнопкой.
5. 05Сделайте скриншоты понравившихся сайтов других заведений и подпишите: «здесь хороший порядок блоков».
6. 06Сфотографируйте рисунок, отправьте исполнителю и вместе проверьте, не упущена ли какая-то информация.

Как меняется порядок блоков на первом экране в зависимости от сферы?

Порядок на первом экране определяется не столько сферой, сколько тем, «что клиент хочет узнать первым». Даже у двух салонов он разный, если в один в основном приходят по записи, а в другой — заглядывают мимоходом.

Примеры ниже — лишь отправная точка. На практике меняйте порядок исходя из вопросов, которые вам задают чаще всего.

Если сложно определиться с порядком, неделю записывайте звонки в заведение. Если чаще всего спрашивают «До скольки вы работаете?», поднимите часы работы ближе к первому экрану, а если «Есть ли парковка?» — информацию о парковке.

• Салон: фото фирменных стрижек → мастера → цены на услуги → кнопка записи → адрес · парковка
• Мастерская: фото лучших работ → виды и расписание мастер-классов → стоимость → кнопка заявки → отзывы
• Ресторан: фото фирменных блюд → часы работы · выходные → меню → заявки на банкеты → карта
• Пилатес · йога: фото атмосферы занятий → виды занятий → расписание → запись на пробное → инструкторы

Нужно ли отдельно смотреть вайрфрейм для телефона?

Да, порядок для экрана телефона лучше проверить отдельно. Блоки, стоящие на компьютере слева и справа, на телефоне выстраиваются друг под другом, и то, какой окажется первым, полностью меняет порядок просмотра.

Google сообщает, что при индексации ориентируется в основном на мобильную версию страниц. Поэтому безопаснее с самого начала проектировать так, чтобы важное содержимое не пропадало и не пряталось в мобильной версии.

В вайрфрейме для телефона проверьте, удобно ли нажимать кнопки записи и звонка большим пальцем и не приходится ли слишком долго листать до цен.

Проверьте в вайрфрейме для телефона и границы первого экрана, видимого без прокрутки. В нём должны быть и название, и то, чем вы занимаетесь, — тогда клиент не уйдёт сразу.

Какие ошибки чаще всего совершают на этапе вайрфрейма?

Самая частая ошибка — проскочить вайрфрейм и менять порядок уже в макете. Из-за этого растут и количество правок, и сроки.

Ещё одна — уместить на первый экран всё, что хочется показать. Первый экран нужен, чтобы клиент решил, «туда ли он попал», поэтому чем меньше на нём информации — 3–4 пункта, — тем лучше он читается.

И наоборот, частая ошибка — дробить сайт на слишком много страниц. Если у небольшого заведения информация разбросана по разным страницам, клиент легко уходит, переключаясь между разделами, поэтому часто лучше собрать всё на одной странице и поставить вверху кнопки быстрого перехода.

Что спросить у веб-студии на этапе вайрфрейма?

Если задать эти четыре вопроса до договора или на первой встрече, количество правок и сроки станут понятнее.

• Есть ли отдельный этап вайрфрейма или сразу делается макет
• Входят ли правки на этапе вайрфрейма в общее количество правок
• Покажут ли вам и расположение блоков на телефоне
• Что будет, если поменять порядок после утверждения вайрфрейма