Dans Adobe XD CC, ajoutez une grille dans vos plans de travail afin de faciliter la mise en page de vos sites web.
setup-web-design-grid_1000x560

Ouvrez un fichier et sélectionnez le plan de travail, ou créez-en un à l'aide de l'outil Plan de travail. Dans l'inspecteur Propriétés, sous Grille, sélectionnez Disposition. Vous pouvez également utiliser le fichier d'exemple fourni en référence.

setup-web-design-grid_step-1

Jouez sur le nombre de colonnes, les couleurs, les largeurs de colonne et de gouttière, et les paramètres de marge pour créer la grille la mieux adaptée à votre design. Notez que vous pourrez modifier la grille à tout moment.

setup-web-design-grid_step-2

Pour notre projet, nous avons choisi une grille à 12 colonnes et ajouté du texte et des images. La fonction de magnétisme et les repères commentés ont facilité le positionnement de nos éléments de design. Une fois fixés sur le choix de notre grille, nous avons sélectionné le plan de travail dans le panneau Calques et cliqué sur Définir par défaut dans l'inspecteur Propriétés.

setup-web-design-grid_step-3

Nous pouvons désormais appliquer la grille personnalisée aux autres plans de travail de taille similaire. Ou alors, nous pouvons la personnaliser pour les autres formats d'écran.

setup-web-design-grid_step-4

Vous savez désormais comment définir des grilles pour créer des designs de site web impeccables.

11/07/2018

Contributeur Adobe Stock : luckybusiness

Cette page vous a-t-elle été utile ?