Not surprisingly my answer to this question is yes. Being one myself, I’m obviously biased on the subject. That said, the goal of this post is not to make anyone feel like they need to learn to code in order to be successful (there are a wide range of complementary skills designers can have and no one can do it all). Mostly, I’d like to share the benefits I’ve realized.
It’s just another creative medium
I’m talking about pencil and paper, paint and canvas, mouse and Figma, keyboard and text editor. Code should be thought as nothing more than another tool to express your ideas and creativity. In fact, it actually allows for more creativity than any other medium I can think of. Don’t believe me? Just look up “generative art”.
You have ultimate control of your designs
Who doesn’t hate providing red lines for mocks? While design tools such as Figma or Framer X go a long way to address this problem, they still fall short when compare to what is possible once you’ve pick up a little CSS. In many ways, CSS is really just a way more useful, nicely organized, spec sheet.
Making communication easier is one thing, but how can it make your job as a designer easier? If you are willing to design in the browser (which I advocate for doing as early in your process as possible), you’ll unlock a treasure-trove of tools that are unrivaled by GUI tools (which are almost always playing catch up).
- You can use design tokens to generate a palette of design attributes (colors, spacing, shadows, rounded corners, etc.) for new projects.
- You can use CSS grid to quickly test out new layouts without needed to reorganize your content.
- You can design for all breakpoints at once with flex box.
Or if you have enough savvy, you can build your own GUI’s for expedite this sort of work in the future.
e.g.
It encourages consistency
DAE remember the principles of design (C.R.A.P.)?
- Contrast
- Repetition
- Alignment
- Proximity
Repetition is probably the hardest to apply at scale, but it’s also what gives your application polish. As your project grows it gets increasingly difficult to keep a handle on all the design patterns. This problem is exacerbated when you’re building on top of an existing application (not designed by you), where all the design patterns might not be obvious.
CSS and component driven design/development are the best tools for enforcing consistency. Their control stretches from screen to screen and require little to no thought once they’ve been created. Repetition becomes a side effect instead of something that requires your constant attention.
Accessibility and UX
There’s more to UX and accessibility than what can be accounted for in a mock-up. Whether you code-up your design yourself or you’re working with a developer, it’s good to know what should be addressed. As a designer you are uniquely suited and oftentimes responsible for the user experience. And while the Twitter-sphere might be full of a11y-minded devs, odds are the one’s you work with are neither interested nor expected to know such details. Knowing why a button is better than a div as a click target or what input type attribute to use can make or break the usability of you application.
Its Fun!
Seriously, I really think it is. I’ve been developing for nearly as long as I’ve been a designer, and breathing life into what was once not much more than a pretty picture, is insanely satisfying.
And if you’re someone who enjoys learning, there is always something new to learn in web development. It’s almost daily that I learn something new, without even seeking it out (although I do follow a few dozen developers on twitter 😳).