Déterminer comment les éléments seront placés sur le site Web est l’une des parties les plus importantes lors de la conception,
et l'un des plus durs.
La mise en page d’un site Web joue un rôle énorme dans la définition de son ambiance générale.
Tout comme le choix des polices,
il est important de penser à ce que ressentiront les utilisateurs et à ce dont le projet a besoin lors du choix d'une mise en page.
Une mise en page en grille plus structurée peut donner à un site Web un aspect professionnel et organisé,
parfait pour les sites de commerce électronique ou d'actualités avec beaucoup d'informations.
Mais une disposition en grille déconstruite peut apporter une ambiance plus créative et artistique, idéale pour mettre en valeur le caractère unique des produits ou des services.
La mise en page que vous décidez de créer doit vraiment correspondre à l’image de la marque.
Par exemple,
si nous revenons aux deux exemples que nous avions plus tôt ici pour le site Web Edifice et le
Site Manana, nous avons deux grilles complètement différentes.
Montrons la grille ici.
Je vais juste appuyer sur Shift G.
Si nous regardons la grille de l'Edifice pour commencer,
nous avons une conception très structurée.
Tout est parfaitement aligné sur la grille.
Je vais le cacher ici.
Cela semble très fort, très structuré,
et un aspect très industriel car tout est parfaitement droit.
Vous obtenez ce sentiment qui complète vraiment l'image de marque de
Édifice.
Bien,
si nous regardons le site Web de Manana ici,
oui, les éléments sont toujours alignés sur la grille autant que possible,
où nous avons des éléments qui peuvent être alignés sur la grille.
Mais nous avons aussi ces moments ici où nous avons juste du texte qui flotte,
des éléments qui brisent complètement la grille,
beaucoup de courbes,
et nous avons quelque chose de complètement différent en termes de mise en page.
Et c'est parce que nous essayons vraiment toujours de
adapter la mise en page à la marque.
Ici, nous avons une version plus amusante et colorée,
marque de mouvement.
Et là, nous avons quelque chose de très structuré.
C'est un bâtiment.
C'est une entreprise de construction de bâtiments industriels.
Il faut donc qu'il soit parfaitement bien fait.
Et l'agencement ne consiste pas seulement à allier tout ce qui se trouve sur la grille.
Il s’agit aussi de cet espacement entre les éléments.
J'aime ajouter beaucoup d'espace vide à ma conception afin que tout ne semble pas trop à l'étroit.
Nous avons ici deux exemples différents.
Nous avons le
Site Web malais.
Ceci est pour un portfolio.
Donc dans ce cas,
Je voulais vraiment quelque chose pour donner un look minimaliste et vraiment laisser briller les projets eux-mêmes.
J'ai donc décidé d'opter pour une grille déconstruite avec beaucoup d'espace vide,
pas trop chargé visuellement.
Ainsi, nous pouvons vraiment nous concentrer sur chaque projet à la fois.
Et j'ai l'impression qu'il flotte un peu.
Alors qu'un autre site Web ici pour le site Web cool Good is New,
dans ce cas particulier,
c'est un blog avec beaucoup d'articles.
Le but est différent.
Ici, je voulais un peu moins d'espace vide.
Tout est un peu plus proche,
un peu plus aligné.
Il me reste encore quelques espaces vides
autour de certains de ces articles.
Ceci est la page de liste des articles.
Je veux toujours avoir de l'espace libre et ne pas simplement encombrer quatre colonnes partout.
Cela paraîtrait un peu trop chargé, je pense.
Mais la conception est dans ce cas,
bien plus adapté à ce projet particulier où nous avons beaucoup d'articles.
Le but est différent.
Au lieu de simplement découvrir une partie du travail de ce réalisateur,
nous examinons vraiment différents articles.
Nous voulons donc pouvoir les retrouver rapidement.
Nous ne voulons donc pas trop de défilement.
Et en parlant de parchemin,
N'ayez pas peur du parchemin.
Souvent, ce que je vois chez les designers qui débutent, c'est qu'ils essaient de mettre trop de choses au même endroit.
Alors n'ayez pas peur de laisser défiler beaucoup de choses entre vos éléments.
Ce n’est pas grave si l’utilisateur doit faire défiler la page pendant longtemps.
Les utilisateurs sont habitués à faire défiler les pages en ligne.
Alors n'hésitez pas à laisser beaucoup d'espace vide.
Cela rendra le design moins lourd visuellement et rendra le contenu plus facile à digérer.
Un excellent outil pour créer une mise en page bien équilibrée est d'avoir une belle grille sur laquelle aligner le contenu,
en s'assurant que les éléments sont comme sur les photos,
le texte et les graphiques bien alignés rendront non seulement le site Web plus beau,
mais cela le rendra également plus organisé et améliorera l'expérience utilisateur en facilitant la navigation et la compréhension des informations présentées sur chaque page.
Revenons à l’exemple de C2 Montréal ici et regardons comment nous utilisons la grille pour aligner tout sur la conception.
Voici donc le fichier de travail,
le fichier Figma pour le site web C2 Montréal.
Et si je montre à nouveau la grille ici,
c'est Shift G.
Alors, en regardant ça,
on voit que tout est parfaitement aligné sur la grille.
Nous avons une grille de 12 colonnes.
Personnellement, je pense qu'une grille de 12 colonnes est la voie à suivre pour mes grilles pour les sites Web que je crée habituellement.
La raison pour laquelle j'aime une grille à 12 colonnes est que vous pouvez diviser 12 par 2,
3, 4, 6, 12.
C'est donc très utile si vous souhaitez créer quelque chose avec trois colonnes, quatre colonnes,
deux colonnes.
12 est un nombre idéal pour cela.
Donc, généralement, les sites Web que je fais,
J'aurai une grille de 12 colonnes avec quelques gouttières,
une certaine marge.
C'est l'une des grilles que je crée.
Dans ce cas,
comme vous pouvez le voir,
J'ai une grille horizontale et une grille verticale.
Je n'ai pas toujours la grille horizontale.
La grille horizontale peut être utile pour aligner les éléments et avoir le bon espacement verticalement également.
Mais j'ai toujours la grille verticale pour tous les projets que je fais.
Et ici, comme nous pouvons le voir,
J'ai des colonnes et nous pouvons voir la séparation entre les colonnes.
C'est utile dans un projet comme C2 Montréal,
où nous avons beaucoup de blocs.
Et je veux pouvoir aligner ces blocs,
pas avec les colonnes elles-mêmes,
mais au centre de la colonne.
Nous verrons dans quelques secondes comment créer une grille comme celle-ci.
Et ouais,
si nous parcourons simplement la conception,
nous pouvons voir que presque tout sur la conception est parfaitement aligné sur la grille.
Tout le texte que nous voyons,
toutes les colonnes, toutes les images sont alignées sur notre grille.
Et cela donne lieu à une conception très structurée.
Et cela permet également aux développeurs de prendre plus facilement votre conception, de la développer et de la rendre réactive.
Ce n’est donc pas seulement une question visuelle.
Il s’agit également de rendre le site Web plus facile à développer et à rendre réactif.
Et si nous revenons ici,
comme vous pouvez le voir,
tout est parfaitement aligné sur la grille.
Et c'est le cas pour toutes les pages du site.
Et il est également important d’aligner les
éléments avec l'intérieur de la colonne et non l'extérieur.
Parfois je vois des gens qui s'alignent,
disons cette colonne de texte ici,
comprendre qu'il est aligné sur la grille,
il est aligné sur cette colonne,
donc ça devrait aller.
Mais en fait, vous êtes aligné ici sur le caniveau,
vous n'êtes pas aligné à l'intérieur des colonnes.
Ce n’est donc pas vraiment ainsi que fonctionne une grille.
Et cela ne sera pas non plus utile pour les développeurs.
Et ici,
presque tout est parfaitement aligné.
Mais
ce n'est pas grave si tout dans votre conception n'est pas aligné sur la grille.
Si par exemple,
Je pense qu'ici dans le pied de page,
nous avons ce compte à rebours ici,
les nombres que nous avons ne sont alignés sur aucune grille.
Et c'est bien,
la grille est utile pour aligner la plupart des éléments de la page.
Mais parfois, pour une raison quelconque,
vous préférez ne pas aligner un élément,
Parfois, vous voulez simplement briser la grille pour la rendre un peu plus dynamique.
Il est donc normal de placer les éléments qui ne sont pas parfaitement sur la grille, ne le faites pas.
force-le.
Parfois, il est préférable de le placer hors de la grille pour que cela ait une belle apparence.
C'est vraiment super facile de créer une grille dans Figma.
Voyons comment créer une grille de 12 colonnes.
J'ai ici une planche vide.
Je vais donc ici sur la grille de mise en page de droite,
J'ai un petit signe plus.
Donc, vous voulez appuyer sur le plus ici pour créer automatiquement une grille carrée comme celle-ci,
Je préfère avoir des colonnes.
Maintenant, j'ai une grille de cinq
colonnes.
C'est vraiment aussi simple que ça,
Je peux changer le nombre de colonnes dans mon cas,
comme je le mentionnais, j'avais une grille de 12 colonnes.
Et j'aime aussi avoir des marges pour que mon dessin n'aille pas jusqu'au bord de la page.
J'aurai donc 20 points de marge.
Et généralement, j'essaie d'avoir exactement la même marge que mon cutter.
La raison pour laquelle il en est ainsi,
est-ce que disons que je veux avoir un design où j'ai trois colonnes,
comme ça, je vais le faire rapidement ici,
où j'ai trois images,
peut-être de cette façon,
Je peux vraiment encore être aligné sur ma grille,
et j'ai juste fait en sorte que les images s'étendent jusqu'au bord.
Mais si j'avais une très grande marge,
par exemple, si je mets ceci à 100,
maintenant, je ne pouvais pas vraiment ajuster ces éléments comme ça.
Parce que si j'ai du texte,
J'aurais probablement le texte ici.
Cela détruirait donc complètement notre réseau.
Mais avec le même
des marges comme celles-ci, je peux toujours aligner le titre de chaque colonne sur ma grille,
ça fonctionnera toujours.
Voilà une grille assez simple,
c'est généralement celui que je prends,
Honnêtement, ça n'a pas besoin d'être plus compliqué que ça.
Mais si vous voulez un peu comme la grille C2 Montréal que nous regardions plus tôt,
si vous souhaitez également avoir peut-être le centre de la colonne visible,
c'est quelque chose que tu peux ajouter,
vous pouvez simplement créer une autre grille,
Je vais cliquer sur le signe plus ici,
ajouter à nouveau quelques colonnes.
Mais dans ce cas,
je vais partir avec la richesse sans caniveau,
Je veux avoir des marges.
J'ai presque oublié une autre chose que vous voudriez peut-être voir pour votre grille, c'est un peu comme la grille C2 Montréal que nous avions plus tôt,
où nous avions un menu qui était à droite.
Nous avons donc un menu collant qui reste à droite tout au long de la page.
Nous ne voulons pas que ce menu fasse partie de la grille,
nous voulons que la grille soit le reste de la page ce que nous avons à gauche de ce menu ici.
Donc la façon de faire cela est assez simple,
Je vais juste ajouter ces deux autres grilles ici.
Et si nous revenons à notre grille ici,
au lieu d'avoir l'option d'étirement,
Je vais les aligner à gauche.
Donc maintenant mes 12 colonnes sont alignées à gauche ici.
Et je peux régler manuellement la largeur de ces colonnes.
C'est un peu
trop.
Je pense que 100 ça a l'air bien comme ça,
peut-être un peu moins.
Allons-y avec 99.
Maintenant, j'ai ma grille à gauche de mon menu,
mon menu un peu plus petit pour avoir la même marge,
pour que tout ce que j'ai aligné dans ma conception dans ma page ne prenne pas en compte le menu,
ça va être pour le reste de la page pour ma grille.
Finalement,
une bonne disposition apporte ordre, harmonie et équilibre.
Qu'un site Web utilise une grille structurée ou déconstruite,
beaucoup d'espace vide ou un agencement chargé,
la clé est de choisir un agencement qui s'aligne sur la personnalité et les valeurs de la marque afin de laisser une impression forte et mémorable à ses visiteurs.
Dans la prochaine leçon,
nous parlerons de l'essence de la narration et du design et de la manière de créer un concept cohérent qui relie l'ensemble de votre site.