Why I ditched Sketch for Webflow

I’d like to make it very clear that I work at Webflow, which does mean you have every reason to think I’m biased. Truth is, I chose to change my workflow because I love using Webflow and I think it’s a great tool. Also I’m writing this on my couch at home for funsies.

Over the last few years in the web design community, there has been more and more chatter about leaving traditional design tools and designing right in the browser, coding the HTML, CSS, and JavaScript by hand.

When I used to code by hand, I would often also design straight in the browser. I’d go through the process of writing all the HTML, CSS, and JavaScript by hand (with help from Stack Overflow and friends of course) and skipping the whole process of making static mockups.

It’s nice—you get to make the real thing, and see how it really looks in the browser along with how it scales and flows. Not only do you get to design the real thing, but you get to design the systems and organization behind it all, too.

Writing code can be really fun. Not very many things can keep me awake until 4am as consistently as trying to figure out how to fix a bug. I kinda miss that.

But, as a designer, I’m extremely limited by my knowledge of code. My designs were influenced and limited by what I knew how to do, which excluded many great technologies that were beyond my abilities. The only thing that I could code consistently well was static websites. I never thought I could build what I do now using Webflow.

To contrast, my previous job was at a large digital ad agency, where design and development are strictly separate roles. Designers aren’t allowed to touch code, just Sketch and Photoshop.

I spent about 2 and a half years at this job powering through the tediousness of designing mockups, and updating the desktop, tablet, and mobile versions with every round of client feedback. (my record was 43 rounds 🎉)

It’s the worst.

Hours and hours and hours went into making these static images that I had to then handoff to a developer so that they can rebuild it. Nearly every project was already running behind at this point, so the dev team was often forced to cut some corners, let alone have time to respond to feedback from design. It’s a big goofy mess.

And the published designs didn’t really feel like mine anymore. I’ve been lucky enough to have the amazing opportunity to design pages that received millions of visits a day, but as a result of this broken process, I often wasn’t proud of the work. It’s like a book that got made into a movie—it’s still good, but not what it was supposed to be.

Today, in the last few months especially, these traditional design tools are increasing in complexity so much (ex: constraints, components, dynamic data, flexbox) that they’re about as complex as building the final product in Webflow.

The new process

Before starting at Webflow, I had no idea what it really was. I assumed it was just another website builder that writes, “spaghetti code” that isn’t for real professional work.

Webflow feels like a design tool for creating and manipulating code, without writing any of it.

Webflow is the best of both design and development. Like coding, I get to control and build the real design, with semantic code, responsively, with classes, dynamic CMS data, color variables, percentages, px/%/vh/vw/em, and animation, except I don’t have to write all the code by hand, or constantly reference Stack Overflow.

Like traditional design tools, I get a great interface, symbols, keyboard shortcuts, a layer panel, and I get to see what I’m making on the canvas, live.

The drawbacks

With all these benefits come a couple drawbacks, though. A big one is the dissimilarity between these traditional design tools and Webflow. The biggest differentiator being, that you can’t just select an element, and drag it around.

Something we don’t do as a company, is sacrifice code quality. If, as a user, I was able to grab an element, and drag it around anywhere on the page, the code that would be written to allow that to happen would be an absolute mess, AND it still wouldn’t be responsive.

There are currently web design tools that allow you to drag elements around anywhere on the page, and create broken websites (some of said companies have used Webflow for their own work instead, no joke). And these sites aren’t just broken, it ignores: the DOM, responsiveness, content flow, SEO, accessibility. Pretty much everything that makes a website a functional website.

Honestly, I want to be as objective as possible here, but I can’t think of any other real drawbacks. Umm…

You’re not limited by just what Webflow can accomplish in the interface, either. There are at least 5 ways to add custom code, so if you do need to add your favorite experimental CSS property, or add in JavaScript or whatever else, you can.

If you’d like, you can even just export the generated code (which is better than the code I used to write), and do whatever you want with it. Many people have started to build out the whole front end of apps with Webflow and then hook it up to their backend upon exporting. It’s sweet!

I don’t miss writing code, and I can now design way way more types of websites than I ever could before, faster. It does look really cool to be in a coffee shop with a bunch of text editor windows up, though. You don’t get that with Webflow.

“But Ryan, there’s no way Webflow is your only design tool!”

You are correct! I use a few design tools for other things, but not Sketch, and I definitely don’t make website mockups in any of them.

A notebook

Remember paper? I do my wireframing and very basic layout explorations on paper before jumping in to Webflow. I often draw icons and illustrations in my notebook before going in to Adobe Illustrator too.

Illustrator

Nothing has the power to create vector graphics like Illustrator (except programs like AutoCAD but I mean, that’s a bit much). Since Ai has crashed on me about 50 times over the years, we have a bit of a love/hate relationship, but there’s still a lot of love.

I use illustrator for illustrations, icons, and logos. I haven’t found anything better, but let me know if you hear of something.

Figma

First off, their multiplayer feature is the future. It makes saving and sending files feel like mailing a floppy disk.

I use Figma for the miscellaneous things. For example, last week, I created a template file for our ads. I defined all the colors and fonts up front, and had the graphical elements built as components. The marketing team was able to jump in and make a bunch of iterations, and while they were experimenting with copy and visuals, I was able to trail behind them, polishing spacing and margins at the same time. Crazy.

Photoshop

We go wayyyyyy back. When I say “wayyyyyy back” I mean that I had Photoshop 6 (released in 2000) on a portable flash drive that I carried around when I was 12-years-old.

I use Photoshop for, guess what… editing photos !! The only other time I use it these days is just hacking stuff together or polishing screenshots and illustrations.

I’ve tried a lot of tools and a lot of processes over the past 10 years. Nothing has gotten me as excited as Webflow, and nothing has allowed me to do better work.

If you haven’t tried Webflow yet, and it sounds interesting, you can make an account and build stuff right now for free. If it doesn’t sound interesting, that’s cool too. ¯\_(ツ)_/¯

If you have any questions for me, I’d love to talk. You can hit me up on Twitter or leave a response below.