C'est quoi ?

Mettre en place un wireframe/design passe par une grille de mise en page. Elle est composée de plusieurs colonnes qui serviront de guides pour placer les éléments de manière à avoir une interface organisée et alignée.

Composition

Une grille se compose d'un nombre de colonnes espacées par des gouttières, et de marges sur les côtés de taille variable. Le nombre de colonnes dépend de la taille de l'écran :

• Desktop : 12 colonnes
• Mobile : 6 ou 4 colonnes

Créer une grille

Ajoutons une frame iphone 13 & 14, et selectionnons là. C'est dans le panneau des propriétés, tout en bas, que se trouve l'option permettant d'ajouter une grille: la section layout guide.

En cliquant sur l'icône  + , cela ajouter une grille avec un maillage rouge. On peut voir maintenant une nouvelle ligne dans la section layout guide mentionnant Grid 10px.

Le format colonnes

Pour le moment nous avons une grille de type Grid, nous voulons un type Columns. Pour modifier cela, on peut sélectionner l'icône en forme de maillage à gauche de Grid 10px. Cela va ouvrir un menu contextuel contenant des propriétés.

Dans ce menu, dans le coin supérieur gauche, se trouve un menu déroulant avec pour valeur Grid. Si on l'ouvre on pourra selectionner le type Columns.

Nombre de colonnes

Nous allons modifier le nombre de colonnes via la propriété count et en mettre 6.

Marges

Pour définir des marges sur les côtés de nos colonnes on modifie la propriété margin. La valeur dépendra du type de design que vous désirez réaliser. Dans notre cas, nous allons mettre 24 pixels.

Gouttières

Les gouttières gère l'espacement entre chaque les colonnes via la propritété gutter. En général ceci est lié à la taille de typographie. Pour le moment, nous allons indiquer 16 pixels.

Ces espacements permettent d'aérer notre contenu.

Les colonnes servent de guide pour placer vos élements dans votre design. Quand un élément à une largeur non organique, il doit être aligné sur un certain nombres de colonnes.

Nous avons plusieurs rectangles, avec une taille toujours relative aux colonnes. On remarque que nos rectangles ne débordent pas de nos colonnes rouges. Maximiser l'usage de no colonnes optimisera l'alignement et la cohérence de notre design.

Grille mobile

Sur base du travail de la semaine dernière, alignez votre design sur une grille mobile.

Consignes

• Dupliquer votre design mobile (copier puis coller la frame existante)
• Ajouter une grille de 6 colonnes, 24px de marges et 16px de gouttières.
• Aligner vos éléments sur vos colonnes.

Grille desktop

Reproduire le design desktop suivant en utilisant une grille.

Consignes

• Dans une nouvelle frame desktop > desktop 1440x1024
• Reproduire le design le plus fidèlement possible
• Utiliser une grille de 12 colonnes, 96px de marges et 32px de gouttières.
• La typographie utilisée est la Poppins
• Le menu doit être strictement identique (design - contenu - alignement )
• Le reste du contenu textuel peut être différent, mais doit garder la même densité.
• Utiliser une image venant d'unsplash