Published on | Prototyping: From UX to Front End — Medium Angelina Cole

Four years ago when I quit my advertising job to move back in with my parents and change careers, this “User Experience” thing felt so new. It felt like uncharted waters and everyday was an adventure into the jungle of understanding human behavior.

Every single day since finding my way into this industry has been an adventure stocked full of bushwhacking, the occasional tiger trap and gorgeous vista of design successes. CSS has helped me become a better professional.

Let’s talk about this abstractly for a moment, shall we?

Learn to Code is such a loaded phrase. Often, I think it’s easy for designers to interpret this as “I need to be as good a developer as the developers on my team.” While there are some folks who walk the Earth that can do this, it takes quite a bit of effort and mental capacity to do this. And, if I’m being honest, aren’t we all entitled to a few nights on the couch playing Zelda now and again?

Let’s consider Learn to Code in a different way. Let’s instead say, “let’s learn a new language” because that’s really what we’re talking about here.

Some loose history

Literally everything in the vast universe of writing code of any sort is an abstraction of the computer’s native language, binary, into something humans can interact with. We began with punch cards and have in the decades since, found ways to write in a common language that gets easier and easier for humans to reason about but computers still fundamentally understand and know how to render.

This is no different than humans using something like the Rosetta Stone to decode their regional languages and begin communicating together.

I’ve found HTML and CSS to be my own personal Rosetta Stone in the world of software delivery. So, yes, dear designer, you should learn a little code. Specifically, you should learn some CSS.

Dear god, why

The singular distinction between Design and Art is how it’s consumed. Art is consumed and interacted with to make you question, think and feel. Design you actively use to solve a problem; it serves a specific purpose.

One of the most core tenants of Industrial Design is understanding the material with which you create an object. If you’re going to mass-manufacture a toaster, you need to know what metals, alloys, components and plastics are going to make up your toaster. You need to know what they’re made of, their heat limits, their strengths so you can build the best toaster at the right price point.

Interface design is no different.

Just as UX Researchers prioritize getting to know the limitations of the current system, the pain of the current users and what kind of solution may solve their problems, we also need to know deeply the limitations of the medium in which we create. We need to understand code conceptually to make responsible design choices. Without this understanding, we run the risk of creating interfaces that air more on the side of Art than Design.

The corners of the Earth continue to converge

Since my first days as a baby-cub designer, I’ve been curious about how the experience between teammates can be better. While many organizations still throw design over a wall and hope for the best, it feels like the industry is in a place now where we all want to work together better.

I’ve seen designers raise their hands to write code. I’ve seen designers and developers pair. I’ve seen developers influence the core of design because they know intimately how design is made real. I’ve seen collaboration happen between these two disciplines and the old adage holds true to this day: good UX comes from everywhere. If this isn’t your reality, you work on a distributed team, the bridge is just too far — spend some time with CSS.

For designers, I believe CSS is the easiest mental model to adapt to in the vast universe of code because your results are immediate, much like creating a mockup in Sketch is immediate. The difference here being the tools you use to paint your interface are more verbal than visual. If you applied a style but aren’t seeing it in the browser, odds are your CSS syntax is wrong.

However, the real beauty here is in how this new set of vocabulary words will supercharge your team. CSS specifically is a language I firmly believe every designer should know. You and your developers now have a common vocabulary to communicate with. CSS is now your Rosetta Stone. Your team can move faster, and ultimately, everyone grows. There are plenty of excellent resources out there to get you started, the hardest part is resolving to begin.

Good luck, and let me know how it goes.

CSS & The Rise of the Technical Designer was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

CSS & The Rise of the Technical Designer

Cool stuff, every week

More Articles