Лучшие инструменты каркаса для вашего приложения
Опубликовано: 2018-03-23Мы составили для вас список инструментов для создания макетов, которые помогут сделать создание вашего приложения или веб-сайта менее пугающим. Если вы ищете отличный инструмент для создания прототипов , мы также включили несколько предложений для них.
Создание нового приложения или веб-сайта — это респектабельный подвиг, который не многим удается совершить в своей жизни. Это не означает, что вы должны отказаться от этого, а скорее то, что вы должны изучить и понять все это, прежде чем погрузиться с головой. Многим новичкам трудно понять разницу между вайрфреймом, прототипом и мокапом, поэтому этот пост поможет вам разобраться в каждом из них.
ИНДЕКС
ЧТО ТАКОЕ ВАЙРФРЕЙМ?
ЛУЧШИЕ ИНСТРУМЕНТЫ 2018 Г.
ЧТО ТАКОЕ ПРОТОТИП?
ЛУЧШИЕ ИНСТРУМЕНТЫ ПРОТОТИПИРОВАНИЯ 2018 ГОДА
СОЗДАВАЙТЕ МОКАПЫ ВАШЕГО ПРОДУКТА
ЧТО ТАКОЕ ВАЙРФРЕЙМ?
У вас есть гениальная идея для нового приложения или веб-сайта, но как вы начнете превращать ее в реальный продукт? С каркасом! Это первый шаг в процессе планирования, поэтому важно его не пропустить.
Основы каркаса
Прежде чем принимать какие-либо важные дизайнерские решения, вашему приложению или веб-сайту сначала понадобится функциональный макет, который имеет смысл. Здесь на помощь приходит каркас. Большинство людей начинают с того, что делают набросок того, как должно выглядеть их приложение или веб-сайт. Следующий шаг — превратить этот набросок в цифровой макет или план, который будет выглядеть более организованным и профессиональным.
Каркас должен отражать основную структуру страницы без включения каких-либо элементов дизайна или фактического содержания.
Проработка каркаса перед тем, как приступить к украшению чего-либо, позволит вам выявить любые ошибки в юзабилити, с которыми потом будет сложно разобраться. На этом этапе важнее убедиться, что включенные элементы имеют смысл и функциональны, особенно для вашей целевой аудитории. Если вы пытаетесь привлечь внимание инвесторов, вайрфрейм также поможет им гораздо легче понять ваш продукт. На самом деле, отсутствие хотя бы готового каркаса может привести к тому, что инвесторы очень быстро потеряют интерес. Элементы, включенные в каркас, как правило, представляют собой поля для заголовков, кнопки, текстовые поля и поля изображений.
Каркас против макета
Каркас легко спутать с мокапом, потому что они содержат очень похожие элементы. Однако при работе с командой разработчиков, дизайнеров и инвесторов вам необходимо понимать, что отличает их друг от друга.
Для начала каркас используется для организации содержимого и функций вашего приложения , но очень простым способом. Думайте об этом как о схеме, показывающей базовую структуру того, что будет включено в ваше приложение. Как только вы начнете добавлять другие элементы, такие как цвет, значки, изображения, шрифты и фотографии, он начнет превращаться в макет.
Макет обеспечивает среднеточное представление вашего приложения или веб-сайта в разработке. Это гораздо более реалистичное представление того, во что превращается ваше приложение. Думайте об этом шаге в процессе как о добавлении небольшого количества материала к вашему базовому каркасу или придании ему немного большей жизни.
ЛУЧШИЕ ИНСТРУМЕНТЫ ДЛЯ ПРОЕКТИРОВАНИЯ
БАЛЬЗАМИК
МОКПЛЮС
МОКУПЫ
КАРКАС.CC
МАКЕТФЛОУ
БАЛЬЗАМИК
Доступно для всех операционных систем, поскольку оно основано на сети.
Ключевые особенности: Balsamiq — это настоятельно рекомендуемый инструмент для создания каркасов, который позволяет пользователям создавать каркасы для настольных приложений, мобильных приложений, веб-сайтов, диалоговых окон, веб-приложений, приложений для планшетов и многого другого . Создание вашего каркаса с помощью Balsamiq похоже на рисование на доске, и программа также позволяет вам перетаскивать элементы пользовательского интерфейса, получать отзывы о эскизах от вашей команды, пересматривать проекты и улучшать свою работу в режиме реального времени.
Цены: Цена этого инструмента будет варьироваться в зависимости от ряда ситуаций. Вы можете начать с 30-дневной бесплатной пробной версии, но после этого вам придется платить ежемесячно или ежегодно в зависимости от выбранной вами платформы. Например, облачная версия будет стоить вам 9 долларов в месяц или 90 долларов в год для двух проектов. Настольная версия обойдется вам в 89 долларов за лицензию для одного пользователя.
Бонус: Balsamiq предлагает бесплатные курсы, доступные через Udemy и Skillshare, которые помогут вам научиться использовать их продукт и получать от него наилучшие результаты.
МОКПЛЮС
Доступно для Mac OS, Windows, Android и iOS.
Основные характеристики: поскольку проекты могут быть связаны с облачным хранилищем, MockPlus позволяет всей команде легко работать над одним проектом. Пользователи могут комментировать непосредственно проект и отмечать его для просмотра другими. Вы также можете отправлять уведомления по электронной почте своей команде, чтобы оставаться в курсе изменений. Самое приятное то, что вы можете делать все это без написания кода или программирования, так что вам будет легче сосредоточиться на работе, стоящей перед вами.
Цены : для отдельных пользователей доступна бесплатная опция, которая включает неограниченное количество продуктов, хотя и ограничена в других аспектах. После этого цена будет варьироваться от 199 долларов в год для физического лица до 2999 долларов в год для предприятия. Вы также можете приобрести лицензию, стоимость которой будет варьироваться от 399 долларов США для одного пользователя до 5999 долларов США для предприятия (30 пользователей).
Бонус: самая большая привлекательность MockPlus заключается в том, что он позволяет разработчикам создавать каркасы с более высокой скоростью благодаря инструментам, которые они разработали для ускорения процесса.
МОКУПЫ
Доступен для всех операционных систем, так как он основан на сети.
Ключевые особенности: Moqups — это веб-платформа, которую можно использовать для создания каркасов веб-приложений и мобильных приложений для iOS, Android и Bootstrap. Поскольку платформа основана на веб-интерфейсе, у вас есть возможность подключаться и работать из любого места. Платформа предназначена не только для каркасов, вы также можете создавать диаграммы и прототипы. Вы можете легко перетаскивать элементы, использовать их наборы трафаретов, выбирать из разных шрифтов, выбирать объекты и перетаскивать собственные изображения во все, над чем вы работаете.
Цены : Как и большинство инструментов для создания каркасов, Moqups предлагает бесплатную пробную версию. После этого цена будет зависеть от ряда факторов. Например, годовая подписка, включающая неограниченное количество проектов, объектов, хранилища и комментариев, будет стоить 13 долларов в месяц для одного пользователя и 19 долларов в месяц для творческой группы (3 человека). Вам нужно будет связаться с Moqups напрямую, чтобы получить предложение для учетной записи Enterprise.
Бонус: если вы принадлежите к неправительственной организации, школе или некоммерческой организации, Moqups бесплатно предоставит вам премиум-аккаунт.
КАРКАС.CC
Доступно во всех операционных системах, поскольку оно основано на сети.
Основные характеристики: Wireframe.CC считается одним из самых основных доступных инструментов для построения каркасов . Это не обязательно плохо, особенно если вы новичок. Фактически, из-за его простого дизайна разработчикам может быть легче сосредоточиться на своей работе. Эту веб-программу можно использовать для создания каркаса окон браузера, мобильных приложений или приложений для планшетов.
Цены : Wireframe.CC предлагает 7-дневную бесплатную пробную версию и бесплатную базовую учетную запись. После этого он будет стоить 16 долларов в месяц или 144 доллара в год для одного использования, 439 долларов в месяц или 390 долларов в год для трех пользователей, или 99 долларов в месяц или 990 долларов в год для предприятия (неограниченное количество пользователей).
Бонус: простота этой программы не позволяет отвлечься и прокрастинировать. На самом деле элементы пользовательского интерфейса будут отображаться как опции только тогда, когда это необходимо.
МАКЕТФЛОУ
Доступно как настольное приложение для Mac OS и Windows или как веб-приложение.
Основные характеристики: Эта программа может использоваться для разработки веб-приложений, мобильных приложений, интерфейсов и программного обеспечения среди других вариантов. Они предлагают пакеты компонентов для интерфейса по вашему выбору, чтобы облегчить вашу работу. MockFlow также предлагает функции совместной работы, которые позволяют всем членам вашей команды видеть изменения в режиме реального времени, а также позволяют делать аннотированные комментарии для всеобщего обозрения. Вы можете экспортировать файлы в большое количество форматов, включая DOC, PDF и HTML.
Цены : базовая учетная запись, которая включает одного пользователя и максимум один проект в каждом инструменте, бесплатна. Премиум -аккаунт для одного пользователя стоит 14 долларов в месяц. Единственным его недостатком являются ограничения на обмен. Групповой пакет для трех пользователей стоит 29 долларов в месяц, но вы можете добавлять пользователей в эту учетную запись за дополнительную плату. Корпоративный аккаунт не имеет ограничений по количеству пользователей и будет стоить вам 160 долларов в месяц.
Бонус: одним из преимуществ использования MockFlow является их MockStore, в котором продаются шаблоны пользовательского интерфейса для всех видов интерфейсов. Если вы чувствуете себя скучно, вы можете поискать идеи в их магазине или даже купить шаблон.
ЧТО ТАКОЕ ПРОТОТИП?
Прототип — это еще не законченный продукт, но он должен быть очень похож на него с точки зрения внешнего вида и общей функциональности. Этот высокоточный прототип вашего приложения или веб-сайта следует использовать для тестирования вашего продукта и получения отзывов пользователей, чтобы помочь вам решить любые проблемы, которые могут возникнуть.
Основы прототипа
Прототип обычно появляется в конце процесса проектирования и действует как мост к конечному продукту. На этом этапе дизайнеры смогут продемонстрировать свою работу и использовать ее для получения полезных отзывов. Прототип должен включать не только элементы дизайна, он также должен демонстрировать, как будет работать проект, когда он будет завершен.
Прототип может не включать в себя все анимации и взаимодействия окончательного проекта, но он должен быть в состоянии продемонстрировать, как приложение будет работать. Позволяет проверить его работоспособность.
Вы можете попросить пользователей протестировать его и оставить отзыв, чтобы улучшить взаимодействие с пользователем. Вам может казаться, что вы используете настоящее приложение, но прототип — это всего лишь набор изображений, связанных друг с другом. Эти типы прототипов, интерактивные прототипы, идеальны, потому что вы можете видеть готовый дизайн, одновременно взаимодействуя с ним. Создание хорошего интерактивного прототипа может занять время и стоит денег, но это определенно стоит вложений.
ЛУЧШИЕ ИНСТРУМЕНТЫ ПРОТОТИПИРОВАНИЯ
ПРОТО.ИО
МАРВЕЛАПП
ПРОТТ
АКСЮР РП
ВИДЕНИЕ
ПРОТО.ИО
Доступно для Mac OS и Windows.
Ключевые особенности: Девиз Proto.io: « Прототипы, которые кажутся реальными», и на это есть веские причины. Их продукт позволяет дизайнерам создавать высокоточные прототипы , максимально приближенные к реальным. Его можно использовать для создавать прототипы для мобильных приложений, а также веб-приложений. Их инструмент записи экрана позволяет вашей команде точно видеть, как ваша аудитория взаимодействует с прототипом, а автономный режим позволяет вам взаимодействовать с прототипом без подключения к Интернету, и все это без необходимости писать ни одной строки кода.
Цены : вы можете начать работу с Proto.io с 15-дневной бесплатной пробной версии, а затем получить бесплатную учетную запись, хотя она весьма ограничена. Платные аккаунты варьируются от 24 долларов в месяц (годовая подписка на одного пользователя, включающая 5 проектов) до 160 долларов в месяц (годовая подписка, 10 пользователей и 30 активных проектов).
Бонус: некоторые из их новейших инструментов включают векторную анимацию, которую вы можете импортировать самостоятельно или выбрать из их библиотеки векторной анимации. Они также недавно представили библиотеку компонентов виртуальной реальности, которая позволяет легко интегрировать 360-градусные изображения.
МАРВЕЛАПП
Доступно в виде веб-приложения для Mac OS, iOS, Android и Windows.
Ключевые особенности: MarvelApp — это отличный инструмент прототипирования для дизайнеров с минимальным опытом. Его простой интерфейс может показаться довольно простым, но это часть его привлекательности. Это не только хорошая отправная точка для новых дизайнеров, но и предлагает профессиональные результаты, которые ищут более опытные дизайнеры. Marvel позволяет легко быть в курсе изменений, новых комментариев и прогресса благодаря возможности импортировать свою команду из Slack или Asana. Хотя это приложение, вы можете использовать его для создания прототипов для Интернета или мобильных устройств.
Цены : MarvelApp доступен бесплатно для одного пользователя и включает в себя два проекта. Их платные подписки начинаются с 12 долларов в месяц для одного пользователя, неограниченное количество проектов, защищенные паролем прототипы и возможность загрузки ваших прототипов.
Бонус: MarvelApp работает на всех устройствах iOS, а это значит, что вы можете быстро и легко просматривать свою работу на iPhone, iPad, Apple Watch и даже Apple TV.
ПРОТТ
Доступно в виде приложения для iOS и Android.
Ключевые особенности: Работа над мобильным приложением для создания прототипа может показаться немного ограничивающей, но Протт доказывает, что это не обязательно. Фактически, эта платформа содержит множество функций и инструментов, которые можно использовать для создания макетов пользовательского интерфейса, прототипов программного обеспечения для настольных компьютеров, макетов веб-сайтов, интерактивных каркасов и прототипов. Если вы работаете с обширной командой, Prott позволяет легко делиться с ними изменениями и получать отзывы в режиме реального времени.
Цены : Prott предлагает бесплатную пробную версию, которая превращается в бесплатную подписку по истечении 30-дневного периода. Эта опция предназначена для одного пользователя и одного проекта. Их платные планы начинаются с 19 долларов в месяц для одного пользователя, трех проектов, неограниченного количества экранов и неограниченного количества рецензентов.
Бонус: платформа Prott позволяет вам оставлять комментарии в любом месте проекта, помогая вам общаться с вашей командой намного проще и понятнее. Члены вашей команды могут напрямую отвечать на ваши комментарии, гарантируя, что ничего не потеряется.
АКСЮР РП
Доступно для Mac и Windows.
Основные характеристики: Axure RP считается одним из наиболее полных инструментов для прототипирования , поэтому неудивительно, что у него много пользователей. Хотя это очень полный интерфейс, это лучший вариант для тех, у кого есть большой опыт. Еще одна причина, по которой он так хорошо известен в отрасли, заключается в том, что он существует уже давно и является инструментом, с помощью которого большинство дизайнеров освоили свои навыки в начале 2000-х годов. Стоит отметить, что вам потребуются некоторые знания в области кодирования, чтобы получить то, что вам нужно от этого инструмента.
Цены : Вы можете начать с 30-дневной бесплатной пробной версии. После этого подписки начинаются с уровня Pro по цене 29 долларов в месяц на пользователя и достигают 99 долларов в месяц на пользователя на уровне предприятия. Бессрочные лицензии начинаются с 49 долларов в месяц на пользователя, но недоступны на уровне предприятия.
Бонус: Axure RP предлагает дизайнерам больше возможностей по сравнению с другими инструментами прототипирования. Хотя его интерфейс обеспечивает наибольшую функциональность, он достигается за счет более сложной системы. После освоения Axure RP вы получите отличные результаты.
ВИДЕНИЕ
Доступно во всех операционных системах, поскольку оно основано на сети.
Основные характеристики: InVision — это хорошо известный и высоко ценимый в отрасли инструмент, который позволяет дизайнерам создавать прототипы для Интернета, iOS и Android. Эта платформа была разработана с учетом больших команд, поэтому совместная работа очень проста. Его довольно легко использовать, вам просто нужно загрузить свои файлы дизайна и добавить к ним такие элементы, как анимация, жесты и переходы. Конечным результатом является надежный, высокоточный прототип.
Цены : InVision предлагает бесплатный план, который включает в себя один активный прототип, после чего платные планы начинаются с 15 долларов в месяц за три прототипа для одного пользователя. Групповая подписка на пять пользователей, включающая неограниченное количество прототипов, будет стоить 100 долларов в месяц.
Бонус: InVision недавно выпустила долгожданную Studio, которая претендует на звание «самого мощного в мире инструмента для дизайна экрана». Этот новый инструмент призван упростить процесс между проектированием и созданием функциональных прототипов. Самое приятное, что это бесплатно!
СОЗДАВАЙТЕ МОКАПЫ ВАШЕГО ПРОДУКТА
После того, как ваш прототип готов и вы вернулись, чтобы исправить все проблемы, с которыми столкнулись в процессе тестирования, вы, вероятно, приближаетесь к дате запуска. Но прежде чем начать работу, убедитесь, что у вас есть правильные инструменты для правильного продвижения вашего приложения или веб-сайта . Использование макетов, демонстрирующих, как ваше новое приложение или веб-сайт выглядит на реальных устройствах, может помочь привлечь к ним больше внимания.
Что такое мокап?
Ранее мы обсуждали разницу между вайрфреймом и мокапом , но тип мокапа, о котором мы говорим здесь, совершенно другой. Этот тип макета появляется в конце, когда ваше приложение или веб-сайт готовы к запуску. В основном это фотографии, которые вы можете настроить с помощью изображений или скриншотов вашего конечного продукта. Например, вы можете сделать скриншот своего приложения и перетащить его на экран iPhone X.
Мокапы важны, потому что их можно использовать для маркетинга и продвижения вашего приложения или веб-сайта. Их также можно использовать при создании скриншотов вашего приложения для App Store или Play Store. Мокапы Placeit просты в использовании и представлены в огромном ассортименте. Вы можете найти всевозможные макеты, включая макеты iPhone, макеты iPad, макеты MacBook, макеты браузера и макеты Android.
Продемонстрируйте свою работу на макете
Вы, вероятно, взволнованы тем, что наконец-то завершили проект, над которым так долго работали. Мы знаем, что у вас, вероятно, не осталось кучи денег на рекламу, и именно здесь в игру вступают макеты Placeit. Они просты в использовании, создают отличные изображения вашего продукта и очень доступны по цене! Независимо от того, что вы продвигаете, приложение для iPhone, приложение для iPad или новый веб-сайт, у Placeit есть последние макеты гаджетов, о которых вы рассказали!
Если вам понравился этот пост, попробуйте этот список из 10 инструментов оптимизации магазина приложений или ознакомьтесь с 7 советами по продвижению вашего приложения.