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:
- Get a sitemap and content from our client
- Design the pages of website inside of Figma
- Get client approval or maybe do some edits and then the client approves it
- Develop each page inside of Webflow
- Adapt it for the different screen sizes.
- 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.
