Rapid Wireframing: Finding the Right Product Design | Michael Angeles | Skillshare

Rapid Wireframing: Finding the Right Product Design

Michael Angeles, User Experience Designer

Rapid Wireframing: Finding the Right Product Design

Michael Angeles, User Experience Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (51m)
    • 1. Course Trailer

    • 2. Project Brief

    • 3. Using Balsamiq

    • 4. Initial Concepts: When it's really a sketch

    • 5. Diving in to Wireframing

    • 6. Working with Alternate Versions

    • 7. Linking

    • 8. Getting Ready for Presentation

    • 9. Creating Smartphone Versions (Optional)

    • 10. Some Final Thoughts

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn how to successfully create wireframes for early stage product design with interaction designer Michael Angeles, as he shows how to use Balsamiq Mockups to design interfaces with product teams. Balsamiq runs on the desktop or in a web app, and also as a plugin for Google Drive, Confluence and Jira. 

In this 51 minute class, you'll see how concept selection can be tackled with low-fidelity wireframes, learn to create rough sketches to explore ideas, and then transform them into interaction design solutions that can be refined quickly, and polished for presentation. The class is perfect for product managers, developers, and those new to designing with wireframes. No prior knowledge or experience with interface design is required. By the end, you'll be able to present wireframes for a finished product idea and demonstrate a clickable prototype.

Meet Your Teacher

Teacher Profile Image

Michael Angeles

User Experience Designer


I'm a user experience designer at Balsamiq, where I help product developers, developers and designers make awesome stuff. I also publish the Konigi blog, where I talk about making stuff. I live and work North of the San Francisco Bay area.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course Trailer: most products startups fail to successfully designed products these days means finding the right ideas to pursue among the many bad ones you may come up with failing fast is an effective way to do that. And for product teams, working in low fidelity wire frames makes it easier and cost effective to throw out the bad ideas sooner until you create the right ones. This way of thinking is taken from the approaches described by product development leaders like Bill Buxton talking about sketching user experiences and Erik Reece talking about the lean approach in software development. We'll tackle interface designed with this wisdom in mind. Hi, my name is Michael Angeles. I'm one of the user experience designers at BALSAMIC. We make the tool that's going to be used for this course on rapid wire framing. It's an app that has little to no learning curve, so you'll be generating ideas the first time you use it. And it's really made for this idea of failing fast and generating a lot of ideas Until you find the right design. We're going to do some rapid interface design using wire frames and you'll liberate them with gold. Representing a polished project deck. We'll start by looking at a project brief to define what we're going to design and jump right into wire framing the interface. Now that you know we're going to do, let's get started. Next up is the project brief. 2. Project Brief: Okay, so we're ready to go, and we need to knew what our project is, what our requirements are before we start working on our project. So for the this course, we're going to use the U. S. Apprentice site as the basis for our requirements. Now, Europe's Apprentice is a an introduction to user experience design that we created with two recent deals. Help Theresa is your experience design consultant to has written to O'Reilly books on mobile design and design patterns, and she used this case study for a client in the Austin, Texas, area. It was a restaurants that serve Japanese casual food. And with this as the basis for this site, we have a look at some of the user research that was done. The strategy work in the actual design. You'll see a lot of the user research that was done. Stakeholder interviews are referenced here as well as a customer research to see what the flow through the restaurant is, and you can look at some of the tasks that were performed to gather this information, and from there, a set of documents were created personas to describe who the customers were. Customer journey maps, which described their experience going through the restaurant and ordering and what some of the pain points were or the difficult parts of the service. And if we scroll down further in the page, will see a little bit more information about what the client is looking for in terms of serving the customer better. So you can open up the personas, for instance, and see the description of the types of customers of the restaurant and what kinds of things they're looking for when they go in order. Food. How the experience the service there so personas are one type of document that helps to inform the decision making process when thinking about the design. And then there's also a diagram of the journey map, which describes all the touch points as a customer is going into the restaurant ordering all the way through to leaving the restaurant. And there's a little happiness indicator of the top, and you see the points where improvement can be made, and this is the area that we're going to be looking at in terms of what we can provide as an app. Teoh improve the experience with the restaurant, so if you jump through, too. The strategy exception. You see more tax that were performed to help come up with a concept for what the Web app should do. And in this case, we want to just jumped to the story ward, which really describes the ideal situation for what this app should provide in terms of improving the experience. And the whole goal here is really just to get customers out of long lines and worrying about you are getting blocked by customers in front of them who are having a difficult time or a long time trying to figure out what's order and get the customers seated, where they're going to be served and where they're going to to eat so that they conscripts , the more painful parts of the process. So this storyboard kind of just describes that ideal scenario, and this is really the basis for the design concept, and we're gonna be using this Teoh describe and define what we're going to be building in the interface for our Web app. So this is the basis for what we're building in the wire frames for this course, and you can use this as your project brief as well to create your own project. Or you can use your own product idea to create your own more frames. But for the course, we're just going to use this concept to just keep moving forward with our project. Okay, so now that we have an idea of what we're gonna be building next up, let's look at key concepts for using balsamic. 3. Using Balsamiq: all right. So you should have balsamic downloaded to your Mac or PC now and installed, and you can launch the toll and we can get started on your wire frame. So first we want to go over some key concepts. You open a new project when you launch the tool and we'll get take a look around in a moment. But first, I just want to remind you of this idea that we introduced in the intro about failing fast because the tool is really optimized around this idea of adding these rough controls to your to your wire frame as as fast as you think through the problem. And the the idea is not to be fussy, but Justin get things out there really quickly to come up with each idea as you go and, you know, come up with variations and new ideas. You're exploring all the possibilities. So that mind, let's take a look around the tool and you'll see that there is a tool bar across the top. There is a ribbon across the middle with our you I library and our two panels on the sides . On the left is our project browser on the right is our inspector panel. And in the big area, in the middle of the white area is your canvas, where you're going to be adding controls. Let's go up to this toolbar. You see, in the upper left, there is a title area. If you double click that, you can rename the project. So just say, skill shared demo for this one, and then that should be the basis for the project when you save it. So we're gonna save. It's a good idea to say the project right away, but you know what the name is cause you'll have this auto save going in the background as you work. So we save this and you see the title for the project shows up in the title bar. Now the icons in the upper left have different views you can switch between. So this little menu here will switch between the mock ups is the main view you're gonna be using That shows this left panel, um, with thumbnails of the wire frame that you're on. The assets view will show you your images, any custom icons you might add, or files even binary files like pdf's or design cops can be put in here. Symbols panel is where you're going to find your reusable symbols. Libraries. Trash will show the mock ups he might have deleted, so you can restore them in the future case, he didn't really want to lose them. The, um, tool the icons here for the navigator, Kentucky Gle, the left navigator on her off. And the grid view will just give you an overview of the thumbnails in your project. So the plus I guys what? We used to create new mock ups, I'm gonna like, like toe the plus here. And you see a new mock up appearing in the project browser. If I deleted this one now by selecting moved to trash from that context menu, it shows up in the trash, and you can go toe restore it or deleted permanently. The middle of our till bar has, um, edit icons that we'll cover later. There is input for quick ad, which will also cover this icon here will toggle the you I library ribbon on and off. That's the big ribbon across the middle, and the I inspector appear switches between our mock up inspector or our control Inspector . If you added to control here and you can see the properties for this button, you can talk a lot both of these things off. So if we had had high them there, you have more space. And the last panel here on the right, is our project informations liking that will let you at notes about your project. You can also switch between the sketchy rough skin and the more polished wire frame skin, and this affects all the wire frames in New York Project. There's also a default font you can select for the project fund size as well as the link color and the selection color. Okay, the last I count on the right is for full screen presentation mode, and we'll get to that towards the end of the course. This just shows a full screen view of your mock up without any of the tools in the interface. So now I'm gonna show you a few different ways of building up a wire frame. We need the U. Y. Library first, and if we have the you lie library in view, you'll see a button bar at the top that has categories of controls selecting one of them will filter that set down. So we're gonna select forms and build a log in form for this example so you can just scroll through the controls here and double click or control once you find it. So we're gonna add a field set. We got a text input, a couple text inputs as well, just by double clicking. Those could also just drag things right from the library. So here's a button I'm going to drag in and then position. If I select all these controls I placed and right click here, you'll see options for aligning and distributing. So I'm gonna line everything left and then space them out vertically. And now I'm going to just hold a shift or command to de select one of these controls the button, and then I'm gonna resize the inputs. And that's how you use, uh, the U I library to build up a wire frame. So now we're gonna hide the library. It's also hide the project information on the right panel and hide the navigators. This is a more focused for you here. We're going to switch to using quick add to build up this form. So if you select slash or click the quick ad input in the upper right to put that in focus , you can start typing to look for controls and add them to your canvas. So let's start with the typing field set here or the first few letters, and they will get the text. Input will add that a couple times and then, lastly, will add a button a little bit faster. If you're the type of person who likes to type rather than Teoh visually go through the library, do the same thing with our right right click here to space these things out vertically. And then we can also do that from this alignments menu in the toolbar command. Click here again. I can resize just the two inputs. There you go. There's our log inform built just using the quick ad control. You also noticed if I moved things around that this little smart alignment guides will show up, and that should make it easier for you to snap things in place without really having to think about being too precise. But it will help you so that you can get some, you know, alignment, work down. The last thing we have is this quick draw mode. So if I hold the r key there while clicking and dragging, what's gonna happen is that we're drawing rectangles. So this is a great way to just sort of quickly layout parts of you. I and all you're doing is putting a placeholder. So put in a two inputs on a button here by using these boxes. It's a bit like sketching something out on paper. There are other a few other modes for a quick draw. But the basic idea is that you just draw rectangles. Then he selected control and then you type control T or command t on a Mac, open up this transform dialogue What I've just did there was I converted the rectangle to field set. I'm gonna do this for each of these boxes. There's gonna be converted to a text input and lastly, I converted the last box into a button. Last thing you can do here is you condone Marquis, select a bunch of controls we place here. So I'm gonna just hold down the shift key and then click and drag to select all the controls here and then from the menu. I can select, Edit group or use the keyboard short but shortcut Control G or command V T group that set of controls. This way you can find all these controls together into one group and then move them around as one piece. If you open up the inspector, you'll notice the group now is what's being shown here in the properties inspector. And there is a property called name. And this is one way to use this group is to convert it into a reusable symbol. So once I have this log in here, I can, you know, give the name log in. And if I do a quick add search for a wagon now that's gonna show up as one of my controls. It's like the U Y library and then select symbols. You'll see that the log in is also in our symbols category now, all right, so that covers are key concepts for using balsamic mock ups, and the next thing we're going to get Teoh is really starting to design our project, and we're gonna talk about the initial stages when you're really kind of working on a sketch and then deeper into detailed wire framing after that, so we'll see in the next section 4. Initial Concepts: When it's really a sketch: Okay, So I'm ready to start wire framing and created a new project here and titled it Zen app. Saved it. So we have auto save going. Added a first page that has an application map. So this is just basically an overview of the screens we're gonna design. This is a first release of our minimum viable product is going to clear just our landing page, the menu and adding items from the menu, modifying them perhaps and then adding them to the car. Been paying. So all the yellow stickies air What? We're going to design the great ones we're gonna do later in another release. So we're gonna cover that here. So to get started, I want at our first wire frame to do the landing page and use this new mock up icon at the top. Do we have a blank screen here? Now all we're gonna do is sketch out the first page. So we're really kind of thinking through the design here, so I'm gonna put in just some boxes, the view port. So this is gonna be, ah, landscape view, something to get 800 by 600 and we're gonna have a persistent menu at the top, so I'm gonna just create a box using the R key and clicking and dragging to draw that rectangle. He's another quick ad for the logo, and let's do another quick withdrawal, rather it for the menu button on the left and the carts that will appear in the top, right? I'll have a welcome message in the main part of the screen song and hold the Y key actually here and do the title. Quick draw. Hold the tiki just a drop in a block of text placeholder. That should be the intro or instructions, and the right here could be our specials. I'll put a subtitle above each one using the Y key and quick drawing here again, one for each of these blocks and just kind of tweak the spacing a little bit. Center it so this is good to go. I'm gonna start to transform now the the outer parts of our wrapper. So we wanna have a button that says Menu in the upper left on Rename That and then bumped the size up a little bit. Don't even icon. So just a bump the size up to 16 maybe here and let's see, our logo will just use a title for now, Control T or command he and Mac to transform this to title and to rename it Zen Hold Shift in Arrow up to nudge it good and well, dio icon and label here for our cart. So let's type I come to transform this icon. It's like that kind of label, you know, change this to say cart with zero indicator to start and left. Align the icon. Look for the card icon in the icons search box, Nudge it down a bit and size on Put it. I wanted our Tweedle linemen around here and this looks decent. So let's turn this into a control we can use in all of our wire frames. Gonna select the header here in the View Port and group this So have all that selected. I did not select the text blocks and go to the Edit menu and select group Turn Blue here so that we have a group selected. It's making a symbol, so I'm gonna use the Group inspector under the name area and type in APP template and converted to symbol turns green to show that we have, Ah, symbol there. And if I go to the oil library shows up and quick ad should show the app template as well rename this wire frame landing. All right, so the next thing we're doing here is we're gonna design what happens when you tap that menu button, click or tap. So let's see. What should happen is an off screen menu should slide. And so let's create a new view here with a clone landing page and rename this clone menu. So what we want to do is show that this many but NUS selected So let's at its just override this symbol and just change the state of the menu button for this instance. So we double click the symbol, they selected the menu item and we changed the state property there. All right, so it's added list control. This is gonna be our slide in, and then you that comes from the left of screen. And Rina just we could resize this here. I'm holding shift, uh, control Alz and Arrow King. You can also use the handles, you know, change the font size and make an alternate road color here. And let's see skewed a little bit of height. Have a text file with our menu items, So gonna copy that. Pace it into the list. All right. Looks decent. Design here should probably be that our first menu items, we should always have a menu items selected, and we'll have a wider menu here that shows the items underneath that selection. So it's select sides from the inspector and then put it in another panel. So this will be the sort of sub menu for the selected item. Penhall will be populated with each of the sub items, and that's draw a picture of each item. So this is, Ah, an image of the first side that I'm drawing here and kind of put a label in there. And I know the first one's called at a Mom May 1st, let's transferred image. Okay, we have a good place holder image and let's let's see, center that one and put in an imam A and variation have the first item of ah horizontal rule to separate each item. Put that right underneath this guy. All right. Good. So I could probably group this and duplicated a bunch of times, and then I will just go ahead and rename this guys. All right, so we're back in. These guys were renamed because they're all the sub items undersides. And the idea now is I want to show what happens when you click tacos. For instance, I cloned that wire frame, made a new one, renamed Tacos. Let's show the selection for this wire frame as tacos. And let's just go ahead and change all the names of these items to have talk of names, right? I went ahead and filled in all the names here. So here's what Here's our sub items showing tacos. And now the idea for this next part of the flow that I wanna create is that you selected one of these like this Chuck Norris chicken what'll happen is the landing page, with all the menu showing changes to stick to a new view for a taco. So let's see, is the symbol for the app template and create a new wire frame here. All right, so we have our basic set up. Now we have our landing page. We have figured out what our menu is going to look like and how it's gonna work and the next section, we're going to start filling out the wire frame for one of these sections were going to tacos, and we're gonna figure out the detail screens for ordering a taco, and then we'll go on to looking at the cart. 5. Diving in to Wireframing: Okay, So at this stage, we have our initial ideas for the landing page in many system. Hopefully, we got some feedback and maybe tried a few variations on those. But now we want to get a deeper into the tool and learn how to lay out the controls while we explore the concept in detail. Now, I want to emphasize that when I say in detail, we're just we're really still working rough and fast here. We still want to just kind of not work with too much polish. But get the ideas out fast so that we can get feedback and, you know, generate more ideas from there. Let's start with this tacos page of the idea from the last green is that we navigated two tacos and we got to this section of the menu listing all the tacos that are available to order. So I'm gonna do this. This concept is that, you know, this page is a bunch of cards you consume white through. And, you know, the card that you're looking at is large in the middle, kind of like cover flow. So I group those two and then I selected the crop icon to just crop the the two previous and next ones to show that they're kind of peeking out of the sides of the view pork. And now you're gonna walk the app template and the cards and back so that we can work on the main card in the middle. We're gonna drop in a bunch of circle icons just to show the number of items you can paginated through here. All right, so now we can start feeling out the layout for the single card here is going to drop a couple controls text control. So the subtitle is gonna be the name of the taco, The little label on the rights going to be the price. It will icon to show the how spicy or this is a spicy item. And then little paragraph of text text control below that that we're gonna car description into. All right, so this is like indecent Cool little feature of the paragraph for text control. Here is if you type Laura, um will automatically drop in some placeholder text for you. So if you don't really want put in a lot of real text for now, you can use that we drop an image of the item below. So I dropped Ah, image control in. I'm gonna browse for the image that I want to use and let's see if it into the size of the box I drew. So if I criticized will go back to the the aspect ratio and I can use this little sketch it I check box in the Inspector, which is a cool little thing that will make a photo, have a black and white look like it's hand drawn and last I can start to fill in the controls to modify this item. So this is if you want to do you are substitution Czar holds. You want to hold onions or something like that? That's gonna be button to get there, and we're gonna add a little stepper control. So this is just going to be a black a plus minus icon or button so that you could add, you know, two tacos to the order rather than just have one. So which is gonna drop a couple buttons in here and a little text area in between? The chose how many tacos you added to your order. All right. So jumped ahead a little bit here. This is the text area that I put in back that I'm gonna center and, uh, place ah one into showing the number of tacos I there duplicate the modify button to add the order button below it and change that to be selected so that it stands out a little bit more. Now, I'm gonna clone this takas page, and I'm gonna work on the modify your order screen. So the idea here is that I'm gonna take everything from this layout, remove description, and I'm gonna put in a form in the middle to show you know how you're modifying your order at the top. I'm gonna put a button bar in with all the different things you can do to modify the order . So the button bar has takes a a list of comma separated values and then converts that into a button bar or segmented control here with a selection shown so below were doing the hold items here. So below the button bar, I just added the checks check box group and here we just take a couple of brackets for to add a check box. If you put an X inside the brackets. It'll show that item checked. So you had a bunch of text there and I was gonna lay out the buttons on the bottom. One of them's gonna be for canceling that change. And the other one is to say that you're done with this change and the cooking done or cancel should drop you back into your the other side of the card that a regular description of the item Have you clicked? Order here. You would get the cart. So we're going to his clone this view again and drag it to the bottom here. And we're gonna rename this taco at its cart. And the idea now is that a pop over should appear under the cart. So I'm gonna go to the IOS, controls here and add a pop over resize it. Put the arrow for the drop down a little bit to the right. So it's right underneath the cart icon. And now the order should appear in this pop over. So this is what you would get if you had just place that taco into your cart, you would see your order. So I'm gonna use the data grid control, which is a great control. If you just want to have texting columns, it takes this comma separated values with line returns. Liner turns will add new rose to your table and the Commons will separate the columns for your table. If you want to actually use comma in one of the one of these cells, you just do a back slash before there the text so high the border hide the border in between the columns and ahead the row and take out the alternating road color here for no. And I'm just gonna lay this out a little bit, puts, um, horizontal rules above the sub total. And you know, it's kind of tweak the layout so it will fit nicely into pop over panel. Alright, jumps had a little bit. Now I need to just sort of put the the action here so the button will lose you, Teoh sending these items to the kitchen, which is basically, you know, for submitting your order. All right, so that's pretty much done. And I'm gonna cloned that screen so that I could work on the pop over state when you have started to submit your order. So the car would just show you the items added to the card, and then you would click a button that, you know, now shows that you're sent your you're gonna submit your order, so I'm gonna add a little pop over. That shows little state change here. So the the order in the cart appears and the button's changes to charge my card. And this is what you would do to now finalized the order. So we're gonna add a few buttons here for charging my card. And then the one on the left is we had a future feature to split the check. So we're gonna add a little placeholder there for that function. And then I'm just gonna I think that, you know, we could probably clean up this cart and remove more of the content there and just simplify it. So that's what I did there. I'm gonna do the same thing for the added to cart state in the pop over. Now, that's little cleaner. The final step here is that when you charge your card, you jump from the view that you are on to a payment page, and this is just gonna be a bunch of forms. So this one will be, um, you know, formed into your your name and your credit card information. And then once you have selected, fill that out press pay, you would go to a new page that has confirmation of your order, and later on we could we would figure out, you know, return orders, return customers and that sort of thing. So now we've gone through a full pass of designing all the screens that we identified for this app, and we could probably spend a little bit more time, you know, reviewing with the team to see what's missing and do more iterations to come up with different versions of screens that we think might work better based on feedback. There's a cool feature that I'll talk about in a minute about using the alternates feature to do this sort of thing. So we'll touch on that in the next session. 6. Working with Alternate Versions: Okay, so I keep talking about this idea of making variations of your screens based on feedback or doing it orations and changes based on feedback, because you want to generate as many of these different versions as you can just to see what all your alternatives are. So there's a feature in mock ups called Alternate so you could right click or click drop down our next Teoh a mock up in the Navigator and look for this. Create alternate version menu item. There's also a panel of the inspector panel has a sub panel here that has alternate versions you can use if you press the plus icon here. So if I select that it creates an alternate version here and this way, you don't destroy or delete the previous versions. But you can create multiple versions of a single view or single page based on reviews design reviews you have so you can double click that and then give it a new name based on whatever you know, the name of your review was or the name of feature change waas or you leave it. These are generated alternates, so you can just keep continue to keep making new alternate versions here. And so what? The way this works is that you could make a change here, So maybe I just change. You know, maybe we have you have added an image or something. Teoh this screen or we change the background of the view. So let's make a change here That's visible. Just gonna change this green color just, you know, just to get to make a visible change here. So now we have the ultimate version that I just worked on. And then you can switch between alternates using the subtitle here there is the official version that we had and the officials of the 1st 1 And then, you know, you can also use the drop down next to the market name there. Once you're happy with the changes, you could promote your alternate to official. If you had another review of all the variations that you worked on and doing that would move the the the alternate up to the official one. And now you know, we have this without the alternate name underneath. And once you have a bunch of alternates for a mock up, you'll see a little icon appear next to their It's still let you know that you can look at previous versions of that page. All right, so I'm going. Teoh also point out that there's a drop down for the panel. And this way, if you have alternates on multiple screens, you could switch them all to the official versions. If you're looking at a bunch of alternates and you know that could be done for all of the mock ups in your project. All right, So last thing is, you could merge something. So if I have, let's say another alternate here and then you can make this one this crazy red color and the drop down here you might have noticed before has another menu it this has merged with Official. So all this basically does is let you, you know, see the official version with a copy of the alternate so that you can select parts of the alternate that you want toe blend in with the original one, or, you know, if you only want to take changes from the from one of the alternates. So I'm gonna put this send this back, Teoh official and then last thing you can do is you can either clone or discard alternates if you don't want them anymore. All right, so that's, Ah, one little feature that you can use while you are making multiple iterations, multiple versions of each mock up, and this is a great feature for using with after design reviews. And next up, we're going to look at linking these wire frames together so that you could create a clickable prototype. 7. Linking: All right, So now we're going to explore how to connect our views to demonstrate flow. We're gonna look at linking views together simply and then creating links in symbols. So linked Teoh control to another page here. I'm selecting the symbol and editing it. And then I selected the menu control, and then I just linked to the menu button to the landing to the menu page. So gonna jump over to the menu page now and ongoing. Teoh, make the tacos link link to the menu tacos view here using the link inspector. And now I'm going to select the icon and are the image and the name of Chuck Norris Chicken taco. And have that go to the tacos view in the Link, Inspector. Right to know Matt Tacos View and I just like the modify button, have that link Teoh the modify screen and have the order button link to the ad. It's a cart view that shows our pop over appear. All right now I'm on the modify view and the done and is the council as well They could both linked to the back to the taco screen. So selecting that there on finally the order button. So we had that going. Thio added to a cart at its cart. Pop over has a scent of kitchen button that should go to the carte view Notice in the Inspector. And here is the card view. Now the charge. My card button should link to the pay page, and we will jump to that view the pay button. After filling your credit card information, got a payment Should go Teoh Payment confirmation and that's it. We're gonna just kind of edit are simple source at the end here just to make our little logo at the top jumped Tiu are landing view could make the menu button go to the menu screen globally, and the carts icon can go to the ah cart view globally as well, so we can add links to any control in our mock up. We can even add them to symbols. You can add them to over over it in instances of symbols, and once you have this all built up, you go to full screen view. You'll see that little flash of red there that shows the link hints and full screen view. We have little drop down in toolbar that lets you navigate other mock ups. You can use his history back in right icons to go back and forth. The Lincolns control in the settings will let you turn on that little red flash or turn it off. There is a big arrow control here. If you want uses for presentation on a big screen, and you just want to point things out, the big cursor. Turn it off for now, and last thing we have is this markup setting, and all these have a keyboard shortcuts as well. It's kind. The toolbar wasn t to hide toolbar and select our go through our flow here, and we're seeing the how all these buttons are going to the appropriate views showing the full flow through the cart payments. So this is a great way to demonstrate a present. Your wire frame deck tier team. We're still using the rough, sketchy skin here, so you could also make a little bit more polished and then uses for presenting to your clients or to use it for usability testing with your customers. So we'll talk about switching to a more polished view with the wire frame skin in the next section. 8. Getting Ready for Presentation: Okay, so we have a pretty fleshed out version here that we could demonstrate with some flow with our clickable demo To get time once again to do a design critic with your team, just go over the screens, make sure you're not missing anything. And you know, when you're ready, you might start to think about if this needs to be polished for a client presentation. So let's look at how to switch from are sketchy skin to a wire frame skin. Now we're going to just switch over to the Project information Panel with this icon here. We also use control or command comma and then selected the wire frame button. And we're also select a different font Helvetica. For now, you'll notice that the sketchy lines now become either block shapes or rectilinear lines. All our text blocks from earlier are now these gray boxes. I'm gonna swap thes all using transform Teoh real text, and I'm gonna just start feeling in some some text from our our customers. So this is gonna be the order information and we have the specials on the right. There's some The text control has some special Mac Rose to do things like change sizes and colors and using his brackets here to indicate in links for some of these menu items. And once you do that, you'll notice that the inspector shows you can actually link some of these items. So I'm gonna link the Chuck Norris chicken to the tacos page. All right, so we're on the tacos page, and now you can see that a lot of the shapes have been kind of changed to these really thinner lines and a little bit more rectilinear borders and just going to go through and, you know, make some minor tweaks toe font sizes where I need Teoh adjust the alignment because, you know, in our earlier exercise of just kind of sketching this out, we were just dropping controls into the screen without really thinking too hard about alignment. Or, you know, placement of stuff were just using the alignment guy just just like, put things close to each other. So I'm now just kind of nudging things into place and making it a little bit more presentable. If I needed it to be shown to a client, for instance, and if you're doing a usability test, you might want to do this as well. So I'm just selecting a bunch of controls here. I'm using the alignment controls Teoh center them. And, um, I see you're going to go to symbol. Make sure this is centered in the view pork and, you know, nudge the buttons and icons a little bit. So actually look better gonna just line some of my buttons a little better, so there's not really much you need to do here. Once you switch to the wire frame skin, it's just a matter of tidying things up. Changing panel size here is to be a little tighter, so slick and decent. I think this is not bad. You know, you'll always find something that you need Teoh that you might want to clean up if you're really kind of concerned about who the audience is for this. For the most part, we're not really concerned about making things look to polish here. We're not in the business of making wire frames were just really more getting the ideas figured out. So, you know, a couple more aesthetic changes here should change the panels to be pale gray color. Okay, so maybe one of the last things you think about doing is adding some annotations. So the you I library has a markup category, and there's a call out that you could add. So all these are our little indicators of sections of your wire frame, and I added a bunch of these and number them. And, you know, I I just went to the notes and added notes Teoh, identify what each of these parts of the U. I. R. There's a little toggle in the toolbar to hide and show these, so if you're demonstrating that you don't necessarily need to show the notes, But like in full screen view here, you can also just, you know, you'll see the notes in the inspector panel and with settings, you can turn all those annotation call outs on and off. Or you could also use the M key to topple them. And then you're predator. View will just kind of let you demonstrate. And then, you know, he's called outside you go if you need to point something out. Okay, so there's not much to you making changes in the wire frame skin. Just a balance making aesthetic changes and, you know, lining things up. You could still use all the functionality of the sketch skin. And in the next section, we have little bonus here. Just sort of think about how we might take this Web app design and present it in a smartphone. So we'll see you in the next section. Talk about that. 9. Creating Smartphone Versions (Optional): Okay, So for this last exercise, we're going to you just take our finished Web app and create a new version. We're gonna save this project of the new file name called Synapse Smartphone, and I'm going to now make a smartphone version of our Web app. Gonna head over to our project symbols. And now I'm going to just change our app templates, symbol so that it will be little smartphone. Vieux Port. I'm gonna get a ratio calculator that use. And I know that I want to have a 320 pixel wide screen and it has to be, Ah, 16 9 ratio. So that's matches the iPhone, and I'm gonna add an iPhone control here. And it had previously figured out that 400 by 8 12 will fit my 300 twin 20 pixel Vieux port within that phone control. And then we're gonna move the buttons around, change the menu button to a hamburger menu icon, and I size down our Zen logo there. So I jump back to this wire frame. I'm going to revert my changes to get the updates from the symbol, and now I just I'm doing some changes here. that might work better for the smartphone. So I'm gonna add a button bar to the top and maybe, you know, this is, ah, one way to switch between ah, welcome message and, you know, viewing our specials for the restaurant. All right, so I decided maybe that the specials might look good as a little scroll Herbal gallery of the items. So I'm gonna add an image here for First Special. And the idea is here is that you have a set of pictures in the name of the menu item, and you could just swipe through the specials when you're on the welcome screen on the landing Extreme. I was gonna overlay a panel here so that I could put my text on top of the image this way. It's nice and compact. Little fit in this smartphone screen. All right, so that's looking decent. I jumped ahead here, trains colors a little bit, and I'm gonna group this and here. I'm just going to just put in a bunch of of these images and, you know, I just did a couple changes there to make it look like in my fiddle. Better. All right. So no back on runner. Many screen and I copy the symbol from the landing screen pasted in here. Send it to the back. And now I have my menu and for for this view. And I'm thinking, you know, selecting the hamburger icon in the upper left will slide the menu into the view. So I changed my list to fit here, and I'm just going Teoh change the list height so that it fits within the view port. Then I'm going to take my sub menu, resize it so that would fit on the other side of the screen as well. All right, so now with the ideas, I have the menu sliding in and it fits in right underneath the toolbar. Unlock this and I'm going to change the camera icon to show that it selected. All right, cool. So we're gonna go through all the screens and make these changes. This is the taco sections are going to do the same thing to lead the all the necessary parts resize everything to fit within our template in the background. Here on the tacos view. This should be slightly different as well. Let's see what we can do here. We're going to take out the little previous and next boxes or cards. And I'm going to just fit this main card into the view port to resize everything in life things out of cleaner radio. And then we just have some pagination at the bottom. Here's the modify screen, and here's the pop over for showing that we added this to cart. Here's our pay page laid out a little better. And here's a payment confirmation laid out Now if he jumped to you full screen view, you could demonstrate this flow. So you're cooking the menu, jumping through two tacos, junk jumping over Teoh menu item modifying the order and we're done. We're going back Teoh item and ordering it. It shows the cart. We send that to kitchen we and to our payment information, and we see our confirmation screen that wraps up our rapid wire framing course in the next section. I'm just going to go over some reminders to keep you working fast and using wire frames in a way that supports your goals for getting a better product and better product design out of your team. So we'll see you in a minute 10. Some Final Thoughts: so that wraps his course on rapid wire framing hope. You found a lot of useful information here to get started. Don't forget. Upload your project to the project section to get some review from your peer students as well as from our team here. Um, just a good over some key points. Just remember that wire framing is a tool. Teoh, get your team on the same page when you're thinking through what the problem is that you're solving to create a common language about what your solution is, your goal is really not to create something that's, you know, a beautiful schematic. But really, it's to, you know, find the right design That solves a problem that you identified in the brief. So you have all of the basic skills you need. There are a lot of advanced features you could use within balsamic markups as well encourage you to look at some of the resource is that I'm point out some great resources for design review. There are some great resource is for how to do rapid wire framing and critique with your team and there a lot of tutorials that we have on the balsamic website for using advanced features. So that's it. I hope you had a great time. I had a great time teaching this course and we'll see you in the forms and discussion area .