La grille de mise en page

Dans son livre "Ordering Disorder", Khoi Vinh - Substraction lance l’idée que les designs les plus efficaces peuvent se résumer à une intention principale : to create order out of disorder. Mais pas n’importe quel ordre, celui du designer tel qu’il envisage le monde (rien que ça). Une opportunité de jouer les dictateurs sur une zone bien circonscrite, profitons-en…

La grille de mis en page est un outil bien connu des professionnels du web, de l’imprimerie, de la presse, du graphisme… Cette combinaison de lignes horizontales et verticales sert à positionner les différents éléments d’un texte, d’une création visuelle ou d’une page web. Pour créer de l'ordre à partir du désordre et satisfaire les exigences des utilisateurs...

Internet bien ordonné commence par soi-même

Dans l’introduction de Ordering Disorder (publié après cinq années en tant que design director pour le New-York Times), Khoi Vinh raconte une anecdote savoureuse. À l’école d’art, le tout premier jour d’un cours de design, le professeur demanda à sa classe de faire un point n’importe où sur la feuille blanche que chaque élève avait devant lui. Après un tour de classe et quelques remarques sur ce que la position de ce point reflétait de la personnalité des uns et des autres, il leur demanda d’ajouter un deuxième point.

Le professeur annonça ensuite à tous ces élèves qu’ils venaient de créer un design. Avec peu de sens et peu d’utilité, certes, mais un design quand même. Dans leur rapport l’un à l’autre les deux points formaient une structure, rudimentaire mais existante. La leçon se trouvait là : dès que vous avez plus d’un élément, cela suggère une possibilité de les organiser. Car le design c’est aussi ça : mettre de l’ordre dans le désordre.

Le bon ouvrier, les bons outils : la grille fluide

Cet objectif d'organisation ne date pas d’hier puisqu’il s’appliquait au papier imprimé bien avant de s’appliquer au web. Et quand on dit « imprimerie », on parle carrément de celle de Gutenberg dont la Bible était imprimée sur deux colonnes  de quarante-deux lignes chacune… pour favoriser le confort de lecture. Du moins c’est ce qu’il avait indiqué sur son prospectus publicitaire : « Nos 180 exemplaires imprimés vous apporteront une expérience de lecture innovante ». Le tout en allemand bien sûr…

Sachant que 48 de ces 180 exemplaires ont été conservés jusqu’à aujourd’hui, ça donne de l’envergure à vos futurs projets web ! Sans espérer les faire entrer dans la postérité pour plusieurs siècles, on peut quand même imaginer qu'ils procurent une expérience positive pour l'utilisateur, quel que soit son écran.

Car dans la caisse à outils du concepteur de responsive web design, on trouve un type de grilles spécifiques : les grilles fluides. C’est elles, entre autres, qui vont permettre l’adaptabilité du produit. Dans la grille fluide, les différents contenus de la page sont organisés pour apparaître de manière optimale sur différents appareils et proposer cette fameuse expérience enthousiasmante à l’utilisateur. Et ça, Gutenberg n’y avait pas pensé !