5.3 C
New York
Tuesday, February 25, 2025

From Idea to Code: Contained in the Inventive Technique of Thomas Monavon & Grégory Lallé


Our story, like many nice partnerships, started within the halls of college the place we first crossed paths. Years later, we reconnected and found that our particular person paths in design and growth may create one thing better collectively. Over the previous three years, we’ve developed a collaborative method that has formed our inventive course of and outlined our work. Whereas a lot has been written in regards to the hole between design and growth, we wished to share our perspective on bridging this divide by way of actual partnership. However first, let’s stroll you thru a few of our current tasks that showcase what occurs when design and growth really work in concord.

Featured works

Thibaud Fellay portfolio 24’

One in all our most up-to-date collaboration is the portfolio of Thibaud Fellay, a swiss cinematographer.

The objective of this web site was to position tasks on the middle of the portfolio whereas providing an unique navigation expertise. We centered on a graphic universe centered across the pixel, the core aspect of his work. This visible idea allowed us to include varied interactive parts, reminiscent of a customized modular participant that gives details about the tasks and facilitates navigation between them, in addition to a personalized icon system.

Grégory Lallé portfolio 24’

October was a busy month for us, particularly with the discharge of Gregory’s new portfolio. The redesign of his folio had began in 2022 and we had plenty of concepts in thoughts.

Nevertheless, as a result of different tasks, time constraints, and the complexity of the preliminary layouts, we by no means accomplished the portfolio. So in 2024, we began over from scratch with the objective of making one thing less complicated—no WebGL, no pointless animations—only a clear and unique design. We opted for a extra brutalist and minimalist expertise. For extra particulars on the creation of this portfolio, we invite you to take a look at our current Awwwards article on the topic.

Angus Emmerson portfolio 24’

In 2024, we printed one other portfolio, this time for Los Angeles-based video editor Angus Emmerson. Angus approached us with the concept of making a WebGL slider within the type of a portfolio we had designed in 2023 for Theud. We aimed to develop an identical navigation expertise whereas making certain originality, which led us to the idea of a slider with two views. These two mission views are all the time linked to the timeline (graphic property) on the backside of the portfolio. It was additionally essential for us to allow an intuitive and seamless transition between scrolling and dragging tasks.

Thomas Monavon portfolio 24’

To conclude the presentation of our current work, we additionally wished to introduce you to Thomas’ new portfolio. It wasn’t developed by Grégory (too busy, haha) however by our proficient buddy Benjamin Robinet. Nevertheless, Grégory was nonetheless concerned within the design strategy of this new portfolio, and since we’re writing this text, we’re taking the chance for slightly publicity—lol. As for the portfolio itself, it embodies the form of expertise we like to create: easy, clean, and that includes non-intrusive animations.

Our manner of collaborating

Collectively from starting to finish

It might sound just like the title of a film you wouldn’t need to watch, however that’s genuinely how we work collectively. From the primary assembly with a shopper to the ultimate supply of a mission, we all the time function as a duo. Builders are sometimes neglected of preliminary discussions or solely introduced in to estimate a prototype, which is a disgrace. First, as a result of they’ve quite a bit to contribute in these early exchanges when it comes to inspiration, feasibility, and design recommendation (sure, many individuals are likely to overlook this, however inventive builders typically have a terrific eye for design—haha).

Preliminary workshops

Once we begin a mission, we prefer to run a workshop to assist our shoppers establish the inspirations they like (or dislike) by way of a curated number of references. They then refine, refine, and refine once more till they slim it all the way down to a shortlist of references—sometimes from 20 down to only 3.

From this preliminary workshop, each of us choose inspirations that we imagine shall be most related for the shopper. That is additionally the stage the place we talk about our concepts and artistic ambitions based mostly on what we’ve gathered from our early conversations in regards to the mission.

The benefit of this collaborative method within the early phases is that it prevents us from getting caught on mounted concepts. Designers typically dive headfirst into an idea, satisfied they’ve discovered the right design answer, however confronting your imaginative and prescient with another person’s perspective opens up extra prospects. As a rule, that is the important thing to crafting an expertise that’s really unique and interesting.

Design

As soon as the workshop stage is over, we transfer on to the design course of, and it’s Thomas’ flip to take the lead. Throughout this section, we create a number of UI layouts and checks, develop movement ideas to discover interactions and animations, and talk about these preliminary concepts. It’s additionally frequent for Grégory to check front-end parts straight in the course of the design section to evaluate the feasibility of sure concepts.

As soon as the primary UI checks take form, Grégory’s involvement gives a contemporary perspective on the design, serving to us collect useful suggestions. This additionally minimizes time spent on impractical concepts—these which might be too complicated to combine, technically difficult, or inefficient when it comes to efficiency—whereas additionally serving as a supply of inventive options. Builders like Grégory spend plenty of time exploring front-end inspirations (Awwwards, Codrops, CodePen…), which regularly results in different approaches that improve the preliminary design ideas.

For this reason frequent sharing of small progress updates is so essential. All through the design and growth course of, we ship one another every day recordings or screenshots of recent options to assemble suggestions or just showcase progress. This methodology of communication helps us save time, keep away from misunderstandings, and stop pointless delays afterward.

Improvement

After conducting the required checks to validate the design, Grégory begins the event section. This stage, which is often the longest, requires us to proceed working carefully collectively. This ensures that we stay pixel-perfect to the unique idea, shortly establish if sure concepts don’t work as effectively as soon as applied, and fine-tune many parts collaboratively.

For many of our tasks, we dedicate vital time to refining easings and animations to attain the precise really feel we each envisioned. This is likely one of the most essential and fulfilling points of collaboration between designer and developer. These fine-tuning moments deliver that means to the whole mission and assist create these refined particulars that others will discover and respect.

Remaining ideas

There’s nonetheless a lot extra to say, however as we attain the tip of this text, we hope you’ve loved this little behind-the-scenes look. It’s not all the time simple to condense all this info into this format, and writing an article is much more difficult. Our objective was, after all, to introduce ourselves, however extra importantly, to share our imaginative and prescient, our inventive course of, and above all, to focus on the significance of shut collaboration between designers and builders.

We additionally need to take this chance to thank everybody who has inspired and supported our work. We ended 2024 on a excessive observe with some award-winning productions, and we’re extremely proud. Now, we will’t wait to see what 2025 has in retailer for us.



Supply hyperlink

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles