It seems insane, but Photoshop is still the starting point for a lot of app and web designers. But when you start your design in a static tool that doesn't do interaction, or animation, or have version controls, much of the design isn't realized until the coding phase. But who wants to spend months coding something, only to discover the design is half-baked?
In recent years, prototyping has become an effective solution: interactive, crudely assembled proof-of-concepts that show how an app is supposed to work, and not just how it's supposed to look. But up until now, there have been few tools, and even fewer good ones, dedicated to prototyping.
Enter Atomic, a new company from cofounders behind the cloud-based accounting app Xero that aims to be a Google Docs-esque tool for designers: a powerful browser-based design tool with version control that lets you collaboratively prototype new, functional app designs compatibly with the devices they are meant to run on.
"Prototyping is worth a thousand meetings, and two thousand specifications," says Ben Pujji, Atomic's chief media officer. It's something that Atomic CEO Darryl Gray and CPO Grant Robinson learned a decade ago, designing every aspect of Xero from the ground up using Flash-based prototypes. It was a dreary pain in the ass, Pujji says, but the results were so impressive that when the Bank of New Zealand started hemorrhaging youth customers a few years back ("120 lost for every 100 opening accounts!"), the pair took the same approach to totally overhaul online banking for New Zealand's iPhone generation. But again, there was no dedicated tool for prototyping: Every prototype needed to be hand coded in a laborious manner.
Atomic was formed 18 months ago with the goal of making the design tool that Gray and Robinson had been dreaming of in the design trenches for the last decade. It's immediately familiar. When you first load up Atomic in a web browser, it almost looks like PowerPoint, asking you which device you want to design for, and then letting you drag in shapes and images, enter text, and specify colors.
Where Atomic differs from something like PowerPoint is that you can easily establish animated transitions between screens, as well as which elements are interactive, and what they do. Animations and transitions are handled with keyframes, almost like Adobe After Effects. For example, if you were prototyping a media player, you could easily design a transition when a user taps on a track so that the rest of the media list drops away, while the cover art for that tracks blows up to full screen with an overlaid control panel fading in on top.
As a design tool, Atomic seems powerful, but it's the app's collaboration and version control functionality that really stands out. A simple timeline allows designers to scrub through revisions, fork a design from a specific point, or make independent copies of a project to noodle around with. Comments can easily be made on any project, and sharing a design with collaborators is as simple as sending them a link. Even that's cool, though, because if you're viewing Atomic's share link on the device the project is being prototyped for—say, an iPhone—it will actually work as a functional proof-of-concept web app, letting designers easily test how their designs actually feel on their native platform.
Atomic is free to try, and priced between $15 and $35 a month, according to how many projects you create. It's also totally free for students, teachers, and academics. Pujji says that Atomic hopes this lenient pricing structure will get more designers prototyping.
"Right now, most designers know they need to prototype, but they're not because it's a nightmare," he says. "We want every designer prototyping, and we hope they'll use Atomic to do it."