Grid Design — Quelques notes sur l'intérêt des grilles de mise en page

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Grid Design — Quelques notes sur l'intérêt des grilles de mise en page

La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dans Framework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif.

Le terme « grille » vous ennui ? Changez-le !

Pour élargir la question, je propose d’utiliser le terme plan à la place de grille. Contrairement à la grille — vécue comme sans âme — le plan procède d’une intention tout en gardant le meilleur de ce que propose la grille : la lisibilité. D’ailleurs, sans plan, la meilleure des grilles ne vous amènera nulle part :  le contenu à besoin d’une intention pour se transformer en message.

Comme le plan d’une ville, le plan d’un site (au sens de grille et non de sitemap, on est bien d’accord…) est constitué de blocs et d’espace entre chacun d’eux. Si la grille évoque la mise en page par tableaux et les rigidités qui les accompagne, la notion de plan est plus en accord avec les possibilité de mise en page que l’on connait avec les CSS : plus de souplesse dans l’agencement des blocs.

L’art naît de contraintes, vit de luttes et meurt de liberté.

J’aime bien citer cette phrase d’André Gide. Sans contrainte à dépasser, l’intelligence ne sert à rien ; autant donner le travail à un robot. Ce qui fait que l’intervention humaine est nécessaire, c’est justement la nature des défis que le graphiste ou le designer web doivent relever : faire du neuf et du sur-mesure pour leur client tout en respectant une tradition plusieurs fois millénaire… Des fois, c’est facile, des fois… pas facile !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



21 commentaires pour “Grid Design — Quelques notes sur l'intérêt des grilles de mise en page”

  1. […] This post was mentioned on Twitter by Nicolas Froidure, ۞ Bruno Bichet. ۞ Bruno Bichet said: Grid Design — Quelques notes sur l’intérêt des grilles de mise en page http://j.mp/4zgyet […]

  2. Frédéric dit :

    Pourriez-vous aller plus loin dans votre idée de « plan ». J’ai du mal à voir en quoi cela reste différent d’une grille. En tout cas, il est vrai que tous ces frameworks poussent à simplifier les sites web. Vous avez peut-être une alternative à proposer ou une autre méthode de travail? La solution ne serait pas justement de ne pas utiliser ces Framework et de partir à chaque fois de zéro. Enfin de compte, tout le monde peut créer son propre framework css, qui se résume alors à une méthode de travail. Ce qui peut être possible grâce à des snippets par exemple.

  3. Hello,

    Utiliser des grilles, c’est la base pour un design harmonieux. Comme je le dis souvent, un bon designer saura m’expliquer son design comme une histoire, un cheminement logique.

    Par exemple, si je le dis, pourquoi tu as mis cet élément là, il doit pouvoir me dire pourquoi. Ce sont parfois des réponses bêtes comme : pour l’aligner avec celui-là, pour ré-équilibrer le design etc… Idem pour les couleurs ou autre.

    Le fait d’utiliser des grilles permet, tout au moins, au niveau du positionnement, d’obtenir ces justifications plus naturellement. L’impact est toujours positif, même vis à vis du client.

    En effet, le designer sait tout de suite expliquer au client pourquoi il ne faut pas bouger cet élément de 5cm vers la gauche. Ca dégage une image de professionnalisme, et surtout, le client comprend que c’est un métier, designer des sites.

  4. Bruno Bichet Intégrateur Web dit :

    @Frédéric — Je pense qu’il n’y a pas beaucoup de différences entre le plan d’un texte et l’agencement des éléments sur la page. Dans une dissertation il faut agencer les idées d’une certaine manière pour communiquer efficacement. Généralement on commence par l’introduction et on finit par la conclusion. Entre les deux, on a généralement un découpage en deux ou trois parties. Selon les matières (et donc selon la nature des choses à démontrer) on peut avoir un développement en deux parties et quatre sous-partie (en droit, par exemple).

    En matière de design web, c’est un peu pareil. Qu’on le veuille ou non, il faut une introduction (header) et une conclusion (footer). Entre les deux on a généralement une zone de contenu principale et une zone de contenu secondaire. Selon la nature et le nombre d’informations contenus dans le site, on peut avoir un découpage en deux partie ou plus (deux barres latérales, par exemple). On a rarement deux zones de contenus principaux ou alors c’est qu’on a assez de matière pour faire deux sites.

    @Nicolas Froidure — je partage ton avis, c’est vrai qu’une fois que j’ai terminé un design, je n’aime pas qu’on me demande de mettre le champs de recherche à un autre endroit parce que du coup, ça peut casser plein de trucs qui n’apparaissent pas de prime abord. Ou alors, il faut concevoir le deisgn dès le début avec l’idée que la place de certains éléments peut être interchangeable !

  5. STPo dit :

    Les grilles ne sont pas un frein à la créativité, bien au contraire : les designers utilisaient des grilles des siècles avant l’existence du web, ils continuent simplement aujourd’hui de se servir d’un outil qui a fait ses preuves. Une grille est un support essentiel quel que soit le type de design attendu, qu’il soit strict, protocolaire, clean, grungy, illustré, etc. Un très bon résumé du point de vue « design » ici (en anglais).

    L’implémentation technique de ces grilles en CSS est un autre problème, les frameworks n’étant pas du tout obligatoires pour le faire. Pour ma part j’ai été assez déçu par la gestion du rythme vertical par Blueprint par exemple… On en causait chez Vincent il n’y a pas si longtemps

  6. CUT HERE dit :

    Il est pour moi cet article Bruno ? :)

    Encore une fois je ne suis pas un détracteur mais je n’aime pas imposer des codes (exemples tous les articles qui indiquent de faire comme ci et pas autrement). Ce que j’essayais de dire via mon tweet (sic les 140 caractères pour argumenter) c’est qu’il faut vraiment laisser de la souplesse et selon le type de site, casser les habitudes de mises en page. Je ne me vois pas le faire sur un site d’informations, mais sur des sites produits n’ayant pas recours au flash, parfois à des blogs. Après, caler les éléments selon des repères, en soit on reprend un peu une grille. Mais de là à caler tous mes éléments sur une grille (et donc avec des espacements identiques – ou alors je n’ai pas compris le principe de grille), je suis moins d’accord. Cela peut-être très harmonieux (comme ton blog) mais parfois manquer de rythme dans la mise en page. C’est très relatif ma dernière phrase, tout dépendra de la façon dont c’est réalisé.

  7. Bruno Bichet Intégrateur Web dit :

    @STPo — Merci pour les liens qui sont très intéressants, en effet. Concernant le rythme vertical, je n’ai pas le sentiment qu’il sert à grand chose du moment où on a pas toute la page sous les yeux.

    Sans parler du fait que la grille verticale impose des contraintes fortes en terme de dimensions des images et autres médias que les clients ne sont pas forcément capable de surmonter. Encore que WordPress dans la prochaine version 2.9 propose une éditeur d’image qui permet de recadrer et redimensionner les visuels.

    @CUT HERE– héhé, c’est effectivement ton tweet qui a déclenché l’envie de faire ce billet.

    En général, je mets en place la grille une fois que j’ai terminé le plus gros du travail de conception. Déjà ça implique que je n’ai pas de grille prête à l’emploi pour tous les projets. Je n’irais pas jusqu’à dire que les grilles sont jetables, mais presque.

    Pour ce nouveau design, je me suis amusé à créer une grille complète à la « framework », mais la plupart du temps, mes grilles sont très simples : 2 ou 4 colonnes suffisent à la plupart des projets.

    Ce qui est important, c’est surtout de ne pas s’enfermer dans la logique de la grille : elle est là pour nous aider pas pour nous faire… prendre la tête ^_^v Toutes les valeurs d’une grille ne sont pas forcément harmonieuses.

    J’ai passé beaucoup de temps à casser la grille en reprenant « à la main » de nombreuses valeurs. Les valeurs de padding autour d’un filet gris clair d’un pixel n’ont pas à être identiques à celui que l’on mettrait autour d’un filet plus foncé et/ou plus large, etc. Mais là, on touche quasiment l’indicible : la main et la souris sont guidés par l’intégration des règle d’harmonie, de lisibilité, des rapport entre forme et contre-forme, etc.

  8. jeromeM dit :

    J’aime l’idée de partir sur une grille pour ensuite m’en dégager. Il est en effet intéressant de positionner des éléments en dehors de la grille, parfois un décalage léger permet d’apporter une dynamique forte. Pas mal d’ouvrages sur le sujet d’ailleurs (« making and breaking the grid »).

  9. jeromeM dit :

    Le livre de Mark boulton aborde également le sujet.

  10. Gwenn dit :

    Je suis un peu de l’avis de JéromeM, les grilles ne sont en rien contraignantes. Il suffit des bien les maîtriser pour pouvoir s’en dégager à volonté. Les grilles sont un outil de conception fondamental pour avoir une structure de site claire et cohérente, mais celle-ci peut être à peine visible pour l’oeil du visiteur.

    Donc pour une fois, je ne partage pas l’avis de ce blog que jaime consulter :-) Mais merci bien pour le débat !!

  11. Bruno Bichet Intégrateur Web dit :

    @Gwenn — C’est bizarre parce que nous disons exactement la même chose : pourquoi dis-tu que tu ne partages pas l’avis du blog ?

  12. Pierre Bertet dit :

    @Bruno – L’intérêt d’utiliser une grille verticale est aussi d’obtenir une certaine harmonie sur l’ensemble du site : par exemple, le texte d’une colonne sera toujours aligné sur le texte du conteneur principal.

    Une grille verticale a été utilisée pour le nouveau thème de notre blog, et nous avons pu – non sans peine – la respecter.

    Un bookmarklet présent dans cet article permet d’afficher la grille, si tu veux avoir une idée : http://www.lesintegristes.net/2009/12/22/les-integristes-le-theme/

  13. Bruno Bichet Intégrateur Web dit :

    @Pierre Berthet — Je vois bien l’intérêt d’utiliser une grille verticale en ce qui concerne l’harmonie, etc. et j’en ai souvent utilisé quand je faisait de la PAO. Je dis juste que sur le web, c’est beaucoup moins évident à mettre en place et encore plus difficile à maintenir sur la durée.

    D’ailleurs, la preuve c’est qu’en affichant la grille sur ton nouveau design comme tu le proposes, on peut voir qu’il n’y a pas grand chose d’aligné au-delà de la première ligne du haut du contenu et de la sidebar…

  14. Pierre Bertet dit :

    @Bruno : Je suis tout à fait d’accord avec toi, il est très difficile de mettre en place une grille verticale avec les outils dont nous disposons aujourd’hui. L’investissement en temps est beacoup trop important pour atteindre ce niveau de précision pour chaque projet.

    Pour la deuxième partie de ton commentaire, pourrais-tu m’envoyer un screenshot par mail ? Hormis quelques exceptions délibérées (textes des boutons), la grille verticale est scrupuleusement respectée sur l’ensemble du site, y compris dans les formulaires. Seul IE affiche de légers décalages, mais je ne penses pas que tu navigues avec :-)

  15. Bruno Bichet Intégrateur Web dit :

    @Pierre Bertet — je navigue parfois avec IE comme tout le monde ;) En réalité non, j’utilise principalement Google Chrome (et en l’occurence, c’est la même chose avec Firefox). Bon, j’ai fais une capture d’écran, mais il faudrait que je la commente, ça va prendre un peu de temps.

    Pour résumer : le haut du bloc « Météo » de la sidebar est aligné sur le haut du texte du contenu, tandis que l’alignement du haut du bloc suivant « Derniers articles » se trouve entre deux lignes de ce même contenu.

    Par ailleurs, les titres « Météo » et « Derniers articles » ne sont pas alignés du tout sur le texte du contenu.

    Les dates de la sidebar sont parfois sur deux lignes, et parfois sur 3 lignes. Dans le même temps les titres à côté occupent parfois une ou deux lignes. Pour le coup, ça ne gêne pas la continuité de la grille verticale, mais ça n’en est pas moins gênant visuellement…

    Je n’ai pas fait de tests poussés, mais on peut raisonnablement penser que faire l’impasse sur l’alignement vertical du champs de recherche en haut de la sidebar n’était pas une bonne idée, parce que du coup, si la grille était alignée sans ces éléments (le champs de recherche et le bouton « Rechercher »), ce n’est plus le cas.

    En effet, si la grille est décalée dès le début, à moins de rattraper manuellement les choses dans les blocs suivants, ça ne peut pas fonctionner.

  16. Bonjour à tous.

    Je suis graphiste, et travail en permanence avec un intégrateur (je ne touche donc absolument jamais au code). J’ai réalisé le blog des intégristes avec Pierre Bertet.

    J’ai beaucoup aimé ton article, c’est vrai que trop souvent nous entendons parler de grilles comme quelque chose d’indispensable à un bon design. Pour moi, un bon design est avant tout un vrai parti-pris; vraiment compréhensible; avec ou sans grille! Et c’est vrai qu’une grille n’apporte pas forcément de proportions harmonieuses. Personnellement, je travaille toujours de la même manière: j’étudie mon design sans grille. Une fois que j’ai une idée précise du design final, je crée alors ma grille: celle-ci se plie donc à mon design (et non le contraire).

    Par contre, je suis persuadé que le webdesign actuel fait trop souvent abstraction de grilles verticales. Celles-ci apportent un rythme particulièrement intéressant.

    Sur lesintegristes.net, nous avons réellement misé sur cette grille verticale. Bien sur, comme à chaque travail sur une grille, il est parfois indispensable de la casser. Par exemple, sur notre design en question, les titres et dates, qui sont des éléments perturbateurs par nature, sont volontairement décalé (pour une cohérence visuelle globale). Néanmoins, chaque ligne de blocs de texte est calée, et l’œil trouve très rapidement des alignements agréables. @Bruno – C’est vrai que plusieurs éléments de notre grille sont décalés; mais volontairement. Malgré ces exceptions, il existe sur ce blog un réel rythme intéressant; notamment sur la home page et sur de nombreuses autres pages du blog. Cette grille est étudié et restera calée, même sur un long terme. Qu’en penses-tu? @everybody – Qu’en pensez-vous?

    Je suis un fervent défenseur de ces grilles verticales. Elles apportent pour moi énormément à un design, en plus d’une grille horizontale. Mais, comme toutes grilles, elle se doit d’être perturbé à certains endroits-clefs!

  17. Bruno Bichet Intégrateur Web dit :

    @Grégoire Dierendonck — Je ferais une réponse plus détaillée (peut-être sous forme de billet) sur cette question de la grille verticale une prochaine fois.

    J’ai l’impression qu’on ne parle pas de la même chose. Ma conception d’une grille verticale est la suivante : la ligne de base des textes devrait être alignée sur toutes les colonnes ; la hauteur des images devrait également être un multiple de cette grille. Sinon, c’est pas aligné verticalement dans la mesure où un alignement vertical sur une seule colonne ne rime à rien.

    Pour te faire une idée plus précise de ce que je veux dire, je te propose d’aller voir cet exemple paru sur A List Apart :

    http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

    Après, qu’on fasse l’impasse sur certains éléments, pourquoi pas, mais dans le cas des intégristes, rien ou presque, n’est aligné si on considère les textes du contenu et les textes de la barre latérale…

  18. Pierre Bertet dit :

    @Bruno : D’accord, je pense qu’il s’agit simplement d’une incompréhension : les lignes grises sur notre grille représentent les demi-lignes, absentes dans l’exemple que tu donnes. Pour le reste, c’est identique à ton exemple si tu ne considères que les lignes noires.

  19. Bruno Bichet Intégrateur Web dit :

    @Grégoire Dierendonck @Pierre Bertet — En relisant les différentes interventions je pense avoir trouvé d’où vient l’incompréhension. Plutôt que d’utiliser le terme grille verticale, on pourrait parler de rythme vertical.

    Pour moi le premier terme est censé englober toute la page, ce qui explique pourquoi je tiens à ce que les éléments du contenu soient alignés avec ceux de la ou des barre latérales.

    Dans la notion de rythme vertical, on s’attend à ce que les éléments du contenu et de la barre latérale suivent le même tempo même si ce n’est pas forcément au même moment (titres de la sidebar qui ne s’alignent pas sur la ligne de base du texte des colonnes autour, par exemple).

    Je précise que je coupe peut-être les cheveux en quatre, mais il se trouve que lors de la refonte de mon blog, je me suis tâté pour faire une grille verticale en plus de l’horizontale, et j’ai abandonné parce que je ne voulais pas m’obliger à recadrer les images en tenant compte d’un multiple de la grille pour la hauteur (je le fais déjà pour la largeur) !

    Ceci dit, mon design respecte un certain rythme vertical. Mais pour des questions de lisibilité, j’ai modifié pas mal de valeurs sinon, certains interlignage étaient trop faibles (pour les titres, lorsqu’ils passent sur deux lignes, notamment) ou trop important, ou encore les tailles de caractère étaient trop petites.

    C’est pour ça que je disais dès de début du fil que mettre en place une grille horizontale et une grille verticale n’était pas une sinécure ;)

    Merci en tout cas pour ce débat très intéressant et totalement dans le sujet, je trouve ;)

  20. […] Grid Design — Quelques notes sur l’intérêt des grilles de mise en page […]

  21. […] Grid Design — Quelques notes sur l’intérêt des grilles de mise en page La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dansFramework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif […] […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site