A crash-course on coding concepts for designers

A simple way to learn the concepts and grow your understanding of how things are engineered.

I consider myself a Design Technologist or a Computational Designer working in the mergence of tech and design. In my career as both a Designer and a Technologist, I have worked with some of the design labs including the one at Xerox Research and at Adobe Design Labs. I have worked in different parts of the product design lifecycle – from research, to design, to prototype. More often than not, my presentations are programmed prototypes and hence coding is something that has always given me an edge. This understanding of design and tech has often helped me to convey concepts from one side to the other easily. In this article, I will try to onboard some of the many designers who feel learning to code is a daunting task, into learning the basic concepts of coding. Let’s start by seeing why the concepts of coding are more important than learning to write lines of code.

Traditionally designers used to work on physical mediums like paper to create their works.

Then they moved into using softwares. There was a software for everything from mind-mapping, to wire-framing, to mocking up, to final pixel-perfect design creation, to creating hand-offs for developers. Also, after the hand-off phase were a whole bunch of development software used to create the final product. What we see now is an influx of digital design software which helps do a lot of this in one single software.

Extrapolating this trend, there will be a near future where 2D design would be done such that the mockups made can be published directly as the final product. That is, the designer will be the owner for the whole front-end side of the product. You could just open up your favourite design app, create the designs, add animations and interactivity, and publish the final app — all without one line of code.

This would also be the same for 3D (AR/VR). The only place where code really is required in the front-end is for functionality and interactivity. We see a lot of new node-based development tools and visual programming languages which help do this already. Also this trend can be seen in some design tools in the form of design systems with interactive components.

So what we see is a trend towards designers owning the full front-end of a product. Though they wouldn’t require you to write a single line of code in the future, most of these tools will be based on some of the basic coding concepts. Thus, the concepts are more important than learning how to write code. So, let me give you a simple intro into programming basics which could help prep you for this future.

A highly simplified crash-course to coding

Let us think of a master-switch which helps you switch on/of all connections to appliances in your room. Now let’s try to teach a friend how it works in 6 steps (ok, your friend is an alien from Oumuamua who doesn’t know how a switch works) :

1. If

“If the switch is on, all appliances will have a connection. If the switch is off, all appliances won’t have a connection.”

Simple right? Well in-fact, by telling this, you just learned one of the main features of programming — conditionals. It just is as simple as saying “if this, then that.”

2. State

Now how do you tell your friend which state the switch is on. You push the switch down and say “This is the off state” and then you push it up and say “This is the on state”.

Here again, you learn a new feature of programming — states. What state something is on (up/down , on/off) defines the state of the object.

3. The word

The state of the object can be assigned to a word like “SwitchState”. So you can ask your friend “What is the SwitchState now?”, and he/she/it replies “On” or “Off”. This ‘word’ is what in programming is called as a variable.

4. The list

Now your friend asks you, what all are controlled by this main-switch? You reply “The TV, the AC, the lights and the refrigerator”. We always have a list of things right? Well in programming, based on its different functions, these lists are known by many names — arrays, lists etc.

5. One-by-one

Although it is at the blink of an eye, all these appliances won’t turn off at the same time right? It could be that first the AC turns off, then the TV, then the lights and finally the refrigerator. This brings us to yet another concept called the loops. Loops help to do actions for multiple items one-by-one. So you say, “AC, TV, lights, refrigerator, turn them off one by one.”

6. Lesson learnt

Now turning the main-switch on and off is a lesson you taught your friend. Every time he/she/it comes back to the room, your friend could just recall this lesson and use the switch. This is where our final programming concept comes to play- functions. These “lessons” can be called functions in programming. Every time you need to turn on/off the switch, you can “remember the lesson” or “call the function”.

I hope this overly simplified version of a program helps you understand how things work in coding. Largely these 6 concepts are what we use in prototyping using code. All you have to do now is to think of different actions in daily life and how you would teach a friend to do these actions. (and then slowly translate that to you digital work).

Conceptual understanding is primary.

The concepts explained above can take you a long way in daily design work. You just need to be aware of how these coding concepts are popping up everywhere in your daily design tools. Say, when you try to save your file, if the filename already exists, the program asks if it should replace the existing file. That’s an “if condition” working- “If filename exists, then ask if it should be replaced”.

Now say, if you are designing an app. Think of how things work when you tell your developer that “if this dropdown is clicked, it should show a list of countries”. This way you will be aware of all the nuances of your product and how the developer of the product approaches each situation.

The conceptual understanding is primary. Once you understand these concepts, you could use it in many tools of the future. These concepts can also help you pick up a coding language if need be. A lot of designers ignore learning to code because of the sheer intimidation caused by coding syntaxes. This makes them ignorant to coding concepts, and hence the underlying process of how things are engineered. This also causes a rift between designers and developers in a team. The concepts explained above can help bridge this gap in your team. Learning these concepts will make you future-ready.

Thoughts? Please share in the comments.

Thanks for reading. This article is written from my experience. If this helped you in any way, please clap for it. You have my gratitude.

No animals were harmed in the making of this article.