Инструменты для создания прототипов сайтов и веб-продуктов

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

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

InVision

InVision – платформа для командной разработки макетов интерфейса веб-продукта. Ее особенностью является возможность разделения задач версии и итерации. Это позволяет обеспечить контроль этапов каждому участнику разработки (как заказчику, так и девелопере). К плюсам InVision можно отнести:

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

Стоимость платного пользования стартует от 15 долларов в месяц. Есть и бесплатная версия, но с крайне ограниченными возможностями.

Marvel

Отличительной чертой Marvel является возможность создания прототипа прямо в браузере. Сервис поддерживает работу с iOS, Android и даже Apple Watch. Также доступна синхронизация с Dropbox. Можно брать любые элементы, подходящие для прототипирования или отправлять готовые проекты в облако. Сервис способен превратить презентационную версию в динамическую презентацию для заказчика. Также здесь есть возможность импортировать нарисованный прототип. Сейчас программа совершенно бесплатна, но ее разработчиками планируется внедрить платную расширенную версия с новыми возможностями.

Cacoo

Cacoo – онлайн-инструмент для создания различных облачных диаграмм, таких как карты сайта, каркасы, UML, блок-схемы, сетевые и организационные диаграммы и прочее. Сервис также поддерживает командную работу и позволяет контролировать действия коллег. Преимуществам Cacoo являются:

• Большой выбор трафаретов для любых идей и целей;
• Общий доступ к схемам для их редактирования;
• Доступно выравнивание и равномерное распределение диаграммы по отношению к другим объектам;
• Быстрое создание макета для сайта за счет легкости в управлении схемами.

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

Xmind

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

• отсутствие многопользовательского режима;
• требует много оперативной памяти;
• не интегрируется с многими офисными сервисами.

В Pro режиме доступен режим создания презентации.

Proto.io

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

• Отсутствие превью в реальном времени;
• Медленная анимация при добавлении большого числа взаимодействии;
• Нет 3-d анимации.

Есть бесплатный пробный период, который рассчитан на 15 дней пользования. По истечению срока необходимо покупать подписку, стоимость которой колеблется в пределах от 24 долларов до 160.

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