Planificación de la 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. 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 que consta 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 la visualización y el aprendizaje; no se requiere ninguna acción para poder continuar con los capítulos siguientes.
Para continuar con los videos necesitará tener instalado Adobe XD; hay una versión de prueba gratuita disponible.
Objetivo
- Revise el kit de la 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 enviar diseños de interfaz de usuario creados en Adobe XD a un desarrollador front-end para su implementación.
Lo 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 la plantilla de sitio estándar standard-site-template-uikit
Pasos de alto nivel:
- Descargue el archivo XD de plantilla de sitio estándar.
- Inspeccione el kit de IU para 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:
- Descargue el archivo XD de artículo WKND.
- Inspeccione los diseños de la plantilla de artículo de WKND.
Enhorabuena. congratulations
Enhorabuena. Ha aprendido cómo se pueden utilizar los kits de la 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.
Próximos pasos next-steps
En el capítulo siguiente se creará 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 directivas 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.