Published on | Prototyping: From UX to Front End — Medium Chris Konings

The benefits

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 Framer 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:

CSS Transforms
CSS Transitions
CSS Keyframes

These are just what we’ll be looking at in this quick introduction to getting started with some interactions.

Lessons from Offset

A recent workshop I helped facilitate at Offset (in Dublin, 2017) 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.

Our Offset 2017 coding workshop

Getting started

It’s never been easier to get started with code, you don’t need to download anything, just visit Codepen, 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 Brad Frost’s Atomic Design.

Transforms

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 Transform. We can manipulate the button with multiple values and apply the effect to a hover, giving a clear visual response to our action.

“My best advice for folks who want to use more animation in their work is to start small…” — Val Head

Some examples of CSS transform values

Here’s a basic transform value applied to a button hover:

.button:hover {
  transform: rotate(15deg);
}

The results of our hover interaction

Performance

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.

A basic breakdown of cheap animation properties

Transitions

The next step is to give the interaction a transition, 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:

Selector (element)
Property (transform)
Duration (1 second)
Timing (ease)
Delay (1 second)

Timing

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 cubic-bezier(), you can build your own with Lea Verou’s handy cubic-bezier tool.

Some basic cubic Bézier curves

Here’s our transform effect combined with a transition:

.button {
  transform: rotate(0);
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: ease;
}

.button:hover {
  transform: rotate(15deg);
}

We are taking our first steps towards an interactive design, one that considers how the button will react to a cursor hovering over it.

Our hover effect with a transition

Keyframes

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:

animation-name (Defines the name of the animation)
keyframes-selector (Percentage of the animation duration)
css-styles (One or more CSS style properties)

Animation anatomy:

animation-name (The name of the animation you want to bind)
animation-duration (How many seconds an animation takes to complete)
animation-timing-function (The speed curve of the animation)
animation-delay (A delay before the animation will start)
animation-iteration-count (How many times the animation should be played)
animation-direction (Whether the animation should play in reverse or alternate cycles)
animation-fill-mode (The values applied by the animation outside it’s execution time)
animation-play-state (Whether the animation is running or paused)

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:

@keyframes bounce {
   0% {transform: translateY(0);}
   50% {transform: translateY(-5px);}
   100% {transform: translateY(0);}
}

Next we bind that keyframe animation to our button:

.button {
   animation-name: bounce;
   animation-duration: 1s;
   animation-iteration-count: infinite;
}

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.

Next steps

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.

Go forth

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!

How to Move Beyond Design Tools was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Move Beyond Design Tools

Cool stuff, every week

More Articles