How I approach Webflow Projects in a Fast Way

Back in 2018, I came up with the frustration of not having control over my designs. I then tried to find solutions, and the only thing that I knew was the “not-so-technical” side of WordPress, which I didn’t like, and I’m not skilled in doing.

I stumbled upon a video by Ran Segal when he was filming vlog-style content on youtube. He then talked about a website builder called Webflow and immediately tried it around.

This new product promises clean code, which is the problem I had with a WordPress website I created before as it was so slow in loading. It also promises the designer to have control over designs completely and offers more flexibility than its contemporaries.

I got hooked on it immediately and tried it out. In an instant, the whole world opened up for me. I now have the power to do these websites without the help of other developers, no offense to my developer friends, which I could not afford to learn extensively at the time.

Fast forward to today, I’ve been using Webflow as the main No-code/Low-code development tool for all my website design and development projects.

It was a good journey, but it was a long and hard one, and up until today, I had problems with the tool that can be solved with trials and errors (and lots of Googling and Youtubing and most importantly support of other people and friends).

To be honest, Webflow is not perfect. I had so many problems with it in the past which sometimes enables me to explore other options.

One problem that I have is while Webflow promises to be faster in development than the regular design-to-development process, sometimes it just takes more time to develop stuff if you don’t know how to be more efficient with it.

I have been a slow worker, always taking time to do things and losing focus on the way. I could not stand sitting down for hours in front of a computer, as I am more on the active side. Speed became important for me in doing things.

I am the type of person that needs to get everything done while I have the energy and focus to do so.

I also regard myself as a “lazy” person, and up until recently, I had the epiphany to accept this weakness and turn it into a strength.

I decided to share the process that I do for Webflow design and development that I find efficient and fits my “lazy” personality.

I have excluded from the list below common pieces of advice such as the use of shortcuts, use of templates, because either they are already given or they will take up money.

I did include stuff that resonates with me and things that I use all the time with minimal use of my resources as much as possible.

Use pre-made Webflow frameworks
Styleguide (but not too much)
Design everything first
Arrange your assets in folders
Photoshop first, Webflow Compress later
Duplicate sections, duplicate classes
Have your layout classes

#1: Use pre-made Webflow frameworks

The one that I’m using now is Finsweet’s client first. I like the rationale behind it and the thinking that went through. Kudos to Joe Krug and the team on this one for helping many Webflow developers.

However, as I have been a power user of the framework, most of the time I break some rules and make my naming conventions and ways of building.

I think it is really up to each developer’s style on how they want to approach the building process and not to get caught up with the set guidelines too much, to the point that they hinder the fast delivery of the product.

Here is the link to the ClientFirst version that I use.

#2: Styleguide (but not too much)

Whenever I use Client First, Most of the time I always start with a style guide.

I start with the typography as this is the core of each Website. Once the typography is set, I move on to colors and other buttons.

I only focus on the following foundations:

Typography
Color Palette
Buttons

I make sure that I don’t get bogged down with the style guide and start with the building process as soon as I get all of my foundations in place.

A style guide is exceptionally useful for me if I get lost in one class, and I see the need to style a particular class across the website. I immediately go back to the style guide to fix this.

#3: Design everything first

In my 5-year journey with Webflow, I experimented with lots of stuff to make life easier while developing Webflow websites. One of the things that I tried to experiment on is a three-way battle of doing things:

Design everything first, develop later
Develop immediately and design along the way
Design important pages and then develop them immediately

As of the moment, I find the first one – designing everything in Figma first and then developing in Webflow the thing that’s working for me because of the following reasons:

I find that there is a certain flow when I focus only on design, and then focus on development.
Design is more about experimenting with stuff on a canvas that enables more freedom to move things without worrying about classes, semantics, etc.
Development is more on building the design, without the worry of being in the ideating design ideas

Even if I am keen on quality, I could feel that my workflow is more smooth flowing when I nail down the design first.

#4: Arrange your assets in folders

Recently I got the chance to partner with an agency whose main focus is SEO. I am not an SEO expert, but I know that if you want to rank your pages in Search Engines, the pages must have the main keywords that they are trying to target. This also means that the assets’ filename on that page e.g. image assets — must be named with the target keyword included.

It was then I realize the power of arranging the assets in your folder. You could rename them instantly and could view all the assets used on that page.

Even if an image or a graphic is being used on another page/in another folder, I (sometimes) copy-paste them to the folder. This way I could still rename them accordingly.

You may be probably thinking, isn’t that going to be double the file size? Not if you...

#5: Optimize assets in Photoshop first before compressing in Webflow

This is not only a time saver, but it also saves you from the file size as well, especially when you have two images that are the same.

I use Affinity Photo first to reduce the file size of the images to less than 300kb.

Note: Sometimes I don’t do image optimization especially when I see the file size of the image is already below 300kb. I just have them converted straight into Webflow

Afterward, I drag the assets to Webflow, and then I compress them. Which turns them automatically to the webP format, which is a trend to use these days for Web development in general. It saves space which in turn will produce good site speed and good SEO.

A bonus that webP does is that other competitors could not copy the images you use on your website. :)

#6: Duplicate sections, duplicate classes

Before I use to create components of section templates that I did. This is okay and is also useful, but I find it more efficient for me to just duplicate the previous section.

This saves me the time to detach instances and build on the previous classes that the section already has.

I also duplicate the classes inside the section. Before I use to delete the whole thing until one day I brushed on my basics by watching youtube videos and found out that you could duplicate classes.

#7 Have your layout classes

Layout classes are useful for me because I can reuse them multiple times.

An example of a layout class is “verti-1” (which means that it is a div layout that has 1rem as row gaps).

I could duplicate this class if, for example, I want to have a vertical div layout that has 1rem as row gaps).

I could have the choice to have a variation of these classes without creating any combo classes. If I want the same 2rem row gap but would like to align it into the center horizontally, I then duplicate the “verti-2” class and name it something like “verti-2-center-hori”.

You may be wondering why I don’t use Finsweet’s Client First system instead. The answer is I do use it, but I want to be more flexible, and having classes and combining it with the Client First framework is a good reliable method.

Mix things up.

While It’s nice to rely on frameworks and other ready-made resources, it is also great if you know how to navigate around the limitations of these resources and create your own thing.

The beauty of our industry is that there are no fixed methods of doing things. There are certain guidelines for sure, but it is still up to our creativity how we could be more efficient.

—

This article is from a newsletter that I send out every week that shares my Web design and development life, as well as inspirations, reviews, and everything that I could think of, which I think provides value. Sign-up if you need this type of content each week!