Étude de cas · Site institutionnel

42 Network

Le site du réseau international des écoles 42.Une carte en pixels sert de fil à toutes les pages.

Client
42 Network
Année
2021
Rôle
Direction artistique, design UI
Livrables
Site, 9 gabarits, ordinateur et mobile
En-tête de la page Our mission : titre « A worldwide innovation hub » et globe en pixels à droite
En-tête de la page Our mission sur mobile, avec le globe en pixels
Our mission · le globe du réseau derrière le titre

Un réseau, une carte,un système.

Page d’accueil de 42 Network sur mobile, de l’en-tête au pied de page
Accueil, mobile · faire défiler

Le réseau

42 Network réunit les campus de l’école 42 dans le monde : une même pédagogie, gratuite, ouverte à tous et fondée sur l’apprentissage entre pairs.

Le site

Il présente la mission du réseau, sa pédagogie, son histoire et l’annuaire des campus, avec les actualités et un espace presse.

Mon intervention

Direction artistique et design de l’interface. La carte du réseau, dessinée en pixels carrés, devient un motif : globe, vignettes de campus, pictogrammes de régions. Les maquettes ont été remises au propre pour le portfolio ; le site mis en ligne a pu différer sur certains points.

gabarits de page
formats, 1440 et 390 px
fiches campus dans l’annuaire

L’accueil, section par section.

Les deux formats défilent ensemble : chaque section garde sa place et son rôle, de 1440 à 390 px.

L’accueil, de 1440 à 390 px.

Chaque section garde sa place et son rôle d’un format à l’autre. Faire défiler dans chaque écran.

Page d’accueil de 42 Network sur ordinateur
1440 px
Page d’accueil de 42 Network sur mobile
390 px

Des décorsau second plan.

Trois fonds du site de 2021, chacun avec son mouvement : lent, discret, toujours effacé avant le texte.

Section « Vision fondatrice » de la page Our mission Section « Vision fondatrice » de la page Our mission
01 · Our missionPluie binaireDes 0 et des 1 tombent du bord en pixels et s’éteignent avant le texte.1440 px
Section « Vision fondatrice » sur mobile
01 · Our missionPluie binaireLe bord en pixels et la pluie, effacés avant le texte.
Section « Our common values » : huit valeurs, chacune avec sa pastille
Section « Our common values » : huit valeurs, chacune avec sa pastille
02 · Our missionLa calotte et les valeursLa sphère monte au défilement, puis les valeurs arrivent une à une ; un signal passe d’une pastille à l’autre.1440 px
Section « Our common values » sur mobile
02 · Our missionLa calotteLes valeurs et leurs pastilles, en une colonne.
Section « Key statistics » : quatre chiffres de 100 % Section « Key statistics » : quatre chiffres de 100 %
03 · HomeChamp réseauTrois plans à des vitesses différentes, effacés derrière les chiffres ; les chiffres se comptent à l’arrivée.Chiffres publiés en 2021
Section « Key statistics » sur mobile
03 · HomeChamp réseauChiffres publiés sur le site en 2021.

Trente fiches,une seule carte.

Chaque vignette cadre la carte du réseau sur la ville du campus et porte son logo en blanc. Les campus à venir ont un marqueur creux.

En-tête de la page Our campuses : titre, texte et sélecteur de régions En-tête de la page Our campuses avec le globe en pixels
04 · Our campusesLe globe et les régionsLe sélecteur passe d’une région à l’autre et le globe s’oriente vers elle. Seul l’état actif change : aucun résultat n’est simulé.1440 px
En-tête de la page Our campuses sur mobile, avec le sélecteur de régions en 3 × 2
04 · Our campusesLe globe et les régionsSélecteur en 3 × 2 tuiles, toutes visibles.

Annuaire de la maquette : 21 campus ouverts, 9 à venir. Il n’est pas exhaustif : le réseau comptait 35 campus en septembre 2021.

Le systèmeen détail.

La photographie, l’identité, le titrage et les composants du site, chacun mis en scène pour lui-même.

Deux étudiants travaillent côte à côte devant un écran, au campus 42 Paris
42 ParisPhoto du site, détourée sur le dégradé du réseau
Vignette de la fiche 42 Paris : la carte en pixels cadrée sur la ville, le marqueur du campus et le logo 42 en blanc
Fiche campus42 Paris
Portrait de Sophie Viger, adossée à un mur clair

“Social inclusion and equal chances: these are the two fundamental values that went into the creation of 42 in 2013.”

Sophie Viger, CEO of 42 Network · page About us
  1. La photographie, 42 Paris
  2. L’identité, case par case
  3. Le titrage
  4. Le processus de sélection
  5. Our campuses, sur mobile
  6. La fiche campus
  7. About us, le mot de Sophie Viger

Neuf gabarits, deux formats.

Survoler ou sélectionner une page pour la parcourir.Faire défiler la rangée, puis chaque page.

Textes, chiffres et campus : ceux du site en 2021, présentés comme tels et non actualisés.