Before we start to create our wireframes, let’s take a minute or two to look at the interface and familiarize ourselves with everything on the screen. 

Let’s get started and open Adobe XD.

1. After opening Adobe XD, it may take you to the welcome dashboard.
2. On the left-hand side of the dashboard is where you can see your work or documents. You may see a template of new files and recent ones in the middle of the splash screen. You do have the option to click on the drop-down menu to see different sizes for mobile and tablets, websites, and social media posts. 
3. Let’s pick a device or size, and I will start with a mobile version.

Adobe XD

Right off the back, Adobe XD instantly creates a new file for us to work on—this is called an artboard. Think of artboards as pages of a website. Outside of the artboard is your canvas. 

Adobe XD Interface

There are three options available: Design, Prototype, and Share. Design is where you can create your wireframes or mockups. The prototype is where you can make turn the designs interactive, and Share is self-explanatory! 

On the left-hand side are the tools. On the far right-hand side is the control panel of the tools. Depending on the shape, or text, you can adjust the colours of the fill, stroke, alignment, size to text formatting, effects, pathfinder, and repeat grids (which is one of the coolest tricks!) 

Adobe XD Tools

Pointer

• The pointer tool allows you to select, move, and resize objects on the canvas and the artboards. To manipulate multiple items at once, click and drag, creating a box around the chosen things (like a marquee selection in Adobe Photoshop or Illustrator). Alternatively, hold Shift and click each object.
  Keyboard Shortcut: V

Shape

• With the shape tool, you can create rectangles, circles, polygons or straight lines. Click the shape tool and select the appropriate shape (rectangle, circle, polygon or line). Inside the squares or polygon are the live areas, where you can change the shapes. Hold Shift while drawing to create perfect squares and circles. Holding Shift while drawing a line will lock your line to 0°, 45°, or 90°. Using the Up arrow on your keyboard will increase the number of sides for a polygon, and the down-arrow will decrease the number of sides.
  Keyboard Shortcut: R, E, Y and L

Pen

• Draw on your canvas with the pen tool. When you select the pen tool, you can create the shape that you want. The pen tool is similar to how we used it in Adobe Photoshop and Illustrator. You can left-click and left-click to create straight lines to create your custom shape. To close the shape, hover over to the starting point, and the starting point should turn to a solid black dot and click when ready. You can left-click and left-click and drag to create a curve. Once you’ve completed the shape, double click on the shape with the pointer tool to edit the shape. To delete a point, grab the Pen Tool to delete a point.  
• Change the colour, adjust the line thickness, or set the default end caps on the right-hand side. With the shape selected, you’ll change the opacity options along with an opportunity to add fill. But, remember to keep the wireframe as simple as possible by using black and white and greys.
• To create perfect circles or squares, hold down the Shift key while drawing. Hold the Shift key while drawing will help you create straight lines at 0°, 45°, or 90°. To create a straight line at any angle, hold Shift when you click to draw, but release Shift before finishing your line.
  Keyboard Shortcut: P

Text

• When the text tool is selected, you can either click once on the canvas, which creates a title text. Or draw a text box that makes a paragraph text. Go ahead and enter text on your canvas. To create a line break, press Enter. 
• Switch to the pointer tool to resize your text. If you use the pointer to select the text, you can change the colour, formatting, and alignment. Or highlight the text, and you can format the line of text to be bold, italicize, underline and set the text alignment to be left, right or centre.
  Keyboard Shortcut: T

Artboard

• Right below the text Tool is the Artboard tool. Suppose you select the artboard tool. You should notice on the right-hand side, and it shows a set of default sizes of various mediums. Pick a different size, or click once on your canvas to create the last artboard size made. With the artboard tool still selected, grab it by the generic artboard name to move the artboard around. Double click on the title to change it and hit enter or return to accept the name change. 
• For that matter, I can select the pointer tool and move the artboard by grabbing the title. Double click on the title to change it and hit enter or return to accept the name change. 
• To delete an artboard, select it with either the Artboard or Pointer tool, right-click to delete or hit delete on the keyboard. To delete multiple artboards at once, click and drag, creating a box around the chosen artboards (like a marquee selection) and click delete. Alternatively, you can hold down the Shift and click each artboard and click on delete too. 
• To resize an artboard, click on whatever side you want to resize. If you decide to extend the bottom of the selected artboard, it may give you the icon that shows the scroll below the fold.
  Keyboard Shortcut: A

Zoom

• The tool becomes a magnifying tool with a plus sign to zoom in. To zoom out, hold the Option/Alt key and click once. Press and hold the Spacebar to access the Hand tool, enabling you to move around and pan around the artboard by pushing on it. Just like Adobe products, you can Command/Control plus or minus to zoom in and out. Command or Control 0 will zoom all your screens to fit. Command or Control 1 will place at 100% while Command or Control 2 at 200%. Command or Control 3 will zoom to the selected selection.
  Keyboard Shortcut: Z

It’s Time to Create Our Wireframes but wait…

Before you start creating your wireframes on a computer or tablet app such as Balsamiq, InVision, Adobe XD, InVision Studio or Figma, make sure you sketch the wireframes on a piece of paper. By doing so, you can easily create concepts on paper quicker than you can do it on the computer. Sketching lets you explore different ideas quickly to figure out the best design concepts for the user interface by making the wireframe process faster and easier.

To save time and watch me create many sketches of wireframes on paper, I will show you the finished drawings. There are a few ways of making the wireframes in Adobe XD. 

1. One could use the templates or download and use UI Kits. You can essentially copy and paste or move the UI elements into your wireframe to resemble your sketches. File > Get UI Kits.
2. You can build from scratch by looking at the paper sketches and use them as a reference.
3. Sometimes, what I like to do, is import (or drag) the drawings and placed them on top of the artboard, and as a guide, place art elements on top, and then deleting the placed images (the way is much easier for me!). Some designers may put the sketches in Adobe XD and have them on the side as a reference. 

Let’s do option number three!

Let’s add the sketches to Adobe XD. We can either drag our images from our computer into XD or import through the File menu. 

Resize the drawings if you need to or change the artboard size to match the sketch. Then create a wireframe based on the elements you see in these sketches. The purpose of building a low-fidelity wireframe with no words or text is to be as simple as possible. I use simple shapes from circles, squares and shapes to make our wireframes. Or I can also draw lines as text.

Duplicating

If I want to duplicate an item, I can use the keyboard shortcut, Command D for the Mac or Control D for the PC. Grab the pointer tool to move the duplicate shape. Or Option Drag, and as you also hold the Shift key after dragging on a MAC, it would be aligned in a straight line, either vertical or horizontally. It’s the same on a PC, except hold ALT Drag, and then hold the Shift key after dragging to align in a straight line, either vertical or horizontally. 

Placement of Images (FPO)

If you want to signify there should be an image, you could fill the shape with grey with an ‘X’ through them, indicating a picture box. You are going to love this next trick. Say, I have a box with some type underneath it. I can copy and paste it, duplicate it, or turn this on, ‘Repeat Grid.’ You get a green bar on the right-hand side and bottom. Watch this. If I drag it to the right, it duplicates the items selected. Drag below and copies it again. I could easily create a gallery of boxes within seconds! And afterwards, I can click on Ungroup to stop the repeats.

Alignment

I will still try to be a little precise by aligning objects to other elements, as I could use this to show potential clients what the site is all about. To do that, I make sure I select one or more items together and use the alignment tools at the top here—left-alignment, centre-alignment and right-alignment. Once you do one wireframe, you can duplicate the artboard, copy and paste elements and move them around to create a new layout. 

Wanna Go Again?

Within a few seconds, we have created one page. Want to try again?

Let’s duplicate an artboard. Grab the pointer tool, select the artboard. And Command D for the Mac or Control D for the PC to duplicate the artboard. Or you can use the tried and true, Copy and Paste. For that matter, I can select the pointer tool and move the artboard by grabbing the title and hold down the Option/Alt and drag to duplicate the artboard. 

Double click on the artboard name or title to change it and hit enter or return to accept the name change. 

Let’s create this artboard from this sketch. There we go. That’s how you can create wireframes in Adobe XD. As always, please feel free to leave any questions or comments below, like this video if you enjoyed it and subscribed to the channel, and hit that notifications bell to get the next hot tip! I will see you next time!