Using Client-First to streamline Webflow projects

Abstract shapes and rectangles representing good organizational structure

Stop me if you’ve heard this one before - you’re months into a website project and then it comes time to hand it off. The designer and developer gives your team the website and you’re excited to get your hands on it…

Except now you don’t understand what your website does. The classes have strange names, you aren’t sure where to make edits, and you’re stuck asking the same designer or developer for help again because no-one else would be able to understand it.

It’s a struggle facing a lot of my clients, which I think is unacceptable.

There comes a time in every designer’s life where we just can’t think of a good name for a section or class. And then we end up naming it something like “TM-2” (what does that even mean?) or worse, not naming it at all. Then Webflow comes up with a catchy name like “Div 748”, which, well, doesn’t tell a whole lot.

And it’s worse for tech-savvy clients who like to make edits themselves. If they lack the understanding of what sections go where, it’s needlessly stressful to work on it. A confusing structure makes it difficult to add new pages, or work with other developers and designers later down the line.

That’s why I (and tons of other Webflow developers) use and love Client-First, created by Finsweet - a leading Webflow agency. But what is it?

Let me tell you what it is, and why it’s the best.

Client-First methodology

Finsweet says it best:

“Client-First is a set of guidelines and strategies to help us build Webflow websites.”

It has 6 goals:

  1. Create an organization system for any project in Webflow that can easily be understood.
  2. Enable developers and designers to work more efficiently in Webflow
  3. To set a strategy for class usage in the project
  4. To standardize a core structure implemented across all pages
  5. To create Webflow project that is scalable and easy to manage - for you, designers, and developers
  6. Finally, to help anyone understand what the project does and what it’s about

Personally, the last bit is what excites me most - Client-First is all about naming everything in a human, natural way. When you enter Webflow Designer and see the project, everything should make sense to you. This means you can make changes yourself with a little practice- imagine that! However, this also ensures new developers or designers can get up to speed with the project quickly.

A Webflow developer, client, or any person should be able to understand what a class is doing based on a class name, even if that person has no experience with Client-First. - Finsweet
A text-size-regular and text-color-green class being applied to a paragraph on Webflow
Example of client-first utility classes being applied to a paragraph

The smart naming convention is the biggest learning curve, but once you master it, it makes any future project in Webflow so simple.

But let me cover my other favourite aspects!

Client-First enables stress-free handoffs

Client-First takes all of the struggle out of handoffs. First of all, it’s a free framework that has excellent documentation, and it’s quickly becoming the industry standard. This means that anyone can jump into my projects and start contributing, and vice versa.

And if they aren’t comfortable with Client-First yet, the documentation is so clear and simple that it’s still easy to understand what’s going on.

The client-first docs from the official website
Extensive docs from Finsweet

This also allows my clients to work with other Webflow designers if they wish too! I believe a huge part of freelancing is not trapping your clients in with you through subtle means.

But no matter what, using Client-First means I hand a well-structured website over to my clients, who then have the freedom to bring new developers and designers in later.

Faster and flexible building

Let’s revisit one of the goals of Client-First:

“To standardize a core structure implemented across all pages.”

Following a framework means you reduce the amount of decisions or choices you need to make, which reduces your mental load. Using Client-First helps me spend less time thinking of class names and more time designing and developing.

A card design built on Webflow with the classes applied to each element

And when it’s time to hand off the project, I can provide a style guide that lays the groundwork for future scalability. By following that, you can ensure all of your pages are have the same structure, no matter if you have 10 pages, 20, 50, or more!

I once explained Client-First to my friend as such:

Basically, it’s a huge bonus to everyone involved in the project - developers, designers, and especially the client. (No surprise where the name came from!)

Give yourself a smarter website

It’s no secret that I love Webflow. Client-First is just another cherry on top of an already amazing cake.

A huge benefit of Webflow is that it’s easy to create beautiful, converting websites that don’t skimp on functionality or depth. And with Client-First, it’s easier than ever to make Webflow websites that are both easy to use and simple to build upon.

Is your website more trouble than it’s worth to manage? Maybe Client-First and Webflow would be the right solution for you - chat with me and let’s see if I can help you!

Profile picture of Félix Meens, founder of Webflix.

Félix Meens, Webflix

LinkedIn | Twitter