Atomic: A Faster Way To Design Beautiful Interactions?

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.

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.

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.

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.

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

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.

Continue reading %Atomic: A Faster Way To Design Beautiful Interactions?%

by Daniel Schwarz via SitePoint