Published on <a href="http://ift.tt/2nCgKBW">| Prototyping: From UX to Front End &mdash; Medium</a> Chris Konings 
<h3>The benefits</h3>
When you’re a designer who is often creating prototypes with conventional design tools, there might just come a time when you want to explore the possibilities of code to enhance the design with an interaction.
Granted there are some prototyping tools that can help you get started thinking in code such as <a href="https://framer.com/">Framer</a> for instance. But what if you want to go a step further, and step outside of the prototyping sandbox — out in the wild with your developer friends? Well a great place to start can be with CSS animations, a fun area of front end development where a lot of design theory is relevant.
It includes exploring the likes of:
<ul>
<li>CSS Transforms</li>
<li>CSS Transitions</li>
<li>CSS Keyframes</li>
</ul>
These are just what we’ll be looking at in this quick introduction to getting started with some interactions.
<h4>Lessons from Offset</h4>
A recent workshop I helped facilitate at <a href="http://ift.tt/2bH4syR">Offset (in Dublin, 2017)</a> showed me how anyone can be exposed to prototyping in code without being weighed down by the details — and this is what I’ll share with you. The workshop broke down web animation, CSS and ‘UI in motion’ for beginners, removing any skill-set limitation when it comes to code. We didn’t just want to teach code, but also how code can sometimes be just as easy as using Photoshop or Illustrator to design.
<img alt="" src="http://ift.tt/2prIbuY">Our Offset 2017 coding workshop
<h3>Getting started</h3>
It’s never been easier to get started with code, you don’t need to download anything, just visit <a href="http://codepen.io/">Codepen</a>, create a new pen and start writing code! The key is to break down your design in to components, look at your design as if each piece could be pulled out individually and prototyped before putting it together to complete the experience. For more information on this approach check out <a href="http://ift.tt/10fvlmw">Brad Frost’s Atomic Design</a>.
<h3>Transforms</h3>
Let’s begin with something small, a button, it has enough native properties to demonstrate an interaction, we can add a hover effect simply using <a href="http://ift.tt/2owZqxF">Transform</a>. We can manipulate the button with multiple values and apply the effect to a hover, giving a clear visual response to our action.
<blockquote>“My best advice for folks who want to use more animation in their work is to start small…” — <a href="http://ift.tt/2prlBCL">Val Head</a></blockquote>
<img alt="" src="http://ift.tt/2nCJHy1">Some examples of CSS transform values
Here’s a basic transform value applied to a button <a href="http://ift.tt/2oxgnrF">hover</a>:
<pre>.button:hover { transform: rotate(15deg); }</pre>
<img alt="" src="http://ift.tt/2ps1dRR">The results of our hover interaction
<h3>Performance</h3>
The CSS transform property has so much to offer and is great for performance. In short a GPU can assist with the animation, avoid skipping of frames and give you a smooth interaction.
<img alt="" src="http://ift.tt/2nCKQ8H">A basic breakdown of cheap animation properties
<h3>Transitions</h3>
The next step is to give the interaction a <a href="http://ift.tt/1R4VY4j">transition</a>, we can control what element we transition, what property we transition, how long that takes, the timing (it can speed up or down over time) and finally we can delay the effect.
Basic transition anatomy:
<ul>
<li>Selector (element)</li>
<li>Property (transform)</li>
<li>Duration (1 second)</li>
<li>Timing (ease)</li>
<li>Delay (1 second)</li>
</ul>
<h4>Timing</h4>
An interaction doesn’t always have to be linear, if we want to give our design personality let’s have some fun with timing. To work with timing in CSS animation we can use easing functions to specify the rate of change of an effect over time. The best way to use a timing function is with a <a href="http://ift.tt/2mh52ri">cubic-bezier()</a>, you can build your own with <a href="https://twitter.com/LeaVerou">Lea Verou</a>’s handy <a href="http://ift.tt/THaa4l">cubic-bezier tool</a>.
<img alt="" src="http://ift.tt/2prTbIx">Some basic cubic Bézier curves
Here’s our transform effect combined with a transition:
<pre>.button { transform: rotate(0); transition-duration: 1s; transition-property: transform; transition-timing-function: ease; } .button:hover { transform: rotate(15deg); }</pre>
We are taking our first steps towards an interactive design, one that considers how the button will react to a cursor hovering over it.
<img alt="" src="http://ift.tt/2nCPROu">Our hover effect with a transition
<h3>Keyframes</h3>
So, now that you’ve dipped your toes in web animation let’s extend that knowledge with keyframes. We can use keyframes to create smooth, detailed animation with flexible controls. Think of them as step-by-step instructions on how you want your design to change over time. Keyframes are made up of two parts, the keyframes properties and the animation properties.
Keyframes anatomy:
<ul>
<li>animation-name (Defines the name of the animation)</li>
<li>keyframes-selector (Percentage of the animation duration)</li>
<li>css-styles (One or more CSS style properties)</li>
</ul>
Animation anatomy:
<ul>
<li>animation-name (The name of the animation you want to bind)</li>
<li>animation-duration (How many seconds an animation takes to complete)</li>
<li>animation-timing-function (The speed curve of the animation)</li>
<li>animation-delay (A delay before the animation will start)</li>
<li>animation-iteration-count (How many times the animation should be played)</li>
<li>animation-direction (Whether the animation should play in reverse or alternate cycles)</li>
<li>animation-fill-mode (The values applied by the animation outside it’s execution time)</li>
<li>animation-play-state (Whether the animation is running or paused)</li>
</ul>
As you can see we have a lot of control over the behaviour of our animation, by stepping outside of our design tool and getting our hands dirty with code we can understand our design in more detail, we are no longer working on two-dimensional concepts.
Here’s a basic keyframe animation setup for a bounce effect:
<pre>@keyframes bounce { 0% {transform: translateY(0);} 50% {transform: translateY(-5px);} 100% {transform: translateY(0);} }</pre>
Next we bind that keyframe animation to our button:
<pre>.button { animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite; }</pre>
<img alt="" src="http://ift.tt/2prTK5p">The bounce keyframe animation applied to our button
That’s it, your basic keyframe animation, you have that in your arsenal for future reference and can apply it to any component you want to bounce.
<h3>Next steps</h3>
The next time you are working in your design tool pick something specific you think would benefit from a being coded, consider the hover or click reaction, and experiment with CSS to enhance your design. When it comes to sharing the design with your engineers they will appreciate the level of consideration you have taken in exploring the interactions of your elements.
<h3>Go forth</h3>
Now that you have been introduced to how a new dimension is given to an element when you consider the CSS properties that comes with it use this process the next time you are in your design tool. Think about the interactions of each element, ask yourself ‘how should that dropdown actually drop?’ or ‘would motion improve this design?’ and give it a go!
<img src="http://ift.tt/2nCFslP" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2prJEl0">How to Move Beyond Design Tools</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Move Beyond Design Tools

The benefits

Top Stories