4. Create Wireframes for Two More Screens

In this video, you will create wireframes for two more screens of the app you chose.

Then, you will search online and insert a phone image to make your wireframe look more realistic.

A UX designer will create wireframes for all of the screens that a user sees when they perform actions in the app.

Depending on the app, that could be a big project!

You will only sketch wireframes for two more screens on the next two slides in your presentation.

Depending on the app you chose, the screens might have a lot of buttons, images, and text.

Choose at least five of these elements to add to the wireframe on each slide.

To begin, copy the large rectangle from the first slide and paste it onto the second and third slides.

You can rotate it if you want to show the app screen as horizontal.

A user might hold the phone horizontal to watch a movie or to play a game.

Next, center the frame on the page to keep your slides organized.

Then, enter text boxes, arrows, lines and any other shapes to create your wireframe of the second screen you chose.

Use the align tool to center shapes, or drag the shape and use the red lines to help you align the shapes.

Remember to keep it simple.

This is only a sketch of what the app will later become.

If there are multiple buttons that will look the same on each screen, use copy and paste to help you work faster.

Then, move onto the third slide to sketch a wireframe of the last screen you chose.

When you’ve finished creating your wireframe for all three screens, return to the first slide.

Next, group all of the images on the home screen so you can move the entire wireframe around the screen as one image.

Then, move the wireframe to the side of the slide.

Next, search online for an image of a phone.

Adding a phone image to your slides will give your wireframe the appearance of a real app.

Make sure you have the right to use the image.

Add the word “transparent”

to your search so the image you find will not have a background color.

Then, insert the phone image.

Next, move the wireframe on top of the phone image.

Bring the wireframe image to the front so it fills the phone screen.

Then, resize the phone image and the wireframe so they line up.

To keep the image the same shape, be sure to resize it using the corner of the image.

Resizing it from the side will stretch out your image.

If you make a mistake, you can undo it and try again.

Next, center the phone image on the slide and adjust the wireframe as needed to fit it within the phone screen.

Repeat these steps for the next two slides to place your wireframes inside the phone image.

Finally, view your finished wireframe as a slideshow.

The slideshow will present each slide to mimic moving to the next screen of the app.

Now it’s your turn: create wireframes for two more screens of the app with at least five elements on each slide, group each wireframe, insert a phone image from the web, arrange and order the wireframes and image, and view your presentation as a slideshow.