Как создать прототип программы для компьютера
Вы придумали мобильное приложение, которое определяет по фото, будет ли вкусной картошка фри, или выдает классный ответ на неприятную фразу незнакомца. Что дальше? Сделать простое приложение стоит от 3 тысяч долларов. Прежде чем искать деньги, попробуйте сделать прототип вашей идеи. Так можно проверить, нужен ли ваш продукт аудитории. Даже если вы не умеете программировать, можно использовать сервисы для сборки прототипа приложений.
В статье мы расскажем, какие есть сервисы, сколько стоит сделать прототип и на что обратить внимание при выборе.
Прототип — средство быстрой визуализации вашей идеи. Его можно показать заказчику или пользователю. Идею можно даже набросать на салфетке, но это не особо наглядно: пользователь мало что поймет, а разработчику будет неудобно реализовывать задуманное. Вместо рисунков на бумаге создают прототип, который может выглядеть как набор экранов или даже максимально походить на мобильное приложение, где кнопки нажимаются, а переходы переходятся.
Как создают прототип:
- Формулируют идею и требования к приложению.
- При помощи wireframe показывают, как пользователи будут взаимодействовать с интерфейсом. Wireframe — это скелет приложения. Он фокусируется на поведении пользователя и содержании будущего проекта.
Показывают то, что получилось, заказчику и конечным пользователям.
Обрабатывают комментарии, и улучшают прототип.
Этапы показа пользователям и улучшения часто повторяются.
Первое, для чего нужен прототип, — проверить работоспособность вашей идеи, насколько она нужна пользователям. СBInsight пишут, что стартапы чаще всего проваливаются, потому что в них нет потребности рынка. Прототип экономит часы разработчиков и дизайнеров: вы переделываете прототип, вместо того чтобы переделывать интерфейс самого продукта, что обойдется дороже.
Какие еще плюсы прототипа?
- отнести инвесторам, показать, как круто выйдет;
- найти прорехи в логике самой идеи;
- сразу можно будет что-то поменять и не тратить на это бюджет;
- показать потенциальным пользователям, чтобы понять, где улучшить;
- показать разработчикам, чтобы сразу было понятно, куда кодить и сколько примерно это будет стоить.
Есть классный пример того, как прототип помогает при создании продукта. В фильме The Founder Рэй Крок переосмысливает, как выглядит кухня фаст-фуда. Прежде чем делать Макдональдс каким мы его знаем и любим, владельцы чертят на теннисной площадке кухню и тестируют. Сначала получается так себе, но с третьей итерации они находят идеальное расположение зон на кухне. Если бы они сначала построили ресторан и вложили сотни тысяч в оборудование и проведение коммуникаций, это привело бы к большим убыткам.
После сборки в сервисе получается приложение разных степеней прожарки:
- Изображения, чтобы, например, добавить в презентацию.
- Прототип для тестирования на своем телефоне или для отправки ссылки тестировщикам. Он будет выглядеть как настоящее приложение или мобильный сайт, в зависимости от возможностей конкретного конструктора.
- Готовое приложение для AppStore или PlayMarket.
Поэтому если вы хотите обойтись совсем без кода, выбирайте сервисы, которые соберут приложение. Если умеете кодить или планируете работать в команде — делайте прототип, по которому разработчики смогут создать приложение. Для любой кастомной функциональности скорее всего понадобится верстальщик, дизайнер и разработчик.
Базовый же прототип или приложение можно сделать, опираясь на шаблоны. Например, журналист Арина Тарасова поделилась, как в команде проекта получилось сделать функциональное приложение для Зимнего Суриковского фестиваля искусств в Красноярске, используя сервис Glide:
«Задача была рассказать о фестивале и сделать проект максимально удобным. Мы отказались от идеи представлять проекты на конструкторах вроде Wix, Readymag, Tilda и прочих, потому что они открываются в браузере, что не всегда удобно. Еще QR-коды и аудио с Soundcloud выглядят не очень привлекательно, а мы создали много мультимедийных форматов для проекта.
К этому событию в городе запускают брендированный троллейбус, в котором висит QR-код на наше приложение. Приложение открывается, и люди включают аудиогид, который идет по маршруту этого троллейбуса, смотрят карту суриковских мест.
Нам не понадобилось никаких специальных знаний в разработке. В лайтовом режиме, где мы выполняли и другие рабочие задачи, на создание приложения ушло 2–3 дня, чтобы разобраться в интерфейсе и интегрировать туда все наши мультимедийные файлы. Так что без разработчика на этапе прототипа точно можно обойтись.
Из минусов: мы пользовались бесплатной версией, и там есть ограничения по сочетаниям цветов. Если шаблоны не совсем попадают в ваше видение, это неудобно, но все решается подпиской на сервис.
Внутри ресурса можно посмотреть статистику посещений. Так мы знаем, что люди пользуются приложением».
Далее мы рассмотрим ресурсы, в которых можно собрать прототип без знаний разработки.
Платформа для создания прототипов и прогрессивных web-приложений из Google Таблиц в качестве баз данных для приложений. В 2021 году Glide выпускают новую версию, где таблицы можно будет создавать и редактировать внутри их веб-версии.
Чтобы получилось приложение, структурируйте информацию в таблице, после чего Glide собирает новое приложение. Есть комьюнити, чтобы пообщаться, спросить совета или показать свое приложение.
Особенности:
- большая библиотека платных и бесплатных шаблонов;
- через веб-интерфейс настраиваются страницы и блоки приложений, а информацию можно редактировать в таблице;
- можно добавлять изображения и видео;
- встраивается чат, корзина и комментарии;
- подключается Google Analytics;
- приложение можно использовать по ссылке, ничего дополнительно устанавливать не нужно.
Сколько стоит: есть бесплатная версия, ограниченная по размеру таблицы и 100MB хранилища, с брендингом ресурса. Платные версии стартуют от $12 в месяц. Версия без брендинга с кастомным доменом от $32 в месяц.
Продвинутый drag-and-drop конструктор прототипов. Все делается в браузере и есть приложения, чтобы показать прототип пользователям.
Свой прототип можно показать людям на Proto.io Spaces.
Особенности:
- большая библиотека элементов;
- библиотека шаблонов, но можно собрать приложение из элементов;
- есть плагины для редакторов, чтобы добавить свой дизайн, сохранив все слои;
- удобное добавление ссылкой на тестинговый сервис, например, Usertesting;
- можно поделиться ссылкой на прототип — она откроется в мобильном браузере, встроить на свой сайт или предоставить доступ в мобильном приложении.
Сколько стоит: 15 дней пробный доступ ко всем функциям без привязки карты. От 24 долларов в месяц — можно одновременно делать 5 проектов. Есть скидки для студентов и общественных организаций.
Бесплатное десктопное приложение, делает полностью интерактивные прототипы для любой платформы. Результат можно увидеть на Android, iOS и в браузере.
Особенности:
- простые в использовании шаблоны;
- редактор надо качать, есть версия для MacOS и Windows и мобильное приложение;
- импорт из фотошопа и иллюстратора;
- экспорт в html и в нативное приложение *.apk для андроид устройств;
- можно добавить приложение на Usertesting, чтобы получить фидбек от реальных пользователей;
- есть совместное редактирование.
Сколько стоит: есть пробный период 15 дней со всеми функциями. Но бесплатно можно пользоваться инструментом для создания wireframe.от 19$ в месяц с неограниченным количеством прототипов.
Объединяет неограниченное количество пользователей для планирования, дизайна приложения и создания прототипа.
Особенности:
- включает все этапы: от прописывания логики до интерактивного прототипа;
- есть расширения для браузеров;
- библиотека шаблонов;
- около тысячи плагинов для подключения сторонних сервисов;
- совместная работа над прототипом: можно добавлять карточки в Трелло из страниц прототипа.
Превратит дизайн на Фигме в интерактивный прототип и даже нативное приложение без программирования. Есть приложение для тестирования.
Особенности:
- работает с Figma;
- подключает реальные данные;
- генерирует нативный код для Android и iOS.
Сколько: бесплатно неограниченное количество проектов, но можно поделиться проектом не более трех раз, на проекте будет лого ресурса. Платные подписки от €19 в месяц. Они позволяют делиться проектом без ограничений и включают техническую поддержку через электронную почту. В тарифе от €49 в месяц вы добавляете свой брендинг и получаете техподдержку вплоть до публикации приложения.
Собирает прототипы и полноценные мобильные приложения, используя данные из таблиц. Идеально подойдет, например, владельцам малого бизнеса, которые хотят сами сделать систему учета.
- обработка данных из разных таблиц и баз данных, главное, правильно организовать в них информацию;
- интеграция карт;
- в приложениях можно использовать NFC или QR-коды;
- есть шаблоны;
- для использования придется скачать приложение.
Сколько: Потестить и показать можно бесплатно, платные тарифы начинаются, если вам нужно подключить больше 10 человек — от $5/месяц.
Делает прототипы и вполне функциональные голосовые приложения для инструментов Alexa и действий Google. Есть группа на фейсбук, где можно похвастаться или спросить совета. Активно обновляются, прислушиваясь к идеям пользователей.
Особенности:
- прототип можно сделать в браузере или сразу загрузить на смартфон и протестировать;
- логика и структура создается перетаскиванием блоков;
- можно работать с командой;
- есть режим доски;
- режим тестирования на сайте.
Сколько: два проекта бесплатно для индивидуального использования. Oт 40$ в месяц, для каждого редактора нужен отдельный план
Подойдет для новичков. В веб-версии можно собрать постраничный интерактивный прототип приложения для всех устройств, включая умные часы. Чтобы посмотреть прототип, пользователю понадобится установить приложение.
При помощи своего отдельного продукта может превратить ваш прототип на бумаге в интерактивный прототип. Сфотографируйте свои наброски, свяжите объекты, которые должны быть интерактивными с другими объектами и экранами
Особенности:
- помимо приложений в конструкторе можно собирать прототипы сайтов;
- импорт макета из Sketch, или можно использовать готовый макет Sketch из библиотеки;
- добавление в прототип гифок, видео и карт;
- можно комментировать и делиться ссылкой на прототип.
Сколько: бесплатно для одного проекта, больше — от $12 в месяц.
В этом конструкторе больше всего функций для командной работы с дизайнером. У Invision есть плагин Craft, который превратит дизайн-макет в прототип прямо в Sketch. Показать прототип пользователю можно через приложение. Если возникли сложности, можно задать вопрос официальному аккаунту техподдержки в Twitter.
Особенности:
- режим доски;
- проектный менеджмент для дизайнеров;
- тестирование;
- умеет быстро подставлять шаблонную информацию, например, имена или фото с Unsplash;
- можно создавать ветки комментариев по конкретным разделам проекта;
- комментирование в режиме реального времени.
Сколько: бесплатно до 10 активных пользователей, больше — $7.95 за пользователя в месяц.
Подойдет владельцам макбуков, нужен аккаунт разработчика Apple. Показать прототип можно в Origami, мобильном приложении для iPhone или с макбука с установленным Origami. Есть активное комьюнити, где можно задать вопрос.
Особенности:
- мощные анимации;
- функции «экспорта кода», которые позволяют преобразовывать визуальный дизайн в письменный код;
- тестировать можно на мобильном устройстве, подключенном к ноутбуку;
- есть поддержка Figma и Sketch.
Cколько: бесплатно.
Все упомянутые сервисы обещают относительно низкий порог входа. Но в любом случае вам придется разбираться в редакторе и базовой терминологии. Для этого многие сервисы создают поддерживающие комьюнити. Например, Thunkable поддерживают возможность задать вопрос на сайте, Bravostudio предлагает поддержку через почту в платных версиях, а Voiceflow называют свое активное комьюнити с поддержкой своим главным преимуществом. Даже если вы пользуетесь бесплатной версией ресурса, обращайтесь за помощью на внутренних форумах, работа над похожими проектами может повысить шанс на ответ.
Еще есть вариант зарегистрироваться на обучающих сайтах. Например, No Code в платной подписке предлагают личные консультации и групповые сессии по созданию приложения. На Makerpad можно спросить на форуме и посмотреть дополнительные туториалы, а в платной подписке получать индивидуальную поддержку.
Каждый дизайнер и разработчик знают, что детализированные макеты – это основа для любого цифрового проекта. Неважно, берете ли вы карандаш, чтобы быстро набросать эскиз на бумаге или же используете свои высокоточные наработки макета и начинаете писать код для первого интерактивного прототипа, инструменты по созданию прототипов помогут вам избежать бесчисленных проблем, бессонных ночей и превышения бюджета.
Каждый проект по-своему уникален. Особое значение имеет то, что инструменты для создания прототипов могут помочь вам в решении любой задачи.
Сегодня я перечислил несколько лучших инструментов, существующих в индустрии.
Эти инструменты используют все многообразие различных методов по созданию прототипов. Они помогут вам сэкономить время и создать наилучший полнофункциональный прототип.
InVision поможет вам с любым веб- или мобильным проектом. Не важно для какой операционной системы создается проект – iOS или Android, данный инструмент работает с ними обеими. Также InVision рассчитан на работу в команде. С его помощью можно с легкостью работать над проектом и обмениваться идеями совместно с другими членами вашей команды.
Marvel – это еще один крупный игрок на рынке инструментов по созданию прототипов. Он позволяет вам преобразовать ваши макеты, дизайны и наброски в прототипы мобильных и веб-приложений или даже в прототип приложения для Apple Watch.
Proto.io – это превосходный инструмент, который позволяет создавать полностью интерактивные прототипы мобильных приложений. Вы сможете создавать интерактивные высокоточные прототипы, которые будут выглядеть и работать именно так, как должно работать ваше приложение. И при этом данный инструмент не требует от вас навыков написания кода.
Moqups – это еще один широко известный инструмент. Но он немного отличается от остальных. Платформа основана на HTML5, она является прекрасным инструментом для создания макетов с масштабируемой векторной графикой (SVG), которые не зависят от разрешения экрана.
Fluid – это инструмент для создания прототипов мобильных приложений. Существует множество обзоров данного онлайн-инструмента, и многие пользователи говорят, что он очень быстро работает, удобен для пользователя и интуитивно понятен.
Prott – это инструмент для быстрого создания прототипов и для совместной работы. Он берет ваши идеи из первых набросков и переносит их в интерактивный прототип, который работает, как настоящее приложение. Также Prott является превосходным инструментом для создания дизайна и взаимодействия с другими членами команды.
Flinto позволяет быстро и легко создать прототип, который выглядит как реальный продукт и правильно работает. Он не нарушает ваш текущий рабочий процесс, так как использует проекты того, как информация должна отображаться на экране, которые вы уже ранее создали. Flinto прекрасно находит золотую середину между быстрым созданием прототипа и реализмом.
Если вам нравятся традиционные методы создания прототипа, например, создание нарисованных от руки макетов, то POP – это подходящий вам инструмент. Просто сделайте набросок идей для вашего приложения в вашей записной книжке, сфотографируйте ее и добавьте взаимосвязи между созданными таким образом макетами. После этого просто синхронизируйте прототипы вашего приложения с Dropbox и вы сможете воспроизвести приложение на смартфоне.
Pixate – это достаточно новый инструмент. Данная платформа может быть использована для создания дизайна взаимодействий с мобильным устройством. Просто загрузите необходимые для взаимодействия слои информации и добавьте с помощью пары кликов необходимые взаимодействия с ними или их анимацию.
Axure – это инструмент для создания прототипов. Данная программа может использоваться для создания веб-приложений и приложений для настольного компьютера. Мне нравится то, что в данной программе реализован функционал перетаскивания, форматирования и изменения размера виджетов.
Framer – еще один известный инструмент. Он может быть использован для создания прототипов для iOS, Android, настольных компьютеров и веба. С использованием Framer вы сможете придумывать взаимодействия и анимацию. Вы можете интегрировать данный инструмент с Photoshop или приложением Sketch.
Если вы хотите быстро создавать прототипы, то Webflow – это не лучшее решение. Однако он предстает во всей красе, когда прототип уже завершен. Вы можете очень быстро сделать из финального прототипа рабочий продукт всего лишь за несколько простых кликов. Также данный инструмент позволяет использовать CMS для ваших прототипов.
У Mockplus есть одна прекрасная особенность – он невероятно быстро работает! В основном Mockplus используется для настольных компьютеров, но он может быть с легкостью использован также и для мобильных или веб-проектов. Понятный интерфейс также позволяет вам более эффективно работать, так как вы можете сконцентрироваться на создании проекта, а не на функциях инструмента.
Justinmind – это один из первых появившихся на рынке инструментов для создания прототипов. Он был создан в 2008 году. За столь продолжительное время команда, создавшая данный инструмент, проделала восхитительную работу. Он очень хорошо работает! Данный инструмент – прекрасный вариант, если вам необходимо создавать веб-сайты, мобильные приложения и другие веб-проекты.
Vectr – это новый игрок на рынке, и он все еще находится в стадии бета-тестирования. При помощи данного инструмента вы можете создавать ваши веб-приложения или приложения для настольного компьютера, использующего операционные системы Mac и Windows. К тому же он абсолютно бесплатен. Все прототипы могут быть выгружены и интегрированы в такие приложения, как Slack.
Инструмент для создания прототипов Principle доступен только для Mac. Он работает в паре с приложением для iOS, которое позволяет запускать прототипы. Principle позволяет вам экспортировать прототипы в видео или GIF-форматы. Интерфейс инструмента очень похож на интерфейс приложения Sketch. Если ранее вы пользовались приложением Sketch, то у вас не возникнет трудностей с использованием Principle.
PowerMockup очень сильно отличается от других приложений. Данный инструмент – это дополнение к Microsoft PowerPoint, которое превращает эту программу в полноценный инструмент по созданию прототипов. С данным расширением вы сможете создавать макеты для любых веб-приложений или приложений для настольных компьютеров.
Atomic – это невероятный инструмент для создания прототипов, и он формирует незабываемое первое впечатление. Atomic – это веб-приложение, которому для работы требуется Google Chrome. Если вы используете Safari, Firefox или браузеры Windows, данный инструмент может работать отвратительно. Atomic может использоваться для создания Apple Watch, Android, iOS и веб-проектов.
Balsamiq – это один из самых простых инструментов. Он позволяет вам перетаскивать любой элемент на черный фон. Данный инструмент может интегрироваться с Google Docs для импорта ваших прототипов и файлов дизайна. Balsamiq доступен, как программа для Mac или Windows, а также имеет веб-версию.
Adobe Comp CC – это еще один великолепный инструмент от Adobe. Он позволяет вам создавать веб, мобильные и печатные проекты и далее интегрировать их с другими утилитами Adobe для создания дизайна. Например, Photoshop, Illustrator или InDesign. Также Adobe CC Comp работает с Adobe Stock, который предоставляет сотни шрифтов, картинок и графических решений.
На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 2010 году, и пара слов в статье Разработка мобильных приложений: с чего начать.
Прототип обладает чудесным свойством устранять недопонимания между различными специалистами (менеджер, руководитель, дизайнер, программист, клиент), вовлеченными в проект, структурировать мысли и предотвращать ошибки и выполнение лишней работы еще на ранних стадиях разработки. Можно тестировать будущее приложение, используя фокус-группу, это поможет получить полезную информацию от будущих пользователей.
В ритме сегодняшней жизни при достаточно высокой цене человеко-часов, очень важно работать быстро и, желательно, без потери качества. Для этого было введено понятие “быстрое прототипирование”. Что поможет нам перейти от простого прототипа к быстрому? Это развивающиеся технологии, наличие огромного количества сервисов и, конечно, собственные мозги.
Самый популярный инструмент создания быстрых прототипов.
Первый и самый любимый инструмент дизайнеров — это бумага и любой пишущий инструмент (карандаш, ручка, маркеры). Он позволяет накидать структуру приложения и сделать первые наброски интерфейса максимально быстро.
- почерк должен быть разборчивым, чтобы его понимала вся рабочая группа, и чтобы самому потом не расшифровывать собственные записи
- при удаленной работе неудобно демонстрировать такой прототип
Как ускорить и упростить «бумажное» прототипирование
Скетчпад (SketchPad, Скетчбук, sketchbook)
UI – блокнот
это тот же самый скетчпад, только без привязки к платформе. На нем можно рисовать абсолютно любые приложения
Лекала.
Штампы
На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:
Программные решения для создания быстрых прототипов
POP
popapp.in
Инструмент для любителей рисовать руками. Рисуете, качаете приложение на iPhone, фоткаете, создаете раскадровку, тестируете и делитесь с коллегами. Все очень просто.
Proto.io
proto.io
SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.
Interface 2
interface2.lesscode.co.nz
Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое.
Демонстрация дизайна на устройстве без программирования
За подсказку спасибо Glebcha
За подсказку спасибо n0_quarter
За подсказку спасибо Ivnika
За подсказку спасибо Glebcha
Отдельного небольшого обзора заслуживают инструменты, которые вообще не позволяют сделать прототип, зато дают возможность продемонстрировать нарисованный дизайн на реальном устройстве.
Вывод
Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.
А чем пользуетесь вы?
Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо
Мария Журавлева Редакция «Текстерры»
Необходимость использования прототипов при создании сайта начала активно обсуждаться несколько лет назад. Постепенно наметился отход от схемы «дизайнер рисует макет – программист прикручивает к нему код».
Ниже вы можете ознакомиться со списком разнообразных сервисов для прототипирования: как для ПК и мобильных устройств, так и для работы онлайн, от бесплатных до весьма недешевых, от простых со скромным функционалом до тех, в которых придется основательно разбираться.
Для удобства мы свели всю информацию в отдельную таблицу, в которой сравнили сервисы по следующим параметрам:
- Язык – язык интерфейса;
- Бесплатный тариф – наличие бесплатного тарифа или пробной версии;
- Самый дешевый тариф – стоимость самого дешевого тарифа или лицензии;
- Особенности – отличительные «фишки» инструмента;
- Интеграции – возможные интеграции с другими сервисами;
- Скачиваемое приложение / веб-версия – некоторые из сервисов представляют из себя скачиваемые программы, некоторые работают прямо в браузере, а некоторые доступны в двух вариантах. В таблице указано наличие онлайн-версии / скачиваемого приложения и поддерживаемые ОС для каждого инструмента;
- Мобильное приложение – наличие мобильного приложения для предпросмотра прототипов;
- Техподдержка – возможные способы связи с технической поддержкой сервиса;
- Клиенты – список самых известных клиентов.
Чтобы скачать таблицу, кликните на скриншот ниже.
1. Axure
Axure – крупнейшее и наиболее известное приложение для прототипирования, позволяет создавать высококачественные прототипы сайтов и мобильных приложений. Обладает широким функционалом с большим набором инструментов. Требует установки софта на ПК, онлайн-версия недоступна. Работает с Windows и macOS.
2. Origami Studio
Origami Studio – полностью бесплатное удобное приложение от Facebook. Работает с macOS. Синхронизуется с Sketch. У приложения есть сообщество на Facebook, где пользователи могут делиться своими прототипами, обсуждать их создание и помогать друг другу.
3. Proto.io
В Proto.io удобный и довольно простой интерфейс. Как и у большинства сервисов, у этого есть возможность коллективной работы и совместного внесения правок. На любом моменте работы прототип можно протестировать как на ПК, так и на мобильных устройствах.
4. Vectr
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 стороной.
Прототип – незаменимый инструмент при разработке сайта
Для создания прототипов существует множество приложений: как для iOS, так и для Android. Все они решают по сути одну задачу – представление вашего проекта в наиболее понятном клиенту виде с возможностью быстро внести правки. Возможно, мы что-то упустили, так что поделитесь в комментариях, какими инструментами для создания прототипов пользуетесь вы.
В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров
Прототипирование выполняет роль чертежа и позволяет разработчикам просмотреть полный обзор сайта или приложения до начала его создания.
Это необходимый шаг в дизайнерском процессе, поскольку он помогает взаимодействовать с командой и изучать новые способы работы. Вы сможете убедиться, что UX/UI-дизайн правильно сформирован, прежде чем приступить к работе над конечным продуктом.
Если в прошлом вы избегали прототипирование, так как не хотели работать с программированием, теперь большинство инструментов для создания прототипов не требуют опыта в этом.
Итак, в данной статье мы рассмотрим топ-19 инструментов прототипирования для дизайнеров UX/UI, а также расскажем про плюсы и минусы каждого из них.
Figma — ведущий инструмент прототипирования для UX/UI-дизайнеров. Основная цель данной платформы — расширение коллективной работы, чтобы команды смогли создавать прототипы и проектировать совместно друг с другом. Поскольку Figma разработан на основе облака, проект автоматически сохраняется, и вам не придется беспокоиться о потере черновика.
Вы можете начать с бесплатной версии, а затем перейти на платную (45 долларов в месяц), которую может использовать вся организация.
Adobe XD помогает предоставляет широкий спектр инструментов для создания прототипов. Он прост в настройке и использовании, но также предлагает сложные инструменты проектирования.
Стартовая версия бесплатна, но вы также можете заплатить 9,99 долларов в месяц за одно приложение.
Sketch помогает командам сотрудничать и создавать прототипы, но доступен только на устройствах Mac. Sketch также предлагает плагины, с помощью которых можно одновременно работать над одним проектом с командой и использовать различные варианты экспорта.
В зависимости от того, сколько лицензий вам нужно, платная версия Sketch может стоить от 79 до 99 долларов в год.
Zeplin позволяет легко перенести прототип в конечный продукт. UX/UI обладает уникальным дизайном, но при экспорте иногда возникают проблемы.
Zeplin доступен бесплатно, но в зависимости от объема и структуры работы может взиматься оплата от 10,75 до 26 долларов в месяц.
Framer помогает команде сфокусироваться на программировании и дизайне. Некоторые новые пользователи жалуются на интерфейс и ограничения программы. Но данная платформа гарантирует такие важные факторы для разработки прототипов, как гибкость и скорость.
Framer предлагает различные планы подписки: они варьируются от бесплатной до PRO-версии, которая поддерживает неограниченное количество проектов всего за 20 долларов в месяц.
MockFlow предлагает автономный режим, поэтому вы можете использовать данный сервис даже без доступа к облаку. Его преимущество заключается в создании каркасных конструкций, которые поставляются с шаблонами. При помощи этих шаблонов вы сможете ускорить творческий процесс.
MockFlow предлагает бесплатную базовую версию, а дополнительные функции обойдутся в 19 долларов в месяц.
Balsamiq Cloud — это веб-приложение, которое помогает быстро создать прототип. Это позволяет сосредоточиться на структуре и идее, а не зацикливаться на мелких деталях. Однако такого рода скорость и доступность достигается за счет жесткого подхода и меньшего количества настроек.
Balsamiq Cloud стоит всего 90 долларов в год для двух проектов и до 1 990 долларов в год для 200 проектов.
Webflow поставляется с большим количеством учебных пособий, которые упрощают его использование. Более того, данный сервис может похвастаться комплексным набором дизайнерских инструментов, поэтому некоторым пользователям может быть трудно ориентироваться в нем.
Первые два проекта вы можете сделать бесплатно, а затем сервис предложит вам подписку до 42 долларов в месяц для учетной записи PRO.
Flinto позволяет добавлять анимации в прототип. Однако имейте в виду, что процесс разработки анимации потребует много времени, и при попытке создать взаимодействие между компонентами в прототипе существуют некоторые ограничения.
Flinto предлагает бесплатную 30-дневную пробную версию, а затем будет взимать 20 долларов в месяц за каждого участника.
Платформа Origami Studio была разработана командой дизайнеров Facebook и полностью бесплатна. Дизайнерам Facebook нужен был инструмент для создания прототипов, который быстро работает и позволяет получать хороший результат. Origami Studio демонстрирует свою силу при разработке микровзаимодействий или выделении определенной страницы в прототипе.
ProtoPie прост в использовании, однако ассортимент творческих материалов достаточно ограничен. Программа бесплатна для всех учителей, студентов и школьников. Но также вы можете приобрести платную версию, цена которой варьируется от 11 до 42 долларов в месяц.
UXPin предлагает большой диапазон инструментов, которые помогут разработчикам достигать поставленных целей, включая условные взаимодействия, выражения и интерактивные состояния. Недостатком использования UXPin является то, что библиотека дизайна не обновляется, а компоненты пользовательского интерфейса могут показаться устаревшими.
Основная версия UXPin стоит 19 долларов в месяц, но также имеет и более продвинутые и профессиональные версии, цена которых может доходить до 69 долларов.
Axure RP 9 предлагает интерфейс перетаскивания, который облегчает управление. Данный сервис достаточно легко использовать, но без знаний программирования могут возникнуть трудности. Axure RP 9 стоит 25 или 42 долларов в месяц за версию для команд.
InVision фокусируется на повторяемом и оптимизированном рабочем процессе проектирования с разработкой и прототипированием продуктов перед написанием кода. Известно, что данный инструмент имеет небольшую функциональность и ограниченный просмотр при замедлении работы процессора из-за большого количества создаваемых файлов.
Для одного человека и небольших команд вы можете использовать InVision бесплатно. Для более крупных команд программа будет стоить 7,95 долларов на пользователя в месяц.
Principle направлен на создание интерактивного и реалистичного прототипа, который будет сочетаться со статическими макетами и вайрфреймами. Однако этот мощный инструмент предназначен только для использования на Mac или iPhone. Стоимость — 129 долларов в год.
JustInMind позволяет создать прототипы с высоким разрешением и помогает начать работу с различными шаблонами. Однако у вас могут возникнуть трудности при совместном использовании и экспорте завершенного прототипа.
JustInMind обойдется в 19 долларов в месяц для обычных пользователей и в 39 долларов в месяц — для компаний.
У Marvel есть бесплатная версия, доступная только для одного пользователя и одного проекта, а также платные версии от 12 до 42 долларов в месяц. Marvel предлагает чистый и простой пользовательский интерфейс и упрощает совместную работу. Он обеспечивает отличную общую базу для прототипирования, но функционал достаточно ограничен.
MockPlus позволяет быстро создавать прототипы с помощью реальных дизайнерских файлов, публиковать проекты в облаке и делиться ими с командой по ссылке. Однако при тестировании на мобильных устройствах прототипы будут работать с задержками, а также потребуют полной загрузки при каждом просмотре.
Базовая программа MockPlus IDoc бесплатна и охватывает 10 пользователей и 10 проектов. Дополнительные версии стоят от 5,95 до 12,95 долларов за пользователя в месяц.
Atomic обеспечивает гибкую основу для совместной работы всей команды с дополнительными виджетами и дополнениями, которые помогут получить желаемый результат. Однако экспорт с помощью Atomic не предусмотрен, и для демонстрации прототипа потребуется дополнительный инструмент. Atomic — это инструмент для создания прототипов на основе браузера, который стоит от 15 до 35 долларов в месяц.
Читайте также: