UI Planning with Adobe XD ui-planning-adobe-xd
In most cases, planning for a new website starts with mockups and static designs. Adobe XD is a best-in-class design tool for building user experiences. Adobe recommends planning your Sites implementation through the use UI mockups using Adobe XD or other tool.
Prerequisites prerequisites
This is a multi-part tutorial and it is assumed that the steps outlined in the previous chapter have been completed. This chapter is simply a watch & learn portion, no action is required to bea able to proceed with subsequent chapters.
To follow along with the videos you will need Adobe XD installed, a free trial is available.
Objective
- Review the UI Kit provided by the Standard Site Template and by the WKND design team.
- Understand how UI kits can be used to map and plan an AEM Sites implementation.
- Learn how to hand-off UI designs created in Adobe XD to a front-end developer for implementation.
What you will build what-you-will-build
In this chapter two Adobe XD files is inspected, one for the Standard Site Template and another for the proposed WKND site. The
Standard Site Template UI Kit standard-site-template-uikit
High level steps:
- Download the Standard Site Template XD File.
- Inspect the UI Kit in Adobe XD.
- Simulate handing off the designs to a front end developer.
WKND UI Kit wknd-ui-kit
High level steps:
- Download the WKND Article XD File.
- Inspect the designs for the WKND Article template.
Congratulations! congratulations
Congratulations, you have learned how Adobe XD UI Kits can be used to map and plan an AEM Sites implementation.
Additional UI Kits are available to inspect and download.
Next Steps next-steps
In the next chapter a new page template is created based on the WKND Article design.
Learn how to create and modify Page Templates. Understand the relationship between a Page Template and a Page. Learn how to configure policies of a Page Template to provide granular governance and brand consistency for content. A well-structured Magazine Article template is created based on a mockup from Adobe XD.