Adobe XD Advanced: Mobile App Design

Name: Adobe XD Advanced: Mobile App Design
Author: Jessica Henley

Learn how to build app wireframes and create app pages

Preview the first lesson free — get full access to all 3 lessons.

Course: On-Demand

Hello, my name is Jessica Henley, and in these lessons you will learn mobile app wireframes and custom app design. Getting started with mobile app wireframes, here I have an iPhone 14 Pro Max. However, on the home page, there are several sizes to choose from. Other sizes include iPhone 14 Pro Max, 430x932, iPhone 14 Pro, 393x852, you also have iPhone 14 plus, 13 Pro Max, and 12 Pro Max, which is 428x926, and you have other sizes as well. Notice that this also includes 11 Pro and Google Pixel 7 Pro and 6 Pro and iPad 768x1024. This is the size that I'm using, which is iPhone 14 Pro Max. In this lesson, starting with the wireframe, I'm going to lay it out with a couple of shapes. I'm going to be creating a travel app. So here, I'm going to head over to the rectangle tool or tap on the letter R. And from there, I'm just going to create my design for my wireframe. So here I have the top, and now I'm going to go ahead and head over to appearance, and change the fill color to a gray color for the wireframe. Next, I'm going to create another rectangle for the logo, which will be in the upper left hand corner. I will leave this white for now. Next, I'm going to use the ellipse tool or tap on the letter E. And I'm going to create another symbol here, which represents a profile button. And the title will go here on this top banner. For the title, I will use the line tool. And I'm just going to go ahead and click and drag, switching over to select. I can then change the size of this line by heading over to appearance and changing the size. So for now, I will go with the size eight. And I can also read position the actual path of this line. Next, I'm going to go ahead and duplicate this actual line. So right click copy, right click paste. Let me go ahead and move that off to the side and select the line again. So with the line selected, right click copy, right click paste. Now that we have two lines, I'm going to go ahead and pull that down and resize it. So this will represent text underneath the title. And I'm going to copy that so the line size is the same by right clicking and pasting it. And I will paste that again and pull that over. Three should be fine. And I also want to go ahead and duplicate this main line again. And this will be a similar layout as the website. So I'm going to copy that and paste it. Now that it's pasted, I'm going to pull that over. Next, what I want to do is go ahead and create some squares. Clicking on the rectangle tool, I'll create my first square. And I'm going to go ahead and change the color of it. These will actually be the pictures that will be on the app. Next, switching, making sure I'm on the select tool, I'm just going to right click copy. Right click, paste again and pull it over. And selecting both, I can hold down shift to multi select or I can click and drag. And I'll just go ahead and right click and paste those items down again. So here I have my four icons and I just want to click and pull this down just a little bit. And I'm going to change the line thickness of this line underneath the border. I'm going to go ahead and try five. Great. So next, what I want to do is create a button on the bottom. So on the website, we had a book now button with a discount. And if this is marrying that, but just creating an app for a phone, we're going to do the same thing. But we're going to put that information towards the bottom. So doing so, going ahead and starting with the rectangle tool and clicking and dragging to create that button. And I definitely want to round out the corners. Next I will go ahead and change the color. And some text will definitely go inside of the button. So I will switch to the selection tool and copy and paste that over. So this first wireframe is done. I'm going to go ahead and copy and paste over to create two artboards. Now the second artboard is when you actually click on a photo, it should actually give you more information about that location. So I don't need all of that. So I'm going to delete some of the things that I don't need. So this is a homepage and this is going to an information page based on one of the travel sites. So I'm just going to delete that and readjust that. I want to see more of the photo of the location. And there will most likely be where you can swipe with your phone in order to see more pictures. So I should copy this and paste it so you can have more buttons in order to see more photos because I don't want to add more photos because there should be information text below. So I'm going to go ahead and copy and paste that and paste it again. Now I want to select, hold down shift to deselect the background and center that. Great. So this text right here will have the name of the location. I'll keep the logo here as well as the profile icon. I'm a hold down shift to multi select again. And after I multi select, I'll go ahead and pull that up. And there should be some text here filling up this portion. I'll keep this button here for the book now. So next what I'm going to do is I'm just going to head over and use the line tool and make some lines that represent text and almost done. So going ahead and pulling some more text over just like that. So let's do a quick recap of what we have. So both the homepage and information page still contain the logo in the upper left hand corner in the upper right hand corner. We see a profile icon. We can even add a search button if we wanted to. So I think I will go ahead and use another symbol to represent the search. I will use the polygon tool or you can tap on the letter Y. I'll just draw a little symbol that represents search, which will be replaced with a search icon later. I want it to be the same size, so I'm going to copy and paste that over. Great. Both have pictures. This shows multiple locations, both have a book now button and both have text. In the next lesson I will discuss custom app design. Thanks for watching.

Advanced Provider : Jessica Henley 3 Lessons · 25m in English

Course Description

In these lessons, you will learn hands-on techniques for how to use various tools from the toolbox to create custom designs for your upcoming mobile app wireframes. With these essential skills, you can take the knowledge that you’ve learned to create a variety of designs for your stakeholders, team members, and clients.

By learning how to brainstorm effectively through wire framing, you can communicate your ideas to others so they can see the overall vision for your app and work together to make beneficial changes for the customers you serve. You can also take those ideas and present them to your developers who will then give you even more feedback on how your designs will coincide with code to make your app more functional. We will take the wireframe design you’ll create in these lessons and use it for inspiration in our custom app design for a travel theme. Then you’ll add images, block out text areas, and place icons and buttons to create a travel app.

What You'll Learn

Use various toolbox tools in Adobe XD to create custom mobile app wireframe designs
Brainstorm app designs effectively through wireframing to communicate your vision to stakeholders, team members, clients, and developers
Create custom layout designs for a variety of stakeholders
Develop a wireframe into a full-fledged app
Build a custom travel-themed app by adding images, blocking out text areas, and placing icons and buttons

Key Takeaways

The course teaches hands-on techniques for using Adobe XD toolbox tools to create custom mobile app wireframe designs.
Wireframing helps communicate app ideas so stakeholders, team members, and clients can see the overall vision and collaborate on changes.
Wireframe designs can be presented to developers, who give feedback on how the designs will coincide with code to make the app more functional.
The wireframe created in the lessons is used as inspiration for a custom travel-themed app design.
Building the travel app involves adding images, blocking out text areas, and placing icons and buttons.

Frequently Asked Questions

What will I learn in this course?

You will learn hands-on techniques for using various Adobe XD toolbox tools to create custom mobile app wireframes, how to brainstorm app designs through wireframing, how to create custom layout designs, and how to develop a wireframe into a full-fledged travel-themed app.

Who is this course for?

It is for people who want to design mobile apps and communicate their ideas to stakeholders, team members, clients, and developers using wireframes and custom designs in Adobe XD.

What lessons does the course include?

The course includes three lessons: Mobile App Wireframes, Custom App Design (Part 1), and Custom App Design (Part 2).

What skills will I gain from this course?

You will gain skills in Application Design, Wireframing, and working with a Photoshop Plugin.

What project will I build in this course?

You will take the wireframe you create and use it as inspiration for a custom travel app, adding images, blocking out text areas, and placing icons and buttons.