Behind the Scenes of Digidop's New Webflow Development

In this article, dive into the behind-the-scenes of developing Digidop's new Webflow site. We reveal how our team tackled the challenge of creating a complex and scalable web architecture, which includes:

• Over 60 static pages,
• More than 25 Webflow CMS collections,
• Over 30 components!

1. Project Overview

Thibaut and I collaborated by following a structured process to successfully complete this development work by leveraging the Webflow workspace plan.

A. The Goals of Digidop's New Webflow Site

• Develop the entire site using Client-First V2
• Create a platform centralizing all Digidop content on our website
• Bring Digidop's new artistic direction to life
• Create a scalable platform that is easily managed by the entire Digidop team from the Webflow editor mode
• A site that adheres to all web best practices (SEO, accessibility, loading times, etc.)
• A multilingual site in French and English
• A responsive website suitable for all devices (tablet & mobile)

B. The Challenges and Stakes

With over 60 static pages, 25 CMS collections, and 30 components, the Figma file was quite... The challenges of transitioning from Figma to Webflow were:

• To accurately reproduce (pixel-perfect) the Figma design on Webflow
• To use a CSS class naming convention (Client-First) to create a website that is easily understandable by Thibaut and me
• To develop as many sections as possible using CMS collections to facilitate content creation by the Digidop team!
• For two developers to work simultaneously, often within the same time slots
• To meet a publication deadline set for one and a half months: April 19, 2023

2. The Development Process

No-code or not, to develop a website of this size, there's no secret: you need a well-defined process.

A. Task Distribution for Webflow Development

To ensure an effective and orderly progression of the project, we began by distributing the tasks (pages/sections) to develop between Thibaut and me.

We used Figma as the primary platform to track the project's progress and development, where we assigned "Work in Progress" toggles on pages and design elements specific to each of us.

Additionally, we maintained constant communication to discuss the project's status, resolve any issues, and adjust our planning as needed.

B. Working with Maximum Components!

Using components was a key aspect of developing our Webflow site, which includes over 80 pages. Components allowed us to create easily reusable elements for the site.

By utilizing a maximum number of components, we were able to:

1. Ensure design consistency: Components helped us maintain a uniform appearance and style across the entire site, ensuring that changes made to one component reflect across all instances of that component.
2. Reduce development time: By creating reusable components, we were able to significantly cut down the time needed to design and develop similar pages and features. It also simplified long-term maintenance and updates for the site.
3. Facilitate collaboration: Components made collaboration between Thibaut and me simpler and more fluid, as we could easily share and reuse design elements without having to recreate them each time.

As you can see, components (formerly symbols in Webflow) greatly simplified the development process of our website and optimized the quality of our work.

⚠️ It's important to name your components correctly to reuse them quickly if needed, especially when working on a site as a team. 3. Feedback and Lessons Learned

A. Successes and Areas for Improvement

Working with two developers on the Digidop Webflow site highlighted both successes and areas for improvement (from a technical perspective regarding Webflow workspace plans):

Successes:

• Effective collaboration: We managed to communicate and collaborate efficiently on this extensive development, accelerating our workflow while achieving a result that aligns with Digicalidad.
• Time management: We met the one-and-a-half-month deadline for the website's development, demonstrating our ability to work productively together and meet deadlines.

Areas for Improvement:

• Real-time collaboration: Although we were able to work together effectively, it is unfortunate that Webflow's workspace mode does not offer the ability to "design together" in real time. This feature, reserved for enterprise plans, would have made our real-time collaboration even smoother, allowing us to work simultaneously on developing new sections and elements of the site.

B. Tools and Methods Contributing to Our Success

To successfully develop Digidop's new Webflow site, we used a combination of tools and methods that allowed us to work efficiently and track the project's progress. Here is an overview of these tools and why we chose them.

1. Webflow

Webflow is a no-code web design and development tool that allowed us to build a complex and scalable web architecture while managing different CMS collections. It also facilitated collaboration through the workspace plan, which offers features for working simultaneously on the same project.

2. Figma

Figma is a prototyping and user interface design software that was essential for creating the mockups of our site. It enabled us to work together on the designs and ensure precise tracking of the progress of each page. Figma facilitates collaboration among team members by providing a shared workspace where everyone can contribute and view changes in real time.

3. Slack

Slack is a communication and collaboration platform that helped us stay connected throughout the project. With its various features, such as discussion channels, video calls, and file sharing, we were able to quickly and efficiently exchange information regarding the project's progress, challenges encountered, and solutions needed.

4. Google Meet

Google Meet is a video conferencing service that allowed us to hold online meetings to discuss key stages of the project, potential issues, and strategies to adopt. By using this tool, we kept in touch and worked together even from a distance.

In summary, these collaboration and project tracking tools played a crucial role in our success. They allowed us to stay connected, work efficiently, and monitor the project's progress in real-time. Each of these tools added value to the process, thus contributing to the successful development of Digidop's new Webflow site.

5. Chat-GPT

Let's not forget! We of course turned to Chat-GPT for help on various topics.

Conclusion

The development of Digidop's new Webflow site has been an enriching and formative experience for our team. Thanks to a structured work process, our experience in website development, and the use of effective tools, we were able to successfully carry out this challenging project with a record time to market!

We now have a complex and scalable web architecture, built 100% on Webflow, in place to continue developing our marketing strategy.