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.” 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. 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.
Front-end JavaScript and Ajax know-how make a design 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.
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.
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. 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.
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. The Toptal Design Blog is a hub for advanced design studies by professional designers in the Toptal network on all facets of digital design, ranging from detailed design tutorials to in-depth coverage of new design trends, tools, and techniques. You can read the original piece written by Jon Vieira here. Follow Toptal Design Blog on Twitter, Dribbble, Behance, LinkedIn, Facebook, and Instagram.
