The benefits of designers who code
The 2020 COVID pandemic caused many of our favorite development conferences to be canceled or postponed. However, a few of them were able to adapt to the new remote online methodology that has taken the world by storm over the last few months. This was the case with the React Summit. The conference had its remote edition last April and, in this article, we’ll focus on one of the conference’s talks: Designing with Code in Mind by Elizabet Oliveira. But first, let’s give you a bit of context.
About the React Summit Remote Edition
The React Summit is a two-tier conference, one of the tiers focuses on React and the other on React Native. This year’s edition was to be held in Amsterdam, but had to be postponed until September 11 due to the pandemic. However, a remote edition was organized and held via Zoom on April 17. This conference included talks, Q&As and workshops, as well as an advice lounge and networking opportunities. There were even several afterparty options, including a QuakeJS tournament. Speakers included Guillermo Rauch from Next.js, Sangeetha KP from Amazon, and Haris Mahmood from Shopify. Meanwhile, topics ranged from artificial intelligence and virtual reality with react, to AHA programming and bringing Ionic to React.
About the speaker![]()
Elizabet Oliveira works remotely as a Senior Product Designer for Elastic. The company, which focuses on data analysis, is responsible for developing the Elastic Stack, which includes Elasticsearch, Kibana, Beats and Logstash. Elastic is a distributed company with teams all across the globe, which means they are very good at making remote teams work.
Oliveira works mainly on the company’s design system that provides components for Kibana. Kibana “is a free and open user interface that lets you visualize your Elasticsearch data and navigate the Elastic Stack.” The tool includes multiple components for data visualization, which are particularly useful for products with a lot of data.
About the talk: Designing with Code in Mind
Oliveira introduced her talk by stating that there are a lot of teams where designers and developers collaborate only through images and this can be restricting. This can cause a lot of back and forth until the perfect result is achieved and considerable time can be spent just making requirements clear and perfecting a specific design feature. That is why having designers with coding knowledge or skills in a development team can be extremely useful.
Oliveira also discussed how a lot of companies currently have their own design system and that, while a design system can be very helpful, it isn’t 100% perfect. Therefore, it can be very useful to have a designer with the skillset to build a structure inside your product. She added that, while designing with code in mind works better if you have a design system, when it comes to more complex scenarios, sketching the idea first might be preferable. Another point Oliveira made is that your design does not need to be pixel perfect. The important part is the idea, which can then be tweaked with code.
The benefits of designing with code in mind![]()
So, what is so great about designing with code in mind? Well, according to Oliveira, there are two main advantages. The first one is that it is easier to design states with code. The second and most important one is that this combination of skills means new design features or components can be created or introduced faster and more efficiently, saving time and effort. This is particularly true when it comes to teams working remotely where communication can be more complex. If you have a designer who codes on your team, they can mock up the component, discuss it with the developers in the team, and then one of the developers can work on improving and perfecting the code. In addition to aiding with communication, you can save a lot of time by avoiding lengthy and complex explanations and the back and forth that stems from having to consult on every detail.
Finally, Oliveira stressed that design teams should have a balance of different types of designers. There should be some who are good with CSS and have some coding knowledge, others that are more visual, and even include some developers inside the team. This mix of skills will make the team faster and able to work better together.
From the developer’s standpoint, moderator Mettin Parzinski from Passionate People added that having designers with at least some coding knowledge makes the work of developers much easier.
Final thoughts
Having designers with coding knowledge in your team streamlines communication and leads to better products. In fact, we believe that having a development team where everyone has at least a basic understanding of what each role entails is a great asset that leads to a more cohesive and productive working unit.
If you want to know more or see examples of how Oliveira implemented her design ideas, you can watch the full video on youtube. You can also watch the rest of the videos from the React Summit Remote Edition here.
