Planification de l’interface utilisateur avec Adobe XD

Dans la plupart des cas, la planification d’un nouveau site web commence par des maquettes et des conceptions statiques. Adobe XD est un outil de conception haut de gamme qui permet de créer des expériences utilisateur. Adobe recommande de planifier la mise en oeuvre de Sites par le biais de maquettes d’interface utilisateur à l’aide d’Adobe XD ou d’un autre outil.

Prérequis

Il s’agit d’un tutoriel en plusieurs parties qui suppose que les étapes décrites dans le chapitre précédent sont terminées. Ce chapitre est simplement une partie "regarder et apprendre", aucune action n’est nécessaire pour pouvoir passer aux chapitres suivants.

Pour suivre les vidéos, vous aurez besoin de Adobe XD installé, un version d’essai gratuite.

Objectif

  1. Examinez le kit d’interface utilisateur fourni par le Modèle de site standard et par l’équipe de conception de WKND.
  2. Découvrez comment les kits d’interface utilisateur peuvent être utilisés pour mapper et planifier une mise en oeuvre AEM Sites.
  3. Découvrez comment transmettre les conceptions de l’interface utilisateur créées dans Adobe XD à un développeur front-end en vue de la mise en oeuvre.

Ce que vous allez créer

Dans ce chapitre, deux fichiers Adobe XD sont inspectés, l’un pour la variable Modèle de site standard et une autre pour le site WKND proposé. Les

Kit d’interface utilisateur de modèle de site standard

Étapes de haut niveau :

  1. Téléchargez la Fichier de modèle de site standard.
  2. Inspect du kit d’interface utilisateur dans Adobe XD.
  3. Simuler la remise des conceptions à un développeur front-end.

Kit d’interface utilisateur WKND

Étapes de haut niveau :

  1. Téléchargez la Fichier XD article WKND.
  2. Inspect les conceptions du modèle d’article WKND.

Félicitations !

Félicitations, vous avez appris comment les kits d’interface utilisateur d’Adobe XD peuvent être utilisés pour mapper et planifier une mise en oeuvre AEM Sites.

Additional Kits d’IU disponibles pour inspecter et télécharger .

Étapes suivantes

Dans le chapitre suivant, un nouveau modèle de page est créé à partir de la conception de l’article WKND.

Découvrez comment créer et modifier Modèles de page. Comprendre la relation entre un modèle de page et une page. Découvrez comment configurer les stratégies d’un modèle de page afin de garantir une gouvernance granulaire et une cohérence de la marque pour le contenu. Un modèle d’article de magazine bien structuré est créé à partir d’une maquette provenant d’Adobe XD.

Sur cette page