Tarek Mokhtari
← Comment je travaille← How I work

Sept axes, sept choixSeven axes, seven choices

Je choisis un design comme on mène une expérience : sept axes, sept choix par axe, chaque choix une fois.I choose a design the way one runs an experiment: seven axes, seven choices per axis, each choice used once.

Pour l'accueil de mon site personnel, je n'ai pas dessiné une page pour la retoucher ensuite : j'en ai construit sept d'un coup, comme on monte un plan d'expérience. Sept axes : les couleurs, la police, la mise en page, l'accueil, la tuile, les filtres, les effets. Chaque axe est rangé sur une échelle (du plus sombre au plus clair, du plus calme au plus animé…) et offre sept choix. Chaque page prend un choix différent sur chaque axe : dans chaque colonne du tableau, chacun des sept choix sert une fois et une seule. C'est un hypercube latin. Les appariements, eux, sont choisis à la main, pour que chaque page tienne debout.

For the home page of my personal website, I did not draw one page and then touch it up: I built seven at once, the way one sets up an experimental design. Seven axes: colours, typeface, layout, welcome, tile, filters, effects. Each axis is ordered on a scale (darkest to lightest, calmest to liveliest…) and offers seven choices. Each page takes a different choice on every axis: in each column of the table, each of the seven choices is used once and only once. That is a Latin hypercube. The pairings themselves are chosen by hand, so that every page holds together.

Chaque choix porte un code. Pour mélanger, je cite les codes, comme on combine des facteurs : « M2 et T6 de la 7, avec C5 ».

Each choice has a code. To mix, I quote the codes, the way one combines factors: “M2 and T6 from 7, with C5”.

N°CouleursColoursdu plus sombre au plus clairdarkest to lightestPoliceTypefacede la plus classique à la plus techniquemost classic to most technicalMise en pageLayoutde la plus libre à la plus rangéefreest to tidiestAccueilWelcomedu plus discret au plus imposantquietest to boldestTuileTilede la plus sobre à la plus expressiveplainest to most expressiveFiltresFiltersdu plus implicite au plus explicitemost implicit to most explicitEffetsEffectsdu plus calme au plus animécalmest to liveliest
1nuit étoiléestarry nightC1 Nuit bleueNight blueP3 Sérif douceSoft serifM1 DispersionScatterA5 La phrase seuleThe sentence aloneT5 Pastille rondeRound badgeF5 Légende coloréeColour legendE7 Fond vivantLiving background
2terminalC2 ArdoiseSlateP7 Mono techniqueTechnical monoM7 IndexA2 Ligne de commandeCommand lineT1 Texte d'abordText firstF3 RechercheSearchE6 Machine à écrireTypewriter
3afficheposterC4 RisoP4 Affiche condenséeCondensed posterM3 BentoA7 Nom géantGiant nameT3 FicheIndex cardF6 PastillesPillsE1 ImmobileStill
4brutrawC7 Blanc brutRaw whiteP6 Grotesque suisseSwiss grotesqueM5 Grille carréeSquare gridA1 Carte de visiteBusiness cardT7 Carte épaisseThick cardF4 Onglets soulignésUnderlined tabsE4 Réarrangement animéAnimated reshuffle
5programme de concertconcert programmeC3 Ivoire et laitonIvory and brassP2 Didone éditorialeEditorial DidoneM4 Rubans par familleRibbons by familyA6 Portrait en grandLarge portraitT2 Image et légendeImage and captionF1 SommaireContentsE3 Apparition en cascadeCascade reveal
6zelligeC5 Chaux et zelligeLime and zelligeP1 Garamond de livreBook GaramondM6 CarrelageTilingA3 MonogrammeMonogramT4 Titre en surimpressionOverlaid titleF7 Phrase à trousFill-in sentenceE2 Survol révélateurRevealing hover
7albumC6 AubeDawnP5 GéométriqueGeometricM2 MaçonnerieMasonryA4 Le manifeste d'abordManifesto firstT6 PolaroïdPolaroidF2 Menu déroulantDrop-down menuE5 Inclinaison au survolTilt on hover
1 · nuit étoiléestarry night
2 · terminal
3 · afficheposter
4 · brutraw
5 · programme de concertconcert programme
6 · zellige
7 · album