Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

128
Item 1
Item 1
Sheared Falls
20" × 24"
Connect Data
112
Item 4
An Emerald Morn...
11" × 17"
436
Item 2
A Long Winter
20" × 24"
183
Item 3
Lone Eucalyptus
5" × 8"
312
Item 5
Rugged Terrain
11" × 17"
28
Item 6
84
Item 7
269
Item 8

Responsive website design software for professional designers

Design and develop websites in their native medium: HTML and CSS, written in the browser. Without actually writing the code.

Professional web designers have been hunting for the best tool for the job ever since the web was born.

With Webflow, the hunt is over. Here’s why.

Design in the browser—with HTML, CSS, and JavaScript—visually

design-code.jpg

Most creatives work directly in their medium. Writers write. Painters paint. Musicians play music.

But for decades now, most web designers have been working with abstractions: pixels and mathematically generated curves (beziers and “smart objects”). Beautifully designed to represent the final product—a fully functional, interactive website—but abstractions nonetheless.

Some designers have made the jump. They’ve dedicated months and even years to mastering the intricacies of HTML, CSS, and JavaScript so that instead of working with static abstractions, they’re working with the base materials of the web. And every year, there’s more investment to make as the specifications underlying those markup systems evolve.

But that’s quite an investment of time, and in many cases, money. Time (and money) that could’ve been invested in honing visual and UX design skills. Or running user research studies. Or poring over analytics in search of insights.

And for many designers, those investments just aren’t sound.

Now, imagine you could work directly with HTML, CSS, and JavaScript, but in a way you’re more comfortable with: visually.

Imagine a code editor that, instead of presenting you with a blank page, gave you visual tools for manipulating code. That let you pick your animation options from a list instead of writing them. That actually helped you understand the underlying code.

Now stop imagining it. It’s here. It’s Webflow.

Dramatically simplify your responsive design process

responsive-dashboard.gif

Design—and preview your designs—for every device.

With Webflow, you start designing in the desktop viewport size, but that doesn’t mean you’re ignoring your mobile breakpoints.

In fact, every design choice you make at the desktop size automatically cascades down to smaller device sizes. So when you’re happy with your desktop design and switch over to mobile, you won’t see a blank canvas. Instead, you’ll see that Webflow’s already gotten your mobile designs started for you, with your desktop designs automatically scaled down to mobile views. And it works even better when you use responsive units like ems, vh, vw, and percentages.

That’s not to say we do all the hard work for you—you’ll still need to make refinements to present the best possible experience on mobile. But it’s a far cry from designing in Photoshop or Sketch.

Bring your designs to life with engaging interactions

hover-interaction.gif

If you’ve ever tried to explain an interaction or animation to a client or stakeholder—whether by turning Photoshop layers on and off, faking it in Keynote, or manually creating a GIF—you know how painfully limiting static mocks can be.

But if you’ve tried to code them to show a client, you also know that one of the most challenging aspects of designing an immersive website is the interactions and animations. After all, they require knowledge not just of (the relatively straightforward) HTML and CSS, but also the more complex JavaScript.

Thankfully, Webflow makes building beautiful, buttery-smooth animations and interactions easy. How? By translating complex JavaScript into a mix of intuitive visual tools and easy-to-understand lists of options.

Check out how Webflow lets you build interactions without code.

Design with real content

Webflow is the first visual tool I've seen to combine data, design and development. Very impressive and so obvious.
– Joe Dakroub, software developer
about-content.gif

Another massive challenge of designing a website with desktop software is designing with real content (or data, if that’s how you prefer to think of it).

Designers who use lorem ipsum or just write faux content for their designs risk creating “ideal world” solutions: blogs where headlines never run to more than 5 words, user profiles full of professional-grade photos, and all kinds of other unrealistic content.

Even worse are design solutions that completely ignore the nature of the content, becoming little more than generic boxes that content creators are then forced to cram their content into—round holes designed for square content.

Webflow’s powerful, visual CMS helps designers overcome both problems by encouraging a workflow that begins with content. Just create Collections to match your content; fill them with with words, images, videos, and more; then tweak your designs to work with the content, not against it.

Whenever you make a design change, you’ll immediately see how that design affects your content, so you can tweak your design accordingly.

Another advantage, as put by CEO and cofounder Vlad Magdalin in “Let’s Redesign Web Design,” this “creates a clear separation between content and design, so we can let a stakeholder or collaborator make content changes directly, knowing that any change will immediately reflect in all parts of the design.”

Plus, every field in Webflow CMS’s Collections lets you create help text, so it’s incredibly easy to develop a style guide for content creators right inside their CMS. Powerful stuff.

Prototype while you design

Since you’re creating real, functional HTML, CSS, and JS while you design in Webflow, prototyping becomes a natural byproduct of your design workflow—not something you have to do on the side.

And once your design’s ready for review, clients and stakeholders can review your work on their smartphones, tablets, laptops—whatever device they want. You can even password protect your site (on our Professional and Team plans) to ensure it’s safe from prying eyes.

Best of all, once your “prototype” gets approval … you’re practically done, because it’s actually a production-ready site you can either launch and host with Webflow or export to host wherever you’d like.

Go live with a click

Once your design’s approved, launching your website is as simple as clicking “Publish.” And with Webflow’s built-in hosting, you get the power of Amazon Web Services and Fastly, so your pages will load in no time and be up and running when users need it.

Need an extra layer of security? Webflow Hosting also offers SSL (secure socket layer) technology to ensure your website visitors’ privacy and security.

Or export your code to host elsewhere

exporting-a-site-in-webflow.jpg

Unlike many SaaS products, Webflow doesn’t lock you into the platform.

Whether you need to use a third-party host, or just have to give your developers direct access to the code Webflow writes, you can export your HTML, CSS, and JS with a single click to use whenever and wherever you’d like.

Just keep in mind that data created with Webflow CMS via the Collections tab won’t be exported.

Ready to try our web design software?

Get started today, for free. You only pay for custom domain hosting or advanced features, and when you upgrade, enjoy peace of mind with our 30-day money-back guarantee.

Get Started

What’s Webflow?

Founded in 2013, Webflow is a responsive website builder, CMS, and hosting platform. Trusted by over 300K professional designers at top companies like Pinterest, IDEO, Razorfish, Autodesk, and Salesforce, Webflow makes it easy to build and launch the responsive, cleanly-coded, and fast-loading website you’ve always wanted.

Already trusted by amazing Design companies
© 2016, Webflow, Inc. All Rights Reserved.