From the course: Visio 2016 Essential Training

Explore wireframe diagram stencils

From the course: Visio 2016 Essential Training

Start my 1-month free trial

Explore wireframe diagram stencils

“

- This next chapter we're about to explore is specifically targeted to those who are involved in software development. Quite often when designing a user interface or parts of a user interface, you want to create a prototype and you'll use a wire frame diagram to do so and that's what we're going to explore in this chapter. Beginning with starting our brand new drawing. So, you can close up anything you have open, you can save your changes if you like. When you arrive at this blank screen, like I have here, you'll go up to the File tab, go down to New, with it highlighted, we'll click Categories, up here, near the top. Next, as we scroll down, you'll see a category specific to Software and Database. Give that a click and from here we'll scroll down because there's one that's going to help us with creating our prototype user interface, Wire Frame Diagram. Give it a click. We'll keep U.S. Units selected by default and click Create. So this creates the brand new, blank drawing. The first thing I'd like to do is turn my page on its side. Let's go up to Design and from here, click the Orientation drop down and choose Landscape. If we're designing an entire user interface like the one we're looking at, here, in Visio, you can see it's typically wider than it is tall so switching to landscape orientation might be a good idea. Next, you're going to notice, over here in the Shapes pane, a number of different stencils and these all come with wire frame diagrams. Scrolling up to the top, you'll see Dialogs. Give it a click. Dialog Forms, Application Forms, and then you'll see buttons and status bars and scroll bars and so on. You'll also be able to create tool bars, menu bars, drop down menus, you can see the items that would appear on those are listed down below like Open buttons, Save buttons and so on. We also have controls that can be added. Lots of different buttons and check boxes, radio buttons, etc. There are cursors that can be displayed in your wire frame diagram. Common icons like Back, Forward, Collapsing, Removing, etc., and web and media icons, as well. If you're designing a user interface for a web page or something that will appear over the web. Well, we're going to scroll back up to the top and select Dialogs and let's say we want to design a brand new Print dialog, this is what people will see when they go to print something in our new software we're developing. So, in that case, we go to Dialog Form, click and drag it out onto the page, and release. Now, this is a shape that we can go to the handles to click and drag, like in the bottom right hand corner, to stretch it out. Maybe I want it a little bit taller. We can go to the middle handle on the bottom and drag that down. And now with the four sided arrow, we can just position it somewhere near the center of our screen. Click in the background and let's zoom in to the top left corner by holding down control and shift, you can click and drag, so you zoom into that corner to see that's where the Dialog Title goes. We'll double click to get inside and type Print. Click in the background, we'll zoom back out to the entire page, here, by clicking Fit Page to Current Window, and we have the first part of our new wire frame diagram. It's actually a container that will contain other elements that we'll start adding in the next movie.

Contents