The web design process before and after Webflow
Early in my career, I had several opportunities to work on web design projects as a freelancer — without using Webflow. So when I stumbled on Webflow, it completely changed my web design process and the way I thought about projects and execution on the web. So for all of you who haven’t discovered how transformative Webflow can be, I thought I’d share my experiences making the switch.
Since I wasn’t a professional-level web developer back then, I had to resort to using template sites for the vast majority of web-based projects I worked on.
Don’t get me wrong: working with templates can be a smart and efficient use of your time. But again, this is back before I discovered Webflow, when working with templates meant me hacking away at site structure, plugins, and odd stylesheets, struggling to get another designer’s work to meet my project’s needs.
After meeting with a potential client, I’d find myself full of grandiose ideas for the site composition, animations, interactions, and design. Then I’d spend countless hours trying to find a site template that fit, say, 90% of the ideas.
Then, I’d re-evaluate my threshold and lower my standards to 80%, then 70% … and then, finally, I’d just settle on a template with (hopefully) 50% or less of the required design and functionality baked in.
This process would become discouraging very quickly, and I’d end up having to go back to my client with a long list of requirements that all meant extra hands, dollars, and time.
Basically, I’d end up saying, “I’m sorry, but I don’t know how to build that yet.” Which often meant losing the client, or, at best, a less-than-satisfied client.
After Webflow: welcome to the blank canvas
Webflow, on the other hand, gave me complete creative freedom.
I could kick off a project with one of the Webflow Templates, or I could start from scratch with a blank canvas. For many artists and designers, there’s nothing like a blank canvas. It’s a playground to test all of your ideas and build anything visually. Now, with Webflow, I discovered that I could build whatever I’d envisioned — on the web, with interactions, animations, and seemingly impossible designs, all without writing any code — and it was super-easy to keep responsive.
It blew my mind.
Once an idea hit me, I could go ahead and sketch it out with pencil and paper, or hop right in to the Webflow Designer and start building out a quick mockup, prototype, or a high-fidelity design complete with animations. And once the design was ready, I could press publish and send a link right to my client to take a look at the site design.
I can honestly say that Webflow changed my life.
From uncertain web developer to AWWWARDS nominee. Not too shabby.
Before Webflow: I was “WordPressed”
Almost every client of mine wanted a WordPress site. But typically, they had no idea what they were asking for. They’d insist that their friend or family member had a WordPress site and that they too had to have a WordPress site.
My clients wanted WordPress sites because, given their limited knowledge, they regarded it as the solution to the problem of needing a website. But they were coming at it from the wrong perspective, because they don’t need a platform, they need a website. And Webflow made it possible for me to deliver what they needed, not what they thought they wanted.
After Webflow: I could offer the right solution to the problem
As a web designer, it’s your job to gather requirements for your projects and then provide solutions to your clients. Once you and your client have a good sense of what’s needed, you offer them solutions.
Always take your clients’ suggestions and ideas into account, of course. But after all is said and done, your clients come to you as a subject-matter expert for a solution. So it’s your job to deliver not the solution they think they want, but the solution that meets their real needs.
Back then, I turned many projects down simply because I didn’t feel that I had the “chops.” I wasn’t super-confident in my cross-browser or -device development skills. With the ever-growing device and screen size complexities looming over me, it was easy to get discouraged.
More than once, after emailing a client to let them know about a design update, I got a reply with a screenshot of a glaring design issue. Usually, it was due to a missed vendor prefix, my failure to double-check Can I use? to see if the web technology was safe to use for all browsers, or some inherited style that displayed oddly in IE10 while working great in Chrome.
Pro tip: QA your website!
Today, I highly encourage the use of tools like Browserstack and having a few of your teammates or friends do a friendly quality assurance check on your sites before sending them off to your client. I’d also recommend adding a QA phase to your process, where you go through and fix browser-related issues once the site is close to launch.
After Webflow: I’m confident in my web design and development skills
The reliability that Webflow has offered me as a web design and development tool over the past few years has been astounding.
I don’t have to worry — or even think — about vendor prefixes. Nor do I have to refresh my browser every two minutes to see if my newest lines of CSS broke the whole project.
Webflow offers a true “what you see is what you get” experience. As a visual designer and developer, I can reliably build out responsive, dynamic, and interactive website designs. The work I’m doing in the Designer is actually a live preview of the site from the browser I’m using (either Chrome or Safari).
Both my production speed and the quality of my site designs improved dramatically after just a few weeks of using Webflow. My site build speed is about 10 times faster in Webflow than in other web development platforms or when hand-coding.
Before Webflow: project timelines and site designs had varying levels of predictability
Back when I was stuck hacking WordPress themes, project timelines varied so much that it became difficult to give clients realistic deadlines. Most of this variability came from template-constrained site builds, or the process of finding a developer capable of converting my site designs into a WordPress template.
On more custom site builds, after completing the design in Photoshop or another design tool, I found myself handing off the creative files to a developer with my fingers crossed, hoping that they’d deliver a site that was at least 85% compliant with the original site design.
They’d often come back with questions about functionality, and we’d find ourselves caught in a feedback loop, just trying to nail down how an interaction was supposed to work. So, I decided to learn more about web development — just so that I could communicate more thoroughly with the developer! All of which felt like a ton of time wasted when I discovered that I could have just sent them a live Webflow prototype of the site up-front.
I used to spend hours just trying to get site designs to work. And that meant I lost a lot of time that would’ve been better spent on perfecting the user experience or user flow through a site.
After Webflow: hello, reliable timelines!
Once I got more comfortable in the Webflow Designer, site builds became second nature, almost effortless. I could picture the site design, then break it down into div blocks or pre-made widgets and style each component accordingly. If a div block or dropdown element was needed during or after a design iteration, it was no longer a problem for me to hop in and adjust the site in just a few minutes.
Now that design changes were no longer a problem to implement, I could spend more time on other site details to deliver a more well-rounded experience. And still provide a concrete deadline I could easily meet.
Before Webflow: I had to say no, far too often
Saying no to a client can be a very difficult thing to do, especially as a freelance web designer who wants to deliver a full digital solution. But in my WordPress template days, I’d have to say “let me check with my developer” or just say no to certain requests — way too often.
And what happens when you tell a client “no?” A less-than-satisfied client. Or, worse, a client who’d stop asking for new features because they’d lost confidence in my capabilities.
After Webflow: I could say “I got you”
Sometimes (okay, many times), a client would send me a design request that would take me hours or even days to make. Now, I can often make the update within minutes of reading their request. It feels wonderful to reply to a client that the update has already been pushed to their site — 5 minutes after their request hit my inbox.
Now I can say, “I got you.” with all the confidence of a young Dale Cooper.
Now, I know what you’re thinking …
Some of you might be wondering: If you weren’t that confident at coding, why were you selling yourself as a web designer?
I guess you could say that I was more of an aspiring web designer — and a struggling web developer — before Webflow. When I found Webflow, I thought that it was too good to be true, until I started tinkering in the Designer.
In an agency setting, before I knew about Webflow, I worked with many super-talented designers and developers, and I also spent time building a few sites for friends or businesses. Not only was I able to observe and manage the process, but I also was able to adopt and adapt certain processes into my personal web design workflow.
I learned a great deal from my colleagues, my friends and of course from googling every issue that came my way until I found a solution. But it wasn’t until I really understood how to build out a site from start to finish in Webflow that I began to think of myself as truly a web designer.
Life after Webflow: more creative freedom, better client relationships, less chaos
Of course, Webflow has positively impacted my web design process in myriad other ways. But the key points for you freelance designers out there are:
- Webflow gave me freedom to design websites my way — without having to code
- I’m no longer required to build a site from a template
- My design and review processes have sped up dramatically
- I now have the power to say “yes” to requests which used to fall into the “let me check with my developer” category.
I’d love to hear about how Webflow has changed your web design process, so please feel free share your questions and experiences below.
Originally published at webflow.com.