• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 07/06/2019

La grille fluide

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Quand on débute dans la création graphique et que l'on découvre l'incroyable potentiel des logiciels, couplé a notre propre énergie créative, nous nous laissons aller à de grandes expérimentations plus ou moins réussies... Et c'est tout à fait normal ! ;)

Mais dès lors qu'il s'agit de rendre un projet avec un rendu de qualité professionnelle, il faut vous contraindre à utiliser une grille de composition dans vos maquettes de projet. Et pour concevoir les  maquettes de notre site responsive, nous allons justement utiliser une de ces fameuses grilles...

Qu'est-ce qu'une grille et pourquoi utiliser des grilles ?

La grille de composition

Il vous est peut-être déjà arrivé de faire de la mise en page, ne serait-ce que pour faire un super flyer pour une soirée, ou même rendre un beau dossier de présentation de projet.

Mes étudiants en réalisent par exemple très souvent, pour tous les dossiers de leur projet de fin d'année.

Des beaux dossiers de projets étudiants
Des beaux dossiers de projets étudiants... Qui donnent envie d'être lus !

Pour organiser les éléments dans leur mise en page et rendre des dossiers de qualité, mes étudiants utilisent des grilles de composition dans leur mise en page.

Très utilisée dans tout le domaine du design, une grille permet de structurer le contenu de votre mise en page. Grâce à des repères horizontaux et verticaux, vous aurez une armature sur laquelle vous pourrez organiser vos textes et images de manière homogène et rationnelle.

C'est un peu comme porter un casque de super héros qui tient correctement sur votre tête, sans qu'il ne se casse la figure parce qu'il est mal positionné. Il est en parfait équilibre et vous donne un style d'enfer ! :D

Toutes compositions nécessitent une grille
Toute composition nécessite une grille (les lignes violettes que vous voyez sur l'image) -  Electric teacher est mon 2ème nom ;)

Croyez-moi, une mise en page s'appuyant correctement sur une grille se distinguera au premier coup d'oeil. 3 mots viendront spontanément à l'esprit :

  • Structure

  • Équilibre

  • Harmonie

Dans l'organisation des éléments au sein de la page, vous verrez que le texte et les images laisseront circuler le regard avec fluidité et que les blancs ne seront pas considérés comme des vides mais comme des espaces des respirations.

Il existe plusieurs grands standards de grille : 8, 12, 16  et 24 colonnes. Mais vous pouvez bien sûr créer vos propres grilles !

Les lignes verticales et horizontales qui servent de repères dans les compositions forment la grille. Cette grille est composée de colonnes et de gouttières.  

Colonnes et les gouttières forment la grille
Les colonnes et les gouttières forment la grille

Dans la création web, l'utilisation des grilles est usuelle pendant la phase de création d'une maquette. Alors pour vos créations aussi, n'hésitez plus ! Vous verrez que vos sites auront une autre stature avec cette structure.

La grille fluide

Dans le cas du responsive design, nous utiliserons une grille un peu particulière.

En effet, si vous voulez créer un contenu qui soit responsive, celui-ci va toujours se caler sur une grille, mais sur une grille dite flexible (on peut également employer le terme de grille fluide, vous croiserez souvent les deux).

Notre grille flexible/fluide reprendra les mêmes attributs de base que la grille fixe (elle sera également composée de colonnes et de gouttières, sur lesquelles vous organiserez vos différents éléments), mais sa gestion au niveau technique va différer...

... Je parlais tout à l'heure de casque de super héros. Et bien, imaginez que mon costume me permette d'affronter toutes les intempéries inimaginables, mais qu'il puisse également me donner le pouvoir de devenir aussi petit qu'une fourmi, pour visiter la micro faune des forêts, ou aussi grand qu'un iguane géant radioactif, pour m'appuyer sur l'immeuble où vous travaillez. Tout cela, sans craquer mon beau costume, car il sera toujours à la bonne taille. Je connais un colosse vert souvent en colère qui rêverait d'avoir de tels vêtements élastiques ! :D

Là où je veux en venir, c'est que notre grille fluide agira comme une super combinaison qui injectera  du responsive à votre site. C'est comme avoir un super pouvoir !

Concrètement, cette grille fluide pourra par exemple se transformer et passer de 12 colonnes à 6 et vice versa, et cela réorganisera tous vos éléments : c'est ce qui donnera ce super pouvoir à votre site. Cette "combinaison élastique" permettra à tous vos éléments de se recomposer correctement et de s'afficher avec un confort total, que cela soit sur un écran mobile, ou un écran d'ordinateur. 

Pour voir cette grille en action, il faudra attendre l'intégration dans le code. Photoshop permet uniquement de créer des aperçus avec des grilles fixes sur des maquettes fixes. Mais caler vos éléments sur une grille fixe dans chaque maquette vous aidera beaucoup pour appréhender le passage à une unique grille flexible.

Utiliser les grilles sous Photoshop

Revenons enfin à mon exemple de site photo, cela fait un moment que nous l'avons laissé de côté. Il s'agit maintenant de réaliser la maquette "aperçu mobile" de ce futur site... Et pour cela, nous allons avoir besoin de cette fameuse grille !

Sur Photoshop, pour créer une grille de composition, il suffit de suivre ces étapes très simples :

  • Je vais d'abord créer un nouveau document, correspondant à ma future maquette encore vierge ("Fichier " > "Nouveau").

  • Je vais alors remplir les caractéristiques de ce nouveau document, et tout d'abord, lui donner un nom : comme c'est ma première page, je vais tout simplement l'appeler "Home-page". Pour une maquette mobile, je vous propose ensuite les dimensions suivantes : 
    Largeur : 1080 pixels 
    Hauteur : 1920 pixels 
    Résolution : 72 pixels/pouces

Le panneau
Le panneau "nouveau"
Le document qui servira à mettre en forme la home page est créé
Ma future maquette encore vide !
  • Une fois le document créé, je vais pouvoir ajouter la grille de composition. Pour cela, allez chercher dans la barre de menu du haut : "Affichage" > "Nouvelles dispositions de repères".

  • Dans la fenêtre d'options qui s'ouvre, remplissez la partie "colonnes". Je vais choisir de me caler sur une grille de 12 colonnes dans les paramètres pré-définis de Photoshop.

Photoshop permet de choisir plusieurs types de grilles par défaut
Photoshop permet de choisir plusieurs types de grilles par défaut
et voilà notre grille !
Et voilà notre grille !

J'ai choisi cette configuration afin de me caler sur la future grille fluide d'un gabarit Bootstrap. De cette façon, je serai sûr que mes éléments se positionneront correctement sur cette structure lors de l'intégration sur Bootstrap.

Si je le souhaite, je peux également poser des repères horizontaux : vous aurez deviné qu'il suffit de cocher la case "Rangées" et de renseigner la valeur souhaitée dans "Numéro".

Et maintenant que notre grille est bien positionnée, il ne nous reste "plus qu'à" remplir notre maquette. :)

Rendez-vous au prochain chapitre...

Pour aller un peu plus loin

Si vous voulez en savoir un peu plus sur les grilles, je vous recommande également cet ouvrage qui couvre tous les fondamentaux : "Grilles" de Gavin Ambrose et Paul Harris, aux éditions Pyramyd.

Un livre de référence sur les grilles de composition
Un livre de référence sur les grilles de composition

Vous recherchez de l'inspiration pour les maquettes de vos sites ? Vous trouverez de nombreux exemples de sites utilisant plusieurs styles de grilles de composition sur le site 960.gs. Ce site vous délivrera également des gabarits de grilles utilisables sur de nombreux logiciels comme Photoshop, Gimp ou Balsamiq.

le site 960.gs
le site 960.gs

Exemple de certificat de réussite
Exemple de certificat de réussite