The term designer is used across many domains. In the context of this article, it refers to a UX (User Experience) designer.

One question that’s being asked over and over again - Should designers code or not?

Google search the question, and you'll come across many different theories posted by influencers, practitioners, and gurus about this long-falling topic of debate. Some suggest designers must not just sit in front of their laptops and come up with fancy prototypes but know how to code them into existence. Professionals wearing multiple hats are always welcomed by companies. Meanwhile, many others may argue that design and development are two different niches and must be kept separate. A designer shouldn't worry much about the technical implications as it can limit their creativity, resulting in less than good solutions.

These arguments have no means to an end as both design and development are two highly specialized professions, and each takes several years and hours of practice to master the very professions. The sweet spot, or shared understanding, probably lies somewhere in the middle. Knowing a little bit of coding doesn't mean the designer earns the title of 'expert coder,' but makes them understand a developer's perspective, just like an actor having basic knowledge of cinematography or direction improves their art of acting.

The better question to ask is - Should designers understand code?

We think they definitely should. Having an understanding of the technology helps designers to identify and implement solutions without going back and forth with the developers to check what is possible. Let’s take a hypothetical example where a designer proposes a solution for better navigation in the app. The developers say that the current architecture of the app does not support this solution. Would it be worth re-building the entire application for the sake of the new navigation? Or should the designer come up with an alternative solution? The developer may suggest an alternate technically feasible solution which the designer may not agree with. This results in a loss of time in arguments, proposals, and iterations. If the designer had an understanding of coding, he would be in a better position to suggest a better solution.

Designers who understand the technological underpinnings (that help deliver impeccable designs) make them more impressive and valuable and boost their career prospects as well.

So, where to begin?

Start with the Basics - Learn HTML/CSS

HTML (HyperText Markup Language) is a standard markup language used by web browsers to determine the placement of various elements such as images, texts, etc. On the other hand, CSS (Cascading Style Sheets) determines how to style HTML elements to beautify the page and make it more user-friendly. The two complement each other and are comparatively easier to understand, and do not involve any programming logic. Metaphorically speaking, if HTML is the skeleton of a web page, CSS would describe its shape, height, skin type, hair color, eye color, and the like.

According to a report published by Statista in 2019, around 64% of developers worldwide code in HTML/CSS as it's one of the easiest languages to learn and code in.

Another reason is that nearly all web pages and web apps are primarily HTML documents. This means that no matter which coding language you use, everything eventually converts back to HTML/CSS. So it makes sense for designers to get familiar with the easiest and most widely used language.

How HTML/CSS helps UX Designers

Understanding the Medium

Let's consider the example of an architect. An architect's job is to create blueprints of buildings and structures and ensure they're beautiful, artistic, and aesthetically pleasing. But designing involves more than just sketching out a plan on a piece of paper. It includes ensuring the feasibility of the laid plan, paying attention to details such as construction materials, functionality, structural safety, price economics, and specific needs of the buyers.

Similarly, the job of a designer is to create functional designs that are platform- and user-friendly. And, while there are many tools such as InVision Studio, Figma, Sketch, etc. to simplify and streamline a designer's work, they're useless if the prototypes designed using these high-end tools fail to give the look and feel as intended.

On the other hand, understanding the medium, i.e., understanding how to code works, can help designers use these tools to their advantage. Knowing the basic code will not only give designers a new perspective to design but also understand what will happen to the layout further, provide solutions that are easy to implement, make the designs pixel-perfect, optimize them for various platforms, and circumvent all the back-and-forth.

How to map the responsiveness of the design if the screen size changes? What if the images are taking too much time to load? How to optimize the design to maintain shorter code sheets? These are some questions designers, with some understanding of coding, will be able to answer themselves.

Better Team Communication & Collaboration

Communication and collaboration is fundamental to a UX designer's job. From product managers to stakeholders, customers, and developers, they need to collaborate with one-and-all and create meaningful designs as per project needs. And we know that good communication leads to better collaboration.

Designers and developers are responsible for the same things - creating and delivering amazing products that match end-user demands. The more the two departments are in-sync, the better products they can create together. If designers have the necessary coding knowledge, it will help them to understand the technical constraints and problems and to make sure that the designs take them into consideration. They will also be able to reduce a developer's workload significantly, this will not only make designers a great asset to the developers but also strengthen their bond and mutual trust.

Deliver Design Handoffs Easily

Design handoff to developers is the end-product of all the research, brainstorming, countless iterations, and preliminary testings at the designer's end.

But, what if the final outcome still does not match the designs? Maybe there were some grids that the design failed to cover, some measurements went erratic, or images were too small to fit the actual screen size as per the pre-defined blueprint. In such situations, developers have to take extra steps, write some additional codes, rectify the issues, and align the faulty designs.

However, with some basic understanding of code, designers are in a better position to spot technical limitations at an initial stage. They can quickly make necessary amendments, and even review the work done by the development team at the QA stage to ensure the launch of a high-quality product.

Designers with basic coding knowledge are the ones who can make smooth handoffs for developers and simplify their otherwise complicated job.

Use Advanced Dev-tools to Boost Design Process

In an agile development process, it is imperative to fail fast. Meaning, it takes a lot of time to explain ideas, wait for prototypes to be designed, coded, and reviewed or tested, only to realize the output sucks. It stands nowhere near the originally drafted prototype. How to cope up with such scenarios? Test ideas directly on a live website using dev-tools.

Designers with a some understanding of HTML/CSS can leverage these developer tools to test ideas on the live website and check their feasibility. Easily change the style of any page element, edit/omit a text, revamp image size, add or remove white space, choose frames to fit designs, and test how the final output behaves on different screen sizes. Such impromptu analysis eliminates multiple design back-and-forths and time spent reviewing final outputs at a developer's end.

Besides these in-built dev-tools, there are a host of extensions and plugins that designers with HTML/CSS knowledge can use to their advantage. Many visual website editors such as Webflow, Wix, etc. also serve handy to prepare quick designs and hand-to-hand reviews. Designers can also use some advanced features such as A/B testing by VWO to test their designs and check which ones get more traction.

Conclusion

To conclude, it's not a designer's core job to code. There's an entire community of professional developers with extensive coding knowledge to do so. However, it's about learning, developing new skills, and adding an asset to one's advantage. Designing functional creatives with HTML/CSS knowledge is not just an added skill set you possess, but an ability to reduce workload, accelerate processes, and pave the way to healthy process unification.

Next steps

To start your journey as a UX designer with HTML/CSS knowledge, go through this list of free online resources to choose from.

Courses -

Khan Academy - Khan academy has completely free, interactive, and highly structured courses on HTML and CSS. They are great at starting you off on your coding journey.

Codecademy - Codecademy also provides really good, interactive HTML and CSS courses. While not completely free, it still has a lot of good content available for no price.

Helpful Resources -

Mozilla Developer Network - One of the more legitimate sources that accurately describes and explains what each HTML, CSS, JavaScript or jQuery element is or does.

W3 Schools - This site would be useful when you want to get simple, human-language explanations of certain HTML and CSS elements.

CodePen — This is an online, real-time, code editor. You can also find tons of nice examples and projects here.

Don’t Fear the Internet - It is a super eight-part series that gets you going with HTML & CSS — it even delves into the all-important topic of typography.

Just Starting Out with CSS & HTML - A collection of articles on CSS-Tricks to get started with HTML and CSS.