UI Planning with 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

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

  1. Review the UI Kit provided by the Standard Site Template and by the WKND design team.
  2. Understand how UI kits can be used to map and plan an AEM Sites implementation.
  3. Learn how to hand-off UI designs created in Adobe XD to a front-end developer for implementation.

What you will build

In this chapter two Adobe XD files will be inspected, one for the Standard Site Template and another for the proposed WKND site. The

Standard Site Template UI Kit

High level steps:

  1. Download the Standard Site Template XD File.
  2. Inspect the UI Kit in Adobe XD.
  3. Simulate handing off the designs to a front end developer.

WKND UI Kit

High level steps:

  1. Download the WKND Article XD File.
  2. Inspect the designs for the WKND Article template.

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

In the next chapter a new page template will be 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 will be created based on a mockup from Adobe XD.

On this page