Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Tout sur les systèmes de grille

by
Length:MediumLanguages:
This post is part of a series called Design School for Developers.
Improving Layout With Vertical Rhythm
Choosing a Grid System

French (Français) translation by Henri Lotin (you can also view the original English article)

Maintenant vous savez tout sur la couleur, la typographie et diverses choses que vous devriez entreprendre avant de commencer un projet de design, il est temps de commencer à se salir les mains avec quelques-unes des bases de travail avec des grilles dans vos créations.

Les grilles vous permettent de construire une structure et une forme solide dans vos créations. Tout comme nous avons examiné les hiérarchies et le rythme typographiques, nous pouvons effectuer les mêmes sentiments en utilisant une structure de grille. Juste comme avec le codage, il y a des moyens recommandés d'organiser les modules et les sections de code, et un système de grille peut aider de même lors du design pour le web.

The Grid System website
Le site web The Grid System

Les grilles sont non seulement utiles pour nous en tant que designers ou développeurs - elles sont également bonnes pour l’utilisateur. Tout au long de cette session, j’ai souligné l’importance de la création d’un bon parcours de l'utilisateur et une bonne expérience utilisateur par le biais de vos designs - après tout, l’utilisateur est là pour consommer votre contenu et vous voulez en faire un aussi bonne expérience pour eux que vous le pouvez. Avoir une grille solide à utiliser dans vos créations (et ensuite mener à bien la phase de développement) vous permettra de faire exactement cela, en créant la cohérence et la familiarité (et ainsi gagner la confiance) dans votre design.

Si votre site est bien conçu, une grille vous aidera à projeter cette confiance à vos utilisateurs - toutefois consciente ou inconsciente, cette projection peut être. Utiliser un système de grille ne signifie pas que vos créations doivent devenir ennuyeuses ou empaquetées, non plus. Tout comme il a été dit avec le design responsive, cette responsabilité vous incombe, de créer un design qui soit unique et a quelque chose de différent- et un système de grille doit être considéré comme quelque chose qui vous permettra de le faire, plutôt que de vous limiter.


Qu'est-ce qu'un système de grille ?

...une structure comprenant une série de lignes horizontales et verticales, utilisée pour organiser le contenu.

Dans ses termes les plus simples, un système de grille est une structure comprenant une série de lignes horizontales et verticales qui se croisent et sont ensuite utilisées pour organiser le contenu. En des termes encore plus basiques (qui le rendent plus facile à comprendre !) un système de grille est un moyen de fournir un système avec lequel les designers peuvent travailler avec la structure et le contenu actuel et l'imagerie de manière beaucoup plus lisible et facile à gérer.

Les systèmes de grille ont longtemps été utilisés dans les publications imprimées, mais grâce à leur introduction dans la design web et dans beaucoup de frameworks de grille CSS, qui ont surgi depuis, elles sont maintenant utilisées pratiquement comme une norme.

Utiliser un système de grille dans vos créations est un moyen d’atteindre un degré d’homogénéité qui serait autrement extrêmement difficile à maîtriser et à dépeindre dans vos créations. Encore une fois, uniformité et cohérence sont essentiels à la création d’un site Web que vos utilisateurs trouveront faciles à naviguer, lire et comprendre. Une bonne expérience utilisateur est créée en s’engageant avec votre utilisateur et en bâtissant un sentiment de familiarité avec eux - et un système de grille contribue à vous aider à le faire en fournissant une solide base à partir de laquelle vous pouvez pousser votre design.

An example grid the Gerstner on the Gridset App website

Une grille d’exemple, the Gerstner, sur le site web Gridset App.

Même si votre grille est quelque chose qui finira par être invisible à votre utilisateur final, vous pouvez l’utiliser pour vous aider dans la création des mise en pages pour vos créations. Mais, comme toutes les règles quand on crée (et parfois lors du développement) les règles sont faites pour être brisées. Vous ne devriez pas nécessairement toujours en tenir à la formation de votre grille, mais vous devez comprendre les systèmes de grille, avant que vous puissiez vous engager à enfreindre les règles.

Sur le web, nous avons de nombreux frameworks de grille CSS dont nous disposons, ainsi que de nombreux outils disponibles pour fonctionner avec nos propres systèmes de grille que nous pouvons créer nous-mêmes. Ça dépend totalement de vous pour savoir lequel vous choisiriez d’utiliser lors du design - par exemple, un framework CSS avec lequel vous pourrie être familier en tant que développeur, donc vous pouvez vous faire la main en designant avec lui, aussi - mais nous allons examiner pourquoi designer avec un système de grille est une bonne pratique et aussi contribue à vous faire comprendre avec quel système de grille poursuivre.

Avantages de l’utilisation des systèmes de grille

Il y a beaucoup d’avantages utiliser de systèmes de grille - cela peut commencer lorsque vous créez tout d’abord le site web, mais peut également s’avérer utile pendant l'étape de la construction et du développement, ainsi que lors de la gestion à la fois du design et la construction du site à l’avenir.

La bonne chose au sujet des systèmes de grille, c’est qu’ils vous permettent de designer dans les proportions, d’équilibrer tous les différents éléments que vous pourriez avoir dans votre design. Un système de grille doit toujours être très flexible, afin que vous puissiez le plier à vos besoins lorsque vous créez les différentes parties de votre site web.

A grid overlay with guides in Photoshop

Une superposition de grille, avec repères dans Photoshop.

Utiliser un système de grille dans votre design permet également ce sentiment d’uniformité et de familiarité - alors qu’il peut fonctionner pour que certains sites aient des designs très différents de page, pour beaucoup, ce ne sera pas le cas et vous voudriez avoir une sensation plus structurée et uniforme pour la mise en pages principale. Cela rend aussi les choses beaucoup plus faciles quand vous arrivez au codage du design, car cela signifie que vous pouvez choisir les éléments uniformes dans votre design et appliquer cet effet modulaire pour votre code et la structure CSS.

Inconvénients de l’utilisation de systèmes de grille

Dans un souci d’équilibre, regardons quelques inconvénients...

Tout d’abord, beaucoup de gens, notamment ceux qui sont nouveaux dans le design ou dans le design avec des grilles, peuvent trouver que les systèmes de grille sont assez étouffants et limitent la créativité. Malheureusement, cela peut parfois se produire, et - pardonnez le jeu de mots - vous pouvez parfois avoir l'impression d'être empêchés de penser en dehors de la boîte et créez plutôt des designs très sobres, cliniques. Dans des cas pareils, je vous encourage à essayer et vous écarter de la grille - au lieu de cela, jouer avec les éléments sur une page jusqu'à ce qu’ils semblent être au bon endroit et puis basculez en regardant votre grille qui vient se superposer à votre design (nous vous en dirons plus à ce sujet sou peu) et voyez comment vous pouvez faire que vos idées fonctionnent pour la structure de la grille que vous avez. S'il n’est pas conforme à ce design de grille, il est peut être temps de commencer à travailler avec un autre système de grille ou un autre design à la place.

Les systèmes de grille sont aussi vraiment, vraiment difficiles. Non seulement cela demande beaucoup de volonté pour les comprendre les premières fois vous les utiliser (bien que vous aurez probablement un moment « aha ! » pas longtemps après quelques instants de pratique et d'amusement avec) mais ils peuvent aussi parfois impliquer beaucoup de maths et de calculs. Je ne suis pas quelqu'un qui s’en sort toujours bien en faisant beaucoup maths - de ce côté des choses je trouve cela personnellement très difficile. C'est également très dur juste de simplement comprendre le concept de grilles et comment elles peuvent aider votre design - mais j’espère que vous allez commencer à voir l’effet peu de temps après avoir commencé à les utiliser dans vos créations, tout comme vous l'aurez probablement fait sans doute avec vos pratiques de développement. Et bien que les grilles demandent sacrément un dur labeur, elles valent très certainement la peine pour le résultat final.


Utilisation de systèmes de grille dans vos designs

Voici quelques conseils simples et pratiques pour l’utilisation de systèmes de grille dans vos créations :

  • Définissez une superposition de votre grille sur votre design. Si vous êtes à l’aise à designer dans le navigateur à l’aide de votre framework CSS de choix (un exemple prédéfini, ou une des vôtres) alors c’est très bien - mais sinon, je recommande toujours de créer une superposition de votre système de grille pour votre design. Que vous soyez dans Photoshop ou dans un autre programme graphique de votre préférence, créez un calque supérieur qui affiche votre grille et verrouillez-le en place. De cette façon, il vous est toujours possible de l'activer/désactiver à votre convenance.
  • Créez des repères pour vous aider. Si vous avez une superposition en place, la prochaine chose à faire est de créer des repères pour vous aider. En général, j’aime créer un repère pour chaque début et fin d’une colonne dans mon système de grille. À ce stade, il est là purement comme une petite aide supplémentaire aux côtés de ma superposition de grille - pour m’aider à définir les bords de mes colonnes de grille.
  • Essayer de travailler avec des contraintes et des restrictions. Beaucoup peuvent penser que travailler avec un système de grille seul est une bonne recette pour travailler de façon plus contraignante, mais ce n’est pas le cas. Travailler avec les systèmes de grille - et en particulier lors de la création du vôtre - c’est très facile d’aller créer un système permettant 16 colonnes, lorsque 6 peuvent au contraire être une solution plus sage. Apprendre à designer avec des contraintes - non seulement au sein de votre système de grille - vous aidera seulement sur le long terme, car vous serez en mesure de concentrer votre design sur ce qui est plus important et pertinent pour vos utilisateurs.
  • Faites attention à votre espacement. Beaucoup de la mise au point en systèmes de grille que nous utilisons est la quantité de colonnes présentes - la largeur des colonnes, la largeur de la gouttière entre les colonnes (la quantité d’espace entre chaque colonne) et combien d’espace il faudrait autour de ces éléments. Toutefois, en retour, n’oubliez pas l’espace vertical qui est à votre disposition et assurez-vous d’utiliser également votre grille pour vous aider avec l’espacement disponible là. Par exemple, se servir de la mesure de la largeur de la gouttière, également comme valeur d'espacement vertical peut faire des merveilles pour votre design et comment les éléments sont chacun espacés.

Devoirs

Maintenant vous devriez avoir une assez bonne idée sur les systèmes de grille, ce qu’ils sont et les façons utiles dont vous pouvez commencer à les utiliser dans vos créations. Le prochain article parlera de comment s’y prendre pour choisir votre système de grille - et que vous choisissiez de créer le vôtre, ou travailler plutôt avec un framework pré-conçu.

En attendant, je vous invite à plus de planification. Tout à fait une court devoir vraiment (vous vous reposez très légèrement ici !) mais esquissez dans votre bloc-notes, jouez avec les grilles et la mise en pages. Pensez en fonction de la structure, vous servant des colonnes comme une idée de baser votre contenu autour de la grille. Ce que vous créez pourrait ne pas être une bonne idée le lendemain matin, mais vous aidera au moins à vous concentrer à penser aux grilles et à voir ce que vous pouvez faire avec elles dans un format jetable.


Lectures supplémentaires

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.