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.
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!
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.
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
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!