And how we might develop a generation of designers who code.

Code is mysterious. Frustrating. Exclusive. Maybe even dreadful. For most of us digital product designers, code is a complicated thing whose power amazes us, but whose mastery eludes us. And judging by the way our visual tools market themselves, we’ll go to great lengths to avoid code.

Build production-ready experiences without coding.
Webflow

Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required.
Proto.io

Collaboratively design, prototype and launch voice applications for Amazon Alexa and Google Assistant. No coding needed.
Voiceflow

High-fidelity interactive design, minus the code.
Framer

The power to design, build, and publish 3D & 2D mobile games without coding.
Buildbox

Make designs interactive. No code required.
Marvel

Truth is, visual prototyping tools are coding tools in disguise. They just simplify code by hiding the parts we’d rather not worry about. Some tools simplify by focusing on a narrow problem that’s easy to control with a visual interface: clicking through a screen flow, animating a screen transition. Other tools simplify code itself, trading scripted languages for visual ones.

But here’s the thing about a successful no-code tool: it works because someone’s figured out your routine. And not just yours, but the routines of countless others like you. That delight you feel when a popular design tool magically anticipates your every move? A thousand other designers are feeling it too. It’s a boon for our collaboration and productivity. We’re equally empowered to make the same things in the same way.

But sooner or later, you won’t want to make the same thing everyone else is making. You’ll want to color outside the lines. And working directly in your design medium will reveal possibilities that are harder to see otherwise.

Medium inspires method.

Some of my favorite moments in design are the times our off-the-shelf tools can’t fully express the vision. This is when I know we’re breaking new ground.

In his otherwise controversial 2015 interview with Charlie Rose, George Lucas attributes the innovative effects of early Star Wars films to the custom tools they required.

Lucas explains “I had a story to tell. There’s a gap between what is possible and where my vision is. And I’ve had to fill that gap… You don’t invent technology and then figure out what to do with it. You come up with an artistic problem, and then you have to invent the technology in order to accomplish it.”

Lucas points out that early creators had to be “the scientists, the engineers, and the artists.” He refers to architect Filippo Brunelleschi, who not only helped design the Florence cathedral dome but engineered the means for building the seemingly impossible structure.

“You don’t invent technology and then figure out what to do with it. You come up with an artistic problem, and then you have to invent the technology in order to accomplish it.”
— George Lucas

Of course, we’ve come a long way since then. Architects and engineers have different concerns and rightfully specialize. As a digital product designer, you could (and ultimately should!) collaborate with a developer on your craziest ideas. But for a reasonably scoped concept, have you considered coding the prototype yourself?

Maybe, as former Apple design chief Jony Ive once said, “it comes back to motivation and a sense of why are you doing this.”

While speaking at the London Design Museum in 2014, Ive commented on the state of industrial design education, lamenting a process that emphasizes drafting over prototyping with physical materials.

If you’re designing a glass object, “why is your first reaction not to run and go and understand glass and what you can do with glass? Why is your first reaction to start doing Alias renderings of glass cups?”

Granted, every designer is motivated differently. Teams need a diverse set of skills and perspectives to fulfill a design vision. Not every designer is exclusively passionate about making software products. But you’re ultimately creating an interactive thing that runs on a computer. There should be some designers on your team who will go and understand code and what they can do with code.

“Why is your first reaction not to run and go and understand glass and what you can do with glass? Why is your first reaction to start doing Alias renderings of glass cups?”— Jony Ive

We’ve got some incredible design tools these days. We don’t need to write code when a visual tool can communicate the same thing more efficiently. But like Lucas, when we spot a gap between our tools and the story we’re trying to tell, it’s time to consider being the scientists, the engineers, and the artists of our vision.

Code is our design medium.

It’s inspiring to see the recent movement toward code literacy. But we’re confusing “learn to code” with “start a career in software development.”

As someone who studied computer science but took up a career in design, I can say with certainty that you don’t have to be a software developer to use your coding skills. Code isn’t just a way to launch an app. It can be a tool for automating repetitive tasks or communicating complex ideas in any field. Code can help you make a point — not just a product.

Accountants code formulas to automate calculations in spreadsheets. Motion graphics artists code scripts to choreograph complex movements. Data scientists code prototypes to evaluate machine learning models.

Code can help you make a point — not just a product.

Digital product designers could also benefit from writing code.

• Code reveals what a technology is capable of. You’re no longer limited to the curated features of your design tools, and you might see new creative opportunities. Even if you don’t end up writing any code, being able to understand how the code works will help you ideate more meaningfully and practically in your design tools. You can now think outside the proverbial box knowing what the box actually looks like.
• Code validates our systems thinking. Code is inherently a systems language. When you define a component or other pattern, it’s harder to “cheat” the way you might in your drafting tools. (How many times have you detached a component to nudge pixels or shift a color for a single instance?) The logic in your code is unforgiving, and with every bug fix and enhancement, you’re extending the design process from the canvas to the code editor.
• Code streamlines our design process. You can drive entire layouts with an external data source. You can code plugins for features unique to your workflow. And you can even publish your designs as an API, enabling developers to directly tap into your latest work.

But code is hard to learn.

So with all these great things about code, why aren’t more of us designers doing it?

Well, it’s hard! Like math, it’s a conceptually challenging topic to both learn and teach. But most people will need more than just sheer will and a good teacher to master it. They’ll have to run the gauntlet of institutional barriers.

• You need to be born with it. Access to a computer science education is a privilege. You might not go to a public school that teaches coding. And you might not even have a computer or high-speed Internet connection at home to finish coding assignments.
• You need to be part of the club. Finding support and a sense of belonging is difficult in an environment that can be (in my experience) competitive, introverted, and homogenous. There are inclusive, helpful, collaborative coders in every community, but some beginners may have to work harder to find and develop those relationships.
• You need to see connections on your own. When you take a class called “Introduction to Web Development,” you’re not just learning how to make a website. You’re learning how to think systematically. How to design computationally. How to communicate interactively. But will you realize this the next time you design a typeface? Create a color palette? Define a grid system? These are areas where code can help, but only if you’re lucky enough to see them on your own.
• You need to deal with all the non-programming stuff. Ultimately, you’ll find coding isn’t just about code. It’s also the yak shaving that comes before any meaningful work starts: the IDE setup, the environment variables, the dependencies, the build settings, the signing certificates, the countless hours deciphering Webpack. Coding is already hard without this stuff, and every one of these hurdles brings an aspiring coder a little closer to quitting.

A visual bias also distances us from code.

“People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
— Steve Jobs

It’s not just software development culture that makes coding hard to learn. Today’s design tools reveal an institutional barrier of our own making.