The Magic Behind Exceptional Websites?
Are you ready to uncover the secrets of perfect collaboration?
In the ever-evolving world of web development, there exists a crucial convergence point: the harmonious fusion of design and development. We are excited to invite you to an exclusive workshop that will immerse you in the behind-the-scenes of this vital relationship.
Meet the Digidop Experts
Thibaut (Webflow Developer) and Mérieux (UX/UI Designer) have shared their expertise on how to successfully manage a project that blends design and development. They also discussed how Digidop shapes scalable web projects optimized for SEO using Webflow.
A workshop designed with the entire DigiTeam to provide you with practical tips that you can implement in your projects.
The Colors of Collaboration
If you think collaboration between designers and developers is just about lines of code and visuals, think again. It goes well beyond that, and our workshop will show you why.
In this workshop, you will discover:
- How to kick off a design/dev project effectively
- How to manage the designer/developer relationship
- How to achieve the best possible project through productive synergy
- A surprise for those present
Workshop Summary: How to Create a Productive Synergy Between Design and Development in a Web Project?
To successfully optimize the collaboration between a designer and a developer, we divided our processes into four key stages:
- Building relationships on solid foundations
- Communicating openly
- Ending on a high note
- Keeping the flame alive
1. Building Relationships on Solid Foundations
In this section, we discuss the importance of starting on the same foundation.
As Mérieux says:
The quality of a structure depends on the quality of the foundation on which it is built.
We do not operate under the assumption that there is a design project and a development project; we are all in a shared project.
The Design Sprint
The Design Sprint is a phase that allows us to start on equal footing, on a solid base. Specifically, it is a workshop that brings together all stakeholders of the project, where we exchange project needs, challenges, and gain insights into the business behind it, along with content and design inspirations, etc.
At Digidop, we conduct our design sprints using Figjam (a collaborative whiteboard tool) to keep track of our discussions.
It is important for both the designer and the developer to participate in this call to adapt design and development according to project expectations. A developer should not discover the project after the UI mockup is complete.
By starting from the same base of information, we ensure we can deliver a quality project that heads in the right direction.
Organization in the Design Tool
Once the design sprint phase is completed, it might be wise to proceed to the design phase using an organized file (which can be applied to other projects/duplicated). At Digidop, we have a Digistart file that includes various components of our Design phase (Design Sprint, Graphic Charter, UX Mockup, UI Mockup, etc.).
The aim of this phase in our processes is to involve the developer in the design aspect.
First, the developer needs to be able to navigate the design file to access elements and track the evolution of the project. Then they can contribute to this phase by providing their expertise, feedback, and vision. This can be done asynchronously by commenting on the mockup.
Thus, the designer is not the sole decision-maker, gaining an external perspective as well. We aim to find a mutual agreement between the designer's vision and technical feasibility.
2. Communicating Openly
It is crucial in any collaboration to be able to speak honestly and clearly to advance the project effectively.
The Handoff
Once the UI mockup has been approved by the client, it is essential to conduct a handoff phase. The handoff consists of a call lasting 1 or 2 hours, depending on the project, to discuss the specifics of the mockup.
During this time, the designer and developer spend time together, where the designer revisits each page and section to ensure the developer has no uncertainties during the development phase.
This prevents information asymmetry. The designer will have had more calls with the client and thus will have a clearer view of the project. This phase helps "level up" the developer so they can develop without questions, saving time.
The Style Guide
We come to a crucial phase for a good web project: the style guide.
The style guide is a file that outlines all the styles present in the mockup:
- Typography
- Colors
- Components
- Assets
- Etc.
This might not be the most exciting phase for a designer, but all the time invested by them in its proper execution saves much more time for the developer later on.
The style guide facilitates a smooth transition between the design tool (Figma) and the development tool (Webflow). It helps the designer maintain coherence throughout the project and optimize the development time.
The style guide ensures uniformity between design and development.
3. Ending on a High Note
This is the phase after developing the mockup and before presenting the project.
Just as the designer involves the developer in the design phase, the developer must involve the designer in the development phase. We are not dealing with a design project and a development project; we are working on a shared project.
The developer should not just act independently, and they must involve the designer so that they can contribute their value until the end.
Here, tools like Markup can be utilized to add comments on a website.
The goal is always to keep the project aligned with the designer's vision. The designer comes in to provide clarification and adjust what needs to be adjusted. We are in the finishing phase to deliver the highest quality project possible.
This feedback phase should occur before and after the client's presentation to always ensure an optimal project.
4. Keeping the Flame Alive
We are now in the phase following the project's publication.
It seems essential not to stop there, but to debrief the project with our designer or developer.
Here, through a 15 or 30-minute call, we strive to draw lessons from what went wrong to avoid repeating it in the future. We also draw lessons from what went well to apply it in the future or even improve it.
Processes must undergo continuous evolution, regardless of who we are working with.
This phase helps us stay up to date and not get left behind.
All these steps help optimize project management so that it can be delivered on time and maintain a high-quality standard.
Once again, we work in a rapidly evolving field, which means our processes must be in constant evolution.
In any case, we hope this will assist you in your future projects!
