Built to Last
Why learning HTML/CSS is fundamental to working with Design Systems.
By Andrew Yoon.
From the incredible "What is Money Show - Saylor Series", Michael Saylor shares a story about the Alcántara bridge that was built in 104 AD and still stands to this day. That it has endured time, nature, war, and is one of many examples of exceptional Roman engineering.
That bridge, which includes a decorative “triumphal arch” and a small temple at one end, were all designed by an architect named “Galius Julius Lacer”. Part of the inscription carved above its entrance translates to:
Permanent bridge will remain forever in the world
― Lacer (designer)
This architect had truly strong conviction about his designs to which Saylor comments, "... they took their engineering seriously." Which is also to say - this architect/designer cared a great deal about what was being built.
I love this story, as it makes me think about the relationship between modern designers and developers. Those of us in the trenches know how complex and perpetually unique our challenges can be. Often, what started with great intentions and planning, can devolve into chaos and fragility. What I feel is getting lost these days is an understanding of how our designs are built, that we might make beautiful things that last.
Design and Code
UX is broad, and design systems is a newer concept, requiring the synthesis of different skills. Its how two musical instruments jam and complement each other. Each on its own is an art, but offer whole new possibilities when meaningfully integrated together.
Because Design Systems is the harmony of design and code, there are technical barriers for both designers and developers. We’ll see more and more DS auto generators, boilerplate templates. Frontend frameworks like bootstrap have had a token based style system for some time.
It’s risky to utilize these templates without first understanding why and how it was built, to know how to meaningfully integrate, maintain, and scale it. If you feel you understand these concepts, these can be very useful tools. To not would leave you without the knowledge of how accessibility is solved, or result in poor choices and mounting technical debt.
Understanding of HTML and CSS is what will make your bridge endure and thrive.
They are considered “markup languages”, which is to say it’s not formally considered programming. Which may come as a huge relief, my creative brethren. No advanced math needed.
HTML/CSS is the palette used to express a user interface. Figma is a layer of abstraction on top of it. And it’s not necessarily “easy programming”, it’s a unique medium on its own and there are a surprising amount of experienced frontend developers that still struggle with it.
Fundamentals
Like anything, learning the fundamentals enables you to say new things and to say them better. If you skip them and go for the fancy stuff… you’ll likely feel lost, setting yourself up for failure. You don't want to get called out by someone who does know, or have to answer for future problems you've created.
Commonly established fundamentals are like the distilled, collective knowledge of a medium, even ordered in such a way to be maximally useful. The constant, ongoing refinement of best practices.
Despite how obvious design might feel at times, learning the basics of UI design are crucial for success. Doing so will allow you to dance more and more effortlessly through your work and you will have much better conversations with your development partners.
Beneath the Design
Though a design may look finished, and even well-annotated for handoff, there are often missing details that developers still need to solve. The degree to which these details are addressed will mean the difference between an effective, scalable design vs one that will be saddled with debt and maintenance issues.
HTML and CSS are flexible by design, so much so that there are plenty of different ways to build any particular thing. You can build it with worst practices, but still work at it enough so that the end-user still has a good experience. However, building it with best practices yields clarity for anyone reading the code, proper accessibility (ie. screen readers), a smarter structure that can adapt to future changes, and much faster production.
And there are specific things, more of a graphic/layout nature, that designers can see solutions for. And solving these ahead of time often prevents future hard overrides as a result of painting ourselves into a corner.
How I learned
It was almost 2 decades ago, but I read those massive O’Riley technical books like “Dynamic HTML” or “XHTML”. I don’t think I retained much and I was a poor studyer then. It’s still boring to think about.
I immediately started practicing with personal projects, freelance work, and full-time positions that involved working with production HTML/CSS along side actual frontend developers. Those early projects (and even ones later in my career) were hilariously awful. I learned there is an art to execution - with respect to the end-user and the people that will maintain and extend your code.
In recent years, sites like W3schools have been an invaluable reference. I’m also grateful to content creators like Kevin Powell, who generously share their insights and the frontiers of their knowledge.
I learned the Webflow platform to help with production of quick, small websites and I was surprised at how good it was at teaching html structure and making it easy to test CSS. Working purely in code can abstract things too much sometimes and Webflow does a phenomenal job at visualizing what the code is doing.
And finally, working on Design Systems further progressed my thinking as I wrestled with its implications across design and frontend.
These days, it's pretty easy to learn and keep up. Someone could get decent in a couple weeks.
Notable aspects
Grid and Flex are CSS properties, each with their own sub-system, and are considered best practices in creating responsive layouts. You can still make anything using the other display types, but leveraging Grid and Flex will make everyone’s lives easier.
CSS variables (also SASS/SCSS) are used to create tokens (variables) that will allow you to organize, abstract, and cross-reference styles across your design system.
Current best practices for semantic HTML tags. The flexibility of HTML allows you to build anything using virtually any of the HTML tags, but only abiding by semantic standards do you both make your code accessible (ie. screen readers) you also make it much more understandable and therefore maintainable by other people.
Final Thoughts
Websites and apps often seem straightforward, but there are a bunch of interesting things happening at the interface level. Having knowledge of these sub-systems will give you insight into better ways of designing, paths to avoid, and what might be possible.
And when it comes to creating a design system that your developers will appreciate, it is a must to understand.