My Complete Webflow Project Process | Includes Free Notion Checklist for Designers
Today, I’m walking you through my complete Webflow process when working on client projects. Whether you're a solo designer or part of a team, mastering the art of project management in Webflow is crucial for delivering outstanding results. There is so much more than meets the eye when it comes to building a website, so I created a free Notion checklist that can help you keep track of all the important steps. So, let's dive in and get organized together!
Grab Your Checklist Here
The Power of Checklists and Systems
In the world of Webflow design, managing every aspect of a client project can be overwhelming. That's why I swear by using checklists and systems. They're not just tools; they're lifesavers that keep you sane and supercharge your efficiency. My Webflow workflow checklist, which I've made available for free in Notion, is a testament to this approach. It's a step-by-step guide that I follow for every single project, ensuring nothing slips through the cracks.
My 4-Step Webflow Workflow
I like to break down the project into 4 parts. While my creative brain tends to want to jump around and skip all the steps, trust me when I say these 4 phases are critical for a smooth project.
- Design Setup: The design & setup phase is the most important. Having a strong foundation will set you up for success later on. I create my wireframes & design in Figma and use game-changing tools like Relume Library to turn unstyled design components into branded website magic. I use Relume’s style guide, setting up my headings, paragraphs, and color palettes with precision to make the next step a breeze.
- Webflow Setup: Once the design is ready, it's time to bring it to Webflow. The first step is deciding on a class naming system and duplicating the necessary style guides that are associated with it. I use Finsweet’s client-first naming systems, with cloneable style guides from Relume as the base of every single project. I then input my client’s branding, fonts, and any other design assets before getting started.
- Webflow Development and Build: The actual build is where you’ll see the payoff from the time you spent prepping & using Relume components. First, I copy and paste all the Relume components I plan to use directly into my page, then begin designing and adjusting as I need. I focus on building and styling each page to perfection so that my work compounds as I reuse various components. It's crucial to maintain a consistent workflow across your pages, and Relume helps me do that.
- Final Prep and Client Handoff: The final phase involves the nitty-gritty details like designing 404 pages, ensuring all classes and assets are organized, and setting up SEO elements. It’s my least favorite part, but I want my clients’ site to have all the details covered so they aren’t left having to figure it out. After my client has given me the green light, I send them their final invoice and then transfer the site to their Webflow account. My cherry on top is including custom training videos for them so they can update it on their own moving forward.
Additionally, adding a custom sitemap reinforces the website's authenticity for Google's verification, and the sitemap tool within Webflow makes this task a breeze. It is crucial to duplicate the site before handing off to the client, clean up unused classes and assets, and ensure that all class names are intuitive and organized—an advanced but valuable step.
After my client has given me the green light, I send them their final invoice and then transfer the site to their Webflow account. My cherry on top is including custom training videos for them so they can update it on their own moving forward.
