Design & UX
Article

Atomic: A Faster Way To Design Beautiful Interactions?

By Daniel Schwarz

Interaction design is the art of creating logical responses to a user's action on the web. Whether you're an interaction specialist, a user experience consultant, or a broadly-skilled web designer, it's your responsibility to decide how a web element reacts to interaction and communicate that to the development team, even if you don't quite understand the technologies that they'll use.

But what is the fastest way to do that, without walking over to your developers desk and gesturing insane hand movements?

Also, what if you work remotely?

Atomic finally released their beta last week and it's the fastest way of sampling an interaction idea and sending it out.

atomic logo

Before Atomic

FramerJS, Origami and Pixate are some of the tools at our disposal already, but we don't always want to code our interactions or test them on native devices, do we?

Atomic is blazingly fast, and if you're coming from a Sketch App background, it's even better. It mimics the same keyboard shortcuts, has the same intuitive snap-to features, and quite honestly it felt like I was using Sketch, only with the ability to prototype interactions.

Getting Started

Ready to start? It'll only take a few minutes of your time. Head over to the atomic website, sign up for the beta, and select "New Design" at the Projects screen. In this small tutorial we'll be transitioning a dropdown arrow into a close icon upon a click interaction.

Sample project seletion

Creating The First State

Press "L" to initiate a simple Line.

The other shortcuts are "S" for Select, "R" for Rectangle, "O" for Oval, "T" for Text, "I" for Image and "H" for Hotspot.

You can hold "Shift" while dragging to create a completely accurate 45 degree angle; to skip ahead a few steps, the X, Y, X2 and Y2 should be 350, 250, 450, 350 respectively, and also make sure the "Stroke" is 10px.

Draw a line diagonally right and down

Press "D" for Duplicate and enter a new set of coordinates: 453, 250, 443 and 350. We now have our dropdown icon, but we need it center-aligned. See the layers on the left-hand side? Click both of them while holding Shift and drag both lines together into the center of the artboard. You'll know you've hit the spot when the red auto-alignment lines appear.

We've created our first state.

First state: The complete down arrow shape

Creating The Second State

Click "Pages" in the layers sidebar; click "Page 1" on the card and rename it to something more relevant, like State 1 (Dropdown). Click the hamburger menu icon, also on the card, and duplicate our first state – then rename the duplication to State 2 (Close).

Atomic: Duplicate state 1 as your starting point.

Switch back to "Layers" and select that right-most line; drag it to the left until the dropdown icon resembles a close icon. Repeat the multiple layer select step (by selecting both layers while holding Shift, in case you forgot) and drag into the center of the artboard again.

Creating Interactive Hotspots

Now this is where the magic happens. Press "H" to create a Hotspot. Since we're only sampling a single interaction, the hotspot can be any size you wish, as long as it fully covers the dimensions of our icon.

After you've created the hotspot, a new set of options will appear. Under the "Interaction" heading, select the first state as the "Go To" option. Select "Cubic: Ease Out" as the animation type. Atomic is able to handle interactions of much higher complexity, but for the sake of this tutorial we'll keep it simple and use the default values for the other options.

The 'x' close icon

Previewing Interactions

Now switch back to the other state and repeat this step. When you're ready, click the "Preview" button in the bottom-right corner of the window and click away. What you should be seeing is your dropdown icon animating into a close icon.

Sharing Your Interaction

Atomic: animation of finished interaction

Two state interaction –https://beta.atomic.io/d/1rwK6IQhwha#

If you didn't actually follow this tutorial, that's fine…I'll send you a link! In the bottom-right corner, adjacent to the "Preview" button, click "Share".

Copy the link and simply send it to anybody you like, however you like. Here's the animation we made just now. After you've sent out the link to your interaction, users can comment on it and offer feedback.

It really is that simple!

Conclusion

Without downloading an app or writing a single line of code, I was able prototype how a dropdown icon would transform into a close icon. The use-case for this would be a dropdown menu that only appears when the icon is clicked, as opposed to accidentally triggering it upon a hover state.

But of course the dropdown needs a close icon, hence the use-case for my interaction idea. Did I mention you can copy my interaction and edit it? I challenge you to design the dropdown menu and demonstrate how exactly it would drop down.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.