Hello there, you're watching ulearn,
the place to develop your creative skills and grow as a designer.
In this tutorial, you will learn how to create wireframes in Adobe XD.
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.
After opening Adobe XD,
it may take you to the welcome screen.
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.
Let's pick a device or size,
and I will start with a mobile version.
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.
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!
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 down the Shift and click each object.
Keyboard Shortcut: V
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
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, but this time,
drag to create your curve.
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.
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.
To create a straight line at any angle,
you can left-click to draw,
and left-click
to finishing your line.
You can left-click and left-click, but this time,
Keyboard Shortcut: P
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
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 artboard
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
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
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 or canvas 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
Before you start creating your wireframes on a computer or tablet
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.
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.
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.
Go to the menu, File > Get UI Kits.
You can build from scratch by looking at the paper sketches and use them as a reference.
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 when I am ready, delete the placed images.
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 draw straight lines as text.
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 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 after dragging to align in a straight line,
either vertical or horizontally.
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.
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.
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.
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
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 comments
questions 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!