Hello there, my name is Michael,
an Adobe Education Trainer to help develop
your creative skills and grow as a designer.
In this tutorial, you will learn how
to take your wireframes and create a static mockup
in Adobe XD.
In the past, we created a website and mobile mockups in Photoshop.
You can also create mockups
in Adobe XD as well.
Now, you are probably wondering how?
Remember how we built our wireframes in Adobe XD?
Let's begin by opening the wireframe that we made in the last video.
If your file didn't work out as you would have hope,
you could download the exercise files
and use the provided assets in the description.
Before we start to create our mockup,
make sure you optimize your images
by resizing and optimized before importing them into your mockup;
I have used Photoshop Save for the Web function and TinyPNG
to reduce the file size for maximum optimization.
We want to maintain a decent resolution and quality for the web.
One of the cool things about Adobe
XD is you can take your wireframes and easily create a mockup.
Now that our file is open,
let's zoom in on the first artboard by clicking on the artboard.
At this stage, you could have some real text in the mockup
to give that genuine feeling of a website.
The lines that we have as placeholders for the text can be replaced
with text boxes or title headers.
Everything else, such as boxes, can be replaced with
images or other assets from our folders.
The first thing I will do is bring my background image to my placeholder
box on my mobile landing page.
I can import the drawing.
But the simplest way is to drag the picture right into the box.
The image may appear relatively light.
We had changed the opacity of the grey placeholder box
when we created our wireframes.
Select the image and crank the opacity back to 100%
on the control panel's right-hand side.
If I want to delete the X in the placeholder image,
I need to select and delete it.
It appears I can't.
And it's because the image is on the top layer of the artboard.
To do so, make sure that you
select the icon and not the name.
In my layers panel,
select the line layer and right-click delete.
And should remove that line.
I mentioned a few seconds ago and said that
the main image is the top layer.
Well, we need to bring in the logo and
replace the existing placeholder on my wireframe.
But, it's on the bottom layer,
so we need to move the logo above the main background image.
Select the layer and drag it above the background image.
We can delete the logo 'X' lines too.
We need to bring in the logo and
replace the existing placeholder on my wireframe.
We can also adjust the image size by
taking one of the corners' masks to resize it.
Make sure you are on the correct layer to do so.
We can adjust images within their containers by double-clicking the image
and moving the image into place.
Click on the outside of the image to deselect it.
The background image is off a bit.
We can adjust images within their containers by double-clicking the image
and moving the image into place.
Click on the outside of the image to deselect it.
For the rest of the mockup, apply the other assets,
colours, and text to be included in your mockup.
Try to make it as realistic as possible
as we would be showing this to a
potential client for additional feedback.
As always, please feel free to leave any comments or 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!