SCROLL
SCROLL
SCROLL
Opentri
Refresh de la brand, création du brandbook et conception d’un UI Kit Figma pour poser les premières fondations du futur produit.
OpenTri est une application dédiée à l’entraînement en triathlon, pensée pour accompagner les sportifs dans leur progression à travers la natation, le vélo, la course à pied et le renforcement. Dans le cadre de son évolution, la marque souhaitait moderniser son image et affirmer un nouveau positionnement, avec un univers plus contemporain, plus cohérent et capable de mieux vivre sur l’ensemble de ses points de contact digitaux.
J’ai accompagné OpenTri sur le refresh complet de son identité de marque : évolution du logotype, nouvelle palette colorimétrique, système typographique, direction artistique et formalisation de l’ensemble dans un brandbook. J’ai ensuite traduit cette nouvelle identité dans un UI Kit Figma — couleurs, typographies, iconographie et premiers composants — puis structuré le handoff afin de préparer la future refonte UX/UI de l’application et assurer une continuité entre branding et produit.
Réalisations
BRANDING
GUIDELINES
UI KIT
DESIGN SYSTEM
Stacks
Branding et identité visuelle
Le refresh de l’identité OpenTri avait pour objectif d’accompagner son nouveau positionnement avec une image plus moderne, plus distinctive et plus cohérente avec son ADN sportif. J’ai fait évoluer l’ensemble du système visuel — logotype, couleurs, typographies et principes graphiques — puis formalisé ces choix dans un brandbook pensé pour assurer une utilisation cohérente de la marque sur tous ses futurs points de contact.
Refresh du logotype
Le logotype OpenTri a été retravaillé pour gagner en modernité, en lisibilité et en impact, tout en conservant suffisamment de continuité avec l’identité existante. L’objectif était de créer une signature plus contemporaine, capable de fonctionner aussi bien dans les supports de communication que dans l’environnement digital de la marque.
Logotype & icon
Le système de marque intègre plusieurs configurations afin de répondre aux différents formats et contraintes d’usage. Le logotype principal porte pleinement l’identité OpenTri, tandis que l’icon permet une utilisation plus compacte, notamment pour l’application mobile, les avatars sociaux ou les formats réduits.
Zone de sécurité
Une zone de protection a été définie autour du logotype afin de garantir sa lisibilité et de préserver son impact visuel. Aucun texte, image ou élément graphique ne doit venir perturber cet espace, quelle que soit la taille ou le support d’utilisation.
Palette colorimétrique
La nouvelle palette apporte davantage de caractère et de reconnaissance à OpenTri. Les couleurs principales construisent l’identité de marque tandis qu’un système complémentaire permet de répondre aux différents besoins de communication et aux futurs usages digitaux.
Les quatre disciplines
Natation, cyclisme, course à pied et renforcement disposent chacune d’une couleur dédiée. Ce système permet de différencier visuellement les disciplines tout en conservant une cohérence globale avec la marque et pourra être exploité aussi bien dans l’application que sur les futurs contenus social media.
Typographie principale
Apfel Grotesk constitue la typographie expressive de l’identité OpenTri. Elle est principalement utilisée pour les titres, messages forts et prises de parole de marque afin d’apporter du caractère et de construire une signature immédiatement identifiable.
Charte graphique
Le brandbook définit les principes permettant de conserver la cohérence de l’identité : proportions du logo, associations de couleurs, traitements typographiques et règles de composition. L’objectif est de fournir un cadre suffisamment précis tout en laissant la flexibilité nécessaire aux futures déclinaisons.
Opentri
Refresh de la brand, création du brandbook et conception d’un UI Kit Figma pour poser les premières fondations du futur produit.
OpenTri est une application dédiée à l’entraînement en triathlon, pensée pour accompagner les sportifs dans leur progression à travers la natation, le vélo, la course à pied et le renforcement. Dans le cadre de son évolution, la marque souhaitait moderniser son image et affirmer un nouveau positionnement, avec un univers plus contemporain, plus cohérent et capable de mieux vivre sur l’ensemble de ses points de contact digitaux.
J’ai accompagné OpenTri sur le refresh complet de son identité de marque : évolution du logotype, nouvelle palette colorimétrique, système typographique, direction artistique et formalisation de l’ensemble dans un brandbook. J’ai ensuite traduit cette nouvelle identité dans un UI Kit Figma — couleurs, typographies, iconographie et premiers composants — puis structuré le handoff afin de préparer la future refonte UX/UI de l’application et assurer une continuité entre branding et produit.
Réalisations
BRANDING
GUIDELINES
UI KIT
DESIGN SYSTEM
Stacks
Branding et identité visuelle
Le refresh de l’identité OpenTri avait pour objectif d’accompagner son nouveau positionnement avec une image plus moderne, plus distinctive et plus cohérente avec son ADN sportif. J’ai fait évoluer l’ensemble du système visuel — logotype, couleurs, typographies et principes graphiques — puis formalisé ces choix dans un brandbook pensé pour assurer une utilisation cohérente de la marque sur tous ses futurs points de contact.
Refresh du logotype
Le logotype OpenTri a été retravaillé pour gagner en modernité, en lisibilité et en impact, tout en conservant suffisamment de continuité avec l’identité existante. L’objectif était de créer une signature plus contemporaine, capable de fonctionner aussi bien dans les supports de communication que dans l’environnement digital de la marque.
Logotype & icon
Le système de marque intègre plusieurs configurations afin de répondre aux différents formats et contraintes d’usage. Le logotype principal porte pleinement l’identité OpenTri, tandis que l’icon permet une utilisation plus compacte, notamment pour l’application mobile, les avatars sociaux ou les formats réduits.
Zone de sécurité
Une zone de protection a été définie autour du logotype afin de garantir sa lisibilité et de préserver son impact visuel. Aucun texte, image ou élément graphique ne doit venir perturber cet espace, quelle que soit la taille ou le support d’utilisation.
Palette colorimétrique
La nouvelle palette apporte davantage de caractère et de reconnaissance à OpenTri. Les couleurs principales construisent l’identité de marque tandis qu’un système complémentaire permet de répondre aux différents besoins de communication et aux futurs usages digitaux.
Les quatre disciplines
Natation, cyclisme, course à pied et renforcement disposent chacune d’une couleur dédiée. Ce système permet de différencier visuellement les disciplines tout en conservant une cohérence globale avec la marque et pourra être exploité aussi bien dans l’application que sur les futurs contenus social media.
Typographie principale
Apfel Grotesk constitue la typographie expressive de l’identité OpenTri. Elle est principalement utilisée pour les titres, messages forts et prises de parole de marque afin d’apporter du caractère et de construire une signature immédiatement identifiable.
Charte graphique
Le brandbook définit les principes permettant de conserver la cohérence de l’identité : proportions du logo, associations de couleurs, traitements typographiques et règles de composition. L’objectif est de fournir un cadre suffisamment précis tout en laissant la flexibilité nécessaire aux futures déclinaisons.
UI Kit & fondations du Design System
Dans la continuité du refresh de marque, j’ai traduit la nouvelle identité OpenTri dans un UI Kit Figma destiné à poser les premières fondations du futur Design System de l’application mobile. L’objectif était de créer un langage UI cohérent, documenté et réutilisable, capable d’accompagner la future refonte UX/UI tout en facilitant le handoff avec l’équipe de développement.
Couleurs UI
La palette de marque a été adaptée aux contraintes spécifiques d’une interface mobile. Couleurs principales, secondaires et neutres disposent de rôles clairement définis afin de garantir contraste, lisibilité et cohérence dans les différents contextes d’utilisation.
Couleurs par discipline
Les couleurs dédiées à la natation, au vélo, à la course à pied et au renforcement trouvent également une fonction dans l’interface. Elles permettent de faciliter l’identification des contenus et de créer des repères visuels cohérents entre branding et produit.
Couleurs fonctionnelles
Un système dédié aux états success, warning, error et disabled vient compléter la palette. Ces couleurs permettent de communiquer rapidement le statut d’une action ou d’une information tout en restant cohérentes avec le système visuel global.
Grille & espacements
Les espacements ont été structurés autour d’un système cohérent afin de simplifier la construction des écrans et maintenir un rythme visuel constant. Cette logique facilite également le travail de développement en réduisant le nombre de valeurs arbitraires dans l’interface.
Buttons
Les boutons ont été structurés autour de plusieurs niveaux de priorité afin de distinguer clairement les actions principales, secondaires et plus discrètes. Variantes, tailles et états sont directement intégrés aux composants Figma pour garantir une utilisation homogène.
Chips
Les chips permettent de gérer les filtres, sélections et informations compactes dans l’application. Leur construction prend en compte les différents états — default, selected ou disabled — afin de créer un comportement prévisible pour l’utilisateur.
Composants
Les composants intègrent leurs différents comportements dès leur conception : default, pressed, selected, disabled ou feedback fonctionnel. Cette logique permet d’anticiper les interactions réelles plutôt que de concevoir uniquement des écrans statiques.
Handoff
Le fichier a été structuré pour faciliter le passage du design au développement, avec des styles, composants, variantes et comportements clairement identifiés. Ce travail de handoff permet de limiter les interprétations pendant l’intégration et de préparer une collaboration plus fluide lors de la future refonte de l’application.
UI Kit & fondations du Design System
Dans la continuité du refresh de marque, j’ai traduit la nouvelle identité OpenTri dans un UI Kit Figma destiné à poser les premières fondations du futur Design System de l’application mobile. L’objectif était de créer un langage UI cohérent, documenté et réutilisable, capable d’accompagner la future refonte UX/UI tout en facilitant le handoff avec l’équipe de développement.
Couleurs UI
La palette de marque a été adaptée aux contraintes spécifiques d’une interface mobile. Couleurs principales, secondaires et neutres disposent de rôles clairement définis afin de garantir contraste, lisibilité et cohérence dans les différents contextes d’utilisation.
Couleurs par discipline
Les couleurs dédiées à la natation, au vélo, à la course à pied et au renforcement trouvent également une fonction dans l’interface. Elles permettent de faciliter l’identification des contenus et de créer des repères visuels cohérents entre branding et produit.
Couleurs fonctionnelles
Un système dédié aux états success, warning, error et disabled vient compléter la palette. Ces couleurs permettent de communiquer rapidement le statut d’une action ou d’une information tout en restant cohérentes avec le système visuel global.
Grille & espacements
Les espacements ont été structurés autour d’un système cohérent afin de simplifier la construction des écrans et maintenir un rythme visuel constant. Cette logique facilite également le travail de développement en réduisant le nombre de valeurs arbitraires dans l’interface.
Buttons
Les boutons ont été structurés autour de plusieurs niveaux de priorité afin de distinguer clairement les actions principales, secondaires et plus discrètes. Variantes, tailles et états sont directement intégrés aux composants Figma pour garantir une utilisation homogène.
Chips
Les chips permettent de gérer les filtres, sélections et informations compactes dans l’application. Leur construction prend en compte les différents états — default, selected ou disabled — afin de créer un comportement prévisible pour l’utilisateur.
Composants
Les composants intègrent leurs différents comportements dès leur conception : default, pressed, selected, disabled ou feedback fonctionnel. Cette logique permet d’anticiper les interactions réelles plutôt que de concevoir uniquement des écrans statiques.
Handoff
Le fichier a été structuré pour faciliter le passage du design au développement, avec des styles, composants, variantes et comportements clairement identifiés. Ce travail de handoff permet de limiter les interprétations pendant l’intégration et de préparer une collaboration plus fluide lors de la future refonte de l’application.
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
À vos marques, prêts à démarrer ?
Plus de 30 entreprises m’ont déjà fait confiance
MENU
MENU
MENU
MENU
MENU
MENU
MENU
MENU