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.