Caouinche

n.f : tête.

étym : bourguignon

syn : binette, bourrichon, caboche, ciboulot, caillou, trogne, tronche…

Les grilles

Comment c’est fait ?

En print comme en web la grille est là pour construire, structurer la mise en page.

Un blocage quant à son utilisation ? Pas de soucis, rien n’empêche de l’avoir en fond et de la laquer, puis de la ré activer en fin de projet pour recaler les différents éléments.

Une grille est composée de 4 éléments
Les colonnes qui déterminent les zones de commencement des blocs
Les marges latérales au nombre de deux donc, une à gauche et une à droite
Les gouttières permettant de créer une aération entre les colonnes
La ligne de base pour une structure horizontale

Il n’y a pas de grille de base, chacun peut concevoir la sienne en donnant plus ou moins de largeurs aux colonnes, marges et gouttières.

J’aime personnellement avoir des marges plus conséquentes que mes gouttières dans le but que le contenu ne touche pas aux bords de l’écran, et j’aime qu’entre deux colonnes mon contenu puisse respirer.

La grille est donc là pour aider à constructeur et à structurer, ce qui n’empêche pas d’avoir au sein des colonnes un re découpage ou des éléments en retrait de ces colonnes.

Ne pas travailler avec une grille c’est risquer d’avoir une construction incohérente.
Pour les réfractaires, avec une grille on sait où mettre les éléments, sans grilles on va vouloir faire un découpage de la surface pour y placer les éléments, ce qui revient a travaillé avec une grille.

La grille c’est la vie.

Les grilles avec Figma
source
hulki-okan-tabak-x3kQTL7yw30-unsplash
L’exceptionnel GridCalculator.dk qui permet de concevoir des grilles en .ai, et .png
GridCalculator.dk
hulki-okan-tabak-x3kQTL7yw30-unsplash
Colonnes, marges et gouttières

Point de rupture

Multiples résolutions d’écrans

Lorsque l’on conçoit un site responsive, il faut s’interroger sur les points de rupture, le moment ou le design ou des éléments du design vont devoir changer d’aspect, de taille ou de forme dans le but de s’adapter au périphérique.

Une conception intelligente de webdesign devrait prendre en compte quatre tailles d’écran :
– Les grands écrans (desktop)
– Les écrans d’ordi portable (laptop)
– Les tablettes tactiles (pas de mot anglais… si vous avez des idées)
– Les téléphones portables (smartphone)

Pour le mobile (tablette et téléphone) il faut concevoir format portrait.
Pourquoi ? Parce qu’une tablette paysage n’est qu’une vue un peu plus serrée d’un ordi portable.

Jadis il y avait des standards au niveau des résolutions d’écran. Aujourd’hui il y en a toujours, mais ils évoluent en fonction de la technologie…

Un exemple :
Pour les smartphones il était commun de travailler avec une width de 320 px. Cette width à laisser place a un 360 px de large et certains d’entre nous travaillent même sur du 375. Cela peut paraitre illusoire, mais ce gain de 40 pixels puis de 15 nouveaux pixels permet de plus jouer avec des compositions et structures sur du smartphone.

Exemple de points de rupture sur un site d’architecte
source

web
Exemple de sites
source
web
Exemple de sites
source

Multicolonnage

12, 16, 24

Lorsque l’on conçoit un webdesign on utilise donc des grilles de construction.
Cette grille est donc découpée en colonnes. Mais de combien de colonnes avons-nous besoin ?
12. Pourquoi 12 ? Parce que ce chiffre est un multiple de 1, 2, 3, 4, 6 et 12.
Cela signifie que l’on peut jouer avec les blocs de sorte a composer notre espace.

Les sites avec un fort contenu sont eux réalisés avec plus de colonnes, de sorte a gérer différemment la densité de l’information. Ceux-ci peuvent être conçus à l’aide de grilles de 16 ou 24 colonnes.

Pour les périphériques mobiles, le nombre de colonnes dépend de l’intention graphique.

Pour un smartphone on pourrait travailler sur une maquette avec 4 colonnes ou 2 colonnes, tout dépend de la présentation du design…
Même chose pour la tablette, on pourrait être sur du 12, du 8 ou du 6 colonnes…

Site avec et sans grille, exemple avec des sites en 12 et 16 colonnes
source

Étant qu’en responsive on parle de déformation gracieuse du design, ces grilles peuvent donc être totalement pensées en tant que grille flexible ou être pensées avec une notion d’unité fixe et d’unité relative (le pixel en tant qu’unité fixe et le % ou le vw pour l’unité relative).

web
Grille flexible
source
web
Grille flexible et grille par périphérique avec proposition de nombre de colonnes
source

Cut-off

Ligne de flottaison

web
Incitation au scroll grâce à l'image en bas à gauche
Opera de Lyon
web
Incitation au scroll grâce au bloc qui ne semble pas fini (pas de marge comme pour la partie haute)
RTL

Le cut-off en design : Laisser apparaitre un bout d’élément graphique, ou de texte afin de dire au visiteur qu’il y a du contenu sous cette ligne de flottaison. Ce qui nous donne la définition de la ligne de flottaison : C’est ce que voit l’utilisateur avant le scroll.

La ligne de flottaison est variable en fonction du périphérique et de la taille de l’ouverture de la page web.

web
Présentation du GP de Belgique (Spa)
le site n’existe plus
web
Présentation d'un circuit
le site n’existe plus
web
Pas d'incitation au scroll ici, la page pourrait être "entière".
Arte