L'idée principale derrière l'utilisation d'une grille dans le webdesign est de l'utiliser pour créer un équilibre visuel et structurel solide. Une mise en page sophistiquée offre plus de flexibilité et améliore l'expérience visuelle des visiteurs. En fait, les utilisateurs peuvent plus facilement suivre la cohérence de la page, tandis que les développeurs peuvent mettre à jour la mise en page de manière plus cohérente et consistante. Toutefois, il est assez difficile de trouver son chemin à travers toutes les théories sous-jacentes des systèmes de grille : ce n'est pas facile du tout. Voici quelques notions clés qui vous aideront à apprendre les rudiments et les techniques essentielles.
La grille est la manifestation la plus éclatante de la volonté d'ordre dans la conception chez le webdesigner.
Les unités sont:
- Le bloc qui constitue la base d'une grille. Ils sont tous uniformes.
- Les colonnes sont le regroupement des unités qui créent la structure visuelle de la page. Elles ne sont pas nécessairement uniformes.
C'est un système solide pour placer les objets sur votre page.
La première étape consiste à établir une grille de mise en page de base. Avec ce graphique “épine dorsale”, vous pouvez déterminer comment les grands blocs de typographie et d'illustrations se placent dans vos pages.
1) Pour commencer
Rassemblez les éléments représentatifs de votre texte, les graphiques, les illustrations et expérimentez avec divers arrangements les éléments sur la page. Votre but est d'établir une politique cohérente, celle qui vous permet de “brancher” texte et images sans avoir à repenser votre approche de conception de base sur chaque nouvelle page.
2) Exemple
Mettons en place un système de grille très basique pour s'entrainer, vous pourrez ensuite passer par des systèmes de grilles plus complexes et même, à l'aide d'images, de fonds, faire oublier cette grille à vos visiteurs.
Prenons comme exemple un site web dont la largeur sécurisée est de 960 pixels. Il vous faudra construire, en utilisant votre éditeur d'images, une composition qui se découpera en 12 colonnes de 60 pixels de large séparés par 12 espacements de 20 pixels de large.
Votre grille ainsi obtenue, placez-la dans votre CSS en image de fond de votre site et positionnez vos éléments en restant rigoureusement attachés à cette composition :
Vous pouvez procéder ainsi:
- Le menu de gauche peut prendre 4 colonnes de 60pixels et donc 3 espacements de 20 pixels : sa largeur sera de 300pixels
- Votre contenu se déploiera sur le reste avec un espace à gauche de 20 pixels par rapport au menu : donc 660 pixels
- Vous pouvez décider que toutes vos images se développent sur une largeur de 2 colonnes donc : 2*60 pixels + 1*20 pixels d'espace donc 140 pixels…
Et ainsi de suite.
Votre site web n'en sera que visuellement mieux construit et plus simple à lire.