Dans le cours : L'essentiel d'Adobe XD

Concevoir à l'aide des guides et des grilles - Tutoriel Adobe XD

Dans le cours : L'essentiel d'Adobe XD

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Concevoir à l'aide des guides et des grilles

“

Les concepteurs web sont habitués à raisonner grille, c'est-à-dire à diviser l'écran en colonnes avec une largeur et des intervalles définis. Dans le menu Affichage, vous allez demander à afficher la grille de mise en page et vous allez voir apparaître ces fameuses colonnes. En sélectionnant le plan de travail et en descendant jusqu'à la partie grille, vous allez pouvoir intervenir sur les éléments qui composent cette grille, notamment la couleur des colonnes que vous allez pouvoir modifier, le nombre de colonnes, la largeur de la gouttière, la largeur des colonnes et les marges qui les encadrent. Actuellement, nous nous trouvons avec une marge gauche et une marge droite qui sont identiques, mais vous pourriez, en cliquant sur cette icône, déterminer des marges asymétriques et même ajouter des marges supérieures et inférieures. Vous pouvez également considérer que ces paramètres vont devenir des paramètres par défaut en cliquant sur Définir par défaut. Lorsque, ensuite, on cliquera sur Paramètres par défaut, ce sont les paramètres qui ont été enregistrés qui vont se réappliquer. Vous pouvez préférer un affichage par quadrillage. Dans le menu Affichage, nous allons masquer la grille de mise en page et nous allons afficher le quadrillage. De la même façon, dans la partie grille, nous avons un affichage qui est un affichage de carrés. Nous pouvons jouer sur la couleur de ces carrés et également sur leur taille et, de la même façon, considérer que cela peut devenir ou non un réglage par défaut. Bien entendu, ces systèmes sont très utiles pour les développeurs web, mais vous pouvez également travailler avec un système de repères. Lorsque votre curseur approche des bords de votre plan de travail, en cliquant et en tirant, vous allez pouvoir placer des repères. Ces repères sont gérables via le menu Affichage et Repères. Vous allez pouvoir, à tout moment, les masquer ou les verrouiller. Si les repères sont verrouillés, on ne pourra plus les modifier. Nous allons donc re-déverrouiller ces repères et, sur le plan de travail, vous pouvez également, à tout moment, dans le menu Affichage et Repères, demander à les effacer. Les repères peuvent être copiés et collés d'un plan de travail à un autre. Bien entendu, nous allons placer des éléments sur notre plan de travail. Lorsque vous placez des objets ou des formes sur votre plan de travail, vous voulez probablement que ceux-ci soient calés sur la grille de pixels. Il faut donc, dans ce cas, aller dans le menu Objet et demander à aligner sur la grille des pixels. De cette façon, vous allez ensuite éviter des décalages lors des exports car les éléments vont de toute façon être réalignés sur la grille de pixels lors de ces exports, alors autant les caler automatiquement lors de leur placement. Non seulement les repères sont magnétiques, mais ils sont également commentés, et ils vont donc vous renseigner sur les dimensions et les positions des éléments que vous manipulez. Je vais créer un deuxième élément et, lorsque je le déplace, vous voyez que des repères vont pouvoir me permettre de comprendre comment cet élément est positionné par rapport aux précédents. Je vais pouvoir, ainsi, caler précisément mes éléments. Lorsque je crée un troisième élément, en le positionnant, je vais automatiquement être guidé pour avoir par exemple des intervalles qui soient identiques. Avec tous ces repères, vous êtes donc sûr de ne pas vous perdre.

Table des matières