Le webdesign selon les grilles

Les grilles et le Webdesign Dernière mise à jour le 23 mai 2013 à 16h52

Tout bon webdesigner sait que l’esprit créatif ne suffit pas à rendre son site professionnel, l’une des bonnes pratiques de base du webdesign est la conception d’un template structuré, et celle qui s’apparente le mieux à cela est la grille. Cette méthode de travail pourtant répandue dans le domaine de l’architecture et de la typographie est tout simplement mal connue dans le webdesign. .

Le principal soucis est que la plupart des webdesigners pensent que la conception d’une grille est une tâche ennuyeuse réservé aux mise en page à largeur fixe. Et il peut certainement l’être dans certains cas. Cela est particulièrement vrai si vous l’utilisez comme un formulaire où chaque case doit être complété avec des données…

Qu’est-ce qu’une grille ?

Une grille est par définition un “quadrillage” composé de repères :

  •  Les colonnes, véritable armature, elles servent à positionner les éléments à l’horizontale.
  •  Les gouttières qui représentent les espaces entre chaque colonne.
  •  Les marges, aussi appelées “blanc tournant”. Surtout utilisées en PAO dans le domaine du prépresse, les marges servent à aérer le texte, il en est de même pour les marges d’une grille.
  •  Les lignes (axes horizontaux), moins récurrentes mais tout aussi importantes, les lignes servent à positionner les éléments à la verticale.

Exemple de grille avec 16 colonnes

Pourquoi utiliser une grille ?

Une grille a pour fonction de structurer un site Internet. Elle représente l’armature générale sur laquelle s’organise votre page web, et le positionnement de votre contenu est logiquement influencé par cette pratique favorisant ainsi sérieusement votre intégration CSS en la rendant plus rapide. Elle permet entre autre d’y voir plus clair lors de la conception d’une maquette.

Les éléments qui la composent sont parfaitement alignés et ce de façon proportionnelle. Tout est plus harmonieux et l’œil humain aime ça.

Pour finir la grille ce veut également utile dans l’adaptation de la structure d’un site internet sur smartphone et tablette via les points de rupture qui améliorent sa lisibilité. Peu importe l’appareil utilisé, vous n’aurez aucun mal à anticiper le comportement de ces paliers d’adaptation vous garantissant ainsi un affichage optimal sur la grande majorité des résolutions (320px, 640px, 768px, 1280px…).

Les dimensions d’une grille ?

Certains standards existent avec pour exemple, la valeur de 960px de largeur qui revient couramment pour s’adapter aux petites résolutions. N’étant pas une règle absolue, il est possible de prendre comme exemple le phénomène “responsive” qui s’accroît de jour en jour du aux supports numériques dont le nombre augmente de façon fulgurante. Certaines estimations placent à 40% la part du marché mobile en 2016. Ce fait, certains sites l’ont pris très au sérieux, ils utilisent donc des grilles adaptées.

Le nombre de colonnes qui composent une grille est souvent de 12, 16 ou encore 24, mais encore une fois, rien ne vous oblige à suivre cette tendance. Certains de vos projets forts en contenu nécessiteront surement plus de 24 colonnes avec des dimensions personnalisées, ceci s’applique également aux lignes,  aux gouttières et aux marges.

Exemple de grille avec ses dimensions

Quelle grille choisir ?

Le monde d’aujourd’hui étant source de disparités technologiques, il en résulte une diversité d’affichages écrans allant du simple au triple… Vous comprendrez qu’il est difficile dans un cas comme celui-là de vous conseiller une grille en particulier. Il vous faudra par conséquent adapter cette dernière à votre projet.

Nous pouvons penser de la manière suivante : Plus le site a de contenu textuel et imagé, plus le nombre de colonnes est important. Inversement, moins il y a de contenu, moins il y a de colonnes.

Notez également que le nombre de colonnes impacte directement leur largeur respective. En effet, pour une grille composée de 12 colonnes, leur largeur sont bien supérieures à celles d’une grille composée de 24 colonnes (mathématiquement deux fois plus larges sauf modification éventuelle des gouttières).

Exemple différence de taille de grilles


Dans le cas où vous avez une idée concrète de l’architecture qu’aura votre site, construisez ou téléchargez votre grille sur Photoshop et amusez-vous à placer vos premiers blocs comme vous l’imaginez en tenant compte du quadrillage.

Si à l’inverse vous semblez être victime du syndrome de la “page blanche”, amusez-vous à placer toute sorte de grilles. Quelques fois, le simple fait d’avoir sa grille positionnée devant soi suffit à stimuler votre créativité, vous commencerez à placer un bloc, puis un autre… Au bout du compte, vous trouverez votre armature plus facilement qu’avec un document vierge sur fond blanc.

Grille avec placement blocs

Des outils sur le web pour générer vos grilles

Pour les plus fainéants, il est possible de générer des grilles en ligne très facilement. Plusieurs sites proposent cet outil, nous en retiendront cependant deux :

ModularGrid.org

Vous entrez les valeurs qui vous chantent et vous téléchargez votre grille sur Photoshop. Trois choix de grilles vous sont proposés :

  • PNG
  • Motif
  • Masque

Vous choisissez celle qui convient au mieux, selon vos habitudes.

MAJ : Vous pouvez également l’utiliser en tant qu’extension Photoshop.

Pour tester l’outil, rendez-vous sur ModularGrid.

Guideguide.me

Logo GuideGuide

Et puisque nous parlons de Photoshop, il existe une extension appelé GuideGuide (compatible CS5 & CS6) permettant de générer des grilles à l’aide des repères (CTRL + : pour les affichés). Depuis le panneau GuideGuide, vous pouvez contrôler gouttières, lignes, colonnes, marges … Vous y trouverez d’autres fonctionnalités intéressantes que nous vous laissons découvrir sur le site officiel.

960.gs

Logo 960.gs

Un site complet qui vous propose un framework CSS simple mais sacrément efficace. Vous générez simplement votre grille avec les valeurs de votre choix et exportez votre code en CSS. Des grilles par défaut sont également téléchargeables où chaque fichier CSS contient une grille.

Chaque colonne est définie via une div et chaque div est en float. Les gouttières quant à elles sont définies par un simple margin-right, annulables par une surcharge avec les classes .alpha et .omega.

Pour tester l’outil, rendez-vous sur 960.gs

978.gs

Logo 978.gs

Il s’agit là d’une alternative au site précédent.

Concrètement qu’est-ce qui change ?

Déjà ce site est plus intuitif, plus convivial… Mais la véritable différence réside dans le faite que la grille 978.gs soit légèrement plus large que celle proposé par 960.gs (28 pixels de différence).

Pourquoi choisir la grille 978px plutôt que la grille 960px ?

Cette nouvelle grille est issue d’un constat m’étant en cause la largeur des gouttières de la grille 960 qui rendraient le montage des blocs difficile. Ce nouveau “standard” aèrerait d’avantage votre structure en intégrant des gouttières plus large.

Pour tester l’outil, rendez-vous sur 978.gs

Quelques exemples

Pour que vous perceviez mieux l’intérêt de cette technique de webdesign, voici quelques exemples de sites Internet dont les structures se basent sur des grilles :

Exemple: Netmacom et grille
Le site de Netmacom lui-même utilise le principe de grille. Il suffit d’observer la structure globale pour s’en rendre compte.

 

Exemple: Materiel.net et grille
Le célèbre site marchand de produits High-Tech, Materiel.net, connu pour la qualité de ses services, utilise également un système de grille sur son site Internet. La quantité de texte est telle qu’il aurait été très délicat d’outrepasser cette règle de bonne pratique.

La home page de 960.gs expose aussi pas mal d’exemples de sites internet basés sur des grilles plus ou moins différentes.

Conclusion

Outre ses vertus bienfaisantes pour nos petits yeux, la grille vous permet au final de gagner un temps précieux et n’est en aucun cas un obstacle à votre créativité. Bien au contraire, elle vous ouvre la porte à une analyse de l’espace plus précise et incontestablement plus facile ! De cette manière vous placez correctement vos blocs même si au départ vous ne saviez pas vers quelle structure vous tourner.

Souvenez-vous qu’une grille n’est pas qu’un moyen de remplir l’espace dont vous disposez, elle représente l’armature qui va vous aider à organiser cet espace.

Une fois que vous aurez saisi tout l’intérêt d’appliquer une telle méthodologie et que vous comprendrez son fonctionnement vous pourrez alors vous tourner vers des constructions de grilles moins rigide pour créer des sites internet plus élégants qui ne laisseront pas transparaître au premier coup d’œil la méthode avec laquelle ils ont été conçus.

Et un des critères important sur lequel on évalue la qualité d’un site internet se concentre sur cette méthode de travail. Autrement dit c’est ce qui peut faire la différence entre un site professionnel et un site amateur.

Vous êtes avertis :D

Le webdesign selon les grilles, 4.8 out of 5 based on 4 ratings

Commentaires

#1
Nya

En ce moment, je suis justement en train de m’efforcer à travailler avec les grilles mais ce n’est pas évident. Mais je me rends bien compte de tout l’intérêt de structurer un design avec cette technique et je poursuis donc mes efforts.

J’ai tout de même une interrogation. Est-ce qu’avec le temps on s’y fait ou bien c’est toujours difficile d’allier créativité et structuration par les grilles ?

Réagissez à cet article

Données obligatoires