Прототипирование — неотъемлемая часть процесс создания сложного сайта. Создание прототипов дает возможность проверить идеи, изложенные в концепции или ТЗ, без затрат на написание кода.
На какие этапы делится прототипирование? В чем разница между вайрфреймом, мокапом и макетом? В каких приложениях их создают и сколько времени это занимает? Рассказываем обо всем по порядку.
Стадии прототипирования
Слова “прототип”, “макет”, “каркас” часто используются как синонимы. Однако разница между этими терминами все же есть. Они соответствуют различным стадиям прототипирования. С каждым последующим этапом возрастает уровень точности и детализации. Если каркас напоминает будущий сайт лишь отдаленно, то прототип сайта практически полностью имитирует его внешний вид.
Таким образом, прототипирование состоит из четырех фаз:
- Эскиз (скетч) — это схематический набросок низкой точности. Удобен для моментального тестирования идей. Рисуется от руки на бумаге, а также на доске во время брейншторм-сессий.
- Каркас (вайрфрейм) — схема интернет-страницы низкого уровня детализации. Передает структуру страницы, расположение важных элементов. Цель разработки каркаса — смоделировать основу пользовательского интерфейса.
- Макет (мокап) — статичный прототип средней или высокой детализации. В нем уже есть все составляющие визуального дизайна: цветовая схема, образцы шрифтов, баннеры, логотипы.
- Интерактивный прототип — максимально приближен к готовому сайту (исключая серверную часть). Для него характерны высокая точность и наличие динамических элементов, реагирующих на клики мышки. Также возможна прорисовка анимаций. Интерактивный прототип сайта — это тестовая модель будущего веб-приложения. С помощью него можно проводить пользовательское тестирования до этапа программирования.
Инструменты создания вайрфреймов, мокапов и прототипов сайта
Процесс разработки прототипа претерпел радикальные изменения за последние десять лет. Ранее безальтернативным средством создания макетов был Photoshop. Сейчас его позиции несколько потеснили программы, специализирующиеся на пользовательском интерфейсе (UI) и опыте (UX).
Список инструментов прототипирования популярных в 2020 году выглядит так:
- Miro,
- Wireframe.cc,
- Moqups,
- Adobe Xd,
- Fluid UI,
- UXPin,
- Balsamiq Mockups,
- Axure RP,
- Photoshop (да, он все еще сохраняет существенную долю на рынке веб-дизайна).
Также не стоит списывать со счетов старые-добрые карандаш и бумагу. Многие дизайнеры предпочитают именно этот способ для создания набросков и генерирования идей.
Для каких проектов нужно создавать прототип
Создание прототипа уместно для веб-проектов любой тематики и уровня сложности. Кроме, пожалуй, самой бюджетной категории ($100—1000).
Прототипирование открывает широкие возможности при минимальных вложениях:
- Обнаружение проблем интерфейса на ранней стадии.
- Проработку нескольких вариантов визуального стиля и UI.
- Дизайнеры могут получать обратную связь от остальных членов команды.
- Их используются для презентации проекта стейкхолдерам.
- Проведение юзабилити тестирования еще до фактической разработки.
- Утвержденный прототип позволяет эффективно распределить задачи в команде.
В итоге, инвестиция в прототипирование сокращает общие время и бюджет проекта.
Оценка бюджета проекта с помощью прототипа
Создание прототипа позволяет точнее оценить масштаб работ и рассчитать общую смету проекта. Чем более высокоточный прототип, тем легче будет спрогнозировать цену и сроки.
Например, если на основании утвержденного каркаса сайта можно спрогнозировать окончательную цену с точностью до 70%, f готовыq прототип увеличивает верность прогноза до 90%. Разбежность объясняется тем, что во время работы над визуальным стилем возможно внесение дополнительных требований или изменений в проект.
Сроки и стоимость создания прототипа
Время и цена разработки зависят от нескольких факторов:
- требуемого уровня точности — нужен вайрфрейм, макет или интерактивный прототип;
- количества страниц;
- наличия у клиента готовых графических элементов, логотипа, баннеров;
- наличия ТЗ или концепции сайта.
Прототипирование происходит в тесной связи с проектированием — работой концепцией и спецификациями. Они, в свою очередь, требуют сбора информации об отрасли, проведения исследования ЦА и проработки пользовательских сценариев. Поэтому цена может изменяться в зависимости от полноты данных, которыми располагает клиент.
Работа может длиться от одного дня до месяца. В особых случаях и дольше. Например, если нужно нарисовать только каркас главной страницы на основе предоставленной концепции, это займет пару дней. Если необходимо проделать исследование, составить концепцию, утвердить каркас страниц, затем макеты и интерактивный прототип, время выполнения составит не менее двух недель.
