Cover image
UX Design
8 minute read

Coding for Designers: How Much Should We Know?

Much of the design community is locked in debate over whether designers should code. Some favor seeking out the unicorns who can do both, while others claim they don’t exist or only get in the way.

Read the Spanishes version of this article translated by Isabella Rolz

Take something at which you excel then push yourself further.

A large section of the design community is locked in debate over whether designers should code. Some favor seeking out the unicorns who can do both, while others claim they don’t exist, or only get in the way.

Many designers think that designers and developers need to collaborate, but each discipline should stick to what they know. Others see no problem with professionals wearing multiple hats. Many developers see designers who code a threat, while others see them as welcome collaborators who have learned to speak their language.

The sweet spot, which is called “shared understanding,” is probably somewhere in the middle. Knowing a bit about code doesn’t mean a designer has to become an expert coder, but simply understand a developer’s perspective.

The UI, or the “presentation layer” is a designer’s playground, but focusing on that alone is akin to only considering the facade of a building. Great designers understand that being familiar with the technological underpinnings that deliver their designs not only makes a designer more impressive, it significantly boosts their career prospects.

As Aaron Walter, VP of Design Education at InVision, stated in a Toptal Design Talks article: “It’s not going to kill a designer if they knew a little bit about how to write some HTML and CSS, maybe a little bit of JavaScript.”

Designers who code are better collaborators.
Designers who code, even a little, and can make themselves a great asset to any multidisciplinary team.

The whole “should designers learn to code” topic is hotly debated. Though some great designers are also good at coding, many believe that undivided focus on a particular skill will make a professional stronger. Many also believe that today, being a multi-skilled designer is a big plus, and that there should be nothing in the way of a designer having another useful skill, such as coding, under their belt.

The question is, how much coding should designers know? Would designers be wasting their time, or crossing boundaries into the developer’s territory and potentially stepping on toes?

The Benefits of Knowing Basic HTML and CSS

Designers would benefit greatly from acquiring some foundational knowledge of what’s called the “front end” (the presentation layer) driven by HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets, a language that describes the component styles in an HTML document), and would perhaps be surprised by how easy it is to learn the basics.

HTML and CSS don’t involve programming logic. The letter M in HTML stands for “Markup,” a way to describe the coded structure of page elements which are the building blocks of pages. HTML with CSS and JavaScript, form a triad of foundational technologies for the World Wide Web.

Designers could merge knowledge of programming and design.

In layman’s terms, HTML is an architectural map that tells the browser what to display, and CSS, or Cascading Style Sheets, is the code that tells the browser how to display things.

Metaphorically speaking, if HTML is the skeleton of a page, CSS would describe the height, the body shape, the skin, eye color, hair color, etc. The language has a very simple code structure that determines typography, colors, positions and dimensions.

Understanding Code and How to Code Is Understanding Pixels

Learning how to code the front-end UI and previewing it, gives designers the opportunity to immediately see how things are displayed when viewed on various devices. If designers play with HTML and CSS, they’ll notice that everything is measured in pixels (there are other measurement units such as “ems” and percentages that will ultimately be converted to pixels).

Understanding measurements and code structure, i.e., how pages are displayed, will provide a deeper understanding of the front-end development process. That in turn will cause designers think more deeply about their designs and how to make them more efficient for that process. They will know what can be easily achieved and what would be more challenging.

Coding for designers is a great asset.

Front-end JavaScript and Ajax Know-how Make a Designer a Unique Asset

This is where things can start to get complicated, but it’s also where a lot of fun happens. If a designer is an analytical thinker, or exceptionally motivated, they’ll get a lot out of learning JavaScript and Ajax (Asynchronous JavaScript and XML). Why?

Demonstrating front-end UI technical knowledge and being conversant in Ajax will go a long way to earning the respect of developers. Being able to reference JavaScript and Ajax and how to use them will boost a designer’s ability to articulate a particularly sophisticated design idea to developers, e.g., the design of a specific functionality in the UI.

A designer’s perspective will broaden if they are comfortable knowing exactly how far technology can take them, and how far they can push it to innovate. Going deep into coding and various technologies is not necessary—if a designer knows the basics of HTML, CSS and JavaScript, with a sprinkling of Ajax, they’ll already be miles ahead of the competition. They will be a unique asset to any company and the product team.

About programming and design
Aaron Walter, VP of Design Education at InVision, outlines how designers and developers can collaborate better in a Toptal Design Talks article.

Designers Can Take It to the Next Level with JavaScript Basics

Although designers could stop here and have the back end (the data access layer) implemented by developers, they can make a design more dynamic by adding some scripting. Enter JavaScript (a scripting language), which is a programming language for the web.

In the early 2000s when the web was still evolving, agencies such as Fantasy and Firstborn made a big impression on the web design community when they took advantage of JavaScript in unusual, innovative, and creative ways.

JavaScript can update and change both HTML and CSS, and can calculate, manipulate, and validate data. It can be used to display dynamic interactions, animate elements, create responsive communication with the back end or server, and more.

There is no limit to what can be accomplished with JavaScript in front-end development. It is a programming language: functions, objects, logic, conditionals, math, math, and more math—which can be a little challenging for some. But it’s not that hard to learn, especially considering what the majority of clients require.

Why is JavaScript important for designers?
Animated timelines like these can be created with JavaScript alone. (histography.io)

Learning to Code Will Improve Collaboration with Developers

Would romantic relationships be easier if men and women could read each other’s minds? Some people think so. The same thing applies to designers and developers.

Knowing how developers think, and what they need to be able to do their job, will make a designer a great asset to any multidisciplinary team. This approach is useful for internal communications as well as idea pitches because they will have more of an idea about what to expect from the other members of the team. If designers can do this, they will be in a much better position to propose more robust solutions to clients.

Designers Who Code Will See More Job Opportunities

In every design job opportunity, knowing how to code can make a big difference in the screening processes as well as the day to day work. At Toptal, we see a bunch of opportunities for professionals with this hybrid profile, and startups out there are eager to find people that can take over both the design and front end of their early-stage applications.

Coding for designers is an advantage.
Learning how to code might lead to some unexpected opportunities.

Still, there are some designers and programmers who dislike one another prying into each other’s business. Some may be threatened, some may be challenged, and some may be too lazy to learn something new. But the truth is, each should analyze their options, and focus on what will increase their chances of success.

Designers may not have enough time to learn everything, but knowing vanilla HTML and CSS should be enough to add a significant distinction between a flourishing career and a dead-end one. It should be a quick and easy process for designers to take the first steps. The more they know, the more they can expand their horizons when it comes to job opportunities.

Should Designers Learn to Code?

Adaptability and flexibility working with other teams, the ability to tackle a variety of projects, and a wide set of skills with which to take on various responsibilities is always in high demand. Is there a designer anywhere who wouldn’t want to have an edge over others when it comes to highly-coveted jobs at exciting startups, or big established tech companies?

Designers have their approaches, processes, arsenal of design tools, and deliverables, but that’s only part of the equation. Exploring, and garnering an understanding of how UI designs are delivered using various digital technologies, can take designers to the next level and boost their ability to deliver great designs.

Increasingly, more and more work opportunities in the design field include “nice-to-haves” such as basic web-development and prototyping skills using HTML, CSS, and JavaScript. It’s for each designer to decide how much to take on; clearly the need is out there.

Designers who code see more job opportunities.

Is AI Going to Eliminate Front-end Developers?

One question remains though: Is coding for designers going to stay relevant in the longer term? There is an inkling among designers that with AI and machine learning, designers will soon be able to design without code. Just drag-and-drop and move things around on the screen, then press a button and AI codes the whole thing. In other words, jobs for these types of front-end developers will quickly disappear.

Where designers are concerned, the answer may lie in thinking short-term vs long-term. In the near future, AI will not take over, and designers who code may still be in high demand. For the short term, designers who want to stand out should keep certain basic coding skills such as JavaScript and Ajax in their arsenal.

Mastery of Coding for Designers Will Boost Careers

UI designers who have a desire to grow and boost their skillset have a few options at their disposal. They can brush up on a variety of design skills and move into other roles such as visual design, UX, or even UX research. They can also incrementally climb the ladder into more senior, principal, lead, manager, and director-level roles.

However, to really boost their careers, designers may want to delve more into development. Acquiring deep knowledge of various technologies that drive digital products today will equip them with a highly desirable set of skills. That in turn will open more doors to job opportunities at companies big and small.

Should designers code? Maybe, maybe not. But designers who code, or at least demonstrate deep knowledge of various technologies, will become a great asset to any multidisciplinary team, and it will definitely pay off in the long run.

• • •

Further Reading on the Toptal Design Blog:

Understanding the basics

UX designers who code can demonstrate front-end coding knowledge and JavaScript concepts would earn the respect of developers. Designers who can blend programming and design, even a little, can make themselves a great asset to any multidisciplinary team and will see more doors open to greater job opportunities.

Learning to code for designers is not necessary. But if they know a bit about code, they can understand a developer’s perspective. It doesn't mean that they have to be an expert coder. But it would greatly benefit them if they knew a little about how to code HTML and CSS, maybe a little bit of JavaScript.

JavaScript is an important programming language because it can be used to display dynamic interactions on web pages. As a scripting language, it’s used by nearly 95% of all websites. Web developers can integrate the scripts seamlessly into HTML to make web pages interactive and respond to users instantaneously.

JavaScript enables web developers to create dynamic and interactive web apps. It can be used to display dynamic interactions between the front end and the back end without reloading a page, such as animating elements, pulling data from various sources, and performing math calculations to display relevant data.

The front end, a.k.a. the “presentation layer,” is what people see in a user interface (UI) on various devices, and the back end is where data resides. The terms front end and back end refer to the separation of concerns between the presentation layer (front end), and the data access layer (back end).

Comments

Elenízio Oliveira
I'm a lawyer Switching careers; I'm getting into tech. I like Design and also like Development, although I'm more into Design. There are so many things to learn, and sometimes I get lost. This article helped clarify the path. Thank you, Jônatas! :)
Elenízio Oliveira
I'm a lawyer Switching careers; I'm getting into tech. I like Design and also like Development, although I'm more into Design. There are so many things to learn, and sometimes I get lost. This article helped clarify the path. Thank you, Jônatas! :)
curiel
Interesting, but in a respectful work environment we need to respect each area and If the developer can't interpret the designer kick him out! :p
curiel
Interesting, but in a respectful work environment we need to respect each area and If the developer can't interpret the designer kick him out! :p
Naveed Khan
Love the article!
Naveed Khan
Love the article!
Robert
Every once in a great while you come across somebody like an IT-Prince, who can do it all better than anybody. That's as rare in software as it is in music though, and they stick out -- it's obvious they're "special" and there's no reason to make a fuss about it. Let them do both. For the rest of us, do what you do best and stick to it.
Robert
Every once in a great while you come across somebody like an IT-Prince, who can do it all better than anybody. That's as rare in software as it is in music though, and they stick out -- it's obvious they're "special" and there's no reason to make a fuss about it. Let them do both. For the rest of us, do what you do best and stick to it.
John Ciacci, Esq.
I generally create a style guide PDF with a screenshot of the page and callouts should the color of PX size. You can see in this example: http://www.mod.cr/project/belkin/ (see the last four dots). From what I know developers do not want to be designers and designers do not want to be developers. I would say the opposite for this article that developers should learn more about design and the details that WE the designers put into it. Many developers overlook the finest details that frustrates me that I have to create such style guides so they will asking me what HEX color is that or even finer details like a 1 pixel drop shadow. HTML and CSS are easy to edit personally but to create a new document and code from scratch is impossible as a designer. It's like giving a developer a blank photoshop document and saying create the design for me.
John Ciacci, Esq.
I generally create a style guide PDF with a screenshot of the page and callouts should the color of PX size. You can see in this example: http://www.mod.cr/project/belkin/ (see the last four dots). From what I know developers do not want to be designers and designers do not want to be developers. I would say the opposite for this article that developers should learn more about design and the details that WE the designers put into it. Many developers overlook the finest details that frustrates me that I have to create such style guides so they will asking me what HEX color is that or even finer details like a 1 pixel drop shadow. HTML and CSS are easy to edit personally but to create a new document and code from scratch is impossible as a designer. It's like giving a developer a blank photoshop document and saying create the design for me.
Csongor Fagyal
In the world of Anguar, React.js, JQuery and such... I would consider a designer without programming skills almost useless.
Csongor Fagyal
In the world of Anguar, React.js, JQuery and such... I would consider a designer without programming skills almost useless.
Jeff Shaw
I'm going to respectfully disagree about (1) database architecture and (2) math/algo's being useless for designers. (1) - Information architecture - this encompasses having a solid understanding about structures, relationships, the flow of data and how to display and organize it clearly (2) - Creative coding - many design programs teach Processing (visual lang) to their students because loops/patterns/objects are fundamental benefits of computational design over graphical design.
Jeff Shaw
I'm going to respectfully disagree about (1) database architecture and (2) math/algo's being useless for designers. (1) - Information architecture - this encompasses having a solid understanding about structures, relationships, the flow of data and how to display and organize it clearly (2) - Creative coding - many design programs teach Processing (visual lang) to their students because loops/patterns/objects are fundamental benefits of computational design over graphical design.
Anton Chernyshev
I combined roles of front-end developer and web designer for 5 years working in it companies. What can i say, you won't become a top price designer if you spend 90% working day on coding and just 10% on design. Yes, some clients would like to get all services from 1 person because of budgets. But it doesn't mean that everybody have to accept them. If you decided to grow as designer, e.g. UX Designer, you need full time practice in this field. Same for front-end devs and back-end devs.
Anton Chernyshev
I combined roles of front-end developer and web designer for 5 years working in it companies. What can i say, you won't become a top price designer if you spend 90% working day on coding and just 10% on design. Yes, some clients would like to get all services from 1 person because of budgets. But it doesn't mean that everybody have to accept them. If you decided to grow as designer, e.g. UX Designer, you need full time practice in this field. Same for front-end devs and back-end devs.
Jônatas Vieira
Thanks for commenting! The point is having those skills will improve you as a designer / your designers skills, as you may know for being a developer too. But I strongly agree that a designer spending too much time coding could be terrible, I guess it's more of a matter of being well positioned and knowing how to handle focus.
Jônatas Vieira
Thanks for commenting! The point is having those skills will improve you as a designer / your designers skills, as you may know for being a developer too. But I strongly agree that a designer spending too much time coding could be terrible, I guess it's more of a matter of being well positioned and knowing how to handle focus.
Jônatas Vieira
Good perspective, thanks for posting! I wouldn't particularly encourage beginners to go this deep unless they know what they're getting into, but it clearly has its benefits.
Jônatas Vieira
Good perspective, thanks for posting! I wouldn't particularly encourage beginners to go this deep unless they know what they're getting into, but it clearly has its benefits.
Jônatas Vieira
I agree that there are some rare people who are ahead and special, but there are more people out there with the ability to know at least the basics of an additional skill than we can imagine though. Thanks for commenting!
Jônatas Vieira
I agree that there are some rare people who are ahead and special, but there are more people out there with the ability to know at least the basics of an additional skill than we can imagine though. Thanks for commenting!
Jônatas Vieira
Thanks for commenting!
Jônatas Vieira
Thanks for commenting!
monkeyboy
You've thrown some jargon at your audience without any explanation of what the terms mean, eg Ajax, MEAN stack, 'back-end', if the theme of the article is to encourage designers to get more technical then help them rather than scare them :) On the question itself, I think it's healthy for designers to learn to code, even if it isn't production quality it's useful to inform their designs about responsive issues, performance etc and more realistic to prototype in the browser than use Photoshop, Axure etc.
monkeyboy
You've thrown some jargon at your audience without any explanation of what the terms mean, eg Ajax, MEAN stack, 'back-end', if the theme of the article is to encourage designers to get more technical then help them rather than scare them :) On the question itself, I think it's healthy for designers to learn to code, even if it isn't production quality it's useful to inform their designs about responsive issues, performance etc and more realistic to prototype in the browser than use Photoshop, Axure etc.
nemrut
As with any profession, anyone can benefit from expanding their 'toolbox.' Where it helps designers/developers is having a basic understanding of challenges and constraints so as to not waste time proposing solutions that aren't feasible or optimal. That said, imo, design unlike development has a lot more ambiguity and challenges in terms of meeting client expectations, creative direction and human unpredictability. The actual 'creative' part of design is really only 10-15% of any project engagement with the remainder consisting of the aforementioned challenges. So unless designers want to get into development and vice versa, agree with the general tone of the article that both can benefit by learning more about the other.
nemrut
As with any profession, anyone can benefit from expanding their 'toolbox.' Where it helps designers/developers is having a basic understanding of challenges and constraints so as to not waste time proposing solutions that aren't feasible or optimal. That said, imo, design unlike development has a lot more ambiguity and challenges in terms of meeting client expectations, creative direction and human unpredictability. The actual 'creative' part of design is really only 10-15% of any project engagement with the remainder consisting of the aforementioned challenges. So unless designers want to get into development and vice versa, agree with the general tone of the article that both can benefit by learning more about the other.
Angga Risky Setiawan
I'm UI UX designer and I code about php
Angga Risky Setiawan
I'm UI UX designer and I code about php
cathyfangmeier
Woww Nice Post i like it visit Conquerors Tech For Cheap and Best Website and Software Development Company in Hyderabad - http://conquerorstech.net/index.php/services/web-development.html
cathyfangmeier
Woww Nice Post i like it visit Conquerors Tech For Cheap and Best Website and Software Development Company in Hyderabad - http://conquerorstech.net/index.php/services/web-development.html
Alejandro
Great article, completely agree. (Y)
Alejandro
Great article, completely agree. (Y)
Bianca Sherawat
Every person have their own talent in designing field so they just need to stick with it. Some are great ones which can do programming as well so be in the flow and just continue whatever you are doing..
Bianca Sherawat
Every person have their own talent in designing field so they just need to stick with it. Some are great ones which can do programming as well so be in the flow and just continue whatever you are doing..
Richard Koch
Hello !!! My name is Mrs Richy from USA . I want to share my testimony on how i got the blank ATM card. I was so wrecked that my company fired me simply because i did not obliged to their terms, so they hacked into my system and phone and makes it so difficult to get any other job, i did all i could but things kept getting worse by the day that i couldn't afford my 3 kids fees and pay light bills. I owe so many people trying to borrow money to survive because my old company couldn't allow me get another job and they did all they could to destroy my life just for declining to among their evil deeds. haven't given up i kept searching for job online when i came across the testimony of a lady called Emily from UK regarding how she got the blank ATM card. Due to my present state, i had to get in touch with Hacking organization and i was told the procedures and along with their terms which i agreed to abide and i was told that the Blank card will be deliver to me without any further delay and i hold on to their words and to my greatest surprise, i received an ATM card worth $1.1million USD with $8000 daily withdrawal. If you are out there looking for way to survive up you can also contact them via email and get yours OFFICIALBLANK9@GMAIL.COM
Richard Koch
Hello !!! My name is Mrs Richy from USA . I want to share my testimony on how i got the blank ATM card. I was so wrecked that my company fired me simply because i did not obliged to their terms, so they hacked into my system and phone and makes it so difficult to get any other job, i did all i could but things kept getting worse by the day that i couldn't afford my 3 kids fees and pay light bills. I owe so many people trying to borrow money to survive because my old company couldn't allow me get another job and they did all they could to destroy my life just for declining to among their evil deeds. haven't given up i kept searching for job online when i came across the testimony of a lady called Emily from UK regarding how she got the blank ATM card. Due to my present state, i had to get in touch with Hacking organization and i was told the procedures and along with their terms which i agreed to abide and i was told that the Blank card will be deliver to me without any further delay and i hold on to their words and to my greatest surprise, i received an ATM card worth $1.1million USD with $8000 daily withdrawal. If you are out there looking for way to survive up you can also contact them via email and get yours OFFICIALBLANK9@GMAIL.COM
Kapil Gorve
I can do design,front end,backend. I am in early stage of of my career.I am finding it hard to get a good job because , I am not master at anything. If you look at average job posting ,HR's mention every possible tech stack in description, I dont know where these people live who knows HTML,CSS,Photoshop,AngularJS,ReactJs,php,nodejs in one year. I kind of laugh when I see such job postings for junior web developer roles.
Kapil Gorve
I can do design,front end,backend. I am in early stage of of my career.I am finding it hard to get a good job because , I am not master at anything. If you look at average job posting ,HR's mention every possible tech stack in description, I dont know where these people live who knows HTML,CSS,Photoshop,AngularJS,ReactJs,php,nodejs in one year. I kind of laugh when I see such job postings for junior web developer roles.
Joseph Ross
Nice artcle to read:) I am new to this, and will be needing your help on how to go about blogging. I met with a web designer to open and design a blog for me. But I still can’t differentiate between ‘WordPress’ and ‘Blogger’.
Joseph Ross
Nice artcle to read:) I am new to this, and will be needing your help on how to go about blogging. I met with a web designer to open and design a blog for me. But I still can’t differentiate between ‘WordPress’ and ‘Blogger’.
David Barker
I hope this article https://www.templateify.com/blogger-vs-wordpress/ helps you to differentiate between these two platforms.
David Barker
I hope this article https://www.templateify.com/blogger-vs-wordpress/ helps you to differentiate between these two platforms.
Angela Gilbert
If you are just starting off I would recommend the blogspot, which is also known as Blogger. Once you are familiar with blogger than you can move on to WordPress
Angela Gilbert
If you are just starting off I would recommend the blogspot, which is also known as Blogger. Once you are familiar with blogger than you can move on to WordPress
mmcmsp
I started to design websites in 1999 when Netscape was a thing and Windows 95 was awesome! With 56kbps dial connection, limited software targeting the business, you needed to know html to get going. A but of Javascript to fix errors! And everything else you could put your hands on. From that time up to date, I still design websites but I find essential to know code. Why? First because I want to be able to argue with my developer if my designs are not mirrored by code. Second because I'm a better designer because I know code - by knowing the possibilities you not only make your work realistic but also great to interact with. Third, it gets your brain going! If you are a designer and not yet convinced, imagine you are designed a printed calendar - if you don't know the materials, measures, cuts, how you're going to pass along information for the printing bureau? Along my career I've caught myself many times suggesting and fixing developer css failures, when something was not like I wanted it to be. And you don't need to know much, good html and css knowledge is quite enough. And btw, love the article!
pickasidebro
Ahhhh.. arrogant designer who knows a bit of code and already think they are better than coders.
mmcmsp
I don’t think you’ve read all my comment.... or interpreted right. It’s exact the opposite of arrogance - for me a designer who knows code is a better professional because understand a bit of the next step of process and can produce better UI that results in better products. The same way a designer should be able to accept criticism, a coder should. It’s a partnership not a competition. The final piece is a product, not a part. And this must be even more solid nowadays as products tend to evolve everyday having constantly updates in both design and coding fronts. I’m the absolute opposite of an arrogant person. I’m a professional designer over 40s being 20 on the road, who never stopped in time. So if you are a developer and want to be around and grow in the business for a while, I also suggest you to learn some Ui principles, design rules, color theory...
Tarik Malagoli
Great article Jon! Knowing HTML and CSS were fundamental to improve my vision about the projetcs that I´ve developed. I think it is a great advantage for any designer.
Faruk Ahmed
Amazing post. I am very thankful for this article. I have interest on coding for long days. Finally I get this and this helps me a lots. Thank you so much.
Parvez Ansari
Sooner or later as you grow in your career you will need to know coding for many reasons. To be able to quickly prototype your ideas. To be able to co-ordinate with engineers. To be able to make some decisions based on the feasibility. It will also help to validate designers who claim to know coding. It saves a lot of time and saves your design integration effort
comments powered by Disqus