Wireframes, Mockups и Prototypes: от простого эскиза до интерактивного продукта
Дизайн любого сайта начинается с визуализации его структуры и интерфейса. Prototypes, mockups, wireframes – это термины, способные повергнуть в уныние любого новичка в UX/UI. Что это? В каком порядке создавать такие эскизы? Чем они отличаются друг от друга? Постараемся разобраться в теме так, чтобы вопросов у вас больше не осталось.
Фундамент? Нет, каркас!
Перед тем, как создавать макет будущего веб–ресурса, нужно в деталях представить расположение элементов интерфейса и путь пользователя. Это особенно важно во время работы в команде: наличие такого наброска облегчит коммуникацию между разработчиками и заказчиком и позволит еще на предварительном этапе понять, как в будущем будет выглядеть и работать конечный продукт.
Таким образом, варфреймы – это каркас вашего проекта (от англ. wireframe — «каркас»). С него начинается процесс визуализации будущего макета. Варфреймы нужны, чтобы:
- Создать логичную базовую структуру, которая будет интуитивно понятна посетителям сайта;
- Улучшить путь пользователя еще до финального дизайна: наличие каркаса позволяет найти и исправить ошибки;
- Сфокусироваться на функциональности площадки, не отвлекаясь на визуальные элементы.
Такой эскиз в конечном итоге позволяет быстрее запустить готовый сайт и не отвлекаться на правки.
Типы варфреймов
Для того чтобы дизайнерам было проще выполнять свою работу, существует несколько типов каркасов. Создание wireframe осуществляется по принципу от простого к сложному.
Low Fidelity
Это – базовый вариант каркаса, который позволяет быстро протестировать идею. Обычно он представляет собой простой схематичный набросок, в котором отображаются только основные элементы будущего ресурса без детальной проработки. Чтобы его нарисовать, не нужны специальные инструменты: достаточно ручки и бумаги.
Medium-Fidelity
Такой варфрейм более детален, чем предыдущий вариант, и уже включает себя отдельные элементы дизайна – например, расположение кнопок и полей ввода, а также базовых цветов и типографики. Хотя такой wireframe – это в дизайне только начало визуализации, но без него точное планирование структуры портала невозможно.
High-Fidelity
«Венец детализации» на данном этапе разработки проекта. Такой каркас уже включает в себя все элементы дизайна: от шрифтов и палитры, до отступов и межстрочных интервалов. Здесь нет только интерактивных элементов, но понять, как именно будет выглядеть готовый сайт после верстки – уже реально.
Некоторые специалисты выделяют в отдельную категорию моделей и так называемые перспективные варфреймы. Каркасы этого типа используются для планирования будущих улучшений и изменений на сайте или в мобильном приложении. Таким образом, макет интерфейса warframe помогает избежать ошибок при верстке, создать функциональный и удобный для пользователей ресурс и сэкономить время и силы разработчиков.
Mockup: прототип для детального знакомства
Итак, каркас готов, но приступать к верстке площадки еще рано: нужно понять, как будет выглядеть сайт со всеми элементами и максимальной детализацией. Для этого и существуют мокапы или рендеры. Их создают для:
- Лучшего понимания общей эстетической концепции и соответствия выбранной цветовой схемы, оформления, типографики общей айдентике бренда;
- Получения обратной связи от владельца ресурса. Mockup – это то, что помогает избежать недоразумений и внести необходимые правки до финального этапа разработки или презентовать свой проект заказчикам, инвесторам или команде;
- Тестирования или оптимизации разных гипотез. Создание нескольких мокапов позволяет выбрать наилучший вариант дизайна.
Мокапы применяются не только в веб–дизайне. В зависимости от назначения такого эскиза, выделяют несколько видов рендеров.
2D–модели
Это плоские, двухмерные мокапы, которые позволяют рассмотреть предварительно утвержденный внешний вид цифрового продукта с разных ракурсов. Именно такой вариант используется при разработке интернет – ресурсов и интерфейса мобильных приложений. Могут быть как статичными, так и динамическими (интерактивными).
3D–модели
3D–мокап – что это такое в дизайне? Прежде всего, это объемное изображение, которое создается для детальной оценки будущего продукта и позволяет рассмотреть текстуру, материалы, пропорции. Его используют для визуализации архитектурных и интерьерных решений, а также при создании различных гаджетов.
Интерактивные мокапы
Такие модели применяются для демонстрации процесса взаимодействия с продуктом и улучшения пользовательского опыта. Они включают в себя эффекты и анимации, которые позволяют симулировать поведение пользователя в процессе использования сайта или приложения. Обычно mocups этого типа позволяют продемонстрировать только отдельные взаимодействия и используются для презентаций.
Мокап – всего лишь второй этап разработки конечного продукта. Что же дальше?
Прототип: когда финал уже близко
Схема нарисована, отдельные элементы – продуманы: самое время вдохнуть жизнь в наш проект. В отличие от мокапов и wireframe, прототип в зависимости от типа представляет собой практически готовый веб–сайт. С ним можно взаимодействовать, чтобы оценить, как работают отдельные объекты, его можно продемонстрировать не только заказчикам, но и представителям своей целевой аудитории, чтобы понять, насколько удачной оказалась ваша концепция.
По сути, это проверка будущей площадки на готовность к работе в реальных условиях, позволяющая оценить интерфейс ресурса. Выделяют несколько видов прототипов:
Low-Fidelity Prototypes
Самый простой вариант, напоминающий Low Fidelity Mockup. Такой прототип вполне можно нарисовать на листочке или в простейшем графическом редакторе. Создается для понимания, что именно должно произойти после определенных действий пользователя: например, после клика по одному из разделов происходит переход на новую страницу, а тап в определенном месте вызывает всплывающее окно для заказа обратного звонка.
Medium-Fidelity Prototypes
Помимо основных разделов, такой прототип включает в себя поля ввода, формы, кнопки. Они не просто схематично изображены, а обеспечивают полноценное взаимодействие с сайтом. Medium-Fidelity прототип в дизайне – это наглядный способ тестирования структуры и навигации портала.
High-Fidelity Prototypes
Такой вариант нужен для финального согласования проекта перед передачей его в разработку. Его отличает высокая детализация и работа абсолютно всех объектов дизайна – от форм обратной связи, до анимированных эффектов.
Итак, в чем же заключаются основные отличия между варфреймом, мокапом и прототипом? На самом деле, все просто. В классическом варианте, варфрейм – просто схема, которая позволяет понять, как будут расположены основные блоки и разделы, мокап – средство для оценки стиля и функционала, а прототип – практически готовый проект, позволяющий оценить путь пользователя и оптимизировать детали для наилучшего результата.
Wireframe, mockup, прототип: что будет, если от них отказаться?
Не стоит думать, что если вы создаете сайт исключительно для себя, то от предварительного этапа можно отказаться с целью экономии времени, и сразу перейти к верстке. Отказ от прототипирования на всех этапах – от каркаса до тестирования интерфейса и пути пользователя, чреват неприятными последствиями:
- Без предварительной разработки легко упустить множество важных мелочей и понять, насколько удобен готовый продукт для конечного пользователя;
- Отказываясь от прототипирования, вы ограничиваете возможности для будущей оптимизации своего проекта. Наличие наглядных схем позволяет быстрее находить точки отказа посетителей ресурса и корректировать их;
- Несколько мокапов, демонстрирующих, как будет выглядеть готовый сайт, позволяют выбрать наиболее удачный дизайн, в полной мере соответствующий айдентике бренда, его ценностям и философии, а также оценить общую эстетическую привлекательность выбранной концепции. Отказываясь от выполнения данного этапа, вы решаете себя возможности выбора: каждая гипотеза, особенно в маркетинге, должна быть протестирована;
- Без предварительных макетов практически нереально понять, насколько ресурс соответствует ожиданиям пользователей. Возможно, ваши представления об их потребностях совершенно не соответствуют реальности. В этом случае переделать предварительный эскиз будет гораздо проще, чем заново собирать и верстать весь сайт;
- Даже самый простой варфрейм позволяет сместить фокус на функциональность, не отвлекаясь на визуальные детали. Это основа, вокруг которой должен строиться дизайн, а не наоборот. Отказываясь от его разработки, вы рискуете пользовательским опытом в угоду внешнему виду ресурса, а это – далеко не самое главное для высокой конверсии.
Три инструмента, облегчающие работу с прототипами
Чтобы процесс предварительной разработки макета вашей площадки прошел максимально быстро и просто, пользуйтесь инструментами, которые предпочитают профессионалы.
Adobe XD
Сервис обладает широчайшим функционалом для создания самых сложных макетов с анимационными эффектами, переходами и 3D–графикой. Он легко интегрируется как с другими продуктами Adobe, так и со сторонними программами, например, с Photoshop. Это позволяет работать с уже готовыми визуальными элементами.
Sketch
Если вам нужен простой в использовании, но в то же время функциональный инструмент для создания интерфейсов, обратите внимание на Скетч. Здесь вы с легкостью нарисуете простенький варфрейм, который положит начало вашему проекту, и сможете создать сложный анимированный прототип для оценки пользовательского опыта. Хотя возможности кастомизации отдельных объектов и ограничены закрытым исходным кодом программы, расширить функционал ПО можно при помощи плагинов.
InVision Studio
Программа для создания высокодетализированных прототипов со сложными анимациями и вариантами взаимодействия своим функционалом порадует даже опытного дизайнера. Здесь можно работать в команде, тестируя передовые интерактивные эффекты, а в последствии – применить их на своем портале.
Создать прототип будущего сайта, оперативно внести правки в проект и запустить готовый ресурс можно с помощью конструктора Taptop. Визуальный редактор платформы имеет весь необходимый для этого функционал и обеспечивает как работу с пользовательскими UI Kit, так и стилизацию уже имеющихся в библиотеке конструктора элементов. Кроме того, возможность для бесконечной кастомизации открывает и открытый код проекта.
Все шаблоны, представленные в Библиотеке Taptop, прошли все необходимые этапы прототипирования: целая команда дизайнеров и разработчиков сначала рисовала варфреймы, затем – создавала мокапы, а после – тестировала прототипы. Выбор в пользу готовых макетов – отличный вариант для тех, кто не владеет навыками программирования или не уверен в своих силах: выбирайте подходящий вариант и не откладывайте запуск своего сайта!