Tips for prototyping smarter

Femke van Schoonhoven

Prototypes are remarkably useful. They let you add surface area to ideas, which helps everyone around you understand them, grab hold of them and add to their evolution.

Designers everywhere are looking for smart ways to prototype. Like many of our users, you may have have discovered Atomic when looking for a better way to prototype. But using prototypes does not come without challenges. This article explores a few ways you can use Atomic to overcome these.

The prototyping paradox

Until recently, prototyping was still seen as a luxury. Anything more than simplistic click-flows took forever to create and were hard to share. Complex, expressive prototypes lived in a code-fuelled fantasy land out of reach of the everyday design team workflow.

Designers have been blocked from high fidelity prototyping due to overly complex or overly limited tools. This created a problem, because a prototype is only useful to the extent that the people using it can understand it. While low-fidelity formats like sketching and paper prototyping have traditionally been good for exploring ideas, they’re also a poor way to bring ideas to life in a way that people can actually touch, feel and interact.

There is no better way to understand what the end product will look like than interacting with a working prototype on your very own device.


New tools break old rules

Atomic is a new type of design and prototyping tool which makes it quick and easy to create compelling prototypes in dramatically less time.

If you’re completely new to Atomic, a great place to start is our Getting Started Guide, which will help you find your bearings in Atomic. Assuming you know the basics, here are a few extra practical tips you can take advantage of to get to fidelity faster in Atomic.

Adopt these so you can spend more time out in the real World sharing, getting feedback, and even user testing your prototypes, and less time with your head down creating them.


Start with simple animation, upgrade it only when you need to

Consider each page you create in an Atomic design as a keyframe in an animation. Think of them as stops along the way of your prototype’s story. At each stop, your design is laid out differently, reflecting the state of your design at that point. Just make sure the elements you want to animate exist on both the before and on the after pages in your design.

Now that your pages are ready, it’s time to animate the transitions.

Drag a hotspot over the interactive area on the before page, and choose from the simple preset transitions.

At this point, you have beautiful transitions from one page to the next. Now, if you need to, switch your transition to Advanced Motion and customize the animation type, speed and sequence for every element in your animation. All without touching a single line of code.

When you’re ready to go next level, spending a little time mastering Advanced Motion in Atomic will greatly increase your ability clearly express the intent of the interactions in your prototypes.


Clone your design and use it as a boilerplate for your next prototype

Allow yourself to spend time exploring and crafting interactions for one project, knowing that when you’re exploring something else, you’ll be able to reuse patterns and interactions from your earlier work.

Duplicating a design in Atomic copies the visual design and animation of every page in that design.

When you generate a share link for your design you can even choose to enable people to copy & edit , so that anyone you share that link with can clone your design into their own project to work on separately.


Move faster by inviting your teammates to design alongside you

Sharing files from traditional design tools is a recipe for disaster. Overwriting someone’s work, corrupting files or mucking up the file syncing are all common troubles. Not so in Atomic, with Shared Projects and our smart multi-user editing feature.

Every edit you make is stored in Atomic’s cloud-based hub, so there’s no chance of overwriting each other’s work. You can even work on different pages of the same design at the same time without fear of corrupting files or tripping over each other.

A common use of multi-user editing is to divide and conquer. At the same time, one person might be in the design editing content, while another is crafting the interface, and yet another building animations and transitions.

Working together in the same design, without the stress of managing files, versions or syncing means your team can progress a prototype further in less time, with less back and forth.


Know when to hack and when to craft

A prototype doesn’t have to be perfect. It’s important to choose ahead of time which aspects to hack, so that the design process can move faster. A great way to start your prototypes is to assemble assets from existing designs and bring them into Atomic. You can then use Atomic’s beautiful drawing tools to build the design out from there. Other times it may be faster to design from scratch in Atomic.

Many features in Atomic can help you optimize for speed. Copy and paste elements from Sketch or Photoshop into Atomic. Drag and drop screenshots into Atomic and use Containers to quickly mask unwanted areas. Use Custom CSS to push element styles further.

Our Help Center is packed with tips and tricks and our Facebook Community is quick off the mark – a great place to speak to other users of Atomic. And we’re always right here waiting for your questions.

Got a tip to share about reaching fidelity faster in Atomic? Share it in our Facebook Group and we might send a special something your way!

Posted 15 March 2016

Advanced interactive design & prototyping.