Branding, Design UX/UI & Intégration Webflow

Bloom Up

Site vitrine de coaching professionnel & orientation scolaire.
Ordinateur portable MacBook Pro affichant un site web avec le texte principal « De l’aspiration à la réalisation » sur fond bleu avec des éléments graphiques floraux jaunes et blancs.

Contexte

Florent se lançant dans sa nouvelle activité de coaching professionnel, il m'a contacté afin que je réalise son identité visuelle, son logo, ses bannières et templates de carrousel pour LinkedIn, et la conception de son nouveau site web, du design jusqu'à l'intégration sur Webflow.

L’objectif pour Florent est de construire un véritable socle de lancement, capable de poser les fondations de sa communication, renforcer son positionnement et devenir un véritable levier d’acquisition et de conversion pour sa nouvelle activité.

Exploration du besoin

Cadrage, brainstorming & benchmark

La première étape consiste à cadrer le projet et à comprendre les besoins et ambitions de Florent. À travers mon template cahier des charges créé spécialement pour son projet web, je l’accompagne dans la définition de ses objectifs, de sa stratégie de marque, de sa ligne éditoriale, de sa direction visuelle et de sa roadmap.

Une session de brainstorming permet ensuite d’affiner les priorités, complétée par un benchmark concurrentiel et un référentiel visuel pour identifier les opportunités et définir un territoire créatif pertinent.

Présentation du projet Branding & Maquettage Bloom Up avec une liste des sections: Objectif, Cahier des charges, Roadmap, Livrables, Outils, Ressources, accompagnées d'icônes associées.Organigramme numérique contenant des notes de couleur et des images organisées en deux sections : 'Recherches documentation & définition' et 'Définition de sitemap'. La section gauche comporte des blocs de texte, photos de profil, logos de tournesol et notes sur l'esprit général et les activités. La section droite affiche un plan de sitemap avec des cartes colorées décrivant différentes pages et sections d'un site web, incluant headers, boutons CTA, FAQ, et footers avec mentions légales.

Recherches et définitions graphiques

Une fois les fondations de la stratégie de marque et de la direction visuelle établies, je propose un univers graphique en cohérence avec les besoins de Florent : une dimension florale qui évoque l’épanouissement, des couleurs chaudes et pastel qui renforcent la proximité humaine, ainsi que des chemins qui s’entrecroisent pour symboliser l’accompagnement vers un projet professionnel clair et concret.

Typographie & couleurs

Formes & matières

Images & illustrations

Illustration abstraite avec une grande forme jaune ressemblant à une fleur en bas à gauche, trois feuilles blanches au centre à droite, et un rectangle orange en haut à droite, sur un fond bleu foncé.

Recherche en logotype

Conception du logo

Après avoir défini l'univers graphique de Bloom Up, je me lance dans la conception du logo. L’objectif est de traduire visuellement les notions d’accompagnement et d’épanouissement professionnel, tout en évoquant l’idée d’un parcours construit avec cohérence, continuité et clarté.

Six variations of the text 'Bloom UP' logo on a dark blue background in different fonts and styles, including bold, playful, and decorative, with one version featuring leaves sprouting from the letter P.
Phase de recherche du logo.
Cinq variantes du logo «Bloom UP» avec la police en gras et un 'UP' stylisé, sur différents fonds colorés : bleu marine, blanc cassé, orange, crème et jaune.
Logo final avec ses déclinaisons en couleurs.

Structure du site web

Arborescence et parcours utilisateur

Lors de cet atelier avec Florent, nous avons rangé et structuré l'ensemble des contenus.
L'objectif final est d'avoir une arborescence claire et compréhensible pour le futur site.

Sitemap en colonnes colorées représentant les différentes pages d'un site web avec sections correspondantes comme header, présentation, tarifs, FAQ, CTA et footer, incluant pages accueil, offre, coaching professionnel, bilan de compétences, orientation scolaire, à propos, contact, mentions légales, et un brouillon pour la page témoignage.
Atelier de structure du contenu afin d'élaborer l'arborescence du site.

Wireframes & Maquettage

Wireframes

Suite à l'atelier d'idéation sur la structure du site, je passe à l'étape du wireframing. Il s'agit de construire le squelette du site qui intègre le contenu fourni par Florent. Ce squelette doit être au plus proche du résultat final afin de s'assurer de la pertinence des choix en sections, et de l'emplacement des contenus.

Capture d'écran en aperçu d'un site web affichant plusieurs pages en disposition verticale côte à côte, montrant la navigation, des titres, zones de texte, cartes de services, images de substitution et sections de FAQ, dans une palette de couleurs neutres, destiné à un service d'accompagnement professionnel et coaching.
Wireframe du site vitrine Bloom Up.

Maquettes

Une fois que les wireframes ont bien été définis avec Florent, je passe à l'étape finale tant attendue en design : le maquettage. Ainsi je mets en forme et en couleurs les wireframes, avec un design UI qui respecte les contraintes en accessibilité. Au fur et à mesure de l'avancée, nous voyons ensemble pour statuer sur des petits sujets en design, tout en nous assurant de la faisabilité en développement Webflow.

Maquettes d'un site web en français comprenant plusieurs pages avec un design en bleu foncé, jaune et orange, intégrant des sections sur le coaching professionnel, bilan de compétences, orientation scolaire, politique de confidentialité, et présentation d'un coach avec photos et textes explicatifs.
Maquettes finales du site avant l'intégration.

Brandboard

Définition des assets & typographie

Cette étape consiste à finaliser les différents assets, la palette de couleurs et le choix des typographies, en les validant avec Florent. L’objectif est d’établir une charte graphique cohérente et structurée, qui servira de base pour concevoir les maquettes du futur site web.

Palette de couleurs & ses répartitions

Écran de présentation avec le logo 'Bloom UP' en blanc sur un fond bleu ardoise avec un motif ondulé. À gauche, un tableau de couleurs comprenant bleu ardoise, blanc lin, jaune soleil, beige sable, et orange melon. À droite, une carte d'information avec un titre, une description fictive en latin, et un bouton orange intitulé 'Me contacter'.

Patterns

Trois carrés disposés horizontalement sur un fond bleu foncé, chacun avec un motif abstrait différent : à gauche, un motif de vagues sombres ton sur ton, au centre, de larges bandes curves blanches sur fond pêche, à droite, un motif irrégulier en jaune et beige rappelant des taches ou marbrures.

Motifs

Trois formes abstraites colorées sur fond bleu : une forme orange avec trois feuilles beiges, un carré jaune avec le chiffre « 1 » et des lignes ondulées, et une forme beige avec un motif de fleur stylisée.

Textures

Trois carrés avec coins arrondis sur fond bleu foncé : le premier montre une texture granuleuse en nuances d'orange, le deuxième présente un motif abstrait ondulé jaune et bleu marine, le troisième affiche des lignes circulaires bleues sur fond crème.

Typographie

Présentation de la typographie Mitr pour les titres à gauche avec un texte d'exemple en français détaillant un projet d'accompagnement professionnel, et à droite un échantillon de la typographie Objectiv Mk avec alphabets minuscules, chiffres, et phrase d'exemple « Accompagner les professionnels dans la réalisation de leurs objectifs » sur fond bleu.

Illustrations & pictogrammes

Huit icônes sur fond bleu et orange représentant une plante, une main tenant un cœur, deux fleurs, un soleil souriant, des mains protégeant un bouclier avec un cœur, un jeune plant, une fleur avec une coche au centre, et des lignes ondulées aux couleurs arc-en-ciel.

Visuels pour les réseaux sociaux

Bannières & templates de carrousel LinkedIn

Cette étape consiste à finaliser les différents assets, la palette de couleurs et le choix des typographies, en les validant avec Florent. L’objectif est d’établir une charte graphique cohérente et structurée, qui servira de base pour concevoir les maquettes du futur site web.

Bannières LinkedIn

Bannières avec texte français sur fond bleu avec motifs abstraits et une fleur jaune : « De l’aspiration à la réalisation », « Bilan de compétences », « Coaching professionnel », et logo Bloom Up en haut à droite.

Templates de carrousel LinkedIn

Trois cadres carrés alignés horizontalement sur fond bleu marine avec décorations jaunes et orange clair. Cadre gauche avec texte en français parlant du bilan de compétences, coaching professionnel et plan d'action, avec logo Bloom Up. Cadre du milieu affiche un numéro 1, un titre en deux lignes, un texte similaire au cadre gauche, flèches décoratives et logo Bloom Up. Cadre droit présente une photo ronde d'un homme souriant tenant un objet, son nom Florent Champagne, ses qualifications, et un appel à commenter et partager, avec logo Bloom Up en bas.

Charte graphique

Documentation des éléments graphiques

La charte graphique est conçue pour permettre à Florent, ou à tout professionnel du graphisme, de disposer de règles claires pour créer de futurs supports de communication et faire évoluer l’identité visuelle du site web ou des templates pour les réseaux sociaux.

Elle définit également les règles d’utilisation du logo, aussi bien pour les supports digitaux que pour le print, afin de garantir une identité cohérente et reconnaissable sur l’ensemble des supports.

Charte graphique Bloom Up présentant les couleurs principales, secondaires et d’action avec leurs codes HEXA et CMJN. Couleurs principales : Bleu Ardoise foncé (HEX : 1F3B51, CMJN : 91% 71% 46% 38%) et Bleu Ardoise clair (HEX : 284862, CMJN : 89% 68% 41% 27%). Couleur secondaire : Blanc Lin (HEX : FDF1EC, CMJN : 0% 5% 4% 0%). Couleurs d’action : Orange Melon actif (HEX : F7A072, CMJN : 0% 44% 58% 0%), Beige Sable au survol (HEX : FFE499, CMJN : 1% 9% 47% 0%) et Jaune Soleil sélectionné (HEX : FED43F, CMJN : 1% 15% 86% 0%). Répartition des couleurs : 60% couleurs principales, 30% couleur secondaire, 10% couleurs d’action.
Une page de la charte graphique de Bloom Up.

Intégration Webflow

Développement du site web

La phase finale du projet consiste à intégrer les maquettes et les assets sur Webflow. Avant la mise en ligne, je veille à optimiser le SEO/GEO, les performances et le responsive du site. Je réalise ensuite une vérification complète avec Florent afin de m’assurer que chaque détail soit conforme aux attentes avant sa publication.

Je forme Florent en visio et avec des vidéos tutos sur l'utilisation de Webflow pour l'ajout et la modification de textes et de visuels, notamment pour l'ajout des avis clients.

Capture d'écran d'un site web bleu foncé avec des motifs de boucles blanches et le logo Bloom Up en haut à gauche. Le menu principal affiche les options Accueil, Les accompagnements, À propos, avec un bouton orange 'Contactez-moi'. Au centre, le texte principal dit : 'De l’aspiration à la réalisation' en blanc et orange, suivi d'une phrase explicative en blanc et deux boutons : 'Faire mon bilan de compétences' et 'Être coaché·e'.
Intégration du site Bloom Up sur Webflow.

Conclusion

Un projet construit de A à Z, depuis la stratégie de marque et le branding jusqu’à la conception UX/UI et au développement du site sur Webflow.

Un véritable package de lancement pour l’activité de Florent, pensé à partir d’une page blanche pour aboutir à un ensemble de livrables cohérents, lui permettant de communiquer sereinement sur le web et les réseaux sociaux.
‍
Tout au long du projet, Florent m’a accordé sa confiance et son enthousiasme. Aujourd’hui, il dispose d’une identité et d’un site qui correspondent pleinement à son activité et dont il est entièrement satisfait.

Ordinateur portable MacBook Pro affichant une page web en français avec le titre « De l’aspiration à la réalisation » sur fond bleu avec des motifs floraux jaunes.

Mes projets

Quelques projets réalisés avec ☀️

Branding & conception site web

📱 Site web
🖼️ Branding
🎨 UX & maquettes UI
🛠️‍ Intégration Webflow

Pour le lancement de son activité, en accompagnant Florent, j'ai réalisé son identité graphique, son logo, le design de son site, jusqu'à l'intégration au pixel près sur Webflow.

Picto flèche de bouton

Refonte UX / UI de site web

Picto Fleche de bouton

Intégration Webflow

📱 Site vitrine
🛠️ Intégration Webflow

Intégration des maquettes de Claire Pinot pour le nouveau site web de Sonik, qui propose une plateforme SaaS de détection & de conversion de leads dédiée aux équipes Sales, SDR & marketing.

Picto flèche de bouton

Création de site vitrine

Picto Fleche de bouton

Branding et conception
de site vitrine

📱 Site vitrine
🖼️ Branding
🎨 UX & maquettes UI

Conception de l'identité de marque Viatera. Logo, charte graphique, structure UX et maquette UI pour un cabinet de stratégie en hôtellerie de luxe.

Picto flèche de bouton
Ordinateur portable affichant la page web Viatera avec une vue aérienne de paysage rural et texte en français sur la durabilité discrète.

Refonte application mobile

Picto Fleche de bouton

Refonte d'application mobile

📱 Mobile app
🐻‍❄️ Recherche Utilisateur
🎨 UX & Maquette UI

Refonte d'une application mobile de QVT en entreprise qui engage les collaborateurs à améliorer leur santé via le sport, et à réduire leur bilan carbone grâce à la mobilité douce.

Picto flèche de bouton
Présentation de l'application Squadeasy

Création de landing page

Picto Fleche de bouton

Design UI d'un site vitrine

📱 Site web
🧱 Structure UX
🎨 Maquettes UI

Création du site WARD en UX & UI. Cabinet d'architecture et de rénovation dédié à l'immobilier haut de gamme.

Picto flèche de bouton
Présentation du site web Ward

Refonte UX / UI de site web

Picto Fleche de bouton
Picto Fleche vers le haut