Code as Design

How development can be learned through a design lens (and how I managed it)

I've said it before, but I am primarily a designer. From an early age I was always drawing and building things, and always asking "why?", I'm naturally curious I guess. But I've also explored frontend development from the early years too.

I grew up in what I now consider the golden age of the web. I was a pre-teen during the 90's and I got really into modding my Windows 98 and XP interfaces to feel custom to my interests at the time (and let's not forget those Winamp skins). So I guess, although I wasn't coding at the time, I was beginning to appreciate the link between how the interface looks and how it works.

In those days, you could do a minimal amount of work to change the appearance, but because you had to install a bunch of different patches and programs to make it work, it did require a reasonable amount of logic and computational literacy to get it working.

As I got older and things developed online, I got a MySpace account and learnt about the power of HTML and inline styling of CSS. Using "View Source" I could steal the code other people wrote and modify it to my needs. Again, because I'm visual-first, I started with hunting down the mods I liked the look of the most and then modified their code to suit what I liked. Starting with colours, I then worked my way into sizing and, hiding things I didn't like by targeting their id element and hiding them with display: none.

After MySpace went down the pan---before Justin Timberlake resurrected it and made it weird---and things moved on, I drifted away from code and moved more towards the creative side of things. But over the years I was exposed more and more to code through my jobs. And whilst working at Cognite I was fortunate to meet a good friend, Nick Wilkins, who helped me (and still does) figure a bunch of things out to make me more comfortable with code. More about that here Design as Code .

Back to code

Since then, I've been pushing myself to learn more and more about how to implement my design ideas in code. I started by pushing myself to write my original personal website in pure HTML and CSS. It was clean and simple, but it did the job and refreshed my knowledge. Looking back at it now, it's not that far off where I am now visually, but it's a much more stripped back approach and a far more manual site to update.

The funny thing is, I didn't design this page first. Contrary to the usual approach, I wanted to leverage something I've talked about before Development-based Design.

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.

By manipulating everything in the browser as I went, I learned even more about the power of code, but it felt like something was missing for me. I wanted to find a way to learn the more reactive programming approaches. There'd been all this talk about React and it just seemed like a really good thing for me to push towards. But then I looked at it...

The problem with React and why I picked Vue

For me, React just didn't properly click. For developers who understand Javascript it offers really powerful ways to build better, more reactive websites. But as a designer who moved into learning code, it was too hard for me to actually make sense of. The leap from HTML and CSS to React was massive and it put me off.

Welcome Vue! I stumbled across Vue by accident. I knew I wanted to learn something more reactive so I started searching around, found Vue and it just clicked instantly. I dropped the CDN script into a prototype project I was working on at NeuerEnergy and I was away. I could write the HTML and CSS I knew, and then inject some Javascript in---when I wanted to and had learned to---to power up the site with clever reactivity.

So then my love of Vue began and I decided the best way to learn it better was to rebuild my personal website in Vue. So welcome KEJK v2. I decided that because we'd been leveraging the power of Material Design at NeuerEnergy, I wanted to do the same for my personal website (avoiding too much brain overload) and thus found the Vuetify library to help me on my journey. This meant I could build in the same way I could design, using a design framework that already made sense to me. If I wanted a card, Vuetify had a <v-card>to offer me, if I wanted to break into a grid, I had <v-row> and <v-col>to help me out. It all just made sense.

Vue, Nuxt, Cosmic, Drafts and TailwindCSS

I loved that personal site, it also provided me with a lot of interest from prospective employers when applying for other design roles. Being able to tell them that I'd built the website myself and used Vue to do so gave me a level of skill that other designers weren't always able to offer. This doesn't mean I was better in any way, I just offered different skills and sometimes those skills are super helpful for the right design team.

I found that exact design team. In my current role at HomeHero, I was hired specifically because I could span the breadth of design and development. Connecting Design and Engineering teams is often an overwhelming and complex task. More often than not, projects aren't handed over properly and a lot of important information is either lost in translation or just straight up missed. Usually, this isn't the fault of anyone particularly, better processes could help (I'll be writing about this at some point soon) but also understanding the language of development and being able to understand what it takes to deliver on your grand "cross-device isometric animated timeline" can have a massive, lasting impact on the connectedness of your team and the quality of the outcome. Moreover, I'm able to work directly with the Engineering team to style the frontend of some of our projects, lifting a weight off of them and giving Design the power to own the interface from idea to execution.

So what was next for me? Well, as you can see there were two iterations of my previous site but you're reading this on the third. I realised that I had an opportunity to improve things. I wanted to make my content more reactive and allow myself more opportunities to utilise a headless CMS to power a lot of the content that could change regularly. This is when I came across CosmicJS. Cosmic is a super flexible, really well documented headless CMS (with an unbelievably generous free tier). Cosmic has allowed me to power pages such as my Thoughts (where you're reading this) and Uses. Now I can update content via Cosmic's simple backend, avoiding any need to dive into the code to create a new blog post or update my gear.

Right now, I'm writing this on Drafts for iPad and will be posting it to my Cosmic bucket using a custom POST action I wrote. This makes things frictionless for me now.

I've also refactored the site to use Nuxt.js so I can take better advantage of dynamic page routing, SEO meta info and their module system. I even went as far as to ditch my use of Material Design and refactored all of the HTML to use TailwindCSS. This means I'm looking up docs less and focusing on writing code in a way my brain already thinks... in CSS.

So what's the future?

I'm not really sure where I go next with things. I can probably better implement Cosmic into my site, making more content dynamic. I also want to write some more Drafts actions to try and make things like updating a post more straightforward. But other than that, I'm feeling really excited about where things are and what I've managed to teach myself.

I've said it before several times, but I urge you if you're a designer who's working with developers; learn the basics of HTML, CSS and Javascript, try out a framework like Vue + Nuxt (give SwiftUI a try too). They're all becoming so much more accessible to people without programming knowledge already (or a more visually-focused brain like me) and I promise it'll be worth it.

If I can do it, so can you.