Create a wireframe for a mobile app

- [Instructor] When those who design the user interface for a software application want to bring that application idea to life, they might use a Vizio wireframe. It's a visual model of an application's user interface that's kind of like a blueprint of functionality and content. To get started, you can use Vizio to create what's called a low-fidelity design sketch to help form the basis of an eventual high-fidelity wireframe. You can even create a wireframe for a mobile app now, which is what we're going to do by going up to the file tab here in Vizio and selecting new. Next, we'll scroll down to categories and select it, because we'll find wireframes in the software and database category. Go ahead and select it and then scroll all the way down to the bottom to see the wireframe options. We can do it for a software application, for a website, and there it is: Wireframe mobile app. Select that one. Here we have some options. We can start with a clean slate or we can get a headstart with different types of wireframe diagrams for mobile apps. For example, we can create a list wireframe diagram. Here's one that's good for media. And maybe you're setting up a user profile. User profile wireframe diagram will help you get started with all of the different containers and controls you might use when setting up a user profile on a mobile app. Let's go though with the blank slate here. We'll click the first tile and click create. Notice what happens down the left-hand side in the shapes pain. We see a number of mobile options, like cards and containers, controls, navigation, text, and annotations, there's media and media icons, all kinds of things that we would use in a wireframe for a mobile app. But we're going to start with cards and containers. You can see at the top, we have a number of different containers that would represent some of the different types of mobile devices. For example, phones and tablets. Let's go with the 3X2 frame. We'll click and drag it out onto the page. When you see those guides appear, showing you that you're centered vertically and horizontally, release. Puts it right in the center. Next, we're going to add inside the container now. Let's say we wanted to set something up that would allow people to go in here and add their contact information. There's a contact information card here that we can now click and drag inside the container. Look how it fits nicely. When you see that green border around the outside, release. Let's zoom in to see what we have so far. You can click and drag the slider on the zoom slider down below to zoom into around 66%, for example. You can see the top of our device, then you can see on the screen, we have the contact. You can see the fields that appear in there on this card for the name, phone, email, and even an area to add text. If we wanted to add anything else, for example, mobile controls, you can see, here we have a number of different buttons and combo boxes and so on. Let's say we wanted to add one of those hamburger icon buttons. Well you could go within the icon or to the button, click and drag it over and drop it in here if we wanted to give people options, and this of course, clicking it, would display a number of menu options. If you don't want something that you've added and it's still selected like we see here, hit your delete key to remove it. So that's a quick intro to creating wireframes, something that you can actually do for mobile apps now. If you design user interfaces for software applications, websites, or even mobile apps, remember, Vizio has templates, stencils and all sorts of containers, buttons and controls to help with the creation of that initial low-fidelity wireframe representation. We'll close this up, clicking the lower close button in the top-right corner, and click don't save to return to a blank screen.