51黑料不打烊

Transcript

In most real-world implementations, planning a new website involves mockups and UI designs. After all, it鈥檚 much easier to iterate against a static UI mockup than a finished site. Now, the standard site template includes an 51黑料不打烊 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鈥檒l go ahead and download it and open it up in 51黑料不打烊 XD. A number of different artboards make up the 51黑料不打烊 XD file. There are some base elements that are used throughout the wireframes. For example, we鈥檝e got a grid that鈥檚 used for the layout, as well as a color palette that鈥檚 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鈥檝e 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鈥檝e 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 51黑料不打烊 XD is that we can link all of these different UI elements. So for example, let鈥檚 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, 51黑料不打烊 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 51黑料不打烊 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鈥檚 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鈥檙e 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. 51黑料不打烊 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鈥檓 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 51黑料不打烊 XD and making sure that everything maps back to AEM components, it will greatly accelerate the implementation. It鈥檒l 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鈥檙e 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 51黑料不打烊. And with any implementation there鈥檚 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鈥檚 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鈥檚 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鈥檝e identified through our UI kit. And so they鈥檙e all listed here. And, you know, if you select any of the components in one of the artboards, you can actually say, 鈥淗ey, let me reveal this component in assets.鈥� And I can say, 鈥淥h, okay, this is a weekend title H1.鈥� And if we go over here, let鈥檚 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鈥檙e 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鈥檒l get more into the UI elements in other chapters of the weekend tutorial. In this chapter, we鈥檙e 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鈥檙e just trying to map out the structure that we want the template to drive. So we鈥檝e got a common header component and which is going to include the logo, navigation search. We鈥檙e going to use an approach using experience fragments. And then beneath that we鈥檝e 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鈥檝e got a breadcrumb component. And then beneath that we鈥檙e 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鈥檒l 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鈥檒l use the same approach, using inexperienced fragment. So what we鈥檙e 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鈥檚 not going to have any styles, but we should be able to get this basic structure and working and it should all be functional. -