In the fast moving and constantly changing landscape of web development, codeless solutions like Webflow and Squarespace have emerged as an alternative to more traditional development. These platforms allow users to design and build websites through intuitive visual interfaces, and are viable solutions for many use cases out there. 

For the past several months, I've been working as a frontend development support specialist alongside one of our talented designers, Blair Culbreth, who is managing a large, established Webflow project. Here are my candid thoughts and impressions from this experience, along with some critical considerations for those looking to integrate Webflow into their own workflow. Spoiler alert: while Webflow has some impressive strengths, it also comes with limitations that can be both unexpected and frustrating at times.

What Webflow Does Really Well

Small Team Efficiency

Webflow truly shines for smaller teams or products, especially those with limited resources. For a team that’s just a single designer or a small development crew, Webflow can help lower the technical debt involved with getting a website to production. By mitigating some of the more complex aspects of development such as responsive design, cross-browser compatibility, and hosting, teams are able to focus on other aspects of the site. This makes it a strong option for startups, freelancers, or small businesses looking to create professional-grade websites efficiently and effectively without the necessity of a developer.

Animation Tooling

When I say professional-grade websites, I’m talking about more than just functional designs. Webflow has some fantastic animation tooling making it incredibly simple to build rich, full-page animations and interactions without ever touching a line of code. Users can create scroll-bound animations or interactive moments of joy all from the comfort of a relatively simple and straightforward GUI. Through the use of animation keyframes, you can elevate a static site into something that feels modern and expensive. Heck, I could even see using the animation tooling itself as a prototyping tool for design handoff in a more traditional web development process. This ability to easily add sophisticated animations allows smaller teams to produce polished, dynamic websites that rival those created by much larger teams with dedicated development resources.

Documentation & Education

Beyond its design capabilities, Webflow also stands out for its educational impact. The platform offers incredible documentation that covers core frontend principles, effectively bridging the divide between design and development. Through simple, digestible, and intuitive videos and written documentation, Webflow equips designers with knowledge that shores up many concepts and intricacies of web development.

Working with Webflow provides designers with numerous takeaways they can apply to future projects, including those outside the realm of Webflow. The platform educates users on HTML structure, CSS styling properties, and responsive design. This deeper understanding of web development makes designers more versatile and effective in their roles and inherently benefits communication between designers and developers, as their thinking will be more aligned with one another.

Navigating Webflow’s Limitations

Class Styles

Webflow's class-based styling system is a standout feature, especially to those familiar with CSS. It allows you to bundle properties into classes and apply them efficiently across different elements, minimizing code duplication. When used effectively, this approach facilitates the creation of reusable styles and design systems; however, mastering it requires attention to detail, similar to working with CSS directly, which can be made challenging within the Webflow UI.

Due to the separation of pages and content in Webflow, tracking down existing CSS classes and applying styles consistently throughout a project can be challenging. Keeping track of which class names apply what styles can be a struggle. While Webflow offers a Style Manager to help organize and manage classes, it can be difficult to use for quickly identifying how styles are being applied across the platform.

Moreover, the inability to open multiple pages in designer mode at once presents a significant frustration. Without the ability to compare elements across different pages simultaneously, users may face challenges in ensuring consistency and troubleshooting design issues efficiently. This limitation may lead to a slower, more cumbersome workflow, particularly in larger projects where maintaining a coherent design system is critical.

Another struggle with managing styles within the UI comes in the form of applying styles to combo classes. Combo classes are when you combine multiple classes together to create a variation or modified state of an element. Inadvertently applying styles to a combo class when intending to apply a style for the base class was a common issue I found myself running into, highlighting some challenges users should be aware of, especially when getting more familiar with Webflow.

These challenges underscore the value of implementing a strong and consistent CSS class naming system, such as BEM (Block Element Modifier). Adhering to a standardized naming convention will help mitigate some of the challenges posed by Webflow's class-based styling system, but it does come with the added overhead of needing to learn a new class naming convention.

Preset Web Elements

Webflow provides users with a diverse selection of default web elements, ranging from simple divs to intricate lightbox elements, which serve as the foundational building blocks for websites. These preset elements occasionally impose rigid structural constraints. For instance, when attempting to create a tabs menu with a filter, users may encounter a problem with adding additional elements to the tab menu block. This restriction forces users to either conform their design to Webflow’s constraints or devise creative workarounds to achieve their desired functionality.

Navigating such limitations can be challenging, particularly when striving to realize a specific design vision. It may involve exploring alternative solutions or compromising on the original plan. Yet, as users gain familiarity with the platform, those limitations can be anticipated, allowing them to develop strategies to circumvent the constraints.

Custom Scripts

One of the most powerful aspects of Webflow is also one of the most challenging features to balance. It requires careful management to avoid issues like performance degradation and increased technical debt.  It’s incredibly easy to have a website get bogged down with bloat, especially when a larger team might be working on a project.

Webflow lacks a built-in feature to view all custom scripts at a glance, making it difficult to track and manage them. Maintaining a documented list of all custom scripts used in your project and detailing their purposes and locations can help mitigate this issue, but that’s a fair amount of overhead to maintain. Additionally, custom scripts do not function in Webflow’s editor mode, requiring a site deploy for testing and troubleshooting, which can be time-consuming. 

The ability to add custom scripts opens up a world of options, including third-party plugins and libraries that can expand Webflow's native features. Tools like Jetboost or Finsweet can help fill in the gaps, and are oftentimes worth the investment as they provide relatively easy-to-use integrations that will make for a better user experience.

That’s all to say that applying custom scripts to a Webflow project is not necessarily bad, but should be approached with considerations on how to mitigate technical debt. Here are a few suggestions to help with integrating custom scripts into your Webflow project:

• Maximize Native Features: Use Webflow’s built-in features as much as possible. If a design can be achieved with Webflow’s interactions and animations, avoid adding custom JavaScript.
• External Development: Develop and test scripts in an external environment to reduce time spent deploying and debugging within Webflow.
• Reusable Components: Save frequently used custom code as reusable components to simplify maintenance and ensure consistency across the site.
• Regular Audits: Periodically review and clean up scripts to ensure that only necessary ones are loaded, improving site performance and maintainability.

Mitigating Difficulty Through Teamwork

I started this article by mentioning that I recently served as a frontend development support specialist alongside our designer, Blair, on this project. Blair took on the primary responsibility of building many of the pages, and I want to share more about our collaborative experience. Webflow is as close as you can get to building a traditionally coded website without necessarily needing to touch code, but that doesn’t mean there’s no value in having someone more familiar with the technical side of website building available. From accessibility considerations to complex layout structures, a lot of time can be saved by having a developer serve as a pseudo consultant on the project.

On numerous occasions, Blair reached out to me to help set up more complex custom implementations that required JavaScript or weren’t coming together as expected. By being able to jump in and solve those issues quickly for Blair, she was able to focus on building out the other pages. Similarly, I was able to audit and review her work to ensure it was inclusive for all types of users.

There are various development tricks we can implement to enhance user experiences for visually impaired users. For example, hiding text specific to a screen reader to provide greater context is a technique that a designer might not generally think about or even be aware of, but a good frontend developer would know to include. By being involved in the building process, I was able to highlight and advise on such instances, ensuring our project was accessible and user-friendly for everyone.

Conclusion

Webflow presents a robust solution for web development, particularly for smaller teams or projects with limited resources. Its intuitive visual interface and powerful animation tools enable the creation of professional-grade websites without the need for extensive coding knowledge. Webflow’s educational resources also empower designers to deepen their understanding of web development, bridging the gap between design and development and fostering better collaboration.

Webflow is not without its limitations. The class-based styling system, while efficient, can be challenging to manage, and the need for site deployment to test custom scripts adds to both the complexity and time investment required to build a project. Despite these challenges, many of the difficulties can be mitigated through careful planning and teamwork. Leveraging native features, developing and testing scripts externally, and creating reusable components are all strategies that can help maintain site performance and manage technical debt.

Collaborative efforts between designers and developers can further enhance the process, as seen in my experience working alongside Blair. This teamwork allows for efficient problem-solving and ensures that accessibility and user experience are prioritized throughout the project. By combining the strengths of Webflow with thoughtful collaboration and strategic planning, teams can create dynamic, user-friendly websites that meet modern standards.

When we open an app or website, we do so to accomplish a task or find information. A well-designed user experience ensures users can achieve their goals efficiently. But what keeps us engaged beyond basic functionality? What differentiates a mundane interface from an exciting one? In my opinion as an up and coming UI developer, one key element is motion.

During my summer internship at Viget, I had the opportunity to dive deep into the world of agency work. From getting the chance to contribute to client sites to participating in a hackathon and pursuing a personal project, I seriously leveled up my stack and gained valuable development experience. Not to mention the amount I learned from exceptional, dedicated mentorship and micro-classes on everything from React to SQL to business models. 

However, coming into the internship, I had the specific goal of learning how to add motion to my web projects. I walked in on day one with no idea where to start, and now I’m leaving my last week with a complex knowledge of Rive, canvas elements, JavaScript animation, GSAP, and more. Here’s how… 

Spinet

In this two week hackathon project, I worked alongside Faye and Paul, the Product Designer and App Developer interns, to create a spinning wheel name picker. During the first week, I took on branding and visual design work. 

I spent the second week implementing wireframes. Through this project I learned how to transform client specifications into design directions, a style guide, and ultimately, UI components.

For this app, the motion of the spinning wheel was critical to the experience. Initially, client feedback indicated that the spin felt too uniform. I adjusted the motion parameters by extending the slowdown time and changing the easing function from linear to cubic, which increased feelings of suspense at the end of the spin animation. 

To add a level of joy and celebration to the winner announcement popup at the end of a spin, I incorporated confetti animations. In doing so, I discovered the world of JavaScript animation libraries that make implementing animations as easy as simple as adding the script to my HTML and adjusting the timing and placement of the animation object. Finally, we had ultimately decided on a modern, clean-cut video game aesthetic for the branding, and pulled this in through inspired sound effects, the logo design, and a 3D button component with a click animation accomplished entirely through Tailwind. 

Luna chatbot

After the hackathon, I got the chance to work on a personal project of my choice: an AI mental health chatbot inspired by tools like Woebot and EarKick. I was motivated by the question of what could make conversational AI feel less intimidating and more empathetic. My answer was an AI support companion with an animated avatar to enhance feelings of emotional connection and understanding. 

To get started, I experimented with various chatbot APIs and found that the Llama3 model was the best at following system prompts and offered the most natural interactions. A huge part of this project was the chatbot’s expression animations. I surveyed several popular tools and found Rive was the best fit for this, offering intricate animation capabilities, easy web integration, and a state machine for managing overlapping states and complex transitions.

The first step of animating in Rive is to create a design. Luckily, Rive has a vibrant open-source community, and I learned a lot from examining and remixing community files. The second step was learning to create the animations themselves. This was my first time animating anything, but the concept of keyframes was relatively intuitive, and the UI reminded me of video editing software, like iMovie, I’d used in the past.

The third and most challenging step for me was making all the animations work together in a state machine. 

This is the logic that connects animations together, taking input values that determine when to transition between states. Getting smooth animations between emotional states required a lot of rewiring and experimenting. Finally, embedding the Rive file in my project and linking the emotion data from API responses to the animation inputs was relatively straightforward using vanilla JavaScript. 

In conclusion

Animations, whether simple or complex, add a layer of interactivity and visual interest to digital products. Over a short 10 weeks, my internship projects allowed me to explore UI development, modern animation tools, and motion using CSS and JavaScript.

If you’re interested in bringing ideas to life and sparking joy through motion design, then diving into a passion project, seeking inspiration from the community, and exploring tools like Rive and GSAP will definitely kickstart your journey!