5 things a designer should look at before jumping into Webflow

We get it. You are excited to be starting your first Webflow project. Be it for your own portfolio website, your first day as an entrepreneur, or your first step to becoming a Webflow expert.

Here's a tip: Take a step back!

Define your design process as a Webflow website designer.

The art of organizing and preparing is one of the key factors to being a designer.

Set up a reference point for design

The first thing that we would do is to get inspired! There are so many wonderfully crafted web designs out there in the internet.

Some of the websites that we go to find inspiration include:-

1. Awwwards
2. CSS Design Awards
3. Made in Webflow

Take screenshots of sections of the website that you like and try to create that design on Figma and then onto Webflow.

Prepare your Figma File

Our designers always have their Figma files ready with the mid-fidelity mock-ups in place. This allows us to have a clear visual representation of the design before diving into the Webflow platform.

Now, when I say mid-fidelity mock-ups, i meant to say that the content has to already be up as well. The reason why I say this is designers tend to be lazy and just put the standard "lorem ipsum.." as part of their design process. Now, these actions have got to stop. What happens when you put in real content? Can the design then fit?

Once we have our mock-ups in Figma, we open Webflow and compare the two side by side.

This helps me to ensure that the transition from design to development is seamless and that I am able to accurately translate the design into code.

Before this plugin came to play, this was what we had to do.

Now, it is pretty simple with the Figma to Webflow App.

Understanding HTML & CSS

In addition to this, we believe that having a solid understanding of CSS structure is crucial.

Understanding the naming conventions and class structures in CSS allows for a more organized and efficient development process.

Designers who have a basic understanding of CSS naming structures are able to communicate their design intentions more effectively to developers, ultimately leading to a smoother and more cohesive development process.

Google Fonts or Adobe Typekit?

Lastly, we like to make sure that all our fonts are ready, whether they are from Google fonts or Adobe Typekit. In our honest opinion, these two makes us designers spoilt for choice. But whichever your choices are, be sure to not start any Webflow project before integrating your fonts and styling them in accordance to all the different paragraph types.

This action actually saves our designers a lot of time when designing on a Webflow project. This organized approach to font styling ensures consistency and cohesiveness throughout the project.

Website settings

Lastly, these are not to be ignored.

What happens when your website is ready to be launched?

1. Upload your website's favico (I can't believe that a lot of designers forget about this)
2. Optimize your images
3. Integrate any GA4 code into your website
4. Ensure that your forms are working and sending data to your email or Webflow