The tipping point in my career as a product designer

The tipping point in my career as a product designer

How Webflow proved to be so much more than a way to create websites

When I look back on my career as a product designer, I see one specific tipping point that catalyzed my skill set and allowed me to take a rather large step forward in my career. But before I dive into the details...some backstory...

Humble Beginnings

The year was 2011 and I was spending my Summer working as an associate for a startup accelerator in St. Louis. The atmosphere was infectious and I remember developing a distinct conviction—this was what I wanted to do for the rest of my life—build software that changed the world.

But where should I start?

As a 19-year-old economics major, I could talk you through ISLM graphs, but when it came to startups, I lacked any and all practical skills associated with software creation. My high school coding experience was frustrating at best, so I decided that I was going to become a product designer. That was what I was going to bring to the table.

So I cracked a version of Adobe Illustrator and started pouring through Youtube tutorials while religiously listening to every episode of This Week In Startups. Progress was slow but eventually I got to the point where I was able to wire up a basic clickable prototype for my startup idea using Flinto (Invision hadn't quite hit the market yet).

Hitting Walls

For the next 5 or so years I continued to pursue startups and improved my design chops along the way, but there was always one element of my skillset that was lacking—developer collaboration.

For someone with 0 technical chops, I struggled to empathize with developers and lacked a basic understanding of how my designs were being implemented. As a result, it was always a battle getting what was shipped to remotely match what I was designing in Sketch.

It didn't matter that my designs looked pretty or even that they solved real problems. As a designer, I was responsible for what made it to production and that was continually falling short of expectations.

I had no idea how CSS worked, what flexbox was, how to leverage a design system, or even how a developer would build something using a grid. So often times what I was lobbing over the wall didn't make sense and I was borderline clueless.

The Breakthrough

After years of trying to at least fake responsive design using Wix, I finally got fed up and decided to look into this thing called Webflow that I kept seeing people rave about on the Twitter bird.

My initial reaction was elation, followed promptly by "wtf" as I quickly realized this was miles off from the drag and drop experience I was used to with Wix or Squarespace. Thankfully, one of my best friends had some frontend experience and was able to talk me through CSS at a high level as I feverishly typed notes in Notion. That document served as my reference point for the next month as I dove headfirst into all things Webflow.

As a first project, I actually re-created a single page portfolio site that we were currently hosting on Wix for Thrive Studios. Looking back on it now, there are a million things I would do differently, but more important than the final output was the progression:

I was learning how designs actually get built...

With every website I create in Webflow I learn something new about HTML/CSS (and even Javascript triggers to an extent). But the coolest part? I didn't even realize it most of the time! Because I was learning the Webflow editor, not how to actually write code or understand CSS syntax.

Most importantly... I was experiencing firsthand all of the walls that a frontend developer can hit when trying to implement a layout, all of the questions that need answering, and how I as a designer can create products that make sense and are efficient to build.

Webflow cultivated developer empathy and an understanding of how I can create products that make engineering easier and ultimately improve what gets shipped to production.

Examples

1. I learned the importance of consistency in spacing

Who knew that changing the spacing around paragraph text requires a separate CSS specification for each unique instance? I certainly didn't... that is until I started changing my margin in one area of a site and realized it changed it everywhere...😳

Improvement:  I now understand the value of establishing consistent spacing values at the theme level, and my brain operates on an 8px grid 100% of the time.

Webflow Spacing Panel

2. I learned how responsive units worked

When developing for web, I am almost always using a 1440px canvas. Let's say I am trying to be consistent in my spacing and always set my components to be 120px from the left edge of the screen. Do I actually mean 120px? Or would I prefer 8%? How does that change at different breakpoints?

Questions like that weren't on my radar at all...

Improvement:  Webflow proved to be a master class in responsive design and I often find myself thinking in percentages when designing for web.

Webflow Margin and Padding

3. I learned about Flexbox

I can't think of a better way to teach someone flexbox than giving them the Webflow editor to play with for a day. Buttons are so much more intuitive than logic or syntax. For quite some time I had no idea what I was actually indicating was flex-direction or justify-content  but it didn't matter! I knew that these things were not only possible but preferred from an implementation standpoint.

This takes consistency in spacing to the next level, because I don't have to be concerned that my cards are an awkward 423px apart. I just have to know that two cards are pinned to the edges of my container, and the middle card is evenly distributed.

If I can do it using the Webflow control panel it must be possible for a developer

Improvement:  I now know exactly which flexbox rules I am intending to use in my designs, and also how those change at different breakpoints to ensure that it is as straightforward as possible for someone to architect my components to be inherently responsive.

Learning Flexbox with Webflow

4. I learned how animations actually work

Before Webflow, I didn't have the language to explain to a developer how I wanted my designs to behave or even how to describe various states. But I specifically remember the moment where it clicked and I was able to make a button float on hover in a way that felt delightful.

Now I'm at the point where I feel like I can make anything do whatever I want in Webflow, which is not only empowering from the standpoint that I can bring website ideas to life, but also because it influences the way I design products. I know what is possible, how it could be implemented, and I am able to clearly communicate my ideas to developers.

Something as simple as "Transforms" and "Transitions" became a verbal asset in my designer toolkit.

Webflow Transitions and Transformations

Improvement:  I rarely find myself asking "is this possible" and am able to more accurately predict where something falls on the scale of impact vs. effort as a result of having built many complex animations in Webflow. Additionally, I also have the language needed to communicate the intentions of my designs.

.gif showing a Menu Animation created in Webflow

Without Webflow, I wouldn't have felt confident suggesting a panel animation like this menu. But now that I know how to build one, it radically opens up the possibilities for what I am able to conceptualize.

What's the point?

Webflow is arguably the most empowering piece of software I have ever used as a designer (don't worry Figma...you're a close second). For the first time in my journey I've truly felt like I can build anything that my mind can dream up. But that's not why it's the tipping point in my career...

Webflow is a master class for designers to understand how their designs will ultimately be built.

It taught me the logic behind frontend development—how to think about product and the role my abilities as a designer play in the overall equation.

Even without being able to write a line of CSS, I know HOW frontend styling worked, and it redefined the way that I think about page layouts, component architecture, responsive design, etc. Something as simple as understanding flexbox is a game-changer for a young designer.

I believe that the more I explore coding in general, the more thoughtful I become as a product designer. There's an added intentionality in my Figma layouts, and I enjoy knowing that my designs don't just look pretty but they make sense and are equally efficient to build.

And now that I have been exploring development in my free time, the basics catch on QUICKLY because I already understand what needs to happen—it's just a matter of figuring out a bit of syntax. Actually, I still write CSS visualizing the Webflow control panel in my head 😅.

So I guess my challenge for younger designers is this:

Rethink the way you approach Webflow. It's more than a website builder. It's a potential game-changer in your journey to becoming a well-rounded product designer.

(and you can create some epic sites along the way ✌️)

Say Hello.

Questions, thoughts, ideas... I love connecting with new people so don’t hesitate to reach out.

👍
Oops! Something went wrong while submitting the form.

Connect.

Let's do the social things.

Made with
in Denver