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