Telling Stories With Front-End Development

August 16th 2016

Two years ago my home burned down, I lost everything I owned, except few things in storage. Three weeks later my grandmother who I was very close to died. It was the most emotional turmoil I’ve ever faced. When I got to other side of it, as we always do when faced with great adversity, I realized stories are all we have, and all we leave behind. Stories are important. Today I want to talk about story telling and how it relates to our work as Front-End Developers.

What makes a good story? A good story has structure, a consistent theme and few surprises along the way.

What is it we do? Yes, we write code. That code creates the colors, shapes and interactions of a website that tell the story of the client’s brand and business goals. Consistency and flexibility is what makes good code. A good story is consistent and compelling because it’s flexible in that it is not always predictable. We provide the consistent and flexible structure that supports surprises.

Before we can even begin building the frame for the story to live in we must understand the story we are telling. This is why it is important for us to be involved early on in the process. Review documents yes, also ask questions, engage, really discover the story and immerse yourself in it.

How do we tell a story with code?

As I said consistency and flexibility make good code and a good story. The story of the brand needs be told in a dynamic and compelling way. Consistent colors, shapes and animation are our main tools to tell the story.

Stories are all we have, and all we leave behind. Stories are important.

Elements of a story told with code: Colors | Shapes | Animation

Colors: Color supports the tone of the story. With preprocessor SASS it has become even easier, using variables we only have maintain and update one file to effect change across the site as a whole. Giving us flexibility and consistency. Understanding the brand guidelines is important when constructing your variable file.

Shapes: give structure for the story. grid frameworks, border radius and other CSS attributes have given us consistency and some flexibility. We should never say, "oh, we can't do that the framework doesn't support a 5 column layout" then don't use the frame work there. We need to provide flexibility for surprises.

Animation: The movement of animation gives energy to the story. Simple things like smooth color transitions on rollover of buttons and links, zooms and changing the shape and layout of items on click on hover. Good animation compels the user to engage and continue to interact and take action. Ultimately that's the goal to have the user take action. Animating the web is tricky, we don’t want another round of “we have Flash, let's make everything move and flash all the time” ever again, never again. Never ever again. Just because we can doesn’t mean we should. I prefer animation that is initiated by the user rather than auto playing. The client may feel differently, in that case pacing is everything, not too fast or too slow.


As I said: stories are important, it’s important for us to tell them with passion.

I am a front-end developer, I am story teller and so are you.