Webflow has become one of the most used tools for web development – based on my recent experience, it’s a great tool for creating websites in less time and with the same exciting interactivity that a coded site has to offer. The best tech tools have great documentation, forums, and technical support encouraging more users to adopt the tool as their go-to. In some cases, Webflow’s resources allow us to simply “copy/paste” to replicate a cool feature or even a whole section, but in other cases, the resources available can take you up to a certain point and after that, you need to experiment with all the features to find the best way to build your site.
In this article, I’m going to dig deeper into the learnings and experience that came from working on a revamped and more complex site for Data Culture Studio, including some of the strategies that helped us create a great final product from a brilliant design.
When it comes to working in a collaborative environment and a team of developers, there are some considerations to take into account, particularly when you are working with a tool that does not allow you to have more than one person designing at the same time. It has become a more important part of our practice to set specific class naming conventions that are not only relevant to the developers but to our external clients as well. Proper syntax with naming conventions becomes more important when you are trying to efficiently understand what your teammate was working on the night before. We implemented our own standard to use no more than three words in each class, and to use combo classes when we needed to do something more specific.
If you are on a tight schedule and need an extra pair of hands to help out with development, it can be extremely stressful not being able to have your teammate work on a different section, page, or branch of the project the way that you would in a normal repository. Webflow’s “solution” is to create a workspace environment where any team member can log into the project either as a Designer or Editor, but since you need both designers to work on the project we ended up creating copies where users could work on different sections at the same time.
Do you remember the first thing we talked about when collaborating in Webflow? That’s right: proper naming conventions! When one of the parts was ready to test a new feature or a section was completed, we could copy the elements from one project and paste them into the original. We were careful to wipe and clean the duplicated elements and unused classes before adding anything new to the site. This allowed us to reduce time in recreating styling for elements and we understood that you need to be synced in order to keep your project understandable to any party involved.
Having a section-based system has definitely become key for the projects we work on. There is beauty in having a process based on a workflow that allows you to collaborate better. In our case, we understood the importance of getting the developers synced right away, even before we start adding a single element. In this part of the process, we take the final design and break it apart section by section, element by element, then translate each into divs, headings, paragraphs, rich texts, or any specifics with the proper naming conventions. This not only allows us to have a better understanding of the upcoming naming logic but also allows us to identify elements that can be replicated or where we may need to use a CMS (or more than one that can be interlinked)!
Take the time you need to work out this part of the process. The reward of behind having a proper breakdown of the project translates into less time explaining to your teammates where to begin or the logic behind the element that you may need help with.
Dev notes are a great tool when you are going through the most noticeable bits of your project like interactions, and animations, or capturing the particular essence that the designer is trying to reflect on the project. Have a section detailed with the particulars of a desired feature with links or screenshots that the developer can reference. There is nothing as helpful as a clear understanding of what you are doing to prevent going back and forth with the designer (to explain for the 5th time how a button is supposed to animate).
Animations and interactions may be the piece that your client, and more importantly, your final audience will notice. We tend to build in these features at the end once the layout design reaches a final stage of development, but be careful when having this approach since you may end up underestimating the level of difficulty for building interactions like scrolling on page animations or horizontal scrolling with vertical pieces. We opted for tackling the hardest features and the ones that were more difficult to time estimate first and ended up having a faster pace on regular tasks like spacing elements, styling text, or even setting up a CMS.
There is a particular piece on this project that was the hardest of all and it is the horizontal scrolling. We have seen the feature before and we wanted to incorporate it into our project but we added an extra level of difficulty when we included interactive visualizations that are vertical scrolling responsive. This means that we needed a section where once the visualization had progressed through all its stages, the whole screen could go to the next one in a horizontal transition. We found tutorials just to do the horizontal scrolling but once we unraveled the logic of the cameras, tracks, and the performance of the frames we were able to combine a mix of horizontal and vertical directions.
This step came with a lot of trial and error: we were going one step at a time and this is where the project became a little analog… we created a paper model! This allowed us to better understand what we were doing. Never be afraid to go a little old school and do something manual that will help you with the process.
It is easy to lose some enthusiasm for your project as you get stressed with deadlines, complicated builds, or a difficult client. Your project could be something that makes you proud but also it can make you smile. We went all-in with some exciting features that make the user experience a little more enjoyable like hidden funny gifs of ladies dancing with excitement, clickable elements that change each time, and even simple changes of color. I’m not saying that this should become the first thing that you develop, but it helped a lot to think that I wanted to have the time to work on those features. Have a priority system that can give you clarity on the most important things first and if you can reach those stretch goals you may end up enjoying the development of the project a little bit more.
There can be many purposes for your project, whether it’s a company portfolio, a client climate change project, or a more elaborate piece like a web platform. In each case, you need to make sure that your project can reach the right audiences and that your project is ready and optimized for search engines. There are a few things that I’ve learned over the past projects, and this section is dedicated to the checklist that I’m paying more attention to. This includes more obvious items like setting the language of the site in the project settings but the most important that I’ve found are the following:
Other relevant strategies that can give you a better understanding of the site’s performance include setting up Google Analytics for your domain. You can easily gather that information and display it in a way that lets you understand your audience. Although this may not be that related to SEO Settings, it is an integration that has become more important to adopt for our internal use, so consider if it is worth it for you / has benefits for your project.
You can also check the Webflow Expert Partner Grading Rubric for more criteria that are important to take into account when it comes to the technical aspects of a project.
Each project that I’ve worked on has given me more insights and reflections on the way that I work within a team and when I’m developing by myself. When you are starting on the web development path it is important to understand best practices and to know that not every project needs to feel the same way or be limited by the technical aspects of the tool that you are using. There is a learning curve in each one of them, but the importance of adding challenges, funny features, and learning opportunities is what, in my opinion, makes you go further in learning that tool and becoming an expert.
Check out the live Data Culture Studio site!
