Top 10 reasons your design team should use Webflow

Want to convince your fellow designers to try Webflow? Here’s 10 benefits to get you started.

John Moore Williams
December 19, 2017
Web design

If you’ve made Webflow part of your design workflow, chances are that you’d love to see your fellow designers jump on the bandwagon too. Here’s how to convince them.

1. Webflow lets you work with code visually, in a familiar UI

Webflow's visual web development UI will make you feel right at home.

While code ninjas can practically see a website come to life from their lines of code, most designers have, well, a harder time with that. Even when they know enough code to be “dangerous.”

Thankfully, Webflow does the translation work for you, so you can work in your wheelhouse: the visual world. You just drag our cleanly coded, fully responsive HTML elements on to the canvas, drop them where you want them, and style them using familiar visual tools. So instead of writing a few lines of code, saving, and refreshing your browser, you get instant, visual feedback, so you can work that much faster.

Which means you don’t have to worry whether you got your CSS syntax right. Or if what you’re trying to do is even possible for the web. Or stare at a code editor all day.

2. Prototypes > mockups

‍A prototype powered by HTML and CSS is just better than a bunch of images.

If your team is still producing static mocks in Photoshop, then handing them off to your clients or stakeholders for review … well, it’s time to consider a new workflow.

Producing pixel-perfect static mocks for a variety of screen sizes, dimensions, and orientations eats up tons of time. And clients and stakeholders alike often have a tough time envisioning those static mockups becoming live, dynamic websites. Especially when it comes to interactions.

Now imagine sending your clients and stakeholders not static mockups, not hackily linked screens, but fully functional, live websites. Websites they can play around with on their desktops, tablets, and phones. Websites where they can click a link and watch your brilliant page-switching animation actually happen. Websites filled not with lorem ipsum, but actual content.

With Webflow, you can do all that. And so much more.

3. Webflow makes responsive design 10x easier

Webflow lets you design for every device, all at once.

Remember the last time you mocked up a responsive website? How about that feeling you got when, after days of painstaking ideation and iteration, you realized:

Now I have to do it all over again for the tablet design.

And then, yet again, for smartphone in landscape.

And then, yet again, for smartphone in portrait.

Yeah. No fun, right?

Now, imagine finishing out your desktop design, then clicking a single button to reveal an already-complete reflow of your design for tablet. And smartphone landscape. And smartphone portrait.

And imagine knowing that you weren’t stuck with those reflows. That you could tweak those device-specific designs to highlight different content for smartphone users.

4. Webflow makes it way easier to illustrate your interaction ideas

Good luck explaining this interaction model to your devs.

Chances are, you’ve had some brilliant interaction and animation ideas in your design career. And that you’ve tried to capture how they’d look and feel by switching Photoshop layers on and off, making videos or GIFs, or even trying to bend Keynote to your will. Maybe you even hacked someone else’s JavaScript to achieve the desired effect.

With Webflow, you can leave those days behind. Build your interactions and animations using the same tool you use for the rest of your web design work — without coding, making GIFs, or explaining your vision to a developer.

And when you’re ready for feedback on those interactions, your clients and stakeholders can actually experience them. So it’s that much easier for them to see what you’re thinking.

5. Webflow CMS lets you design hundreds of pages at once

If you’ve ever designed for a CMS, you know you only have to create 1 design for your blog posts.

But when you’re creating that single blog post design, do you fill it up with lorem ipsum; big, beautiful images; and inspirational blockquotes courtesy of Steve Jobs? Or do you design with real content, straight from the keyboards and smartphones of real users?

If you’ve done the latter, you know how valuable building your sites using real content can be. With real content, you:

  • Build real empathy with your users
  • Identify what types of content they actually create, instead of what you think they create
  • Quickly pick up on edge cases
  • Design for the content, instead of expecting the content to conform to your design
  • Notice opportunities for custom designs — after all, not every blog post has to look the same

6. Webflow bridges the design-development gap

If you work with developers to bring your designs to life, you know how difficult and time-consuming that collaboration can be. With you designing static mockups and your developers coding them to match, it’s like you’re constantly starting from scratch. And that’s without all the rounds of feedback and compromise.

But with Webflow, you’re not designing pixels or vectors — you’re designing real HTML and CSS. Which means that you can click a button and hand your devs a clean, semantic version of your design that’s already code. No translation needed.

Even if they need to make tweaks to make it work with your company’s systems or style standards, it’s quite the kickstart.

7. Webflow bridges the design-content gap

Image courtesy of the fine folks at Art Director Vs. Copywriter.

Though far less talked about than the design-development gap, the gap between design and content is often just as yawningly vast and difficult to bridge. (As a lifelong content guy, I know whereof I speak.)

There are tons of reasons for this, but these two rank among the most daunting (and common):

  • Designers tend to outnumber content creators (by a lot). There’s nothing intrinsically wrong with this imbalance, but it does mean that writers tend to be constantly swamped. So instead of working in parallel, design tends to pull ahead of content. Leaving us content people with the unenviable task of fitting our words into layouts we had no opportunity to influence.
  • Content people often lack tools to directly affect designs. When we see a ridiculous typo on the homepage, our only recourse tends to be filing a bug. And hoping a dev cares enough (or has the bandwidth) to make a change. We desperately want to make the change, but often have no way to get it done.

Webflow CMS helps overcome these challenges by empowering writers, editors, and marketers to instantly update content across websites. Not to mention create and edit landing pages (based on your templates) without needing design or development help.

8. Webflow makes landing page creation a breeze

Webflow will make you a landing page machine. If you let it.

Designers on marketing teams inevitably end up spending a lot of time designing landing pages, handing them off to dev, then reviewing the coded results. And even more time lending a hand in tweaking and optimizing landing pages for tests.

Webflow streamlines that process by letting you create Team Templates—shared site designs you can clone with a click, then tweak as needed. And if all that’s needed is a few copy or image changes, you can just publish the page and hand it off to your content editor to update via the CMS.

You could also create a Landing Pages Collection, allowing content editors to create and tweak landing pages by themselves. No design or development dependencies necessary.

9. More design consistency and speed with Team Templates

Beyond landing pages, Team Templates also offer an design teams an amazing tool for building a design style guide.

Easily capture typographic styles, icon guidelines, color palettes, logo standards—every aspect of your visual brand you expect. Your team can even create canonical styles of interactive objects like tabs, dropdowns, forms, sliders, etc., and save them as Symbols.

That way, when a designer kicks off a new project, they can simply clone the style guide, delete elements they don’t need, and — BAM! — produce a consistent design. Plus, with UI elements saved as Symbols, it’s relatively easy to make brand style updates: just edit one instance of the Symbol and every other instance will update to match. Magic.

10. Webflow’s Designer and CMS update automatically

Here at Webflow, we’re constantly working on bugfixes, UX refinements, new features, and other improvements. And you don’t have to do a thing to benefit.

Far cry from the worlds of WordPress and Adobe, eh?

11. Automatic site backups (versioning) and staging URLs

If you’ve used Photoshop — like, at all — you know what a drag losing your work can be. And it only gets worse once you’ve moved your work to the web.

That’s why Webflow automatically creates a backup version of your site every 20th autosave, or any time you press Shift + ⌘ + S on Mac or Shift + Ctrl + S on Windows. If you ever need to revert a change (whether due to a bug or a waffling client), restoring a backup only takes a click.

Webflow also gives you the option to publish changes to a staging URL (yoursiteURLhere.webflow.io) so you can test functionality and review content before you push to the live site. No more broken websites.

And that’s just the beginning

We could go on. But we’d rather hear your favorite reasons for getting your team up and running on Webflow — so let us know on Twitter!

There can be many reasons for a website to exist

I often witness some very unsolicited advising taking place. Some people tend to have premade answers when it comes to websites and more often than not, it comes from a good place. In spite of that, most of them don’t bother to ask anything about the project before weighing in.

left the tomatoes gif
There’s a reason why the tomatoes are on the plate. But how could you know that?

I get it. We all know our stuff. But a website can serve many purposes and unless you were part of the process, you don’t know what it is we’re doing here. And you don’t know the function of every component of that project. So thanks for the input but we’re good.

guy gif

That said, it doesn’t mean that everyone who will give their opinion about our work is out of line. We must always be open to constructive criticism and set the ego aside when it comes to problem solving. I just think we should be smart and think for ourselves rather than to take everything at face value.

Personality disconnect

Just like you, I don’t like to be sold to, and I don’t like when companies try to exploit my inner dumbass. Even though it has become some sort of buzzword, authenticity is what it’s all about — true authenticity that is. It’s what we should all strive for while we make our way through that colossal white noise vortex. 

Perception is the name of the game. We have a say in how people view us, and view our businesses. Even though we can only control a portion of the big picture, it’s our job to nudge that perception to where we want it to be. 

Pro tip: If you’re a brand (or solopreneur), don’t just find another brand to imitate. Truly ask yourself what you stand for and what you want to be. Be as genuine as possible. Define your brand’s personality and then act accordingly. Without any restraint, broadcast who you are to the world.

girls dancing gif
Take it all in people.

If you do what others do simply because you think: “It worked for them, it’ll work for me.” Think twice about that. I know, you know, and everybody knows this would do a disservice to you and your audience. 

For instance, you’re a freelancer and you present yourself as a funny easygoing person. You’re then hired to work in an agency for 2 months but 3 days in, it’s getting pretty obvious you're not funny nor easygoing. Uh-oh! You managed to pull a Plaxico Burress and you’re now stuck in a very unfortunate situation. 

Same goes for brands. You claim to care about the environment and people but then you use an antitheft device on your cars to violate the Clean Air Act. Whoopsy-daisy! Turns out you’re garbage and the environment was way down on your priority list. 

Try not to be on the receiving end of this.

The ones who will make it to the other side are the ones who dared to be different

Most people are scared to break the mould. They say stuff like: “If we talk like this, we could possibly offend blond mothers over 42 who also drive electric cars.” Or: “If we look different from the competition, this could maybe potentially make us lose business opportunities at some point perhaps.” Yes — solid point. Essentially, it all comes down to what type of brand (or person) we want to be.

The truth is, brands willing to take risks will always come out on top.

So with this in mind, I’ll paraphrase my very good friend, Paul Arden: “If you always play it safe, you’ll be the same as everyone else. And that’s seriously bad for business.”

But from the right perspective, times like these afford us a peachy opportunity to stand out. That’s right, I said peachy. While most are content with being bland, I think we should aim higher. Why not try to turn some heads and get some reactions? If we’re ok with people remaining indifferent, we fail. Because indifferent people won’t pay attention to us, talk about us, hire us, refer us, and so on. The Apples and Nikes of the world understand this. They apply it with precision and consistency. So if they can do it, why can’t we? My advice to you is simple: 

Be brave. Stand out. And know that, yes, that will probably alienate some people. Chances are, they weren’t the customers you wanted anyway.

As you were.

John Moore Williams

Head of Content Strategy at Webflow. Nice to meet ya. Follow me @JohnAMWill.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.