How to set up a Webflow project?

6 simple steps to make it scalable and easy to adjust.

Webflow has become a holy grail for designers all around the world. You can create a portfolio by yourself, implement the animations you always dreamed about, and charge your clients double or triple! - that’s what all are speaking about, but what has not been mentioned is… you only need to change your mindset. 

Taisa Sevenard, UX/UI designer and Webflow developer in Freeport Metrics describes her discoveries worth knowing before you start working on the Webflow project.

Unless you are bonded to the frames of the design system, working in Figma is not so demanding for filing structure and organization. A lot of designers say they skip naming the groups, elements and often create UI Kit on the go or even at the end of the design process. Also... the bad news is that this approach just won’t work when using Webflow. 

At first, I was thrilled when freeportmetrics.com went live after we implemented it in Webflow with my colleagues, but then we were met with major inconveniences when the adjustments appeared. It revealed that our project was just not adjustable and not scalable. One adjustment caused an issue on 2 other pages. The spacings were attached to each class and …. In the end, I just decided to restructure it in a more user-friendly way. Here are some of the lessons I learned, which can help you to avoid these mistakes and make your project nitty-gritty from the very beginning. 

1. Create a Style Guide page 

Have you heard about the “Draft Page?” This is a page, which is not published but is used to store some valuable information for your project such as “Style Guide”, components, and whatever you need. 

To create such a page go to [Pages-> Create a new page] and in the dropdown menu of the button “Create” choose “Save as Draft”. 

Congrats, you are ready to start! 

02. Set the Typography structure 

The thing you do on the go or at the end of the design - setting the typography styles - is required to be set from the very beginning in the Webflow. 

In most cases, it will be the very first class you will apply to the text, and it should be unified. There are 2 steps to creating this. You should start by styling the HTML tags and then create the CSS styles. I will describe both concepts below. 

HTML tags

HTML tags are crucial for users with screen readers to navigate the system. In layman’s terms, it just helps to create the structure of your page. Providing an understanding of where H1 and where is the next subheader - H2. 

Usually, there is only one H1 on the page. Several H2 - which are Sections headers and multiple H3, H4, H5, and finally H6. 

How to set 

Select “Heading” from the “Add” menu and select the proper HTML tag in the pop-up. If you want to change it later, select the proper Heading, click on Settings on the right sidebar and from there you’ll find it under Heading type. 

Styling 

It’s so convenient  to create default styles for your Headings as it simplifies and unifies the usage. You can apply HTML tags styling to your H1-H6 from UI Kit. 

You should apply styling to global classes (such as “all H1 Headings”) to avoid using classes. 

To do so select “Heading”, choose a tag, click on the style selector, and choose “All H1 Headings”. Set up your type font, size, and line height and you are done. 

Very important! Default Webflow settings provide some integrated paddings for the Headings and text. I recommend deleting those as it will complicate your estimation of proper spacing between the elements on your page. Instead, use the spacing system I will describe later. 

Why do we still need CSS?

You might think that HTML tags are enough, but unfortunately, you should duplicate your style in CSS styling. The reason is its usage.

Heading type - H1-H6 is an HTML tag for creating the structure of the page. You can’t put H3 after H1. There should be H2 between them. HTML tags are mostly responsible for the logical structure of the headings. However, CSS styling is more related to text styles. CSS is responsible for the look of the heading. With this, you can have the H3 CSS style following the H1 style.

So you might have cases when your HTML tags structure is H1>H2>H3 where the H2 HTML tag will be styled as H3 CSS style and the H3 HTML tag will be styled as H6 CSS style. That’s why you need an additional system of CSS styles even if you have already applied styles to global classes of HTML tags.

CSS Styling 

CSS styles are responsible for how the elements look on the page. It is set up with classes and subclasses in Webflow.

To add a class, just choose the Heading or text field. Name your class as you have it in the UI Kit or Design System, and style it as necessary. 

For body texts, I would recommend naming the styles starting from “text-...”. For example “text-tag”. 

In your style guide, I also recommend you have a description of your styles with the name of the font, weight, size, and line height. It will help you to identify the font which for some reason was not assigned to the styles in the design. 

In the end, your typography system should look somehow similar to this: 

Responsiveness 

As you can see in our system we also have the weight and line height in brackets. These are the dimensions for the mobile versions. 

I hardly recommend setting it up right away when you are creating your typography system in Webflow. Just switch to the mobile/tablet or big screen version and apply proper styling. 

In this way, you won’t need to think about it during the creation of the adaptive versions of your website. 

03. Create Color swatches 

As in Figma in Webflow you can create the colors library and easily apply colors to the elements. I recommend importing all your colors in the very beginning so that you have them available at any time. 

To do so, select any text, vector, or div block. Scroll down to the typography color, fill in the color or border color, click on the color, input the HEX value, click plus, and insert the name. 

Voila! You are done! 

04. Set Spacings structure for the elements 

I learned a harsh lesson about something quite basic, and that is you should avoid anywhere possible to apply spacing to the elements directly. Instead, you should use classes with proper spacing. 

Benefits 

• You can apply different spacings subclasses to the same element class (like H2) without changing the initial class. If you implement a 24 pixels margin directly for the H2 class, you will need to create a whole new class for the H2 with a 32 margin. In the classes specified spacing you just need to delete the 24 px margin subclass and apply 32 px. H2 class will stay the same. So if in the future you need to change the H2 styling it will apply to all H2s with different spacings. 
• You can see which spacing is applied to the element by the class name. You don't need to dive into the Spacing section. It’s really handy when you see some mistakes in the placement or the alignment of the elements. 
• You can scale the spacings values consistently for mobile devices. For example, you want 32 px to convert to 16 px on mobile. By having a separate subclass you can style it once and it will apply to all the 32 px spacing subclasses throughout your project. 

Structure description 

My recommendation is to use the FinSweet approach for creating the spacings system. 

The idea is to create descriptive, but not numbers-oriented classes, which describe the name (margin), direction (top/bottom/right/left), and relative value (small, x-small, medium, large). 

It is beneficial not to have numbers as they can vary from project to project or even you can change it later in one project. 

I usually use the basic FinSweet template and adjust the values to the concrete project. 

I start by creating the table on the Google doc where I specify all the values and then transfer it to the Webflow Style Guide page, where I put div blocks with classes applied, names of the classes, and descriptions. 

05. Set the page structure and spacing for the sections 

Here I also recommend following the FinSweet approach which I found cleverly organized. 

The idea is that you are using the wrappers with proper spacing classes which provide the scalability and ease of adjustment. 

After creating the “page wrapper” and the “main wrapper” which you don’t style, create a “section wrapper” with the section name. Usually, you won’t need to style it as well, but for example, you may need it to set up a different color for the background. 

“Padding global” - is a unified system for the left and right paddings of the whole page. It stays the same for all sections, header, and footer and it’s easily adjustable if you change your mind or adjust it to different screen sizes. 

“Container-[size]” allows you to set up several container sizes and alignments for your project. Some content should be centered, some stretched to the full width - this class helps you to achieve the desired effect. 

And finally “Padding-section-[size]” helps you to set up top and bottom paddings for the particular sections. Here you also can have 2 or 3 variables to use accordingly. 

This is mostly all about the structure of the page. I am thankful to FinSweet for the useful tips. Their system provides true scalability, adaptability, and ease of use. 

06. Set the Body typography 

Last but not least, I would like to recommend that you set up the Body before you start to work on your project. 

It might be obvious that you should style the Body background color to achieve the desired effect, but a lot of beginners skip the typography settings which can cause mistakes in future and you don’t know where they come from. 

I recommend setting the class with typography settings equal to your body text and color. In this case, the default settings for your text block will meet the requirements of the style you need by default. 

Was that too much information? Well, I felt the same when I just started to learn these practices and had only 1 week to ramp up with Webflow. Nevertheless, I highly appreciate your interest and willingness to learn. Webflow has a powerful community and in that, lies our strength. 

Always ready to help via Linked In 

Sharing my discoveries on Instagram