Refonte de site, agence de communicationNorad Studio
La landing page que j'avais livrée à Norad Studio, agence de communication, est devenue un site multi-pages : chaque projet a sa page, et tout mène à l'appel.
- Site vitrine
- Refonte multi-pages
- Logo 3D interactif
En bref
- Client
- Norad Studio, agence de communication (graphisme, community management)
- Avant
- Une landing page, livrée par Kawn Studio en novembre 2025
- Après
- Un site multi-pages : accueil, réalisations, une page par projet, contact
- Refonte livrée en
- avril 2026
- Réalisé par
- Kawn Studio, Nabil Aoulad Sbaa
- Outils
- React, Three.js (logo 3D), GSAP, Lenis, Sanity, Cal.com
Ce que Norad attendait de son site
Fin novembre 2025, j'ai livré à Norad une première version de leur site : une landing page. Une seule page pour présenter l'agence, ses services et ses projets. Pour une agence dont le métier est l'image, les projets ont vite manqué de place.
Avec Théo, on a donc décidé d'une refonte : passer à un site multi-pages, où chaque réalisation a sa propre page. De la landing page, seules les couleurs sont restées : le design, le logo en 3D, le fond animé, le contact en étapes, tout a été refait. La demande, elle, restait la même depuis le premier échange : mettre en valeur leurs réalisations.
Sauf qu'un site qui met des projets en valeur peut très bien laisser repartir un prospect sans qu'il ait rien fait. Il regarde, il apprécie, il ferme l'onglet. J'ai donc traité les deux sujets en même temps : les réalisations au premier plan, et un parcours qui amène le visiteur jusqu'au contact sans qu'il ait à le chercher.
Un site d'agence qui ose, et qui mène à l'appel
Une agence de graphisme ne peut pas se présenter avec un site sage : ce serait la première contradiction qu'un prospect remarquerait. Le site de Norad assume donc des effets forts, un logo en 3D, des projets qui défilent en fond, des passages francs du noir au blanc.
Chaque effet a reçu sa place dans le parcours. L'accueil déroule l'argumentaire dans un ordre fixe : ce que fait Norad, ce que ça change pour le client, les projets, les avis, puis les offres et la réservation. Les écrans ci-dessous suivent ce parcours, du haut de l'accueil jusqu'à la page d'un projet.
Le design system, avant les pages
Le site repose sur un design system complet, rangé dans la maquette : les couleurs, les typographies, les espacements, les arrondis, les effets, puis chaque composant du site, du bouton à la carte d'avis, en passant par le champ du formulaire de contact.
Pour chaque couleur de texte, le contraste avec son fond est calculé, opacité par opacité. Sur les sections claires, aucun paragraphe ne descend sous 70 % d'opacité : c'est le seuil qui garde le texte lisible et conforme au niveau AA des règles d'accessibilité (WCAG).
Pour Norad, ce travail se voit surtout plus tard. Un projet ajouté dans l'espace d'administration prend la carte projet du système, sans réglage. Et si Norad veut une page de plus, que ce soit avec moi ou avec un autre développeur, elle se construit avec des pièces qui existent déjà et ressemble au reste du site.
Les temps forts du site
Le logo en verre, les projets en fond
À l'ouverture, le symbole de Norad, un astérisque en verre, tourne au centre de l'écran. On l'attrape à la souris ou au doigt, on le lance, et il ralentit sur sa lancée. Derrière lui, les projets de Norad défilent sur trois rangées, brouillés d'effets de vieille télévision. Le travail de l'agence se voit avant le premier mot.
La preuve sur fond blanc
Après le noir du haut de page, l'accueil passe au blanc pour tout ce qui prouve : les services, les projets, les bénéfices, l'équipe, les avis. Dans les cartes de services, les visuels s'animent et le petit graphique monte au moment où on les lit. L'œil reste sur chaque carte le temps de la comprendre, dans l'ordre voulu.
Le noir revient pour décider
Quand vient le moment de choisir, l'accueil repasse au noir : le changement de couleur annonce le changement d'étape. Les offres de Norad s'y présentent avec une bascule entre graphisme et communication, trois offres par onglet. Le prospect ne compare que celles qui correspondent à son besoin.
Réserver sans quitter l'accueil
Juste après les offres, le calendrier de Norad est intégré à la page : le prospect choisit son créneau d'appel sans changer d'onglet. D'un bout à l'autre du site, un seul bouton revient, avec le même libellé, « Planifier un appel gratuit ». La prochaine étape ne change jamais de nom.
Une question par écran
La page contact pose quatre questions, une à la fois : le nom, l'adresse e-mail, le type de projet, puis le message. Le type se choisit en un clic, et une barre orange montre où on en est. Après l'envoi, l'écran annonce une réponse de Norad sous 24 heures. Norad sait d'emblée quel projet on lui soumet.
Un filtre qu'on peut partager
La page des réalisations rassemble tous les projets de Norad, triés par catégorie. Le filtre choisi s'inscrit dans l'adresse de la page : Norad peut envoyer à un prospect un lien qui n'affiche que les projets qui le concernent, sans lui demander de chercher.
Une page par projet
C'est ce qui a motivé la refonte : chaque réalisation a maintenant sa propre page, avec sa grande image, sa description, son contenu et sa galerie. Norad la crée elle-même dans Sanity, comme on remplit une fiche, puis le projet apparaît sur la page des réalisations. Aucun développeur n'intervient.
Le même soin au téléphone
La version téléphone a sa propre maquette. Le logo 3D passe en haut, le titre et les boutons en bas, sous le pouce, et le logo se fait tourner au doigt. L'en-tête se retire quand on descend et revient dès qu'on remonte. Le menu glisse depuis la droite, précédé de deux calques sombres.
Norad publie ses projets sans m'attendre
Le site est relié à un espace d'administration, Sanity. Norad y ajoute un projet comme on remplit une fiche : titre, image principale, description, catégories, galerie, contenu. Le projet apparaît sur la page des réalisations avec sa propre page, et ses images rejoignent le fond animé de l'accueil. Les images se déposent telles quelles, en JPG ou en PNG : le site les sert dans un format plus léger. Rien de tout cela ne demande de développeur.
- Les projets : titre, images, description, catégories, galerie
- La FAQ
- Les catégories des réalisations
- Les images du fond animé, reprises des projets
- Les témoignages
Ce que j'ai livré
- Le design system dans la maquette : couleurs et contrastes calculés, typographies, espacements, effets, et chaque composant du site
- Les maquettes de chaque écran, sur ordinateur et au téléphone : accueil, réalisations, page projet, contact dans ses trois états, menu ouvert, mentions légales
- Le site, en code sur-mesure, sans template ni constructeur de pages
- Le logo de Norad en 3D et le fond animé de leurs projets
- Le parcours vers l'appel : un bouton unique sur tout le site, le calendrier intégré à l'accueil, le contact en quatre étapes
- L'espace d'administration Sanity : projets, FAQ, catégories et témoignages
- L'accessibilité vérifiée : contrastes au niveau AA, menu fermé ignoré par la navigation au clavier
« En tant qu'agence de comm', notre site doit être irréprochable. Kawn a créé une vitrine qui sublime nos réalisations tout en restant ultra-pratique pour nos prospects. L'équilibre parfait. »
Théo C.Fondateur, Norad StudioTon site ne montre plus ce que tu fais, ou ne fait pas réserver d’appels ? C’est ce dont on parle pendant les 30 minutes de l’appel découverte.
Réserver mon appel · Une refonte comme celle de Norad · Créer un site vitrine · Un autre site d’agence : Nova Créa
Sois là quand tes clients te cherchent.
Trente minutes, gratuites, pour savoir ce qu'il te faut. Le devis suit sous 24 h, et ton site est garanti trois mois après sa mise en ligne.