Каркас, макет и прототип: разница и использование

Тестирование - важнейший компонент любого продуктивного UX-проекта. Дизайнеры могут использовать каркасы, макеты и прототипы для разработки схем и моделей для тестирования юзабилити.

Использование каркасов, макетов и/или прототипов в ходе дизайн-проекта - отличный способ визуально донести концепцию дизайна мобильного приложения или веб-сайта, а также быстро собрать отзывы пользователей.

Каркасы, макеты и прототипирование - это разные этапы процесса проектирования, однако многие люди ошибочно воспринимают их как одно и то же.

Здесь вы узнаете о различиях между каркасами, прототипами и макетами и о том, как эффективно использовать их в процессе проектирования.

Часть 1. Каркас, макет и прототип: что это такое?

Каркасы, макеты и прототипы отличаются друг от друга так же, как архитектурный план и реальный дом. Итак, чем они отличаются? 
 

1. Что такое каркасы? 

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

Рамки дизайна служат основой, на которой создается все остальное. Это черно-белые иллюстрации, которые в основном основаны на серых рамках и тексте, чтобы показать, как будет выглядеть продукт. Дизайн может быть выполнен с помощью бумаги и карандаша, белой доски или платформы управления продуктом, и UX-дизайнер для этого не требуется.

2. Что такое макеты? 
                                   

Цветовые схемы, шрифты, значки и элементы навигации добавляются к каркасам макетов, чтобы сделать их более привлекательными. Часто создается несколько макетов, что дает лицам, принимающим решения, множество возможностей для рассмотрения. Визуализации, содержащие реальный контент, с большей вероятностью точно передадут конечный результат. Для создания макетов требуется много времени и работы, а также большой опыт. Варианты будут созданы и представлены в цифровом виде UX-дизайнером.

3. Что такое прототипы?

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

Разработка прототипов крайне важна для проведения юзабилити-тестирования и сбора отзывов от конечных пользователей. Многие инструменты UX можно использовать для создания прототипа, а не для написания реального кода. В результате прототип не будет полностью работоспособен, но интерактивных функций будет достаточно для подтверждения основных принципов.

Часть 2. Когда использовать каркас/макет/прототип

Важно подчеркнуть, что последовательность, в которой вы используете эти компоненты дизайна, полностью зависит от вас. Все зависит от проекта и людей, которые над ним работают.

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

1. Когда следует использовать каркас?

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

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

Ниже приведены сценарии, в которых использование каркасов может быть полезным: 

• Коммуникационная структура дизайна: Каркасы служат в первую очередь средством распространения важной информации о дизайне продукта.
• Идея продукта: Каркасы используются дизайнерами и заинтересованными сторонами для выявления потребностей бизнеса, определения сферы применения продукта и многого другого.
• Укрепление сплоченности: Очень важно, чтобы все члены вашей команды были на одной волне, прежде чем вы начнете писать код или выделять значительные ресурсы для проекта. С помощью каркаса всем будет легче увидеть, чего вы хотите достичь.

2. Когда использовать макет?
 

Чтобы подготовиться к созданию прототипов hi-fi, UX-дизайнеры создадут макеты на основе каркасов. UX-команды также используют макеты для демонстрации проектов заинтересованным сторонам и клиентам.

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

• Знакомство с продуктом: Если вы только начинаете, макеты могут стать отличным способом опробовать различные идеи для предлагаемого вами продукта.
• Объедините заинтересованные стороны: В проектировании и разработке продукта участвует множество людей, и важно, чтобы все они были на одной волне. Макет может помочь обеспечить единодушие всех, когда дело доходит до конечного продукта, и даже заинтересовать инвесторов.
• Последний этап проектирования: Создание макета - важный аспект цикла разработки продукта, который обычно выполняется на этапе проектирования.

3. Когда использовать прототип? 
 

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

Ниже приведены этапы процесса проектирования, требующие создания прототипов:

• Тестирование удобства использования: Процесс проектирования в значительной степени основан на прототипах. Прототип может быть использован для оценки удобства использования вашего продукта перед его отправкой, что позволит вам увидеть, работает ли он так, как задумано, в руках реальных клиентов.
• Проверка концепции: Дизайн прототипа может быть использован для проверки концепции на желаемом этапе проектирования. Вы и ваша команда сможете лучше определить свои цели с помощью прототипирования.
• Коллективный дизайн: Вы можете и должны привлекать как можно больше заинтересованных сторон к разработке прототипов, чтобы помочь с тестированием концепций. Авторы UX-текстов, разработчики и менеджеры по продуктам - все они могут помочь в проверке пользовательского опыта, проводя тесты навигации и производительности.
• Убеждая инвесторов: Прототип может потребоваться, чтобы убедить потенциальных инвесторов и заинтересованные стороны в том, что бизнес-концепция заслуживает дальнейшего развития.

Часть 3. Наиболее часто используемые инструменты для создания каркаса/макета/прототипа

Перед созданием веб-сайтанеобходимо создать каркас, макет или прототип. Для вашего удобства мы рассмотрим три лучших инструмента для создания каркасов, макетов и прототипов.

1. Pixso
              

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

2. UXPin
 

UXPin - это онлайн-решение для создания прототипов для мобильных и веб-приложений. Оно предлагает согласованный интерфейс и сотни библиотек, содержащих множество элементов дизайна, что упрощает и ускоряет создание прототипов. Его можно использовать как для создания статических, так и интерактивных прототипов.

3. Mockplus 
 

Mockplus - один из самых эффективных инструментов для разработки каркасов, макетов и прототипов, если не самый эффективный. Mockplus позволяет вам предварительно просмотреть свой проект, чтобы другие пользователи могли внести свой вклад.

Часть 4. Часто задаваемые вопросы
 

1. Является ли вайрфрейминг частью прототипирования?

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

2. Что такое каркас в agile?

Вайрфрейминг в agile - это метод, который дизайнеры используют для создания эскизов общей структуры и потока интерактивных продуктов. В этих схемах отражены требования пользователей и бизнеса.

Вывод

Я не сомневаюсь, что теперь вы знаете разницу между каркасом, макетом и прототипом. На самом деле, все три подхода дополняют друг друга, поэтому разумно использовать их все в процессе проектирования, а не сосредотачиваться на чем-то одном, будь то каркас, прототип или макет.

В соответствии с основными принципами UX design, получение информации от пользователей в кратчайшие сроки позволит вам получить максимальную отдачу от вложенного времени и денег. Беспроигрышный вариант!