Les grids sont très utiles lors de la réalisation de votre maquette. En effet, ils vous permettront de structurer votre maquette à l’aide de repères (que je vous conseille de verrouiller pendant la création de celle-ci) et vont vous aider dans le placement de chaque élément et ainsi obtenir un rendu proche du rendu final avec les mêmes dimensions (n’oubliez surtout pas de travailler en 100 %, vous risquerez d’avoir des surprises lors de l’intégration). Les grids sont également d’une bonne aide pour les images, le fait de travailler en taille réelle vous permet de voir que certaine sont peut-être trop petite et qu’il faut plutôt privilégier de plus grandes images pour certains endroits de votre page.
Quelle largeur de Grids choisir ?
À vrai dire, tout dépend de vous, certains préfèrent travailler avec une largeur de 960 px, une largeur que je trouve petite malgré que le site de H&M est lui-même en 960 px. D’autres travailleront eux en 1440 px, à l’inverse, je trouve cette largeur trop grande, le site web couvrira tout l’écran sur un Macbook Air par exemple.
Personnellement, j’utilise une largeur de 1200 px, le juste-milieu. Ni trop large ni trop étroite, cette largeur vous laisse une assez grande liberté pour pouvoir concevoir vos maquettes.
Où trouvez des Grids ?
Eh bien, il vous suffit de taper sur notre cher ami Google (ne soyez pas trop violent avec lui non plus) ou sinon juste ici, évidemment ! Il vous suffira de télécharger directement le fichier .psd .
Pour le 960 px, c’est par ici !
Pour le 1200 px, c’est par là !
Et pour le 1440px, c’est à cet endroit !
