Adobe XD Tutorial: Step-by-Step Landing Page Design in Adobe XD #webdesign #adobexd #tutorial

Adobe XD Tutorial: Step-by-Step Landing Page Design in Adobe XD #webdesign #adobexd #tutorial

January 15, 2020 11 By Peter Engel


Hey, I’m Hunter from Skillthrive and today
we’ll be creating this landing page in Adobe XD. If you’d like to download the final assets
and course files so you can follow along, all you have to do is become a free member
on Skillthrive.com. There’s a link in the description that will
take you to a registration page where you can join. So, with that said let’s go ahead and jump
into Adobe XD and get started on today’s tutorial. First, come down and select the 1366 by 768
artboard from this dropdown. Now, XD will open and automatically create
the artboard in your project. Hit “R” to quickly access the Rectangle
Tool and click in the top-left corner of the artboard to start creating the rectangle. You’ll know you’re lined up with the top
corner when the Smart Guides light up on both the top and left edges of the artboard like
this here. Now, drag out to make the rectangle 838 pixels
wide and 768 pixels tall. You can also come over here and type in the
values. Turn off the border for the rectangle and
change the fill to the hex code F24C4E. Go ahead and click on the plus icon to add
the color to the document palette. To add some variation in the background, we’ll
create a smaller rectangle. Turn off the border and come into fill and
change the it from “Solid Color” to “Linear Gradient” in this dropdown. On the first point, select the color you saved
in the palette below. For the second color, use the hex code F2D34C. Go ahead and add this color to the palette
as well. Head back to the course files and grab this
resort building photo and drag it into the project. Resize the image and place it in the artboard
like this. Now, drop the opacity to somewhere around
10% to blend the image with the background. To hide the hard edge, create a rectangle
that’s aligns to the top of the image. The height of this rectangle doesn’t need
to be too big. Then change the fill to “Linear Gradient”
and set both points to this saved color. Now, set the opacity of the color on the bottom
edge of the rectangle to 0% by typing it in here or sliding this control down. For the top point, leave it on an opacity
of 100%. Adjust the height of the rectangle until you
get the blending effect you want. Now, we’ll add the main resort image. Create another rectangle that’s 579 pixels
wide and 354 pixels high. Go into the course files and drag this image
onto the rectangle. Adobe XD will automatically fill the rectangle
with the image. Next, we’ll create the title. To do this we’ll start by creating a rectangle
that’s 300 pixels wide and 113 pixels high. Turn off the border and set the fill to the
hex code to FCFCFC. Add this color to the palette because we’ll
be using it later. Hit “T” to access the Text Tool and click
on the artboard to create a text layer, then type out a title. Select the text and come over and change the
font to Open Sans, which is included in the course files or can be downloaded from Google
Fonts. Set the size to 45, the style to Bold, the
character spacing to 100, and the font color to the red in the palette. Move the cursor outside the text layer and
hit “V” to switch to the Move Tool. Now, use the Move Tool to center the title. Use the guides to gauge spacing and if you
don’t see the guides, hold Option or Alt to enable measurements. Then create another rectangle that’s 300
pixels wide and 20 pixels high. Turn off the border and then set the color
to the yellow that’s in the palette. Select the layers for the title card and group
them with Command or CTRL-G. Once the title is placed, switch back to the
Rectangle Tool by hitting “R” on your keyboard and fill the space to the right with
a new rectangle. Turn off the border and set the fill to the
off-white that’s saved in the palette. Now, switch to the Text Tool by hitting “T”
on your keyboard and type a subtitle for this section. Keep the font on Open Sans and change the
size to 30, style to Bold, and character spacing to 140. Set the fill color to the hex code 3C3C3C
and save that color in the palette. Head back to the course files and open the
fill text file, or feel free to use an online text generator. Then copy the filler text. With the Text Tool still selected, click and
drag below the title to create a text box. Now paste in the filler text. Keep the font on Open Sans and change the
size to 12, style to Light, character spacing to 100, and the paragraph spacing to 30. Set the fill to the black color in the palette. Resize the text box width to 403 and height
to 111. Then with the Move Tool, place the paragraph
30 pixels below the subtitle and left-align the edges of both layers. Now, let’s create a call-to-action button. Switch back to the Rectangle Tool and create
a rectangle that’s 150 pixels wide and 44 pixels high. Set the fill color to the red in the palette. Come over and make sure this icon is selected
and enter a value big enough to make the corners completely rounded. By selecting this icon XD will ensure all
corners are rounded by the same amount. Move back to the Text Tool and type a call-to-action
like “Book Now.” Keep the font settings from the paragraph
section above, but change the font style to Bold and set the fill to the off-white. Go ahead and group the elements of the button
and move the group down 40 pixels from the paragraph. Also make sure the button is left-aligned
to the paragraph and subtitle. Group the title, subtitle, and call-to-action
button and name the grouping “body.” To bring in some color and fill the white
space, let’s place an image at the bottom of this section. So head back to the course files and drag
in this image and resize it to fit. Drop the overall opacity so the image blends
in with the background. To hide the top of the image, repeat a similar
process that you did to the image on the left. Now, there’s just one more thing to do,
and that’s to create a simple menu icon. So switch to the Rectangle Tool and hold Shift
to create a square that’s 38 by 38 pixels. Turn off the fill and set the border to two
pixels and set the color to the black. Next, hit “L” on your keyboard to access
the Line Tool. Click and drag within the square while holding
Shift to create a perfectly straight line that’s 18 pixels wide. Duplicate this line twice by hitting Command
or Control-D. Now, space each line 10 pixels apart from each other by holding Shift and
using the Arrow Keys. Then group the lines, select the group and
the square, and hit the Align Middle Vertically and Align Center Horizontally buttons. Now, the lines should be centered within the
square. Now, make sure you save your work by heading
to File>Save. Then select the artboard, head to File>Export,
and select “Selected…” Name your file, pick the desired format and
export options, and click “Export.” And that’s it! If you liked this Adobe XD tutorial, check
out these other ones as well. And, if you liked this video, please consider
subscribing and giving it a thumbs up! Again, I’m Hunter from Skillthrive and I’ll
see you in the next one!