Another short rant on how and why I love Webflow so much. Become a more versatile designer by incorporating this tool into your daily or weekly process.
Preface
The caveat, that I’m only going to dig into a few high-level points. This does not cover the complete set of features you should and can be using with Webflow.
How it falls into my actual workflow may be unconventional to most. Today, I find myself using it primarily for my portfolio, but also as a way to explore and educate myself on how the web works, what’s possible, and what is probably an awful idea.
All that said, I use it for what Webflow is great at — visual development.
No code development (VisDev)
Can’t code, but want to build something? No problem. Have a radical imagination, and not sure what to do with it? Perfect. Dig the DIY concept and design philosophy behind Square Space, yet find it limiting? Wonderful. Enter — Webflow.
For those who know how to move a bracket around, this tool might make things easier for you if you wanna wear a designer hat for a bit and slap a site together. But it’s mostly aimed at seasoned designers looking to bring something far enough to life that it might just checked into your company’s codebase 😎
End result: A hybrid browser WYSIWYG editor that can design and build some pretty awesome shit in a fraction of the amount of time it traditionally would — using nothing more than your mouse, some knowledge of the box model and an endless imagination**
They try to make it easy to engineer a web product the same way you would design one. It has its ups and downs, but overall a great way to build something digital, more visually. I’ve been calling this process, VisDev™.
Apply the same W3 rules you normally would to any web project and you’re already half of the way there. Traditional CSS and JS approaches to animation and interactions also come baked in, but in a way that allows motion and interaction designers to connect with more so than other tools, utilizing scroll and timeline event models in a more dare I say, Photoshop-like way.
It correlates page elements to proper code in a more visual and digestible way, communicating the same message to both UX and Eng parties working on the project.
Testing, managing and deploying your projects are really just a few hot clicks away, and pretty free or cheap given the subscription package you end up with.
Staging Environments
Build and run pretty much anything from any browser you can log into. It’s pretty easy to create any environment you want, without setting up a server or anything of that horrible nature.
Toggle between design and staging by publishing your site from a little toolbar. This makes it easy to troubleshoot a handful of devices and scenarios. Test and then commit changes simply by publishing or downloading your code to your preferred hosting platform.
Micro-interactions & Asset Management
Quickly and iteratively practice large to small scale interactions, motion design, layout patterns or even a CMS powered web store. With insane video support and a pretty efficient asset manager (still needs some love), it’s a super effective way to build up, manage and run a project right from a browser.
Control transition values and even customize your own. Nano-level input between easing, sizing, color and several other properties, again, make it super fun, simple and educational to create a detail oriented and humanized project from scratch or from a world of templates built by a massive community.
Cross-platform Support
These projects work amazingly between devices. Their support and breakpoint editor is pretty on point, and seems to get better with every update.
From orientation control, to a responsive viewport slider, there are several ways to test your work in a range of lenses. It’s a great way to learn how things respond to a design and how mobile to web relationships stack up between assumptions.
Issa Community
Webflow is backed by a massive community of tutorials, clone-able projects and inspiration. Unlike Wordpress, Square Space or dare I say Drupal — there’s more to learn, browse and consume than any other group of web enthusiasts.
Design → Engineering is 🍰
They make it pretty easy to compile and download your code should you want to share a folder of files and assets directly with a developer (or anyone).
Should you want to host directly, well they support that too. It’s a one stop shop for everyone from portfolio seekers to shop-hungry consumers.
Keeping up with the flow
In closing, I’ve found Webflow to be a much needed part of my workflow, thus I want to thank my nameless friend who introduced me to to it only over a year or so ago. I got super curious on a long flight, gave it a shot, and haven’t looked back.
Note: Webflow (to me) is not just about building a website. It allows you to build on to the web — a vast place of crazy shit. Should you choose to create a site, so be it. Should you choose to create something more, then so be that as well. I’ve just found it to be so much more than a website builder.
It’s a place to practice being a designer. A place to practice editorial or grid design. Practice a family of states for an upcoming library you need to contribute to. Practice telling a new kind of story in a new kind of way. Practice something outside of your comfort zone. Practice, honestly, anything..in Webflow. It’s that capable.
Anyways, thanks for reading — I’ll leave you with a few resources to keep you excited re everything Webflow (mostly stuff I bounce between). There’s so much more out there and so many more reads/tutorials on nearly everything and anything Webflow related.
