MOSS STUDIO

Webdesign · UX/UI · Développement Webflow

Cyrclo : une plateforme digitale pour un marketing qui scale

Cyrclo relie analytics intelligents, automation et stratégie fondée sur les données. Nous avons traduit cette offre complexe en une expérience digitale claire, qui rend la technologie compréhensible, installe la confiance et peut grandir avec l’offre.

Lancer un projet similaireVoir le site
  • Site marketing IA Cyrclo avec des cartes visuelles flottantes sur fond sombre
  • Aperçu des prestations Cyrclo avec cartes Advertising, Automation, Analytics et Strategy
  • Pied de page Cyrclo avec navigation, liens sociaux et grande wordmark
  • Palette monochrome Cyrclo avec noir, blanc et gris échelonnés
  • Système typographique Cyrclo avec Google Sans Flex et Google Sans Code

Une entrée réduite qui relie technologie, mouvement et possibilités créatives dans un seul système visuel.

Projet

  • Client

    Cyrclo

  • Secteur

    AI Marketing & Analytics

  • Projet

    Site corporate

  • Prestations

    Stratégie, UX/UI, développement web, CMS

  • Plateforme

    Webflow

  • Année

    2026

01Défi

Une technologie complexe avait besoin d’une histoire claire

Cyrclo réunit automation, analytics, planification stratégique et publicité data. Cette ampleur est une force, mais elle peut vite paraître abstraite en ligne. Le site devait structurer l’offre sans simplifier l’identité technologique et progressive de la marque.

Les défis centraux

  • Rendre une offre complexe compréhensible

    Quatre domaines de prestation étroitement liés devaient être saisis en quelques secondes, sans les diluer dans de longs blocs de texte.

  • Mettre en scène la technologie de façon humaine

    L’IA et l’analytics ne devaient pas paraître froids ou uniquement techniques. L’expérience devait relier orientation data, créativité et pertinence humaine.

  • Guider l’attention avec intention

    Le mouvement visuel fort ne devait pas recouvrir les messages centraux, la navigation ni les appels à l’action.

  • Permettre la croissance dans le système

    De nouvelles études de cas, articles et prestations devaient pouvoir s’ajouter sans inventer un type de page à chaque fois.

Objectifs

Ce que le nouveau site devait accomplir

  • 01

    Clarté

    Les visiteurs doivent comprendre vite ce que Cyrclo incarne, quelles prestations sont proposées et comment elles s’articulent.

  • 02

    Différenciation

    Le langage visuel distingue Cyrclo des sites d’agence interchangeables et rend la marque immédiatement reconnaissable.

  • 03

    Scalabilité

    Un système de pages et de CMS modulaire doit accueillir de nouveaux contenus sans perdre cohérence ni usage.

02Stratégie

Un système digital plutôt que des pages isolées

  • Strategy

    Les contenus sont ordonnés selon leur pertinence de décision. La promesse de marque vient d’abord, puis prestations, projets, confiance et conversion — une argumentation, pas une pile de sections isolées.

  • UX Architecture

    La navigation reste volontairement compacte. Des motifs de mise en page récurrents et des blocs clairs aident à se situer, même sur les pages longues, et à voir ce qui compte ensuite.

  • Visual Design

    Noir, blanc et gris échelonnés forment un système monochrome précis. Typographie généreuse, rayons doux et cartes spatiales créent la tension, sans surcharger la marque de couleurs décoratives.

  • Development

    Composants réutilisables, collections CMS structurées et layouts responsive posent la base technique d’un système qui s’étend de façon cohérente.

03Réalisation

Des prestations lisibles d’un coup d’œil

Advertising, Automation, Analytics et Strategy ont chacun reçu une carte définie. Chaque carte combine contexte, nom de prestation, bénéfice court et un élément graphique récurrent.

Aperçu des prestations Cyrclo avec cartes Advertising, Automation, Analytics et Strategy
Quatre domaines présentés comme des modules autonomes, visuellement liés.

Cette structure résout trois problèmes à la fois :

  • L’offre devient scannable en quelques secondes.
  • Chaque prestation garde assez d’autonomie.
  • La grille commune montre que toutes les prestations font partie d’un système.

La composition asymétrique évite la monotonie. De plus petits éléments de confiance complètent l’argumentation sans concurrencer les cartes principales.

Décisions

Pourquoi nous avons choisi cette direction

  • 01

    Système de couleur monochrome

    La palette réduite positionne Cyrclo comme une marque technologique précise et assurée. Le blanc crée la clarté, le noir la profondeur, les gris définissent hiérarchie et états.

  • 02

    L’orbite comme principe de hero

    Les cartes visuelles flottantes forment un réseau autour de la marque. Le motif suggère mouvement, points de données et possibilités créatives, sans illustrer l’offre au pied de la lettre.

  • 03

    Cartes de contenu en bento

    Des cartes de tailles différentes pondèrent les contenus selon leur pertinence. Les informations essentielles arrivent d’abord, le détail ensuite.

  • 04

    Alternance de surfaces claires et sombres

    Le contraste structure les pages longues et crée un rythme. Les zones claires expliquent. Les zones sombres densifient la marque et marquent les transitions.

Design system

Un design system pour la cohérence et la vitesse

Le système visuel a été réduit à quelques fondations claires. De nouvelles pages et composants peuvent s’ajouter sans réinterpréter la marque.

  • Palette monochrome Cyrclo avec noir, blanc et gris échelonnés

    Palette de couleurs

    Les couleurs de base #000000 et #FFFFFF créent le contraste le plus fort. Des gris complémentaires comme #1F1F1F, #808080, #A7A7A7 et #BBBBBB pilotent surfaces, textes secondaires, cadres et états interactifs.

  • Système typographique Cyrclo avec Google Sans Flex et Google Sans Code

    Typographie

    Google Sans Flex porte titres, navigation et texte courant. La police est claire, moderne et souple selon les graisses. Google Sans Code marque labels, catégories et micro-informations techniques — un contraste contrôlé entre communication de marque accessible et précision technique.

Rôles typographiques

  • Display

    Google Sans Flex

    500–600

    Hero et grands titres de section

  • Heading

    Google Sans Flex

    500

    H2–H4 et titres de cartes

  • Body

    Google Sans Flex

    400

    Texte courant et descriptions

  • Label

    Google Sans Code

    400

    Eyebrows, catégories, métadonnées

Composants

Des composants réutilisables plutôt que des layouts uniques

  • 01

    Hero Orbit

    Message de marque central, entouré de cartes visuelles en mouvement. L’animation crée de la profondeur, tandis que titre et promesse restent stables et lisibles.

  • 02

    Service Cards

    Cartes modulaires avec catégorie, titre, courte description et key visual. Le composant fonctionne en grille bento et en teaser isolé.

  • 03

    Case Study Cards

    Cartes projet basées sur le CMS : image, année, prestation, titre. De nouveaux projets s’ajoutent sans reconstruire la mise en page à la main.

  • 04

    Social Proof Module

    Éléments de confiance compacts, placés à côté des prestations concernées, là où les utilisateurs ont besoin de sécurité.

  • 05

    Pricing Cards

    Périmètre, positionnement et prochaine étape dans un système de comparaison répétable. La hiérarchie visuelle empêche de séparer prix et bénéfice.

  • 06

    FAQ Accordion

    Les objections récurrentes sont répondues de façon compacte. Cela réduit la friction en fin de parcours et ajoute de la profondeur sémantique pour la recherche.

  • 07

    Navigation & Footer

    Une navigation réduite concentre l’attention sur les domaines clés. Le footer large rassemble marque, structure, réseaux et le chemin vers le haut de page.

Pied de page Cyrclo avec navigation, liens sociaux et grande wordmark

Une clôture cohérente du parcours client

Le système reste cohérent jusqu’au dernier point de contact : navigation claire, interactions réduites, forte présence de marque.

Le footer n’est pas une surface résiduelle. Il répète le positionnement central, rassemble navigation et canaux sociaux, et offre un chemin clair pour revenir dans le site.

La wordmark surdimensionnée renforce la reconnaissance, tandis que filets et espacements généreux gardent l’orientation sur une surface dense en information.

04Résultats

Le résultat : clarté, caractère et un système pour grandir

Objectif qualité

90+

Performance

Valeur cible pour le score Lighthouse Performance mobile

Objectif qualité

≤ 2,5 s

LCP

L’élément visible le plus important doit se charger vite

Objectif qualité

≤ 200 ms

INP

Les interactions doivent répondre sans délai perceptible

Objectif qualité

≤ 0,1

CLS

Les contenus doivent rester visuellement stables au chargement

  • 4 prestations clés

    Clairement structurées dans un système visuel commun

  • 1 CMS évolutif

    Pour études de cas, articles et contenus futurs

  • Responsive by design

    Parcours cohérent sur desktop, tablette et mobile

  • Système UI modulaire

    Composants réutilisables pour des extensions durables

05Projets liés

D’autres projets digitaux

Sites et identités récents du studio.

Voir toutes les études de cas
06Compétences

Compétences mobilisées

07FAQ

Questions sur ce projet

Il s’agissait de structurer quatre domaines de prestation étroitement liés pour qu’ils soient compris en quelques secondes, sans aplatir l’identité progressive et technologique de Cyrclo.

Le noir, le blanc et les gris échelonnés signalent la précision et créent une hiérarchie visuelle claire. Typographie, mouvement et contenus disposent ainsi d’espace, sans couleurs décoratives en concurrence.

Le site mène du positionnement et des prestations aux projets et preuves, puis à des appels à l’action clairs. Des composants récurrents rendent l’étape suivante visible aux points décisifs.

Prestations, études de cas et articles suivent des modèles de contenu réutilisables. De nouveaux contenus s’ajoutent sans reconstruire les types de pages ni le design system.

Mises en page, typographie, cartes et navigation ont été pensées en responsive. Sur petit écran, les contenus sont re-priorisés, les animations réduites, et les images livrées à la taille réelle d’affichage.

Prochaine étape

Votre marque a-t-elle besoin d’un site qui clarifie la complexité ?

Nous relions stratégie, design et développement en un système digital au scope clair, au process lisible et à une architecture qui peut grandir avec votre entreprise.

Discuter d’un projet Voir le webdesign pour PME