Create a Simple Wireframe Using Adobe XD

Create a Simple Wireframe Using Adobe XD


In this video we’ll create a simple low
to mid-fidelity wireframe using Adobe XD. We’ll apply some really basic layout rules,
like setting up grids, using the alignment tools, and distributing space for page elements.
We’ll also use basic shapes as placeholder elements for our wireframe, while applying
colour, and labelling our page elements with XD’s text tools.
After completing our wireframe in XD, we can duplicate our layout and use it as a foundation
to build our mockups for desktop and responsive layouts. If you’d like to follow along, download
the exercise files, and use the supplied assets in the folder.
Alright, let’s get started! Okay, so let’s launch Adobe XD.
Let’s choose ‘web’ from the artboard options at the top.
We can always expand the artboard and it’s height later on if we need to.
Now that we have our artboard created, let’s select the artboard by clicking once on the
artboard’s name and rename it. I’ll name mine ‘wireframe-desktop’.
We can also apply our grids over in the property menu on the right hand side while we’re
here. I’ll select the ‘layout’ option at the
bottom and choose my grid settings for my layout.
If your layout has to fit a lot of elements along the horizontal axis, use more grid lines.
If you don’t have a lot, then use less grid lines.
You could choose a grid of either 12 columns 16 or 24.
I’ll choose 16 columns. Next, I’ll apply my gutter spacing to make
sure I have equal spacing between elements and they will also be aligned.
So now that our layout is set up, we can use our basic shapes to draw and position some
placeholder elements for our page. When placing your elements or objects on the
page, start drawing from the left hand side of a grid column and end on the right side
of a grid column. Never end on the left and place your object
in between the gutter. This will negate your spacing and make your layout inconsistent.
So, this example I’m building is based on a basic redesign I’ve sketched out of Zara’s
e-commerce website. The first thing I’ll create is a placeholder
for the logo using my rectangle tool and label it using my text tool.
We want to stay away from using colour in our wireframe so let’s go ahead and use
grayscale for our placeholders and text. Now, I’ll select both objects and align them
to the centre of each element using the alignment panel.
Next, let’s create the navigation items using our text tools.
Type out each item in separate text frames and then we can distribute them evenly using
our distribute panel at the top of our control panel.
We can hold option and drag to copy each text element.
Next, we can create a placeholder for the feature products or sale items.
I’m going to make my image placeholder full-width and give it a height of 480 pixels.
In the property panel, let’s remove the border by choosing ‘no fill’, which is
transparent. I’ll now apply my style rules that I created
for my headings, and buttons in my style guide. After laying out the text for my feature image,
I’ll create a button using the rectangle tool or copy over my button style and edit
the call-to-action. I’ll label this ‘new arrivals.’
I’ll also add an arrow icon to my button using the UI plugin, ‘Icons 4 Design’.
I’ll go to my plugins and search for arrows. If you don’t have it installed, click on
the plugin icon at the bottom left corner of the interface, and click on the plus sign.
Go to browse and search for ‘Icons 4 Design’ and install.
And now, I’ll place my icon and recolor it based on my style guide rules. I’ll do a quick save at the moment by pressing
Command + S and save this to my project folder. Now we can move on to laying out the placeholders
for our product categories on the home page. Again, we can use basic shapes to create image
placeholders and align them to our grid. Remember to start from the left-hand side
of one column and end on the right-hand side of another.
We can create one object and hold Option + SHIFT to copy and drag our elements on the
page. We can also start to label each placeholder
or include any content that belongs to each element.
Remember, use real content. Try not to use lorem ipsum and apply your style guide rules
that you made for your typographic system. Use the appropriate fonts, weights, sizes,
colours, styles, and spacing so that you get a realistic view of how your layout will look
in the end. Align your objects as you go and try to make
one component and modify its content to be more efficient with your workflow. Lastly, I’ll start to layout the footer elements
that need to be included in my wireframe. I’ll place the remaining parts of the landing
page and adjust any objects that need alignment or styling before I move on to creating a
layout for my responsive layout. Continue to use your style guide to dictate
the layout and stick to your type system rules. If you find that you need to adjust and accommodate
for any changes in the design, go back and adjust these within your style guide.
Remember, the goal is consistency and having a set structure and rules for your type system
is what we’re trying to achieve. Okay, so now that we’ve applied some basic
layout rules and you’re familiar with the tools for wireframing a simple layout, try
and apply these techniques to your own. You can duplicate your artboard by selecting
it by its title and pressing Command + D or Control + D if you’re on a PC. You also want to create responsive versions
and create wireframes for all the other page designs and layouts you need. Next up, we’ll look at how to take our existing
wireframe and build a mockup of our website while applying images, colour and other UI
elements from our typographic system style guide.
I hope you all enjoyed this quick video tutorial on creating a simple wireframe using Adobe
XD.. Feel free to leave comments and questions
on our course Padlet. The link is in the description below.
Also, leave a like on this video if you found it helpful and share it with others who might
find it useful.