Getting started with the Client-First methodology on Webflow

Hello community!👇🏾

Developing a Webflow site is one thing, but developing a Digicalidad site using the Client-First methodology, is the guarantee to put online a well organized site.

In this article we will review the advantages of this method and the important steps to get started with Client-First with a no code Webflow project.

1. Benefits of Client-First Development

• Develop to have an optimal SEO architecture
• Explicitly name the elements to have a clear structure and logical organization: 

→ which will allow a good understanding for each developer of the agency or another agency, or customer who will benefit from a training when delivering his finished website: universal language

• Accessibility via a comprehensive resource:

→ good news, if you are in the process of perfecting your English or your level is low, know that the Client-First V2 in French Version is now available! What!?

No more excuses for not using this methodology!

Indeed, to answer a need of the French Webflow community, our team of developers(Thibaut & Florian) has translated the Client-First content existing only in English. We are proud to collaborate with Finsweet and to share with you these resources that will allow you to better understand and start today without fear!

2. Test Client-First and you will adopt it!

By joining Digiteam, my goal is to become an expert Webflow developer.

So I resume learning the no-code Webflow tool with good practices!

I realize that by using this method when designing an application. The management of the platform will be easier thanks to the style system that benefits both clients and developers:

• Create a solid base, ready to evolve
• Create quickly, without losing quality
• Encourage developers to be rigorous
• Deliver a product that can be easily managed and understood by all, whether within the same agency or by another, if the client wishes to change.
• Create a web project that clients can manage from the "Designer" mode

3. Some Tips for Creating Your First Webflow Site with Client-First

1. Immerse yourself in the +++ documentation, to assimilate and understand the names used to build a Webflow project.
2. Analyze the free and cloneable Templates from Digidop Academy > pleasure to offer :) and the free Templates from Finsweet. You have a lot of examples to get a feel for the structure that is identical in every Webflow website.
3. Analyze your Figma model that you have previously developed(free training Digidop Academy). This will allow you to have a concrete idea of the project with the styles to be given and the content
4. You can choose a free Figma template to get inspired by a design or simply to practice
5. Clone on Webflow the Client-First template
6. Adapt the style guide of your new project: The style guide page is important because it lists all the elements of the project that we will need and to which we will apply a style.
7. And you'll have to go for it! Develop, develop and develop again!

4. Which Client-First documents to start a project with the Webflow tool

Client-First Highlights

Here is a non-exhaustive list of important Client-First points to understand, to have a solid foundation:

• Introduction
• Classes strategy 1 - Class strategy [Part 1].
• Core Structure strategy
• Sizes and rem - Tailles et rem
• Typography strategy - Stratégie typographique
• Spacing strategy - Spacing strategy
• Utility class systems - Utility class systems

A method applied at Digidop and a guarantee of quality

To start my Client-First learning, I opted for redundancy with landing page type web design, in order to fully integrate the methodology and be fluid in my web development. I take care to add relevant classes to organize my work. The second step will be the creation of a multi-page website.

With or without code, web development is a skill that you acquire with practice!

This Client-First method will allow you to create a well-structured website and thus an optimized and performing website.