# Griffon Noir > Studio web à Lyon fondé par Maéva Hostalier et Eric Huguenin : stratégie, design, développement et hébergement de sites sur-mesure, sans page builder. Studio indépendant de stratégie, design et développement web, basé à Lyon (Auvergne-Rhône-Alpes, France). Le studio conçoit, développe et héberge des sites sur-mesure, sans thème acheté ni page builder (WordPress, Astro ou Payload CMS selon le projet). Un duo suit chaque projet, du cadrage à la mise en ligne. Site en français et en anglais. - Maéva Hostalier : Co-fondatrice & Directrice de création (UX design, UI design, Design system, Branding, Illustration, Typographie), https://maevahostalier.com/ - Eric Huguenin : Co-fondateur & Directeur technique (Développement web, WordPress, WebGL, Motion design, Hébergement web, Gestion de projet), https://erichuguenin.com/ - Expertises : Stratégie web et conseil digital, Design web UX/UI et branding, Développement web sur-mesure, Hébergement web haute performance - Domaines : Stratégie web, Audit de site web, Architecture de l'information, UX design, UI design, Design system, Branding, Identité visuelle, Développement web sur-mesure, WordPress, Astro, Payload CMS, WebGL, Motion design, Core Web Vitals, Hébergement web, Accessibilité web - Zone : Lyon, Auvergne-Rhône-Alpes, France, projets à distance - Contact : contact@griffonnoir.com - LinkedIn : https://www.linkedin.com/company/griffonnoir/ - Instagram : https://www.instagram.com/griffonnoir/ Texte complet de la version française du site. Version anglaise sous /en/ : pages, adresses et descriptions dans https://griffonnoir.com/llms.txt. Full text of the French version. English version under /en/: pages, URLs and descriptions in https://griffonnoir.com/llms.txt. ## Pages ### Accueil https://griffonnoir.com/fr/ - Studio - Expertises - Réalisations - Journal - Démarrer un projet #### Studio web sur-mesure, sans compromis. Voir nos expertises Ce que vous projetez en ligne doit vous ressembler, vous appartenir, et tenir dans le temps. Chaque projet est choisi. Nous nous y engageons entièrement, comme si c’était le nôtre. Découvrir le studio #### nos expertises #### Quatre expertises complémentaires. Pensées ensemble depuis le premier jour. Voir toutes nos expertises 01 stratégie Audit, arborescence, gestion de projet. Nous cadrons votre projet avant d’ouvrir Figma ou un éditeur de code, pour que chaque décision soit justifiée. Découvrir 02 design UX, UI, branding, identité visuelle. Des interfaces conçues pour vos utilisateurs, sans compromis technique. Découvrir 03 développement Code sur-mesure sans page builder ni thème acheté. WordPress, Payload CMS ou Astro selon le projet. Des sites rapides, maintenables, dont vous gardez le contrôle. Découvrir 04 infrastructure Hébergement haute performance, noms de domaine, configuration serveur. Nous gérons l’infrastructure pour que vous n’ayez pas à y penser. Découvrir #### nos réalisations #### Chaque projet est conçu, designé et développé sur-mesure. Voir tous les projets Ozone Light Luxe & design Site de marque Site vitrine Hebras Avocats Juridique Site vitrine Label Experience Agence & studio Site vitrine Portfolio Voir tous les projets #### Notre approche #### Un process simple et transparent, avec des validations claires à chaque phase : aucune surprise à la livraison. Démarrer un projet 01 cadrage 30 minutes pour comprendre votre besoin, votre contexte, vos objectifs. 02 stratégie Arborescence, stratégie de contenu, spécifications. On structure avant de concevoir. 03 design Benchmark, wireframes, design system, maquettes haute fidélité. 04 développement Code sur-mesure, animations, intégration des contenus, optimisation des performances. 05 lancement Déploiement, recette, formation à la gestion du back-office. #### Le studio Découvrir le studio #### derrière griffon noir #### Un studio de création web sur-mesure à Lyon. Eric Huguenin et Maéva Hostalier couvrent ensemble l’intégralité de la chaîne, du cadrage stratégique au déploiement. Peu de projets, choisis, maîtrisés de bout en bout. Stratégie, design, développement, infrastructure. Un interlocuteur direct. Du brief à la mise en ligne. Découvrir le studio #### Chiffres clés AWWWARDS, JURY OFFICIEL #### +28 ans d'expérience cumulés #### +200 sites en production #### +70 distinctions internationales ### Studio https://griffonnoir.com/fr/studio/ #### Un studio de création web. Conçu pour aller jusqu’au bout. Griffon Noir, c’est une directrice de création et un développeur qui travaillent côte à côte. Nous confrontons nos deux points de vue sur chaque arbitrage, du premier cadrage à la mise en ligne. Vous obtenez un site qui parle à votre audience et qui tient dans le temps. Vous travaillez avec les deux personnes qui conçoivent et codent votre site, de la stratégie au déploiement. Aucun chef de projet ne s’intercale entre vous et le travail. #### notre modèle #### Un studio indépendant brand, design et développement. Sur un projet web classique, le designer livre ses maquettes et le développeur les découvre après coup. Vous payez les allers-retours. Ici, Maéva dessine et Eric intègre sur le même projet dès le premier jour, avec des périmètres écrits et une exigence commune. Nous commençons par un cadrage écrit : stratégie de contenu, arborescence, spécifications techniques et fonctionnelles. Maéva s’appuie dessus pour le benchmark visuel, le design system et les maquettes haute fidélité. Eric enchaîne sur le développement, les animations et la mise en ligne. Nous recettons le site à quatre mains jusqu’à la livraison. Eric reste votre interlocuteur sur le pilotage et la technique, du brief à la livraison. Maéva intervient dès que le projet touche au design. Vous écrivez à deux personnes, et toutes les deux connaissent votre projet. #### Éric Huguenin Co-fondateur & Directeur technique Développeur web depuis 2010, Eric pilote les projets du début à la fin : cadrage stratégique, architecture de contenu, développement sur-mesure, hébergement et suivi technique. Point de contact principal du client tout au long du projet. #### Maéva Hostalier Co-fondatrice & Directrice de création Designer depuis 2016, Maéva couvre l’ensemble du périmètre créatif : UX, UI, wireframes, design system, branding, illustration, typographie. Elle intervient dès que le projet touche au design, de la définition de l’identité visuelle à la maquette finale prête à intégrer. #### clients #### Ils nous font confiance. #### Grands comptes & institutionnels Canal+ Décathlon Disney Enedis Engie Krups La Poste Nexans REKA Samsung SAP Sonepar Thello Truffaut Unicredit #### Luxe et beauté Clarins Joly Design L'Oréal Ozone Light [01] Piaget #### Cabinets juridiques et finance Aures Berenice Avocats BHB Bretlim Fortunity Hebras Avocats [01] Oyat Parquest PDGB #### Agences de communication BETC Creano Curius Epok Design [01] Ezperanza Futurative Halley&co [01] Havas Havas Digital Factory Octave Seenk #### Divers 1D Lab Asmodee [01] Athem Bleher Architect Der Löwe [01] Jam Experience La Thé Box Label Experience [01] Moka Caravanes Nelio Oniri Bijoux #### distinctions internationales #### Notre exigence est reconnue par nos pairs. #### Eric Huguenin – Portfolio 25 Awwwards : Honorable Mention CSS Design Awards : Website Of The Day CSS Design Awards : Special Kudos CSS Design Awards : UI design CSS Design Awards : UX design CSS Design Awards : Innovation #### Epok Design 24 #### Asmodee : Legend Of The Five Rings #### Ozone Light #### 1J1D Awwwards : Mobile Excellence #### Irène Paris #### Epok Design 20 #### Christie Tang – Portfolio #### Athem #### Agence Mayflower #### Orus Executive Search Awwwards : Site Of The Day #### Eric Huguenin – Portfolio 18 #### Studio OUAM Awwwards : Developer Award #### Simone & Simon #### Creano #### Bearideas #### Eric Huguenin – Portfolio 15 #### Eric Huguenin – Portfolio 14 #### Independent of the year Awwwards – Nominated – 2018 Awwwards – Nominated – 2017 #### Jury Member Awwwards – 2026 Awwwards – 2025 Awwwards – 2024 Awwwards – 2023 Awwwards – 2022 Awwwards – 2021 Awwwards – 2020 Awwwards – 2019 ### Expertises https://griffonnoir.com/fr/expertises/ #### Stratégie, design et développement #### Nous vous accompagnons de la vision stratégique à la réalité technique Chez Griffon Noir, stratégie, design, développement et infrastructure ne sont pas des services vendus séparément, par des prestataires différents. Ce sont quatre dimensions d’un même métier, pensées ensemble depuis le premier jour du projet. #### Notre vision #### Le cycle griffon noir Le plus gros risque d’un projet web, c’est la perte d’information entre le conseil, le design et le code. Chez Griffon Noir, ces disciplines dialoguent en permanence, parce que le directeur technique et la directrice de création travaillent ensemble dès le premier jour. Notre philosophie : pas de silo. Pas de traduction entre intervenants. Ce qui est conçu est ce qui est développé. 01 le stratège sécurise l'investissement en figeant le périmètre et l'arborescence, et fournit à la designer une base solide pour travailler. 02 la designer crée des interfaces pensées pour la réalité du projet, avec une connaissance directe des contraintes techniques. 03 le développeur produit un code optimisé pour les Core Web Vitals et l'infrastructure, et participe à la recette du design avant intégration. #### Les 4 piliers #### Nos services en détail #### Stratégie & conseil Avant de concevoir quoi que ce soit, nous comprenons votre contexte, vos objectifs et vos utilisateurs. Audit de l’existant, arborescence, stratégie de contenu, gestion de projet : nous cadrons le projet pour que chaque décision soit justifiée. Découvrir cette expertise Solutions proposées - Audit - Arborescence - Stratégie de contenu - Gestion de projets #### Design & identité Des interfaces pensées pour vos utilisateurs et réalisables sans compromis techniques. UX, UI, branding, identité visuelle : nous concevons des expériences cohérentes qui servent votre objectif business. Solutions proposées - Wireframes UX - Maquettes UI haute-fidélité - Design System - Branding et identité visuelle #### Développement sur-mesure Du code sur-mesure, propre et maintenable. WordPress pour les sites avec gestion de contenu client, Payload CMS pour les architectures headless, Astro ou statique quand le projet n’a pas besoin d’un CMS. Zéro thème acheté, zéro page builder. Des sites rapides, évolutifs, dont vous gardez le contrôle. Solutions proposées - Sites vitrines - Sites e-commerce - CMS ou Headless - Optimisation des performances (Lighthouse 90+) #### Infrastructure & hébergement Nous choisissons le serveur, le configurons pour votre site et gérons vos noms de domaine. Vous récupérez un environnement prêt et documenté, et une seule personne à joindre en cas de panne. Solutions proposées - Vitesse de chargement - Sécurité renforcée (SSL, sauvegardes) - Disponibilité maximale - Gestion simplifiée #### Nous choisir #### Pourquoi nous confier votre projet ? 01 Design et développement dans le même studio à Lyon Le designer et le développeur ne se découvrent pas au moment de l’intégration. Ils ont travaillé ensemble depuis le cadrage. Ce que vous voyez en maquette est ce qui sera mis en ligne, sans perte, sans interprétation. 02 Performance radicale Nous visons un score Lighthouse de 90 ou plus, et la plupart de nos sites approchent 100. Un site rapide sert votre référencement et votre conversion. 03 Indépendance technique totale Zéro page builder, zéro thème pré-fait. Vous obtenez un site léger, sans code superflu, qui ne dépend d’aucune licence tierce. 04 Propriété et liberté Vous êtes le seul propriétaire légal de votre code, de vos données et de vos accès. Technologies standards et open-source : si vous changez de partenaire, n’importe quel expert reprend le flambeau. 05 Sobriété et durabilité Nous choisissons la stack technique la plus simple pour répondre à votre besoin. Coût de maintenance réduit, durée de vie prolongée. #### FAQ #### Questions fréquentes Puis-je choisir une seule expertise (ex: uniquement le design ou le développement) ? Absolument. Notre valeur est maximale sur un projet clés en main, mais nous intervenons aussi en renfort sur des points précis : création d’un design system pour une équipe interne, audit de performance pour un site lent, ou migration vers une infrastructure plus robuste. Comment garantissez-vous la rapidité du site ? La performance s’intègre dès le premier jour, pas en fin de projet. Design : on évite les éléments graphiques inutilement lourds. Développement : on utilise le moins de plugins possible et un code optimisé. Infrastructure : on déploie sur des serveurs configurés pour la stack choisie (cache Redis, Nginx). Est-ce que je serai propriétaire de mon site ? Oui, à 100%. Vous possédez votre nom de domaine, votre hébergement et le code source. Contrairement aux agences qui vous « louent » votre site via des outils propriétaires, nous utilisons des technologies standards et open-source. Vous êtes libre. Travaillez-vous avec des équipes internes ou d'autres prestataires ? Oui. Nos livrables sont pensés pour la collaboration. Les fichiers Figma sont annotés pour les développeurs et notre code est documenté. Nous pouvons intervenir comme une extension technique de votre équipe ou collaborer avec votre DSI. Combien coûte un projet type avec Griffon Noir ? Chaque projet est sur-mesure. Le prix dépend de la complexité des fonctionnalités et du volume de contenu. Après une phase de cadrage, nous fournissons un devis forfaitaire. Pas de frais cachés. Proposez-vous un service de maintenance après le lancement ? Oui. Nous proposons des contrats de maintenance pour gérer les mises à jour de sécurité, les sauvegardes et le monitoring serveur. Quel est le délai moyen pour la création d'un site complet ? Pour un projet incluant Stratégie, Design et Développement, comptez entre 6 et 12 semaines. Ce délai permet de respecter chaque phase de validation et de garantir un niveau de finition irréprochable. ### Stratégie et conseil https://griffonnoir.com/fr/expertises/strategie-et-conseil/ Expertises / Stratégie et conseil #### Stratégie et conseil Résumer avec l'IA : claude chatgpt perplexity mistral nous contacter pour cette prestation #### Bien concevoir commence par bien comprendre. Nous auditons votre site actuel, dessinons l’arborescence et identifions vos utilisateurs avant d’ouvrir Figma. Cette phase décide du périmètre, du planning et du budget ; la sauter revient à découvrir en cours de route que la moitié des pages manquent. #### méthodologie #### Stratégie web : convertir vos objectifs business en architecture performante. Nous commençons par vos flux métiers, vos cibles et vos objectifs de conversion. Le design et le code viennent après, une fois que nous savons ce que le site doit produire. Nous figeons le périmètre fonctionnel et l’arborescence avant de poser le premier pixel. Vous savez donc ce que vous achetez, et chaque composant que nous dessinons sert une page identifiée. Nous pesons chaque fonctionnalité contre son coût de maintenance, et nous construisons l’arborescence autour des mots-clés que vos clients tapent. Nous dessinons ensuite à partir de vos vrais messages. Le périmètre étant fixé dès le premier jour, la date de livraison et le budget tiennent. #### Notre périmètre #### La stratégie sur-mesure #### Audit de site existant Avant de parler refonte, nous auditons votre site : performances techniques, parcours utilisateur et architecture de contenu. Vous repartez avec la liste des problèmes, leur cause et l’ordre dans lequel les corriger. Ce que nous analysons - Technique : temps de chargement, Core Web Vitals, sécurité, accessibilité - UX : parcours de navigation, clarté des messages, ergonomie mobile - Contenu et SEO : arborescence, balises, maillage interne, qualité éditoriale - Livrable : rapport annoté, recommandations classées par priorité #### Gestion de projet Coordonner un designer, un développeur, un hébergeur et un rédacteur occupe quelqu’un à plein temps, et ce quelqu’un est souvent le client. Nous tenons ce rôle : planning, jalons et validations. Vous parlez à une seule personne, qui sait où en est votre site. Ce que ça change pour vous - Vous ne faites plus le relais entre prestataires - Nous décidons en connaissant tout le projet - Nous anticipons les imprévus au lieu de les découvrir - Un seul contrat, un seul interlocuteur - Livrable : planning détaillé, jalons de validation, comptes-rendus et décisions écrites #### Arborescence & stratégie de contenu L’arborescence est le plan de votre site : les pages, leur enchaînement et ce que chacune contient. Nous la fixons avant la maquette, pour ne pas dessiner une interface que vos contenus ne rempliront pas. Ce que nous définissons ensemble - Liste et hiérarchie des pages - Objectif de chaque page : informer, convertir, rassurer - Contenu attendu par page : titres, textes, images, CTA - Profils utilisateurs (personas) et leurs parcours types - Pages cibles et intentions de recherche pour le SEO - Livrable : arborescence annotée, wireframes de structure, brief éditorial par page #### méthode #### Comment nous travaillons 01. Nous écoutons Un appel de 30 minutes pour comprendre votre contexte, vos objectifs et vos contraintes. Nous ne vous proposons rien à ce stade. 02. Nous analysons Si vous avez déjà un site, nous l’auditons. Pour une création, nous étudions vos concurrents, vos cibles et vos besoins. 03. Nous structurons Vous recevez l’arborescence, le brief éditorial et nos recommandations classées par priorité. Maéva part de ce socle pour le design. #### nous choisir #### Cette prestation est faite pour vous si… 01 Vous dirigez une PME ou une startup à Lyon et voulez un conseil web structuré avant de vous lancer 02 Vous lancez un nouveau site et voulez partir sur des bases solides 03 Votre site actuel ne donne pas les résultats attendus 04 Une expérience ratée avec un prestataire vous a laissé des questions sans réponse 05 Vous voulez un devis juste, fondé sur un périmètre écrit #### FAQ #### Questions fréquentes Quelle est la différence entre un chef de projet et un développeur ? Le développeur construit le site. Le chef de projet vérifie que l’équipe construit ce qu’il faut, au bon moment et dans le budget prévu. Nous tenons les deux rôles, et nous arbitrons chaque choix technique au regard de vos objectifs. Comment communiquez-vous pendant le projet ? Nous ouvrons un espace de suivi partagé (Notion ou équivalent) avec le planning, les documents et l’avancement des tâches. Vous savez qui fait quoi sans fouiller vos mails. Avez-vous besoin que je fournisse tous les textes dès le début ? Ce serait l’idéal, et ça arrive rarement. L’arborescence et les briefs éditoriaux vous donnent la structure de chaque page : vous rédigez ensuite dans un cadre défini, à votre rythme. C'est quoi, une arborescence ? Le squelette de votre site : l’organisation de l’information, bien au-delà du menu. Une bonne arborescence mène votre visiteur à ce qu’il cherche en trois clics, et montre à Google vos sujets principaux. Qu'est-ce qu'un persona, et en quoi ça m'aide ? Un persona décrit un profil type de vos utilisateurs, par exemple « Marc, responsable logistique pressé ». Avec ces profils, nous concevons des parcours qui répondent aux questions de vos vrais clients. Pourquoi parlez-vous de SEO dès la phase de stratégie ? L’arborescence décide des pages que Google pourra classer. Si nous la construisons sans les mots-clés de vos clients, aucune optimisation technique ne rattrapera la structure ensuite. #### nos autres expertises Voir toutes nos expertises 01 design UX, UI, branding, identité visuelle. Des interfaces conçues pour vos utilisateurs, sans compromis technique. Découvrir 02 développement Code sur-mesure sans page builder ni thème acheté. WordPress, Payload CMS ou Astro selon le projet. Des sites rapides, maintenables, dont vous gardez le contrôle. Découvrir 03 infrastructure Hébergement haute performance, noms de domaine, configuration serveur. Nous gérons l’infrastructure pour que vous n’ayez pas à y penser. Découvrir ### Design https://griffonnoir.com/fr/expertises/design-et-identite/ Expertises / Design & identité #### Design web et Branding Résumer avec l'IA : claude chatgpt perplexity mistral nous contacter pour cette prestation #### Des interfaces pensées pour être utilisées, pas seulement admirées. Nous dessinons des interfaces à Lyon. Chaque écran conduit votre visiteur vers une action précise et lui explique ce que vous vendez. Nous jugeons une maquette sur ce qu’elle rapporte une fois en ligne. #### méthodologie #### Notre approche du design Beaucoup d’équipes ouvrent Figma avant d’avoir écrit une ligne de contenu. Elles remplissent les maquettes de Lorem Ipsum, dessinent des effets que personne n’a chiffrés côté technique et sautent l’étape des wireframes. Au moment d’intégrer, le développeur demande de tout redessiner parce que les vrais textes ne rentrent pas. Nous vous remettons un cahier des charges avant d’ouvrir Figma : liste des pages, contenus réels, fonctionnalités, benchmarks. Maéva dessine ensuite avec les contraintes techniques d’Eric sous les yeux et vos objectifs commerciaux écrits noir sur blanc. Nous écrivons le contenu avant de dessiner la moindre page. Maéva conçoit desktop, tablette et mobile dans le même mouvement, et vérifie l’intégration au fur et à mesure avec Eric. Vous recevez un système de composants réutilisables, que vos futures pages réemploient sans nouvelle maquette. #### Notre périmètre #### Un ensemble de services créatifs complet #### UX design L’UX précède le design visuel : par où votre visiteur arrive, ce qu’il cherche, et comment vous l’amenez à le trouver. Vous ne verrez pas ce travail sur la maquette finale, vous le lirez dans votre taux de rebond. Nos services en UX design - Définition des personas (profils d'utilisateurs types) - Cartographie des parcours utilisateurs (user flows) - Architecture d'information : hiérarchie de contenu par page - Wireframes détaillés : structure et interactions, annotés - Spécifications fonctionnelles par composant #### UI design L’UI, c’est la couche visuelle : couleurs, typographie, espacement, composants. Maéva y transpose votre identité de marque pour l’écran et documente chaque valeur, pour qu’Eric intègre la maquette au pixel près. Nos services en UI design - Définition de la direction artistique (palette, typographie, ton visuel) - Maquettes haute fidélité desktop, tablette et mobile - Design system : composants réutilisables, règles d'usage - Annotations techniques pour le développement #### branding & identité visuelle Votre logo, votre palette et votre typographie décident de ce que le site peut faire ensuite. Nous créons ou refondons cette identité quand le projet le demande : logo, charte graphique, déclinaisons print et digitales, illustration sur-mesure. Nos services en branding - Création ou refonte de logo - Charte graphique complète (couleurs, typographie, règles d'usage) - Déclinaisons digitales et print - Illustration sur-mesure - Systèmes d'icônes #### prototypage Un prototype interactif simule le site avant qu’Eric écrive la première ligne de code : vous cliquez, vous naviguez, vous voyez les transitions. Vos retours portent alors sur un objet que vous avez manipulé. Grâce au prototypage - Les retours à cette étape coûtent 10 fois moins cher qu'en cours de développement - Vous validez le ressenti avant l'investissement en code #### validation #### Valider ensemble, toujours Nous vous montrons un benchmark visuel avant la première maquette, pour nous mettre d’accord sur le rendu que vous attendez. Nous présentons ensuite les maquettes desktop, puis les déclinons sur les autres formats. Vous validez chaque étape avant que nous passions à la suivante. Vous disposez de deux tours de retours. Au premier, sur les maquettes desktop, vous réagissez à la direction et nous ajustons. Au second, sur la version complète (desktop, mobile et prototype), nous affinons les détails. Au-delà, chaque tour supplémentaire fait l’objet d’un avenant, ce qui nous permet de tenir le même niveau de finition jusqu’au bout. #### nous choisir #### Cette prestation est faite pour vous si… 01 Vous avez besoin de maquettes pour un développement existant ou prévu 02 Vous voulez un design cohérent avec votre identité de marque, adapté au web 03 Vous n'avez pas encore d'identité visuelle et souhaitez partir sur des bases solides 04 Vous repartez de zéro et voulez un design pensé par quelqu'un qui connaît les contraintes techniques 05 Vous recherchez un designer UX/UI à Lyon capable de travailler en lien direct avec le développeur dès le cadrage 06 Vous avez des maquettes existantes qui ne correspondent pas à ce qui a été développé #### FAQ #### Questions fréquentes Pourquoi ne pas commencer par les maquettes en couleur ? Les wireframes valident la structure et le parcours sans que l’esthétique détourne l’attention. Nous corrigeons une structure bancale à ce stade, avant qu’elle nous oblige à redessiner des maquettes entières. Incluez-vous le design mobile dans vos prestations ? Oui, sur chaque projet : plus de la moitié du trafic web vient du mobile. Maéva conçoit des écrans propres au mobile (menus, ergonomie tactile, poids des éléments) au lieu de réduire la version desktop. Comment se passent les échanges pendant la phase de création ? Nous travaillons dans Figma, où vous suivez l’avancée en temps réel. Vous laissez vos commentaires sur les zones des maquettes qui vous posent question. Le design influence-t-il la vitesse de chargement du futur site ? Oui. Des images lourdes, des polices exotiques ou des animations gratuites ralentissent un site. Maéva connaît ces contraintes techniques et pèse chaque choix graphique contre son effet sur les Core Web Vitals. Qu'est-ce qu'un design system, et à quoi sert-il ? Une bibliothèque de composants réutilisables : boutons, formulaires, typographies. Vos futures pages assemblent ces composants, sans repartir de zéro ni perdre en cohérence. Pouvez-vous travailler à partir de ma charte graphique actuelle ? Oui. Nous adaptons votre identité aux contraintes du web : contrastes, accessibilité, lisibilité à l’écran. Si votre charte a vieilli, nous pouvons aussi la moderniser. Que vais-je recevoir à la fin de la prestation ? L’accès complet au fichier Figma source : maquettes haute fidélité desktop et mobile, prototype navigable, design system et spécifications techniques pour le développement. Pour le branding, vous recevez aussi les fichiers sources (AI, SVG). Puis-je vous confier le design et faire développer le site ailleurs ? Oui. Nous livrons des maquettes annotées et structurées : un développeur tiers les intègre sans avoir à deviner. C'est quoi, un prototype interactif navigable ? Un lien Figma qui simule le site : vous cliquez sur les boutons, ouvrez les menus et passez d’une page à l’autre. Vous pouvez le montrer à vos associés ou à vos investisseurs avant le début du développement. #### nos autres expertises Voir toutes nos expertises 01 stratégie Audit, arborescence, gestion de projet. Nous cadrons votre projet avant d’ouvrir Figma ou un éditeur de code, pour que chaque décision soit justifiée. Découvrir 02 développement Code sur-mesure sans page builder ni thème acheté. WordPress, Payload CMS ou Astro selon le projet. Des sites rapides, maintenables, dont vous gardez le contrôle. Découvrir 03 infrastructure Hébergement haute performance, noms de domaine, configuration serveur. Nous gérons l’infrastructure pour que vous n’ayez pas à y penser. Découvrir ### Développement https://griffonnoir.com/fr/expertises/developpement-sur-mesure/ Expertises / Développement #### Développement sur-mesure Résumer avec l'IA : claude chatgpt perplexity mistral nous contacter pour cette prestation #### Du code qui tient. Des sites qui durent. Eric développe votre site à Lyon, sans thème acheté ni page builder. Le code est documenté, la page charge en moins de deux secondes, et un autre développeur pourra reprendre le projet dans cinq ans. #### méthodologie #### La bonne technologie. Pas la plus impressionnante. Un site vitrine de PME et une application métier n’ont ni les mêmes contraintes de gestion de contenu, ni le même budget de maintenance. Nous choisissons donc la stack après avoir lu votre cahier des charges. WordPress répond à la majorité des sites vitrines : mature, documenté, et vous le prenez en main sans formation longue. Tout dépend de la façon dont on le développe. Un thème sur-mesure sans plugin superflu tient la comparaison avec un site statique, et vous gardez la main sur vos contenus. Quand WordPress ne convient pas, nous vous le disons et nous vous montrons le calcul. Certains projets tiennent dans quelques pages HTML statiques, d’autres demandent Astro ou Payload : nous partons alors sur cette base. #### Notre périmètre #### Le développement sur-mesure #### WordPress sur-mesure WordPress reste rapide et simple à gérer tant qu’on ne l’alourdit pas d’un thème acheté ou d’un page builder. Eric écrit des thèmes sur-mesure en PHP, avec des blocs Gutenberg et ACF Pro, sans Divi, Elementor ni WPBakery. Ce que comprend votre site - Thème sur-mesure, sans dépendance à un thème tiers - Blocs Gutenberg sur-mesure : vous modifiez chaque section depuis le back-office - Back-office simplifié et documenté, pour éditer sans casser la mise en page - Code modulaire, aux standards WordPress (WPCS), facile à faire évoluer - Livrable : thème complet et documentation du back-office #### Statique & headless Un site dont le contenu bouge peu, ou qui doit séparer l’affichage de l’administration, se passe d’un CMS classique. Nous le construisons alors avec Astro ou Payload, en sur-mesure là aussi. Selon le projet - Site statique (Astro, HTML/CSS/JS) : contenu stable, vitesse maximale, rien à attaquer côté serveur - Headless avec Payload CMS : API de contenu, back-office sur-mesure, affichage et administration découplés #### Performances & Core Web Vitals Google mesure la vitesse et la stabilité de votre site, et classe les sites lents plus bas. Nous visons un score Lighthouse d’au moins 90 sur les quatre critères. Les seuils que nous visons - LCP (affichage du plus grand élément) : moins de 2,5 s - INP (réaction à un clic) : moins de 200 ms - CLS (stabilité pendant le chargement) : moins de 0,1 - Images en WebP, dimensionnées et chargées au besoin - CSS et JavaScript minifiés, découpés pour ne charger que l'utile - Cache serveur, CDN, compression et polices allégées #### Maintenance & évolution Après la mise en ligne, WordPress et ses extensions reçoivent des mises à jour et des correctifs de sécurité, et vos contenus changent. Notre forfait mensuel couvre ce suivi. Les corrections et les évolutions se décomptent d’un volume d’heures fixé ensemble. Ce que couvre le suivi - Mises à jour de WordPress et des extensions, testées avant déploiement - Surveillance de la sécurité et de la disponibilité - Sauvegardes automatiques quotidiennes - Corrections et évolutions, sur le volume d'heures prévu #### ce que nous ne faisons pas #### Nos refus, et leurs raisons Pas de page builder Elementor, Divi ou WPBakery produisent un code lourd, que personne ne sait maintenir ni optimiser : un site construit ainsi plafonne sur Lighthouse. Trois ans plus tard, le développeur suivant ne comprend plus comment il fonctionne. Pas de thème acheté Un thème du commerce embarque des dizaines de fonctionnalités que vous n’utiliserez pas, et qui ralentissent votre site. Le jour où son éditeur arrête de le mettre à jour, sa maintenance vous revient. Pas de sur-ingénierie Si une page HTML statique répond au besoin, nous livrons une page HTML statique. Nous ne gonflons pas un projet pour justifier un budget. #### FAQ #### Questions fréquentes Pourquoi des blocs Gutenberg plutôt qu'un page builder ? Gutenberg est l’éditeur natif de WordPress. Nos blocs sur-mesure s’y ajoutent sans plugin tiers : le HTML reste propre, la base de données légère, et vous éditez vos pages dans l’interface standard. Qu'est-ce que l'INP, et pourquoi compte-t-il ? L’Interaction to Next Paint mesure le temps que met votre site à réagir à un clic ou à une touche. Une page peut charger vite et sembler figée au premier clic. Nous écrivons un JavaScript léger pour que vos visiteurs n’attendent pas. Utilisez-vous des solutions de cache spécifiques ? Un cache ne rattrape pas un code lent : nous optimisons d’abord le code et les requêtes SQL. Nous ajoutons ensuite Redis pour les objets, un cache serveur (Nginx ou Varnish) et un CDN qui sert vos images près de vos visiteurs. Est-ce que je serai « prisonnier » de votre studio ? Non. Nous suivons les standards WordPress (WPCS) et documentons le code : un développeur compétent peut reprendre votre site. Le code, le domaine et l’hébergement vous appartiennent. Mon site actuel est lent, pouvez-vous l'optimiser sans tout refaire ? Ça dépend de ce qui le ralentit. Sur un thème « usine à gaz », l’optimisation bute vite, et une refonte coûte souvent moins cher. Si le site est sain mais mal configuré, un audit de performance peut suffire. Comment gérez-vous la sécurité ? Nous limitons les plugins tiers pour réduire la surface d’attaque. Nous installons un pare-feu applicatif, forçons le HTTPS et programmons des sauvegardes externalisées, en plusieurs exemplaires. Quand choisir Astro plutôt que WordPress ? Quand le contenu change peu et que la vitesse passe en premier. Un site statique n’expose aucune base de données à vos visiteurs : moins de maintenance serveur, et presque rien à pirater. C'est quoi un CMS « headless » comme Payload ? Un CMS qui sépare l’administration de l’affichage. Vous gérez vos contenus dans une seule interface, et nous les diffusons sur un site, une application mobile ou des écrans connectés. Proposez-vous du développement e-commerce ? Oui, avec WooCommerce, intégré à WordPress. Nous développons des tunnels d’achat sur-mesure, rapides et pensés pour la conversion, sans thème préfabriqué. #### nos autres expertises Voir toutes nos expertises 01 stratégie Audit, arborescence, gestion de projet. Nous cadrons votre projet avant d’ouvrir Figma ou un éditeur de code, pour que chaque décision soit justifiée. Découvrir 02 design UX, UI, branding, identité visuelle. Des interfaces conçues pour vos utilisateurs, sans compromis technique. Découvrir 03 infrastructure Hébergement haute performance, noms de domaine, configuration serveur. Nous gérons l’infrastructure pour que vous n’ayez pas à y penser. Découvrir ### Infrastructure et hébergement https://griffonnoir.com/fr/expertises/infrastructure-et-hebergement/ Expertises / Infrastructure et hébergement #### Infrastructure et hébergement Résumer avec l'IA : claude chatgpt perplexity mistral nous contacter pour cette prestation #### Performance, sécurité et haute disponibilité. Un site optimisé posé sur un mutualisé bas de gamme perd le bénéfice du travail de développement. Nous choisissons le serveur, le configurons pour votre stack et le gérons ensuite. #### méthodologie #### Votre hébergement vous ralentit sans que vous le sachiez. Sur un hébergement mutualisé d’entrée de gamme, votre site partage ses ressources avec des centaines d’autres. Le voisin encaisse un pic de trafic, vous ralentissez. Ajoutez un serveur mal réglé pour WordPress et vous perdez encore 30 % de performance, pour une correction qui ne coûte rien. Nous reprenons des sites WordPress récents qui tournent encore sous PHP 7, sans cache serveur, avec un certificat SSL expiré. Leurs sauvegardes n’existent pas ou ne se restaurent pas, et le serveur met plus d’une seconde à répondre avant même que la page commence à charger. Eric configure le serveur qu’il utilisera pour déployer, donc les réglages correspondent au code. À la livraison, vous repartez avec un environnement documenté, ses accès et sa procédure de restauration. #### Notre périmètre #### Hébergement sur-mesure #### Hébergement haute performance Nous choisissons l’hébergement selon le projet (VPS, serveur dédié ou cloud) et le configurons pour votre site, pour que le serveur ne le freine pas. Vous avez déjà un contrat ? Nous pouvons auditer et reconfigurer votre hébergement actuel. Ce que nous configurons et gérons - Choix de l'hébergeur : VPS, serveur dédié ou cloud - Nginx ou Apache, installé et réglé - PHP-FPM optimisé : version, pools, délais - Cache serveur : OPcache, plus Varnish ou Redis si le projet le demande - CDN pour les fichiers statiques - Certificat SSL (Let's Encrypt ou EV) et en-têtes de sécurité (CSP, HSTS, X-Frame-Options) - Sauvegardes automatiques quotidiennes, avec rétention #### Noms de domaine Réserver un nom de domaine paraît simple. Une redirection mal réglée casse pourtant votre référencement, un DNS mal propagé coupe le site pendant une migration, et un renouvellement oublié le fait disparaître. Nous gérons ces réglages à votre place. Ce que nous gérons - Conseil sur le choix du nom de domaine - Réservation auprès du registrar adapté - Configuration DNS (A, CNAME, MX, TXT) - Redirections 301 lors d'une migration ou d'un changement de structure - Renouvellements automatiques, avec alertes - Transfert de domaine si nécessaire #### notre engagement #### Pourquoi nous gérons cette partie-là Un studio qui maîtrise le développement mais pas l’hébergement, c’est un architecte qui conçoit une maison sans se préoccuper des fondations. L’infrastructure fait partie du résultat final. Quand Griffon Noir livre un site, vous disposez d’un environnement complet, configuré, documenté et opérationnel. #### FAQ #### Questions fréquentes Pourquoi mon site est-il lent alors que mon code est propre ? Votre code ne fait que la moitié du travail. Un serveur sous-dimensionné ou mal réglé plafonne votre site : sans cache objet (Redis), ou avec un PHP obsolète, le temps de chargement peut doubler, quelle que soit l’optimisation faite en amont. C'est quoi Redis, et à quoi sert-il pour WordPress ? Redis garde en mémoire vive (RAM) les résultats des requêtes de votre base de données. WordPress les lit en mémoire au lieu d’interroger le disque à chaque visite. Plus votre site a de contenu, plus le gain de vitesse se voit. Comment gérez-vous les sauvegardes de mon site ? Nous appliquons la règle du 3-2-1 : trois copies de vos données, sur deux supports, dont une hors du serveur. Chaque jour, nous prenons un instantané du serveur et exportons la base et les fichiers vers un stockage séparé. Mon site est-il protégé contre les attaques (DDoS, force brute) ? Oui. Nos pare-feu bloquent les tentatives de connexion suspectes au niveau du serveur. Pour les sites exposés, nous ajoutons un CDN comme Cloudflare, qui filtre le trafic malveillant avant votre serveur. Est-ce que je garde la propriété de mon nom de domaine ? Oui. Nous le gérons en tant que contact technique, et vous en restez le propriétaire légal. Puis-je garder mon hébergeur actuel (OVH, Hostinger, o2switch, etc.) ? Oui, si votre contrat le permet : nous optimisons la configuration existante. Si l’offre est trop limitée, nous vous proposons une migration. Quelle est la différence entre votre hébergement et un mutualisé classique ? Sur un mutualisé, vous partagez le processeur et la mémoire avec les autres clients, et leurs pics de trafic vous ralentissent. Sur nos serveurs, votre site a ses propres ressources : un appartement, là où le mutualisé vous loge en dortoir. #### nos autres expertises Voir toutes nos expertises 01 stratégie Audit, arborescence, gestion de projet. Nous cadrons votre projet avant d’ouvrir Figma ou un éditeur de code, pour que chaque décision soit justifiée. Découvrir 02 design UX, UI, branding, identité visuelle. Des interfaces conçues pour vos utilisateurs, sans compromis technique. Découvrir 03 développement Code sur-mesure sans page builder ni thème acheté. WordPress, Payload CMS ou Astro selon le projet. Des sites rapides, maintenables, dont vous gardez le contrôle. Découvrir ### Réalisations https://griffonnoir.com/fr/realisations/ #### Chaque projet est unique. Nous construisons fonctionnalité, design et performance ensemble. Les premiers projets du portfolio sont issus de travaux antérieurs au studio. Les projets co-réalisés seront ajoutés au fil des projets… Et pourquoi pas le vôtre ? Ozone Light Luxe & design Site de marque Site vitrine Hebras Avocats Juridique Site vitrine Un Jour Un Dessin Site vitrine Portfolio Legend of the Five Rings Jeu & édition Site de marque Site vitrine Halley&Co Agence & studio Site vitrine Portfolio Der Löwe Burgberg Hôtellerie & restauration Site vitrine Label Experience Agence & studio Site vitrine Portfolio Epok Design Agence & studio Site vitrine Portfolio ### Contact https://griffonnoir.com/fr/contact/ #### Un projet en tête ? #### Décrivez-nous votre besoin. Nous revenons vers vous sous 48h avec une première analyse, sans engagement. Prénom et nom * Email * Entreprise Téléphone Type de projet Création de site Refonte de site existant Développement sur-mesure Design Autre / Je ne sais pas encore Budget indicatif Moins de 5 000 € 5 000 — 15 000 € 15 000 — 30 000 € Plus de 30 000 € Je ne sais pas encore Décrivez-nous votre projet, votre contexte, vos objectifs… * Envoyer le formulaire Réponse sous 48h ouvrés, aucun engagement, vos données ne seront pas partagées. #### déroulé #### Comment ça se passe, ensuite ? 01 nous lisons votre message Votre demande est lue et analysée par l'un de nous deux, directement. 02 nous revenons sous 48h Vous obtenez une première analyse et, si votre projet correspond à notre savoir-faire, une proposition d'appel de cadrage. 03 on se parle 30 minutes Un appel pour aller plus loin : comprendre votre contexte, valider l'adéquation, et poser les bases d'un devis. #### de vive voix #### Réserver un appel #### 30 minutes pour échanger sur votre projet. On qualifie ensemble votre besoin, on répond à vos questions. Aucune vente, juste de la valeur. #### contact #### contact@griffonnoir.com Basé à Lyon, FR Pas de chat en direct. Nous privilégions des échanges posés et structurés. ## Réalisations ### Ozone Light https://griffonnoir.com/fr/projets/ozone-light/ Client : Ozone Light, Ezperanza Studio ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Ezperanza Studio, Développement et motion design : Eric Huguenin ; Awwwards & Mentions : Honorable Mention, Special Kudos Ozone Light conçoit des luminaires sculpturaux pour une clientèle internationale : hôtels particuliers, palaces, collectionneurs privés. Ses pièces éclairent certains des plus beaux intérieurs d’Europe, mais l’ancien site les présentait comme un catalogue et ne disait rien de ce qui les distingue. Avec Ezperanza Studio, nous devions donner à la marque une présence en ligne à la hauteur de ses objets, sobre et précise, qui donne envie d’entrer en contact avec le studio. #### Approche Nous sommes partis de la photographie. Ozone shoote chaque pièce en studio et en situation, et nous voulions que ces images commandent la mise en page. Avec Ezperanza, nous avons construit les gabarits comme une succession de plans, avec peu d’éléments par écran et une typographie qui laisse l’image devant. Les filtres, la recherche et la navigation entre collections restent en retrait jusqu’à ce que le visiteur les appelle. #### Solutions clés Nous avons développé le thème WordPress de zéro, sans page builder. L’équipe Ozone administre elle-même les quatre gabarits (collection, designer, projet, fiche produit) en français, anglais et allemand. Une recherche unique interroge à la fois les 29 projets et les 50 produits du catalogue. Nous avons animé la navigation et les sliders avec GSAP, en gardant des transitions lentes qui laissent la photographie occuper l’écran. ### Hebras Avocats https://griffonnoir.com/fr/projets/hebras-avocats/ Client : Hebras Avocats, Ezperanza Studio ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Ezperanza Studio, Développement et motion design : Eric Huguenin Hebras conseille en droit fiscal : trois avocats, six domaines d’expertise, une clientèle de groupes internationaux et d’organismes publics. Le cabinet se présente face à des structures dix fois plus grosses, et un directeur fiscal qui cherche un conseil ouvre le site avant de décrocher son téléphone. Ezperanza nous a confié le développement avec deux exigences à tenir ensemble : la sobriété qu’impose la matière, et assez de tenue pour que le site ne se confonde pas avec celui du cabinet d’à côté. #### Approche Avant le dessin, Ezperanza et nous avons trié le contenu pour ne garder que ce qu’un client vient chercher : quelle expertise, quel interlocuteur, comment le joindre. Le budget gagné là est allé au parcours, avec un motion réglé section par section, sans les effets qui ralentissaient la lecture. #### Solutions clés Thème WordPress sur-mesure, en français et en anglais. L’architecture reste courte : le cabinet, six expertises, trois avocats, les actualités. Nous avons mis l’élégance dans le mouvement : navigation animée, apparitions au scroll, transitions de page. Les actualités se filtrent par domaine fiscal et s’affichent en cartes aux fonds alternés, ce qui donne du rythme à une liste austère. L’équipe publie ses articles sans passer par nous. ### Un Jour Un Dessin https://griffonnoir.com/fr/projets/un-jour-un-dessin/ Client : Matthieu Bolufer ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Matthieu Bolufer, Développement et motion design : Eric Huguenin ; Awwwards & Mentions : Website of the Day, Honorable Mention, Mobile Excellence Matthieu Bolufer dirige la création chez Creano, dont il est cofondateur. Le reste du temps il dessine, des encres et des toiles nourries de pop culture, du Mandalorien au Joker. Ces planches ne vivaient que dans ses carnets et sur les réseaux, où un lecteur les regarde trois secondes avant de faire défiler la suivante. Il voulait un lieu à lui, qui laisse aux dessins le temps et la place qu’un fil d’actualité ne leur donne pas, et dont on se souvienne une fois la page fermée. #### Approche Nous avons prototypé le site avant de le maquetter. Il fallait savoir ce que la couche WebGL autorisait : jusqu’où pousser une distorsion sans abîmer un trait, combien de textures tenir en mémoire. Matthieu a ensuite dessiné à partir de ces limites, au lieu de les découvrir en fin de parcours. Le projet a avancé en aller-retour, sur des versions jouables plutôt que sur des écrans figés. #### Solutions clés Nous avons rendu toute la galerie en WebGL avec PixiJS : les dessins arrivent comme des textures que le moteur déplace, distord et enchaîne. Nous avons intégré le chargement à la mise en scène, et le slider réutilise les mêmes déformations pour passer d’une œuvre à la suivante. Matthieu administre l’ensemble depuis WordPress, et ajoute un dessin sans toucher au code. De nos projets, c’est celui qui pousse l’interaction le plus loin. ### Legend of the Five Rings https://griffonnoir.com/fr/projets/legend-of-the-five-rings/ Client : Asmodee, Ezperanza Studio ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Ezperanza Studio, Développement et motion design : Eric Huguenin ; Awwwards & Mentions : Website of the Day, Honorable Mention Legend of the Five Rings raconte Rokugan, un empire imaginaire où sept clans de samouraïs se disputent le pouvoir. Depuis 1995, Asmodee décline la licence en jeu de cartes, jeu de rôle, romans, jeux de plateau et jeux vidéo. L’éditeur voulait un point d’entrée unique, qui serve le joueur de la première heure comme celui qui découvre l’univers par un roman. La difficulté tenait à l’ensemble : trente ans de lore et cinq gammes de produits à structurer sans transformer le site en catalogue. #### Approche Ezperanza signait le design, Asmodee tenait l’univers, et nous devions faire tenir les deux à l’écran. Nous avons commencé par un inventaire : chaque type de contenu, chaque gamme, chaque page de lore, pour en tirer un jeu de gabarits réutilisables. Le motion est venu ensuite, une fois la structure arrêtée, pour ne pas animer deux fois des pages encore en chantier. #### Solutions clés Thème WordPress sur-mesure, développé à partir du design d’Ezperanza. La présentation des sept grands clans en forme la pièce centrale. Le motion repose sur un sprite synchronisé au scroll : le navigateur joue les révélations de contenu, les transitions de page et les apparitions image par image, sans vidéo. Le mouvement reste dessiné, raccord avec l’estampe de la licence, et le site reste léger à charger. Les équipes Asmodee administrent le reste, des produits aux actualités. ### Halley&Co https://griffonnoir.com/fr/projets/halley-and-co/ Client : Halley&Co ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Halley&Co, Développement et motion design : Eric Huguenin Halley&Co construit des identités depuis 2010 pour Pernod Ricard, le Théâtre Antique d’Orange ou Paper Republic. Quand un studio de direction artistique commande son propre portfolio, le brief tient en trois lignes et l’exigence monte d’un cran : le site fait partie du travail montré. Une graisse approximative, une interlettre à côté, un timing d’animation trop long, et ils le voient. Nous devions restituer leur dessin sans rien en perdre. #### Approche Avec un studio de direction artistique, la relation change : ils dessinent, nous construisons, et la discussion porte sur des détails que la plupart des clients ne relèvent pas. Nous avons travaillé en intégration continue, avec des versions en ligne dès les premières semaines. Halley&Co jugeait sur écran, le seul endroit où se règlent le rythme et les timings. #### Solutions clés Thème WordPress sur-mesure, développé avec Joshua Dupin. Le studio compose lui-même ses pages projets, en alternant pleine largeur et colonnes sans sortir de la grille. Nous avons animé la navigation et les transitions pour que le passage d’un projet à l’autre se fasse sans rechargement visible. Les visuels, nombreux et en haute définition, partent en plusieurs tailles et se chargent à la demande, condition pour qu’un portfolio de cette densité reste fluide. ### Der Löwe Burgberg https://griffonnoir.com/fr/projets/der-loewe/ Client : Der Löwe Burgberg, Ohaey ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Ohaey, Développement et motion design : Eric Huguenin Der Löwe Burgberg tient un hôtel et une table dans l’Allgäu, en Bavière, où la montagne attire autant de visiteurs que l’établissement. Avec Ohaey, agence créative allemande, nous devions produire l’effet d’un dépliant d’hôtel, donner envie d’une chambre et d’un dîner, sans en reprendre l’allure. La longueur posait la contrainte : des pages qui déroulent beaucoup de contenu et qu’il faut tenir jusqu’au bouton de réservation. #### Approche Tout se décidait sur les pages internes plutôt que sur l’accueil. Avec Ohaey, nous avons découpé chaque page longue en séquences et traité le scroll comme un déroulé : ce qui apparaît, dans quel ordre, à quelle vitesse. Nous réglions chaque section seule, puis rejouions l’enchaînement complet, parce qu’une page longue se juge à la succession plus qu’à l’effet pris seul. #### Solutions clés Thème WordPress sur-mesure, en allemand et en anglais. L’établissement administre ses chambres, la carte du restaurant et les offres. La réservation passe par le moteur hôtelier, que nous avons intégré en iframe et rhabillé pour qu’il ne rompe pas avec le reste du site. L’essentiel du travail a porté sur les pages internes, longues et denses : chaque section y entre en mouvement (apparitions au scroll, transitions de page, séquences animées) pour tenir l’attention sur toute la descente. ### Label Experience https://griffonnoir.com/fr/projets/label-experience/ Client : Label Experience, Halley&Co ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Halley&Co, Développement et motion design : Eric Huguenin Label Experience travaille pour Sézane, Diptyque, Montblanc ou Le Slip Français. L’agence dessine des espaces physiques, le studio fait de l’identité, du packaging et de l’édition, et les deux vivent sous une même marque. Chacun montre son travail autrement et s’adresse à des interlocuteurs différents. Le site devait rendre cette double activité lisible sans couper la marque en deux, ni forcer le visiteur à choisir un camp dès l’accueil. #### Approche Nous avons traité le problème en base avant de le traiter à l’écran. Le modèle distingue ce qui appartient à l’agence, ce qui appartient au studio, et ce que les deux partagent. Les parcours, les filtres et le mur de clients se déduisent de cette structure, sans page dupliquée. Label Experience fait évoluer son offre depuis le back-office, sans nous rappeler. #### Solutions clés Thème WordPress sur-mesure, avec un back-office bâti autour des deux entités. L’équipe rattache une réalisation à l’agence ou au studio, et elle apparaît dans les bons parcours sans qu’on duplique le contenu. Les pages projets sont modulaires : chacun compose son cas. Nous avons animé la navigation, le mur de clients et les transitions dans un vocabulaire calé sur l’identité de la marque. Le site existe en français et en anglais. ### Epok Design https://griffonnoir.com/fr/projets/epok-design/ Client : Epok Design ; Prestation : Développement WordPress sur-mesure ; Équipe : Design : Epok Design, Développement et motion design : Eric Huguenin ; Awwwards & Mentions : Website of the Day, Honorable Mention Epok Design signe depuis 2009 des identités et des objets imprimés pour Moët Hennessy, le Grand Palais, LVMH ou l’Université Gustave Eiffel, depuis Paris et Rennes. On juge leur travail en le tenant en main autant qu’en le regardant : le papier, le façonnage, la reliure d’un catalogue. Un écran perd cette matière. Nous devions la remplacer par un rythme et un mouvement qui rendent la même exigence de détail. #### Approche Epok Design nous a livré son identité plutôt que des maquettes finies. Nous avons traduit son système typographique et son rapport au blanc, pensés pour le papier, en règles d’écran : échelles, marges, comportements au scroll. Nous validions chaque gabarit sur de vrais projets de leur portfolio, jamais sur du faux contenu, seule façon de vérifier que la grille tenait quel que soit le travail montré. #### Solutions clés Thème WordPress sur-mesure et administrable de bout en bout : le studio publie ses projets et compose ses pages sans nous. Les réalisations s’ouvrent depuis un slider et se déroulent en pages modulaires, qui alternent pleine largeur et colonnes selon le travail montré. Nous avons écrit le motion pour l’identité du studio, avec des transitions nettes, un peu sèches, plus proches du vocabulaire de leurs éditions que des automatismes du web. Le site existe en plusieurs langues. ## Journal ### L’artisanat appliqué au web : pourquoi nous avons créé Griffon Noir https://griffonnoir.com/fr/journal/artisanat-applique-au-web/ 29 septembre 2026 Avec Griffon Noir, Maéva Hostalier et Eric Huguenin mènent chaque site à deux, du cadrage à la mise en ligne. Nous l’abordons comme une pièce d’artisan : un projet sur-mesure et une technique précise. #### Un projet web passe souvent entre trop de mains Confiez un site à une agence de communication classique, et vous rencontrez une chaîne d’intervenants : un chef de projet, un directeur artistique, des graphistes, des développeurs, un lead technique. Chacun gère sa part du travail. Entre deux étapes, quelqu’un rédige un compte rendu, et la personne suivante repart de ce résumé. Vous en payez le prix à chaque relais. Le développeur découvre les maquettes une fois le design validé. Il signale une animation impossible à tenir sur mobile, ou un gabarit que vos vrais textes font déborder. Vous revenez alors en arrière, vous arbitrez des problèmes que l’équipe aurait pu voir dès le départ, et le planning glisse. #### Griffon Noir : deux métiers, un seul duo Griffon Noir est un studio indépendant de brand, design et développement web, basé à Lyon. Nous l’avons créé pour supprimer ces relais. Vous parlez aux deux personnes qui conçoivent et construisent votre site, et ces deux personnes suivent votre projet du premier échange à la mise en ligne. Nous confrontons nos deux points de vue sur chaque décision. Maéva sait ce que le code devra produire quand elle dessine un écran. Eric connaît les intentions du design quand il développe une page. Il participe à la conception, et Maéva garde un œil sur le développement. Ce que vous validez en maquette, nous le mettons en ligne. #### Maéva Hostalier, directrice de création Maéva couvre l’ensemble du périmètre créatif : UX, UI, product design, design system, branding et identité visuelle, visuels pour les réseaux sociaux. Avant Griffon Noir, elle a travaillé comme product designer sur les produits numériques de grandes entreprises. Elle y a appris à concevoir pour des utilisateurs réels, avec des contraintes techniques réelles. Si vous avez déjà un site, elle en audite le design : ergonomie des parcours et cohérence visuelle. Sur un projet, elle part de votre marque et de vos utilisateurs, construit l’identité visuelle, puis dessine les maquettes haute fidélité et le design system qui les relie. Vous retrouvez son travail dans notre expertise Design & identité. Hors du studio, Maéva crée des bijoux faits main sous le nom Atelier Nema, avec le même soin du détail que dans ses maquettes. Maéva tient la vision d’ensemble d’un projet et d’une marque, et elle soigne le détail de chaque composant. Elle met en place les outils dont nous avons besoin et livre des fichiers d’une grande propreté, pensés pour le développement. Elle parle aussi le langage technique : avec elle, rien ne se perd entre la maquette et le produit final. Eric Huguenin Co-fondateur, directeur technique #### Eric Huguenin, directeur technique Eric développe des sites depuis 2010, et son rôle dépasse le code. Il cadre les projets : audit technique de l’existant, arborescence, stratégie de contenu, spécifications. Il développe ensuite chaque site sur-mesure, avec WordPress, Payload CMS ou Astro selon le besoin, sans thème acheté ni page builder. Il choisit et configure aussi l’hébergement, et il reste votre interlocuteur principal du brief à la livraison. Avec l’évolution des outils, Eric consacre une part croissante de son temps à la direction technique : décider de l’architecture, piloter le projet, et assurer une finition sur-mesure jusqu’au dernier détail d’animation. Retrouvez ce travail dans nos expertises Stratégie & conseil, Développement sur-mesure et Infrastructure & hébergement. #### Comment nous menons un projet Nous commençons par un cadrage écrit : vos objectifs, vos contenus, l’arborescence, les spécifications techniques et fonctionnelles. Ce document fixe le périmètre avant la première maquette, et il vous protège des mauvaises surprises en cours de route. Maéva s’appuie dessus pour le benchmark visuel, le design system et les maquettes. Eric relit chaque écran avec elle pendant la conception, pour qu’aucun choix graphique ne bloque le développement. Il enchaîne ensuite sur le développement, les animations, l’hébergement et la mise en ligne. Nous recettons le site à quatre mains avant de vous le livrer. #### Une approche d’artisans Nous abordons chaque site comme une pièce sur-mesure. Nous partons de votre problématique, et nous choisissons la technique la plus simple qui y répond : un CMS quand vous devez gérer vos contenus, un site statique quand vous n’en avez pas besoin. Nous visons des sites rapides, légers et maintenables, dont vous restez propriétaire. Cette approche demande de l’investissement. Nous préférons suivre peu de projets et nous engager à fond sur chacun, avec l’envie de résoudre votre problème plutôt que de livrer un gabarit. #### L’IA dans notre façon de travailler Nous utilisons l’IA comme un outil, au même titre que Figma ou un éditeur de code. Elle nous fait gagner du temps sur certaines tâches, comme des premières versions ou des vérifications. Nous consacrons ce temps à ce qui demande de l’expérience humaine : comprendre votre besoin, arbitrer, et vous apporter une réponse rapide et juste. La valeur d’un site tient au jugement des personnes qui le conçoivent. L’IA accélère notre travail. Nos choix restent les nôtres. #### Animations et contenus pour vos réseaux sociaux Le motion design fait aussi partie de nos compétences. Nous produisons nos propres animations et nos visuels pour les réseaux sociaux, et nous pouvons faire de même pour vous : décliner les créations de votre site en animations, en visuels ou en assets pour votre communication. Pour des projets plus ambitieux, proches du film à effets spéciaux, nous nous entourons d’experts du domaine. Nous en parlons avec vous au moment du cadrage. #### Deux indépendants, un duo selon votre projet Nous restons deux indépendants. Quand une mission ne demande qu’un développeur ou qu’une designer, l’un de nous s’en charge. Quand votre projet demande les deux regards, nous le menons à deux. Chacun appelle l’autre en renfort dès qu’il juge que votre projet en a besoin. #### Questions fréquentes #### Griffon Noir est-il une agence ? Nous sommes un studio de deux personnes. Vous travaillez avec les deux personnes qui conçoivent et développent votre site, sans chef de projet intermédiaire. #### Puis-je faire appel à une seule expertise ? Oui. Vous pouvez nous confier un design seul, un développement seul ou un audit. Nous proposons le duo quand votre projet en tire un bénéfice. #### Où êtes-vous basés ? Nous travaillons depuis Lyon. #### Ce que vous lirez dans ce journal Nous y raconterons nos projets, nos choix techniques et nos avis sur le métier. Vous avez un projet en tête ? Écrivez-nous.