How Webflow transformed a city planner into a web designer

By:
Read tme:
Web Design
Webflow

Right off the bat, yes I'm currently a contractor for Webflow. But my story is different from your standard sales pitch; I don’t use the tool because I got test for Webflow, I test for Webflow because I used the tool. I started contracting for Webflow in 2017, but my journey began 4 years earlier when I created my first account. That was back before there was a CMS or Webflow University but even then I knew that it was the tool for me.  And I haven’t stopped using it since.

The shutdown of Adobe Muse, took everyone by surprise and has put many in the same situation I was 4 years ago. With that in mind I’m going to discuss why I started using Webflow and how I knew it was something special. Hopefully the story resonates and helps you better understand not only the tool, but also the journey to finding an effective web design product. So let me start by setting up the picture of where I started and the circumstances that drove me to Webflow.

Webflow.com

In Search of a Solution

Before I was a web designer I was an urban planner. During that time I saw lots of websites in need of varying degrees of updating and/or additional functionality. The type of sites that leave you wondering “Where’s the contact form?” or “Are there really no business hours? Does this actually exist?”. I understood the problem and I wanted to help, but I was intimidated by where to begin.

In my transition from Planner to Web Designer I started with tools like Wix and Squarespace which were good, but the onset of imposter syndrome was undeniable.  I had a vision of the end product, but not the technical skills to build that vision - the requirement for designers to know how to code was (and still is) a widely held sentiment. This seemingly left me with two options, become a coder or hire a coder.

I had picked up a little bit of code through online projects in the past, but it mostly left me feeling overwhelmed and intimidated.  And the “hire a coder” route seemed risky at such an early stage in my new career. How would I find a good coder? How do I evaluate them? What if I get ripped off? How would I pay them? With so many doubts I had to sideline that option; it was too big of an unknown to overcome. I’ll admit that heading back to my comfortable (if somewhat unsatisfying) career as an Urban Planner crossed my mind more than once.

But I didn’t quit. A stubborn determination I wasn’t aware that I had until this moment couldn’t accept that all roads to web design were closed. So I started my hunt for a tool that did what I needed it to do to allow me to design visually, and ideally find a way around the Developer nightmare fuel that so many WYSIWYG editors are known for: bloated code. In short, I was in search of something that I wasn’t sure existed, but desperately needed.

And I guess I spoiled the grand reveal back in the first paragraph, but after testing several tools I found what I was looking for in Webflow. It’s a true visual development tool, it’s a professional’s tool, and it’s an innovator’s tool.  

Let’s take each of these elements in turn.

Webflow: a Visual Development Tool

I could have cobbled together websites by hand. I put a strong emphasis on ‘could’ because as I mentioned before I had only ever picked up a small amount of coding skill. Instead of smashing my keyboard trying to write HTML, CSS, and JavaScript, I wanted to spend my time improving upon me design, strategy, and communication techniques so I could differentiate myself from other freelancers.

Luckily for me, turning a design into clean frontend code is where Webflow does the heavy lifting. It does this by bridging the gap between design and code with a one-to-one abstraction above the HTML, and CSS  layer. That’s a fancy way of saying that it has an awesome User Interface for direct CSS and HTML manipulation. So when I add a div and a class I’m getting industry standard, predictable code. Being introduced to this type of visual development was like the first time I signed into Netflix and knew I was never going back to Blockbuster. What’s Blockbuster? Exactly.  The day I signed up for Webflow was the last day I worried about missing a closing tag or whether I had the right selector in my code. Visual development is here and only getting better.

Webflow's UI

If I hadn’t already been convinced that Webflow was the creation tool for me, soon after signing up they announced the upcoming launch of their CMS. I was skeptical at first, I couldn’t see how a CMS could fit into Webflow’s ethos of visual development. Taking this visual environment and applying it to databases and dynamic sites couldn’t be done. But the first time I loaded the Beta version of the CMS I was blown away. Now I could design and build my websites visually, AND connect them to dynamic data.

That’s the day Webflow earned a customer for life.

Webflow: a Professional’s Tool

In any industry imposter syndrome can be a problem.

No one enjoys feeling like a fraud. And imposter syndrome is just that - the worry the you’re not as effective / knowledgeable / experienced / competent / etc / etc / etc as one’s colleagues.  It makes you feel as if you’re constantly playing catch up and simply “faking it without ever really “making it”.  

At the start of my web design journey imposter syndrome made me feel like I wasn’t a “real professional”.  It was uncomfortable, but more importantly, it was affecting my ability to succeed.  The tools I was using made me feel like I was just playing the part of designer because the quality of code I could produce (and therefore the site features I could offer clients) was limited. This subsequently prevented me from promoting my work and communicating effectively about the skills I did have.

To get out of this imposter-slump, I needed to know three things:

  1. I can do a quality job.
  2. I can effectively communicate what I have to offer.
  3. I have tools at the ready to help accomplish the first two.

The first two points are all about experience. I needed to jump in, find my niche, and learn how to attract the clients I was looking for.  By comparison, finding Webflow and addressing point three was a breeze.

Remember the UI I mentioned earlier? When I started using Webflow there was a lot to get used too. Like any new tool, there was a learning curve that can be a challenge at times. But when things start to click it’s a real source of delight. I started to see a relationship between my design choices and the code they produced. My understanding of HTML and CSS grew so quickly that any doubts about the quality of my work became distant memories.

And as my confidence grew, so did my design skills. Time spent worrying about how to tell a client “sorry, I can’t do that” turned into time spent learning exactly “how to do that”.  I decided to try my hand at learning other languages so I could take my Webflow code on the road and hook it into other CMS systems, from ModX to Shopify. I went from using Webflow because I didn’t need to know code, to using Webflow as a way to discover and utilize code in ways I hadn’t considered myself capable.

Through this learning process, my ability to communicate improved in turn. When I talked to developers I could explain where and why I used flexbox or the HTML tag main rather than a div. When working with designers I could talk about visual hierarchy, typography and colour while we reviewed the design live in the browser. And with product owners, being able to justify the cost of projects from a design and development perspective was literally money in the bank.

Webflow: A Innovators tool

Innovation comes in many forms. There are so many cool features that I’ve never seen implemented the way they are in Webflow.

A few of my favourites include:

  1. A visual Flexbox UI
  2. Site Search
  3. CMS
  4. Interactions
  5. The up and coming E-commerce.

But the innovation that really struck me when I joined the Webflow community came from the designers who use the tool. Day in and day out I was, and still am, amazed by the level of innovative design thinking. Design studio sites like Heco, furniture websites like Jerom, UI designs like a responsive dashboard or even smaller design experiments like a ball bouncing animation.

HECO

It was soon after joining the Webflow Forum that I was jumping on calls with designers far more talented than myself to discuss complex design and layout challenges. I was soon browsing the forums in my downtime, looking for questions that I could help answer to pay it forward on behalf of those who helped me get started. This combination of innovation and community created a positive, vibrant, and professional space for me to develop lasting relationships.

The people using Webflow, from casual users to incredibly successful web designers, are building a hub of ever expanding creativity within the digital space that I am proud to be a small part of.

Webflow: A life changing tool

All of this is to say that Webflow changed my life.

It opened doors, windows, and all manner of spaces for me to build my career in web design. It helped me create my business, helped shed the weight of fear that accompanies a career change, and enabled me to connect with an active community of talented people.  

So if you’re a designer, developer, or innovator, I encourage you to take a look at what Webflow has to offer. Whether you’re on the search for an alternate from your current design tool or if you’re just starting out, the Webflow family - myself included - is excited to see what you build next.

Alex Nichol
Alex Nichol
Vancouver BC, Canada

I'm a web designer and digital strategist. By day I'm a QA analyst for Webflow, which means I search for needles in a digital haystack and then convince devs to make my needles a priority. After hours I read, write, and talk about the web, freelancing, and remote work.