Click on any phrase to play the video from that point.
[Introducing: Adobe Proto] Hi, my name is Devin Fernandez, and I'm a Group Product Manager in the web segment here at Adobe Systems. And today I wanted to talk a little bit about a new product we have called Adobe Proto. Effectively what's happened today is that communicating design ideas has become so much more difficult in the more complex design environment that we live in today. There's new things like new target devices such as mobile devices like smartphones or tablets, and then there's emerging technology such as HTML5, CSS3, and even JavaScript frameworks that allow you to build things out that are much more rich and interactive. So, things like simple static wireframes really don't capture the full picture any longer. The idea with Adobe Proto was to work on interactive wireframes and prototypes to allow you to more effectively communicate your design ideas. Adobe Proto is a tablet-based application which allows you to create wireframes and interactive prototypes using touch gestures, and so you can quickly express things like layout or content or content priority, site structure, and even interactivity very quickly. Let's take a quick look at Adobe Proto running here on the tablet. I have a blank file open here, really an existing project open here in Adobe Proto, and the first thing you'll notice is that there is a grid system here that I'm going to use. And the grid system will help me lay out the page so I can align things very smartly and such. And then you might notice down here at the bottom that there is a gesture guide, so there's several different gestures that you can use to express yourself using Proto. I'm going to dismiss that, and the first thing that I'd like to actually do is go ahead and sketch out the wireframe. So, again, I can use gestures. I have a pen tool here, and I'm just going to draw a header at the top here very quickly. And you can see that that gesture has become a header, if you will. I also want to create sort of a content area, so I'm going to do the same thing, draw a little content area, and I'll come up a little bit short so you can see how the grid works. Automatically, that container, if you will, snaps to the grid. I do have a selection and scaling tool, so if I wanted this to be a little bit larger, I would just pull it down like that. And then at the bottom, what I'd like to do is just create sort of a content pod, if you will. I'll create 2 of them, but for now, I'm just going to create 1, and I'll use a copy and paste or a duplicate function to create the second. Let me use the scaling tool, and also you might notice that I have smart guides occurring as well as what we call a design grid, which is actually helping me align things both horizontally and vertically. So, if I switch over to the hand tool, I can scroll down and see the rest of the canvas, if you will. And again, use a scale tool to get this little pod here just how I want it, so maybe about like that. Switching back to the hand tool, I'm going to go to the top, and now what I'd like to do is add content to my wireframe. I'm going to do that with gestures again, so if I wanted to put a little bit of text as a header here-- I made a slight mistake there, but if I just do it again, you can see that the gesture is translated into like an H1, if you will. If I wanted to add an image like an image placeholder, say, for a logo, I just take it and place it right there. Again, I can use the smart guides to align it, and I can scale it as much as I want. And then from there, I'd like to add something like a menu item, so here's a bit more complex gesture. Let's see, let me switch back to the pen tool. I'll go 1, 2, 3, and that will become a menu. I'll use the selection tool, move it, and then I'm going to scale it up and then actually scale it down, and I'll come back to the menu in a little bit to show you the inspector, where I can get a bit more control over the menu. But let's continue on with the content. I'm going to add--let's first add like an accordion, if you will. These widgets that I'm using now are based upon jQuery, so again, I'm just going to place it. And then I'll select it and move it into place. You can see that I can easily align that with different things. I'd like to make it about that wide, and then let's go ahead and add 1 more thing. Let's add a media player, and this time I'm going to click and drag. And again, I can click and drag and scale that in place. Let's grab the scale tool, move that, align that just with the accordion and fill up some of the space there, so now I have sort of a media player. And now I'm going to switch to the hand tool and scroll down and play with this content pod for a moment. I'll switch back to gestures. I'll put a title or an H1 there. I'm going to place an image, in which case I'm going to click and drag again, place an image there. Let's move that into place. The next thing I'll do is just add a little bit of text. I'll use the tool bar again. I'll use the paragraph text, and what I'm going to do here is tap and drag that out. There's a bit of text there, and now I'd like to use sort of a grouping and then a copy and paste function to create something actually identical to this pod. What I can do is I can select the grouping tool and then from there I just grab the things that I want to actually group and say "Group," and now when I select it, it's a group, and I can actually duplicate that very easily. I'm going to grab that, and let me move that into place using my little alignment tool. I should be able to get it right in the perfect spot. And now let's take a look at what we've seen here. So, I've got a very quickly laid out wireframe, and it's actually interactive, so let me switch over to preview, and our preview is actually based on WebKit, so it's using the tablet's browser to preview this, and it is interactive. If I wanted to look at the accordion, I can see that the accordion is fully functioning, and if I choose to select these different menus, you can see what the sort of active state looks like for the menus. But let me do 1 last thing, which is I'm going to switch back, and I have another function which I'd like to show, which is just there's multiple pages. So, any wireframe or prototype will probably include more than 1 page. What you can see is I have 2 pages in this project, and if I wanted to create another, I simply click the "Create New Page," and you can see I have a new page added to the project. But I'm going to switch back to the index page and show you our linking function as well as the property inspector. If I select this menu bar here--let me dismiss that. If I select the menu bar here, you can see that I have an inspector here down at the bottom, and the inspector will allow me to do a few things. The first thing I want to do is switch the active cells, so I want to switch it to Menu 3. And what I want to do is link Menu 3 to one of the pages in my projects, so I'm going to choose the existing page that I have called "about." And then if I double-click on the text in Menu 3, you can see that I can just change the text to about, return, and now if I go back to preview and I click the "about" button in the menu bar, that takes me to "this is the about page" that I had created previously. And that's a quick preview of what Adobe Proto is all about. [Adobe Touch Apps] [adobe.com/go/touchapps]
