Skipping the Website Design Stage with Webflow

Introduction

Webflow has a little hidden page on their website about prototyping with Webflow, about avoiding the design team and development team back and forth by getting the designers to prototype a design directly in Webflow. 

In a lot of ways this is true, Webflow is bringing so much more power into the hands of designers and therefore streamlining the process by just letting them develop their own designs.

But one question is still to be answered, can we skip the design stage entirely, and just start prototyping design ideas directly inside of Webflow?

I would say yes we can, and no we can’t. In a way, the answer is a hybrid model, a way that we can save a ton of time by not having to design every single page in Figma before we take it into Webflow, but while also being realistic and knowing that if we start the whole design process directly in Webflow, it’s going to be a bad time. 

First, let’s look go back and look at the typical website design process.

‍

The Typical Website Design Process

The website design process typically looks a little something like this:

1. Get a sitemap and content from our client
2. Design the pages of website inside of Figma
3. Get client approval or maybe do some edits and then the client approves it
4. Develop each page inside of Webflow
5. Adapt it for the different screen sizes.
6. Test and finally launch the website

Now this works all fine and well, but that design stage can take a massive amount of time, and if the design has to be handed off to a developer, then there’s no good solution to this. 

But when the designer and the developer are the same person, when the design doesn’t exchange hands between designer and developer, you can skip a lot of the steps.

Instead, the designer designs just a couple of key pages in Figma, gets it signed off by the client, and then jumps straight into Webflow and designs all the rest of the pages based around the initial designs. Which means all the time you would waste designing each pixel in Figma, you skip. All extra pages on the website are instead designed on the fly when you develop it, based on your original designs.

So while you’re building the website, let’s say you’re working off of content documents from the client, you can look at a section of copy, and straight away develop the section into the website.

How You Can Skip The Design Stage

This option only works if the client knows that this is the process you are going to use so there are no surprises, and as this is a process that I use for a lot of my projects, it’s something I tell clients on the discovery call.

I let them know that when we go through the design stage, I’m going to just design the homepage, or another page or two if it’s a large website, and then do any rounds of feedback that we need to, and then move straight to developing the website in Webflow. 

That way we can cut weeks off the website timeline, and get the website launched faster, which is a big plus to clients.

I use this exact same technique to save time while developing templates. I design the homepage in Figma, build the homepage, and then build the rest of the pages around that page that I’ve just designed. If someone was just a developer and you gave them just a homepage to develop and then told them to design more pages around that style, then they might struggle, but if they were the one who designed the page, then they have the context of the the design choices they already made, and can keep applying those design choices straight in the development stage.

All of this sounds great in practice, but let’s look at an example:

‍

Here is the homepage designed in Figma for my client RescueMetrics. After we signed off the homepage design, I took the rest of the scope of the website, and based it all on this one design.

This saved a ton of time for the client so we could get the new site live faster.

‍

Having the designer champion both the design and development, countless hours are saved in the designing process.