MotoCMS Blog

Быстрое прототипирование: 15 лучших инструментов

Иван Алексеев

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

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

HotGloo

Этот инструмент помогает создавать UX, вайрфреймы и прототипы для веб- и мобильных приложений. С HotGloo просто планировать процесс работы над проектом, а также организовывать и тестировать взаимодействия элементов. Вы также можете создавать полностью интерактивные прототипы и делиться ими с друзьями и коллегами. Получение отзывов и комментариев также возможно в этом приложении. Библиотека элементов HotGloo состоит из более чем 2000 элементов, иконок и UI-виджетов. Инструмент оптимизирован для мобильных устройств, поэтому вы можете работать в любое время в любом месте.

Justinmind

Этот UX-инструмент используется для создания прототипов веб- и мобильных приложений. С ним вы можете создавать замысловатые вайрфреймы сайтов. В основном инструмент предназначен для профессиональных дизайнеров, у новичков же могут возникнуть сложности при работе с Justinmind. Инструмент предлагает drag-and-drop функционал, возможность изменения размеров, форматирования и экспорта/импорта виджетов. Также пользователи могут описывать виджеты и определять взаимодействия, такие как связывание, анимация, условное связывание, вычисления, моделирование элементов управления, отображение/скрытие элементов и моделирование базы данных с реальными данными.

InDesign CC

Интерфейс InDesign напоминает Photoshop и Illustrator. Для упрощения работы существует набор готовых пресетов и шаблонов, доступ к которым можно получить во вкладке File->New Menu. Пользователи могут создавать свои библиотеки элементов. Вы можете создать эффективный вайрфрейм с помощью этого приложения, используя интерактивные PDF-документы. InDesign поддерживает импорт анимации и видео из вашей библиотеки CC. Также вы можете предоставлять другим пользователям доступ к своим проектам.

MockFlow

Mockflow — приложение для дизайнеров. Оно включает ряд удобных инструментов и функций. Drag-and-drop редактор вайрфреймов позволяет вам с легкостью рисовать мокапы пользовательского интерфейса. С помощью опции Sitemap вы можете добавлять страницы и прорабатывать структуру всего сайта. Опция StyleGuide поможет вам подобрать элементы дизайна (шрифты, цвета, изображения), а опция DesignCollab позволяет работать в команде. Инструмент AnnotatePro помогает создавать интерактивные изображения. Опция WebsitePro — это быстрая платформа для разработчиков, позволяющая писать код, сохранять статические сайты и управлять ими. С помощью опции BannerPro вы можете создавать интерактивные баннеры и слайд-шоу.

Frame Box

С помощью Frame Box вы с легкостью сможете создавать вайрфреймы и при необходимости делиться своими результатами. Вся работа состоит из трех этапов — вам нужно создать фрейм, используя UI-элементы, сохранить результат и получить ссылку на него, а после этого отправить ссылку своим коллегам. В этом приложении всего несколько простых drag-and-drop элементов. Вы также можете оставлять комментарии к своему проекту. Этот вариант идеально подойдет для новичков.

Penultimate

Данное предложение создано специально для iPad и представляет собой заменитель записной книжки. С Penultimate вы можете создавать скетчи или делать записи, используя экран вашего устройства вместо бумажного носителя. Вы можете получить доступ к своим записям с любого компьютера или мобильного устройства. Более того, Penultimate позволяет выполнять поиск по записям. Вы также можете отправлять записи друзьям и коллегам для проверки или подтверждения.

Cacoo

Этот онлайн-инструмент для создания диаграмм предлагает пользователям множество готовых шаблонов вайрфреймов. У вас есть возможность настроить свой шаблон и использовать его для упрощения рабочего процесса. Также с Cacoo вы можете создавать карты сайта, вайрфреймы и сетевые диаграммы. Результаты вы можете сохранить в форматах PNG, PDF, PPT, PostScript или SVG. Cacoo дает вам возможность работать над диаграммой вместе с коллегами в режиме реального времени. Также вы можете делиться диаграммами с теми, у кого нет аккаунта Cacoo.

Lumzy

Благодаря drag-and-drop функциональности этого инструмента вы с легкостью можете создавать прототипы страниц и мокапы. Интерфейс Lumzy прост и интуитивно понятен. Используя триггеры событий и действия, вы можете создавать интерактивные прототипы ваших продуктов. Пользователям также предлагается большая библиотека компонентов. Инструмент содержит весь необходимый функционал для командной работы в реальном времени. В Lumzy также есть чат для обсуждения рабочих моментов. Вы можете редактировать изображения (придавать оттенок и насыщенность, менять контрастность) в самом приложении и сразу же добавлять их в свой проект.

OmniGraffle

OmniGraffle — приложение для ПК и планшетов с понятным drag-and-drop интерфейсом, предназначенное для создания красивой графики. Для полноэкранной демонстрации мокапов можно использовать удобный режим презентации. Специальная панель Touch Bar помогает ускорить привычные действия. Благодаря функции “бесконечного полотна” вы никогда не выйдете за границы рабочего пространства. Артборды и слои артбордов помогают организовать более сложные элементы. Пользователи также могут создавать документацию для вайрфреймов и прототипов.

Mockingbird

Это приложение с удобным пользовательским интерфейсом позволяет быстро воплощать идеи в жизнь благодаря drag-and-drop функционалу и возможности изменения расположения и размера элементов. С Mockingbird вы можете соединить несколько мокапов и просмотреть их в интерактивном режиме. Так вы получите базовое представление о том, как будет выглядеть ваше приложение в процессе работы. Более того, инструмент позволяет вашим коллегам редактировать вайрфреймы совместно с вами в режиме реального времени. Это значит, что вам не придется без конца обмениваться письмами.

Fluid UI

Инструмент дает возможность создавать прототипы веб-, десктопных и мобильных приложений. Пользователям Fluid UI предлагается 16 встроенных библиотек для Android, iOS, веб- и десктопных приложений и т.д.. Вы можете исправлять ошибки в дизайне и создавать новые версии. С помощью данного инструмента также можно добавлять анимацию, чтобы “оживить” вайрфрейм или прототип. Используя приложения Fluid UI, вы можете получить доступ к своим прототипам с ПК или мобильного. Также вы можете приглашать других пользователей для просмотра и комментирования ваших работ.

Visio

Visio — это высокоточный инструмент для создания профессиональных диаграмм. Пользователям предлагается широкий выбор различных вариантов: от блок-схем до планировки зданий и инженерных дизайнов. Вы можете использовать готовые формы (250000 вариантов) и замысловатые шаблоны. С Visio несложно работать благодаря привычному интерфейсу Office. Готовые начальные диаграммы помогут вам изучить работу программы. Вы можете начать воплощать свои идеи с помощью инструментов “Ручка” и “Палец”. Visio также содержит функционал для совместной работы над проектами.

Lovely Charts

Это приложение позволяет вам создавать диаграммы всех видов (блок-схемы, карты сайта, организационные диаграммы, вайрфреймы). Существует две разных версии приложения. Если вам нужно простое онлайн-решение, вам стоит ознакомиться с веб-версией. Если же вы ищете что-то более мощное, вам подойдет десктопная версия приложения. Обе версии просты в использовании, но содержат разное количество инструментов и функций. Lovely Charts предлагает пользователям набор удобных инструментов и библиотеку готовых символов.

ProtoShare

Этот инструмент для прототипирования позволяет командам разработчиков визуализировать проекты и совместно работать над ними в режиме реального времени. ProtoShare всячески поддерживает дизайнерское мышление, дизайнерские исследования и стратегический дизайн. В ProtoShare вы можете использовать панель компонентов, готовую библиотеку трафаретов  или собственные изображения и дизайны. Вы также можете создать собственную библиотеку шаблонов и ресурсов для повторного использования. Инструмент позволяет вам быстро и легко организовывать взаимодействия различной сложности (такие как всплывающие окна, модальные окна, карусели и панели вкладок).

FlairBuilder

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