Designers Who Code (AKA Unicorns)
My very first UX/UI project was designing and building a portfolio using paper, pencil, HTML, CSS, and JavaScript. I loved playing around with the code to create animations, pretty visuals, and link one page to another and another. I assumed that a good designer should be able to produce his/her own code. However, that’s not what I heard from other designers. When I asked them if they code, most responded with a “no” or “I know how to, but I’m not required to do it”. Of course, being new in the field, I did what most other designers did: started using prototyping tools such as Sketch, Figma, Illustrator, and InVision to produce designs. But I found myself getting frustrated with these tools, not because they’re bad but because I expected something more.
In this article, I will tell you why I think every designer should get their hands dirty with code. I don’t mean designers should take over the role of a front-end developer, but they should understand the fundamental principles of programming and be able to contribute to the code.
The History and The Gap
When the web was first introduced, user-centered design was not a part of the revolution. It was up to the developers to “design” layouts and components. And the outcome was quite painful, take a look at Yahoo’s very first design. The page is cluttered with links, low-quality visuals, and does not have an appealing look.
Over the past couple decades, as more people began to embed technology into their everyday lives, user-centered design has become a big deal leading to it becoming a role of its own. As both roles became equally important, the communication levels have declined, creating a communication gap between design and development.
The Communication Gap
Allow me to explain the communication gap as illustrated by me (the original idea for this diagram came from Jamie Snider who teaches Design Thinking at UW Seattle): on the left side, we have the design stage that goes from concept to creation (research, UX design, UI design, analysis). On the right side, we have the development stage that transforms the creation from design into reality (front-end and back-end development). The gap on the left is formed by the lack of communication, understanding, and empathy between designers and developers. This creates a shaky foundation for the product. The gap leads to a shortfall, affecting one or more of the following: the functionality of the product, the look of the product, requirements, timeline, and/or budget.
React to the Rescue
React can be the most effective way to close the communication gap between the design and development stages. But what is React?
It is a JavaScript library to build User Interfaces. It is fully component-based, meaning you create your reusable components and then compose them into a web page. React is written in JSX syntax, which is fairly similar to JavaScript. Don’t want to learn JSX? No problem. You could use Babel to transform JavaScript code to JSX. Now the interesting part of React: every component is created and styled in the render() method (inside the JSX file) using a syntax very much like HTML and CSS. Take a look at the code below.
Basic styling syntax is in the middle of some complicated code that takes care of the functionality of the software. And if you don’t know much about HTML and CSS, just know that they are the easiest languages to learn in the development world. Which means, there is no reason anyone shouldn’t be able to code in React.
How React Can Help
Terminology
It’s absolutely critical for designers and developers to work side-by-side and have a good means of communication, meaning that both parties understand each other and get things done. In order to close the communication gap, designers must be able to speak code and developers must be able to speak design, which is exactly what React enforces: it adds styling syntax (design) among functionality syntax (development). It creates a canvas where designers and developers can add on to in order to paint the whole picture.
“Design and development are neatly convergent — everyone wins when they understand more of both.” — Danilo Campos
Know What’s Possible and What’s Not
This is a big issue in the design world. We creatives can come up with wild solutions without considering the difficulties that it will impose on the developers. Knowing what can and cannot be accomplished with code, and if the benefits are greater than the costs are important when working on a tight budget and timeframe. It could also make or break the relationship between designers and developers. Instead of forcing developers to build a specific design, designers can show that it is possible or learn that it is not based on their attempt to code the design in a tool like React.
Also, many developers like to stick to what they are already familiar with. You don’t want your flows and designs disregarded because a developer wants to use a specific framework that cannot support your design decisions. When you’re already familiar with the possibilities of the framework your developers use, there are fewer limitations. Even Alex Kotliarskiy, who works for the React Native team at Facebook, says that user experience should not be compromised by the framework that is chosen to work with. There are dozens of frameworks with custom-designed components made specifically for React and he encourages people to explore them.
Step Up Your Game (not React specific)
Tools such as Sketch, Figma, and InVision are all great (I use them on a daily basis) but they have their limitations and challenges. Without creating components on Sketch or Figma, a designer will have a very hard time updating the color of a single button on every screen. If you make changes to the layout of a page, then you must move all the hotspots to new locations on InVision. Want some animations? Look for another app that will do that. Responsive design? Good luck.
With code, you can style a button in one place, change the layout as you desire, and animate anything. You are able to see your flow and design in action and make changes as you discover opportunities.
Conclusion
“None of us, including me, ever do great things. But we can all do small things, with great love, and together we can do something wonderful.” — Mother Teresa
Like I said before, I am not asking designers to master front-end development. However, being capable of understanding, communicating, and contributing to code can help the product become more successful. Also, it will create a more enjoyable and effective work atmosphere for both designers and developers. Not to mention, you will definitely stand out as a designer. I’d love to hear your opinion on this topic! Feel free to reach me at mazman94.sm@gmail.com and we can have a conversation.
I’d like to give special thanks to Bob Boiko.
References
Campos, Danilo. “Why Don’t More Designers Code?” Quora, 11 July 2012, www.quora.com/Software-Product-Design/Why-dont-more-designers-code/answer/Danilo-Campos?share=1&srid=8P8.
Kotliarskyi, Alex, director. Building Stellar Mobile UX With React Native. YouTube, 30 July 2017, www.youtube.com/watch?v=ssXB9RMTpTs.
Nouvel, Sergio. “Every UI Designer Needs to Learn React. Here’s Why — Continuum.” Continuum, Continuum, 22 Sept. 2017, blog.continuum.cl/every-ui-designer-needs-to-learn-react-heres-why-f2b8c2ff2c86.
Treder, Marcin. “Should Designers Code?” Studio by UXPin, 1 Feb. 2017, www.uxpin.com/studio/blog/should-designers-code/.
