Webflow how to 4x your development time in 6 steps!
4 Minute Read
August 16, 2021
Webflow is an amazing product that has helped me cut my development time down. What used to take my 4 weeks now only takes me one week! This is to build a fully functioning, mobile optimised and CMS website!
Webflow can seem daunting when starting out, there are some common pitfalls that will slow you down!
Here are 6 things to do that have that have helped me increase my speed 4x!
The first thing to create in Webflow is your style guide. This was one that I learnt from Ran Segall at Flux. At the start of your project create a hidden page, that contain all your styling for fonts, paragraphs and normal elements you will use you, e.g. a div container, 2 columns layout, 3 columns etc...
This will save you so much time in the long run trust me!
Webflow StyleGuide
I have to admit when I first used Webflow I would style each class randomly or even worse sometimes not even name classes, just let it auto style them and end up with 'div-45' it was a disaster!
A great benefit of Webflow is being able to reuse classes! Use this to your advantage! Style once correctly and reuse over and over again!
Webflow Classes
Now you have styled your classes correctly on your first page. Normally your homepage will be the biggest and a lot of the elements on this page will be reused across the rest of the site. Take the time to make sure it's mobile optimised and set up correctly.
Once you have made these sections e.g. CTA sections, footers, navbar. Turn these into symbols!
Take advantage of global styling. Create all of your h1-h6, paragraphs and as many things as possibly in global styling, so it automatically sets it as that when you place them onto pages
Now you have made these symbols you can easily drag and drop these onto other pages and save yourself a lot of time building out.
Webflow Symbols
With flex box its possible to achieve nearly any sort of custom layout within Webflow! I know that sounds crazy but its true! Before Webflow having to master these layouts would be extremely difficult. Webflow makes this processes much more simple with making it visual! Mastery over flexbox is a great skill to have! And will help you
Walk through this guide, FLEXBOX CHALLANGE it will explain all of the functions of Flexbox. And challenge you in an interactive test so you actually understand how it works!
Webflow FlexBox
Webflow FlexBox example
Webflow has a powerful CMS. You can create dynamic custom content, typical use case scenario's would be for making a blog, teams page a portfolio but really the sky's the limit! With it being customisable you can create some really interesting things!
Something I have learnt is make sure you map this out before building out the CMS! Think about the fields you will need and how they will connect to the pages.
Think of collection pages as template pages you can reuse.
Webflow CMS
A great way to speed up and improve your layout building is to learn from the master!
With Webflow showcase and Webflow templates you have the ability to view a lot of these designers projects in the Webflow dashboard! I'm not at all saying copy or steal there designs! But have a look around, see how they have things laid out.
Do they style there classes differently? Do they use padding in an interesting way? Why have they styled it like this?
Webflow Showcase & Examples
Webflow has drastically improved my development time for website builds. I hope these tips can help you increase your turn around time too!
