Designers Should Know About Code, Not How to Code
Recently, I’ve noticed increased conversations among designers about learning to code. Coding is valuable, and I would never discourage anyone from picking it up. In fact, I first learned to code and later focused my career on design.
Throughout my design career, I’ve found that some parts of my early coding knowledge have been beneficial. In contrast, others haven’t mattered as much. I don’t believe learning to write code from scratch is necessary for or worth the time of most designers. This is especially true with the rapid adoption of codeless and AI tools in development.
Instead, what’s most beneficial is understanding at a conceptual level how certain language constructs work. Language constructs are the building blocks and unique features of programming or markup languages. These features included how HTML organizes content, how CSS layouts behave, or how JavaScript creates interactivity. Learning the ideas behind code can help designers make informed designs that are easier to implement. It can also help them communicate more effectively with development teams and build empathy toward developers’ challenges.
Language Constructs Designers Should Know
HTML
HTML (HyperText Markup Language) is the frame upon which all web pages are built. HTML tells the browser how to display text, images, links, and other elements on the page. To do this, HTML uses tags to define elements. These tags wrap around content and describe its role or purpose. Together, the tags make up the structure of the page.
Specific constructs and topics designers should learn about:
- Basic HTML structure (<header>, <body>, <footer>)
- How to correctly apply heading tags to content (<h1>-<h6>)
Why designers should know this:
- Knowing how HTML is structured will help designers predict how their designs interact with accessibility devices like screen readers.
- Properly using heading tags not only helps with accessibility but also improves SEO (search engine optimization).
CSS
CSS (Cascading Style Sheets) is the language used to style the appearance of web content created with HTML. CSS controls how elements look by setting properties such as colors, fonts, spacing, and responsiveness.
Specific constructs and topics designers should learn about:
- How basic CSS properties work (margin, padding, text properties)
- User interaction pseudo-classes (:hover, :focus, :active, :visited, :disabled)
- CSS layouts like Flexbox and CSS Grid
- How media queries work (responsive design)
- Figma auto layout
Why designers should know this:
- Knowing how commonly used grids work helps designers create more easily implemented designs without excessive workarounds. This can help teams save time and effort.
- Pseudo-classes enable dynamic styling without adding extra classes. They add to styles that already exist. An example of when pseudo-classes are used is when a button goes from a default state to a hover state. Including designs for element states (pseudo-classes) ensures clear communication and intention on how the element should be styled.
- Awareness of how media queries work means designers will consider responsive behavior when designing. Looking ahead and creating designs for different breakpoints will avoid awkwardness when scaled.
- While not code, Figma’s auto layout mirrors Flexbox’s behavior. By using auto layout, designers can create more developer-aligned designs and provide better information in dev mode. It also helps designers understand HTML/CSS and how their design will translate when developed.
JavaScript
JavaScript makes web pages interactive and functional by enabling behaviors, animations, and real-time updates.
Specific constructs and topics designers should learn about:
- Types of event listeners
- State management
- Performance concerns
Why designers should know this:
- Event listeners trigger actions when users interact with elements (e.g., click, hover, scroll). Knowing what event listeners are available can help designers define an element’s interaction flow (e.g., what happens on hover vs. click).
- State management refers to the tracking and management of a user interface’s “state” or condition, such as whether a menu is open, a button is active, or data has been loaded. Designing for state changes ensures a complete user experience. Collaborating with developers becomes easier when you specify each state with a design.
- Excessive animations, large assets, or complex interactions can slow down a site, leading to a poor user experience. Awareness of performance concerns can help designers decide what animations and interactions to include in their designs.
So, If you’ve felt pressured to learn how to code, let me take some of that weight off your shoulders. You don’t need to learn how to write code, but you should understand the concepts around the constructs within it. I encourage you to familiarize yourself with the constructs outlined here. By grasping these conceptually, you’ll create implementation-ready designs, increase cross-functional collaboration, and have a smoother design/development process.
What about you? Should designers should learn how to code, or is conceptual knowledge enough? Are there any other topics or constructs you think designers should know about?
