Design système / la trame du site
Papier, charbon,un seul bronze.
01 / Les couleurs2 fonds / 1 accent / 1 rouge
Deux fonds,
un seul accent.
Le papier pour ce qu'on lit, le charbon pour ce qui l'encadre, en alternance ; jamais une troisième teinte. Le bronze pour ce qu'on touche et ce qui mesure. Le rouge avertit et date, rien d'autre.
Un clic pour copier
02 / La typographie3 polices / 10 styles
Une famille parle,
l'autre penche.
Manrope porte tout, titres en 500 très serrés. Instrument Serif ne sert qu'en italique : un ou deux mots d'un titre, la seconde moitié du nom. DM Mono étiquette, toujours petit, souvent en capitales espacées.
Titres et texte courant. Variable 200–800 ; titres en 500, le nom en 800.
L'italique seul : les mots <em> d'un titre, « vuillet », l'état vide.
Étiquettes, menu, boutons, cotes : 9 à 11 px.
500 · .96 · −.085em
500 · .94 · −.08em
500 · .85 · −.08em
500 · .92 · −.075em
500 · .95 · −.07em
500 · 1.05 · −.055em
#57544c · 56–72 ch
.1em · capitales
.04em
+ Instrument italique 19px
03 / Les hauteursles mêmes sur toutes les pages
Une page, dessinée
en élévation.
Chaque page empile les mêmes pièces aux mêmes hauteurs. On raccourcit le contenu ; on ne change jamais la dimension.
- Bandeau défilant39 px
- Menu82 px
- Ouverturepapier, titre sur deux lignes, sa cote, trois colonnes en bas72 svh
- Tête sombrecharbon, juste après l'ouverture450 px
- Marge de page3vw · 5vw < 700
- Marge d'une section56 → 112 px
- Angle de tout5 px
- Grain du papier19 %
- Moletteun cran, une section280 ms
04 / Les composants9 pièces, vivantes
Les pièces de la trame.
Chacune est celle des pages, aux mêmes valeurs. Passez la souris dessus.
Le nom en minuscules, cinq liens toujours dans le même ordre, barrés au survol ; FR / EN gardé dans « dv-langue ».
Deux attaches, un trait à flèches, la valeur au milieu. Sous le titre d'ouverture, au-dessus d'une feuille. Elle se trace une fois.
02 / La séanceSite web / commande n° 36861
Un filet, le numéro et le nom en bronze, un chiffre réel à droite. Numéroté seulement quand l'ordre est vrai.
Capitales mono, angle de 5 px, un seul plein par zone. Un reflet passe au survol ; il monte de 2 px.
Un clic ouvre l'exemple et descend à l'atelier. « Au hasard » toujours en dernier, en pointillé.
Bon de commanden° 36861
Chocolaterie Verlaine
Gastronomie, Colmar, restaurant indépendant
Feuille #efe7da, cadre et second cadre à 6 px dedans, le cartouche en petites cases. Le tampon ne porte qu'une date de rendu.
Toujours en mots, jamais par la couleur seule.
50 px, gris charbon, un halo bronze toutes les 2,4 s. Il se lève au-dessus de la ligne du pied.
05 / Les chemins16 cercles / 1 ouverture de compas
Une autre façon
de visiter.
À côté du menu, le site est une figure : la graine de vie, tracée d'une seule ouverture de compas. Chaque page est un cercle ; on passe de l'un à l'autre par leur intersection.
✿ Sur chaque page
La petite fleur
« Tracé », près de FR / EN : le plan de la figure, le cercle de la page et ses voisins à portée de clic. On marche de page en page au compas ; une languette au bord gauche ramène ceux qui sont venus par le tracé.
/trace/
Le tracé
La figure entière. La molette va de cercle en cercle et votre visite la trace. « Lever le relief » : chaque page devient un sommet, haut de ses jours de travail relevés dans git, sous le soleil de Paris.
Visiter par le tracé/voyage/
Le voyage
Le relief devenu un site : on vole de sommet en sommet, chaque création s'ouvre sur place, et le ciel est celui de Paris, à cette heure.
Partir en voyage06 / La voixle français d'abord, l'anglais mot pour mot
Des phrases courtes,
les faits du métier.
- « david vuillet » en minuscules, partout, sans logo.
- Un titre sur deux lignes, un ou deux mots en italique.
- Des chiffres réels dans les étiquettes : « 2 exemples / 10 familles d'acier ».
- Les outils vouvoient ; le pied parle en première personne : « M'écrire ».
- Aucun emoji. Les flèches → ↓ disent où l'on va ; ✳ sépare les mots du bandeau.
- Une animation répond à un geste, jamais une boucle décorative.
- Les faits du métier, rien de politique ; rien d'écrit pour un recruteur.
- Du croquis au plan coté./retro/
- Un client fictif, des pièges vrais./briefs/
- Trois métiers, une même main./cv/
- Tout se tient./tout-se-tient/