Fall 2020 // Thursday 10:30–1:10 // Online

Intro to Web Design

2. Intro to Xd

This tutorial will go through some of the basic features of Adobe Xd and help with your file setup for E2: Make the Grid.

Step 1: Download/Install/Open Adobe Xd

If you don’t have Adobe Xd yet you can download it here. Xd should be free but I think you will need an Adobe account to use the program. Once you have it downloaded, install it and open it.

Step 2: Create a New Document

When you open up Xd you should be presented this screen.

image of Xd welcome screen

On this screen look at the top row of sizes and in the “Custom Size” option type 1440 for the width, 3000 for the height, and then hit enter. The base unit for Xd is pixels, so unless otherwise specified, numbers are pixels.

image of Xd artboard

Once you see the artboard you just created you can double click on the text at the top left of the artboard that says “custom-1” and change the name. Not entirely necessary but a good habit to get in as you build more complex sites in Xd.

One more thing you might want to change is the “Viewport Height” option in the right sidebar under “Scrolling”. This is probably set to 3000 as the default and I would suggest moving it to 900. What this does is adjust the height that Xd previews when you hit the play icon in the top right. Not so useful for Exercise 2 but very useful for designing actual sites.

image of Xd vertical height option

Finally, save the document before you move on to the next step. Adobe wants you to use the cloud to save your documents so if you want to use that you can go to File > Save… or use cmd+s. If you do not want to use the cloud to save your documents you can go to File > Save as Local Document… or use opt+shift+cmd+s. Save this as some version of e2 or exercise2.

Step 3: Create a Grid

Before you start adding anything to your artboard you want to set up a grid. This is accomplished by finding the grid section of the right sidebar and checking the box next to the layout dropdown. When you check that box it will bring up options for you to create your grid.

image of Xd grid options

Play around with these options and see what happens. There is no particular number for columns, widths, or gutters so it is up to you. In Exercise 2 you will be making 5 different artboards with 5 different grids so you can see what works well for you.

Step 4: Add a Polygon

This tutorial is built around Exercise 2 so the content you will be adding to your artboard are shapes. In the left toolbar there are a few different shape tools you can use — rectangle r, ellipse e, and polygon y. The rectangle and ellipse tool draw what they say and if you hold shift while drawing the shape you will get a square or a circle. The polygon tool is a little different so choose that one or press y.

By default the polygon tool draws a triangle and if you hold shift it will draw and equilateral triangle. Draw a triangle on your artboard and make sure it aligns to the grid you made. The mouse should snap to the edges of the columns.

image of triangle on the artboard

The default drawing of the triangle for me is a white fill with a grey border. The options in the “Appearance” section in the right sidebar are generally the same for the rectangle and ellipse tools but the polygon tool has a few added options to control what the polygon looks like. Any option with a checkbox next to it means you can turn it on or off using that checkbox and the settings are saved.

image of appearance settings

Step 5: Add More Shapes

Now, using the grid you set up, add more shapes to create a layout. The layout will be relatively abstract and you do not need to make it feel like it could be a real webpage. Feel free to play with the appearance settings for your shapes and make sure you align the shapes to the grid. Also keep in mind white space and the idea that not ever inch of the artboard needs to be covered with shapes. Even space or proportional space between items is generally better than random space.

image of shapes on an artboard aligning to the grid

Once you have finished with your layout you can make another artboard by clicking the Artboard tool in the left sidebar or pressing a. You can then draw the artboard just like any other shape and adjust the dimensions to 1440 x 3000 in the transform settings in the right sidebar.

image of transform settings

Make a different grid for this artboard and add some more shapes to it just like you did for the first artboard.

Step 6: Export Artboards

Once you have five artboards with different grids and different layouts on them, it is time to export. To export the artboards go to File > Export > All Artboards…. In the pop up window choose your location and then set the “Format” to PNG, “Export For” to Design, and then click “Export All Artboards”.

image of export settings

Now you should have five PNG files that are all 1440px by 3000px. If they are not that size you might have exported at a different size or you didn’t make your artboards the right size. In either case, go back through these steps and make sure the files are the correct size.

Back to Tutorials