Should Designers Learn to Code?

There has been some discussion over the past few years concerning whether Developers should learn some design.

Strong arguments are made suggesting that developing without understanding the user can produce less than ideal end products. If developers learn some basic design principles, instead of focusing on solving purely technical problems, developers can get a better picture of the problems that end-users are trying to solve.

Overall, this leads to better collaboration with designers, and allows them to understand the designers’ perspectives.

However, sometimes there is a need to flip this discussion on its head, and address the converse question:

Do designers need to learn how to code?

As for “need,” some evidence suggests it is not entirely necessary. Design tools have progressed considerably over the past few years, and designers can create functional and transferable designs that developers can consume through tools such as Figma.

Through the creation and use of interactive prototypes, information about how a design can be transferred into functionality can easily be demonstrated to developers.

However, there are many reasons why designers may wish to learn a few coding techniques.

Understanding Raw Materials

As a creator, understanding something about the raw material from which a product is made is essential for achieving expertise.

Sculptors learn about the properties of stone. Fashion designers know something about the fabric with which they work. Print designers need to know at least a little bit about the differences to the way that ink is applied to paper versus other media (such as screen printing to t-shirts, etc.).

For the same reason, web designers should know at least a little bit about the raw materials in which their designs will appear; namely code.

Understanding Structure

Learning some HTML and CSS (and maybe a little bit of JavaScript) will help designers better understand what can be created.

Neither of the first two involve actual programming; they are markup languages, and are relatively easy to learn. There are no logical rules (other than a basic understanding of hierarchies), no loops or functions to learn.

• HTML defines the structure of content on a page
• CSS defines how it is colored, arranged, and spaced.

For those who are a little more ambitious, an understanding of some JavaScript or other programming language will also help designers who use Vega to better understand why it is important to keep variable names consistent in Figma, and why thinking with the tools available “within the box” can help create easily workable content that developers can use.

Improving the Communication Process

If designers learn some of the basics of the “back end of the front end,” they will better understand how their designs will actually be displayed on a web page. This will vastly improve designers’ understanding of how front-end development occurs. This will in turn help designers construct patterns that they know will work in an actual production environment.

It will improve communication between designers and developers, as designers will be able to gain an understanding of the language that developers use when constructing solutions to problems. They will understand what can be achieved. Overall this will improve efficiency in the design/development process.

Reduce Iterations

If a designer knows whether it’s possible (or how difficult it is) to construct a design or change in code, then they will be able to provide solutions that will require less back and forth with developers.

Conclusion

While not entirely necessary, It is highly recommended that designers learn something about coding. It can provide them with a better understanding of their work environment. They can not only construct design solutions which will work well in production environments, but they can also increase communication with developers and make the hand-off process more efficient.

This does not mean that designers need to become expert coders. However, learning some basic markup languages can help increase understanding of how designs can be rendered on a page.

As a general rule, more knowledge is a good thing.

Resources

If you would like to get started learning coding, there are a number of useful places where you can get some free courses. Here are a few to get you started:

• freeCodeCamp is an excellent online resource that provides detailed courses which help you complete projects as you learn. Their Responsive Web Design course will walk you through the entire process of creating HTML pages, and styling them with CSS. There are also more advanced courses available on JavaScript, various JS frameworks, and more.

• Coursera provides full courses on a wide number of topics. You can learn HTML and the beginning of a host of programming languages for free.

• CodeAcademy is an online platform which enables you to learn many languages directly through the web browser.

• Udemy is an extremely comprehensive platform of courses where you can learn many different helpful subjects. Many of the courses are available for free, however there are many others that are more in depth at affordable rates.