Designers and prototyping

In 2015, a web designer isn’t someone who simply mocks up websites. They are expected to code (front-end, at least) in HTML, CSS, and JavaScript. The skill-set expansion was triggered by a rapid growth in tools that made it less intimidating to code and a vast array of tutorials on the web. It allowed designers to implement their vision.

I believe we’re now experiencing a similar skill-set expansion in mobile design. Rising consumer expectations of apps feeling more natural and intuitive has fueled a parallel growth in designers needing to execute proper motion design in their apps. This in-turn forces the creation of new animation guidelines and opens a niche for an explosion of prototyping tools flooding the market.

And there are tons of them out there. There’s your basic Marvel, Flinto, and InVision which allow you to create a flow by connecting screens and linking hotspots. Pixate, one of my favorites, allows you to individually control UI elements with pre-defined mobile interactions to trigger all sorts of animations; it’s incredibly quick with its designer-friendly interface and very useful for a rough proof-of-concept prototype.

Then we enter code territory with tools like Form and Origami, which condense code down into a GUI of consumable blocks that can be linked together to perform a variety of actions. If you truly wanted to do anything, however, Framer is the way to go. If it can be done in JavaScript, it can be done in Framer; it allows for endless freedom to prototype any sort of complex interaction.

With the more advanced tools like Framer comes a higher learning curve where designers need to feel comfortable with a bit of coding. To me, this is an essential skill for any designer in 2015. An incredibly complex interaction that lives in the designer’s head can materialize itself through a functional prototype quite easily.

Coding the design opens up the designer’s mind to an entirely new way of thinking and can be immensely useful in discovering new ideas along the way. It also forces a unique form of creativity where, oftentimes, the designer needs to create special assets and hack the prototype a bit in order to make it work as intended.

Google’s recent acquisition of Pixate and Framer’s steady growth amongst the design community are good signs for the future. The better prototyping tools we have, the easier it is to communicate our ideas to developers. And while coding it may be tedious at times, there is a strong sense of accomplishment and pride in bringing an idea from your head not just to a static mockup, but to an animated, fully-functional prototype dependent on user interaction.

I’ve been having a lot of fun with Pixate and Framer in my latest project and am optimistic for the future of prototyping as a permanent tool in the designer’s ever-expanding arsenal.