Great interface design is quickly becoming a priority as
companies everywhere start realizing that it’s paramount to
their succeeding in the crowded online space.
Then why, despite its importance, has there been such a gap in the UX design tools space?
Atomic,
a startup team of ten based in Wellington, New Zealand, thinks it has
the tool that finally fills the gap that will allow product designers to
create great experiences for the Web and mobile devices. It’s in
private beta right now, but the team has given us a first look at what
it’s building.
Remember all the way back in 2013 when Adobe announced that it was killing its interface prototyping and design tool, Fireworks? I remember it well because my designer friends were mortified that Adobe would do such a thing, with little warning and basically no replacement tool.
Users came out in droves to express their
disappointment and disgust that Adobe didn’t care about them or realize
how important Fireworks was to their workflow. They were left to work
with tools like Photoshop or Sketch.
The idea
Around this time Grant Robinson, Darryl
Gray and Vim Jobanputra, co-founders of Atomic, realized that there was
an opportunity to build something that really catered to product
designers who didn’t have a tool built specifically with them in mind.
Gray told me that, “it felt like the time was right: Adobe had killed off Fireworks and Sketch
had shown that UI designers needed a much smaller feature set than
Photoshop or Fireworks. The browser was getting really powerful, and
prototyping was becoming much more important.”
But there’s more to it; designers are
living in this weird halfway house between the offline world and the
digital one; they’re using fragmented tools to collaborate; files are
shared via Dropbox or some other syncing tool; feedback is done via
email or Invision; changes are done back in the original tool and then
the process starts all over again.
Designers are constantly jumping between contexts and making hundreds of versions of the same document because of this.
As developers got better tools like deep version control with Git and real-time collaboration tools, designers have been left behind, quite literally.
Gray and Robinson know these pains all
too well; they’re experienced award-winning designers that have worked
together for over 15 years in agencies, on products and at startups like
Xero and others.
Atomic was born
Atomic was born out of these
frustrations, but it’s not like the interface tools that designers have
come across before; it’s entirely built in the browser and has some
unique features thanks to the power granted to it by modern Web
technologies.
The company’s tagline on its homepage is
“design the future” and it’s hard to disagree with that assessment when
you see it in action. When you first open Atomic, it resembles a
familiar desktop design tool, but it offers some powerful differences.
You can design your entire interface
right in the browser and it’s incredibly snappy. Even though it’s still
early in development, everything one would expect from a interface
design tool is already built in. You can draw shapes, import images and
manage layers.
Objects can be directly styled with CSS
if the user pleases, so they’re able to do some impressive tweaking in
addition to the basic design tool set, if they know how.
As you design your interface, Atomic
keeps track of every change you make. There’s a history slider at the
bottom that you can drag to go back to any point in time. If you make a
change here, it’ll create a new “variation” of your design and keep your
other changes safe. It’s like Git’s version control, but visual and
incredibly easy to use.
This means if you try a design but change
your mind, you can quickly go back to an earlier point in time and use
it as a springboard to test something different. The sheer simplicity of
it frees designers up to try hundreds of variations to their designs
without any friction in the process.
Dragging the history slider shows a
time-lapse style view of you designing the file. Every change is tracked
and shown as you drag it. Gray tells me that this feature alone has
gathered “a lot of interest” and it’s easy to see why; Atomic is
exposing the designer’s process.
Dropbox recently snapped up Pixelapse, a visual version control tool
that works with your existing tools like Photoshop or Sketch. Atomic’s
version control takes it to the next level, building it into their
first-party design tool and tracking every single change so they it be
viewed in a timelapse-style view.
There are some interesting tricks the
tool can do, thanks to it being built for the Web; Atomic can link two
pages in different documents together and animate them between their
different states.
For example, if you were working on a
desktop and mobile design, it would be useful to show the transition
between them. In Atomic, you can design the two different interfaces,
add clickable interaction hotspots and the tool does the heavy lifting
to show the transition between states.
Not only does this give product designers
the ability to show off interfaces in a way richer than previously
possible, it means they can test what a design will actually feel like in the real world before it’s built, with no coding and minimal effort.
Gray
showed me a mock up of Chrome for iOS’ new tab page and used the tool
to quickly get a feel for what it would look like to animate Chrome
opening a new tab.
The result is shockingly high-fidelity
that almost feels like the real app; which is powerful for when you’re
showing off designs to non-designers. When demonstrating a designer’s
work, instead of saying “now imagine it’ll do this when we click here,”
they’re able to show the real deal.
Atomic also builds in sharing and
feedback right into its core tool. Designers can quickly share their
ideas with a link and collaborators can give feedback right inside the
product. You can check out a shared design for yourself here; some areas are clickable, just like the real product would be.
Competitors like Invision
already do this for designs produced out of tools like Photoshop or
Sketch, but Atomic not only bakes this functionality right in, but again
allows designers to show off what it’ll actually feel like by setting it up to work with those animations and clickable areas like the real product would.
With Atomic, interface designers can finally communicate what they imagine the final result will be.
The web is finally fast enough
What surprised me most about about Atomic
is just how responsive and fluid the tool is, despite being in the
browser. The browser has come a long way in recent years and
Atomic has been born at a time where it’s finally possible to build
complex software like this without sizable drawbacks.
I wondered why Atomic was so quick and discovered it’s basically the bleeding edge of Web tech; the front-end is rendered using React with Flux architecture so everything is rendered in native HTML.
On the back-end, Atomic is entirely
Node.js and Postgres. One of Atomic’s developers, Alex Gibson said that
because Atomic is using React it can “generate the design document with
Phantom on the back-end without a browser to generate design previews as
images.”
Gray told me that technologies like
React.js “totally changed” the fact that browser performance often
wasn’t good enough for complex tools like this. He even admitted that
“being in a browser was a big issue for people when we started building
Atomic” but over time, it’s become less of an issue to the point where
the company gets no comments about it, “except for the people who tell
us they are surprised that it’s so performant.”
In the future, Atomic is going to have
even more impressive features; the team is working on real-time
multi-user editing of designs, as well as full Git-style history for
design. Users will be able to create separate branches of their designs,
work on them and then merge them back together. Gray says there’s
“loads to come this year.”
The tool is targeting product design
teams at companies who understand that collaboration pain when designing
interfaces and are looking for better tools that they can use to work
together, without all the fragmentation that exists today.
There are competitors for Atomic, but they’re all operating in slightly different spaces. Maccaw,
a recently released interface design tool, allows designers to create
their entire website design, then export the code so they don’t need to
actually do anything but runs on the desktop. Others like Canva are built for the web but target the “anyone can be a designer” audience.
Atomic has the potential to totally turn
the way those teams work upside down, if it gets the mix of
collaboration, prototyping and version control just right. Getting
designers to switch tools is no easy feat; many will wait to see how a
product develops over time before considering switching tools.
To me, it seems like the opportunity is
ripe for the taking. Gray says that since the company opened up a
waiting list, thousands of users have flocked to sign up from big-name
companies around the world. Many have been entire design teams wanting
to get onboard. He thinks there’s a real desire for something that works
better, but it just hadn’t existed before now.
Right now, Atomic is in private beta
while it works to ensure that everything works as expected and
gauges what features are needed for a wider launch, but you can sign up
to receive an invite as they go out over the coming weeks.
➤ Atomic
In the interest of full disclosure, my partner took a
job at Atomic after I began writing this story. I have no personal
interests in the company and her employment there has not influenced
this profile.