UI Planning with Adobe XD ui-planning-adobe-xd

Transcript

In most real-world implementations, planning a new website involves mockups and UI designs. After all, it’s much easier to iterate against a static UI mockup than a finished site. Now, the standard site template includes an Adobe XD file that helps us understand exactly how the template was implemented. You can download the file by navigating to GitHub and to the AMSiteTemplate standard repository. Under files, we have the wireframe.xd file. I’ll go ahead and download it and open it up in Adobe XD. A number of different artboards make up the Adobe XD file. There are some base elements that are used throughout the wireframes. For example, we’ve got a grid that’s used for the layout, as well as a color palette that’s used throughout the site. We also have artboards for the different components used in the site. Components here correspond to AM components, and the design team has listed all the different variations possible. For example, the button component is a pretty simple AM component, and here the design team has listed all of the possible different variations. The teaser component is slightly more complex. Each variation contains a pre-title, title, description, and one or more CTA buttons or call to action. Again, the design team has listed all of the different variations. So we’ve got an image on the right, an image on the right inverted, an image on the left, and so on. We also have a series of page template artboards that use each of these components and elements to create different layouts. So we’ve got a home page, single column, and two column page templates. From there, we have sample pages that use each of these layouts and fill the pages with components as the main content. Now a powerful feature of Adobe XD is that we can link all of these different UI elements. So for example, let’s say we want to update this accent color and make it more of a yellow. Once we make the change, you can see this color choice reflected across the various artboards and throughout each of the UI elements. So if you want to customize the standard site template to match your brand colors and theme, this is a great way to start. Last but not least, Adobe XD has an awesome feature to share our design with a front-end developer. We could of course copy and save the entire XD file, but that might not scale very well and some users might not have Adobe XD installed. Instead, we can go ahead and select the artboards that we want to share and mark them for export. We can then go to share and switch the view settings to development and then go ahead and create a link. So we could choose to share it with specific users or just allow access to anyone who has the link. Now once the link has been created, we can email or slack it to our front-end developer and he or she can open it in their web browser. Let’s go ahead and open it up. Now we can inspect each of the artboards and understand exactly what needs to be implemented. On the side route, we’re presented with a list of details for all of the elements on the current artboard. We can see what colors have been used as well as what character styles for fonts have been implemented. Adobe XD also presents us with a sample CSS variables file that corresponds to the elements on the mock-up. Users can click into any of the UI elements and get more detail. For example, if I click this button, I’m given information about the background color as well as a sample CSS snippet that reuses the CSS variables and gives us some ideas of how we could go about implementing this button. So by planning these UI mock-ups up front with Adobe XD and making sure that everything maps back to AEM components, it will greatly accelerate the implementation. It’ll also make it really straightforward to hand off this information to your front-end developer when it comes time to customize the theme.

Transcript

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. -