Le guide du concepteur sur la théorie des grilles

Que vous travailliez dans la conception Web ou imprimée, vous devez comprendre la théorie de la grille. Alors que certains concepteurs évitent activement les grilles au profit d'une mise en page plus intuitive et de forme libre, les plus réussis le font après avoir travaillé avec des grilles pendant des années - ils comprennent les règles avant de les enfreindre.

Pour les concepteurs autodidactes, une grande partie de la théorie et de la rationalisation derrière la grille en tant qu'outil de conception n'est tout simplement pas couverte par les articles de blog et les conférences typiques. Nous sommes ici pour mettre les choses au clair avec ce guide de poche sur la grille, comprenant un petit peu de théorie.

Vous voulez garder les choses simples? Essayez un bon Générateur de site Web , et assurez-vous que vous êtes entièrement pris en charge avec le parfait hébergement Web un service. Le stockage n'est pas à la hauteur? Voir ces stockage en ligne options.



01. Les grilles établissent un mètre et un rythme

une grille en noir et blanc

Une grille aidera le spectateur à accéder aux informations qu'il souhaite

Le but principal d'une grille - au moins en conception graphique - est d'établir un ensemble de lignes directrices sur la façon dont les éléments doivent être positionnés dans une mise en page. Non seulement une grille efficace fournit le rythme d'un dessin, mais elle définit également le compteur.

C'est un élément important pour rendre le contenu accessible et aider le spectateur à comprendre où trouver la prochaine information dans la mise en page. Il définit les attentes et définit les règles, le timbre et - dans certains cas - la voix du design. Pensez à une grille comme fournissant la feuille de route le long de laquelle vos spectateurs voyagent.

02. Les grilles définissent et reflètent la proportion

Un aspect clé de la grille est sa capacité à aider à déterminer et à définir la proportion. Dans l'impression, les proportions font le plus souvent écho à la taille du support; la forme et l'orientation du papier se reflètent souvent dans la taille et la forme des images incluses dans une mise en page, par exemple.

Cela semble confortable car le lecteur comprend de manière subliminale le contexte de la mise en page en raison de la forme physique et de la taille du mécanisme de distribution, tel qu'un morceau de papier.

Sur le Web, cette idée de réflexion n'est pas si importante, mais les grilles peuvent être utilisées de la même manière pour ancrer le contenu à l'écran. Les écrans peuvent être plus fluides, et en tant que concepteur, il n'est pas possible de savoir avec la même confiance quelle taille et forme d'écran seront utilisées pour afficher le contenu.

Indépendamment de cela, la proportion et l'échelle sont des outils importants dans une mise en page.Par conséquent, l'utilisation d'une grille pour déterminer et appliquer des règles permet de définir cet ensemble très important de panneaux indicateurs qui permettent au lecteur d'accéder au contenu et de le comprendre.

03. Les grilles fonctionnent avec le nombre d'or

le nombre d

Baser votre conception sur le nombre d'or peut aider à assurer une mise en page agréable

L'ensemble du concept d'un «système» de grille définitif est une invention relativement récente dans le monde du design. Les grilles existent de manière intuitive depuis les premiers jours du dessin et de l'écriture, mais ce n'est que récemment que la mise en page a été considérée de manière savante et, en tant que telle, elle n'a jamais existé indépendamment des autres règles de mise en page des meilleures pratiques. Un tel exemple de croisement est celui où le Golden Ratio rencontre la grille.

Le Nombre d'or (également connu sous le nom de moyenne d'or) détermine l'ensemble de proportions le plus agréable pour un élément, et est simplifié à la «règle des tiers». Lorsqu'elles sont utilisées en combinaison avec une grille, ces règles simples de taille, de position et de proportion peuvent aider à garantir une mise en page cohérente, mais également esthétique.

Ceci est important car, encore une fois, cela peut aider à rendre le contenu plus accessible. N'oubliez pas qu'une grille est la colle invisible derrière le contenu - dans la plupart des cas, elle doit être transparente pour le spectateur.

04. Il existe un système de grille 960 sur le Web

Une grille de 960 pixels

Une grille de 960 pixels peut être divisée de différentes manières, ce qui en fait une option flexible

Une fois que vous connaissez les avantages d'avoir un système de grille en place, il est logique que les concepteurs Web aient adopté les grilles. Pour rendre les choses plus pratiques, quelques tailles courantes sont devenues la norme. Le plus courant est le système de grille 960px.

960px est une bonne taille car il a de nombreux facteurs (nombres entiers dans lesquels il peut être divisé): 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, etc. Être capable de diviser la grille de cette manière offre une grande flexibilité pour la largeur des colonnes, offrant un système de grille polyvalent et réutilisable.

Inutile de dire que de nombreux concepteurs ont été occupés à intégrer la grille 960px dans un ensemble utile de bibliothèques CSS. Un tel exemple peut être trouvé à 960.gs , mais il y en a d'autres disponibles aussi.

05. Les grilles constituent une base solide

Comme nous l'avons vu, les grilles existent principalement pour aider à déterminer le positionnement et l'équilibre dans une mise en page. Fournir ce type de base solide peut aider à garantir que le contenu est présenté dans un ordre facile à comprendre, mais il peut également être utilisé pour mettre en évidence des domaines spécifiques de contenu simplement en les sortant de la grille.

Le spectateur identifiera naturellement ces cassures et sera attiré vers elles, donnant au concepteur l'opportunité de jouer avec la hiérarchie d'une mise en page et de peaufiner le sens d'une œuvre.

06. Les grilles fonctionnent avec d'autres principes de conception clés

Disposition de la grille à 12 colonnes

Une fois que vous avez maîtrisé les bases, vous pouvez commencer à vous éloigner de la grille

N'oubliez pas que la grille n'est qu'un outil aux côtés de nombreux principes de base que vous pouvez utiliser pour améliorer vos mises en page. Ne vous laissez pas entraîner par l'utilisation d'une grille de manière trop rigide - certains des meilleurs designs enfreignent toutes les règles de la disposition de la grille et sont d'autant plus efficaces.

Comprendre comment et quand utiliser une grille ne peut vraiment venir que de l'expérience, alors expérimentez. Consultez nos autres articles ci-dessous sur la théorie du design pour découvrir d'autres outils et principes pratiques que vous pouvez utiliser pour améliorer vos créations.

Cet article a été initialement publié dans rapporter magazine. Abonnez-vous au net ici .

Articles Liés: