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.
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.
So in most cases, planning for a new website starts with mockups and static designs. And in this tutorial, we are going to build a new article template based on some mockups created by the weekend design team. So the first thing that we’re going to do is open up an XD file that was created by our weekend design team. And the first artboard that I want to highlight is the UI Kit. Now, the UI kit identifies all the key colors, fonts and styles that make up the weekend brand. And we can actually see some different components like title, text, a breadcrumb button. And these are actually styles of existing core components that are provided by Adobe. And with any implementation there’s going to be some percentage of components that are accustom, that required a unique business logic and might not be covered by core components. And this is really expected. But by planning up front with core components and building something like this UI Kit, it’s a lot easier to map to existing out of the box functionality. And you can also quickly identify and prioritize any custom components that you might need to build. So now, let’s look at the mockups for the article page. And because our design team has already created these UI kit upfront, we can easily see that many of the elements that make up this mock-up map directly to core components. We have navigation component, search component, image component, breadcrumbs, titles and and so on and so forth. And one of the cool things about building the UI kit first, is that actually all of these components actually have a link to one of the components listed in the UI kit. So let me show you what I mean.
If we open up the assets panel in XD, you can actually see all of the components that we’ve identified through our UI kit. And so they’re all listed here. And, you know, if you select any of the components in one of the artboards, you can actually say, “Hey, let me reveal this component in assets.” And I can say, “Oh, okay, this is a weekend title H1.” And if we go over here, let’s look at this one. This is reveal this component in assets. Okay, this is just using a simple text component. And then another really cool thing that you can do with this approach, is you can actually right-click a component and say, edit master component. And let me just zoom out a little bit so we can see this.
So these two, these two are actually linked.
If we actually edit the master component for say the title, or maybe play around with the color of this, you can see that they’re both changing on the fly. So all of the components in our mockup are now linked to one of these master components. And it just makes it really easy to, you know, to keep everything in sync. All right, so we’ll get more into the UI elements in other chapters of the weekend tutorial. In this chapter, we’re actually going to focus on, you know, taking the structure of this mockup and creating a template out of it. And so we actually have this third artboard for our template identification. And this is where we’re just trying to map out the structure that we want the template to drive. So we’ve got a common header component and which is going to include the logo, navigation search. We’re going to use an approach using experience fragments. And then beneath that we’ve got, you know, it just is just going to be a standard image component, but we want a consistent hero image to appear on each of our article pages. Beneath that we’ve got a breadcrumb component. And then beneath that we’re actually going to have two containers. And this is, these containers are going to allow a content author to come in and populate the main body of the article, and then we’ll also have a second container that will act as kind of like the side rail for some of that navigation. And then at the very bottom we will also have, you know, a common footer use throughout the site. And we’ll use the same approach, using inexperienced fragment. So what we’re going to do is see how far we can get with just the out of the box core components and editable templates to build out this structure. Now, it’s not going to have any styles, but we should be able to get this basic structure and working and it should all be functional. -
Congratulations, you have learned how Adobe XD UI Kits can be used to map and plan an AEM Sites implementation.
In the next chapter a new page template is created based on the WKND Article design.