Film de présentation de 42.fr, 56 secondes : l’accueil et le Holy Graph, le système des schémas, la Piscine, la carte du réseau jusqu’à Paris, l’équipe, le mur des 28 pages, puis la signature 42.fr · 2021. L’aperçu muet en boucle reprend la Piscine et la carte du réseau.
Étude de cas · Site vitrine de l’école 42
42.fr
Vingt-huit pages pour raconterune école sans cours ni professeurs.
Une école à part,un site qui se lit vite.
42.fr présente l’école : sa pédagogie sans cours ni professeurs, son cursus, l’admission par la Piscine, le campus de Paris, l’après 42 et l’institution. Le site couvre vingt-huit pages, pensées pour l’ordinateur et le mobile.
Le parti : un titrage fort, la nuit et le pétrole comme fonds, et le pixel de 42 comme fil conducteur. Les schémas du cursus, les pictos et le comportement en mobile sont dessinés pour être compris du premier coup d’œil.
- 28pages desktop
- 2formats de référence, 1440 et 390 px
- 6temps forts pour raconter la Piscine
Du terminalà l’école ouverte.
Le site précédent parlait comme un terminal : noir intégral, menu en colonne, longs paragraphes en petit corps. La refonte le rend plus accueillant et plus accessible sans perdre son ADN technologique : le logo, le titrage en capitales et l’accent turquoise restent.
Glisser la frontière, ou ← → au clavier.
Avant · maquette 2016
Après · refonte 2021
Avant : maquettes PSD de l’équipe précédente (2016). Après : 1440 px.
- Les personnes d’abord
Étudiants et communauté prennent la place des longs blocs de texte.
- La photo en pleine largeur
Le campus en images immersives, sous un voile noir qui garde le contraste.
- Des visuels vivants
Portraits, scènes de campus et pictos donnent un ton plus contemporain.
- De l’air et une hiérarchie
Titrage fort, chapitres courts, menu horizontal puis barre d’ancres.
- Une palette élargie
Le pétrole, le turquoise et des sections claires sortent du tout-noir.
- Accueillant, toujours tech
Le pixel, le Holy Graph et les capitales gardent l’esprit de l’école.
L’identité de 2021,tenue jusqu’au pixel.
- 1En-tête à deux niveaux
Liens secondaires en pastilles, rubriques en capitales, « Postuler » toujours visible. Il devient compact et fixe au défilement.
- 2Le titre devient l’image
Capitales grasses italiques, de 68 à 124 px sur deux lignes serrées. C’est le seul endroit audacieux de la page.
- 3Voile photo noir
Plus dense sous le texte, il laisse le visage net à droite.
- 4Le raccord en pixels
Une frange de pixels de 24 px découpe la photo : une marche franche vers la section suivante, pas un fondu.
- 5Pictos
Un trait fin en blanc à 56 px, avec des libellés en 16 px.
- 6Le carré menthe
Il signe les photos à cheval entre deux sections, avec les marches pétrole.
#000C16
#04809F
#00BABC
#36F3B9
Surtitre espacé, filet court, titre en capitales grasses italiques. Jost ici, Futura PT dans la version finale.
Le Holy Graph,lu au défilement.
Sur la page L’exécution, le graphe du cursus reste fixe pendant la lecture. Chaque bloc de texte allume sa partie : le tronc commun, puis la seconde partie, puis Launchpad.
En mobile, une bande reprend l’état du graphe pendant qu’on lit.
Le Holy Graph
Les deux grandes parties du cursus
Le tronc commun : un an et demi pour acquérir les bases
Le cursus 42 commence avec un tronc commun. Cette expérience développe le jeu de compétences minimum, tant techniques qu’humaines.
La seconde partie : se spécialiser à la carte et à son rythme
La seconde partie du cursus aborde les domaines classiques du numérique et de la programmation, comme l’intelligence artificielle, la sécurité, ou encore le développement d’applications mobiles.
Launchpad
Les étudiants et les étudiantes décident eux-mêmes du moment où ils arrêtent leur cursus pour devenir alumni.
Des schémas qui se lisentd’un coup d’œil.
Trois schémas du cursus, une seule grammaire : une règle des niveaux, un tronc, des voies qui convergent.
-
Parcours d’études · Formation proposée
Le niveau devient un rayon
Les demi-cercles reprennent la géométrie du Holy Graph : 9, 17 et 21 se lisent sur une seule règle, du noyau vers la droite.
1440 px 
390 px -
Fiche RNCP 6 · Concepteur développeur de solutions informatiques
Un stage commun, trois voies
Les voies se séparent puis convergent vers le titre. Sur mobile, le schéma bascule en lecture verticale au lieu d’être réduit.
1440 px 
390 px -
Fiche RNCP 7 · Expert en architecture informatique
Même système, autres seuils
Les niveaux recommandés se glissent sous chaque voie sans toucher à la structure.
1440 px 
390 px
Contenus pédagogiques repris des fiches 42.fr consultées en octobre 2026.
Les pictos de 2021, dans une seule grammaire
Quarante jeux tirés des vecteurs Sketch, chacun en quatre couleurs et deux états. Trois tailles seulement : 24, 32 et 40 px.
Un globe qui se dérouleen carte, case par case.
Le globe pointillé de 2021 tourne vers le continent choisi, puis s’aplatit sur la trame de 8 px : même centre, même module, aucune case agrandie.
La liste reste le contenu de référence. La carte la reflète dans les deux sens : un pays survolé allume ses campus, un campus survolé retrouve sa ligne, un clic ouvre sa fiche.
Les campus
Implantations
Légende · données 2021
- campus
- pays du réseau
- autres pays
Visiter le site dédié aux campus partenaires.
42 The NetworkListe et carte de 2021, reprises telles quelles. Positions des campus déduites du nom de leur ville ; hors Europe, seuls les pays allumés sont connus.
La Piscine,un mois en six temps.
La page emblématique de l’admission se déroule en sections distinctes, reliées par une barre d’ancres. Des voiles noirs posent le texte sur les photos ; les six temps forts alternent photo et texte et se lisent sans animation.
Sur téléphone, la barre d’ancres reste collée en haut de l’écran : on passe d’un temps à l’autre sans perdre le fil. Les autres vues se consultent ici, en 1440 px.
Deux registrespour chaque portrait.
Le trombinoscope en portraits studio sur fond noir est propre à 42.fr. Chaque portrait garde sa photo studio ; au survol ou au focus, une bascule en pixels révèle une seconde pose, plus libre.
Les deux « mot de… » sont reliés, la grille est régulière et chaque portrait a un état de survol et de focus.
35 paires de portraits · bascule en 6 paliers · fondu simple en mouvement réduit
De 1440 à 390,composant par composant.
Des règles communes pour 1440, 1024, 768 et 390 px, et une solution mobile dessinée pour chaque élément complexe : schémas, carte, frises, temps forts, carrousels.
Pages mobiles complètes : les 6 pages du premier lot et Contact. Les autres suivent les règles communes.
Ce que le sitea de plus fort.
Nuit#000C16
Pétrole#04809F
Turquoise#00BABC
Menthe#36F3B9
Les 28 pages.
Desktop 1440, dans l’ordre du site. Sélectionner une page pour la parcourir en entier.
Un site d’école tenu par quelques règles : le titrage, la nuit et le pétrole, le pixel.
Les textes, chiffres et campus sont ceux de 2021. Le site mis en ligne a pu différer des maquettes présentées ici.
Crédits photo : seconde photo de Sophie Viger, Bruno Levy.