Дизайнеры, сами того не желая, часто попадают в ловушку, когда решают использовать в работе вайрфреймы, макеты или инструменты для создания прототипов. Это происходит потому, что они думают, что все эти названия являются синонимами – ведь и макеты и вайрфреймы и прототипы выполняют полезные функции. Однако это не совсем так: принципы работы с каждым из инструментов существенно различаются.
- Вайрфрейм не дает нужного представления о будущем дизайне. Это статический инструмент, в нем часто не хватает деталей, из-за чего страдает точность.
- Макет отличается средней деталировкой и позволяет показать больше элементов дизайна, но это так же статика.
- А вот прототип, в силу своей средне-высокой точности, позволяет получить более полное представление о будущем продукте. В некоторых случаях прототип бывает невозможно отличить от настоящего продукта, так как он выглядит и работает точно так же.
Нужно отметить, что прототип не обязательно должен выглядеть хорошо, но в нем должны быть воплощены все ключевые идеи и он должен работать.
Типичный рабочий процесс создания прототипа выглядит следующим образом:
Создание эскиза потока страниц. Страницы потока (flow) – это тип страниц, входящих в окончательный проект — блок-схемы, диаграммы, карты сайта, поток задач и др. Дизайнеру необходимо показать, как пользователь будет перемещаться по сайту или мобильному приложению.
Дизайн цифрового прототипа с низким уровнем точности. В данном случае создается несколько эскизов каждой страницы. После чего каждый прототип проходит несколько юзабилити-тестов и в дизайн вносятся необходимые элементы.
Повышение деталировки конструкции. На данном этапе прототип выглядит почти так же, как готовый продукт. Однако перед тем, как добавить мелкие детали, дизайнеру нужно убедиться, что функционал полностью его устраивает.
7 лучших инструментов для создания прототипов, которые можно использовать в работе
Этот инструмент используют Uber и Twitter, его рекомендует Forbes, его возможности по достоинству оценили большинство компаний, входящих в список Fortune 100. InVision упрощает практически каждый аспект рабочего процесса дизайнера и делает совместную работу основной частью этого процесса для менеджеров проекта, дизайнеров, разработчиков и копирайтеров.
Совместная работа над проектом может осуществляться непосредственно в браузере в режиме реального времени. Если требуется высокоточный прототип, который выглядит, работает и реагирует как реальный продукт, если вам нужен гибкий подход или возможность неограниченного тестирования продукта, то стоит обратить свое внимание на InVision. Если нужен отшлифованный до пикселя дизайн, то, возможно, имеет смысл присоединиться к двум миллионам профессионалов, использующих этот инструмент прототипирования. Причем работать можно начинать сразу, опыт кодирования дизайнеру не нужен.
Чтобы понять, насколько удобен InVision, нужно пройти бесплатную регистрацию на сайте и скачать пробную версию программы. Если все понравится, можно выбрать наиболее удобный тарифный план или пользоваться инструментом бесплатно, но с ограничением: можно создавать только один прототип в месяц.
Если дизайнер не хочет полностью отказаться от использования вайрфреймов, то ему подойдет инструмент Pidoco. Это реально мощный инструмент, позволяющий быстро достичь поставленных целей, но главное его достоинство заключается в том, что с его помощью можно создавать полностью интерактивные прототипы. С Pidoco можно продемонстрировать и протестировать весь набор кликов, жестов и других функций. То есть, Pidoco является идеальным инструментом для дизайнеров мобильных приложений.
Pidoco позволяет тестировать прототипы в режиме реального времени на Android и iOS устройствах или прямо в браузере, смарт-шаблоны делают процесс прототипирования очень быстрым и легким. Инструмент понятный, гибкий и позволяет решать самые разные задачи.
Так как Pidoco находится в «облаке», нет необходимости в его установке на компьютере. Нужно лишь зайти на сайт – и можно начинать работу. Как и в случае с InVision, навыки кодирования дизайнеру не потребуются. Инструмент платный, но есть бесплатная пробная версия.
При работе с Proto.io дизайнер получает в свое распоряжение мобильную платформу для создания прототипов и может создавать и тестировать дизайн полностью интерактивных мобильных приложений, при этом прототип будет внешне напоминать и эмулировать конечный продукт. Proto.io работает в большинстве веб-браузеров, в нем имеется панель инструментов, с помощью которой он может управлять своими проектами, редактировать и сохранять изменения. Как работает прототип, можно проверить на устройствах с ОС Android и iOS.
Proto.io используют дизайнеры IDEO, Disney, PayPal и других крупных компаний, так как этот инструмент позволяет не только быстро создавать прототипы, но и получать обратную связь от пользователей. Попробовать, как работает инструмент, можно бесплатно, но для дальнейшей работы придется выбрать тарифный план, самый дешевый из которых обойдется дизайнеру в $24 в месяц.
WebFlow – это инструмент прототипирования с очень мощным функционалом. Все, что создает дизайнер, работает по стандартам HTML, CSS и JavaScript, поэтому после создания прототипа можно сразу перейти к работе над конечным продуктом. Как только дизайн будет готов, его можно отдать на тестирование членам проектной команды или заказчику – для этого достаточно отправить им ссылку на страницу с прототипом.
WebFlow располагает хорошим инструментарием и отлично подходит для совместной работы. С этим инструментом поддержка контроля версий продукта не составит никаких проблем. Прототипирование, дизайн, разработка – все можно делать как сразу, так и по отдельности. Немного инструментов для создания прототипов могут похвастаться такими возможностями.
Если дизайнер использует в работе PowerPoint, то этот инструмент для создания прототипов как раз для него. C помощью PowerMockup можно выйти за рамки стандартной слайд-презентации и представить свой проект в виде интерактивного прототипа. В распоряжении дизайнера есть множество пиктограмм, фигур и других элементов из обширной библиотеки PowerMockup – все их можно перетаскивать на слайд и при необходимости анимировать. Пробную версию можно скачать бесплатно, самый дешевый платный тариф стоит $59.
Если нужен инструмент для создания прототипов, который будет максимально прост в использовании, то можно попробовать HotGloo. В нем есть весь необходимый функционал, инструмент предоставляет среду для глубокой проработки UX. HotGloo позволяет создавать прототипы сайтов, мобильных приложений и интерфейсов мобильных устройств прямо в браузере. Более 2000 элементов, пиктограмм и виджетов интерфейса пользователя делают библиотеку элементов HotGloos одной из наиболее полных. HotGloo позволяет очень легко визуализировать процессы планирования, строить и тестировать взаимодействие накопителей. Создавайте и делитесь полностью интерактивными прототипами со своей командой и клиентами, а также собирайте отзывы об этом процессе. От прототипов нового потрясающего приложения до каркасных моделей огромного интернет-магазина – HotGloo идеально подходит всем веб-работникам.
Инструмент Lucidchart предлагает множество решений для создания прототипов. С его помощью можно быстро создавать эскизы прототипов и обмениваться диаграммами и блок-схемами с другими участниками проектной команды. Lucidchart поддерживает все коммуникационные потребности на всех этапах работы, от мозгового штурма до управления проектами – именно поэтому миллионы пользователей выбрали этот инструмент. Lusidchart предназначен для максимальной совместимости с другими программами и сервисами, в том числе и Google Apps. Также это единственное веб-приложение, которое обеспечивает полную поддержку Microsoft Visio. Когда работа над прототипом завершена, дизайнер может экспортировать результат в файлы стандартных форматов или разместить его в интернете для дальнейшего тестирования. Сервис облачный, что делает его очень удобным для совместной работы. Бесплатная версия с ограниченным функционалом доступна бесплатно, но если нужно больше инструментов, придется перейти на один из платных тарифов.
Источник
0 комментариев