Planifier 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 le meilleur outil de conception de sa catégorie qui permet de créer des expériences utilisateur. Adobe recommande de planifier la mise en œuvre 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 vous avez suivi les étapes décrites dans le chapitre précédent. Dans ce chapitre, vous n’avez qu’à regarder et apprendre, aucune action n’est requise pour pouvoir passer aux chapitres suivants.

Pour suivre les vidéos, vous avez besoin qu’Adobe XD soit installé. Une version d’essai gratuite est disponible.

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 œuvre AEM Sites.
3. Découvrez comment transmettre les conceptions d’interface utilisateur créées dans Adobe XD à un développeur ou une développeuse front-end en vue d’une mise en œuvre.

Ce que vous allez créer

Dans ce chapitre, deux fichiers Adobe XD sont étudiés : un pour le modèle de site standard et un autre pour le site WKND proposé. Le

kit d’interface utilisateur du modèle de site standard

Étapes de haut niveau :

1. Téléchargez le fichier XD du modèle de site standard.
2. Examinez le kit d’interface utilisateur dans Adobe XD.
3. Simulez la remise des conceptions à un développeur ou une développeuse front-end.

Kit d’interface utilisateur WKND

Étapes de haut niveau :

1. Téléchargez le fichier XD d’article WKND.
2. Examinez 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 œuvre AEM Sites.

D’autres kits d’interface utilisateur sont disponibles à l’inspection et au téléchargement.

É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 des modèles de page. Comprenez 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 la gouvernance granulaire et la cohérence de marque du contenu. Un modèle d’article de magazine bien structuré est créé à partir d’une maquette d’Adobe XD.