HOME     WORK     BLOG     ABOUT     CONTACT



App Prototypes - No Coding Required

November 7, 2017



Many designers shy away from app design, because they think it requires a vast coding knowledge. While coding is required to make the final app, prototypes require no coding at all. Thanks to these programs, designers can quickly create app prototypes that behave like the real thing. In fact, prototype apps can increase productivity and help designers better communicate their ideas to developers.


Growing in Numbers

There are quite a few prototyping tools available at the moment, and more are being developed every year. Essentially, these programs allow designers to create point-and-click app prototypes that can be used to illustrate an app’s functionality and test user’s navigation habits. The programs operate on similar principles - designers can either create screens using limited program-based design tools, or they can upload screen designs they have created in another program. Designers then set hotspots to certain areas of the screens that allow users to navigate to other areas of the app. Each program is very user-friendly, easy to navigate, and includes several functions to maximize your prototyping capabilities. Some app prototyping programs include:




Something for Everyone

No single program holds advantage over another - the perfect program depends on a designer’s workflow and personal preferences. Some programs offer limited free trials, while others limit you to two or three projects before purchasing a subscription. Some programs are web-based, while others are local and allow designers to work offline. A few programs are cloud-compatible and allow multiple designers to work on a project at the same time - very helpful for design teams. Below is a quick overview of each product and what it offers - it’s up to you to decide which one works best for you.


Marvel App

One of the top names in app prototyping, Marvel is intuitive and easy to use. It’s clean interface and unique toolkit offers a welcoming experience for beginners. The web-based program features pre-made mobile assets (search bars, keyboards, status bars, etc.), a library of icons, and hundreds of stock photos that bring your prototype that extra step. Marvel also offers great collaborative features and an excellent handoff system for developers to use in creating the final app.

Key Features:

• 2 project limit with free account

• Subscription plans from $12 - $100+ depending on team size

• Web-based program

• Collaboration: invite members and create design teams, annotation features, user testing tracking

• Multiple sharing options

• Ability to download version of app onto mobile device

• Developer handoff

POP App

Marvel’s companion app, POP stands for “Prototype on Paper”. It does not require a Marvel account to use and is one of the very few apps that can be used to quickly prototype on any mobile device. The idea of POP is that designers would sketch out app screen designs, take photos in-app, and use them to create fast prototypes. Hotspots are used to create point-and-click prototypes - similar to Marvel. Also, if users decide to create a Marvel account, prototypes created in POP will can be synced to their Marvel account.

Key Features:

• 2 project limit with no account

• Subscription plans from $12 - $100+ depending on team size

• Mobile-based program, no internet connection required

• Syncs with Marvel account if activated

• Collaboration features only included with Marvel account

• Limited sharing features

• App download and developer handoff with Marvel account

InVision

InVision is another web-based program that is popular in the app-prototyping world. The tools and overall scope of the program are a bit more advanced than Marvel - perfect for designers looking to create high-fidelity prototypes with specific requirements. Some of the included tools are similar to the tools found in Photoshop or Illustrator. Also, like many web-based prototyping programs, InVision has several collaboration tools that are perfect for large teams.

Key Features:

• 1 project limit with free account

• Subscription plans from $15 - $100+ depending on team size

• Web-based program

• Collaboration: real-time collaboration between multiple users, comment system, user testing tracking

• Multiple sharing options

• Developer handoff

Proto.io

I have not had the chance to work with Proto.io yet, but that is partially due to the fact that their free trail option only offers 1 project with a 5 screen limit - most of my projects go far beyond 5 screens. Based on my research, Proto.io is similar to other web-based programs. It offers similar collaborative functions, sharing options, and in-app editing tools. It also includes an extensive mobile asset library that reflects the current trends.

Key Features:

• 1 project limit with free account (5 screens max)

• Subscription plans from $24 - $160 depending on team size

• Web-based program

• Extensive toolkit and asset library

• Collaboration: comment system, user testing tracking

• Multiple sharing options

• Developer handoff

Adobe Experience Design (Xd)

A new contender to the prototype world, Experience Design is new to the Adobe family. While the only free trail designers can get with Xd is through the Creative Cloud free trial, Xd offers features similar to the above programs. The nice thing about Adobe Xd is that designers can work offline on projects and sync them up to Creative Cloud the next time internet is available. Tools included in Xd reflect that of other Adobe products, allowing designers to easily transfer and adapt their skills. At the moment, Xd does not offer any sort of developer handoff option, but company representatives have said they are working on implementing a handoff feature as soon as possible.
Key Features:

• Must have Creative Cloud subscription to use

• No internet required while working on project

• Collaboration: annotation option, view edits in real-time on mobile app

• Multiple sharing options

• Download prototype to mobile device

Too Long; Didn’t Read

I understand this blog post is quite lengthy, so I made a helpful little chart to help highlight the key features of each program. Also, I encourage you to to at least read the paragraph on the program you are most interested in, just to be sure it is the right one for you.





︎ Caitlin






︎ newer             Blog Feed            older ︎


︎   ︎

© 2017 Caitlin J. DeVries - All rights reserved.