Конструктор интерфейсов мобильных приложений

Обновлено: 28.04.2024

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

Существует три подхода к созданию мобильных приложений:

Традиционный. Предполагают написание кода, создание макета, оптимизацию, команду и другие этапы.
Зерокодинг. Не требует знания языков программирования. Это похоже на использование Тильды (это тоже, кстати, инструмент зерокодеров) для создания сайтов: не надо знать CSS, HTML, JS — просто расставляешь блоки с контентом, настраиваешь анимацию и получаешь отлчиный сайт.
Low-code — это что-то среднее между зерокодингом и программированием: писать код все-таки приходится, но немного.

Инструменты зерокодинга уже могут покрыть большинство задач бизнеса. И вместо того, чтобы изобретать велосипед, можно за несколько дней запустить MVP или проверить гипотезу с минимальными затратами. А если в запасе хотя бы пара недель — то и запилить полноценное приложение. Решения на зерокодинге можно собирать в одиночку — вся инфраструктура предоставляется платформами и не надо дополнительно тратиться на хостинг, администрирование серверов и т.п.

При этом обычная разработка затянется на 3−6 месяцев и съест до миллиона рублей — если работать с фрилансером или скромной региональной студией.

Самые мощные и популярные инструменты мобильной разработки без кода — Adalo, Glide и Bubble. С их помощью можно создать и опубликовать мобильное приложение. Они бывают трех типов:

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

PWA (Progressive Web Application) — когда мобильная версия сайта устанавливается на смартфон как приложение. Из плюсов — не надо поддерживать две кодовые базы, под iOS и Android, приложение всегда «обновлено» до последней версии, можно работать с некоторыми нативными функциями смартфонов. Например, отправлять пуши, устанавливать ярлык на экран, элементы навигации браузера не мешают (их просто нет). такие приложения умеют создавать и Bubble, и Adalo, и Glide.

Нативные — когда приложение публикуется в официальных сторах. В Adalo уже встроена такая функция, а приложения на Bubble можно обернуть в специальный контейнер и тоже опубликовать в Google Play и App Store. Нативные приложения позволяют работать со всеми функциями телефона: камерой, микрофоном, GPS, контактами, файлами, акселерометром, push-уведомлениями, памятью девайса, адаптивной версткой — всё, как в обычном коде, только без кода.

по макияжу по подписке. аренды жилья в Вене. фотошколы. наставников в Digital.

Glide — платформа для создания мобильных приложений без кода. Лучше всего функции сервиса описывает девиз «Создавайте приложения из Google Sheet за пять минут, бесплатно». Glide-приложения нельзя загрузить в сторы, но можно опубликовать в интернете как PWA. Платформа отлично подходит для создания простых приложений и MVP — много готовых симпатичных шаблонов, понятные интуитивные настройки.

На бесплатном тарифе есть ограничение по объему данных, 10% комиссия со всех платежей и лого Glide, а платные стартуют от $32 в месяц.

Индийский headhunter для педагогов

Adalo — nocode-платформа для создания веб- и мобильных приложений, которые можно публиковать в App Store, Google Play или в интернете как PWA. Новая версия раскатывается в сторы прямо из личного кабинета на платформе, публикуется тоже оттуда (но нужен аккаунт в AppStore и Google Play). Adalo позволяет создавать приложения в интуитивно-понятном интерфейсе методом drag’n’drop из готовых или кастомных дизайн-шаблонов. Эта платформа мощнее Glide и на ней можно собирать более сложные приложения.

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

для геймификации карьеры мобильных сайтов для рестораторов

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

Bubble позволяет проектировать сложную бизнес-логику — это настоящий комбайн. Приложения на Bubble нельзя выкладывать в сторы напрямую, но есть обходные пути — обернуть их в специальный контейнер и после этого опубликовать в маркетплейсах от Apple и Google.

На бесплатном тарифе тоже есть лого платформы, нельзя привязать приложение к своему домену, количество объектов в базе данных ограничено 200 и закрыт доступ к API. Платные тарифы начинаются от $25 в месяц.

Разработка приложения «под ключ» — сложный процесс, в котором участвует целая команда специалистов. Программисты пишут бэкенд и фронтенд, дизайнеры создают «человеческий» UX/UI и вкусную картинку, тестировщики ищут ошибки, проджекты управляют всем процессом, лиды — командами, эккаунты общаются с клиентами. И каждый не просто просиживает штаны, а действительно работает и нужен.

Сколько денег возьмет за разработку веб-студия и сколько времени потратит, зависит от сложности проекта и имиджа компании, но в среднем — от 500 тыс. до 5 млн рублей, а средний срок разработки — 4−6 месяцев (по сведениям с Хабра, DTF и Appinventive). Сложные приложения легко могут стоить дороже 10 млн рублей и пилиться больше года — особенно если поджимают сроки или подрядчик входит в какой-то рейтинг вроде Теглайна. И всё это без учёта поддержки, обновлений, продвижения и возможных проблем с масштабированием и доработками.

Nocode-разработка обходится дешевле. Например, Сергей Горелов в одиночку собрал полнофункциональное приложение для фитнес-клуба за пару недель — такое же приложение обычная студия будет разрабатывать около полугода и возьмёт за работу 700−800 тысяч рублей.

А Евгений Спорыхин из nocode Hero вместе с WeLovEnocode запилил карьерный трекер с геймификацией на Bubble. Вместе с детализацией техзадания, доработками, дополнительными функциями и пятью итерациями по дизайну (клиент не совсем понимал, какой он хочет видеть визуальную составляющую) это заняло три месяца и обошлось заказчику примерно в 700 тысяч рублей.

Аналогичная работа «в коде» длилась бы гораздо дольше, а заказчик отдал бы не меньше 4 млн рублей. При этом первую полнофункциональную версию запустили уже через 2 недели — всё остальное ушло на доработки дизайна и добавление новых идей клиента.

Да, у мобильных приложений на зерокодинге пока есть некоторые ограничения: например, чтобы сделать массовый сервис с трафиком в десятки миллионов человек, когда критичны скорость работы и премиальный дизайн, придется создавать свое решение, нанимать программистов или отдавать разработку на аутсорс. А вот первые версии такого продукта — особенно MVP — можно собирать и без кода. Приложения на несколько десятков или сотен тысяч пользователей nocode-платформы также выдержат без проблем.

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

Платформа: Glide
Время на разработку: 2 недели (большая часть — наполнение базы данных)
Затраты: 12$ (базовый тариф в Glide)

Игорь — профессиональный программист. Как-то раз ему понадобилось выполнить техническую задачу за пару дней — так он вошел в зерокодинг. Сначала автоматизировал на Integromat, потом перешел на Glide. А в пандемию он назерокодил приложение для обучения макияжу MAKE — помогал жене перевести бизнес в онлайн.

Игорь освоил Glide за три дня, еще 4 дня делал структуру приложения. Дольше всего вносил список из 400 продуктов — это заняло 2 недели😂 Приложение интегрировано с ЮKassой, Integromat и GetCourse, можно выбрать свой цветотип, форму лица и глаз, найти инструменты и средства для макияжа, а также получить советы — где их лучше купить, чтобы не попалась подделка.

Если пользователь оплатил подписку с помощью банковской карты, информация о ней сохраняется. За 3 дня до окончания подписки пользователя предупредят о предстоящем списании. После автооплаты система пришлет результат — успешно прошло списание или денег на карте не оказалось. Эта логика собрана на GetCourse.

На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 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), за что ему огромное спасибо

Лучший конструктор мобильных приложений для малого бизнеса в целом: «Гудбарбер» (GoodBarber).

«Гудбарбер» представляет наибольшую ценность для тех, кто занят в малом бизнесе. Стоит использование этого конструктора совсем не дорого, а его средствами и инструментами при этом можно пользоваться без ограничений. Еще нам нравится, что «Гудбарбер» очень прост в использовании и позволяет создавать превосходные многофункциональные мобильные приложения для всех разновидностей бизнеса. Кроме того, «Гудбарбер» предоставляет доступ к программному коду, компонентам (дополнительным модулям) и интерфейсам программирования вашего приложения, так что вы можете полностью индивидуализировать приложение, ориентируясь на конкретные потребности своего бизнеса. Исходя из нашего опыта, можно сказать, что «Гудбарбер» вдобавок располагает превосходной, весьма полезной системой поддержки клиентов.

Лучший конструктор мобильных приложений для начинающих: «Билдфайр» (BuildFire).

Конструктор «Билдфайр» позволяет создавать мобильные приложения профессионального вида за короткое время, не требуя применения каких-либо технических навыков. Его было настолько легко использовать, что у нас ушло меньше 10 минут на то, чтобы создать учетную запись, а затем и наше первое приложение. Нам нравится, что этот конструктор упрощает процесс создания мобильного приложений: сначала вы выбираете и настраиваете оформление и функционирование приложения согласно личным предпочтениям, потом при помощи виджетов (элементов интерфейса) без труда добавляете содержание. А еще нам пришелся по душе тот факт, что в «Билдфайр» имеется опция предварительного просмотра приложения на вашем устройстве – это дополнительное преимущество, которого лишено большинство конструкторов по созданию приложений для пользователей начального уровня.

Лучший конструктор мобильных приложений для сферы розничной торговли: «Мобикарт» (MobiCart).

«Мобикарт» — это хорошо отлаженный конструктор мобильных приложений, предназначенный для оказания помощи тем, кто занят в сфере розничных продаж, чтобы они вышли в «мобильную» торговую среду и увеличили объемы реализации посредством использования средств мобильной коммерции. Он сэкономит ваше время, так как позволяет автоматически создать электронную витрину-интерфейс для мобильных устройств, синхронизируя ее с основным сайтом-магазином, загружая файл формата .csv или используя собственный интерфейс программирования приложений «Мобикарт». Таким образом, вы можете интегрировать в приложение большое количество сторонних решений (дополнительных компонентов) и мобильных платежных систем, а ваши клиенты – делать покупки прямо через приложение. В числе прочих полезных функций рассылка извещающих уведомлений, услуги сервисов геопозиционирования и возможность переносить в приложение необходимую информацию из ваших социальных сетей.

Наши методы

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

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

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

В итоге у нас образовался перечень, в который вошли десятки конструкторов мобильных приложений. Нашими фаворитами стали «Гудбарбер», «Билдфайр» и «Мобикарт», а в финальный список вошли «Эппи Пай» (AppyPie), «Комо» (Como), «Эпмашин» (AppMachine), «Эпмакр» (AppMakr), «Шаутэм» (ShoutEm), «Ичскейп» (EachScape), «Мобайл Роуди» (Mobile Roadie) и Appery.io. При оценке каждого сервиса по созданию приложений мы учитывали следующие характеристики:

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

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

Appery.io — Appery.io – единственная облачная платформа, функционирующая по принципу «перетащил мышью и отпустил», с набором программных средств для визуальной разработки и интегрированными серверными службами. Вы работаете прямо в облаке, где не нужно ничего устанавливать или скачивать, соответственно легче создавать и запускать приложение. Также Appery.io предоставляет умелым разработчикам шанс использовать расширенные функциональные возможности. appery.io

«Билдфайр» (BuildFire) — Лучший из лучших, по нашему мнению, конструктор по созданию мобильных приложений для новичков. «Билдфайр» позволяет «смонтировать» мобильное приложение профессионального вида за считанные минуты. Удобный для пользователя интерфейс упрощает процесс создания приложения, и вам в ходе работы не понадобится ни один, даже самый простой, навык кодирования. Также доступны возможности персонализации – результатом ваших стараний станет уникальное приложение, отличающееся от заурядных аналогов, созданных при помощи похожих конструкторов.

«Гудбарбер» (GoodBarber) — Наш лидер из числа лучших конструкторов мобильных приложений для малого бизнеса в целом. «Гудбарбер» — то, что нужно, чтобы предложить нечто действительно стоящее. Он одновременно доступен и прост в использовании, и при работе в нем можно пользоваться огромным количеством средств и компонентов, вариантов персонализации, а также услугами отличной клиентской службы, причем без всякой дополнительной платы.

«Мобикарт» (MobiCart) — Лучший, с нашей точки зрения, конструктор по созданию мобильных приложений для тех, кто занят в сегменте розничных продаж. Использование «Мобикарт» — простой и быстрый способ перенести ваш магазин в сферу мобильной торговли. Он позволяет автоматически создать электронную витрину прямо в приложении, а затем использовать преимущества мобильной коммерции и систем проведения мобильных платежей, так что клиенты смогут делать покупки прямо со своих айфонов, айпадов и устройств на платформе Android.

Вы придумали мобильное приложение, которое определяет по фото, будет ли вкусной картошка фри, или выдает классный ответ на неприятную фразу незнакомца. Что дальше? Сделать простое приложение стоит от 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 можно спросить на форуме и посмотреть дополнительные туториалы, а в платной подписке получать индивидуальную поддержку.

Подборка полезных инструментов (ПО и онлайн-сервисов) для создания динамических прототипов, интерактивных мокапов и набросков мобильных приложений.

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

1. Proto

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

Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.

2. Moqups

Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса.

Содержит шаблоны для прототипирования приложений под iPhone и iPad.

3. UXPin

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

4. Balsamiq

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

5. Justinmind

Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.

6. Fluid

Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.

7. Axure

Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.

8. Mockflow

Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.

9. Protoshare

Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.

10. Wireframe

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

11. Wireframe Sketcher

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

12. Omnigraffle

Инструмент создания интерфейсов и диаграмм для приложений под iPhone.

13. Pidoco

Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.

14. Flair Builder

Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.

15. iPhone Mockup

Инструмент создания простых мокапов для iPhone, годится для начинающего дизайнера, занимающегося прототипами.

16. HotGloo

Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.

17. Invision

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

18. Mokk.me

Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.

19. iPlotz

20. Pencil Project

Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.

Читайте также: