Transcripts
1. Intro: Hey, guys, today will be going over Adobe X'd. It will be designing and prototyping our very first app. So this is intended for beginners, but also be showing you guys something like lightning quick workflow processes and plug ins that I use on a day to day basis. But make it fast and valuable for anybody that wants to watch so up our output will look something like this. So we're making a 10 to 12 screen prototype at a pretty high fidelity, and I'll be designing each and every piece along the way. So I hope you guys can pick up some useful information, so let's get started.
2. File Setup and Sign in screens 2: take no notice when to get started that we have device sizes appeared to stop and because it will be doing a mobile out, we'll click here. OK, so a quick note on file sizes you'll notice the first decision you have to make an adobe X'd is what file size to design for. I'm gonna encourage everyone when you're just starting out, especially just designed for the device you have there. Actually, I think it's up to 24,000 Android devices now. And about 27 Ah IOS devices. So you really at least when you're first starting out, don't be concerned about trying to design for all different types of devices. Encourage everybody. Just pull up the device you have. Um, it's gonna be great to use this as reference so you can start to see the scale and size of things and you'll be able to play around with things on the screen. And you can actually pull up Adobe X'd and use a live preview, which I super super recommend. It's just gonna get you a lot more familiar with the scale of buttons and how big things you're making on the screen actually are because trust me, it's a lot different on a monitor than it is on your phone screen. So everyone, please check that out if you can. It's super helpful when I encourage it for this prototype and for this one will be going. I find xar so the first thing you'll notice. You see, we get this art board right in the middle of the page. That's the size of our phone screen, and it's also named just the generic found size at the top. What we can do is double click on that and name it. Splash, you notice to the left. We get that name to update on our art board panel. So this is going to be where everything we draw on the screen shows up into the left. We have all our drawing to us and then to the right. We have all our our settings panel, so every every option we get to edit is gonna show up every year. So, as an example, just like the airport and we get options dead at the art board over here, that right, and we'll actually make the appearance. So the background black. The next thing we'll do is we'll create an icon for splash screen, so we'll grab a circle and we'll drag to draw a circle. But you notice when you dragged to draw it, it turns into an oval, and it will go any which way you move the cursor. But if you hold a shift in a scale uniformly and if you old shift in Ault, it will scale from the middle. This is a quick shortcut that I like to use a lot, you shifting all with almost every shape I create. And then to the right up there, you'll noticed the align center in the line horizontal tools. So those are also some quick things to use when you need to get things on the art port and make sure they're centered and actually will make this a little bigger. So I'm gonna hold option shift again, and we have some guys that come up. There can also be helpful who make this a little bigger right about there is one, and we'll move it right about there. So this is going to be the logo for a splash screen. What a splash screen does is it basically offers a placeholder to give the app time to load . They're not always necessary, but it's good to have one, because if Europe doesn't need time to load when it's downloaded and you don't have one, you'll just show the user a black screen, which is not ideal. So the first to weaken grab is the rectangle everywhere to the left. And we're gonna make a horn for the middle of our icon because we're making news up and it's gonna be like a bullhorn, kind of paying homage to the old old school like newspaper newspaper boys yelling on the side of good. So once we draw the rectangle, we can see men you noticed the right has filling a border. But what we can also do here is double click on the rectangle and share these edible points at the corners. And what we can do is actually grab both of these points. So I was selected the 1st 1 and hold a press shift. It's like the 2nd 1 and we're gonna pull it down. I go back to the top one, bring that one down as well. I'm gonna do the same thing with spot him right one and Basically, what I'm doing is just getting a little bit more of like, oh, bullhorn shape for our logo that I'm gonna select off of that to de select it and then slide it up. Actually, what we're gonna do with this is turn the border off and make the Phil Black. I'm going to double click in once more because we want this end to be a little smaller than it is. So what? He's like that. So there were starting to get a little bit of a bullhorn shape what'll actually knew? Next, just put a block down here for the handle. So we'll grab the rectangle again. Minimal drag, and drop that across and we'll move it up. So it's about in the spot a handle would be We're also gonna turn the border off again and then make the fill coat black. So I'm gonna hit, shift and select both of these, and we're gonna come up here to our path combination tools so we can either select this one toe, add, subtract intersex, exclude every lap we'll use adhere. So that way, what it does is it creates one shape out of the two and we can name out corn, and it's always good practice toe name things as you go because when you get up to, like, 100 art boards could be pretty confusing. And I'm actually gonna tweet this just a second. So I just double clicked into this to get back so I could edit these points. I'm actually gonna bring this up a little, and then I'm gonna go back toe this alignment tool of the top, right? And make sure both of these air centered. I'm gonna hit, shift, select both and then command G. And that's gonna create a group out of these two. And we can name that group logo the Devil Sect in just to make sure that's centered right there. You notice that guide came up along the middle to you? If you pull around any shape, usually God's will start to come up to help you center center things. Then we'll go over to this text tool right here. Minimal drag and drop box for a text. The name of our news app is gonna be extra so we can highlight this and we'll change toe white Miss fonts. Fine. I'm actually going to go bold into about 35. Maybe so Right now the text is an area text. So that basically means it's going to keep running, but only show the specific area. But if we change it to point text here, it'll actually always just fit to the amount of text. And the reason this is helpful is you can actually scale it like this. So if you're trying to move quickly and you don't want to type precise like font points, it's helpful to, like, use this point text to really figure out where where you want a position things. Okay, so that's about right. I'm gonna drag these down till they're both out of the center of the page. Okay, so they're splash screen. We're not just gonna have this black background. We're actually gonna have an image in it. So let me pull over an image, and I'll include this image for everyone, but it is just a random ah newspaper image I got from on Splash. But feel free to use the same one or a different one, if you'd like. So you noticed when I bring the image in it automatically cropped to the art board which is a nice feature. And of course, we get our editing points on the sides and the same thing. I'm gonna hold option, shift and scale this down so it scales down uniformly that I'm gonna hit command shift left bracket. And what that's gonna do is it's gonna send it all the way down to the bottom of layer panel and you could do the same thing over here, but just dragging it. So if we drag it over the top of that, it's basically doing the same thing. But it's pretty pretty fast. Use the keyboard shortcut here. Actually, I just noticed their circle has a border on it, so I'm gonna double click in enough. Okay, We have our image background, but you'll notice the text is almost impossible to see. So we're gonna have to have an overlay on this image, so I'm gonna hit, are on the keyboard to pull up a rectangle and draw one the entire length of our board. I'm gonna turn the border off and then we'll make it black. Mr. Spot would just drag this saber and then I'll make the A pass ity about 70. Maybe we'll try it. And then what we can do is just drag this down beneath our logo. And there we go. Our text is much more visible now, and I will actually just name hope. So what happened there is accidentally drug it into the group on the layer panel, The area. Now it's out of the group that we can name that overlay. Okay, so there's our splash screen, and the next thing we can do is just copy and paste this over and create a sign in screen. We can double click to name grab both of these and moving up. So what we're gonna dio is create inputs for email in a password so we could grab our line tool over here and you notice once you start drawing lines, it's kind of odd to decide where they'll stop so you can go in and turn grid on, and it puts a default grid. That is actually a little to Nero. I usually like to bring this it out a little and these something around like, 24 and then we can just make that the default and use it in other places as well. So I'm actually gonna drag this line out till it meets that edge, and then we can turn this off for a second. That's pretty hard to see you, so we'll make the line white and make the size to as well. And so we need an email text year to let people now they need to enter their email. So I'm actually just gonna copy and paste this text up here. I prefer to copy and paste text and then just changed the settings every here, rather than drawing any text box. Because I hate drawing new text box boxes, I think it's much easier just to copy and paste f over. It's also faster, but to each their own. So what? That email there. Then I'm gonna grab both of these by holding shift. I'm gonna copy and paste it so we get another another version right down there. And then we'll rename that password on a quick note to zoom in and out by holding command and using the scroll wheel. And that's how I zoom in and out. Teach Mouse Point and I use the space bar to get the pan tool to come up. If anyone's family would like photo shop. It works pretty similarly. But if you ever see me flying around the art board, there's of the tools I'm using. So we're actually gonna also copy and paste password ever. Because if we have password entry, we have to have ah, forgot password entry. Simple. Drag that over so it doesn't fall off. I had a question, mark, and we're gonna write a line this by selecting this over here. I'm gonna make it a little bit smaller. Will go down to 14 with it because we all now that will probably need this at some point if this was a really up because I can't keep track of my passwords for no reason. So the next thing we'll do is create our sign in button, will drag a rectangle shape, make this a little bit smaller, and we're actually gonna grab this radius tool right here. So these little points or for the radius and we can grab that end and round those corners off, you can also hold option and just grab one radius. But for this one, we'll grab both and round the corners uniformly the buttons a little big. And this is the point to you where I encourage everyone. Teoh get used to previewing and starting to understand how big the you I elements you're creating arm. This is also really helpful and why I suggest people to design for the device you have because you can get a device preview appear, and it just helps you kind of understand the things you're building and see them in scale because it really does change when you get it on device. So we'll drag this down a little, turn the border off, and since this is a button, will put a drop shadow on it and material dot io. So that's like Google US standards, but out a lot of good material. A lot of grid of material, I guess. They created a website to really explain why wine, when to use drop shadows and I encourage everybody. Take a look out but long story short buttons are on a raise service and raise surface. Have shadows underneath. Um, so always put a shadow on a button or a surface that's above another surface. That's the That's the t o d r of drop shadows. Don't use them Stylistically, Drop shadows are meant to convey, um, functionality. So we can actually change this. It will be using a green for this up on, right about their looks. Fine. And then if you have a color you're gonna use frequently, you can hit this ad button to save the color. That's pretty helpful. So we need our button to have text. So I'm gonna grab the text tool and drawing there. Then I'm gonna center it, and this will be our log in. But now make this bold and will do 18. I need to highlight it, and I'll actually switch to point text again. And in center. Not this. Make it a little bit bigger. Okay. I lied. I'm actually gonna preview this and see how it looks. It does look a little See that looks a little TV eggs were actually going to go back. Should've went with a gut. Stayed with 18. I'm gonna make this button just a little. Some are as well. So I'm gonna select both of these, actually, copy and paste it again because the log in button is for existing users. But we need a sign in button for new users. We're actually gonna make this a border. Turn the fill off. We use the same green change that to to. And then this will say, Signer, it's gonna change the color of that text to that green, and we can select better those. And then do you command G to group? And we can name this sign up, Do the same with that one community in a group Neymar button again. Okay, so now that we have our sign in screen, we need a sign up screen. So what we can do is select this. We'll move this up a little. We'll grab peas, side them up. Well, delete the forgot password. Gonna copy and paste this and have another line to reenter password. Well, do you just password confirmation, Jack. So and we don't actually need our sign up button here. We just need a sign in button or create account. Actually, I'll go back and re name this appropriately. There we go and rename our board. Create account as well. Okay, so there we go now, have her splash screen or sign in screen and our create account screen. So the next thing will be moving on to you is creating are on boarding screens
3. Onboarding Screens: Okay, so now that we have are signing screens created, we can actually create our on boarding screens. So what I'll do is just copy and paste this over, go ahead and rename boarding that I'm actually going to delete everything from this are Bryant. And I'm gonna go back and actually adjust the appearance color to be a linear Grady in here because we don't have our image as a backdrop anymore. And then you see, I get this, like line that comes up that allows me, like, edit and reposition the radiant on Deacon, Select on each end and create a color if you want to. You can also select on the line and create a new color in the middle. I usually like to keep things simple, though, and only keep two points on the New York Radiance. So we construct the top here and actually want this to be like a black, but with, like, a little bit of Leah tent. Nothing too crazy. Being right about there is probably fine. And I added it to save that color and actually want to bottom to be black. Go at it here again. Actually, just that just a hair. Okay, So for on boarding screen, we want to welcome our guest, our new guest to set up their count. So a copy and paste this text super, actually gonna turn migrate back on and then also like to use their fault grid. So we're on that default grade we created earlier. And we want to welcome our new users to actually make this bold. And we'll go to about 24 with that. Maybe a little more 28 x five Copy and paste. This Tim changed the area text. So the first thing we're gonna want them to do is select some topics they're interested in for their news out. So we can give them instructions here and that. Adjust this text to be about 16 during our great off can actually shift this up a little. So now what we need stick close. Thes little indus. Now, what we need is to actually have some you I so people can select topics they're interested in. What we'll do is create a little selector so we can draw a rectangle. It will actually bring the radius and around the corners. Turn the porter off. We'll make it a dark gray. I can adjust the size just a little bit, and then we can create a circle. I'm an old option shift again to scale it from the middle. I select the USVI to go back to the selection to appear. I drank the soup here. Yeah, here in the Phil off Make the porter white. And with decides to, I mean a copy and paste this area doubles eso a double click there to select it all and we'll do your topic. Can is a placeholder. We're actually gonna make this 16 and then go bold. One thing to note to you, I'm actually gonna bring this area texts in two about where the text could fit. We're gonna make this circle a little smaller, holding option shift again. Drag this over just a hair. And so doing this to account for more space because we're gonna have topics that are probably more than five letters. Maybe just a little. Okay. And one, The reasons here. I chose to use area Texas because we're gonna be using plug in in this stage so we can select the use and I'm holding shift. It's like multiple things command ji, the group we can name this selector, and then I'm actually gonna hit repeat grid up here to the top, right? And if you'll notice we get these little handles that come up and we can actually just drag and create copies of that group element, this is actually one of my favorite tools in Adobe X'd. One of the reasons I love it so much is this is a comical time saver of like, the alternative to this is just copying and pasting each one and ends up taking a lot of time. But doing it this way is just so much easier to replicate these you Io mints. And since these are on top of our background services or something, we want to use it interact with, we can actually double click in and at a shadow, a drop shadow. So one thing to note to you is the drop shadow actually applies to all these other ones. So if we edit anything in a repeat grid, it applies to everything else in it, which is a super nice feature of it, and I'm actually gonna make sure this text is centered a little better. There we go. So now that we have our whole grains selected, we can actually go to the plug in panel down here to the bottom left. We're actually gonna add a plug in that plug ins called repeater. Now, this plug in is the sole reason I'm not using the latest version of Adobe X'd. There's a minor bug with it that's making it not work so well in the new versions. Um, and I'll show you why I'm literally running an old program to use this plug in. So we get our repeat grid item right here to the top left, and we get the names of each element within it. And we know we want to select the topic, which is right here. And what repeaters allowing us to do is it gives us all these options for placeholders. Basically, you could get texts for shapes. You can get images, but for this one, we need topics for our fake news up. So we will actually look a commerce arena, select product here, and so we can cheese apply and in close immunities in our whole repeat grid, we now have these pre populated products and some of them are cut off here, and what we can do is actually go in and edit this text a little just to make sure everything fits. Change that to 14 and adjust these that they're centered again. I'm actually gonna make this circle a little bit smaller as well. Molding option shift. Drag that down just a bit and you'll notice to you can edit any instance in a repeat cred and changes the other ones. So I don't have to feel like you're using the top left one on the time but their guests And then we have some random topics and we did get keyboard to repeat three times. For whatever reason, I have no idea why that I would go in and select and you back to our text. And we'll try product from more times, get it to apply. There we go. Now we got keyboard keyboard only twice. Still, I guess that's just gonna have to be fined heavily. The person's really interested in keyboards that goes through this on boarding. So there we go. We have our topic selector now, and we will also need a next button for someone to be able to go next after they select the topics they're into. So when a double click into here and actually gonna make this gray And over here we have an eye dropper, and I'm going to get the same color gray as thes selector buttons, and this is gonna be in next. And so because we want someone to select thes topics before they continue, I'm actually gonna make this button inactive. So you take the drop shadow off, and I'm gonna make this next text capacity go down to about 45. I'm gonna bring these elements, move him up a little, because we will need to account for having a skip button at the bottom. It's one thing you can do is you can never just trap users, enforce them, toe. Ah, continue on and on boarding. That would just be horrendous. So we are going to give someone the option to skip if they didn't want to you into the topics they're interested in and will space this out just a little. Me that justice Menge. Okay. All right. So now we can go to our next on boarding screen. You notice I automatically named on burning Dash one which is fine. It's actually decent name for it. Okay, so the next thing we can do is we want to enable location on. The reason we're doing that is to give people relevant information to their city or town or wherever they live. So we can rename this screen location. Excuse me while I struggle, struggled telling today. So we want to know if our user would like to receive local news and one of the reasons it's good to have This is like a non boarding step. If you need any permissions, it's better to explain why you need those permissions if you just randomly try to ask someone for location and they don't understand why they're not gonna feel inclined to give it to you. And so I'm actually gonna copy and paste this down and really explain why we would want location services. And that's because we're giving fast relevant news. I'm actually gonna play with these font size is a little here, do italics for this one and regular for this one and actually don't want this one comma to be bowled so well, actually make that attacks to you and really just doing that to add emphasis on fast and relevant is and will give the user a little bit more of an explanation of why were asking for location services. Okay, so drag that down so you could see it and again, Like I said, it's always best to toe ask and explain why you would need something like location service instead of just randomly popping up. But in the middle will also need something to go here too. So it's not a blank screen with text and something that's a little more descriptive super banana quick little diagram. So God the circle tool. And I'm actually gonna hold option shift to drag this out, turn the water off, and then I'm going to double click in and I get there Same editing points we got on the rectangle before. But I'm just gonna drag this down. And if you double click, you'll notice it brings it to a point which is pretty useful to know, depending on what kind of icon you like to make. And then I'm oppressed. E think it another circle up. We're gonna drop it right in the middle of this. I'm actually gonna select both of these with shift and then hit, subtract And they were guests that we have, Ah, location icon. And I'll name that to the top left and then I'll scale this down just a little. We'll also add some kind of circles around it to you visually make it a little more interesting and little better explanation What's going on the page. So copy and paste that again. And I'm using shift an option to scale these out uniformly Copy and paste again. Here we go. Actually, when I made it to you, it's just this size just a little. And I'm also gonna go over here to dash. I want one of these to be a dash line, so I'm gonna enter five right here. It actually gives us a pretty nice dash line here to you. You notice you're gonna just the cap and dash and of course, size of the line. But actually, like five, think it looks pretty good on the screen. I'm actually gonna put a couple small circles around these as well, and I'll make this Phil and want them to be the same. Graze the lines. I'm actually an east Eyedropper tool. Come in and select that and save that color it's going to do is copy and paste a couple of these around so they can populate line a little, maybe to put some emphasis that, like, we're getting location data from around our users creating a little solar system for of data around Could make this a little smaller, actually, that I'm gonna come. I'm gonna hold shift and select all of these. I'm actually gonna group so command g to group, and I'm gonna center this. Oh, that was a little too far down. Consider this and we're going to scale a little a swell soma. Hold option and shift scale this up. Okay, That looks about right And this buttons actually active. We don't have to have the easier to do something first. Some of the devil click in changes back to green to look like again. We're gonna change this to enable location, make sure the capacities turned back up, and then we'll still keep the skip option here. But then, once he said like this, you'd get, like the native IOS request location approval to come up, and so for the next step will actually begin to create the home screen. And like the main screens of her up
4. Icons & Bottom Navigation: Okay, so now that we have our own boarding screens done, we can move on to creating our home page. And again, I'll copy and paste this art board over, and we'll actually rename it home. We're going to delete these buttons in this icon, and we'll name this home would lead this as well. I'm actually gonna make this a little bit bigger. Turn it right on. But you're right about there. I will make this 40. Okay, so now that we have our home page, we're actually gonna create our bottom navigation. Next. It's a minute. Draw a rectangle year until right about here. And this is also where it's helpful to use your preview. One knows and understand what size this needs to be. And just keep in mind that the iPhone axon xar we have that line at the bottom to deal with this. Go. So I'm gonna make this gray as well turn the border off. Try this gray. Actually, I'm not crazy about that. We'll try that right about there, and I could save that craze. Will. So what we need to do is we need to create four icons for four main parts that. So we'll have a home, a video to discover a profile section. So what I like to dio is actually just draw square and a molding shift to make sure it's even square and space it out. So we have enough room to fit for items in our bottom now. So right in the middle of this column, turn the border off. You can actually use a repeat grid here. Um, it can speed this up a little for your four things out and then make sure created Isabel where we needed to be, and you might have to play with this a little, and then we can un group grid. Yes, it is about where we want our icons to be. I'm actually gonna dio is select all these. Unlock them. And then this is what we'll use for a guide for creating our icons. So the 1st 1 we need to dio is create our home screen calm. So actually used the rectangle tool here and we'll draw it again in the shape we'll get the size about rain and I'm going to double click in and I'm gonna create a point right in the middle of this rectangle we're gonna do is actually dragged that up. And then we have the home icon here That's pretty center and will actually move that ever just a bit hearing it. Also, when we select, it looks center. Then our home has to have a door. So we're also gonna draw a rectangle down here, make sure that centered, get a little smaller. I'm gonna select both of these and actually hit this union to appear. Well, that was actually the wrong tool. I'm gonna hit the subtract two about the into that something is wrong here for a second. Okay, so now we have our home icon, and we can actually turn that border off and we'll make it black just so you could see it. I'm gonna click into these, unlock him. I'm actually gonna make him great so we can see behind a little better you unlock to use again. OK, so wherever home icon done. And the next thing we can rely on to you is there video ICOM So start withdrawing another rectangle. I'm actually gonna center this in the screen and for this one because we're doing like a video frame icon. I'm not gonna go all the way to the top. And we can change that later. When we scale down these icons to make him look a little more uniform, we could grab this triangle button here, actually draw a triangle holding shift escape, got a little triangle. We have to delete their We can rotate this triangle so the rotation tool comes up when you have a right here and you could just hold shift that's gonna rotate it by snapping, which is pretty helpful. Civil center. This well, actually, the same thing here. We're going to subtract thes two shapes. We'll turn the border off. So there we have a rectangle video ICOM so the next thing we can do is create or discover icon. So we'll take this circle in the end option shift. I'm going to create a rectangle here actually, about like this Do you use will write. Eat that 45 degrees. Make this the handle tow are like search, Discover icon. And we'll also add these together. Here we go. It's our discover icon will turn the border off for second. Actually, I think I want this one to be an out actually have super changed my mind. What? I want this one to be. Well, actually, just use it. Creating a path group is together. Then last one will create a profile like on so a great circle again. Let's get this down just a little. I'm actually gonna create a small body for us. Well, so we'll drag a rectangle across. Then I'm gonna do command shift right bracket to bring this to the front. And I'm gonna copy this circle and then paste it over here to the right and what we're gonna do you It's actually subtract these two shapes to start to form the body, turn this porter off. Then we can also drag This ends just a little. So I'm just double click again so I can select the radius in that cut shape we just made. And I'm gonna double click again. I'm actually gonna do eat the bottom ones. Here we go. We're gonna double select here, then drag this out just a little and scale this down. So we have our little user profile icon here. And if you're thinking the same thing that I'm thinking, these look terrible. So we're actually gonna go in and the justice size a little of each of them. And when they start to scale and you'll notice because this one is a path that's going to scale a little differently, it's not filled. So these will actually seem bigger when I start to scale them down. Okay? This and scale this down as well. Okay, so you can actually go in, select these backgrounds will unlock and then delete them and what we need to dio let's create some text for her. My guns. That's probably not gonna be a hit 40 size, but, you know, teach the around stay home. And we also like this and maybe take us like 12. We're actually gonna make it regular and will copy and paste this over and put one underneath each name actually, in a select all these and center them as well. And since we have home selected here, what we're gonna do you it's actually make this bowl because videos not selected, I'm actually gonna make this now on instead, What we can do is change this to will travel one. Actually, that's a little too small like these, both to we will also do the same for our profile. Make it too sure. Its weight Mexican. A double click in this triangle is a little too large. I can find the edge of it. That is my not exist here ago. Sometimes it's easier to stay quick and then furiously double clicking like I do Sometimes that was a weird, huh? OK, it's a skill in town. Who knows what happened there? It's above my pay grade. And I lied. I'm actually gonna change these 21 you 1.5. Take a look. Quizzes previewing new actually on a scale. Each one up just a little bit. I'm actually gonna drop this down. Just a hair as well so we can turn this off and see how it looks. Okay? And the next thing we can do, it's populate our news menu for the homepage.
5. Main Screens: News Feed / Profile: So now that we have about a navigation created, we could go in and start populating our home page with our new stories so we can kind of create a card for this to live on turn the great back home we actually want these to be. We use this color from the bottom of in the porter off who were sneaking around these just a little. Okay, Jenna. Great offense. Yeah, that looks and then will be a quick preview to just to get a feel for how? Okay, that should be good. So this will fit a couple a couple news articles right there. So what we need, we need a background card for any news Articles were to drop shadow on that again. That's because there's something these Ercan select. It's sitting on top of the background. So I'm gonna hit our draw. Another rectangle here. And what this is going to be is the image of the article, and I'm gonna hold option here, so we could only get that one corner radius and do the same thing. Hold option there and make it fit the outside of that. So this is gonna be like our image placeholder, and this size looks okay for now. We can actually go ahead and create another text box. And this would be the place holder for the title of our articles. We'll try it with about 18 and we'll go regular. We will have a bold to let's see if we could get some type in here. It's not, too. Page would be to line same difference there. We just need some placeholder copy in there for now. Had escaped. Be to get the sector too. Gonna make this 18 genes into regular. Thanks, Sali. Maybe a little bit smaller here. I'm gonna bring this down a little tol make little things a bit smaller. You can also bring us images in a bit. There we go. So this will be a nice little thumbnail article size. You need just some placeholder text there, see what it looks like. So any random keyboard stuff works fun. I'm gonna copy and paste this over what we want on the bottom of this is the location and the time that he got personal so we could just put time here, actually to your area text again. Gonna make that 12. We'll write a line that I'll explain why I'm rattling right. Aligning that in a second. Then on craft's press p for the pen tool will draw quick line here. We'll make this white the more copy and paste this over and here. We want the location so we'll actually put location. We're gonna make both of these a light, actually. Okay, we're gonna make the location show Greek in this. Well, it's like these in just a little. Okay, so now we have, like, a placeholder for what are filled. Article will look like I think that's a little bigger as well. We're gonna dio is just group all this together and we'll call it card. And if you didn't see this coming yet, we're actually gonna use repeat grid and dragged us all the way down. So we get, like, a full populated newsfeed of articles, Enemy's command shift the left bracket, and we're going to send it to the back that way, it's always below are about it now. And since this is actually above, we're also gonna put drop shadow on this do negative three. What that's gonna do is angle the drop shadow up that way there we go. So we'll select the repeat grid and we'll go back to this amazing repeat repeat again. And this time we'll actually click on the image as well. And let's say Let's do you city so we can shuffle these around. But really any city shot is fine, but we do want to quality to be high support. Just that, by optimizing you will apply. Okay, so once we get our images supplying, it'll take a second because it has to download each one of these images. We can go in and we can also put a title in. Um, we'll try. We can dio There's not a perfect one for generic article titles. You can click around and see if anything works. Works best, but just to have something that's kind of a place older will stick with commerce and do product name, because usually you get like a multi multi word name, so apply that there as well. Here in the bottom, left to their time text. We can also put a date and time in as well, So we're gonna go select for amount and well, actually you custom. So you get some examples of different custom things you can do. You hear what will actually dio is this collect h So we'll get an hour right there And then we'll also dio an air api So that way we show an hour and then the P m or A M time after will also apply that Bayer And in addition to that, we have our location text We can go over here to you address and then click. Could you city apply to that as well and clues? And now when we look out Oops! When we look back here we have populated repeat grid with, like, our article thick article titles. Some of them were pretty weird, so some of the AM and PM times didn't show up. I'll actually go back and see if we can edit that. And I'm also going to see if we get a longer title for a product. We can try the company, and, like a catchphrase that would probably be a good one. Or are you a business? We apply that and then this way it's going to give us just a longer to to line heading, maybe catchphrase. And then he owns double check time in time, we can actually to Stephen normal time. Still have the time article was posted as well. Okay, so we can pull this open, see how it looks. Okay, Gonna shift this up just a bit. I'm thinking out to that school about repeat grid as we can actually go ahead and just drag it out and make a scroll Herbal page. So if we click the art board and drag this bottom down here will actually be able to scroll the page as well. And the thing is, if you'll notice. So if we make the page that long way, quick preview and we school the bottom never actually schools with it, and we don't want that. So what, we're gonna dio it's actually got a predator. Got it? And we're gonna select all of these elements here, and I brought a knave and will be fixed position when scrolling. And now if we go back to a preview, have a nice, nice long scrolling his page. Okay, so now that are home pages, none. We can go next to our video page. Next on the list. Go back to the design tab on will copy and paste this super. We call this one video, so I'm actually gonna only he's one card from this crib in group, and we'll delete this bottom carb. I'm gonna delete the images in here as well. Well, actually, we'll keep this text, but I'll do it. Damage I'm gonna ungreased this is. Well, we'll get off the plug and menu so we can see a little bit. What's going on? We're gonna drive this title to the bottom because we want our video screens have a lot more space. Simple. Select the time on location and put that every year Director title down. And we're gonna drag that out. So it has a little more room. We're gonna press are and draw another rectangle. And this will be like our video preview window. We'll try to make this size little more realistic. We'll drag us down. No, behold option, Ault. Whatever you wanna call it and drag the radius down until it matches, Turn the water off and again. I'm gonna play with this a little until it looks about right for an actual video for you. Okay, so we're gonna Grieb all this together. Well, just name video and then you guessed it work. I gotta repeat. Good. Then I'm gonna go command shift left bracket, and we're going to send this to the back. Just so about a knave is on top. Okay, so now with this repeat grid selected, we can go the plebeians and quick repeater. That was strange, but I guess it just wanted to throw me. Threw me onto my desktop. Okay, so we could select our image here. And let's just Teoh, maybe camera Stephen, get some camera equipment. Pictures will optimize images. Okay, Sweet. We can apply that. That's downloading damages. So it might take a second and then for title would go back to you. Let's just do product name here, since we have cameras and time and city is still the same. But if we wanted new information, we could go in and redo this time to apply new times. We can also applying the city. Okay, so now we have our populated page with their video preview windows. The only problem is it's not too obvious. These air videos, because there is no like clay icon or button in the middle of this so that we can actually do is go back and have that in the repeat cred. So if we double click in and then begin to draw shape so distressed e to put a circle to up to draw a circle icon right there, He knows it pops up on the rest of the repeat grid selected, turn the border off. And then what we'll be doing is just creating a play icon. We make this smaller, we'll double quick again and we'll get this triangle tool. I have not memorized the shortcut for that because this pretty new I'm sure there is one more red tape this and center this within our circle subject. I'm actually gonna turn the capacity this down a little. Okay, so now we have nice play icons and middle over a video. And if we want more videos to prototype a scrolling screen, we can distract that out, and you can go back to repeat er, to get more images for it. We'll take a look at how this looks. It's looking good. So far, I'm actually gonna bring these a little closer together, lets you far apart. The title of this page is also now video. We can adjust our bottom have to reflect that as well. We want our text year to be bold. This one can go back to being regular, believes then we can create. This is Phil, and it is the triangle get really small because we adjusted it before is a path so we can actually scale that back up. So it's a little more of a uniform size. Looks a little more like that. Okay, It's the next page we can create. Is there discover page, And that's actually gonna be pretty similar to this home page. So I'm gonna copy and paste this over. We're gonna rename it. Discover we're actually gonna borrow this search icon in a copy and pasted over and put it up here in the top. Right. We can actually scale this down just a little and drag this repeat down because we're gonna put some filter a filter option on the top so we could grab a rectangle there should be. Okay, we'll round it off, make it this gray on the border off. So what this is gonna be is a little filter button decreed filters to search news articles when a drop shadow again, I'm gonna grab this text right here and copy and paste it. So there we have a little filter button again. We can preview this just to make sure the size is OK. Where's that? We'll drag this now a little more. And because this is a discover page, we could actually change the articles here and again. I'll grab a copy and paste. This text in cities will be the most read articles for a Discovery feud. I'm actually gonna drop this side sound. Show this to hair. Okay, so let's preview this. Oh, so if you intend us, we copy and paste this from the bottom. So this is actually still fixed. So it's still on top of the used to be can go and correct that. Really quick and stick. Look at that again. Okay. Looking good this time. So we can cause this. Let's go ahead and update down here. We'll make this three. Actually, we can't make it a fill because it's just outlined path. But we can book it up a little this year that it selected polled here, change the specter regular border will make it white. And then 1.5 like the rest of them. Okay. So we can call this discovered. Okay, so the last one will be doing is that profile screen. So again, we could just copy and paste over the home screen. We won't be making this one scalable, so we can just bring it back to the top. And just in Now, you can select on one of these l airports just to make sure so 896 is the height. So you could go back to this and just make sure it's the correct type because it's easy to lose a pixel or to you down there at the bottom. So I'm actually gonna keep these articles in there for now. And we used these is like a favorite article section so we can create in the lips. That's kind of like our header. Like the profile picture. Delete this home text. Broken duty years, actually, go look for another plug in, and if you scroll down, we should go find your user profile. We can install that. That's going to do for us is filler image here. Turn the border off. Were they used Ramage and apparently kick us toe desktop again? So we automatically have an image to come in for easier here, which is a pretty cool feature. Um, and we can copy and paste this trip, Miss read text again. I just despise having to create new text box. So well, type of just a random name for this. And then there could be some profile information or something under this, but will his type? She was a member since 1966. We're in run old app. Here we were the first, so we'll actually make this 16. And amenities, it's still light as well. So we get a good contrast. I bumped this one up just to hear, okay. And then what we're gonna dio down here is actually show online to break up these two sections, and these will be hurt, like most liked articles, or recently read civil copy and paste this text over and then we'll change this down About 16. Should be good. Copy and paste this again. Bean paste it one more time. So there's gonna be three sections in this profile so recently Read likes we'll send you this and preferences, and then we'll write a line that to this, Make sure this is centered. Then we'll turn our great on just to double check everything that they were just. And these two aren't selected right now, so we're actually gonna make thes I liked and again will adjust this slightly because the sections selected we're actually gonna put in underline as well. So this is gonna happen. Act is like a tab bar, and we'll put you to you. Okay, So in addition to this, the profile Russia gonna throw in like an overflow menu, So this could be anything like profile settings. Your stuff. You can go in and get, like, help so we'll create the lips progressing. He we'll drag a small circle here on the border off. We'll actually use repeat grid to create. This little icon will drag down, then adjust the size that created. I'm actually gonna make this just a little smaller. Maybe just at there. We go during the great back on to make sure it's in the right spot. It's helpful to if you like, you can also bring in like the native you. I my gun over here, I can get you rackets and get apple IOS, IOS or Google material. Whatever you're designing for and can actually pull in the header. Eso. You have an idea of how far up you could go that running into, like, battery or WiFi settings? Just a quick note. Not always necessary. But it can be good to have for reference. But just now there has to be some space at the top for that stuff to go. So we'll rename us profile. Then we also copy and paste this over, and we'll just go ahead and just give a subversion for likes. So we can drag this over, scale this down and then make our likes section bold as well. And we can change this to light. Here we go. So now she's recently reds and, like section all ready to go. It's another. We have our user profile set up. We can go and I just this bottom knave again, change that 1.5 and then highlight airport file. I don't want to do that again, so I'm just gonna delete it from here and copy and paste it. Ever save a little bit of time? Okay, so we have our home page or video page discover in profile. So that said Fowler, about it. Now, the other thing and the final thing will want if you is like a mock up article page and all I did there was just may have those airports Riches said they're nice, and even we can actually just copy and paste this home page. I'm gonna go ahead and delete this grid, actually. Good. Delete the bottom now have to you. So this would be taking us in a new page so we won't need the bottom half year, But there will be a nice big image on top. How? Copy and paste this text over and then create some space for, like, a two page title. I just got a copy and paste this name over there. Just so we get an idea how much text can go in the space and then underneath will have who published the article. We can also put, like, maybe an author or something, just just some way to realistically give credit here. Then we can actually copy and paste back over here our time and location. Okay. And so we're gonna want to do here. It's actually fill it with text to simulate that. It's an article you have to do that one more time I accidentally had escaped. So another plug in we can use It's actually called or, um, Epsom. So basically, that's going to be placeholder text. You can sell that as well, if you like. I find it pretty helpful, and I will yet again have to draw a text box. So this is part of the reason I hate using drawn text box that prefer to copy and paste stuff over. But that is just so strange. That's throwing me to the desktop. See, just more validation toe always just coffee and tech. Copy and paste Text over. Can't stand the text settings EC text editing stew tool to make this regulator and white the size 16. So now we will fill this with placeholder text. Have to accept answer text. Okay, so now we have plenty of text is a placeholder. An article can actually drag and drop down here and include another image. Teoh, maybe a little smaller Tracked this down a bit, then copy and paste for a second part of our article, we can actually have a subheading as well. I want his name, this betting. And so at the end of our article. We actually I would also like to put a related articles section. We can make this text smaller and just copy and paste this over, so we'll have to drag this down. And you could make this scroll further if you wanted. We'll just do two articles and has an example at the bottom. You can quickly preview this. It's got a decent example article there. Close this out during the great off, and you can feel free to throw in some images here to you. What I like to do toe make it a little bit a little bit more realistic is you could just grab actual images from an article and just kind of plug that in. I grabbed this one just some images about, like real estate around Atlanta, and you can fill in some of that information if you need. And again, this is just some random article I essentially grabbed from the Internet. But we will go ahead and give it a nice title that's more believable. It also allows us to put some published publisher information so we can look at that once porn in the last two things to add will be a Baquero and also maybe like a share icon so we can turn a great back on. And then I select p for the pen tool. I'm gonna draw first line on hold, shift, draw the second. And then there we go. That could be our Baquero. So I'm actually gonna make this size three, which in this crate off scale this down a bit. And then if you notice it's pretty hard to see that white arrow on the image backgrounds were actually gonna create a relay. So we hit our for a rectangle, and we're gonna make the Phil black here. Then drop the opacity down, and then go ahead and command shift left bracket and send that back and make sure this is forward. Good are layer panel to make sure everything's in order. So the path is top of the card it was. Make sure that's in the proper spot. Actually, just rearrange Starting, please. There we go. That's a little more believable. Maybe a little member could 33 looks good. And so now that we have our back euro, I can also do like a little share icon. What would he was great in the lips will be drawn. Three circles. We can actually do Skopje and paste this over as well. Turn the border off. It will make these little smaller copy and paste that circle copy and paste it once more. Then we'll actually adjust the size of this a little and stretch this out. Then we'll group all this together, scale it down a bit, have to make sure to go into edit this line as well. Maybe two looks OK, and then what kind of put it in a similar size? And I have been the great up. Make sure it's a good point. Now we have a back and chair icon. If somebody wants to share their article, okay? And so that's pretty much it. For all our screens. There would actually be a lot more screens and a regular application, but this kind of covers some good ground good foundation. That gives you some basics on how to create multiple screens pretty fast, especially with the repeater tool. And the next thing we can get into is prototyping this and then adding some animations. If you wanted to use it for, like a highlight reel or something of that nature
6. Creating the Prototype: Okay, so now that we have all our screens designed to your, we can go ahead and start creating the prototype on Weaken. Select every to this pretty typed out of the top, and we'll start with our splash screen and one thing to know There's not actually any buttons on the screen, so we're actually gonna want a time transition to a sign in screen, and to do that will select the art board and at the top will have this time option. And now quick mount time options only available when you select the entire art board. It's not available if you select just a singular button, but for this that's fine. So tap time. And so we want its transition to our sign in screen and about 0.3 seconds, and transition is fine. Sign in, dissolve. He's out. Also, if I'm so, it's playing. Seeing that looks okay. So it's really pretty quick, which in reality is fine because you'd never want to splash screen to be there longer than I had to be. But just so we get a better of ideo what it looks like, we'll go 0.8 and look at it. One more time. Okay? It's this escape there. And Alex Good. So far. So the next thing we can dio is connect our sign up. But since this flow the user doesn't have an account, will be going to create account so we can select that button and we get that handle on my contract that over. And so over here we look at the triggers tap actions, transition, which is fine. Dissolve these out 0.3, all fine. So if we look at this, it's like, sign up and then we get to get to that next page, which looks fine. Let's back out of that and we'll minimize this for now. And so we can use this process to really connect. All these screens will select that create account button and go over to our welcome on boarding screen. And so everything checks out there and a quick now, so we want people to be able to actually interact with their on boarding screen. So what we're gonna do is create another screen here to simulate these are these topics or being selected so we can actually copy and paste this over and switch to the Zahn tab and let's say hard new users really interested in pants? That seems fun, eh? So what we can actually do is simulate that this was selected and if you notice I changed it and its own repeat grid. So I'm gonna undo that We're actually gonna own group the grid here. And this way we can edit each individual selector. So let's at it, pants. We'll turn this green and also to in the text screen. And just to add a little more you I so it looks like it's actually selected. Will also put a circle in the center. So impressing he and then option shift to drag a circle in the center. And then we also fill this with green as well. And so since some things here is actually selected will make this but active as well. So we'll double click in, make the screen and change the text a pastie to 100%. Then I'll actually select all these art boards and shifting back over. And so we need to remember to go back to prototype and connect. If the user selects pants, why don't know why they're that interested in pants, but teach their own so tap transition. Dissolve these out is all fine. Let's take a quick look at that. So if we go here, select pants we have, our topic is selected, it becomes highlighted and our button becomes active. So that's good. And if we want to, we can also add one more screen and just replicate the same process. Because maybe someone's interested in more than just pants. They're also interested in bacon. Yes, always good. So I can actually just copy and paste this over and I'll tell a quick and here paste and noticed I double clicked in, which actually added it to the specific group. If you just copy and paste it over the top, it wouldn't be added into that group. Just a quick Newt there. Get it to about the right side of the right space. Change that to green as well. And then we'll go back to our prototype tab, dragged us over. Then we can ease out 0.3 that transitions fine. And we can also go hadn't connected to our enable location. So it's actually Travis from the top. So we're gonna sign up. We're gonna create an account pants, bacon, the perfect combo, and then we can go next into enable location step so close out of here. And then after we do this, we can connect our enable location, and that should take us to our home page. It's just preview really quick, and then we're on our scalable home page and we have our knees feet that's come up. Okay, so the next thing to do is connect this bottom tab so you can actually select both of these groups and group them together. And the reason I'm grouping on this because I want to be able to quick on the entire element just one thing, because if they weren't Group D D, they have to click on video or the icon to make the bottom half work. What we want to tell work together. So I'll just group these elements as I go and you'll notice is, Well, if I group them, they actually are no longer set to scroll, so just make sure that's top go back on and we'll go in and do that for each one. It will drag each one of these lines ever to the corresponding screen, and then we can do the same for the rest of these. And then we're shared a fixed position while scrolling. Each time we do it, - I'm using command G to greet each of these elements. As I go, I'm gonna make sure to have picks position. It could be pretty tedious connecting like a bottom have on all screens. It just just remember, there's, like, small elements you have to remember to do each time, and then we'll get to this last one. Well, actually need these at the same time. Okay, that should be good. And a quick shortcut. You can press command a and see all the credit tight lines you've created, and we can just take a quick look through and make sure everything's connected and it looks good. So we'll try this out. Preview. Yes, Everything's looking good here. I agree about the jump around and kind of simulate. What about it? Now would be like And if you remember, some of these elements are just copy and paste it over. And if you wanted to, you go back into repeater and get new like titles and images. But it's not really super necessary. It should be clear enough that they're different But if you'd like to do that, you can use the same steps we went ever before To do that pretty easily. So that everything will do is connect this likes tab to this one and then recently read back to here. We can PV that again. So for this one, we're actually gonna update these articles just so it looks like we're actually clicking to a different screen. But that should be really quick to Dio with the repeater plug ins will go back into our plugging menu grabber, Peter, selecting your edge looks good. So apply about and the no selector text up here. No, I guess so. Now we have different, like, placeholder text name images. So if we go in, previewed this once more, we get some nice differences, so it actually looks like recall into a different screen. Okay, so now that Stone will also connect our fake article here as well, and we'll do this with home page, so I'm actually gonna borrow this image. I mean, a copy and paste. Here, do this every laid back over. We're actually going to go ahead and unread with this good, and I'm going to replace that copy and pasted image right here gonna end Greep everything. Actually, we're going to scale this down, get it to about the right size. I'm gonna send this to the top of command shift, right bracket, and then we'll go. Appeared object. I lied. We won't do that. So what I did there was just flip the fill off and make it just a border. Looks like to me. If it is, I'm just a complete liar. What Will actually Dio is completely back step. Okay, so we can actually go over And what we'll do next disconnect article with our fake article page here. And to do that, I'm actually gonna grab this image and just make it the same image in the first article. So just copy and paste it there and we can angry this grid and what we're gonna want Mr also in group this and then we're gonna want this shape back. And since an image has already been in this, we actually can't use it as a mask. But we can retrace the shape really quick. So a press already and any rectangle up hold shift to drag it across and then match it without shape. Right there and again. I'm holding all to pull this radius in again at the top to get it to where we need it. We're going delete this older image, and then we're gonna copy and paste that image over here. Scale this down to about the right size scale up just a little. Then we'll actually use command shift left bracket to send that to the back, see what's going on. We'll just grab go over here on the layer panel, actually, bring this the top. There's a rectangle so select movies going object and Masco shape. Then there we go. So now we have our article picture in this example, and we can also grab the title to so you can double quick here, copy and then paste the title over to our home page. And we'll also change the city name to you so it matches. So now when we got a prototype and select this car, we can drag it over to this page, check in the preview window. Here we go. So now we have our article here. We need to connect this back hero as well. Okay. And so for this predator at what we're actually gonna dio is use the auto animate tab instead of just transition. And basically, what that's gonna dio is that's gonna make this image fill in the space that this image takes up. And the way w x d does that. Is that because this image is named the same thing on this page, it will just Tween between the art boards. So you notice how we got the text to move because we use the same text. So we want the same thing to happen with an image. We take a look. Here are images actually called mass Group one. So what we could do is copy and paste that ever and will slide over, lay out of the way here we can delete this image, select Dart Board and then paste what we could do to scale this up so that it fits. We're gonna double quick end, adjust this radius to go all the way out, and we'll make sure it's centered on the page. And we'll also use command ship left bracket to send this back on. Drag our overlay back over, make sure it fits. Then we'll sit this back as well. So I'm just using command left bracket. And then I'll send things back 11 place instead of command shift left bracket that extended to the bottom. Okay, we're actually going to do it's quicker to this art board. Check that one more time. Okay, So what happens is we get a nice affect. The image them is as a nice effect, like populate the space now. But actually don't want the text to jump like that. I just want the image to do it. So what we can do is actually go in and rename this text to be. The title is fine and we'll need the same Atlanta should be fun, and that time will actually change to time. I lied will change that to city double click an city. And the reason I'm changing these names is that Debbie XY uses the layer naming to actually decide what it out of animates. So if I have something that's Atlanta on this, our board and on this art board, something's also named Atlanta. That's what it'll auto animate. So that's why going back and changing the names King can improve animation quality because sometimes you'll get things that you don't want to animate. But that's just because they're named the same thing. So a quick over again. Okay, there we go. That's looking good. And if you'll notice were actually getting a little bit of like some were layer issues happening here like it's scaling. But then layers aren't coming on properly. So what we can dio and part of that has to do with what we're adding On this page is an overlay and these icons. So one way to get around this is actually put these elements so we'll copy and paste them on to you the home page so we can copy and paste this over. But we'll turn the capacity to zero. So if between now. So because those elements were already on the home page, it was actually a much cleaner animation and that we don't get that weird like layer distortion happening because things were later differently then. So if you scroll down, everything's looking good, we can go back and we'll check them over time. Okay, so that wraps it up for a prototyping section and what we can actually do you is we'll just take this from the top and make sure everything is the way we want it or sign up, create account. Then we'll choose pants and bacon we got next. We can enable location here. Just a quick Now, when you would actually hit this, You get the native you out to pop up, so you'd have to have another notification screen. We can scroll select article. He's the video tab. Proof. Oh, check our legs spent wraps it up for this section.
7. Sharing the Prototype: Okay, so once we get a prototype finished, the next thing will want to do is share appear. So if you ever hear you can do share for review or share for development, we'll just be doing share for review in this tutorial, so it gives you the option down here. Anyone with Lincoln view anyone you invite, who's go? Anyone with a link? You get a couple of their options like allowed comments, show hot spot hands, navigation controls Israel find right now and go and create Link. And sometimes it takes a second to get finished. And then down here we can get a copy, link her to step it up. Put this Monday over so we get are pretty tight. Cling to come up well, just full screen. This. We can actually go back to the splash screen because we have a time, the animation on it and there's animations will show up in the Web browser as well. So if we click home, here we go and then you can click through your prototype just like you would using an on your desktop. And this is really helpful to be able to share your prototype with anyone, Um, all they have to have. It's like WiFi and a Web browser, so it's very nice to be able to share this way. You can also get people depend comments on each screen as as needed. Just a quick, cool feature to send this around. And you can also open these up on mobile a swell. And so if you ever want to send it in somebody you consider a text message with the Senate , and it's pretty cool to share it that way, and I would still also encourage everyone to preview it on your phone as well.
8. Outro: Okay, so that about wraps it up. Once you get your prototype together and again, I encourage everybody to stir previewing it on their phone and really interact with it there because it really changes. It changes the work. You dio you start to see it in context of the device and really get a feel for things that wraps it up. But if anybody would like to leave any comments and try the class project, please Dio. Thanks, guys.