Pianificazione dell’interfaccia utente con Adobe XD ui-planning-adobe-xd
Nella maggior parte dei casi, la pianificazione di un nuovo sito web inizia con modelli e progetti statici. Adobe XD è uno strumento di progettazione all'avanguardia per la creazione di esperienze utente. L’Adobe consiglia di pianificare l’implementazione di Sites tramite i modelli dell’interfaccia utente di utilizzo tramite Adobe XD o altro strumento.
Prerequisiti prerequisites
Questo è un tutorial in più parti e si presume che i passaggi descritti nel capitolo precedente siano stati completati. Questo capitolo è semplicemente una sezione di osservazione e apprendimento, non è necessaria alcuna azione per poter procedere con i capitoli successivi.
Per seguire insieme ai video sarà necessario installare Adobe XD, è disponibile una versione di prova gratuita.
Obiettivo
- Rivedi il kit di interfaccia utente fornito dal modello di sito standard e dal team di progettazione WKND.
- Scopri come utilizzare i kit di interfaccia utente per mappare e pianificare un’implementazione di AEM Sites.
- Scopri come distribuire le progettazioni dell’interfaccia utente create in Adobe XD a uno sviluppatore front-end per l’implementazione.
Cosa verrà creato what-you-will-build
In questo capitolo vengono esaminati due file Adobe XD, uno per il modello di sito standard e un altro per il sito WKND proposto. Le azioni
Kit interfaccia utente modello sito standard standard-site-template-uikit
Passaggi di alto livello:
- Scarica il file XD del modello di sito standard.
- Inspect il kit di interfaccia utente in Adobe XD.
- Simula la consegna delle progettazioni a uno sviluppatore front-end.
Kit interfaccia WKND wknd-ui-kit
Passaggi di alto livello:
- Scarica il file XD dell'articolo WKND.
- Inspect progetta il modello di articolo WKND.
Congratulazioni. congratulations
Congratulazioni, hai imparato come utilizzare i kit di interfaccia utente di Adobe XD per mappare e pianificare un’implementazione di AEM Sites.
Sono disponibili ulteriori kit dell'interfaccia utente per l'ispezione e il download.
Passaggi successivi next-steps
Nel capitolo successivo viene creato un nuovo modello di pagina basato sulla progettazione dell’articolo WKND.
Scopri come creare e modificare Modelli di pagina. Comprendere la relazione tra un modello di pagina e una pagina. Scopri come configurare i criteri di un modello di pagina per fornire governance granulare e coerenza del brand per i contenuti. Viene creato un modello di articolo ben strutturato per la rivista, basato su un modello fornito da Adobe XD.