Design as Code

What learning Vue has taught me about the future of design. 

So let's start with some background; I've been tinkering with website code since the early 2000s when MySpace was first on the scene and I was trying to customise the look of my personal MySpace page.

At that time, it involved a hell of a lot of inline styling and hacking around to find out what would work and what wouldn't. Thanks to the beauty of 'View Source', it was possible to see the detail of what another person had done, pull that code, and tweak to your heart's content until you broke it again.

After MySpace died and I moved on to other, less emo, things I found myself falling away from programming. That was until I started a job in healthcare leading the digital design and development of projects. This all came about organically but I was kinda out of my depth.

Luckily, I had a great relationship with the core developer on our team and over time started to tinker again, this time though, in production code (mostly because I did the crappy little jobs that he liked not having to do).

What I started to learn, was the magic of development-based design, or frontend design, where I would manipulate the UI (or DOM) inside the browser itself to see how I preferred things. It felt like the old days of tinkering on MySpace again.

The more I did it, the more I enjoyed the experience of designing in the browser. I'm not saying you should go away completely from using design tools (I still heavily use Adobe XD and Figma), but I am saying that understanding how to design in code is a superpower that all digital designers should aim to possess. 

Here are the key reasons why:

1. You can see the direct effect of a decision, in the browser, in real-time
2. You can learn the language of development, allowing for better cross-communication between you and your development team
3. You can increase your output at your company, enabling developers to focus on the logic and complexities whilst you manipulate the styling in production code
4. You can improve your ability to work independently on client projects as a freelancer

The idea of the Frontend Designer isn't new but it certainly isn't widespread either. I strongly believe that this hybrid role is the future of design and, with the flexibility of Web Components and powerful frameworks like Vue, React and Angular enabling better component-driven design, Designers understanding code is going to be more important than ever. 

If you're looking to evolve beyond HTML and CSS as a designer, but find JavaScript scary as hell (like I did) then check out Vue and follow their extremely powerful and easy to follow documentation.