Why Webflow is our favourite tool for prototyping
Webflow is a tool for designers to build websites using a visual editor, with no code. It’s amazing how a designer with no idea about coding can build such professional websites with the freedom and flexibility that some high-level design programs offer. But today I would like to talk about the main use that we give to Webflow: prototyping.
Usually, our workflow for new projects starts with a prototype. We listen to users’ and/or clients’ needs and we proceed to create a prototype to analyze and discuss them. That way, everyone involved in the project knows which the starting point is. Although we used to work with Adobe illustrator, photoshop or XD, Webflow has become our preferred tool for prototyping for the reasons I will convey next.
It’s a perfect way to show the user flow of the digital product or service. We don’t just design the screens of it, the prototype is so real that you can navigate as it would be the real thing, clicking on buttons, text, images or any other element. With this closeness to the finished artifact, we avoid any misunderstanding and both the user/client and the developer understand perfectly the navigation flow.
Moreover, it’s the best way to communicate with developers about UI. As I’ve explained, in the past we delivered the designs in other media or formats and the doubts and questions about the UI were much more frequent than using Webflow. In addition, the developers have shown that the UI result they obtain in production is closer to the prototype compared to previous projects.
Nowadays almost all projects, if not all, have to be responsive. With other design tools, it was really hard to design every single screen in 2–3 different dimensions. With Webflow, apart from being much simpler because you have to change each element only once and not in every screen, the developer can see how that element behaves — not just the appearance — in each view.
Another benefit: it’s great and quite easy to show micro interactions: hover effects, how elements show/hide with some actions, movements, pop-ups, interactions… This is otherwise quite difficult to explain with static visual documents or words. A big plus!
With Webflow prototyping, sharing information with clients/users and developers has become an easy task. We just share a link and update it when something new is done. This way, everyone can follow the creation process and can give a shout to the designer if they see something is taking the wrong turn. For us, it’s very important to have a visual starting point to make sure that we are talking about the same thing, discuss what’s done or how new functionalities will fit. And, talking about clients’ feedback, in the context of creating solutions for them, they really like to see the product/service with their corporate colors and branding. It’s hard to get it right the first time so Webflow comes very handy as we can play with colors, images, typography and logos in a very agile way.
To finish with a relative downside, I would like to add that Webflow has a steep learning curve. As with everything, it’s a matter of practice. To overcome this, Webflow offers great learning resources (videos, help guides, user forums) for everyone to master and improve their craft.
In short, a very much recommended tool for prototyping software products. We warmly encourage you to give it a go.
Do you use Webflow for prototyping too? What other applications do you find helpful?
