Planificación de IU con Adobe XD ui-planning-adobe-xd
En la mayoría de los casos, la planificación de un nuevo sitio web comienza con maquetas y diseños estáticos. Adobe XD es la mejor herramienta de diseño de su clase para crear experiencias de usuario. El Adobe recomienda planificar la implementación de Sites mediante el uso de maquetas de interfaz de usuario con Adobe XD u otra herramienta.
Requisitos previos prerequisites
Este es un tutorial de varias partes y se da por hecho que se han completado los pasos descritos en el capítulo anterior. Este capítulo es simplemente una parte de ver y aprender; no se requiere ninguna acción para poder continuar con los capítulos siguientes.
Para continuar con los videos que necesitarás Adobe XD instalado, hay prueba gratis disponible.
Objetivo
- Revise el kit de interfaz de usuario proporcionado por la plantilla de sitio estándar y por el equipo de diseño de WKND.
- Descubra cómo se pueden utilizar los kits de IU para asignar y planificar una implementación de AEM Sites.
- Obtenga información sobre cómo entregar diseños de interfaz de usuario creados en Adobe XD a un desarrollador front-end para su implementación.
Qué va a generar what-you-will-build
En este capítulo se inspeccionan dos archivos Adobe XD, uno para la plantilla de sitio estándar y otro para el sitio WKND propuesto. El
Kit de IU de plantilla de sitio estándar standard-site-template-uikit
Pasos de alto nivel:
- XD Descargar el archivo de configuración de plantillas de sitio estándar.
- Inspect usa el kit de IU en Adobe XD.
- Simule la entrega de los diseños a un desarrollador front-end.
Kit de IU de WKND wknd-ui-kit
Pasos de alto nivel:
- XD Descargar el archivo de carpetas de artículos de WKND.
- Inspect muestra los diseños de la plantilla de artículo de WKND.
Enhorabuena. congratulations
Ha aprendido cómo se pueden utilizar los kits de interfaz de usuario de Adobe XD para asignar y planificar una implementación de AEM Sites.
Hay kits de interfaz de usuario adicionales disponibles para inspeccionar y descargar.
Siguientes pasos next-steps
En el capítulo siguiente se crea una nueva plantilla de página basada en el diseño de artículo de WKND.
Aprenda a crear y modificar Plantillas de página. Comprenda la relación entre una plantilla de página y una página. Aprenda a configurar las políticas de una plantilla de página para proporcionar un control granular y coherencia de marca para el contenido. Se crea una plantilla de artículo de revista bien estructurada basada en una maqueta de Adobe XD.