Identité · Direction artistique · Développement

Fullcode, conçu comme on travaille.

Nous voulions un site qui ne se contente pas de raconter ce que nous faisons. Il devait le démontrer : une direction forte, du code écrit sur mesure et des interactions qui font partie de l’idée.

Création forte Code sur mesure Système maintenable

La mission, en quelques mots

Notre site comme terrain de démonstration.

Le point de départ: Montrer la continuité entre création et développement, au-delà d'une simple présentation du studio.
Notre intervention: Identité, direction artistique, conception des interactions et développement du site Fullcode.
Ce que ce projet explore: Une interface expressive peut s'appuyer sur des composants partagés et des pages qui restent évolutives.

Le point de départ

Comment faire un site de studio qui ne ressemble pas à un site de studio ?

Nous ne voulions ni d’un portfolio interchangeable, ni d’un empilement d’effets gratuits. Le site devait avoir une personnalité propre tout en restant clair, rapide à faire évoluer et suffisamment souple pour accueillir des projets très différents.

Le parti pris a donc été simple : ne jamais séparer artificiellement design et développement. Ici, le mouvement, la structure, les transitions et les composants sont dessinés autant par le code que par la maquette.

Identité Fullcode

Une identité capable de vivre dans l’interface.

Climate Crisis donne le ton aux grands messages. 42dot Sans prend le relais pour les contenus et l’interface. La palette crée le contraste entre énergie, chaleur et technicité.

Violet#522A6F

Prune#8A2476

Jaune#FBCF4F

Beige#FAEADD

Charbon#222023

Climate Crisis 100% VOUS.

42dot Sans

Une typographie pensée pour les contenus, les interfaces et tout ce qui doit rester net quand le reste prend de la place.

Notre terrain de jeu

Créatif quand il faut imaginer.
Technique quand il faut résoudre.

Déplacez le curseur. Ce n’est pas un choix entre deux métiers : c’est précisément leur rencontre qui construit Fullcode.

fullcode.js

import { onReady } from "/core/site-core.js";
import { initInterface } from "/components/interface.js";

onReady(() => {
  initInterface();
  createSomethingSingular();
});

DOM SVG API CSS JS

Fullcode vit ici.

50 % créatif · 50 % technique

Le développement fait partie du design

Le code n’arrive pas après la création.

Certaines idées n’existent que parce qu’elles ont été pensées en même temps que leur implémentation. Le serpent du hero, les transitions, le catalogue feuilletable ou les scènes animées ne sont pas des couches ajoutées après coup.

Hero snake

Un SVG animé qui transforme la première impression en geste de marque.

/animations/hero-snake.js

Plongée

Une séquence narrative qui fait du scroll un élément du récit.

/animations/dive-sequence.js

Catalogue Dieco

Navigation clavier, swipe et pages animées dans un composant réutilisable.

/components/catalogue.js

Scènes projet

SVG injectés, animations au scroll et comportements isolés par page.

/animations/…

Sous le capot

Vivant ne veut pas dire impossible à maintenir.

Les composants globaux, les animations et les points d’entrée de page sont séparés. Chaque projet peut avoir son propre comportement sans transformer le site entier en bloc monolithique.

/assets/js/

assets/js/
├── core/
│   └── site-core.js
│
├── components/
│   ├── interface.js
│   ├── catalogue.js
│   └── contact-form.js
│
├── animations/
│   ├── hero-snake.js
│   ├── dive-sequence.js
│   ├── sensipark-scroll-snake.js
│   └── tennis-parallax.js
│
└── pages/
    ├── contact.js
    ├── dieco.js
    ├── padel-barrio.js
    └── fullcode.js

Le site comme système

Ce qu’on voit compte. Ce qui relie tout le reste aussi.

Composants partagés

Header, navigation, catalogue, formulaires et comportements communs vivent dans des modules réutilisables.

Pages autonomes

Chaque page importe uniquement ce dont elle a besoin, ce qui limite les dépendances et garde l’évolution du site maîtrisable.

Parcours cohérent

Les CTA transmettent le contexte jusqu’au formulaire pour éviter de demander à l’utilisateur de recommencer son histoire.

SEO & structure

URLs propres, canonical, données structurées, sitemap, contenus hiérarchisés et balisage sémantique font partie du projet.

Accessibilité

Navigation clavier, états de focus, textes alternatifs et gestion du mouvement sont intégrés au système plutôt qu’ajoutés à la fin.

Pas de standard forcé

La structure sert les idées. Elle n’est jamais une excuse pour faire entrer tous les projets dans le même moule.

Au fond

Le standard existe déjà. Notre métier commence là où il ne suffit plus.

Ce site est notre propre terrain d’essai : un endroit pour tester une idée, écrire le code qui lui manque et garder suffisamment de structure pour pouvoir recommencer autrement au projet suivant.

Les choix derrière les images

Le mouvement fait partie de l'idée.

Guider le regard.

Les séquences de l'accueil relient les projets et donnent un rythme à leur découverte. Le mouvement accompagne la présentation plutôt que d'être ajouté à la fin.

Montrer la matière.

Le catalogue, les objets et les univers graphiques entrent dans l'interface. Les interactions mettent en scène des réalisations concrètes.

Explorer le cas Dieco

Préparer les prochaines pages.

Menu, footer et éléments partagés sont assemblés à la génération du site. La structure permet de faire évoluer les contenus en conservant la cohérence visuelle.

Parler de votre site

Votre projet ne ressemble pas aux autres ? Tant mieux.

Identité, expérience web, interface, outil ou projet hybride : construisons quelque chose qui mérite une réponse sur mesure.

Construire quelque chose de singulier

Avant de se lancer · De l'idée au code

Bonne
question.

Ce site montre notre façon de travailler. Voici comment elle peut se traduire dans le vôtre.

Et si on parlait de la vôtre ?

Le sur mesure, c'est forcément un gros site ?

Non. Le sur mesure concerne la réponse au besoin, pas le nombre de pages. Une seule page peut demander une direction artistique forte, une hiérarchie précise ou une interaction particulière.

Padel Barrio illustre cette approche sur un périmètre compact : une identité cohérente et un site simple qui la prolonge.

Découvrir ce petit périmètre

Que se passe-t-il une fois le site en ligne ?

L'hébergement, le nom de domaine, les mises à jour et les évolutions sont des sujets distincts à clarifier avant la livraison. Nous définissons ce qui entre dans le projet et ce qui relève d'un accompagnement complémentaire.

Vous pouvez aussi nous solliciter pour une évolution ciblée : ajouter un contenu, améliorer un parcours ou connecter un nouvel outil, selon les possibilités du site.

Pourrai-je modifier mon site après la livraison ?

C'est une question à poser dès le cadrage. Modifier des actualités chaque semaine, actualiser quelques textes ou faire évoluer une interface ne demande pas le même dispositif.

Nous choisissons la solution en fonction des contenus à administrer et de votre autonomie souhaitée. Les accès, la prise en main et les modalités d'évolution sont précisés pour le projet.

Pouvez-vous partir de ce qui existe déjà ?

Oui. Une identité, un site ou un outil n'ont pas toujours besoin d'être entièrement refaits. Nous commençons par comprendre ce qui fonctionne, ce qui bloque et ce qui doit évoluer.

Cette lecture permet de proposer une intervention ciblée ou une refonte plus large, selon les besoins et les possibilités de l'existant.