Do digital designers need to know how to code?

By digital designer in the article we mean digital product designer, UI/UX designer, and other suitable titles for this profession.

Sooner or later, every designer is faced with the question: does he need to be able to program? If you have already come across this question, then here is a short answer for you: a designer does not have to be able to program. At this point, I could end my story, but let’s dig deeper.

First of all, let’s agree that we are not talking about the fact that designers must be able to code in order to take on the tasks of programmers at work. Programming for a designer is seen only as a useful addition to his core skills.

Design and logic

A designer needs to understand programming not at the level to know the syntax of languages ​​​​and code, but it is enough to be able to build logical diagrams – rectangles and circles connected by arrows and with annotations. At the heart of that very real programming is logic, and it is she who interests us.

An example of a logic diagram with simple figures and descriptions.  Photo Source: Kelly Sikkema on Unsplash

An example of a logic diagram with simple figures and descriptions.
Photo source: Kelly Sikkema on Unsplash

It is on this logic that all digital products work – there is input data, there is a sequence of actions. Based on what conditions are met, then the computer goes through these steps and gives out some information. This is how all sites and applications work, for which we, among other things, come up with UX, design beautiful interfaces and brand pages.

Once you start incorporating logic diagrams into your layouts that explain what the system is doing under the hood of your designs, you will never be the same and you will reach a new level of professionalism. In addition to this wonderful feeling, you will become much closer to the developers, who, in fact, should be your close friends at work, because they are the ones who bring to life everything that you created in Figma or Sketch.

Try to conduct an experiment and add a logical scheme to some layout of a complex interface: what follows what, what is called, what parts of the system work at each step of your scenario and what possible outcomes they can have.

An example of combining logic circuits and interface design.  Photo Source: IntroOne user flow from Michal Kulesza

An example of combining logic circuits and interface design.
Photo source: IntroOne user flow from Michal Kulesza

Firstlyyou will immediately catch possible script errors and will be able to think about how to handle them, how to show them to the user, what correction options to offer.

Secondly, the number of questions from developers when they analyze your design will be much less. Some of the questions from them will be about the possible outcomes at each step of your scenarios, and you are such good fellows, you have already thought about it and showed everything in the layouts.

Third, you will improve your interaction with developers and you will not be the same designer who drew the layouts, but you didn’t think how they would work. The more complex your tasks are, the more the designer-developer tandem will be valuable and useful.

As a bonus to all points above, this will save you a lot of time, because these schemes are very easy to discuss with the product team and make changes to them. Nobody will discuss your visualization, your buttons and forms, composition on the page. All this will not exist at that stage, and you will not fall into unnecessary conversations and be distracted from the logic of the product. There are only simple geometric shapes and no visual. Although I understand that sometimes my hands itch to immediately sit down and start drawing layouts without any wireframes and almost to the finish. We are still talking about more complex products, where there are different conditions for the behavior and branching of scenarios.

It is worth saying that if the interface is very simple and linear without any branching conditions, or consists of three pages, then of course it is possible and almost immediately to finish. Everything depends on the task.

Further, if you want, you can always dive into programming, no one can forbid you to do this. But it will be damn easier if you already understand how the logic of programs works, even using examples of rectangles and diagrams.

I believe this is the basic minimum that a product designer, UX designer, or interface designer needs to understand. By the way, if you don’t want to figure it out on your own right away, then with experience you will still constantly walk along this rake and sooner or later you will begin to figure it out. But you will spend more nerves and resources. You cannot avoid this if you start making a more or less complex product. And the more complex the products, the more often it will pop up.

About HTML and CSS

To begin with, HTML and CSS are not programming languages, they are markup and design languages ​​on the web. But in general, it looks and works exactly like programming, if we simplify the explanation.

This is what HTML looks like. Photo credit: Pankaj Patel on Unsplash
This is what CSS looks like. Photo Credit: Nick Karvounis on Unsplash

The very process of working with HTML and CSS is similar to programming: you create instructions for the computer, and it goes through and executes them.

Is it possible to live without knowing anything about HTML and CSS? Can. But be prepared that you will not understand how much it takes to make the button more round and more red. Will it take 10 developer minutes or two hours. It will also be more difficult to make adaptive versions of interfaces, because you will not understand how the web works and how all blocks are transformed. I’m not saying the word “impossible”, I’m focusing on what will be more difficult, a little more rake in the work, a little more time for discussions with development and a little more time for layouts.

You can take any course like HTML/CSS Basics and that will be enough to get you started. After that, in addition to understanding the basics of the web, you, for example, can open any page in the browser, get into the code, change something right there and immediately see how it will look. You can even design a page by changing texts and pictures right on the live site, and you don’t even have to open Figma.

I show how you can change any site in the browser

I show how you can change any site in the browser

Another plus is that you can speak the same language with developers. Instead of saying “please double the padding of this element, let’s move it 20px to the left and recolor the text pink”, you will come to the developer with a piece of CSS code, and he will understand you. He will not have a chance not to understand you the first time. As a result – less discussion, less questions and rework, everyone is happy.

So what’s the end result?

Summing up after what I said above. All you need to be able to and know from the field of programming to be a more advanced designer is:

  1. Draw rectangles, arrows and explain logical sequences (logic). It is a programming base and a great assistant as a designer if you are dealing with digital products.

  2. Know the basics of HTML/CSS

  3. Everything, nothing more

Once again I emphasize that programming is not the responsibility of a designer, but it can be your help in your work and a competitive advantage in finding a job. When looking for work in a product, all other things being equal, a designer with a basic understanding of programming will always be preferred over a designer without such skills.

Free courses on these topics in bulk on the Internet: Coursera, Udemy, . It is almost impossible to make a bad course about these basics so that you do not understand anything or understand something wrong.

So feel free to try to learn if you are interested and want to reach a new level of work in product design.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *