Over the past few weeks, we’ve been sharing some of our favourite resources to help refresh your web design toolkit. So far, we’ve focused on tools that help you discover new design assets for your latest projects — in particular, free stock photography and visually stunning fonts. This week we are changing gears and showcasing a few of the best prototyping tools available for web and mobile design mockups.
Prototyping is an integral part of the design process as it lets you and your team review concepts and share feedback in the early stages of a project. By creating an interactive mockup of a website or mobile app, you are able to identify any shortcomings in the flow and usability of your design before investing too much time or money into development.
While every designer has a unique set of needs for their mockups, each of the tools below offers the functionality and flexibility required to create highly interactive concepts without a single line of code. Hopefully after reading through our list, you find the perfect tool to test out your web and mobile designs.
You might also like: The Benefits of Using a UI Kit
InVision is a web-based prototyping tool that allows designers to create highly interactive mockups for web and mobile projects. While you can’t create designs directly within InVision itself, you can upload your static page designs into the tool and then add hotspots to transform them into fully interactive mockups. Additionally, InVision has the ability to sync with your Photoshop or Sketch documents, allowing you to update your prototype in real-time within your design suite program of choice.
In terms of features, InVision has a wide array of valuable tools to facilitate your workflow including preview mode, comments, version control, and file syncing. It also offers a variety of transition animations and mobile gestures (swiping, tapping, etc.) that can help bring your design to life. One of my favourite features in InVision is its ability to create hover states for any design element. This allows your prototype to be even more representative of the final product as you can add advanced interactivity such as drop-down menus and hover states for buttons.
InVision is dedicated to creating resources that offer their users enhanced functionality when tackling design projects. Most recently InVision launched Craft — a collection of plugins for Photoshop and Sketch that allow you to populate your design with real data. InVision consistently adds new features like Craft to their product offering. Check out their website for the latest feature announcements.
InVision’s ability to facilitate collaboration is its greatest asset. Teammates, clients, or anyone shared on the mockup has the ability to leave location-specific comments and threads. This eliminates confusion created through back and forth email threads, and helps ensure that changes are implemented exactly where they need to be. Plus, with InVision’s LiveShare feature, collaboration can happen in real-time using a screen sharing integration that includes chat, collaborator-specific mouses, and sketching capabilities.
Perfect for: Highly collaborative projects including multiple team members and/or clients
Ideal prototyping formats: Web and mobile (Android and iOS)
Sharing capabilities: Excellent features including location-specific comments and real-time collaboration
Support resources: In-depth documentation
prices range from free trials for one project to $25 per month for unlimited. For team plans, InVision's prices start at $99 per month for 5 team members. They also offer an Enterprise plan for large teams
If you are looking for an all-in-one prototyping tool, look no further than Justinmind. What makes this particular tool unique is that it offers the functionality to create web and mobile wireframes within the platform itself. You just need to select the design elements you want to include and create them in your artboard.
Once you are happy with your layout, you can add mobile gestures, web interactions, and transitions from Justinmind’s extensive library of pre-existing widgets. The widget library is tailored to the device template you select on the onset of your project, and can include elements such as interactive buttons, checkboxes, lists, and even parallax layouts. There are tons of other widget packs available for download on their site to ensure your library is as stacked as you need it to be.
The sophistication of Justinmind might throw off some beginner prototypers, but there are many educational resources to help you get started if you get stuck. Their tutorial section is packed with helpful video walkthroughs categorized by difficulty, and they offer community support for more specific issues.
Justinmind’s free plan offers within-browser sharing capabilities, but if you want to enable collaboration among your team you’ll need to upgrade to a paid account. Once upgraded, multiple users can simultaneously interact with the same prototype. You can quickly differentiate various types of edits since your team’s location-specific comments are distinguished by colour.
Perfect for: Web designers looking for an all-in-one prototyping tool
Ideal prototyping formats: Web and mobile (Android, Windows, Blackberry and iOS)
Sharing capabilities: Basic sharing in free plan, cloud-based collaborative features unlocked in paid plans
Support: Difficulty-based video tutorials and support community
Price: Plans ranging from free to $19 per user per month with an enterprise plan beginning at $49 per user per month. Perpetual licenses are also available.
Marvel is a great browser-based prototyping tool that excels in its ability to simplify the prototyping process. As soon as you’ve signed up for your Marvel account, you’re immediately dropped into the interface and can begin creating your first prototype. From there, you can easily upload your image files into Marvel and start adding gestures and transitions. The platform supports direct uploading of certain image file types including PSD, GIF, and JPG, as well as third party uploading via Google Drive, Sketch, or Dropbox.
While Marvel doesn’t offer the kind of complete image editing capabilities found in other software, it does have some basic functionality like background colour changes and image resizing. You also have access to 17 different device templates when creating your prototypes. This allows you to rest assured that your mockups are fully optimized for the specific device you are designing for.
Marvel’s mobile companion app is probably the tool’s coolest feature. If you’re a designer who loves starting projects on paper, the app can turn your sketches into prototypes just by taking a photo. Your photos are automatically synced with your Marvel account, allowing you to quickly create mockups to experiment with before even designing a single layout in Photoshop or Sketch.
Not only is Marvel simple to use, but it’s also simple to learn. Their website is complete with FAQs, video and written tutorials, as well as a regularly updated blog. Marvel is also home to a thriving community of designers who regularly share their prototype designs to help inspire the workflows of others.
While the simplicity of Marvel may limit the functionality desired by some designers, its low barrier to entry and companion app makes it the perfect tool to get up and prototyping quickly.
Perfect for: A beginner web designer or someone looking to create a mockup quickly
Ideal prototyping options: Web and mobile (Android and iOS)
Sharing capabilities: Can share on free plan, but can collaborate only on paid plans
Support: FAQ, thought leadership blog, and access to community-created content
Price: Monthly pricing plans — features and number of users unlock when you’re willing to pay more
Origami is a Facebook-owned prototyping tool that has been used to create mockups for several apps including Instagram, Messenger, and Paper. While predominantly used for iOS apps due to its integration with Apple’s Quartz Composer, Origami also supports the development of interactive Android prototypes. The tool offers designers a suite of gestures and transition animations common to mobile UI patterns — many of which are available via downloadable sample files.
Origami offers a couple of useful features for interactive prototyping, including plugins for Sketch and Photoshop as well as an extensive documentation library complete with forums, video tutorials, and guides. My personal favourite, however, is its “Export to Code” feature. This option lets you convert your visual design into written code samples for iOS, Android, or web. This allows you to share animation spec snippets with engineers with just a click of a button.
You can quickly test out your interactive mobile prototypes directly within an iOS device with the companion app, Origami Live. All you need to do is download the app from the Apple App Store and plug in your iOS device to your desktop, and voila! — you have an interactive mobile work environment. Unfortunately, this is the extent of Origami’s collaborative capabilities as you can’t directly share prototypes with individuals operating on devices other than your own.
Perfect for: A lone app designer focusing on iOS interfaces
Ideal prototyping formats: Web and mobile (Android and iOS)
Sharing capabilities: Lack of robust sharing capabilities with teammates
Support: Some documentation including tutorials and sample files as well as a very active social community of users
Edit: While Pixate was a great option for prototyping when we originally launched this article, it has now been deprecated and will no longer offer active support to the community. As of October 31, 2016, Pixate Cloud will be shut down and Pixate Studio will no longer be available for public download. You can read more about Google's reasoning in this blog post announcement.
Powered by Google, Pixate is another prototyping platform that allows web designers to test out mobile interaction designs, animations, and wireframes for Android or iOS devices.
When in Pixate, you are able to create interface layouts in the form of layers — akin to most graphic design suites — and individual animations through a simple drag and drop function. While these are great to have, what makes Pixate truly useful is its ability to map simulated tactile interactions to these animations through pre-configured options including tap, drag, and double tap. Once you’re happy with your prototype, you can deploy and test it on an Android or iOS device.
Google has also done a great job of reducing the learning curve with Pixate. Once you get Pixate up and running, check out their in-depth documentation and tutorials offered online to learn the basics of creating your first prototype.
But be warned: while Pixate works great for individual freelancers, it can become a little pricey if you work with a larger team of designers. As long as you’re willing to pay the $5 per user per month subscription fee, Pixate’s cloud service allows you to create an unlimited amount of prototype projects that you can share with teammates or clients. Otherwise you’ll find yourself limited in the amount of users and mockups you can create.
Perfect for: Advanced freelance mobile app designers looking to create detailed prototypes
Ideal prototyping formats: Mobile only (Android and iOS)
Sharing capabilities: Sharing is limited to selected pricing plan
Support: Great documentation and tutorials to help you get started
Price: Free or $5 per user per month for a Cloud Plan