Vignettes dans la grille de projets

Cette page a pour objectif de vous permettre d’utiliser au mieux vos talents de web designer en comprenant correctement comment s’affichent les différentes vignettes de la grille de projets. Etant donné que cette grille est fluide, voici comment être certain que votre élément principal apparaisse à tous les coups dans les différents formats de la grille.

La taille idéale est de 682x682px @1x. La zone blanche (zone constamment visible) est de 422x422px @1x. Prévoyez avant tout les @2x.

Templates à télécharger

• Photoshop (3,6Mo)
• Sketch (0ko)
• Illustrator (0ko)

Visuels dans une page projet

La page projet est là pour mettre en avant votre projet. Usez et abusez des styles de celle-ci afin de jouer au maximum avec les outils qui vous sont mis à disposition.

La vignette dans la sidebar est la vignette qui se retrouve sur la grille. Autrement dit, c’est le visuel qui va représenter tout votre projet au sein de la grille. Sachez mettre an valeur celle-ci. Pour information, celle-ci fait maximum 290x290px. Soit un ratio de 1:1.

Les styles de texte sont assez limités afin de vous focaliser un maximum sur le contenu. Celui-ci est en Source Sans Code Pro Regular 16px/1.9. Rappelez-vous qu’un bon contenu avec plusieurs mots clés est indispensable pour un référencement optimal.

Au niveau des dimensions, la largeur de la colonne de texte est de maximum 615px @1x de large mais les images peuvent dépasser cette grille, pouvant aller jusqu’à 849px @1x de large maximum (la hauteur n’a pas d’importance).

Charte graphique

Polices utilisées

Les polices utilisées sur le site sont l’Oswald pour les titres de niveau 1 et la Source Code Pro pour le reste du site.

Couleurs

Les couleurs employées sont du noir et différents niveaux de gris pour l’entièreté du contenu. La seule couleur employée est le jaune (#ffdc00) qui fait office de couleur d’action.

Logo

Le logo est téléchargeable ici.