Context :
As part of the official communication for the Paris 2024 Olympic and Paralympic Games, I was tasked with creating an animated banner to be integrated into the info.gouv.fr website.
The aim was to promote this international event while respecting the guidelines of the DSFR and the 2024 Olympic Games charter. A key aspect of the project was the addition of subtle animations, in particular the dynamic change between the Olympic and Paralympic Games logos.
Role :
UI designer
Toolkit:
Figma, Adobe XD, invision, zeplin
Goals :
Create a distinct timer : avoid using Omega-specific elements while maintaining a professional design aligned with the Games' image.
Create an attractive and animated banner : Add subtle movement to capture users' attention while maintaining a visual identity in line with the Olympics.
Compliance with charters : Reconcile the directives of the DSFR (State System Design) and those of the 2024 Olympic Games, ensuring perfect harmony between institutional and sporting elements.
Personal challenge : Integrate fluid and light animations that bring an interactive dimension to the banner, in particular by changing the Olympic logo and the movement of the four visual squares.
Realization :
1
Animation of visual elements
Logo change : I implemented a transition effect to alternate the logo between the Olympic Games and the Paralympic Games, in a fluid and discreet way, while respecting the visual charter of the two entities.
Geometric Squares Movement : Another aspect of the project was the animation of the four colored squares located to the right of the timer. These elements move subtly, adding dynamism to the banner without compromising readability or navigation.
2
Compliance with technical and visual constraints
Compliance with the DSFR: I ensured that the banner fits perfectly into the ecosystem of government sites, respecting the accessibility standards and guidelines of the DSFR.
Geometric Squares Movement : Another aspect of the project was the animation of the four colored squares located to the right of the timer. These elements move subtly, adding dynamism to the banner without compromising readability or navigation.
.jpeg)
3
Challenges and solutions
Lightweight and efficient animation : One of the challenges was to keep the animations lightweight and optimized so as not to impact the performance of the site, while maintaining an attractive and modern visual effect.
Coordination of charters : I managed to reconcile the requirements of the graphic universe of the Olympic Games with those of the DSFR, by providing creative solutions to ensure consistency between the two charters.
Result
Challenges and solutions
Animated and engaging banner : The final banner, with its subtle animations, captures the attention of site visitors while respecting institutional and sporting requirements.
Enhanced User Experience : With the addition of interactive and dynamic elements, this banner offers a smooth and immersive user experience, while effectively conveying information about the Olympic Games.
Liste des projets
Gouvernement Français
Vous retrouverez ici quelques un de mes projets inspirant au cours de mon année.
Agorasquare
Application mobile conçue pour optimiser la gestion financière des entreprises.
Master Coach
Master Coach, développé pour une marketplace de coaching.
DoctoVoice
Application mobile conçue pour optimiser les interactions médecin-patient.
Wisely
Wisely, conçu pour les jeunes managers, est une solution IA qui simplifie la gestion d'équipe.
CoinWave
Coinwave, développé pour Crypto Expert, j'ai conçu une application mobile permettant l'achat...