Designer & développeur · 20 ans de métier

Du pixel à la prod.

Je suis Tafid. Je dessine, je code et je mets en ligne des sites et des plateformes pour des marques qui ne peuvent pas se permettre d’être banales. Toutes les couches, une seule main.

L’important, c’est le choix.

Lancer un projet Voir ce qu’il y a dessous

Room303 — Tafid Faites tourner le globe Défiler

(01)Manifeste

Un site, c’est une surface. Ce qui fait la différence, c’est tout ce qu’il y a dessous.

J’ai commencé par le dessin, puis l’infographie, la communication, l’image, la vidéo, le son. Puis le code, pour accompagner une idée jusqu’à sa mise en ligne. Aujourd’hui, le design et le développement sortent de la même main, que je porte un projet de bout en bout ou que je rejoigne une équipe en place. Et parce que mes clients viennent de la cybersécurité, je livre solide autant que beau.

TafidDesigner & développeur

Un métier par couche.

Une page se construit dans cet ordre : le trait pose l’idée, le code la rend réelle, l’image lui donne sa force, la surface la finit. Une seule main, du premier calque au dernier.

Une plateforme se construit dans le même ordre : le trait dessine les écrans, le code fait tourner les données, l’image les rend lisibles, la surface les rend fiables. Une seule main, du premier calque au dernier.

Calques4

Un calque à la fois · en boucle, du trait à la surface

header <header class="top"><a class="logo">marque</a> <nav><a>Offres</a><a>Projets</a></nav><a class="pill">Contact</a></header>

h1 <h1 class="title"> Une idée, <em>en ligne.</em></h1>

p <p>Pensée, dessinée, codée, hébergée en France.</p>

button <button class="cta"> Lancer le projet</button>

figure <figure class="visuel"> <img src="placeholder.svg" alt="" width="304" height="304"> </figure> placeholder.svg

index.html · 5 blocs · 0 erreur · UTF-8

marqueOffresProjetsContact

Une idée,
en ligne.

Pensée, dessinée, codée,
hébergée en France.

Lancer le projet

placeholder.svg

visuel.webp · 304 × 304

marqueOffresProjetsContact

Une idée,
en ligne.

Pensée, dessinée, codée,
hébergée en France.

Lancer le projet

100 · Lighthouse

aside <aside class="nav"> <Logo /> <a>Synthèse</a> <a>Alertes</a> <a>Rapports</a> <a>Équipe</a></aside>

header <header><h2>Synthèse</h2> <Search /><Avatar user={moi} /></header>

section <section class="kpis"> {kpis.map((k) => <Kpi {...k} />)}</section>

Chart <Chart type="area" data={alertes} src="placeholder.svg" />{/* le graphique arrive en 03 */} placeholder.svg

Table <Table rows={alertes.recentes} tri="date" pages={20} />

dashboard.tsx · 5 composants · 0 erreur · typé

vigieSynthèseAlertesRapportsÉquipeRéglages

Synthèse

Rechercher…MD

Alertes · 24 h12−4

Résolues94 %+2 pts

Disponibilité99,95 %SLA

Alertes · 30 jours placeholder.svg

Port 3389 ouvertsrv-mail4 minCritique

Certificat expirantvpn2 hMoyen

Connexion inhabituellesiège5 hRésolu

graphique.svg · 574 × 132

vigieSynthèseAlertesRapportsÉquipeRéglages

Synthèse

Rechercher…MD

Alertes · 24 h12−4

Résolues94 %+2 pts

Disponibilité99,95 %SLA

Alertes · en direct

Port 3389 ouvertsrv-mail4 minCritique

Certificat expirantvpn2 hMoyen

Connexion inhabituellesiège5 hRésolu

Critiqueil y a 4 min

Port 3389 ouvert

Bureau à distance exposé sur internet. Une porte d’entrée classique des rançongiciels.

Actif: srv-mail
Adresse: 203.0.113.24
Détectée par: scan externe

Fermer le portAssigner

Nouvelle alerte · à l’instant

Le trait

le dessin, à l’origine de tout.

les écrans, dessinés avant d’être codés.

Dessin
Illustration
Retouche
Composition

Parcours
Wireframes
Design system
Prototype

Le code

écrit par la main qui a dessiné.

comptes, données, API : la logique qui tient.

Front
Back
API
Déploiement
Hébergement FR

Front
Back
API
Rôles
Hébergement FR

L’image

faire ressentir avant d’expliquer.

des données qui se lisent d’un coup d’œil.

Identité
Affiche
Vidéo
Montage
Son

Data viz
Icônes
Identité
Illustration

La surface

rapide, accessible, bien référencée.

chaque clic répond, chaque alerte arrive en direct.

Performance
Accessibilité
SEO
Sécurité

Interactions
Temps réel
Performance
Accessibilité

Projet complettoutes les étapes

Brief
Design
Code
Mise en ligne
Suivi

En renfortdans votre équipe

BriefRoom303
DesignRoom303
CodeRoom303
Mise en ligneRoom303
SuiviRoom303

Le même savoir-faire, à l’échelle qu’il vous faut : du brief à la mise en ligne, ou seulement l’étape où votre équipe a besoin de bras.

(02)Méthode

Ce que vous voyez.

Ce qu’il y a dessous.

Cinq couches. Une seule main.

Exemple · un site livré

Vigie, cabinet de cybersécurité : une page d’accueil claire, rapide, rassurante. C’est tout ce que voit le visiteur, et c’est bien ainsi.

0,8 schargement
100Lighthouse
AAaccessibilité

Exemple · une plateforme livrée

Vigie Console, l’espace client du même cabinet : alertes en temps réel, rapports, comptes et droits. Un outil que ses clients ouvrent chaque matin.

99,95 %disponibilité
SSOconnexion
RGPDconformité

Lancez la visite : on le démonte.

Cinq couches, pensées ensemble. Le mouvement, l’interface, l’image, le code, l’hébergement : chacune tient compte des autres. C’est ce qui rend un siteune plateforme rapide, solide et simple à faire évoluer.

Ce que je construis →

vigie.exampleconsole.vigie.example

FR-PAR · régionTLS 1.3 · HSTSCSP stricte99,9 % · disponibilité

FR-PAR · 2 zonesSSO · 2FAAES-256 · sauvegardes99,95 % · SLA

import { page } from './brand';
export default page({
  title: 'Vigie · cybersécurité',
  lang: 'fr',
  speed: 0.8, // secondes
  a11y: true,
  secure: true,
});
await site.deploy('vigie.example');

$ npm run build✓ 42 modules · 1,8 s

import { route, auth } from './core';
export const GET = route({
  path: '/api/alertes',
  auth: auth.sso({ mfa: true }),
  tenant: true, // isolé par client
  cache: 30, // secondes
}, (req) => db.alertes.recentes(req.tenant));

$ npm test✓ 318 tests · 0 échec

Surveillance active

vigie.AuditPentestFormationUrgence 24/7

Cybersécurité · PME & collectivités

Voyez la faille
avant les autres.

Audit, test d’intrusion et formation de vos équipes. Un rapport clair, des correctifs priorisés.

Demander un auditNotre méthode →

01Audit72 h, rapport inclus

02Pentestweb, réseau, interne

03Formationsur site ou à distance

Hébergé en FranceRéponse sous 2 h120 audits menés

vigie.Vue d’ensembleAlertesActifsRapportsÉquipeRéglages

Vue d’ensemble

Rechercher…MD

Alertes · 24 h12+3

Résolues94 %+2 pts

Actifs suivis1 240+18

Réponse moy.1 h 12−9 min

Port 3389 ouvertsrv-mail4 minCritique

Certificat expirantvpn2 hMoyen

Connexion inhabituellesiège5 hRésolu

cubic-bezier(.2, .7, .2, 1) :hover → 180 msouverture · 240 ms

En ligne · Lighthouse 100/100En production · SLA 99,95 %

01 / 05 · Interaction

Le mouvement

Chaque survol, chaque transition a une intention : guider l’œil, confirmer un geste. Jamais distraire. Un mouvement qui ne sert à rien est un mouvement de trop.

Micro-interactions
Motion design
États & retours

Une alerte qui arrive, un filtre qui s’applique, un export qui se lance : chaque état est signalé, sans jamais interrompre le travail. Dans un outil ouvert tous les jours, la fluidité est une fonctionnalité.

États de chargement
Notifications
Raccourcis clavier

02 / 05 · Interface

Les composants

Boutons, cartes, formulaires, navigation. Un système cohérent et documenté, qui grandit avec votre projet sans qu’il faille tout redessiner.

Design system
Composants
Responsive

Tableaux, filtres, formulaires, graphiques. Un design system pensé pour les écrans denses, qui reste lisible quand les données s’accumulent et que les fonctionnalités s’ajoutent.

Design system
Tableaux de bord
Data viz

03 / 05 · Identité

La marque

Couleurs, typographies, images, ton. Vingt ans de direction artistique pour que l’on vous reconnaisse avant même d’avoir lu votre nom.

Direction artistique
Typographie
Images

Un produit est aussi une marque. Mêmes couleurs, même typographie, même ton que votre site : vos clients savent qu’ils sont chez vous, de la page d’accueil au dernier réglage.

Cohérence produit
Typographie
Iconographie

04 / 05 · Code

Le moteur

Front, back, API. Un code propre et lisible, qui charge en moins d’une seconde et qu’une autre équipe peut reprendre sans moi.

Front & back
API
Performance

Comptes, rôles, abonnements, API. Une architecture où chaque client est isolé, testée à chaque modification et documentée, pour que votre équipe puisse la faire grandir.

Multi-tenant
API & webhooks
Tests automatisés

05 / 05 · Fondations

La sécurité

Hébergement en France, en-têtes durcis, dépendances surveillées. Mes clients font de l’audit de sécurité : je livre comme s’ils allaient auditer mon travail. Ils le font.

Hébergement FR
Durcissement
Conformité

Hébergement en France, authentification unique et double facteur, sauvegardes chiffrées, journaux d’accès. Vos clients vous confient leurs données : elles sont traitées comme telles.

SSO & 2FA
Sauvegardes
RGPD

(03)Services

Quatre façons de travailler ensemble.

Le point de départ change, l’exigence non. Dans les quatre cas, vous avez le même interlocuteur du premier croquis à la mise en ligne.

votre-marque.fr

100Perf.

↑ SEO

Sites vitrine

Être choisi avant d’être appelé.

Votre site est souvent le premier rendez-vous. Je le dessine pour qu’il dise juste qui vous êtes, et je le code pour qu’il s’affiche vite, se lise sur tous les écrans et remonte dans les recherches.

Pour qui

Indépendants, PME, cabinets, marques

Vous recevez

Direction artistique
Contenus structurés
SEO & performance
Prise en main

Tableau de bord7 j

Utilisateurs actifs12 480

Abonnement activé

SaaS

Un produit, pas une maquette.

Parcours, comptes, abonnements, tableau de bord, API. Je pense l’interface et l’architecture ensemble, pour qu’un choix de design ne devienne jamais une dette technique.

Pour qui

Startups, éditeurs, équipes produit

Vous recevez

Prototype
Design system
Front & back
Mise en production

Documents

Budget 2027

Contrats

Planning

Procédures

DirectionRHTerrain

Accès restreint

Intranets

Chacun voit ce qui le concerne.

Rôles, droits d’accès, documents, circuits de validation. Un outil interne qu’on a envie d’ouvrir le matin, et qui tient face à un audit.

Pour qui

Équipes, associations, organisations sensibles

Vous recevez

Rôles & droits
Espace documentaire
Journalisation
Hébergement FR

sync.ts

const crm = connect('crm');
const erp = connect('erp');
every('1h', () =>
  crm.sync(erp));

CRMERP

✓ 2 418 fiches synchronisées

Sur-mesure

Quand rien n’existe, on le construit.

Une application métier, un pont entre deux outils, une automatisation qui rend des heures à votre équipe. Si cela peut être fait proprement, je le fais.

Pour qui

Toute équipe avec un problème précis

Vous recevez

Applications
Intégrations
Automatisations
Maintenance

Du site au sur-mesure, de l’intranet à l’affiche : toute l’étendue de l’offre, du plus technique au plus dessiné.

Voir tous les services

(04)Références

Des clients qui ne laissent rien au hasard. Ils m’ont confié leur Ils m’ont confié leur image, identité, communication, plateforme, infrastructure, outil interne, documentation, présentation.

Cybersécurité, OSINT, industrie, institutions : des équipes exigeantes, dont beaucoup ont pour métier de trouver la faille. Elles ont confié à Room303 le design, le développement et la mise en ligne de ce qui les représente.

Ils m’ont fait confiance16 équipes · cybersécurité, industrie, institutions

BreacHuntRenaultOteriaAssemblée nationaleX41NGEBity ConseilVerum InvestigationYesITCrédit européenParkoNoteLatitude CourageRTFMHack The BoxLXploitOsint-FRBreacHuntRenaultOteriaAssemblée nationaleX41NGEBity ConseilVerum InvestigationYesITCrédit européenParkoNoteLatitude CourageRTFMHack The BoxLXploitOsint-FR

Osint-FRLXploitHack The BoxRTFMLatitude CourageParkoNoteCrédit européenYesITVerum InvestigationBity ConseilNGEX41Assemblée nationaleOteriaRenaultBreacHuntOsint-FRLXploitHack The BoxRTFMLatitude CourageParkoNoteCrédit européenYesITVerum InvestigationBity ConseilNGEX41Assemblée nationaleOteriaRenaultBreacHunt

Le parcours

Trois métiers, un seul parcours.

Aucun n’a remplacé le précédent : ils se sont additionnés, et travaillent ensemble sur chaque projet.

30 ans d’artistique, depuis 1996
20 ans de design et de communication, depuis 2006
15 ans de web et de développement, depuis 2011
room303 — web.exe80×24

C:\> run web.exe
- html · css · jsOK
- astro · react · tsOK
- api · base de donnéesOK
- mise en production100 %
15ans

Web & développement

depuis 2011

Sites, plateformes SaaS, infrastructure, mise en production.

▮ READY2011 → 2026█

Et aussi

Du plus petit artisan aux acteurs étatiques.

Chaque public a son enjeu. L’exigence, elle, reste la même. Survolez une carte : la page prend le style de ce public.

Artisans & TPE

Mes débuts, et toujours aujourd’hui. Un bon site change vraiment leur activité : plus de visibilité, plus d’appels, une image enfin à la hauteur du métier.

L’enjeuÊtre appelé
Collectifs de communication

Des équipes de communication d’entreprise, dont celles de Renault, pour lesquelles j’ai travaillé indirectement.

L’enjeuTenir la charte
Associations & communautés

Dont Osint-FR, où je suis responsable de la communication : une identité nette pour une communauté qui ne pardonne pas l’approximation.

L’enjeuRassembler
Acteurs étatiques

Des organisations où chaque détail est vérifié, et où la confiance se gagne dans la durée, pas dans une présentation.

L’enjeuConformité RGAA