The 1 must-have tool to bridge the design-development gap

If you’re anything like me, high-fidelity mockups and the tools you use to bring them to life are important to you. I started this piece thinking I’d be talking about three tools every designer needs. But then I got writing, and I realized that there’s actually only one: Webflow!

One app to rule them all: Webflow

Once, I considered Sketch, Principle, and Webflow my three must-have tools of the trade. I use them to connect design and development. As some of you know — Sketch and Principle are amazing at bringing mockups to life for many reasons.

Sketch lets me present my idea and create high fidelity mockups. And with Principle, I can bring those high-fidelity mockup to life and hand off an interactions roadmap to the designer.

But writing this out made me realize:

I can do all those things in Webflow!

Making high-fidelity mockups in Webflow

Creating mockups in Sketch or Illustrator is like riding a bike — I’ve got the basics down and I’m learning new tricks every day. But I’m always hoping to learn more and take my skills with these apps as far as I can. New plugins that extend functionality and make these apps even better are released daily.

But when there’s a motorcycle waiting for me — why would I keep using a bike? Friends. Webflow is the motorcycle.

Let me ‘splain.

Recently, a client asked if I create mockups in Webflow or if I design from scratch in Webflow. I responded, “I do both!” I gave them examples of mockups and Webflow sites I’d created.

But then I thought: why do I do both?

Why do I spend time creating a mockup only to recreate that mockup in Webflow? I can design right in Webflow!

Designing in Webflow

Here’s a peek at my workflow:

Create the layout and structure of the site , element by elementAdd images and CSS to the elements where neededImplement the content

Easy, right? Right.

Next, I add the interactions. I want my website to stand out, draw in the user. And — good news! — interactions in Webflow are simple as pie. And just as tasty.

Interactions in Webflow

I get it. Learning another app to do something you’re already doing is for the birds. You’re a user interface designer — you already create beautiful, Dribbblicious interactions with Principle, Flinto, or your app of choice. Why change now? Why put the hammer down when we’re master hammerers.

But, listen! Webflow is the jackhammer you’ve been waiting for — I promise.

Let me ‘splain.

The interactions you’ll create in Webflow are better than any interaction you’ll create in the app of your choice, for one simple reason:

You can hand off the code to your developer for production use.

No more lurking about to make sure your developer uses the right easing. No more drawn-out conversations about why an interaction should wait 600 ms before starting. With Webflow, those days are gone, dear reader!

Handing things off to your developer

Okay, so we've completed the HTML structure of our website, styled the site to our liking, and added beautiful interactions. The next step is to simply export the site. That's it! Place the files on Github and let your developer go to town.

I can tell you from experience it really is that simple. What is my experience, you ask?

A little about me

I work at a medium-sized corporate company in Bridgeton, MO. A few months ago I had to create a multi-step form for a developer. Easy enough, but I had little bandwidth at the time. I needed to complete the request quickly and with as little fuss as possible.

Before I jumped in, I received sign-off on the form by presenting it in Webflow. I didn’t get the usual push-back because Webflow made it possible for the stakeholders and I to work together. We knew the solution we were after and Webflow helped us get there.

I created the form in Webflow, exported the site, and handed the code to the developer. And just one change request came in. Amazing!

Connecting and collaborating

This is one of the many anecdotes I could tell you that have helped make Webflow my go-to tool. There really are no other tools that can do what Webflow does: create high-fidelity mockups and production-ready interactions, and export semantic code.

What’s your number-one tool?

Connecting design and development is not any easy task. What's your go-to tool and why? Share your expertise in the comments below.

‍

Note: this article was originally published on the Webflow blog: https://webflow.com/blog/the-1-must-have-tool-to-bridge-the-design-development-gap

Industries

Articles

Videos

Instagram

Contact