Sofin-credit.ru

Деньги и работа
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

Время чтения: 6 минут Нет времени читать? Нет времени?

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

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

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

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

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

1. Axure

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

2. Origami Studio

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

3. Proto.io

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

4. Vectr

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

5. InVision

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

6. Adobe Experience Design

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

7. Principle

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

8. Just in mind

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

9. Moqups

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

10. Marvel

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

11. Mockplus

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

Читать еще:  Заработок на регистрациях на зарубежных сайтах

12. UXPin

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

13. Flinto

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

14. Sketch

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

15. OmniGraffle

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

16. Pidoco

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

17. Mockingbird

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

18. iPlotz

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

19. Proto Share

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

20. MockFlow

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

21. Mockup Builder

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

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

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

Создание прототипа сайта: 7 инструментов для маркетолога

Как объяснить четко, каким вы видите будущий сайт или мобильное приложение? Решение – создание прототипа.

В этой статье вы узнаете что такое прототип и как его создать с помощью 7 онлайн-сервисов.

Что такое прототип сайта

Прототип – макет, или физическая реализация концепта интерфейса. Ещё 15 лет назад, когда о принципе «Mobile first» ещё никто не думал, страница-прототип содержала образцы дизайна всех элементов сайта – заголовков, списков, цитат, абзацев.

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

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

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

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

Далее – 7 вариантов, у каждого свой спектр возможностей, сложность работы и цена. Выбор за вами.

InVision

Это идеальное решение, если вам нужно «оживить» готовые макеты Photoshop или Sketch.

Читать еще:  Образцы юридических сайтов

Примечание: плагин для Adobe Photoshop и для Sketch поможет отправить проект из редактора прямо в InVision. Работает синхронизация файлов внутри проекта, с рабочим столом либо Dropbox (для этого нужны дополнительные приложения).

Главный плюс приложения – система управления проектами. Вы сохраняете эскизы в различных проектах и разделяете их на группы. Можно добавлять несколько вариантов макетов, например, для страницы «О компании», фиксировать все правки и стадии.

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

Все действия по проекту фиксируются на вкладке «Activity». Это удобно при групповой работе над макетом: вы точно знаете, кто загрузил файлы или редактировал ваш макет своими кривыми руками (либо довел его до совершенства).

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

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

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

Большой плюс – инструмент бесплатный.

Balsamiq

Нет Photoshop или Sketch? Возможно, Balsamiq – лучший инструмент для вас. Он работает, как приложение для рабочего стола. Есть и веб-версия.

Инструмент содержит внушительную библиотеку встроенных элементов UI для использования в проектах. Это экономит время: вы используете готовые пресеты (например, выпадающие меню или «аккордеоны»).

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

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

Нужно оценить несколько вариантов дизайна? Не вопрос, инструмент предлагает средства контроля версий и историю версий. Можете вернуться назад по времени и оценить, насколько продвинулся ваш дизайн.

Balsamiq предусматривает расширения сторонних разработчиков – можно добавить дополнительные иконки или инструменты управления.

Главный минус – приложение платное. Хотя цены вполне подъемны: версия для десктопа стоит $89 за одну лицензию, веб-версия на 3 проекта – $12 в месяц. Есть бесплатный пробный период на 1 месяц для некоммерческих проектов.

Moqups

Это полноценное веб-приложение позволит разработать дизайн от простого эскиза до готового макета.

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

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

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

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

Сервис платный, стоимость тарифа зависит от количества проектов и места на сервере.

Базовый тариф на 10 проектов и 1 GB на сервере обойдется в $13. Есть стартовый бесплатный тариф на 1 проект, ограниченный 300 объектами и 5 MB. Для простейшего макета (одностраничного лендинга) и полноценного общения с дизайнером этого вполне достаточно.

Вот что из этого может получиться:

Marvel

Marvel — простой и интуитивный инструмент прототипирования. Его инструмент Canvas создает эскизы и каркасные интерфейсы.

Читать еще:  Какая платформа лучше для создания сайта

Можно систематизировать наброски, загружать макеты в группы прототипов точно так же, как в InVision. Доступна базовая перелинковка элементов дизайна и создание интерактивности.

Главная фишка Marvel – ориентация на разработку мобильных интерфейсов. При создании нового проекта вы выбираете тип прототипа: сайт, приложение для iPhone, iPad,Android и даже AppleWatch.

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

Добавляйте жесты (протаскивания и т.д.): выбираете активную область, назначаете на неё действие из набора пресетов, смотрите результат. Есть подсказки, так что не запутаетесь.

Печальный момент: Marvel разрабатывался для пользователей MacOS – для них разработчики припасли дополнительные плагины и приложения. Есть, например, плагин для Sketch. Для пользователей Windows и Linux подарочков нет.

Marvel предлагает три тарифа:

  • Бесплатный – на 1 пользователя и 2 проекта.
  • Профессиональный – $12 в месяц, 1 пользователь и неограниченное число проектов.
  • Корпоративный – $48 в месяц, 4 пользователя.

Justmind

Библиотека встроенных элементов позволяет создавать примитивные эскизы и почти готовые интерфейсы. Инструмент Justmind предусматривает библиотеки для десктопных и мобильных приложений. Работает как для iOS, так и для Android и Surface.

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

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

Профессиональный тариф обойдётся в $19 за 1 пользователя в месяц.

Origami

Origami — более узкоспециализированный инструмент прототипирования, так как доступен только для MacOS. Его функции – создавать эскизы и макеты для iPad и iPhone.

Origami содержит 4 главные панели:

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

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

Origami бесплатен, веб-версии нет.

Proto.io

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

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

Гордость разработчиков – продвинутый редактор Proto.io:

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

Разработчики предлагают привязку к учетной записи Dropbox для хранения и загрузки файлов, клиент для iOS и Android и плагины для Sketch и Photoshop.

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

Тариф «Фрилансер» стоит $24 в месяц и позволяет вести 5 проектов. Если вы не работаете в веб-студии, этого хватит с избытком.

Заключение

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

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

Ссылка на основную публикацию
Adblock
detector
×
×