Animation, Prototypes, and Code: The Designer of the Future

intro

Modeled after antiquated paper templates and techniques passed down from the invention of the printing press, most digital design tools available today are print design relics, modified or repurposed to work within the digital space. Fortunately, the concept of starting a digital product design on a blank white canvas that is gradually filled in with squares on top of more squares until it contains meaning is a workflow that is rapidly losing credibility, while more modern, digital-first methods are gaining traction.

To really illustrate why this is significant, we need to jump ahead 10 years into the future, where it’s not only robots coming for our jobs, but also a new generation of humans. Humans who have been learning to type and code at the same age we were when we learned to write in cursive. You will soon be hard pressed to find a position, especially within the design discipline, that hasn’t been filled by someone who has coding experience. And designers and developers will not be in separated silos, but integrated into a single group with a broad spectrum of skills.

If you still think of web design in terms of pages rather than views and states, if you think of design and development as two separate departments, or if you’ve never written a single line of code, welcome to the future, let me show you around.

  1. Coding experience helps you to better scope and foresee the impact your designs will have on your dev team, and to better understand the limitations.
1-housevsite

Building a house, versus building website

“We can’t do that.” A phrase that talented developers despise uttering to their clients or design counterparts, is often avoidable if projects are properly scoped from the beginning. Think of a digital product as a house that is made of code. When you go about designing a house, you give the details to your contractors and they begin to lay the framework. If you decide half way through the project that you’d actually like to move a bathroom to a different location, your contractors will likely tell you “We can’t do that.” That’s because within the framework the plumbing has already been established and moving it would be a very costly, time-consuming change. This is very similar to a website or an app. The designer who has experience coding will have understood that the new functionality would have needed to be scoped when the project began. They may still ask for the change — because, hey, the client wants what the client wants — but they’ll at least know that they’re coming to the dev team with a big ask.

 

  1. Sharing partial builds of your design ideas with your dev team resolves countless questions and considerations that are difficult to translate from static designs.

2-viewports

Screen size fragmentation of Android devices in 2016. Image source: https://opensignal.com/reports/fragmentation.php

Design details now span into areas beyond visual elements and styling. We now need to consider many different states of a website or app, countless viewports, modules, loading screens, animations, transitions, micro interactions, and the list goes on. Static compositions of these flows are not only inefficient, they’re also ineffective. Creating working prototypes improves the workflow, and allows the developers to focus on the more difficult tasks such as browser/OS compatibility, or accessibility.

 

  1. Being hands-on with a design makes you a better designer. If you’re a digital designer there is really only one way to be hands-on. Through coding.

3-coding

Popular apps for teaching kids 4+ how to code

 

There are countless tools available to designers to help fill these gaps between design and dev, but the harsh truth is that they mostly fall flat. Understanding how animations work in code, how sites load and function behind the scenes, how good development accounts for user errors that we don’t commonly consider, and the amount of effort it takes to build a rich design are all far more valuable to learn than any tool boasting ‘design without code’.

“What would happen if we stopped treating the web like a blank canvas to paint on, and instead like a material to build with?” -Frank Chimero, influential designer

Welcome to your newly enlightened digital future. Here are some references and inspiration for this post, as well as some guides to help you begin your own coding journey:

https://viljamis.com/2013/prototyping-responsive-typography/

https://louderthanten.com/coax/design-machines

https://bradfrost.github.io/this-is-responsive/

http://frankchimero.com/writing/the-webs-grain/

https://runemadsen.com/blog/on-meta-design-and-algorithmic-design-systems/

http://www.jon.gold/2016/06/declarative-design-tools/

https://viljamis.com/styleguide/

http://cognitivemedium.com/tat/index.html

http://atomicdesign.bradfrost.com/chapter-1/

https://programmingdesignsystems.com

http://www.jon.gold/2016/05/robot-design-school/

https://robinrendle.com/essays/a-visual-lexicon/

https://tuhdo.github.io/os01/