FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Create Content for the First Panel

We have our image in the first panel of the site as a background. So now we can go ahead and create some content to go in the foreground, namely a little “plate” displaying the site’s name and tagline.

Here we’ll start working on our typography, bringing in two font selections that match our site feel.

Related Links

2.3 Create Content for the First Panel

Welcome back to Code Friendly Design with Adobe XD. So far, we've set up our site background and our wrapper layer. And we've brought in this image and started generating a color pallet from that image. In this lesson, we're gonna go through and create the content for this first section. We're gonna have a little plate that sits on top of the image and welcomes the visitor to the site. And before we do that we're gonna add a little stylization to this image that's gonna help the content contrast to get us that background a little bit more clearly. And what we're gonna do is also, theoretically, going to decrease the size of this image when it's exported because we're gonna reduce the amount of detail in that image. And this something that can also help to make your website transition well to its coded up stage. And that is to try to include images that are not gonna be too massive in file size when they're exported. If you include an image that's too large, then the coder will have to export it at a fairly reduce quality level. Which might lead to it not looking quite how you expect it to in the design phase. So what we're gonna do is add another couple of rectangles. And I'm just gonna actually just group these up for now just to get them out of the way. And just call it highlightcolors, and we'll just turn them off for now. Above our image here we're gonna make another rectangle. We want it to be the same size, so we want it to be 1200, 675. We'll get that aligned, turn off the Border. And what we're gonna do is use this rectangle to create a blur effect on the image that's behind it. This is a really cool, really easy to use feature in Adobe XD, that you probably won't find in a lot of other software. So you just tick Background Blur and then you can just adjust these sliders to change up the amount of blur that's going on there. So I'm just gonna put that back to zero, we're gonna set the amount of blur to 7, that's all we need to do for that. And now we're also gonna put another rectangle over the top here that's gonna darken this image off a little bit. So just gonna duplicate this rectangle so that's already the correct height and width and take that background blur. Gonna set this fill color to a dark blue. So this is just a slightly modified version of the blue that we choose earlier. The color code for that is 172530. And now we'll just set the opacity for this layer to 28%. And now you can see that it darkens off our image quite nicely. So that darkening is gonna help our content stand out on top of here. And the blurring is gonna do the same thing. It's gonna sort of make this more suitable as a background image. And now because this blurred out, there's less detail in this image. And when it's exported, it's gonna be a smaller file size. And I'm just gonna rename these. So this layer here is the blur, this one is darken. And now, let's move this layer out of the way and we can group all of these up. And this is the background for panel one so we're gonna call it onebg. And now our background is ready, and we can go ahead and start putting in our foreground, which is our content. But because we've got a variation from light to dark here, there's not gonna be any one text color that works really well if we just put it directly on top of this background. So we're gonna put another rectangle in here, we're gonna make it dark. And then, we're going to have some light text on top of that. We'll grab the rectangle tool once again, draw out a rectangle. Gonna make it 570 pixels wide, and 290 pixels high. Now we want to center that, which we could do by hitting this button up here in the alignment tools at the top right. And we also wanna have it centered vertically as well. So to do that we're gonna hold shift, so that when we drag, this is gonna be confined to moving directly up and down. And then you can see there we get a little line that appears, and then when we have it perfectly centered. So just drag until your rectangle snaps to that spot, and then release. We don't need this border, so we're gonna turn that off. For this fill color, we'll start by just sampling this dark color that we created earlier. We're gonna drag the opacity down to, let's say 84 or 85. And we actually wanna darken that off a little bit, just to give us that proper contrast. As I mentioned, I already spent some time tweaking these colors to get them just right. The color that I've settled on for this is 1D262D. All right, so now that is gonna form the backing for our content. We're actually gonna frame it up a little bit too, we're gonna put a white line across the top and across the bottom. So grab the Line tool, line this up, and you'll see that the Line tool will snap to the edges there, so that you get the right length. And we're gonna set the color of this border. Actually, let's just turn these colors on that we created before, so we can sample. Deselected our line, so grab our line. We'll select this color with the color picker, and now we can just increase our line size. Another handy thing in XD, if you want to smoothly increase or decrease values, you can put your cursor inside one of these values. And then you can drag up to increase, or drag down to decrease. And we're gonna go with a value of 6 for the width of this line, 6 pixels rather. Now we'll duplicate this line, and drag it down to the bottom. Now that gives us a nice framing on our content box. The next thing we're gonna do is add a heading in here, and a tag line along the bottom. To do that, we're gonna need to bring in some fonts. And this is another area where it's a really good idea to be aware of how suitable for the web your fonts are going to be. You might have a whole bunch of fonts already installed on your drive, that you're used to using in your designs. But those fonts are only gonna work on a website if the license for those fonts allows them to be converted to a web font. Some fonts do allow web font versions of their typeface to be generated, and some don't. So that's definitely something you're gonna have to check out before you commit to a certain font inside a design. The easiest way to make sure that your fonts are web friendly is just to pick them out from Google Fonts. That's the easiest way, then you're guaranteed that they definitely can be used online. You can still use a font that requires payment, if you check and confirm that it will allow a web version. But bear in mind then that you'll also need to provide those font files to the coder, so that they can then load those font files onto the website. So we're gonna be using two fonts on this site, we're going to be using Amatic SC, and we're also gonna be using Railway. This is just gonna be for decorative header that welcomes people to the site, and this is gonna be for our default text. So there will be links to both of these in the notes below this video. To download these fonts, hit this select this font button, expand this little box here, and then you can download via this link. Once you've got those fonts installed, if you were already running XD at the time that you installed those fonts, you're gonna need to restart XD. Because it won't automatically pick up newly installed fonts and make them available for you to use. All right, so now let's grab the Text tool and we're gonna add some content in here. We're just gonna make some text say XD to Avocode. I'm gonna center that text, center align it, and then we're gonna give it the same color as these borders we just added. So use our color picker again, sample from here. And now we're gonna go in and find our Amatic font, so you just start typing in that font name to bring it up. And we're gonna boost the font size up to 116. We'll just rearrange that to make it fit nicely in here. Now, we'll put some more text down here. I'll just put in some random letters because that's still carrying over the font styling that we just used. We wanna change that. So we're gonna select all of that, change the font family to Railway. Decrease this font size down to 17, and we're gonna change the white to light. Now we'll type in our tag line. We're gonna say Free UI Design Software to Fully Cross Platform Coding. Obviously, you can put whatever type of content in here you want. And then just play around with the alignment here until it looks right to your eyes. This doesn't have to be exactly perfect, it should just look right to you. All right, so now we've got our plate in here and we've got a bit of text. The next thing that we're gonna do is create a little curve tab in here that has an arrow shape cut out of it. And we're gonna do this using the vector tools of Adobe XD. By using these vector tools what we're gonna be doing is creating a shape that can be converted into an SVG graphic later by the coder. SVG stands for Scalable Vector Graphics, and this is just vector graphics for the web. They have all the same advantages that you get from vector graphics in a design application, where you can infinitely scale or shrink them without losing any quality. And in the case of web vector graphics, SVG code can often be smaller than the same image saved out as a PNG, for example. All right, so we're gonna start by drawing out a circle. We're gonna make it about 85 pixels wide, so just enter that value in manually. I'm going to get rid of that border, set it to the same color that we've been using as our light color so far. Now, what we want is for this circle to be here, but we want this top part to be trimmed off. So what we can do is grab the rectangle tool. We're gonna draw out another shape. And you see how it snaps there at the halfway point? We're gonna use this rectangle here to clip the top off our circle. Just drop that border just to make it a bit more clean and obvious what we're doing. So I'm gonna select this rectangle shape, this circle shape. And then up here, you can see we've got this Boolean operators. So Boolean modifiers are just a tool that you can use to take two shapes and have them modify each other in various ways. We are gonna hit this one here which is subtract. And that's gonna subtract the shape of this rectangle from this circle, so we hit that. All right, so now I've got a nice little tab that we're gonna be able to put on the bottom of our plate here. Now, we wanna do a similar thing again, another subtraction, but we wanna cut an arrow shape out from inside here. This part is a little bit more fiddly because Adobe XD is designed to be a prototyping tool, it's not designed to be a full on design software. But you can still work with what you have and do some stuff that's pretty cool. So actually, I grabbed the Pen tool, which works like a Pen tool in most vector graphics. I'm actually gonna start with a square, cuz this can make the top section of our arrow. Get rid of that border again. Now, I'm gonna use this square and I'm gonna modify it to create an arrow. So just grab the Selector tool and just right-click it. And under path, we can choose Convert to Path to change this from a pre-defined shape into a more easily editable path. To get in and be able to edit the nodes that comprise this shape, once it's selected, double-click it. Now, we can actually access the nodes. Now, we're going to zoom in a little bit, to make it a bit easier to see. And if we hover over any edge, you can see we've got the option to add an additional point. So we're gonna add an extra point there. And we can drag that down, To create the point of our arrow, drag that down a little further. Now we're gonna add another point here, and one here. We'll drag these up, until we get a snap showing that this point is on the same level as these two. And we'll repeat that here as well. And that gives us a basic arrow shape. And we can actually find fine tune that a little bit later. We're gonna talk about refining the absolute positions that you have, things like nodes on, in a later lesson. But for now, that's gonna get us going. We'll click away to get out of the node selection mode. And now we'll just shrink this down a little bit so that it fits in here a bit more comfortably. And now we can do the same thing that we did to clip off the top of this shape. We select our arrow, the select our tab, and we hit the Subtract button. So now, we've got this nice arrow cut out inside our tab and we're ready to position it at the bottom of our plate here. So now when the coder comes along, they're gonna be able to do this entire section with just pure code. This blue section will just be a div, these white lines will be borders. This will be editable text, SEO readable text generated using Google Fonts. And this part will be an SVG graphic. So that is all looking pretty good. That's our first panel is completed and ready to go. In the next lesson, we're gonna start actually working out a color pallet. We've already seen that coming together, to a degree, with the colors that we created in a previous lesson. But we don't wanna always have to be messing around, trying to get the exact pixel to sample from to get the color correctly. And we also wanna make it really, really clear to the coder what the colors are that used in the design. So we're gonna go through and we're gonna actually make a limited number of colors. We're gonna set it up so it's really clear to the coder what those colors are. And then we're gonna work from that color palette as we go on and complete the rest of the design. So we'll step through all of that in the next lesson, I'll see you there.

Back to the top