• Skip to primary navigation
  • Skip to main content

Status ForwardStatus Forward

Web design and marketing for the outdoor industry and conservation based non-profits

  • Let’s Talk
  • Work
  • Services
  • About Us
  • Case Studies
  • Follow Status Forward on Facebook
  • Follow Status Forward on Instagram
  • Follow Status Forward on Twitter
  • Follow Status Forward on LinkedIn

Home » Journal » Insights

How we use Webflow in our Web Design & Development Process

January 2, 2018 by Marisa Falcigno

Finding the right workflow for your team can be a daunting and ever-evolving process, to say the least. Like many web teams, we spent a bit of time trying out a number of tools to make the transition between design and development more efficient. The days of using Adobe Illustrator and Photoshop to design websites are over for some of us, as these tools were never intended to be used for web design, even more so a responsive one.
With apps like Sketch, Invision, and AdobeXD, there are many design and prototyping tools available today. While it’s nice to have options, it can be overwhelming to decide what works best for your team.

Among all the tools we dabbled with, Webflow was the the game changer for us. Over this past year, Webflow has transformed the way we design, present work to our clients, and transition into development.

Webflow homepage

Realistic Responsive Prototypes

Simply put, Webflow enables our designers to design and create a working responsive prototype at the same time. With this, we are able to demonstrate shifts in design and flow of content from mobile to desktop view. It allows us to present a more realistic preview of how the website will look and function after development. This is a huge benefit to our clients because when we present the website design, they are not seeing a schematic of the design, but a coded responsive website instead. No more confusing static JPGs attempting to demonstrate the differences between desktop and mobile views. There is no longer a need for separate apps for design and (pseudo) user interaction. No more explanations for what happens when the visitor clicks the menu button.

Experiencing, Not Envisioning

With Webflow, it’s all built in and our clients can preview it in real time on a phone, tablet, or desktop. They are “experiencing” the website instead of trying to envision it. Thanks to this, we are able to receive quality user-experience and design feedback from our clients much earlier in the project timeline. This keeps us from spending too much time creating something that will need to be reworked in the end.

Writing Code—Visually

Webflow is great for designers who don’t like to fuss with code because you are able to build your design visually. However, if your design team is comfortable working with HTML, CSS, and Javascript, Webflow becomes an even more robust tool, allowing you to fine tune a design into a working, interactive website. With their Style, Navigator, and Interaction tabs, it’s sort of like you’re writing code, without actually writing it. Although, you can absolutely inject custom code into the project if you feel like it as well!

Example of Webflow Interface

Webflow as a Reusable Framework

Webflow lets you build and host a fully functional content managed website with their service. That’s great, but at Status Forward we build all of our websites with WordPress, utilizing the Genesis framework. We choose WordPress because it’s an easy-to-use content management system that allows us to build robust custom features and functionality for our clients. We can modify the backend of the site to suit the needs and technological expertise of different  clients and keep them focused on crafting quality content without affecting the design of the site. Genesis is our stable, secure, SEO-friendly framework for building out WP websites. For those who approach web development similar to how we do, you can simply use Webflow as a prototyping tool. This tool offers so much more though.

Webflow Navigator HTML Tree Structure
Webflow Navigator HTML Tree Structure

Customizable HTML & CSS

Webflow allows you to fully customize the HTML and CSS and then export it for use in your own workflow when you are done. Thanks to this feature, we’ve created a reusable starter template that mimics the HTML structure and CSS naming conventions for both WordPress and Genesis. We are able to edit the HTML and CSS as we work, using the Style and Navigator tabs. This lets us design a creative and unique website, while ensuring the HTML remains semantic and follows the structural output of both WordPress and Genesis.

The benefit is that it makes passing the project to the development team a breeze. They don’t have to reinvent the wheel with each project because the design already includes most of the website structure.

Another benefit to setting up our design template is that it helps prevent the designers from accidentally including a design element that could potentially add more hours to the project without realizing it. We are showing a more realistic view of what the site will look like and how it will function, not promising a design that will end up exceeding the approved budget.

Style Guide for Developers

Included in this reusable template is a style guide that gets cloned with each project. This lists out all of the possible design components that we might utilize in a website, such as headlines, forms, block quotes, grids, and galleries. As we work on a project, this page gets styled with the established design elements so that everything looks consistent and on-brand. Our developers don’t have to come back to us and ask how we’d like to style an element that we didn’t originally show in the prototype. It’s all listed out in the style guide.

Smooth Hand Off to Development

Webflow's Exported Code
Webflow’s Exported Code

Once we have design approval, we export Webflow’s code, do a little clean up, and pass it to our developers to merge it into their workflow. Unlike so many code-generating web tools, Webflow actually writes decent code. It effectively returns what you put into the system—in our case, the WP/Genesis structure that we already use. Due to this, our developers can copy and paste the pertinent parts of the HTML layout into their working files without having to re-create our design from scratch. Instead, their focus is now on making everything function properly on the WordPress platform, creating custom fields and building in other fancy functionality into the website. Having the CSS from Webflow in place ensures the design stays the way the design team intended it across all screen sizes. There is no longer a need for extra time “tweaking” after the development of the site is finished.

A little bit of clean-up

Like any other app out there today, Webflow isn’t perfect (insert sad face). Though it outputs the HTML that we declare, it also inserts a bunch of its own “webflow-ified” styles (our term, not theirs). Since we’re merging with our WP/Genesis framework, our designers have to remove some of this and make a few adjustments before handing off to development. We’ve spent enough time with the system to know what we need to clean up before handing off. This is where having some good HTML and CSS chops is a plus. Despite the clean up, this process goes smoothly and it still saves the development team a bunch time in the end. If you’re not using Webflow the same way as us, you probably don’t have to take this extra step.


As time goes on there is always a new tool or way of creating to consider. The key to success is to stay flexible and forward thinking, keeping your clients and their budgets in mind. There will always be the need for mood-boards, sketching, and asset creation (illustration and photography) outside of an application like Webflow. However, the client gains so much more from seeing a working prototype earlier in the process. It quells unnecessary confusion and creates less need to explain the user experience. Therefore, we have more time to to deliver a quality product. Plus, because we can then reuse code from our working prototype in our finished product, we end up with a more productive workflow. For now, Webflow is what works well for us. It allows us to deliver a polished product to our clients efficiently, on budget, and with no surprises in the end.

Thanks for reading!

Share

  • Share on Facebook
  • Share on Twitter
  • Share on Twitter
Previous
Next
Marisa Falcigno

About Marisa Falcigno

As lead designer at Status Forward, Marisa spends her days thinking about the user experience and user-interface design of your website.View All Posts by Marisa Falcigno

Blazing new trails?
Let's move forward.

Book a Call
Status Forward logo

825C Merrimon Ave #390
Asheville, NC 28804
828.338.9145

JOURNAL CONTACT

© 2025 Status Forward

Privacy Policy
Privacy Settings