CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre Adobe XD - Les fondamentaux

Comment utiliser les grilles dans Adobe XD pour concevoir des interfaces utilisateur

Retour à la formation
Chapitre 1 Leçon 3
Précédent
Suivant

Apprenez à mettre en place des grilles dans Adobe XD pour créer des expériences utilisateurs cohérentes.

Détails de la leçon

Description de la leçon

Avant de vous lancer dans le design de tout type d'interfaces utilisateurs, il est indispensable d'implémenter un système de grilles. Adobe XD, en tant que logiciel de prototypage interactif, dispose de deux fonctionnalités essentielles pour cela : les grilles de disposition et les grilles carrées.

Pour commencer, sélectionnez un plan de travail. Dans les propriétés à droite, activez la grille disposition. Par défaut, Adobe XD configure une grille de 12 colonnes adaptée aux sites internet. Vous pouvez ajuster la couleur, le nombre de colonnes, la largeur des gouttières et des colonnes. Il est aussi possible de régler les marges extérieures.

Le deuxième type de grille est la grille carrée, avec des carrés de 8 pixels de côté, une valeur recommandée par Google. Ces grilles facilitent l'alignement des objets. Utiliser les deux grilles simultanément aide à structurer vos interfaces de façon homogène.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :
1. Comprendre l'importance des grilles dans le design.
2. Apprendre à configurer et utiliser les deux types de grilles dans Adobe XD.
3. Concevoir des interfaces cohérentes et structurées.

Prérequis pour cette leçon

Les prérequis pour cette vidéo incluent :
1. Connaissance basique d'Adobe XD.
2. Compréhension des principes de design UX/UI.

Métiers concernés

Les métiers suivants bénéficient de cette vidéo :
1. Designer UX/UI
2. Développeur Front-end
3. Chef de projet numérique

Alternatives et ressources

Des alternatives incluent :
1. Figma, qui offre des fonctionnalités similaires de grille.
2. Sketch, un autre outil puissant pour le design d'interfaces.

Questions & Réponses

Les grilles aident à maintenir la cohérence et l'alignement dans les interfaces, facilitant ainsi la navigation et l'expérience utilisateur.
Adobe XD utilise par défaut 12 colonnes car c'est le standard le plus souvent utilisé pour les sites visibles sur des écrans.
Adobe XD propose des grilles de disposition pour les mises en page et des grilles carrées pour un alignement précis basé sur des multiples de 8 pixels.