UI Planning with ÃÛ¶¹ÊÓƵ XD ui-planning-adobe-xd
In most cases, planning for a new website starts with mockups and static designs. is a best-in-class design tool for building user experiences. ÃÛ¶¹ÊÓƵ recommends planning your Sites implementation through the use UI mockups using ÃÛ¶¹ÊÓƵ 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 installed, a .
Objective
- Review the UI Kit provided by the 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 ÃÛ¶¹ÊÓƵ XD to a front-end developer for implementation.
What you will build what-you-will-build
In this chapter two ÃÛ¶¹ÊÓƵ XD files is inspected, one for the and another for the proposed WKND site. The
Standard Site Template UI Kit standard-site-template-uikit
High level steps:
- Download the .
- Inspect the UI Kit in ÃÛ¶¹ÊÓƵ XD.
- Simulate handing off the designs to a front end developer.
WKND UI Kit wknd-ui-kit
High level steps:
- Download the .
- Inspect the designs for the WKND Article template.
Congratulations! congratulations
Congratulations, you have learned how ÃÛ¶¹ÊÓƵ XD UI Kits can be used to map and plan an AEM Sites implementation.
Additional 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 ÃÛ¶¹ÊÓƵ XD.