grilles


L’utilisation des grilles dans le processus de création graphique du site internet nous vient bien sûr du monde de l’édition : derrière chaque magazine, chaque livre, se cache une structure invisible qui sera son squelette donc en quelque sorte sa signature graphique.

Pourquoi caler les éléments sur du papier et ne plus le faire à l’écran?

La grille utilisée dans le web permet d’une part, d’obtenir des sites bien structurés, agréables à regarder avec des espaces de vide suffisants pour permettre une lecture agréable du contenu, et d’autre part, de standardiser les templates, ce qui est bien pratique pour les développeurs qui n’auront pas à compter les pixels de votre maquette graphique!.
Le but du site internet étant de transmettre une information, structurer le contenu dans le web vous permet d’explorer votre créativité (qui bien sûr vous a poussé hors des limites du compréhensible pour les non-initiés!) et de garder un texte lisible et aéré avec une réelle impression de maîtrise de l’espace.

Quelle grille utiliser?

Il est facile d’être perdu vu la quantité de méthodes disponibles sur la toile, je vais donc vous en présenter 2 qui me semblent efficaces.

Un système souvent utilisé dans la mise en page d’un site internet est celui de la grille de 960 px de large divisée en 12 ou 16 colonnes.

Le principe et de laisser des marges à gauche et à droite de 10px puis de faire des colonnes de 60px de large s’il y a 12 colonnes ou de 40px s’il y a 16 colonnes.
Si vous êtes perdu, vous pouvez jeter un œil à la démo ci-dessous, certainement plus parlante que bien des explications : http://960.gs/demo.html. Le principal inconvénient de cette grille est qu’elle est très contraignante à mettre en place dans la préparation des fichiers.

Pour ma part, j’ai préféré opter pour un autre système de grille beaucoup plus simple, notamment pour les moins « matheux » d’entre nous, en utilisant uniquement des multiples de 10 : les éléments sont toujours des multiples de 10 et mes marges aussi, que du bonheur!
Je vous laisse un layout pour illustrer cette méthode dite des « 10 pixels ». En général, je laisse des marges de 10px à droite et à gauche de mon contenu, puis 30px entre les ensembles d’éléments et 20px entre les sous-ensembles.

layout





pdfTélécharger le layout

 

Pour une mise en place plus que rapide de ma maquette, j’utilise la grille dans Illustrator (ou photoshop) :
Allez dans les préférences puis dans Repères et grilles.
J’ai choisi ici des pas de 240px et des subdivisions de 24px, mais vous pouvez choisir ce qui vous conviendra le mieux, du moment que cela reste multiple de 10 (60/6, 320/32, 240/24 ….repères et grilles).






Ensuite, je place les repères sur ma page et je n’ai plus qu’à caler mes éléments : me voilà avec un beau template!
J’espère que ces conseils vous serviront.

Et vous, utilisez-vous les grilles?

aurelie

Vous avez aimé ce billet ? Partagez-le avec votre réseau :

  • Print this article!
  • Digg
  • Facebook
  • blogmarks
  • del.icio.us
  • LinkedIn
  • Reddit
  • Scoopeo
  • Yahoo! Bookmarks
  • Twitthis
  • Wikio FR
  • Netvibes
  • Technorati