Как выбрать сервис для создания прототипа: 9 инструментов. Программа для рисования прототипа сайта


9 инструментов для создания прототипа сайта

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

О том, что такое прототип landing page и зачем он нужен, мы узнали в прошлый раз . Сегодня обратимся к основным инструментам и программам, которые помогут сделать его удобным для дальнейшей работы над проектом. Продемонстрируем последние возможности, новейшие интерфейсы, а также сравним цены.Итак, поехали.

1. POP

Самый простой способ сделать прототип лендинга – это рисунок от руки. Макет рисуем на бумаге, затем фотографируем и после этого преобразуем в программе POP. Но, признаться, проще и аккуратнее нарисовать отдельный макет прямо в программе. Для этого в POP есть несколько самых необходимых функций: вставить картинку, нарисовать область прямоугольной или круглой формы, указать, где разместить текст (или прямо написать тот, который подскажет копирайтер).

b_5978aa107f565.jpg

Процесс создания прототипа в программе POP. Минимум функций, зато и минимум усилий

Программа простейшая. Здесь не получится крутого прототипа. Минимум инструментов для минимума задач. Но при этом POP поддерживает любой девайс: iPhone, iPad, Apple Watch, Apple TV, Android. Здесь есть также рабочая сеть, куда можно позвать коллег и клиентов, чтобы обсуждать весь нехитрый процесс. И, конечно, POP интегрируется с Dropbox.Стоимость: от 14$ в месяц. Есть бесплатная версия.

2. Balsamiq

Тоже несложная программа и по функционалу не лучшая. Однако Balsamiq предлагает более широкие возможности, имеет большой набор UI-элементов. Здесь можно выбирать значки, рисовать кнопки разных форм, добавлять таблицы, работать со шрифтами. Удобнее выглядит само рабочее поле: есть разметка. В Balsamiq также можно создавать макеты сайтов и карты. Он подходит тем, кто не силен в фотошопе.

b_5978aa1228db8.jpg

Прототипирование в Balsamiq: как на бумаге…

Программу используют непосредственно в браузере или загружают в качестве приложения Adobe AIR. Работает на Mac или Windows, интегрируется с Google Docs.Стоимость: от 12$ в месяц. 30 дней бесплатного тестирования.

3. InVision

Это приложение для преобразования статических макетов в прототипы и мокапы с интерактивными элементами, то есть средство «оживления» макета. InVision имитирует полноценную работу будущего сайта. На нем можно связывать макеты отдельных страниц в прототип. Кроме того, это отличный инструмент для работы в студии. Программное обеспечение включает несложные инструменты drag-and-drop, благодаря которым процесс проектирования UX-проектов становится легче.

b_5978aa133ad89.jpg

Invision: простые инструменты оживят ваш макет

Проект можно тестировать в браузере, на мобильнике и в режиме реального времени. Приложение позволяет подключать к обсуждению коллег и заказчиков, причем общаться можно как в чате, так и с помощью персональных приватных комментариев: дизайнеру, разработчику, заказчику. Функционирует на основе браузера, поддерживает все браузеры. Работает с iOS и Android. Интегрируется с Dropbox, Google Drive, Box, GitHub, Slack и другими программами. Стоимость: от 15$ в месяц. Есть бесплатная версия.

4. PowerMockup

PowerMockup – это простой набор инструментов, подходящий тем, кто любит работать в PowerPoint. Он своего рода дополнение к PowerPoint, встроен в пакет Microsoft Office и предлагает дополнительные возможности и эскизы для прототипирования. Имеется множество разнообразных UI-элементов пользовательского интерфейса и порядка 650 значков. Библиотеку форм можно пополнять своими элементами. В PowerMockup коллеги могут работать над проектом вместе, файлы легко экспортируются в PNG, JPEG, BMP, в векторных графических символах, таких, как WMF или EPS, а также видео и документах PDF. Благодаря принадлежности Microsoft Office работа возможна также в Word и Excel. К примеру, делаем спецификацию в PowerPoint, а после открываем ее в Word.

b_5978aa14e08a5.jpg

PowerMockup: поможет сделать прототип прямо в PowerPoint

PowerMockup доступен только для Windows. Стоимость: от 60$ (разовый платеж). 30 дней тестирования.

5. Axure

Это профессиональный UX-инструмент, помогающий разработчикам создавать уже сложные интерактивные прототипы. Делает веб-приложения, работает на Mac и Windows. Здесь удобно перетаскивать элементы, форматировать и менять размеры виджетов, создавать страницы, папки, также очень легко тестировать виды будущего лендинга под различные устройства. То есть, можно быстро визуально редактировать, а также скачивать библиотеки для виджетов. В программе имеется поддержка фреймов под iOS, а также библиотеки для iPhone, iPad и Android. Axure удобен для прорисовки диаграмм, аннотаций, спецификаций. В программе можно делать целые сайты. Во время работы над проектом формируются файлы HTML, Javascript, CSS.

b_5978aa168ab03.jpg

Разработка прототипа в Axure: максимум возможностей для дизайнера

Есть возможность бесплатной работы в течение месяца. Наши дизайнеры используют Axure. Стоимость: от 300$ (разовый платеж).

6. Principle

Довольно быстрая, интуитивно понятная десктопная программа, не требующая подключения к интернету. В ней можно делать интерактивные прототипы с анимациями. Есть инструменты для устройств с тач-экранами, позволяющими определить разные типы взаимодействия: tap, scroll, drag-and-drop, долгое нажатие и др. Из прочих функций доступны: артборды, маски, предустановки. Драйвер-панель позволяет делать с прототипом интересные штуки: например, вращение какого-нибудь элемента во время свайпа.

b_5978aa186d7d1.jpg

Прототипирование в Principle

Работает на Mac, удобна пользователям Mac OSX благодаря похожим элементам интерфейса. Сложна из-за необходимости правильной организации файлов Sketch перед синхронизацией.Стоимость: 129$ (разовый платеж). 14 дней бесплатного тестирования.

7. Fluid

Программа работает с мобильными приложениями. В ней можно сделать прототип для Android, iOS, а также Windows. По сути, это приложение для браузера на HTML5. Также проста в использовании, с быстрым функционалом, позволяет сразу же оценивать результат на мобильнике. Имеет библиотеку из более 1500 элементов. С Fluid легко редактировать перетаскиванием, создавать анимации, программа поддерживает жесты, действия на прикосновения, drag-and-drop, повторение шаблона на страницах и переходы между ними, библиотеки iPhone и Android, работу со своими изображениями и скриншотами. Готовый макет можно переводить в различные форматы, в том числе в PDF и HTML. Есть возможность совместного рабочего процесса с коллегами.

b_5978aa19ab40a.jpg

Рабочее пространство для создания прототипа в Fluid

Сервис облегчает задачи программистам: с ним легче разобраться со структурой, функциональностью проекта, представить все в конечном варианте. Таким образом, оптимизируется вся разработка и связь с базой данных. В Fluid проще собирать все экраны в один проект. Стоимость: от 15$ в месяц. Есть бесплатная версия.

8. Framer

Это инструмент для продвинутых. Здесь прототип разрабатывается в коде, c использованием языка CoffeeScript. Но не стоит пугаться, создание кода во Framer — достаточно увлекательный процесс, программа снабжена инструкциями, освоить ее может даже неподготовленный. Во Framer можно делать интерактивные анимации. Пользователям нравится то, что программа заставляет как следует продумывать логику и структуру дизайна.

b_5978aa1aed80b.jpg

Framer: прототипирование в коде

Работает на Mac. Интегрируется со Sketch и Photoshop. Во Framer возможно все в рамках JavaScript — например, использование живых данных или акселерометра .Стоимость: от 129$ в год.

9. Flinto

Еще один давно известный инструмент. С его помощью также можно делать интерактивные прототипы. Здесь представлены все нужные инструменты для создания анимаций, а также специальная система, с помощью которой можно работать с несколькими экранами приложений. Можно выбрать две версии: Flinto Lite, а также Flinto for Mac. Последняя обладает широким функционалом для создания анимаций, мощная удобная программа. Ее быстрее всего освоить тем, кто работал на Mac OSX. Имеется плагин для Sketch, это упрощает воссоздание дизайнов. Есть недостатки: Flinto for Mac работает с шаблонами под мобильники и прототипом здесь возможно делиться исключительно с теми, кто установил Flinto for Mac.

b_5978aa1c3480e.jpg

Процесс создания прототипа в Flinto for Mac

Стоимость: от 20$ в месяц.

Какой сервис выбрать?

Ваш выбор будет зависеть от задачи и бюджета. Простой макет, который поможет собрать мысли воедино, можно создать в программе, вроде POP или PowerMockup. Для более масштабных проектов используйте многофункциональные программы типа: Axure, Fluid, Principle.

Главное, что вы должны понимать, — это то, что даже лендинг на шаблоне нуждается в прототипировании. Внимание к деталям на этом этапе предупредит появление багов.

spark.ru

Прототипирование сайта — 11 программ и сервисов

Featured-Image

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

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

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

Ну что ж, рассмотрим их.

1. INVISION

InVision

InVision является одной из наиболее широко используемых программ для создания прототипов на рынке. Она используется такими брендами, как Twitter, Nike и Sony. Программное обеспечение состоит из простых инструментов drag-and-drop, которые облегчают проектирование UX-проектов. Можете протестировать ваш проект в браузере, на мобильном телефоне и даже в режиме реального времени. Программа также пригодна для совместной работы с поддержкой таких облачных хранилищ, как Dropbox, Google Drive и Slack.

Цена: от 0$ за 1 прототип.

Поддерживаемые платформы: На основе браузера; Все браузеры

2. UXPIN

UXPin

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

Цена: от 19$/месяц.

Поддерживаемые платформы: На основе браузера; Все браузеры

3. MARVEL APP

Marvel App

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

Цена: от 0$ для основных функций.

Поддерживаемые платформы: Safari и Chrome; Поддержка Firefox в разработке

4. GLIFFY

Gliffy

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

Цена: в 0$ за 5 схем.

Поддерживаемые платформы: На основе браузера; Все браузеры

5. OMNIGRAFFLE

OmniGraffle

OmniGraffle является многоцелевой программой OmniGroup, которой можно пользоваться для создания макетов веб-сайтов, помимо всего прочего. Программа позволяет создавать основной макет для вашего сайта различными способами, включая использование Apple Pencil на iPad. Программа имеет функции распознавания формы, если вы предпочитаете черчение своих схем использованию инструментов drag-and-drop.

Цена: от 49 .99$.

Поддерживаемые платформы: Mac и iOS

6. MOQUPS

Moqups

Moqups программой разработки макетов и прототипов, которая позволяет разрабатывать простые макеты для сайтов, прежде чем приняться за этапы UX. Вы сможете объединять страницы со ссылками, добавлять свои изображения, экспортировать файлы в PDF/PNG и многое другое. Это программа отлично подходит, если вам нужен простой способ показать ваши идеи клиентам и членам команды. Программа используется такими компаниями как Mozilla, Intel и BBC.

Цена: от 0$ за 1 проект.

Поддерживаемые платформы: На основе браузера; Все браузеры, Chrome App Available

7. AXURE

Axure

Axure – еще одна мульти-программа, которая позволяет создавать макеты и прототипы веб-сайта для браузеров на рабочем столе и для мобильных устройств. Программа позволяет начать работу на черно-белом этапе «эскиза» перед добавлением логотипов, изображений, цветов и шрифтов. После этого вы можно перейти в расширенный этап прототипирования, где вы сможете протестировать различные конструкции UX.

Цена: от 289$ за одну лицензию.

Поддерживаемые платформы: Windows и Mac

8. JUSTINMIND

Justinmind

Justinmind – популярная программа разработки макетов и прототипов, используемая Google, Adobe и Oracle. Она позволяет полностью распланировать, как будет выглядеть, восприниматься и функционировать ваш сайт, а также с ее помощью вы сможете создавать сетевые и мобильные приложения. Дизайнеры могут пользоваться многочисленными возможностями интеграции для максимизации своего опыта использования этой программы. Программа включает в себя Adobe Illustrator, используемый для равномерного переноса файлов SVG из Illustrator в Justinmind.

Цена: от 19$/месяц.

Поддерживаемые платформы: Windows и Mac

9. MOCKINGBIRD

Mockingbird

Mockingbird – макетное приложение с простыми функциями прототипирования UX . Оно имеет инструменты drag-and-drop, которые можно использовать для быстрого построения макетов, а элементы UI позволяют установить связь между страницами, давая вам возможность разработать макет, стиль и схему веб-узла вашего сайта с помощью одного инструмента.

Цена: от 12$ в месяц за 3 проекта.

Поддерживаемые платформы: На основе браузера; Все браузеры

10. HOTGLOO

HotGloo

HotGloo – программа разработки макетов и прототипов, используемая такими компаниями как NBCUniversal, Disney и Sky. Помимо доступного режима создания макетов, программа обладает полным списком элементов и встроенным набором шаблонов пользовательского интерфейса. Она также подходит для сотрудничества команд, а ваши клиенты могут создавать аннотации для записи комментариев, если вам необходимо показать им макеты, прежде чем начать работу с проектами.

Цена: от 14$ в месяц за 2 проекта.

Поддерживаемые платформы: На основе браузера; Все браузеры

11. MOCKPLUS

Mockplus

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

Цена: от 10$/месяц.

Похожие статьи:

blog.seonic.pro

Программы для разработки прототипа сайта | Ресурсы

15 июня 2012

Каркасный макет, или иначе прототип, является простым и эффективным способом разработки сайта на начальном этапе. Он идеально подходит в случаях, когда нужно собрать все идеи воедино и при этом затратить как можно меньше времени, т.к. количество «подходов» может исчисляться десятками. За последние несколько лет этап прототипирования стал неотъемлемой частью в разработке дизайна любого сайта. Это одна из причин появления большого количества программ и приложений позволяющих проектировать макеты сайтов.

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

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

WireframeSketcher может быть установлен как плагин для Eclipse или любой другой IDE. Он так же доступен как отдельная программа для Windows, Mac OS X или Linux. Есть возможность выбора между двумя стилями оформления внешнего вида каркаса: эскиз/скетчи (с рисованными линиями) или чистота (с четкими прямыми линиями). Вы так же можете создавать интерактивные прототипы и делать раскадровку каркасов. Программа платная, триальный период рассчитан на 14 дней.

WireframeSketcher

PowerMockup — дополнение для Microsoft PowerPoint, добавляющее инструменты для разработки прототипов. Представляет собой набор библиотек, состоящих из различных значков и элементов. В функционал встроены возможности создавать свои собственные элементы, используя стандартные формы PowerPoint, и добавлять их в свою библиотеку. PowerMockup доступен только для Windows и только для PowerPoint 2007 и 2010.

PowerMockup

Еще один инструмент для прототипирования под Windows. Несмотря на то, что SketchFlow немного сложение в плане обучения, в отличие от PowerMockup, он имеет гораздо больше функций и каркасных элементов, особенно когда дело доходит до разработки интерактивных прототипов, которые имитируют реальные функции. SketchFlow входит в состав пакета Expression Studio 4 Ultimate. Бесплатную демо-версию на 60 дней вы можете скачать с сайта Microsoft.

SketchFlow

Axure RP — самая известная программа из представленных. Обладает полным набором функций необходимых для создания прототипов. Так же предоставляет возможности для разработки высококачественных каркасов дизайна, интерактивных макетов и создания подробных спецификаций. Есть версии для Windows и Mac OS X. На сайте можно скачать бесплатную пробную версию сроком на 30 дней.

Axure RP

Последняя программа в обзоре. Доступна как для Windows, так и для Mac OS X. При первом запуске, используется внешний вид среды Windows XP, что заставляет выглядеть приложение немного устаревшим. Это сразу отпугивает многих пользователей, но зайдя в настройки, вы сможете легко переключиться на другую тему оформления через выпадающее меню в панели инструментов. По сравнению с аналогами, MockupScreens может похвастать сравнительно небольшим количеством элементов, зато есть функция для комментирования отдельных блоков с возможностью их предварительной группировки.

MockupScreens

На этом мы заканчиваем наш обзор. Надеемся, что среди этих двух статей вы найдете необходимый инструмент для ваших задач.

womtec.ru

​Сервисы для создания прототипа сайта

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

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

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

4 причины создать прототип сайта:

  1. Четкое представление о том, какая информация необходима на каждой странице веб-сайта. Вы контролируете конечный результат и вам не нужно объяснять «на пальцах», что вы хотите получить.
  2. Прототип легко изменять, ведь он состоит из схематичных черно-белых элементов. Если в процессе разработки сайта вы захотите внести изменения в структуру, то сделать это гораздо проще именно на схеме, а не в готовом дизайне.
  3. Экономия времени. Тщательное планирование этапов разработки помогает концентрироваться на одной задаче и эффективно её решать в установленные сроки. То есть, создавая прототип, вы не распыляетесь на подборку цветовой схемы сайта и оформления.
  4. Точка восстановления и подстраховка. Если вы работаете на заказ, то утвержденный клиентом прототип защитит от бесплатных переделок. Если клиент требует значительных правок в уже принятом им макете, то они вносятся за дополнительную плату.

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

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

Команда SMS Aero выбрала несколько популярных сервисов для прототипирования и решили рассказать об их особенностях.

Balsamiq Mockups

MyPVR-0ImEity9faoOiEvmLB-PJs57L9r7UWe9QP

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

Кроме стандартных десктопных решений сервис предлагает несколько макетов для мобильных устройств, но для прототипирования под iPhone и Android – это не самое лучшее решение.

Проекты сохраняются в собственном формате для последующего редактирования или в PDF и PNG для экспорта. Имеется опция просмотра прототипа в полноэкранном виде. Доступ к сервису стоит 12 долларов в месяц (можно одновременно вести не более 3 активных проектов).

Wireframe.cc

-ozaERZ-IH_yxNy_uVMpy3kW_im3dVuhuGyaI-Ud

Главное преимущество этого сервиса – минималистичный подход к созданию прототипов. Сервис имеет простейший интерфейс, который понятен начинающему разработчику. Wireframe.cc – ничего лишнего, только самые необходимые элементы для создания каркаса сайта.

Зарегистрировавшись на сервисе, вы можете сразу же приступить к работе, просто перетаскивая мышью в рабочее пространство нужные элементы. Для сохранения проекта достаточно нажать кнопку «Save». Сервис создаст уникальный адрес сайта, которым можно поделиться с коллегами по работе или отправить клиенту.

Стандартная версия сервиса бесплатна. Разработчики планируют выпуск платной премиум версии с расширенным функционалом.

Pencil Project

0Y5_LvHvP6i402FdSSmuwfspka_ZHIceDWlghnZN

Этот сервис, по сути, плагин для FireFox с множеством функций по разработке прототипов. Создавать схемы сайтов можно непосредственно в браузере. Точно так же ими можно делиться с другими пользователями. Сервис-плагин, как и Wireframe.cc, минималистичен – простой интерфейс, набор только необходимых графических элементов.

Однако пользователь может при желании использовать расширенные возможности плагина: поддержка файлов OpenOffice, функции работы с текстом и многостраничными документами, экспорт файлов в разных форматах и т.д.

HotGloo

6vnNzRLL40gL-BCPe1MdqZlb1iairG1X6RWpSboH

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

Сервис платный: от 7 до 48 долларов в месяц.

iPlotz

z-b5lV8Qv5l9jU_CEvOxmQmSD4jufW5VZLRMQA0v

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

Платный тариф предлагает расширенные возможности и богатый инструментарий для экспериментирования с макетами сайтов.

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

Напоследок ещё один небольшой обзор бесплатных сервисов для прототипирования:

  • NinjaMock – предоставляются основные векторные элементы для строительства макета: прямоугольники, эллипсы, кривые, формы, меню и т.д. Поддерживает все популярные платформы и ОС.
  • Mockingbot – сервис для создания прототипов мобильных приложений. Бесплатная версия позволяет вести один полноценный проект. Сервис имеет все необходимые графические элементы, чтобы создавать макеты для AppStore.
  • CogTool – сервис создает довольно простые прототипы пользовательского интерфейса. Фишка инструмента в том, что он дает прогноз эффективности макета, а также вычисляет необходимое время на реализацию проекта.

spark.ru

Обзор 22 инструментов для создания прототипов

Необходимость использования прототипов при создании сайта начала активно обсуждаться несколько лет назад. Постепенно наметился отход от схемы «дизайнер рисует макет – программист прикручивает к нему код».

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

Для удобства мы свели всю информацию в отдельную таблицу, в которой сравнили сервисы по следующим параметрам:

  • Язык – язык интерфейса;
  • Бесплатный тариф – наличие бесплатного тарифа или пробной версии;
  • Самый дешевый тариф – стоимость самого дешевого тарифа или лицензии;
  • Особенности – отличительные «фишки» инструмента;
  • Интеграции – возможные интеграции с другими сервисами;
  • Скачиваемое приложение / веб-версия – некоторые из сервисов представляют из себя скачиваемые программы, некоторые работают прямо в браузере, а некоторые доступны в двух вариантах. В таблице указано наличие онлайн-версии / скачиваемого приложения и поддерживаемые ОС для каждого инструмента;
  • Мобильное приложение – наличие мобильного приложения для предпросмотра прототипов;
  • Техподдержка – возможные способы связи с технической поддержкой сервиса;
  • Клиенты – список самых известных клиентов.

Чтобы скачать таблицу, кликните на скриншот ниже.

Нажмите на скриншот, чтобы скачать таблицу в формате Excel

1. Axure

Axure – крупнейшее и наиболее известное приложение для прототипирования, позволяет создавать высококачественные прототипы сайтов и мобильных приложений. Обладает широким функционалом с большим набором инструментов. Требует установки софта на ПК, онлайн-версия недоступна. Работает с Windows и macOS.

Интерфейс Axure

2. Origami Studio

Origami Studio – полностью бесплатное удобное приложение от Facebook. Работает с macOS. Синхронизуется с Sketch. У приложения есть сообщество на Facebook, где пользователи могут делиться своими прототипами, обсуждать их создание и помогать друг другу.

Так выглядел бы прототип, созданный в Origami Studio, на iPhone 7

3. Proto.io

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

Интерфейс Proto.io

4. Vectr

С Vectr можно работать как онлайн, так и установив приложение на ПК. При этом обе версии синхронизируются друг с другом, давая возможность работать над одним прототипом как онлайн, так и с компьютера. Каждому создаваемому проекту присваивается URL, который можно отправить коллегам или клиенту для внесения комментариев и правок.

Попробовать Vectr в деле можно даже без регистрации. Так выглядит демонстрационная веб-версия сервиса

5. Atomic

Главная особенность Atomic – широкий функционал. Приложение делает упор на скорость – как работы, так и связи с коллегами для внесения изменений в прототип. Синхронизируется с Sketch. Готовыми прототипами или отдельными блоками могут пользоваться ваши коллеги при работе над собственными проектами.

Интерфейс Atomic

6. InVision

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

Интерфейс командной работы в InVision

7. Adobe Experience Design

Adobe Experience Design входит в пакет Creative Suite от Adobe и синхронизируется со многими сервисами из этого пакета. Главные особенности: быстрый переход из прототипа в приложение, возможность моментально посмотреть изменения в прототипе на мобильных устройствах. Главный минус – десктопное приложение доступно только для Windows 10.

8. Principle

Principle отлично подходит для создания анимированных прототипов. Приложение доступно только для Mac.

Образец прототипа для Apple Watch, созданного в Principle

9. Just in mind

Главное преимущество Just in mind состоит в том, что в сервисе доступно множество элементов и жестов, а также готовые шаблоны прототипов.

Just in mind

10. Moqups

Moqups – еще один достаточно популярный сервис для создания прототипов. Главная особенность – неограниченное количество пользователей на платных тарифах.

Прототип мобильного приложения, созданный в Moqups

11. Marvel

Marvel – инструмент прототипирования, в котором возможно создавать прототипы для всех устройств, включая умные часы.

Интерфейс Marvel

12. Mockplus

Основная «фишка» Mockplus – возможность просматривать прототипы на мобильных устройствах, сканируя QR-код, 3000 иконок в платных тарифах.

Домашняя страница Mockplus

13. UXPin

Как и в Marvel, в UXPin можно создавать прототипы приложений для умных часов. Правда, только для часов, работающих на Android.

Интерфейс создания прототипа мобильного приложения

14. Flinto

Flinto – сервис прототипированния, в котором есть готовые шаблоны для самых распространенных разрешений мобильных устройств, а также встроенные анимации переходов в приложениях на Android и iOS.

Flinto для Mac

15. Sketch

Sketch – знаменитый инструмент создан эксклюзивно для Mac, так что он лучше всего подойдет для создания прототипов для приложений на iOS.

Интерфейс Sketch

16. OmniGraffle

OmniGraffle доступен только для Mac и iOS, причем лицензии приобретаются отдельно. Сам сервис является мультиинструментом, и создание прототипов – не самая главная его функция.

Структура сайта в OmniGraffle

17. Pidoco

Главная особенность Pidoco – интуитивный drag’n’drop интерфейс, совместная работа над проектом.

Интерфейс Pidoco

18. Mockingbird

Mockingbird – простой сервис для создания несложных прототипов. Если вам нужно быстро создать базовый прототип, то, вполне возможно, Mockingbird вам подойдет.

Интерфейс Mockingbird

19. iPlotz

iPlotz – очень простой сервис для создания несложных прототипов. Возможно, кому-то именно это и нужно.

Веб-версия iPlotz

20. Proto Share

В платных тарифах Proto Share можно создавать бесконечное количество проектов. Кроме того, у сервиса очень долгий триал-период – целых 30 дней.

Десктопного приложения у Proto Share нет, сервис доступен только в веб-версии

21. MockFlow

Самый дешевый тариф Mockflow стоит всего $14 / месяц, при этом в лицензию входит множество инструментов, в том числе для создания сайтов и баннеров, а также сервис совместной работы над дизайн-проектами.

Интерфейс MockFlow

22. Mockup Builder

Mockup Builder – простой инструмент со стандартным набором функций. Ничего необычного. Однако среди клиентов можно встретить известные компании, так что не стоит обходить Mockup Builder стороной.

Mockup Builder

Прототип – незаменимый инструмент при разработке сайта

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

obzor-22-instrumentov-dlya-sozdaniya-prototipov

texterra.ru

Подборка онлайн сервисов для создания прототипов

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

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

2. Pencil — расширение для браузера Mozilla Firefox

3. Mockflow — очень отличный онлайн сервис для рисования прототипов. Поддерживает различные Wireframe прототипы(Twitter Bootstrap, Facebook App, Mobile Web, Drupal, Joomla, WordPress и т.д.)

4. Balsamiq — не мог не отметить эту замечательную программу, у которой присутствует онлайн демо, в котором все же можно создавать некое подобие прототипов. Если демо понравиться, то можете себе приобрести. Данная программа мне очень сильно по душе, попробуйте и вы 😉

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

6. Hot Gloo — это приложение для создания каркаса в режиме онлайн, которое в настоящее время также является бесплатной бета-версией. Вы можете перетаскивать и вставлять элементы, масштабировать, объединять, называть и переименовывать их. Также Вы сможете редактировать, комментировать и передавать любой элемент процесса разработки коллегам и клиентам.

7. Бесплатное программное обеспечение для построения каркаса Gliffy дает возможность простого создания каркасов веб-сайтов и передачи веб-моделей. Вы можете также экспортировать свой каркас для будущего использования в других приложениях.

8. Cacoo — это удобный для пользования онлайн-инструмент для рисования, который позволяет создавать множество диаграмм, таких как карты сайта, каркасы и сетевые диаграммы.

9. Мощный и простой для использования диаграммный онлайн-инструмент, который работает прямо в вашемвеб-браузере. Благодаря интуитивному интерфейсу пользователя и встроенным свойствам совместной работы, Creately облегчает работу с командами.

10. Lovely Charts — это приложение для создания диаграмм, позволяющее создавать профессиональные диаграммы всех видов, такие как блок-схемы, карты сайтов, бизнес-процессы, организационные структуры, каркасы и многое другое…

11. Mockup Builder — это новый взгляд на решение старой проблемы создания прототипов и предоставления набросков клиентам.

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

pontyk.com.ua

Как выбрать сервис для создания прототипа: 9 инструментов

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

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

Итак, поехали.

1. POP

Самый простой способ сделать прототип лендинга — это рисунок от руки. Макет рисуем на бумаге, затем фотографируем и после этого преобразуем в программе POP. Но, признаться, проще и аккуратнее нарисовать отдельный макет прямо в программе. Для этого в POP есть несколько самых необходимых функций: вставить картинку, нарисовать область прямоугольной или круглой формы, указать, где разместить текст (или прямо написать тот, который подскажет копирайтер).

image5Процесс создания прототипа в программе POP. Минимум функций, зато и минимум усилий

Программа простейшая. Здесь не получится крутого прототипа. Минимум инструментов для минимума задач. Но при этом POP поддерживает любой девайс: iPhone, iPad, Apple Watch, Apple TV, Android. Здесь есть также рабочая сеть, куда можно позвать коллег и клиентов, чтобы обсуждать весь нехитрый процесс. И, конечно, POP интегрируется с Dropbox.Стоимость: от 14$ в месяц. Есть бесплатная версия.

2. Balsamiq

Тоже несложная программа и по функционалу не лучшая. Однако Balsamiq предлагает более широкие возможности, имеет большой набор UI-элементов. Здесь можно выбирать значки, рисовать кнопки разных форм, добавлять таблицы, работать со шрифтами. Удобнее выглядит само рабочее поле: есть разметка. В Balsamiq также можно создавать макеты сайтов и карты. Он подходит тем, кто не силен в фотошопе.

Прототипирование в Balsamiq: как на бумаге…Прототипирование в Balsamiq: как на бумаге…

Программу используют непосредственно в браузере или загружают в качестве приложения Adobe AIR.

Работает на Mac или Windows, интегрируется с Google Docs.

Стоимость: от 12$ в месяц. 30 дней бесплатного тестирования.

3. InVision

Это приложение для преобразования статических макетов в прототипы и мокапы с интерактивными элементами, то есть средство «оживления» макета. InVisionимитирует полноценную работу будущего сайта. На нем можно связывать макеты отдельных страниц в прототип. Кроме того, это отличный инструмент для работы в студии. Программное обеспечение включает несложные инструменты drag-and-drop, благодаря которым процесс проектирования UX-проектов становится легче.

Invision: простые инструменты оживят ваш макетInvision: простые инструменты оживят ваш макет

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

Функционирует на основе браузера, поддерживает все браузеры. Работает с iOS и Android. Интегрируется с Dropbox, Google Drive, Box, GitHub, Slack и другими программами.

Стоимость: от 15$ в месяц. Есть бесплатная версия.

4. PowerMockup

PowerMockup — это простой набор инструментов, подходящий тем, кто любит работать в PowerPoint. Он своего рода дополнение к PowerPoint, встроен в пакет Microsoft Office и предлагает дополнительные возможности и эскизы для прототипирования. Имеется множество разнообразных UI-элементов пользовательского интерфейса и порядка 650 значков. Библиотеку форм можно пополнять своими элементами.

В PowerMockup коллеги могут работать над проектом вместе, файлы легко экспортируются в PNG, JPEG, BMP, в векторных графических символах, таких, как WMF или EPS, а также видео и документах PDF. Благодаря принадлежности Microsoft Office работа возможна также в Word и Excel. К примеру, делаем спецификацию в PowerPoint, а после открываем ее в Word.

PowerMockup: поможет сделать прототип прямо в PowerPointPowerMockup: поможет сделать прототип прямо в PowerPoint

PowerMockup доступен только для Windows.

Стоимость: от 60$ (разовый платеж). 30 дней тестирования.

5. Axure

Это профессиональный UX-инструмент, помогающий разработчикам создавать уже сложные интерактивные прототипы. Делает веб-приложения, работает на Mac и Windows. Здесь удобно перетаскивать элементы, форматировать и менять размеры виджетов, создавать страницы, папки, также очень легко тестировать виды будущего лендинга под различные устройства. То есть, можно быстро визуально редактировать, а также скачивать библиотеки для виджетов. В программе имеется поддержка фреймов под iOS, а также библиотеки для iPhone, iPad и Android.

Axure удобен для прорисовки диаграмм, аннотаций, спецификаций. В программе можно делать целые сайты. Во время работы над проектом формируются файлы HTML, Javascript, CSS.

Разработка прототипа в Axure: максимум возможностей для дизайнераРазработка прототипа в Axure: максимум возможностей для дизайнера

Есть возможность бесплатной работы в течение месяца. Наши дизайнеры используют Axure.

Стоимость: от 300$ (разовый платеж).

6. Principle

Довольно быстрая, интуитивно понятная десктопная программа, не требующая подключения к интернету. В ней можно делать интерактивные прототипы с анимациями. Есть инструменты для устройств с тач-экранами, позволяющими определить разные типы взаимодействия: tap, scroll, drag-and-drop, долгое нажатие и др. Из прочих функций доступны: артборды, маски, предустановки. Драйвер-панель позволяет делать с прототипом интересные штуки: например, вращение какого-нибудь элемента во время свайпа.

Прототипирование в PrincipleПрототипирование в Principle

Работает на Mac, удобна пользователям Mac OSX благодаря похожим элементам интерфейса. Сложна из-за необходимости правильной организации файлов Sketch перед синхронизацией.

Стоимость: 129$ (разовый платеж). 14 дней бесплатного тестирования.

7. Fluid

Программа работает с мобильными приложениями. В ней можно сделать прототип для Android, iOS, а также Windows. По сути, это приложение для браузера на HTML5. Также проста в использовании, с быстрым функционалом, позволяет сразу же оценивать результат на мобильнике. Имеет библиотеку из более 1500 элементов. С Fluid легко редактировать перетаскиванием, создавать анимации, программа поддерживает жесты, действия на прикосновения, drag-and-drop, повторение шаблона на страницах и переходы между ними, библиотеки iPhone и Android, работу со своими изображениями и скриншотами. Готовый макет можно переводить в различные форматы, в том числе в PDF и HTML. Есть возможность совместного рабочего процесса с коллегами.

Рабочее пространство для создания прототипа в FluidРабочее пространство для создания прототипа в Fluid

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

Стоимость: от 15$ в месяц. Есть бесплатная версия.

8. Framer

Это инструмент для продвинутых. Здесь прототип разрабатывается в коде, c использованием языка CoffeeScript. Но не стоит пугаться, создание кода во Framer — достаточно увлекательный процесс, программа снабжена инструкциями, освоить ее может даже неподготовленный. Во Framer можно делать интерактивные анимации. Пользователям нравится то, что программа заставляет как следует продумывать логику и структуру дизайна.

 Framer: прототипирование в кодеFramer: прототипирование в коде

Работает на Mac. Интегрируется со Sketch и Photoshop. Во Framer возможно все в рамках JavaScript  — например, использование живых данных или акселерометра .

Стоимость: от 129$ в год.

9. Flinto

Еще один давно известный инструмент. С его помощью также можно делать интерактивные прототипы. Здесь представлены все нужные инструменты для создания анимаций, а также специальная система, с помощью которой можно работать с несколькими экранами приложений. Можно выбрать две версии: Flinto Lite, а также Flinto for Mac. Последняя обладает широким функционалом для создания анимаций, мощная удобная программа. Ее быстрее всего освоить тем, кто работал на Mac OSX. Имеется плагин для Sketch, это упрощает воссоздание дизайнов. Есть недостатки: Flinto for Mac работает с шаблонами под мобильники и прототипом здесь возможно делиться исключительно с теми, кто установил Flinto for Mac.

Процесс создания прототипа в Flinto for MacПроцесс создания прототипа в Flinto for Mac

Стоимость: от 20$ в месяц.

Какой сервис выбрать?

Ваш выбор будет зависеть от задачи и бюджета. Простой макет, который поможет собрать мысли воедино, можно создать в программе, вроде POP или PowerMockup. Для более масштабных проектов используйте многофункциональные программы типа: Axure, Fluid, Principle.

Главное, что вы должны понимать, — это то, что даже лендинг на шаблоне нуждается в прототипировании. Внимание к деталям на этом этапе предупредит появление багов.

Источник: blog.icondesignlab.comФото на обложке: ShutterStock

infogra.ru


Смотрите также