adobe xd web page design tutorial video

As someone who has spent the last 15 years using Adobe Photoshop for designing websites, Adobe XD is a breath of fresh air. I'm exclusively a Windows guy, so I haven't had a chance to experiment with Sketch. Adobe XD (Experience Design) is Adobe's response to the popularity of Sketch.

While I wrote and recorded this tutorial at a time when Adobe XD is still in beta, you should be able to follow along perfectly fine for years to come. Reason being: it's very feature lacking and the only features I used are ones that should remain present in future builds.

So with that said, if you prefer to watch video tutorials instead of reading written tutorials, you can watch everything I'm about to teach you below:

Click here to download the project assets

Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project. View his portfolio here and personal website here.

1. Draw the Artboard

The first step is to click on the Artboard tool on the left toolbar. It gives you the option on the right to choose from a list of predefined artboards for different devices. But for this, we'll simply left click and drag out an artboard with the size of 1200x900. This should give us enough room and size to design our website mockup on a large viewport.

2. Add the Name

Now select the Type tool on the left sidebar and left click where you want the first letter to start. In UI design, it's always advisable to follow good white-space practices. Give yourself and your UI elements room to breathe. I've chosen to put my name. I'm using the free Open Sans font at size 32 and bold.

3. Add a Subtitle

With the select tool, select the name type layer you just created and hit CTRL-C to copy, and then CTRL-V to paste. Initially, it will show up directly on top of the previous copy. Just select it and hold shift to drag it down. Change the font size to 18 and the weight to regular. Again, pay attention to good white space; you want a good amount of distance between the top of this subtitle and the bottom of the name.

4. Creating the Navigation

Now hit CTRL-V to paste the name layer again, hold shift, and drag it over to the right. Change it from the name you specified, to "HOME", and change the size to 14. Change the fill to: #144354.

With it selected, copy it and paste it. Then drag it over to the right with a good deal of white-space. Change it to "MY WORK" and repeat this process until you have the 4 navigation items as shown below.

Hint: You know you'll have even spacing between these elements when you see the pink overlay between the elements.

5. Creating a Thumbnail Container

We need to use the rectangle tool to draw out a container that will house all of our thumbnails. Drag out a rectangle that spans the entire width of the website mockup, and then change the fill to: #F3F3F3. Don't worry about getting the height perfect, that will be adjusted later.

6. Creating the Thumbnails

In order to follow along with this tutorial, you need to download these assets, or at least have access to your own assets. Make sure they're all placed in a folder. It's also preferable that they're of the same dimensions.

Bring up the folder containing all of the images, select one, and drag it onto the artboard somewhere. Position it on the upper-left corner of the gray container we created in the previous step. Scale it so that approximately 6 thumbnails will span across.

7. Using the Repeat Grid to Replicate the Thumbnails

With the thumbnail selected from the previous step, click on the "Repeat Grid" tool. Then drag the right handle all the way across until you have 6 thumbnails.

Then decrease the white space between each thumbnail to 0 (we want no white space between each thumbnail).

8. Duplicate the Gallery

With the gallery selected, copy and paste it. Then drag it directly beneath to create a second row of icons.

If you want unique thumbnails: with the assets folder open and the top row selected, drag 6 of the thumbnails on top of the top row. Repeat this for the bottom row.

9. Ungrouping the Galleries

Select the top and bottom galleries, right click, and choose Ungroup Grid.

10. Adjust the Bottom Row

Remove a few thumbnails, and then select the remaining thumbnails as a part of the bottom row. Then increase the size slightly. This will simulate what the gallery will look like once it's in a responsive flexbox grid.

11. Simulating a Hover Effect

We'll use CSS animation to enlarge the thumbnails when a user hovers over them, as well as display a label that will pull the title of the project from the Behance API.

So take one of the thumbnails, and enlarge it very slightly. Also use the rectangle tool to add a small, white (no border) rectangle box positioned to the bottom of the thumbnail. Then use the type tool to center-align a title with a fictional project name. Use all caps, and make the size 12.

12. Designing the "Frontend" Icon

Beneath the gallery will reside 2 columns. On the left will contain a blip about "Frontend Development" with a small paragraph, as well as an icon. The Adobe XD Pen Tool is similar to Photoshop and Illustrator, but there are some differences. It would be a little difficult to explain *exactly* how to design this paintbrush icon step by step, so I suggest watching the video where I describe and show how I made it.

Once the icon is done, align it to the left until a vertical guide appears to the left of the name at the very top. Then use the type tool to create a "Frontend Development" title. Make it black with size 18 and regular (Open Sans).

Then use the type tool again to draw out a textfield (left click and drag) that will contain some lorem ipsum text. Make the size 14, and change the fill to #95989A. Also change the line spacing to 22.

13. Duplicate this section

Once complete, select all of the items (the icon, the title and paragraph), copy it and paste. Holding shift, move it overr to the right to create a 2nd column.

Then delete the icon, and use the pen tool to create a code brackets icon for "Backend Development". This icon should be much easier to design.

14.Duplicating the Artboard

Now that the home page design is done, select the artboard title up top (it will encase the artboard in a blue selection box) and hit copy and then paste. It will automatically duplicate this artboard and place it to the right of the original artboard. You can double click the title to change the name of this artboard to "Details".

15. Removing Content

This "details" page, which will show up once a user clicks a thumbnail gallery, will not include the title, subtitle or navigation; so you can delete those. You can also get rid of all the thumbnails with exception to 1. You can also remove one of the columns below. Remove both icons, but keep one of the titles and paragraphs.

15. Enlarge the Thumbnail

Next, enlarge the thumbnail so that it takes up 100% of the width of the artboard.

16. Create a White Column

Then use the rectangle tool to create a white column, approximately 35% in width, aligned to the right of the layout.

17. Position & Adjust the Title and Subtitle

Next, use the title and subtitle you didn't remove, and position it as the new title and description for the project. You will have to resize the width of the description text. Also change the type color to black and increase the title font size to 24.

18. Create a Back to Projects link

Copy and paste the title, and then while holding shift, drag it above the title. Change its properties to a 12 font size, with a fill color of: #6E6E6E. Adjust the type to say: "<-Back to projects".

19. Creating a "View on Behance" Button

Use the adobe xd rectangle tool to create a button. Pull in the corner radius icons to make it 100% rounded on the left and right. Change its fill color to: #131E30.

Use the type tool to create a white "View on Behance" caption. The font size should be 18.

Mockups are Finished!

Great. Now both mockups for the home page and the details page are finished. Let's add some interaction through the prototyping tab!

20. Connecting the Thumbnail to the Details Page

Click on the "Prototype" tab up top. Then select the enlarged thumbnail with the caption text (hint, select all 3 of the items including the white background, the project title, and the thumbnail and hit CTRL-G to group them).

Drag the blue little handle over to the details page. Change the transition to "Slide Right" and leave all of the other settings the same.

21. Connecting the "Back to Projects" link to the Home Page

Select the "<-Back to projects" link and connect it to the home page. Change the transition to "Slide Left".

22. Play the Prototype!

Now that everything is ready to go, hit the little play icon on the upper right toolbar. Click on the gallery, and click on the "back to projects" button to see our transitions taking place!