Webflow is making us better digital designers

We’d like to tell you about a tool that we (the Design team at Velocity) have recently started experimenting with to create web content. 

Actually, scratch that: we’re kid-needing-to-go-pee bursting to tell you about it.

Because although we’re only just getting started with Webflow, we already see big potential in it. 

In good time, we’re confident that Webflow will empower us as designers to do even better, more precisely-engineered work for our clients. 

And that’s just for starters.

But before we get to what we’re going to do with Webflow, let’s talk about what we’ve already done with it… 

Oh – and in case you’re wondering what the hell Webflow is…

What the hell Webflow is

Webflow is a “no-code” website builder that lets you take control of HTML5, CSS3, and JavaScript using a completely visual canvas. 

From a Design POV, that means that we (as non-coders) can create a web page and either publish the code straight to the web or hand it over to our Dev team to integrate into a site. 

How we got started with it

Once upon a time – okay, about three months ago – Dave, our Head Dev, came across a video about Webflow and got excited. 

(Full disclosure: he’s pretty much always excited, but he was slightly more excited than usual.) 

Dave sent us a link and told us we should look into Webflow: it’s a potential game changer.

We were intrigued. We were hungry. We had lunch. We came back from lunch. And watched the video. And were impressed. 

So we decided we should try Webflow out. And it just so happened that we had the perfect piece of work to try it out on.

You see, we’d been doing a rebrand for our client Glance, and as part of that project we needed to create a brand guideline document.

Ordinarily, we’d have created this document as a PDF. But the thing about PDFs (and no disrespect to any PDF fans out there reading this) is that they’re rarely our first choice of format. 

Why? Let us count the ways: they’re clunky; they’re old tech; they’re static; they’re not interactive; they’re unwieldy; there’s no version control… 

In our estimation, it all adds up to a Pretty Diabolical Format. (Please: save your groans to the end.)

And, hey: we’re a digital agency, aren’t we? We’re supposed to represent the cutting edge of digital content. So shouldn’t we aim to put those brand guidelines online? 

Yes. Yes, we should. 

If you need any more convincing, here’s: 

5 reasons why brand guidelines work better as a web page than a PDF

1. Version control is easier to maintain with a web page
2. A web page showcases your brand to the world… (Which makes putting cool stuff such as animation in it really worthwhile.)
3. Is more shareable… It won’t get lost in your inbox or paper tray. 
4. And more interactive. (And, ergo, engaging.)
5. You can measure (and thereby improve) a web page’s performance. 

How we worked with it

Webflow has been billed as “design without dev”. And to some extent, that’s true.

Take the brand guidelines job: normally, once the design was finalized, this would be put into a Figma file and our Dev team would have to do a custom build job to get it online. 

Using Webflow, Design put together a container template for the brand guidelines – which they’ll be able to use again in future, by the way – all by themselves. 

But this doesn’t mean that the devs aren’t involved. No siree: they’re playing an absolutely essential role here. 

After all, as designers we’re operating on the devs’ home turf: CSS land – a hitherto mysterious place, shrouded in thick layers of code, where names are different, the rules are different, and novices are liable to slip up.

Let’s explain:

In Figma, you work with ‘fixed’ or ‘absolute’ positioning of elements by default. This means you can drag elements around a page and place them wherever you want – without this causing layout changes to other elements.  

In Webflow, by contrast, you’re using the rules of CSS by default. This means that elements are positioned ‘relatively’, stacking on top of one another. 

To break out of this system in Webflow, you need to go in and change a particular element’s position to ‘fixed/absolute’. To break out of the ‘fixed/absolute’ system in Figma, you need to set up and use a system called ‘auto layout’. 

In other words, you’re working directly with the web format rather than working with a design tool that gets translated (either by automation or via the dev team) into that format.

And when it comes to how best to design within the rules of the web, we are learning – but our devs remain invaluable consultants.  

What we made with it

Our designer Dean, who had (albeit limited) experience working with Webflow, put together a container template in a matter of days.

This container was then updated by our designers, who imported new brand elements (which had already been defined and approved) into the page. 

We’re really happy with the results – and so are the Glance team. (By the way, we worked closely on this with Glance’s Director of Brand Performance & Marketing, Nadine – who was an absolute joy to work with.)

You can check out the brand guidelines Dean and I created using Webflow here: 

https://brand.glance.net/

Some upsides of working with Webflow

1. We can design, build and publish using one tool

This means that – at least when we’re working on small scale projects without the budget for a fully fledged web application – we can make a cost saving by publishing directly to the web instead of handing back and forth to our Dev team.

2. It’s more powerful and flexible for prototyping than design software

If you want to include animation and interactive elements in a prototype, Webflow is the way to go. 

But more importantly, what you see in Webflow is what you will see when the site is pushed live. 

Webflow has responsive design logic built into it, so you can see exactly how the content you’re designing is going to behave on web and mobile – if, for example, a headline is going to run over or snap awkwardly. 

This can’t help but productively inform our design decisions. After all, it stands to reason that the more we understand the medium of the web, the more considered and appropriate decisions we can make when designing content for it. 

3. It potentially streamlines our processes

At least, that is, for contained pieces (like brand guidelines). 

Once we’ve built a template, redesigning that template with another client’s branding should be quick and easy. This will save us (and our clients) time and money.

How it affects our whole agency

We should be clear: we’re only just getting started with Webflow, and we’re not using it regularly.

Under normal circumstances, when one of our designers receives a brief they won’t be going into Webflow to create it. 

They’ll continue to use Figma (or something like Figma) – although once their (let’s say) Figma wireframe has been approved, they may possibly go to Webflow to build it. 

While Webflow helps get our designers into a Dev mindset – helping us understand stuff like native positioning, layout structure and responsive design – it’s still a new and weird world for us that it will take us some time (and a few more tutorials) to become comfortable with. 

And besides, Webflow isn’t just a Design ‘thing’. Far from it.

We want the capabilities we have as an agency to be reflected in whatever we build with Webflow. 

Therefore, every part of our agency needs to think about how they’ll work with Webflow. 

For example:

• Dev will need to make sure the end code is good code. (After all, there are right and wrong ways of doing things in Webflow – just as there are right and wrong ways to Dev.) 

They’ll need to check that best practices are adhered to and the code is clean. They’ll also check stuff like accessibility, code output bundle size, performance, SEO, interaction optimization… 

• Writers will be able to use Webflow to see how their copy looks in situ – on desk/laptop and mobile, maximized or minimized – and edit it accordingly. As with our designers, our writers will undoubtedly benefit from understanding the medium they’re writing for as they write for it.

• Performance will need to check everything makes sense from an SEO and UX perspective. (With brand guidelines, for example, we need to make it easy for users to find, download and use the branded components.)

What’s in it for our clients?

It boils down to simplicity and freedom for the client when it comes to controlling content. It’s insanely easy to update and edit stuff without having to come to us or deal with managing the WordPress backend.

Webflow’s ‘Editor’ feature is configured to the content and removes all of the usual complexity you get with dashboards of other content management systems – meaning the path to what you want is a short one.

That kind of intuitive control likely results in better content – which is what it’s all about. Especially if you’ve recently rebranded, you want that stuff to sing. Guidelines needn’t be mechanical and prescriptive. Sure, you want them to be functional above all – ensuring consistency and cohesion within your brand – but they’re also an opportunity to exude a lil’ mojo and get your people excited.

Talk to us about it

So there you have it: that’s been our experience with using Webflow (so far).

If you’re a designer – or a digital creative of any kind – who’s worked with Webflow, we’d love to know what your experience of it has been, and what potential you see in it. 

Drop us a line or leave a comment below.