What Does it Mean to Build “Client First”?

For client-facing developers, the shift from project-thinking to system-thinking is critical. Client First is a style system and CSS naming convention that aims to shorten and standardize the website design process to make projects more consistent and predictable. 

What is Client-First? 

Client-First is a style system developed by Finsweet that aims to simplify the design process and facilitate the building scalable and functional websites. Think of it like a Lego manual for building the perfect Webflow site – a set of instructions that, if followed, will consistently produce what you are hoping to produce. The exciting part of following a Client First design approach (much like the exciting part of Legos) is when those structures are used to create more complex and original projects for clients. 

In some ways, Client First can be approached like a checklist. Here are the things that you must do each time for it to be a complete project. Many aspects of Client First are about consistency: consistently naming classes and consistently adding Alt Text to images. Often, implementing these strategies on one site will streamline their application to the next, providing you with a design process that can become a selling point of your business. 

Here are some of the key things you should know about Client First design. 

Why you should use Client First  

At a high level, the goal of using a client-first model is to standardize the development process such that it makes rapid iteration possible. Instead of building your site from scratch, it imposes a design structure that is consistent across all projects, making it easy to introduce new concepts. 

This is the biggest reason why you should use Client First design on your website. Especially if you are in the business of making websites for other people, building without any distinct process is like trying to assemble a house without any blueprints. If you have to relearn the best practices each time you start a new Webflow project, your ability to scale and iteratively improve is greatly diminished. 

Past that, it is also a matter of care for your clients. Confusing or inconsistent design means that future issues or updates have the potential to be very costly. Clients come to web designers because they don’t have the time or knowledge to do it themselves. Therefore, it is the goal of the designer to bridge that knowledge gap through the structures and processes they provide. 

The four elements of Client First design

The Client First model can be broken down into four distinct elements (although many are overlapping in some way).  

Classes

Using and managing classes in your Webflow project forms the base of the Client First strategy. In short, a standardized naming convention for classes across your projects allows for repeatable and scalable style choices across your projects. It ensures consistency, predictability, and avoids downstream complications as your project becomes more complex. 

In the world of web design, one of the most popular naming conventions for classes (and the one most consistently used in Client First projects) is known as BEM (Block, Element, Modifier). Here is what that means: 

Block: ‍

This is the independent, top-level component inside of which all sub-components are placed. These could be things like headers, navbars, sections, containers, or cards.

Element:

These are the sub-components, or parts, of the higher-level block. For example, in a block called card, you might have a card__title class for the title component of the card. The double underscore (__) is typically used to distinguish elements. 

Modifier:

These are variations of blocks or elements that you might use in different contexts across your project. For example, if you have a card block that contains a card__title element, in situations where it is larger (when focused, for example), you might use a card__title–large modifier. The double dash (--) is often used to specify modifiers. 

If implemented consistently, you should be able to tell exactly what a component on your site does purely by reading the way it is named. 

Utility Classes 

In addition to these component classes, utility classes are also used for reusable styling across your site. These single-purpose classes each perform a single styling function directly on the component, reducing the need for large stylesheets that apply to your entire website. 

For example, if you want to modify the card_title above, you could give it the class card margin-top-32 padding-24 text-center directly in the Designer, eliminating the need to style the text elsewhere.

Developers who use Client First will create a dedicated “Utility” style guide page (you will often see this in templates), onto which these utility classes will be attached to divs with the name of the utility classes. If making these, each utility class must only perform one specific styling task (for example, don't create one that is margin-top-16-text-cent). 

The goal of these is to centralize your styling, as opposed to relying on individually editing specific elements in your project. 

Structure

The second facet of Client First web development is structure, or more importantly, the groupings and hierarchies you implement between elements in your project. 

There are several levels to this concept, the most basic of which relates to the way that elements are grouped within the Navigator panel. Related elements should be grouped within container divs or sections that represent distinct components or features. These gropings should be hierarchical and easily understandable – like how a table of contents organizes a book. 

For example, if you have a component that uses the Webflow CMS to populate a table, all elements related to that table should be contained in a container div or section that relates only to that table. Each element in that list item should be hierarchically self-contained as well. The goal of these structures should be to make it for you or future developers to drill down on how everything fits together. 

Naming Conventions

Just as BEM gives you a clear strategy for naming classes in your project, so too does this need for clear naming convention apply to elements in your page. If you see elements called “Div Block 1” and “Dive Block 23” in your project, you’ve probably not been paying close enough attention to the things that you are adding to your project.

If you have a card class, and you want to add a photo to it, call the div that holds that photo something self-explanatory and direct, like “Card Photo Container.” Using plain English here can make it easy for clients to understand exactly what they are doing, and placing it within a clear hierarchy will make it easier to understand how those functions relate to one another. 

Modularity 

Finally, the structure of your site should employ a modular design, meaning that you should break down your site into reusable components. These components should be self-contained (and so non-contextual) and easily reusable on different pages of your site. This modular design should also make it easier to impose a hierarchical design on your site because each component is entirely self-contained. 

Collaboration 

The “Client” part of the title Client First means that your goal should always be focused on making the work that you are doing decipherable to an audience who might not be especially familiar with web development. To accomplish this, it’s important to focus on two things: documentation and style guides. 

Documentation and Comments 

If your project is using custom code, documentation (either explicitly or via comments in your custom code panel) is essential. Particularly if your website uses complex interactions via custom code, explaining what the code does and how it works is essential. 

If you are using an HTML embed <!--Comments should look like this --> 

If you are changing the CSS, /* Comment will look like this  */ 

And if you are adding Javascript to your site // Single-line comments look like this 

/*

and multi-line comments

look like this

*/ 

Get comfortable using each of these methods to explain in detail what you are doing (especially if you are AI-generating code and you aren’t entirely sure how it works yourself). 

Style Guides 

As stated above, projects that scale cannot rely on the visual editor for the design of their components. That’s why a style guide is so important for Client First development. Style guides allow designers to make style choices in one centralized location, which can then be applied to all pages (or future pages) consistently. If you have a client that cares about the brand identity conferred by their website, as they should, a style guide is critical for your website. 

Here is a great guide on the process of making a style guide. 

Performance  

Finally, Client First means that the websites you design are optimized not only for design but also for functionality. Often an afterthought for no-code designers, highly-performant sites make explicit decisions that enable fast loading speeds, better ranking on search engines, and more accessibility for potential visitors. 

This is where things can get complicated. Images, for example, should be optimized for your website. Images that are compressed (without sacrificing quality) will load more quickly. WebP, JPEG, or PNG have different use cases. Responsive images (using the srcset attribute) will automatically serve different sizes to different devices. Lazy loading will only load images when they are in the viewport, increasing performance. These are all considerations you must make when designing your website. For a good resource on images specifically, click here.  

This attention to detail applies to a lot of things. Webflow interactions should be used sparingly. Custom Code can bog down your website. A good Client First strategy is one in which nothing is done without considering its impact on the performance of the website. 

SEO 

One specific element of performance that clients care about is the ability of that site to rank on search engines. These are often checklists of things that need to be done (many of which Webflow does the heavy lifting for). These can be things like meta-descriptions and title tags for search results to mobile-friendliness. Again, Webflow will guide you through most of these, but designers often glaze over the details without realizing how much they impact the effectiveness of the site. Client First design means taking the time to optimize all of these things. 

For a great guide on optimizing your Webflow site for SEO, click here. 

Accessibility  

Accessibility means more than just making your site easier to navigate for people with disabilities – it's a fundamental part of how site crawlers judge the quality of your website. This is why a structure-first approach to design is important. The more semantically navigable your site, the easier it will be for non-human entities to figure out what it's about. Always use Alt Text for images and ARIA Attributes for the purpose and state of elements on your page. Let interactive elements be accessed with the keyboard. Focus on having sufficient Color Contrast on text. 

Again, Webflow makes it easy to have all of these things, but too often, they are overlooked by developers who are more focused on making a website look nice.   

The Client First page structure 

As stated before, the goal of Client First is to impose a hierarchical structure on the design of your website. Because of this, there is a pretty standard way that these websites can look. 

Almost always, you will begin with a page wrapper, oftentimes which has its own style components (usually determined in a style sheet). Then, depending on what your website does, the nested pages inside of it help to distinguish specific functions on the page. The main wrapper contains all of the components, sections break those components down into smaller pieces, a padding-global will position those components on the page, and then containers will house the specific things that effect the display of the component (like headers or interactive elements). 

This structure might look like: 

Page wrapper 

> Main wrapper 

>> section_home-header 

>>> padding-global

>>>> container-large

>>>>> home_header_component 

Thinking about your site like this will allow you to focus on a more flat design strategy, in which higher-level structures make very clear what lower-level structures will contain. When designing your site, it’s great to collapse unrelated same-level components in the Navigator so that you can focus on what you’re trying to build at that moment. 

How to price Client First work 

A Client First system can transform the way you price your web development products, introducing more modularity into the services that you offer. Instead of selling the complete design process, you can offer successive degrees of customization, which corresponds to the stage of the Client First design process that you are offering. 

For example, if you are offering a website templating service, you could offer an easy-to-understand and well-structured page to clients. The quality of the template can be validated through its adherence to the principles of Client First. 

Alternatively, if you offer a more full-service design company, the website design can be incorporated into the pitch you make to clients. Instead of saying, “I will build your website,” you could offer to onboard clients into the structure of the site and involve them in a more iterative design process that builds on top of that structure. 

The beauty of Client First is that it makes the services you are offering more tangible and, therefore, easier to attach a monetary value to. 

Examples

There are many examples of websites that were effectively built with a client-first approach. Here are some of our favorites. 

Ticketed CMS Template by Ty Hughey 

This template is a great option for people who are interested in seeing how CMS-heavy websites can integrate with Client First design. It employs a clear hierarchy structure, which makes dealing with a complex data structure (events) much easier. The aesthetics of the website also reflect the modularity of Client First, with each section independently achieving a specific goal on the website. 

MONDAYS Coffee by Patrick Johnson

I think this is a good example of a Client First website because it demonstrates how complex a website can become once you have a clear understanding of the structure of the site. Each animation requires a clearly defined relationship to other elements on the page – and at no point does it sacrifice performance to achieve that. I also just think this is a really great design for a coffee shop.  

Free Webflow Wireframe from Finsweet

‍

In case you were more interested in an example of what a Client First website looks more generally, this wireframe from Finsweet itself is a great starting point. It lays out everything you need to know about how to name CSS classes how to create a style guide, and gives you a starting point from which you can build whatever site you want.   

The Future of Client First 

As with all things in the web design industry, the introduction of AI has the potential to transform the way Client First is applied to projects. As an AI-enabled web developer, the more standardized and reproducible you make your design process, the easier it is to implement some kind of agent-based strategy in which much of the design process is automated. There are already many tools that can help you do this.

For example, Galileo AI is one such AI-powered UI design tool that lets you generate UI designs based on text prompts. While many Webflow developers fear that tools like this will make them obsolete, it is clear to me that the best Webflow developers of the future will understand how to use tools like that to enhance their design skills – and then package them in an easy-to-use interface like Webflow. Focus on a Client First design will help smoothen that design.   

Resources for Learning Client First

If you are curious about learning Client First design, here are some more great resources: 

Finsweet’s Official Client First Page 

Hubsport’s Beginners Guide to CSS Classes 

1-hour Client First Overview for Webflow by Pierluigi Giglio