Let’s take a look at some prototyping tools available for web designers today, in no particular order:
- Framer
- Adobe XD
- Adobe After Effects
- Adobe Animate CC
- Craft Prototype
- Principle
- Atomic
- Proto
- JustinMind
- Origami
- Flinto
- Webflow
- Marvel App
Dishing out ideas to stakeholders and clients can seem effortless at first, but when things get difficult we need tools to help speed up the feedback process. The web is becoming more complicated for front-end designers, with ever-more interactive requests. Actions such as swiping and dragging are just the tip of the iceberg, and figuring out how the whole puzzle fits together is where the true art of prototyping lies.
Where Prototyping Fits
By definition, a “prototype” is an early sample built to test specific concepts. A prototype is used to evaluate and enhance a system to gain better insight into the project as a whole. We all work on projects on a daily basis and some are far more intricate than others, but when is it time to call for a tool to help aid in the feedback food chain?
Some would argue code is far quicker to begin with, but there are moments when time is better spent using a prototype instead of spending time engineering something that may fall quickly to the wayside. Prototyping invites feedback on interaction and placement. It’s an interactive wireframe, giving clients a better understanding on how the project fits together for their users.
Other times, prototyping before coding can help benefit the project by identifying any edge cases that may have been missed.
Prototyping and the Web Design Landscape
When we ask ourselves where this fits into the landscape today, we can definitely attribute the ever increasing demand for motion work. Interfaces are becoming living organisms with interactive content. Simple interactions can be cut and dry to explain verbally, but in other contexts it helps to gain perspective of how an interaction can be triggered–and more clients are demanding to see proof of concepts before signing off. It’s important, now more than ever, to have an idea on where to turn when the need to prototype should arise.
With so many tools available on the market, which one should you use? Let’s take a look.
1. Framer
- Plus License: $15/mo (Mac Only)
- Enterprise License: Contact
Framer lends the familiarity of visual editing with the flexibility of code, giving a seamless workflow complemented by device previewing, version control and simplistic sharing. An app that helps to pioneer new interaction patterns in order to create groundbreaking apps. Pull in data from your favorite API, capture real user input to test, and work with actual users and feedback. Import graphics directly from Sketch, Photoshop or Figma.
Although Framer may appear as though it’s used strictly for mobile apps, it can also be leveraged for non-app projects, or used as a standalone library. When using the Framer JS library alone, you avoid the IDE completely. Essentially it’s an open source JavaScript framework for rapid prototyping. Define animations and interactions, complete with filters, spring physics, 3D effects and more. Although CoffeeScript isn’t required, the docs use CoffeeScript as well as the IDE.
It should be known that Framer isn’t meant to be used for creating production-ready animations.
@UXDesignDad@framer Hey Andre! Framer is a prototyping tool for the Mac. So no production apps 😁
— Krijn Rijshouwer (@krijnrijshouwer) February 2, 2017
Because Framer has its own concept of layers and is pretty heavy code-wise, you can’t use it in plain (existing) DOM stuff like you might do with GreenSock. In fact, it puts its own canvas in the DOM and all the animations are run inside that canvas.
- https://framer.com/features/handoff
- https://framer.com/getstarted/guide
- https://framer.com/pricing/2017
- https://framer.com/getstarted/import
2. Adobe XD
- Price: Requires Adobe’s Creative Cloud Account
Draw, reuse, and remix vector and raster artwork to create wireframes, screen layouts, interactive prototypes and production-ready assets all from the same app. Work with powerful tools like Repeat Grid built specifically for XD, and with layers, symbols, and pen tools for UX design. Add interactions using a variety of animations to create transitions between art boards to simulate the flow of your app/website.
Clients can make comments directly on your prototypes when you share directly, and view designs in real time on actual devices. Designs can be adjusted and automatically updated across platforms. Switch easily from wireframing, visual design, interaction design, prototyping, preview and sharing, all in one powerful tool.
While XD is still a beta product it remains to be seen if it will stick around for the foreseeable future. You can read more about the features released here to stay informed on upcoming changes and enhancements. We even published a 15 part series covering all of the essential tools you’ll need to start designing and prototyping with Adobe XD:
3. Adobe AfterEffects
- Price: Requires Adobe’s Creative Cloud Account
After Effects is not specifically a prototyping tool for websites and applications (although you can still get away with it), but it does help prototype motion for those looking for a way to comp/mockup animations for clients. Create motion graphics for video or create animation effects for the Web. Here's a great article on Tuts+ by Charles Yeager:
Also checkout this ten part series on Tuts+ called Welcome to After Effects.
4. Adobe Animate CC
- Price: Requires Adobe’s Creative Cloud Account
Adobe Animate is an evolution of Flash Professional. It’s a tool that includes features such as timelines, keyframes, abundant export options, support for 3rd party JavaScript libraries, camera position adjustments and much more. While it is aimed more towards animators, don’t be fooled into thinking you can’t use it for other needs. Remember that tools do as much as you desire and are only limited by your imagination. Use it for website wireframes, animation testing for apps and more. You can read about the inner workings of Adobe Animate in this article by yours truly:
5. Craft Prototype
- Price: Free. Requires Sketch $99.00
Build hi-fi prototypes with your real design files. Craft is part of the Invision family; a company acquiring many tools (such as Macaw and Easee) these days from outside entities.
Craft Prototype is a powerful set of tools that lets you design with real data, creating style guides in one click. With prototype you can do the job right from Sketch; all in one space. With real time mirroring to your phone you can test out design prototypes immediately. When you’re ready to share, you can publish your work directly to Invision to gain instant feedback from clients and stake holders. It even lets you prototype at a higher fidelity with motion, giving you a timeline to adjust visually using keyframes. Generate HTML and CSS, native swift code, and documentation for your developer. Watch this short video explaining Craft 2.0 Preview - Prototype in Sketch on Vimeo.
6. Principle
- Price: $129.00 (Mac only)
Principle makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. The app appears very much like the UI for Sketch including other familiar aspects for alignment, art board creation and screen connections, plus real time previews. Click animation layers to dive deeper into keyframes and adjust custom easing curves just like you would in other animation tools. Principle gives you the freedom to experiment without limiting you to pre-defined transitions, plus you can import artboards from Sketch as well.
The Principle Mirror app for iOS lets others view your designs on their device. While designing, you can interact instantly by plugging your device into the computer or export a standalone Mac app for others to view.
7. Atomic
- Starter Tier: $15/mo
- Pro: $25/mo
- Unlimited: $25/mo
Atomic is a web-based app that integrates with Sketch, allowing you to import designs from there or anywhere of your choosing. Bringing designs into Atomic is simple; use the powerful Sketch plugin or drop in elements from your favorite design tool.
Atomic has built-in drawing and layout tools for designing from scratch or building upon imported designs. Quickly link your designs using a range of gestures and transitions for mobile or desktop. Use custom CSS to apply additional styles and also export your CSS to share with other developers. Read more about the features of Atomic on their website.
8. Proto
- Freelancer $24/mo
- Startup $40/mo
- Agency $80/mo
- Corporate $160/mo
Build sophisticated animations for any interaction design pattern with the easy to use timeline with Proto. The app comes with a complete set of UI libraries such as iOS9, Material Design, Windows 10 and more. Designs can be imported using the Sketch or the Photoshop plugin; import them in layers and synced with Dropbox. Export UI assets directly. Preview prototypes in browser or devices using proto app for IOS or Android. Share with clients or team members to collaborate and generate feedback. Proto integrates with leading user testing tools to get powerful feedback and insight.
Learn more about its features on the Proto website.
9. JustinMind
- Pro $19/mo
- Enterprise: Contact
JustinMind is an app-based product for transforming simple mockups into interactive prototypes for iOS and Android, and creating web and mobile wireframes. Take advantage of pre-built UI libraries, embed HTML and documents into anything your heart desires. Paid accounts allow multiple users to simultaneously interact with the same prototype making feedback effortless to gain. It even has an extensive library of pre-existing widgets tailored to the device template selected for your project. Elements like interactive buttons, checkboxes, lists, and even parallax layouts are at your disposal.
If you’re new to this tool it comes packed with great tutorials and guided videos for everyone from beginner to expert. While it offers a free plan for browser sharing abilities you must upgrade to a paid account for collaboration amongst your team members. With JustinMind Prototyper you can import images from any design tool or directly from your web browser and turn them into exciting and engaging web prototypes with the “image hotspot” tool. Export your prototype to a fully functional HTML document and make it readily available to view in any web browser.
10. Origami
- Price: Free Mac only.
Origami is built and used by designers at Facebook and has been used to create such apps like Instagram, Messenger and Paper. Copy anything from Sketch and paste native layers into Origami Studio. Quickly adjust, add behavior, and animate any layer property without going back. The tool offers designers an array of gestures and transition animations that are common to UI patterns.
Origami offers useful features for interactive prototyping along with plugins for Sketch and Photoshop as well as a documentation library complete with forums.
There is an “Export to Code” feature that lets you convert your visual design into written code samples for iOS, Android, or web. You can’t directly share prototypes with individuals operating on devices other than your own, though you can preview your prototypes with Origami Live, available for Android and iOS. Check out the tutorials for more insight on the Origami website.
11. Flinto
- Free 14 day Trial
- Flinto Lite; Web-based subscription $20/mo
- Mac App: $99
Flinto for Mac is an app-based tool that allows you to create anything from simple tap-through prototypes, to comprehensive prototypes with interactions. There’s no programming or timelines; it’s a prototyping tool for designers at its core. Place objects and components where you desire. Transitions can be simple or complex, and transitions are reusable. You have precise control over each layer, including spring or cubic-bezier easing.
Use the “behavior designer” to create micro-interactions that exist within one screen. This is perfect for things like button effects, toggle switches, looping animations and scroll-based animations.
Adding scrolling areas to your screens is easy too; select layers, and click the “scroll group” button. You can tweak a variety of options, create paging scroll groups, nest scroll groups and even create scroll-based animations.
All the changes you make in Flinto for Mac can be tested immediately in the preview window, or on your WiFi-connected iPhone or iPad using the free iOS viewer app.
Flinto’s iOS viewer app is free in the App Store for anyone to download, so you can send your Flinto files to anyone you’d like to share with.
12. Webflow
- Starter Tier: Free
- Lite: $16/mo
- Pro: $35/mo
Webflow is another web-based app that runs directly in the latest versions of Chrome and Safari. This means it’s currently optimized in those said browsers, however the code produced has cross browser support.
“Build dynamic, responsive websites without writing code. Launch with a click, and enjoy the fastest, most reliable hosting on the web. Export clean, semantic code to hand off to developers.”
Webflow is heavily focused on web animations, interactions and responsive web design. Interactions 2.0 is coming soon and will offer more control for animations and interactions across break points (often a pain point designers express), and of course the ease of building visually vs. a proxy of code.
To give you a taste of Webflow possibilities checkout this live demo that can also be viewed in Webflow or checkout the code produced in this CodePen demo. It’s also beneficial to get a taste of the UI in this video.
The code quality that’s produced is semantic, legible and easy to work with if you export and use it externally or hand it off to a developer. Here are a few demos showcasing the code produced.
Currently Interactions V1 is available and Interactions 2.0 will include more customizations with parallax type animations and interactivity built in visually; animations based upon cursor/live-scroll position. Webflow is hoping to launch the beta pretty soon so Interactions 2.0 will be a large part of the interface and a big reason for many designers and developers to use Webflow.
- https://wishlist.webflow.com/ideas/WEBFLOW-I-17
- http://3d-transforms.webflow.com
- https://webflow.com/prototyping
- https://webflow.com/feature/interactions-v2
- https://interactions.webflow.com
- https://flexbox.webflow.com
Thanks to Waldo Broodryk from Webflow who took the time to answer many of my questions and share his demos and knowledge.
13. Marvel App
- Free (1 user, 2 projects)
- Pro $12/mo
- Company $48/mo
The Marvel browser-based editor allows you to link all your designs together, add gestures and transitions to make your prototype feel just like a real app or website. Create prototypes for the iPhone, iPad, Desktop, Apple TV, Apple Watch and Android.
Marvel comes with such features as collaboration, commenting, along with designing in your browser with “Canvas”, plus you can add images using Photoshop, Sketch or pen and paper. Users can click and drag to create interactive hotspots on designs that react when they’re clicked or touched. Marvel comes with other cool features like a Sketch plugin and even an iOS tool. The iOS app now includes Canvas (mentioned previously), Marvel’s rapid design tool that allows you to create app mock-ups from scratch. This app also includes Iconfinder and Unsplash which provide you with an epic database of over one million stock photos and icons to incorporate into your designs.
Marvel also features such as user roles, project organization using folders, syncing designs from Google Drive, options to embed video and audio from YouTube, Spotify, Vimeo and SoundCloud.
Conclusion
No matter the tool you decide to use, choose the one that fits for you and the one you feel most comfortable with. Leave a comment below if you’ve had experience with any of the tools mentioned to help others trying to decide which tool to turn to. I hope this article helps you gain a more insight and arrive at an educated decision when the time comes to choose.
Special thanks to these folks for their input, knowledge sharing and opinions during my research:
- David K Piano
- Val Head
- Waldo Broodryk
- Stephen Shaw
- Christopher Wallis
- James Traggianese
- Suresh Selvaraj
- Will Phillips Jr.
- Iván Uruchurtu
