Beyond static images

I’m constantly working on side projects. Thoughts that develop over time from rough ideas to polished concepts. However, that’s usually were it stops. And that’s because, even though I did a little bit of HTML and CSS years ago and am currently trying to get into iOS development for the millionth time, my interest in coding has never been strong enough to properly build something functional.

And while I’m lucky enough to have some friends who can help me out, I’ve always been frustrated about depending on them to make my ideas become real.

Discovering Webflow

This frustration has been true for my personal website as well. Recently, however, I’ve started seeing more and more designers use Webflow to build their personal website. And since I was just working on another iteraton of mine, I went ahead and gave it a try.

This turned out to have been one of the better decisions I’ve made in recent history. Since setting up my first project, not a single day has passed without playing around with the layout of the individual pages and tweaking little things and animations here and there.

By building a graphical editor for HTML, CSS and even Javascript, Webflow enables you to create behaviours and finetune interactions without knowing the correct syntax or all the possible options for every change I want to make to my site. All I have to do is to tweak some values in the inspector until I find what I’m looking for.

In short, it removed the burden of having to wrap my head around how to write code and allowed me to build my ideas and ship them.

Working inside the medium

Apart from all those powerful features, Webflow actually emphasized something that I’ve been thinking about more and more:

‍It’s crazy that we as designers are still drawing static images that try to illustrate all the behaviours of a dynamic piece of software.

I started designing my new website in Sketch (yes, Sketch) before I jumped into Webflow to implement it. However, after recreating the main layout, I started tweaking certain behaviours that are common on the web, like how the layout behaves at different viewport sizes. Things I didn’t even bother with when creating the initial design of my website in Sketch.

That’s because the tool not only allowed me to easily define those behaviours, but because it required me to think about them in the first place.

The only way to "design" behaviours like this in interface design tools like Sketch or Figma is to create multiple artboards, one for each viewport size, and reshuffle all the components to fit the smaller space. In addition to that, the layout one would have come up with might have been unreasonably complicated to implement, because the tool doesn't help you to align your ideas with how CSS treats the flow of a layout as the viewport size becomes smaller.

I wasn't working inside the actual medium my creation would live in.

Now to be fair, it's not really that simple. You could argue that there's good reason why interface design tools work like this. Giving you an open canvas allows you to explore ideas faster, without being held back by technicalities so early in the process.

However, that's were the visual work of a designer usually stops. Most of us never go beyond drawing these pictures that look like graphical interfaces, but aren't.

Dreaming ahead

This made me think about the way we design graphical interfaces at this point in time.

‍Why are we simulating behaviours with pictures instead of designing layouts as fluid and dynamic as they really are? Why are we using tools that make it so easy to not think about all the edge cases and states our design can be exposed to once it reaches the hands of our users? And why are we even “handing off” our work to someone else in the end, hoping we communicated our ideas and intentions well enough that they will be reflected in the end result?

I imagine a future in which the actual implementation of the interface is the job of the designer. A future in which designers have full control over every interaction inside our product, without being dependend on other peoples expertise to fully do our job. A future in which we have amazing tools that allow us to do to every piece of software what tools like Webflow are enabling us to do to websites today. I recommend reading Yitong Zhang's post "Design tools and design jobs" which touches similar questions.

I can’t help but think about how crazy it will sound just 10 years from now, remembering how we used to create digital products. And I can’t wait to see how we design software by then.