Why Webflow will make you a better designer

Original article posted here on 25th August 2023

At the risk of sounding overly simplistic, things function on the web through code; lovely front-end code, back-end code, databases and all sorts of other magical things that dev teams create. A designers role is to create a visual layer for a human to interact easily with all of that code and magic. So, understanding every aspect of a digital product's life-cycle is really important for a designer if they want to get the best from their designs. (Just to note that when I mention "designers" I'm talking about UI designers, UX designers, product designers and basically anyone who sketches on a napkin).

I've never been a code wizard and although I've always known enough to inform my designs or take part in one or two of the old, "no sorry, that can't be done" conversations, I've never been one of those ninjas who can see a website or application spring to life from their lines of code. That's probably one of the reasons why I've always had a natural affinity for WordPress. I run Pack the Pooch which is built on WordPress and on my own virtual servers. Being able to spin up a new virtual server with an instance or instances of WordPress, add security features and a shiny new theme in a matter of hours is great. And, to boot, many of the WordPress themes today are not really themes at all but drag and drop editors where you can pretty much design whatever layouts you want. I say, "pretty much" because there are still limitations and I've never seen one give total control over design and layout. WordPress can also be a bit slow and clunky as the drag and drop editors are actually built into the theme. That's a lot of code.

My old portfolios

When I began planning out my seventh portfolio I thought first about how I would build it. WordPress would have been the easiest option. Spin up a new server, grab a fancy theme from Envato and copy in content and case studies. Job done in a week or two. But that seemed like cheating. I'd always designed my own portfolio and, the theme, although I could tweak the hell out of it, still wouldn't be my own creation. Even if I used a WordPress drag and drop editor theme, everything would be getting just a bit too clunky and cumbersome. WordPress was a hard pass. The other option was to code it myself. Not entirely beyond the realms of possibility, but I knew my coding skills wouldn't allow me achieve the design I wanted and I also knew it'd probably take way too long. I wanted to spend time on the design, content and the visual magic rather than code. So, where to next? Webflow.

I'd tried Webflow when it first arrived on the scene sometime around 2014 or 2015. I remember thinking at the time, it was good but not great. I knocked together the landing page I was working on quickly enough but I wasn't blown away by its features or maybe I just didn't see its potential. I dusted off my old account, purchased a premium plan (once I got over the initial shock of the price) and started tinkering around. Immediately, I could see how powerful it had become.

Webflow is awesome, there's just no other way to say it. Webflow combined with Figma, Photoshop and Illustrator is a juggernaut of unstoppable design awesomeness. I won't go into detail about how it works, suffice to say, it's an online tool which allows non-coders build responsive pages, templates and websites via drag and drop elements, while giving total design control. It offers hosting of that code or export of clean code for self-hosting. There is a steep learning curve even with a basic understanding of code. Webflow seems to be aimed at designers (or indeed coders) and while it is technically "drag and drop", there's a little more to it than that. It isn't drag and drop in the same way that Wix or some of the other more consumer focused offerings are. But, if you're a creative who thinks visually and has an understanding of code and how pages and digital products are put together, then Webflow will absolutely help you learn more about code in a friendly and visual manner. If you don't know anything at all about code then it'll be a tougher slog and I'd suggest learning the basics of front-end code as you play around with Webflow. In any case, Webflow is a great way for designers to either get to grips with code or to improve upon what they already know.

Let's dig a bit deeper into how Webflow will make you a better designer.

Webflow will help you learn coding visually

There is a debate almost as old as the Internet itself, one I've been involved with more times than I can count - should designers know how to code? Every so often articles pop up with titles like, "Are you even a designer if you can't code?" or, the resident in-house unicorn will start conversations at lunch break about how important it is for designers to know how to code. The problem is, articles and statements like those can be very damaging to really great designers. I have worked with, and managed, incredible people who can code and those who can't. I've never had issues with either. As previously mentioned, having a strong understanding of how apps and the web functions is important but how much of an "understanding" a designer should have will probably be debated until the end of time. I won't get in to that, but what I will say, is that I think there are other things equally as important, like a good attitude (a good designer with a good attitude is worth ten unicorns), good relationships with the dev teams, great design tools like Figma and last but not least, what is to me, a designer's best weapon, Webflow.

I've read Webflow reviews and articles boldly stating that you'll be knocking out websites in a few hours. You won't. It takes time to really get to grips with Webflow and its features. But, if you take the time, watch the brilliant tutorials provided by Webflow and play around with, and investigate some of the pre-built templates (their naming conventions and how they're structured and built) before you start, it will really pay off when you eventually set off building your own project from scratch. Plenty of mistakes will be made and first projects won't be perfect but given time it'll get easier, coding knowledge will improve, knowledge of how things are structured will improve and, as a result, designs will be more informed. It goes without saying that an informed design is a better design.

Once I'd taken a few of the Webflow templates apart and put together some test projects, I began my own portfolio build in earnest. As I set up the header styles, figured out my naming conventions and began putting the blocks together, something became very familiar about the entire process. I was reminded of my early days in "web design" when I was knocking out 800x600 design comps in Photoshop, exporting the PSDs with ImageReady and building out the table layouts with Macromedia Dreamweaver and spacer GIF images. Of course, with the benefit of hindsight, we all know now that was a horrid way to build a website. But, as a designer who'd rather not spend time looking at lines of code, it was great to have the power to build functioning code visually. As I powered through my portfolio in Webflow, building out block by block and testing the responsive breakpoints, I felt empowered seeing my designs come to life so quickly and, more importantly, by my own hand. One of the first things that struck me was the speed at which each page loaded. When I checked the code it was all beautifully perfect. Of course it was, as if written by a unicorn sent from above.

Webflow will help you think like a developer

Getting inside the mind of a developer, now there's a thought that will make designers everywhere shiver. You may not be wearing sarcastic t-shirts and hiking shoes to the office any time soon, but as you become more adept with Webflow, you'll find yourself thinking more during the design stage about how your layouts and ideas would be developed. The main benefit here, is a designer can spot potential issues with implementing their designs before they ever get near a dev team. That's a good thing because every small decision matters. Every minute a developer spends fixing or talking about design problems, is time taken away from other important work they could have been doing. Too many of these will lead to increased frustration. Less design problems means better relationships and more respect. Webflow will help designers understand developers and developers will respect the effort taken by designers.

I remember once, a back-end dev coming to me with a navigation idea he'd been mulling over. He'd made a copy of the main design file, edited it and done a damn good job with the idea and flows. I was shocked and delighted. It's great when colleagues understand your work, what you do and why you do it. After that, our relationship completely changed. He'd earned himself some design kudos and somehow from then on, his design comments carried just that little bit more weight. Now, all designers everywhere, reverse that and think about things from a developers point of view. Webflow peoples, Webflow.

Webflow will level up your responsive game

I can't talk about Webflow without covering how great it handles responsive design and layouts. I designed my portfolio in Figma at its maximum breakpoint only. After having played around for days with Webflow's templates, I decided to handle my responsive layouts in Webflow. Most things you'll read will say Webflow isn't a design tool and, it isn't, but it also kinda is. I was able to make design decisions on the fly within Webflow bopping from page to page, breakpoint to breakpoint and checking every width from the maximum right down to 320. It saved me so much time with the responsive layouts and, decisions made during the "on the fly" responsive design allowed me improve the overall design and layout. Figma was only the starting point and, as the design moved through Webflow, it grew and matured. You'll find yourself becoming less obsessed with pixel perfection and more obsessed with the bigger picture and how the design flows. You'll see your design as a living, flowing thing rather than just looking at it through multiple static windows.

Final Thoughts

I am only just beginning my journey with Webflow but having used it daily to build my portfolio, I'm starting to plan my next adventures with it. I'm excited about pushing the boundaries of what I've learned and already asking the, "I wonder how I could do this", questions. Stumbling across unique websites thinking, "I could absolutely re-create that in Webflow". Great software truly makes me happy. Opening Photoshop for the first time, I knew it was a tool that I would never be without, I loved it and still do. Fast forward to Figma, one of the best design tools ever created, period. I still smile every time I crank it up and go to work. And then, Webflow. Webflow is in the same league of extraordinary software as Photoshop and Figma. In my humblest of opinions, taking the effort to get to grips with Webflow is worth both the time and money and is one of the best investments a designer can make in their career.

Check out Dan Scott's seven minute video below succinctly explaining what Webflow is, how it works and how it fits into a design workflow.