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.

This video is about making responsive design prototypes in Weld (www.weld.io). With Weld, we wanted a tool that makes responsive design intuitive, but also easy to maintain. The tool enables you to create device-specific layouts while still connecting the design to the master template. More info: http://weld.helpgizmo.com/help/article/link/responsive-editing Start using Weld: https://www.weld.io

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.

Resizing a responsive web design prototype in Weld

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.

Adjusting elements at each layout can be achieved by (1) selecting a layout, (2) switching from “edit all” to “edit [layout]”, and (3) making adjustments.

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.

A new set of tools is exposed when clicking on elements

Basic transitions allow you to link and animate the transition

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 would 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).

Personally, 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 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.

Here's a quick overview of how to make an animated prototype in Atomic using hotspots and multiple pages. Atomic is interface design software, with prototyping, collaboration and version control built in. Find out more at: https://atomic.io Music by: http://racebanyon.bandcamp.com

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 it’s 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.

Change the animation style (curves) and timing (duration and delay)

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.

Page lock notificationCommenting 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!).

Design history is a visual experience worth checking out

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.

Coming soon - per element animation for page transitions

Support for large assets. Perhaps its 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.

A Google Calendar example prototype from Atomic

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.

Avacado, Flinto, Oragami, 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).