The New Generation of Prototyping Tools (Part 1/2)
Stepping Up the Craft of Design
There has been an explosion of web innovation recently. Compelling design makes many people use their devices and apps more. For designers, this puts pressure on us to craft each piece of our products to engage, delight, or [enter your goal here]. This goes for consumer products, games, enterprise tools, healthcare — you name it — there’s a higher standard for every screen, navigation component, button, interaction, and transition.
I’ve come across several new prototyping tools to help me create and express what I want to build. By new, I mean brand spanking new. Everyone has heard of InVision, Framer, and Quartz Composer (see Prototyping Tools and Process survey from Chris McCann at Greylock Ventures).
I’ve always viewed prototyping tools as a means to an end. Whether I’m building a “looks like” or “works like” prototype, I want to be quick and invest as little time as possible to achieve my goal. I’ll focus on a few tools that help me prototype responsive behavior, show transitions and animations, and translate designs for developers.
Weld
Positioned currently as a tool to get you “From idea to website in minutes”, I was introduced to Weld when it was primarily a prototyping tool (see Product Hunt discussion for more). They have since differentiated by allowing you to host a website (domain included) with your design for free.
Current state aside, you can still use it for prototyping, and it’s a very powerful way to express what happens in a responsive app or website.
Define Your Breakpoints
Standard projects in Weld include Phone, Tablet, and Desktop layouts. This is appropriate for most website projects, but perhaps your design calls for a two monitor layout (e.g. trading tools for pro investors), a wearable device layout (e.g. Apple Watch), or a large TV layout (e.g. gaming on Xbox). Weld now allows you to define your own layouts and breakpoints.
Remember to cover all appropriate browser/screen widths if you change the defaults. You can adjust the breakpoints later on in your project, but it saves a lot of time if you do this step up front.
Create or Upload Assets
There are two options for generating assets. You can create your own and paste them into Weld or you can use their Symbol Library to add elements, icons, etc. I find myself generating several asset sizes to cover the standard scenario — one asset for desktop/tablet and one asset for mobile. That way the asset looks better and is readable at each screen size.
Make Adjustments at Each Layout
I recommend starting your design in one layout (mobile if you’re going for a mobile first design, etc.). You can see how this automatically adjusts to different layouts as you design by clicking on the layout selectors.
You’ll need to make adjustments from the auto layout, and can do so by locking down edits to one layout at a time. If you end up using the technique above in creating different assets for different layouts, you’ll need to show/hide assets for each layout using the opacity tools.
Set Up Transitions
The structure in each Weld prototype is very light. You divide the prototype by screens. You can add or duplicate screens and manage them from your project overview screen. To create a transition, you select an element and define the link and transition style.
Sharing and Exporting
The great thing about Weld is you can view prototypes in the browser on any device in real time. Making edits as you go along? No problem. Weld will automatically push the changes as you make them. I found this really helpful in remote user testing sessions. Additionally, you can password protect any of your prototypes and create a unique URL for them.
My Wishlist for Weld
This tool could use some improvements, but overall customer support is superb and fast. They are actively developing the platform and I’d love to see some additions.
- WYSIWIG editor still in flux. Some elements do not appear the same on the editor and viewer. This is to be expected from a beta tool, but I found 2 or 3 elements that I had to adjust with the live view on my other monitor. After I came back to my prototype in a month, I had to make adjustments because of new features. Hoping this is more stable now. Note: The Weld team is working on improving the editor and other enhancements according to the founder.
- Stick to bottom. You can create elements that stick to the top of the page (think sticky navigation menus), but not elements that stick to the bottom (think tab bars). Keep this in mind, as I had to size a tab bar to my device height manually.
- Layer tools. I’d love to see a layer view so I can manage complex screens better rather than moving elements.
- Grouping. I use some advanced features where you can change button style on hover, on click/tap, etc. It would be great to group elements and have the styling apply to both (e.g. a button with an image).
I find Weld an excellent way to create a low-fidelity prototype and connect the dots. Creating a simple app prototype with a side navigation menu took 30 minutes to create from scratch. I can now go to any device and use it for testing or getting buy-in for my concept.
Atomic
The team at Atomic boasts that their tool to be the “The fastest way to design beautiful interactions” and are building “Design, prototyping and collaboration tools for pro designers”. Because of its simplicity, even non-designers can use the tools.
Their vision is that you create designs and prototypes from start to finish in Atomic — no Sketch, no Illustrator, no After Effects. Not to mention, they’re starting to compete with the tools that allow teams to collaborate and comment on your designs.
Set Device Type or Custom Page Size
Unlike Weld, you must select one device type or layout size. If you’re doing a responsive or native app/website, you may end up creating two or three prototypes to express the same thing. If this isn’t a concern, you can create one higher fidelity prototype using Atomic.
Create or Upload Assets
Drawing tools in Atomic are quite similar to design software you are used to. You can create basic shapes (rectangles, ovals, lines), lines, and add images. As you can tell, the prototype is split into pages and you have a great layer management view.
I think Atomic a little premature to ween me off Sketch, which is why I like their integration to traditional design tools (Adobe & Sketch). Simply drag and drop, or copy and paste from Photoshop and Sketch.
Define Hotspots
Draw a rectangular hotspot over any area of your page and set up the target page and animation style. They already support gestures and more are coming soon.
Tweak Transition Animations
You can achieve some really great animations already, like these cards popping in at different times. This can be done right now by having off page elements at varying distances animate in over the same duration.
Collaborate and Comment
A recent feature addition: you can now collaborate amongst your design team on the same project. You get locked out of pages being edited by other teammates right now, but you can always duplicate the pages to continue.
Commenting is done at the page level, but can only be seen in the viewer, not the editor.
See Your Design History
Just like scrubbing through your favorite song to get to the best part, you can now see the evolution of your music player app right from Atomic. Superbly implemented by page. Would love to see a design history by project as well (or maybe that’s just me!).
My Wishlist for Atomic
Atomic has come a long way since its promo video and closed beta. It’s now in open beta, and their vision is large.
- Collaboration tools. These are not as advanced yet in Atomic as they are in InVision, but I think they will get there with time. Being able to see comments in the editor would be a great improvement.
- Element animations/transitions. What I’m very excited about is per element animations. You’ll be able to set the sequencing of animations, rather than have them happen simultaneously. I understand the feature is targeting page transitions right now, but could be used to simulate on-page animations (e.g. simulating float label patterns as a user stays on the login page). I had a conversation with someone at Atomic back in April, and here’s the feature coming to fruition in July.
- Support for large assets. Perhaps it’s my machine slowing down with all these tabs open, but I find pasting large assets and manipulating them is hard to do in Atomic right now. Be warned — you’ll slow your browser down! Note: An Atomic team member says that future enhancements and pre-launch tuning are coming.
With the level of support I received with the closed beta, and their willingness to share future plans, I think Atomic is a total winner. Look at some of their examples if you’re not convinced yet.
If you’re interested in reading good design articles, the team at Atomic publishes the Product Design Weekly newsletter. Very forward thinking and I can’t wait to see what’s next.
Notable Mentions
Marvel
“Free mobile & web prototyping for everyone. No coding required.”
It has a similar feature set to Atomic, but has less control over animations and transitions. It’s meant for anyone, including non-designers, and has all the basics of a Keynote replacement.
What I really like is the ability to embed prototypes easily. You may have noticed a bunch of Medium articles sporting a device frame and prototype right within the article for you to play with. You can also put them on Squarespace websites, Behance portfolios and other places with ease.
Pixate & Form
Just as I was writing this article, Google acquired Pixate to bolster their design tools for Material Design. Google had already acquired Form last year. Pixate and Form allow you to publish prototypes as native apps to iOS and Android.
Between Pixate (easy to design) and Form (advanced visual programming language), Google has built their strategy to support both the basic and advanced prototyping needs of design teams. You can learn more from the roundtable discussion between Google, Pixate, and Form. Note: Pixate and Form will be replaced by Stage in 2017.
Avocado, Flinto, Origami, Proto.io, UXPin
Each of these new generation of tools has a slightly different flavor. Depending on what stage you’re in, and what you need to do in a prototype, other tools may be a better fit. See a thorough list over at http://prototypingtools.co/ (by @millonestarde).
What Are You Seeing?
What prototyping tools have you used in the past? What are you using now? Would love to hear your thoughts on the latest tools and what you’re doing with them.
Part 2/2 and the Next Article
Prototyping is a means to an end, as I mentioned before. What’s the next step? For me it’s usually to go build it, or many times, find a developer to partner with. To make the transition smoother, designers can use tools that speak their language, as well as the language of developers. Originally, I planned on discussing design hand-off without the fuss. Since there have been many advances in prototyping tools, I’m going to continue talking about these tools in Part 2 and split off the “fussless hand-off” topic into a new article.
Till then, you can read Part 2, where I have explored how you can lower the cost of decision making with the latest in prototyping tools.
Follow me on Twitter at @KunalsLab or right here in Medium so you don’t miss the next article. Please let me know if you found the post valuable with your 👏. Thanks!
