The UX/UI Design Process - Creating Wireframes and a Final Design

1. Class Preview: walk through the entire U X you I design process using Adobe X'd learn both user interface and user experience design by following a mobile APP design project from start to finish. Way will first walk through the U X process by learning the basic fundamentals of UX design and developing a wide variety of UX deliverables, including a user persona, poor file, a user journey map and finally, a user flow diagram. Next will happen to Adobe X'd to create a low fidelity wire frame and finally create a Polish design by adding final icons, colors, buttons and styling in the form of a high fidelity layout. Lastly, will link all of this together to creating working prototype we can use for user testing. Flight presentation are just a fantastic starting Peace for your new are growing U X Y portfolio. Adobe X'd is a fantastic go to choice for aspiring or professional ux You. I designers this easy to learn. Adobe software will be taught in full detail. Everyone needs to understand the foundations of great UX design and the process behind it. After taking this class, you'll be able to incorporate both UX and New I ideas and to your everyday work projects and even get a glimpse into the U X you I designers life, this glasses for everyone that includes graphic designers, Web developers, anyone interested in finding out more about the U X Y process by doing a practical, real world project. So join me for this extensive and fun journey through the entire U X ey process so you could start to get excited about this fantastic and rewarding arena of digital design see in the class. 2. Course Guide and Facebook Group: First of all, welcome to the course, and I hope this class get too excited about the U X you I design process and get two more comfortable using Adobe X T for wire framing. I wanted to let you know I have a student Facebook group, work in post projects as questions and have some one on one time with us to get feedback. We also hold design challenges in this group and to keep you up to date on things going on in the U X Y world and things that are Adobe X'd related. All I have to do is search you XY y student group and the Facebook search bar and click over to groups to find us, and we look forward to meeting you there. I wanted to take a moment to talk about the course flow. This course is broken into a couple of different sections. First part is you X theory and dives into our user persona, customer journey, map and flow charts. This is a theory based section, so it'll focus more on the process and less on the software. The theory section of the course could be found in the U X ey design process class on skill share. The link will be shown right here in the notes section of this lesson. You can also find it by viewing my profile on skill share. The second phase of our course moves into creating are Low Fidelity Wire Frame and Adobe X'd. The next section of the course moves into the design phase, where we start to add color layout and styled her design. We create a high fidelity layout and a working prototype. This class focuses more on the design process unless I'm learning Adobe X'd, although you will learn a lot just by walking through the process with me. If you want to have a detailed software, step by step focused class, I teach in Adobe X'd masterclass right here on skill share. Once again, you can find it in the link in the notes section of this class or find it on my skill share profile. Now let's dive into some UX theory, and I'll see you in the next lesson. Don't forget to join the Facebook group after you checked out the U X Y design theory course. Our lessons let's dive into creating are low fidelity wire for him here in the very next lesson. It is definitely not required to take the theory class to get a lot out of this section of the course, but it's helpful to know the UX process. We just went through to get to the point we are now we're ready to get our wire frame going . 3. Low fidelity wireframe - getting setup: welcome to Adobe X'd. We're gonna go ahead and create our low fidelity wire frame first. Then we're gonna move on to a high fidelity wire frame. We're gonna addle the graphics of the photos and the icons. And finally, we're gonna link it all up into prototype into a prototype that we can eventually test with users So we can go ahead and go back to the drawing board. If we need to tweak anything before it moves on to the very final stage after client approval, which will be the developmental stage where it'll be coated and the developer will take it over and hopefully make it a working app downloadable on a phone. We're not gonna do that very last piece, but we're gonna take you all the way up to the testing phase and go through that process with you. So here we are. Let's go ahead and get started. We're gonna hop right into this. I'm assuming you already have a little bit of Adobe X'd knowledge. Please feel free to take those lessons if you need some Adobe X'd training. So I'm going to suit me, have a little bit of working knowledge of Adobe X'd, but I'll still go slow during certain areas. So one thing that really helps get me started is there's something called you. I kids. Ah, so you know, user interface kits and can download them. And they could provide a world of help in terms of getting some of those basic blocking and layout done. So this is one that's from adobe itself, and I'm gonna show you how to go ahead and grab it. But look at all these wonderful little kind of basic layout wire frames that we can grab and use and adapt to our own designs who don't have to start from scratch. It's always very nice. Of course, you can always start from scratch if you'd like. Um, this kind of gives you a little head start with some little icons and different things that can really save a ton of time. So to be able to access this particular file, you gotta go to file up. And when you have X d open file and get you I kids and you got to go down the wire frames is gonna open up a new window in your browser and you're gonna be able to download this particular kit that I'm using. So just go to download kids and you'll have the one. I'm gonna use it just a little bit. I'm not gonna depend heavily on it, cause I kind of want to show you how I do layout designed from scratch as well. So this will just help with a couple specific spots where we may need to grab a Nikon or two and save a little bit of time. You'll notice this particular you I kit is has a blue color to it. And what I'd like to do when I'm in the low fidelity wire frightening stage where everything is, Sometimes you've been sketched out on paper. It's very raw. It's very basic. We're just getting a general idea of blocking of her layout and where things are positions . I liked it to keep things in black and white and gray. So we're gonna eliminate this color. And how do we do that? We have this entire document full of this blue color. How can we change all that very quickly? Well, as you know, these air global styles here, So if I change the colors here is gonna change it globally. So I'm going to select a couple of these blue colors. I'm gonna go to edit, and I'm just gonna slide this all the way to Grey, sliding it to gray, and it's gonna go ahead and change all of the blue. You have edit this all the way to gray, make that kind of a similar shade of grace kind of dark. And this is a light blue. Or to make that a light gray. So you notice how all of the blue was changed on here so we could go back in. There is a few little blue areas left. It might, because this isn't totally gray is going to slide that only over there we go. Now we have a more low fidelity style, and you may think, Well, that blue is not gonna bother anybody. But if our brand colors are kind of more for green color, you know it makes sense to kind of eliminate color it as you know, because clients will look at the colors and that's not my final color. So if you do black and white, everything gets to be a little bit more like a low fidelity sketched out wire frame. So next we're going to start with a first screen. We're gonna go for these. Sign up screen. It's over. This first green, we're gonna get a little help from or you I can't that we downloaded and we have several different sign up options. And so when we go back to kind of the U X process we just went through, we discovered a few areas that we need two things we need to think about when going through our log in process. And one of those things was making sure we had a quick sign up option. So we're gonna need it to design a screen that goes to be able to sign him up, get basic information. There's also gonna be a button that they consign it with your Facebook account. So we need to keep all those in play as we design the layout for this. So what kind of sign ups screen you think would work? Probably better for this app. We wanted to be clean and simple. We don't want to have a whole lot of design elements for them to kind of work through. I wanted to be very simple, and so I'm gonna actually grab this one. This is actually number five. Sign up on. And I'm just gonna copy this. I'm gonna open up a new document and we're gonna do this in the iPhone X. Of course, things can change. You could be washing this class five years from now on. Be like iPhone X. That's old news. But this is the newest one right now, so let's go ahead and do this. You'll notice a much taller screen, a lot more real estate cause you don't have the button anymore. So we're gonna be ableto have more room on this particular version. Of course, you could always prototype and show different sizes as well as we get to the end. You can resize some of these two different phone screens you could do an android is to show the client if you were to ever develop an android version of this app, you can show him how it can adapt how the design could adapt to maybe a shorter screen size . So forensic, right now, we're gonna stick with the iPhone next. So here's our side and screen. We're gonna change this significantly to make it our own. So when it comes to low fidelity wire frames Ah, lot of those times their sketched out. So we don't want to add any more details outside of this and sometimes even out it adding these rounded bubbles might even be too much. And sometimes, uh, ungrounded those let me go and right click and I get ungroomed the grid. We're just using this as a quick shortcut. We're gonna do a lot of other screens from scratch, but just kind of showing you how you can do a little short cut you some of these templates to save tons of time. So all I did is I, right? Click. That was a group element. So I just ungroomed it and I'm going to see if I can't round these corners back. So here we go. Here's our rounded corners that set that to zero. And the reason I'm doing this is I don't want to add a whole lot of style. Right now, we're in the low fidelity stage. Style is not the aim. It's about the basic utility and and how the user is going to work through the wire frame and less about the branding or style or anything. I'm just keeping This is basic as possible. So up here we're gonna have a chance to maybe put the the logo or the company name will say at name was good of this type in app names. We're just assuming some kind of photo opportunity there with the logo. There would be nice so that they know what app They have opened a lot of time to have a log in screen, and the load was very tiny. They don't know what app there openings. You have to make that incredibly obvious and also maybe color coded. What's great about layout design is sometimes people will design one big background, so they just have it all white. So let's go ahead and slide this out. We'll have it all white, maybe the logo here. But what's great, especially about a taller screen, is adding a very high contrast kind of boxier helps to break down the layout and helps the user kind of breakdown the information a little bit better. By using this high contrast boxes, you don't have too many boxes, you don't have a competing box, so let's say we have to maybe have some information down here. It starts to get to be too much and starts toe. Make the design and layout a little busy. But sometimes using those dark, you'll notice a lot of hamburger menus and kind of menus up top sticky header menus when you scroll down the usually a high contrast meaning there black if the white background is white on the rest of the screen and the other way around. And that's for good reason, because contrast is your friend when it comes to you X friendly design and you I design so just kind of I'm gonna give you kind of those helpful tips along the way. This is a little bit less about using this software a little bit more about the foundations of creating a good layout and design. 4. Low fidelity wireframe - login screen: So let's think about what we need to have on here. So we need to have kind of, ah, user name, log in a password, log in, and we love to be able to, uh, verify the password. But let's just go ahead and keep this simple and just have a basic log in. And we also need to think Is it obvious that that's you need to put your email? Sometimes it's not always obvious what you need to put there, So let's go ahead and add. I'm just gonna hold down option holding down option and dragging, and I'm able to kind of duplicate that really quickly. I just type of user name. I'm just gonna tuck that under here, and then I'm just gonna hold down Option. I'm gonna put in password who really want to make this is obvious as possible for our user toe log in, and those can be made smaller if we need to be just enough where they can read it. So, doing 12 we're not doing global styles quite yet. We're just kind of getting some basic sketching done. Make sure there's enough spacing between these elements, but we also want to make sure they're not too far apart. So if I have this down here, it seems disconnected. And this is one unit that the person needs toe to pay attention to. So keeping them close together, but obviously not so close that it feels crowded. So just kind of watch your spacing a little bit. So what else do we need? I love using dividing bars and kind of see this little dividing bar kind of helps once again. Another way to break down your layout without making it look busy. Because sometimes you'll use a high contrast box up here, and you still need some kind of dividing line or something to continually break down the information, cause this is an entirely separate set of options. So me, personally, we have a lot more screen real estate than when this was kind of put together. So we can, you know, maybe let the design breathe a little bit. It could give us an opportunity to have a little bit of a bigger picture here, so let's kind of shift this downs guitar line shipped everything down, really take use of the screen real estate you have, especially on a new or phone. Okay, So that we can go and drag this down. I'm gonna make this little bigger a little more prominent. Okay? Maybe not quite as big. Maybe just double what? It originally waas. And so now we have some, uh, kind of options here. So what I'd like to do is obviously they need to press enter to be able to submit their password pass code. So I'm gonna keep these is one connected unit, and I'm gonna go ahead and make this log in Now, make that bigger. We're not gonna worry about fought type yet. We're just gonna do some basic typography, Just kind of picking a default. Ah, typeface, Which is gonna be aerial for right now. We can always change that with global styles. Later, just go ahead. And one group of grouping this element, it's gotten any of this face. And now we have this log in button once again, we want to make buttons high contrast, So we want to make him the opposite color of their background or the opposite in terms of contrasts. If we have a white background, we love to have a darker button and the reverse is true as well, and that's something we could still explore. This in this case, is being able to know, Do we do everything on a dark background and then have everything in white boxes or have everything in a white background? And we're not quite there yet. This is low fidelity. So let's this continue to work on basic buttons. Case you're gonna have the dividing line here is kind of a different kind of option down here. Log in with Facebook. We can always color could that later with to make it more obvious than its Facebook, making it the Facebook blue color eso There's always opportunities down here to put the logo, and, uh, we can figure that out later. So in terms of the basic buttons, do we need anything else? Do we want to give the option toe log in with Google? Um, that's gonna be an option. We can always work with whatever Whoever is gonna be developing this, it's question you can ask during this process is you know how it how easy it is. Is it to get the Facebook log? And how easy is it to get the Google as well, and is it worth getting the Google log in? Is there enough users and our target demographic? They're gonna have Google to be able to even make that an option or go through all the hassle to make that an option. We're going to stick with Facebook for just right now, and we're going to just kind of took these in. So you're probably wondering, why aren't you doing this? Why aren't you put the button next to it? Well, what happens here is they get a little bit confused. These buttons are a little too close together. Ah, log in. You don't want users to ever confuse. It's It's the Facebook log in is a totally different user path that they're going to take the log in with Facebook. And so we want to keep those elements a little bit separate, not required, but just something I'm thinking about during layout process. Okay, so we can even have let's go ahead on group this, and this is probably a little too much have to stop myself as a you I kind of designer in the graphic designer from doing too much design work. I have to stop myself and say OK, I'm starting to get too much into the high fidelity wire framing. Let's keep this simple. Keep it simple. So instead of messing around with that warm and keep it just like this Okay, so I'm gonna go ahead and put a photo or logo here. It's gonna be very, very basic. So that's kind of our log in screen. You can imagine a photo there and logging opportunities. So this is where we start to kind of develop kind of work with our user flow. So as we already developed or user flow diagram in a previous lessons, there could be the Facebook log in and this sign up. So we're gonna have to go through those processes. Let's go and do the Facebook one. That's gonna be easier. And so I'm gonna go into prototype mode and I'm gonna create a couple of art boards here. We're gonna create one here and one here. So this is where they're gonna split off. So the user is either gonna go up toward the log in with Facebook or they're gonna log in now. And so as we start to do this, we go back and go Oh, yeah. We have a critical step here that we left out. What if they don't already have an account? We need to have a chance for them to sign up for an account. So that's definitely something we need to kind of incorporate. We definitely have the screen real estate to incorporate that to go and delete this extra one. I'm gonna flip back into design mode. So let's go ahead and add one more button and let's go and take kind of the round pill off this one. Once again, we want to want to style eyes things too much And the basic wire at a low fidelity wire friending stage. Let's go ahead and duplicate this button here. So this is log in now. Um, so we're gonna kind of changes a little bit, Log in with your account, and so this is gonna be sign up is a sign up foreign account, okay. Or what could you create? Create a log in? Might sound a little bit better. Great. A log in animals go and shit. Facebook all the way down here. And now we gotta think about Okay, how do we present these buttons? So we have kind of your basic log in. Now we can kind of have some screen real estate, were slide that up a little bit. Log would keep all these together as one unit because they're gonna sign in, log in, and we're gonna have the Facebook as the next option here. Okay? All right. And so create a log in. So where to have that at the bottom. And I will give them a chance to create a log in, and we're gonna do some different color options. So we're still in kind of a black and white and gray environment, but that doesn't mean I can't go ahead and take this. Go to my at the color assets and kind of show that that would be a different color. Different contrast, Weaken, Lighten it a little bit. Or we could darken it and make log into your account a little lighter. We have a lot of buttons here, and we gotta think of a way to simplify this even more so I'm gonna kind of spend a few moments kind of working with the buttons here to see if I can't find kind of a more simple presentation and layout. And I'll talk about kind of why I ended up where I ended up 5. Low fidelity wireframe - login process - part 2: right. So I spent kind of a few minutes kind of working on this play out to try to find what I think would be everything that we need on here and maybe in kind of a general right way, we don't have to worry about icons or anything specific, but I think this is good that I kind of have this log in with your count right underneath here. But also, I shifted the creator logging underneath because we want to make that a little more obvious because they don't have a log in yet. Um, the first thing they're gonna do is glance right under the log in with your counts. I'm just thinking about the user experience here, thinking about what they're thinking when I personally log in. I actually went to my phone and logged into one of maps. Just kinda kind of think about What if I didn't have an account? Where did my eyes glance to? And they go right under the log in to the account. But in so doing a little research and studying and looking at examples really is helpful in these kind of situations. I decided to put the Facebook kind of down below. We're gonna be able to have that a really nice high contrast Blue. So they're gonna Definitely No, that's a Facebook log in and kind of keep that down below. Could have been shifted a little higher. But I didn't want to have three buttons next to each other because when you're trying to sign on to this act very quickly, you're gonna be like, Ah, you just for a second. You're gonna pause ago. Which button do I press? And it might be temporarily momentarily confusing. And we don't want that. There's gonna put just enough spacing to separate those two different long and options. So great, let's go ahead and move forward. We have a lot of screens to do. Let's go ahead and do the log in with your Facebook account. So this will be a very simple screen's gonna log, and we're going to give authorization. Just gonna be very, very simple. It's gonna be authorized. Put authorize Right there. The button. You have to worry about styling or size yet, so this is very simple. Does authorized Facebook to create an account. There's probably gonna be a photo or logo somewhere in here. But once again, it's getting too much into the design sides of to kind of stop myself there. So that's a very simple spring. I don't think they needed the other options, but authorized. And then it's good God of actually log you and go to the home screen. So the next option is signing up for an account, which could be a little bit more tedious, but we try to make this as easy of a process as possible. We're gonna go ahead and grab these buttons. Just gonna hold down option and go and grab him over here. Okay, so this is signing up for an account. We need some kind of header. Go ahead and grab this here and make that a different color. And this will be signed up. Sign up for an account and eventually will need to kind of change these sign in new account . Okay. And this down here is changing my little headers. Here. This will be Facebook authorization and then log in screen log in home. Okay, great. So now start to see a very, very basic wire frame coming together. Makes you always save your work. Okay. On my computer to save this guy who don't mess up. So what we can do is I can go ahead and go back, get a little bit of assistance here. We're going to still customize it. And here's side up with See if we have some detailed information. Here's a couple of different sign up options and we want to stay consistent from a U I perspective. You wanna have kind of the same bubbles style throughout, and we're gonna get to that later in high fidelity mock ups for so for right now, it's kind of grab this area that's similar to what we use before. And so I'm just using this is kind of a rough, rough guide, and it's really for me just to grab some of these text boxes and we're not gonna need all these, so I'm just grouping. Okay, so here's what we're gonna need. And I kind of like this format that I have here, okay? And then we can also kind of see how it's down below. Kind of keep that consistency there. So what we're gonna need we're going to have a user name. We'll get there in need to set up password. They're probably gonna need to confirm password. What other things will be required? What in this Something where we could talk with the company and go, what are the required information? You're gonna need to be able to have a signed up user. And that's gonna be sometimes not. You're under your control. That might be under what the company is gonna want from users when they sign up for an account. So they're gonna want tohave une male Aiken disc guarantee you that they're gonna want to have an email for you Some way to contact you and send you promotions and sales messages. They definitely want to have email. So email, and so that's going to be in this format. So I'm just kind of copying and pasting. Cheated a little bit. I got a little help here from that. You I template, are you I kid? That's no problem. All you just putting together a wire frayed. We could sit here with a sketch pad and do the same thing. Where is cheating a little bit by making it quicker in a digital format. So user name password confirm password email. We're not gonna need data, birth or country. We want to do as little as possible, but I can pretty much guarantee that's the bare basics, that they're gonna need the security to have an email. They might even need to have a confirm email. And that's something you could work with developer on layer on its a very minor thing. Um, but as long as we kind of have the basic structure in layouts was signed up for an account , that's it. We don't want to have a whole lot going on here, and I like to keep it in the middle of the screen right about there. Okay, so that's basic. We don't need to really have anything else. Would you need to have a button? You haven't a button here. Let's go ahead and pull down option and grab the button down here and this is gonna be sign up, finish signing up. We can work on the copy writing or writing of text later was do basic buttons here, so finish up. The sign up process will have a little arrow there eventually when we get to the design side, and that's pretty much it and then there could automatically be logged in. So finish up process and log in, Let let users know they don't have to go back and and type that in. So now we have are two different splits, and both of these logging options are gonna load into the same log in screen. So when they log in, they're gonna come to the home screen. We're gonna go to prototype mode. We're gonna add another art board here. Okay, so we'll link all these up when we do the high fidelity wire frame, Get the spacing. Correct if you want to, but will have paths that go this way and pass that go that way similar to our user flow that we put together. So that's gonna come in handy. We're gonna refer to that user flow we developed in the U X process. To be able to kind of know the exact flow. We're gonna be wire finding here. So this is gonna be the home screen. We're going to spend a lot of time on this one. It's a very important screen. Everybody's gonna come back to the home screen multiple times in the process or when they sign in. So we really want to make sure this is a very inviting home screen, that they have op access to their options for their account. But they can also be sent in the right direction. So here we are. Let's do this. So the log in screen is critical. So we want to make this a simple is possible. But here's gonna be kind of the challenge is we have a lot of things we need to present a lot of different options we need to present to the user. They need to be able to access their count information, and they need to be sent off into the Discovery stage of the app where they could discover what restaurant or grocery ah, they want to use. So when the first things I want to do is kind of set up a little bit of a menu here where they can access their accounts, gonna be a sticky header, it's gonna be on every screen. They're always gonna be able to have access to this little screen. It's gonna make it dark. And let's do like a little circle for our user and have that kind of overlap a little bit once again don't get too much into the design. Have to constantly rain back my temptation to put design elements in and just keep it very basic. Soldiers assume of photos there. Let's grab kind of this text here, and we're gonna have user name. I'm not gonna gettinto specifics user name, and we're gonna need to have some kind of account information. This is where we're just gonna kind of figure out, OK, let's put the user name on the left. And we could have a simple hamburger menu so we could have as many options as possible tucked away that they always have access to. And it doesn't take up a lot of screen real estate. I'm gonna go ahead and grab a quick hamburger menu icon. I developed a little bit of a mobile app design and my UX masterclass. Another separate class I have and kind of have this developed. And I'm gonna go and grab this kind of hamburger menu because I went ahead and I just wouldn't have it. If you want to know how to create that, go back to those prior lessons on the Dhobi X'd and you'll be able to figure out how to create any icon imaginable. I'm gonna just right click. I need UN link this on Lincoln. I don't want it linked up to a previous, um, documents. Here's our little hamburger menu. Remember, We need to make this black and white and gray so doing gray, and eventually we're gonna have to explore. When they click on that, it slides out, it drops down. We'll figure that out later in the process. But we need to know that they at least have access to their accounts. You have user name, we have settings we're gonna need. This is a check out kind of app. They're gonna be ordering food. And so there's always gonna be a shopping cart icon that's gonna need to be available so they can tap on that. Either check out, see what's in their cart. They may have 20 items in the cart that need to review their part. So we always have to have give him access to their account settings via this hamburger menu . But we also need to give them a shopping cart access. So this is why the screen is gonna be challenging, because I think of all these options were giving users. We need to make it as easy as possible to digest all these different options and not overwhelm user. 6. Low fidelity wireframe - home screen finish: in this case, I'm gonna go to our little kit right here, and I'm in the U I elements and have some really candy dandy icons we could grab just for quick wire framing. We could do a final shopping cart icon later, so I'm just gonna grab this little bag icon. I'm just copying it to bring it back into our project and let's go ahead and bring it in. It's already white, so that's very convenient. Believe it's linked up. Let's see if we can't. Unlike the simple it's on Link it. There we go. Now we have access to it. Hold down, shift and scale it a little bit bigger that love to be able to have some kind of indication of how maney shopping items or in the bag. So for right now, I'm just gonna do a simple circle so that you can know how Maney icons are in there. I'm not gonna make it read. I'm not gonna add too much to it. Odd stew Number three. Just to have an example who is always nice to know how many items you have, especially when it comes to grocery shopping. It's nice to know how many items air in your cart. Let's make that a little bit smaller and make it good size. We can finesse that later. Just very, very basic. There's a little three. Our shopping cart icon. A couple things we can do. It could start to shift this around, see if we can't split up the hamburger menu in the shopping cart so they don't They're not too close to each other. You want to give too many options too close together. I also haven't having some natural separation from the options will help the user break those options down. Okay, so you have shopping cart on the right hamburger menu on the left, and that makes sense. Shopping cart I always put on the right because people are so used to the shopping cart being on the right. It's almost no question that that's where it's gonna be so just kind of based on user behavior. In the past, I'm having having that shopping cart on the rights very useful, and many system on the left. I think people are used to kind of being able to access on the left side. Ah, so we'll kind of finesse we don't always have to have a profile picture. I think in this case it could make it a little bit too many elements up here is all they need to have your user name and little screen. So we're gonna kind of assess that a little bit later to see if that's if we have room for the photo or not. And so here is where we have a lot of opportunities and flexibility with their layout. So we have all the essential items they need to have access to. The sticky header is gonna be on every screen you see from here on out once they log in and get to the home screen that that sticky headers gonna be there, so that's gonna be consistent. So now here is where we have the option. Here we went and did Are you x research? And we determine that we want to be able to send people to the right direction right away. So there could be two main options a grocery delivery option and a restaurant delivery option, and we want to send people toward that pathway as soon as possible. So the way I thought about is having a nice visual, just a picture. Nothing too crazy of each one's and having grocery. And then we have the other option restaurants available. Whoever simple two options set up here. We have restaurant on the top of grocery on the bottom, and when I do kind of a low fidelity mock up, I'm not using any photos. So a lot of times when I do photos, I'd like to stick to the same shade of gray so that you can kind of understand it. That's a photo. Some people, when they sketched, will kind of do the X kind of lines across the box. You can indicate a photo, whatever you want to do, whatever you feel comfortable with. I'm just gonna kind of make this kind of a darker shade to indicate a photo. So that's it. We can kind of close the gap here a little bit with this. Make sure that the right size, but once again don't spend a whole lot of time on it. You're just doing a rough layout. You keep saying that, but I always have to stop myself because this is not gonna be ah and approved design. We're going to go back and tweak this as we talked the client as we do more research as we go back and tested out, there may be some significant changes to this. So you don't want to spend a lot of time on something that may end up being changed significantly moving forward. That's why you don't do a lot of the low fidelity wire frame going to leave that excess. So is this. Everything that we need would go back to our user flow. We can kind of review the UX documents like our persona. We could do our customer journey mapping kind of think. Okay. Is there anything else we need to include looking at that user flow if this is why we develop user flow before we get into a wire framing? Because now we kind of have a great idea of where the user is gonna be going, where they can go and what options we need to have. So let's go ahead and send them to two different directions. We can send them to a restaurant. They could get a list of restaurants or they can get a list of groceries. So let's go ahead and create the next green. We start to go a little bit faster, okay? And they're also gonna have an option appear and what we're do. We're not gonna duplicate that yet. I'm gonna create kind of the lay out for one of these and duplicated, so I don't have to do the same layout twice. So let's start off with restaurant first and I'm gonna switch these around cause of my user flow. I have grocery up top and restaurant down below, so it's going to keep that same format, So this will be the restaurant will list. So they're gonna click on restaurant, and this is what they're going to see. There's a lot of things that we need to include here. We could include some kind of photo spread. Zoom in here school switch back into design mode. We could have a photo here that has kind of restaurants. Or even better, we could have a map, just like in our user flow. We're talking about the idea of having a map where they can kind of see how closer restaurant is to them, so it could have restaurant map. This will have 10 points with the kind of the top ones and you're within a five mile radius . I'm gonna want have a list. We don't want to have that map to be too big because we don't want to take up valuable real estate. But we can always have an arrow here to indicate that they can expand the menu or the map outwards. We're going to have some kind of icon to let him know they can expand the map out to take over the whole screen. Okay. And we have a little arrow here that we can use copy and paste and have to be the perfect icon. Doesn't matter, cause we're gonna end up changing it at some point. That will be some kind of indicator. I can always unlinked this. And I could even edit this icon if I wanted to, just to kind of make it a little bit more of a downward facing arrow. Okay, so that they know they could pull click on that, and it's gonna kind of expand across the screen. This will be a restaurant map or just put it right there in the middle. So now we have need to have a list of restaurants. I'm going to figure out how they're gonna order it and how they can figure out the order so they can order it by relevancy are the most relevant that can order it by top reviews. So we're gonna need to have some kind of search kind of area pier where they could filter filter out everything and then we need to have the list itself. We want to go ahead and do this filter restaurant area. I don't want to take up a huge amount of space because we need to be able to at least list for restaurants on the top half of the screen. So we had to have filter restaurants here, just kind of a simple tag. And I'm gonna do a couple of boxes here to indicate ways that they can filter. So we have to think about which, which, how we want them to be able to filter. Ah, well, the 1st 1 is by reviews. Let's go ahead and make your little review bubble. Bring that up work so reviews our ratings, just making this button perfect cause we could always go ahead and do the repeat grid tool and create the other ones And we also want to have a little indications that kind of way they can go ahead and have a drop down menu option here, right there so they can click. So let's go ahead and get our little grab. Our arrow here doesn't have to be great. This is an indication that they know that this could be a drop down menu option. We always want to give people that indication of what it is. Okay, so that's kind of your ratings button. Really? Roughly done. What else do we want to do? Let's go ahead and click on the repeat. I'm gonna go ahead, highlight all those elements, and then do the repeat grid tool. And let's just go ahead and do three for right now. I don't want to give people too many options, and I'm gonna on right click and one group the grid. So what are some other things we can, uh, kind of do here for people to filter out? So you have a ratings you have E t a. Do you have estimated time of why we have this map that's gonna list how long it's gonna know, uh, cut of your location And so as we start to develop that kind of idea of e t A. When you sign up for an account, what do you get? A need to know? What is this app gonna need to be ableto have to develop that ability to show you how long it would take a particular restaurant to deliver to you. They're gonna need your dress. So this is where you go back to this original sign up and go there. You need to type in their location or they're gonna get need to give permission to Geo locate you. So that's kind of an option we need to start to flesh out and something that maybe could have been developed in the user flow. But it's not something I thought of during that process. And that's okay. You gotta have any not to think of every single little trick to put into your user flow. So let's think about that. We have two options. We can have them put in their account address information, but I think it be better to geo locate Ah, that person because they may be at work and one order food or take out delivered to their work. So instead of having a tied to one home address, so we're gonna go ahead and to do some research, figure out what's the best way to kind of present that in the process, and I'll be right back. 7. Low fidelity wireframe - the listing screen: doing a little bit of research on this issue. I thought it would be best to have a pop up screen upon either logging in with Facebook, logging in or signing up for an account. So right before you get to the kind of your home screen you're gonna have a little pop up module are motile that's gonna pop up and have you, Ah, allow access to Geo, locate you to find your location and always have a click. Always allow. So they don't have to have that every time they log in, which would be very convenient for repeat users. So what I'm doing isn't kind of tucking the screen right here in this location right where it needs to be, where it's gonna pop up. Right now I have It is a separate screen. But when I start to link this up and prototype mode a little bit later in the class, I'll show you how you can, um, kind of indicate a pop up. But this isn't gonna be a separate screen. It's gonna be over laid on top of either the screener, this screen, whatever they log yet it's gonna be a little extra smacking to be another screen, but it's gonna be a pop up on top of you through the screen of the screen, and you can indicate that and you're prototyping and preview mode, and I'll show you how to do that a little bit later. So we have that kind of critical step. And it was great that we did that because now the APP has access to your location, so we can now list it by how close? How are how quickly that restaurant can deliver to you, which would be et A, which is a really unique kind of quality. And we have to kind of contact the developer is if this gets approved to kind of see how possible that is, is it realistic to be able to search all these by ET A. We really would love that. If it's too expensive to code, we have to kind of dropped that idea. So it's kind of neat to kind of think about this early on in the process. So if we need to contact kind of who would be taking this over, who would be developing this encoding this, we could start toe, involve them into this planning process so we don't throw them any surprises and go away. We can't do that. That's too expensive. So being able to cut up work through these issues and bring other team members in early in the process will help everybody. So I don't want to give a whole lot of option because, as we did, are you X discovery kind of stage where we talked about her user persona? They don't have a lot of time. We got a two year old Marler lap. They want to order dinner. The really tired. They just worked all day. So let's not throw terms of options for we don't want this to be too complicated of an app . So let's just keep it to ratings and e t. A. And let's also have a search button because you know they're gonna wanna need to search what restaurant they want because they may have an idea. Oh, I love you know, Texas Roadhouse, or I love McDonald's, and they want to be able to search the name. So let's have kind of a simple search button, and this is not gonna be a drop down menu. It's gonna have a little glass here, So let's go ahead and find a quick icon so it could indicate that that's gonna be not be a drop down menu. Let's go to our nice, uh, cheat sheet here, make of the icon section. See if I can't find a quick little looking glass, magnifying glass, Whatever you wanna refer to, there's one that works perfectly for what we need for a low fidelity wire frame. We have to worry about brand styling. So we have a little search. I called here and we could figure out location of that later. We just want to indicate to the client or whoever is gonna be reviewing these documents and approving them that that is gonna be a search option. Go ahead and unlinked this so I could just make it a black and white link it and then I'll be able to have access to the color. Just gonna make it that color. So that's it. That's all we need for filter options. And now we're ready to start doing our restaurant list. So now we're thinking about the restaurant entries, and we want to be able to fit a good amount on here so they don't have to sit there and do their finger and flip up all the time to scroll down. So we want to be able to fit at least five or six restaurants. But we don't want it to look crowded either. So we got to think about what's the most essential information to put on a restaurant listing, and we explore that a little bit during our process. But this is where we really get to figure it out and get it into a little bit more detail. So it's Gwen Zoom in and what I love about, um, Adobe X T. If I wanted to go ahead and have this finished one and duplicated over and over, I could issues the repeat grid tool click on repeat grid, and I could go ahead and easily see how many of these I could fit on the screen so that repeat grid to will save you a ton of time. So let's think about this. We have a search rating, so we want to be able to search by ratings. So let me see if I can't grab a star icon or even just design one here real quick with a pin tool. I have my little star here. See if I can't replicate this it at the right side. Let me do it a little bit higher contrast here. And we could think a little bit about the shade of the color. Not necessarily the color, but maybe the contrast of the color. So we can kind of think about maybe doing a fill for listing a really light gray, Um, Or in this case, we could even do a little bit of a darker gray background. So I'm just gonna hold down, option and duplicate this and bring it down here and do kind of a really, really light gray and then do this box white so that really kind of pops out a little bit over the background. Just helps the user see the listing over the background. Background doesn't have to fight against the listing. Let's make these stars just big enough where we can see the rating, and what we could do is we could do ratings as in having to show five stars. If it's a five star, we have to think about the kind of rating system we wanna have for this app. So we're gonna stick with Star System because I think we're going to grabbing some of this from another rating website. Plus, we're gonna be grabbing on information, so it's got to be something we can work with it. The developer could pull that information from So once again, another opportunity to talk to the developers. Figure out what's the best way to display our what's the best way to do the rating system so we could do that. But look at how much real estate that takes up those five stars is a five star rated restaurant that's taking up way too much real estate. So one thing we could do is have the star indicate a review, but have it in an American system. Let's make the star a little bit bigger, make it more obvious. Make it a little bit higher. Contrast. Let's add kind of a dark color to it, have a syndicate rating, and then we could have a numerical system. So let's duplicate this and let's say, 4.4 out of five. This will prevent us from having to do all those different stars, and we can have our rating system here. Let's have the rating system be on the right is the most important information is going to be the restaurant name and the kind of restaurant it is. And now that I've just mentioned that you're thinking of, Oh, this is where we constantly go back and forth This is part of the low fidelity wire frame process. You're constantly going back and adding things that you forgot or getting ideas and trying to incorporate it. Because now that I'm doing the rating I'm realizing and I just mentioned the restaurant type, wouldn't it be nice to go ahead and have a restaurant type filter where you go? I want Brazilian food. I want Mexican food That's gonna be really essential when it comes to restaurants so that it is an option we're gonna need to incorporate into our search area. Let's go ahead. I know we want to keep that simple, but I think just adding one more, maybe not making this box is big. We could go ahead and squeeze that in without having to do a second row. We'll see if we could do that without making it look too cramped, and we're gonna have to figure out another name for type because that's not very clear. Um, you want to do Ah, restaurant, um, theme restaurant type restaurant, style of food. So let me kind of research what would be kind of the best name for that category, and I'll be right back. 8. Listing Screen Cont.: you'll notice. I'm constantly going in doing research. And this is when you do low fidelity wire friends. You're not just putting things together constantly stopping the process, doing research, maybe talking to your client and going back and forth to try to get this to work. It's not just gonna be designed all in one day. So what I did is I went to the my nearest are my biggest competitors, which is grubhub, which does not have local delivery, but it hasn't more in bigger cities. So I kind of saw what they had and they called it cuisines. Which makes sense what kind of cuisine you have. American Mexican sandwiches, that type of stuff. So I got the idea of cuisine from them and being able to kind of log into this app and study it and kind of get some ideas. I also noticed they have the same future I was wanting to incorporate with mine, which is delivery time. So being able to kind of see how they handled it, not necessarily copying them, but just getting kind of ah, some fresh ideas and and they have already implemented this. So it's just nice to see kind of a finish, lay out exactly what I'm trying to do. It really helps generate those ideas. So let's go back to our listing. So we have our rating. We maybe want to find a way to divide this a little bit. So let's just get a little dividing bar, because when you have great layout designed when you have a lot of different elements together, it's always nice to have dividing bars. High contrast boxes ways to break it down so that the user can kind of see how everything's nicely categorized in a tight space. So let's make that low contrast. It's make that really light, Gracie. The low contrast here and I will refer to contrast a lot in this class you want to be able to make sure you could have a long name or short name, and it works well in that space. So a lot of times when I do names, I do pretend names. I do very long names just so I could have the worst case scenario in terms of how much room I'm gonna need to fit that long name because you have this beautiful design. But if you don't leave enough room for the restaurant name or the data that's gonna be plugged in there. The developers could have a hard time working with your design. You wanna make sure your design is flexible? It could work with lots of different lengths. It's a restaurant name we don't like. We need to have it quite as large, but I like to keep it bold. We're gonna have to have the style of the cuisine. So you gotta have Mexican do a left alignment and just get this under here to have a restaurant name. We have the type of the cuisine, We have the rating, and we also want to maybe put the e t A as well, if we wanna have how long it's gonna take to get there. Which is kind of a neat feature of our app we gotta think about Is this gonna be possible from a coding developmental standpoint, because they're still gonna need some information to develop a righty. Ta. If you order 50 enchiladas, it's gonna take more than 10 minutes to make 50 enchiladas. So we have to start to think Is this possible? Can I get a t t a at this point or two after weight until I go to check out to be able to get my TA there. So we have to think about that as a possibility. Go back to developer and brainstorm. So is able to do a little bit of research. And I realized that, um, let's not doing ET at this point time. I don't think we're gonna have enough information to have a realistic ET A, especially from local restaurants who may not have time to give feedback of how busy they are. It's just not gonna work out, I think, in the local area, unless it's a big restaurant chain that has the logistics to kind of handle that part of information. So I'm just putting location away from the geo location of where you're at currently, and also when I'm thinking about finalizing this little block to be able to replicate it, making sure I have enough room for a very long restaurant name and I'm not sure that's enough because there's some pretty long restaurant names out there, so we need to be able to know that it could collapse down to two lines of type and have enough space here, so it doesn't change the size of the box. So that may mean we need to tuck this down lower so that this can all shipped down by one line. So we just need to make sure our box is gonna be big enough. Developers really, really good to get. Appreciate that, um, to have enough space for them to have collapsing lives of type. Kind of keeping the developer in mind. It'll help out everybody in the process. You're sure we have enough to fit course. We could always make things a little bit smaller. All right, so now you can have two lines. Their school had believed that. And let's go ahead and took this back in. We know it'll automatically collapse. We have enough room, so great. So if we feel happy about this, I wanted to have kind of an indication here on the right, maybe a high contrast color, branded color or red, or something where they can indicate that they could go to the landing page of the website or of this restaurant and start to add menu items. So I think we're ready to replicate, so I'm gonna go ahead and just group this one big box together. I don't think we need this guy over here, so I'm just gonna be grouping this bubble together and we're gonna go ahead. Do repeat grid tool. I'd love to fit. My goal was five. I'd love to fit six, but I don't want it to be crammed. So let's see how six looks. We can go ahead, go in the columns and collapses. This is what six would look like. I don't think that's too crowded. We could always go back and add just a little bit more room. So we're gonna be adding 10 pixels between or 12. See how 10 pixels between each listening looks And I love kind of the how the background has that light grey because it really helps kind of that white pop out better If we didn't have the gray, everything starts to blend in. It's hard to differentiate where the the restaurant listing is in the background is. But just having that different color helps tremendously with being able to find and break down that information. So let's find to this just a little bit. Remember, we don't want to get to heavy into the design side of things. Let's shift this over. I just want to make sure everything is lined up. So we have the search lining up with the end of that. So everything kind of has a consistent look. Same thing with here. Maybe we could go ahead. Took that together so that this left side is aligned to the restaurant listings. So I wanted to kind of get a white background there for the bubbles who's wanted zoomed out at a hard time finding them. They were blending into the background for the same reason as these were having a hard time showing up on a white background. So just kind of giving a little bit of contrast between that background in that background color zooming out. Let's get a good idea of layout. Is everything easy to find? Could I read the restaurant name clearly doing all the elements digestible, easy to read, to understand. Dwight have the right icons to be ableto indicate that I need to what I need to do to get that to expand like this map I wanted to expand out and take over the screen is that enough indication is everything kind of easy to read. So this is what we need to kind of kind of nail down before we move on. Because the further we get into the process, the more we're going to really start to get an idea of how this app is gonna flow. And when we start to do the high Fidelity layout, what's great about doing in an Adobe X'd as you'll see how quickly it is to make it a polished branded, um, design afterwards because we're gonna literally drop in. Photos were gonna change colors, and it's gonna really start to come to life. And that's what's so need to do high fidelity of wire frames of my favorite thing to do. So we're getting there. We got the sign in screen. What's wonderful about this is this side and screen for restaurant for grocery. It's gonna be the same thing, so I can just copy and paste this our board and have a go up here. So this will be a branch of decision and the wire framing kind of user journey, and they're gonna click on a restaurant and go down to restaurant and continue on to the check out process. Ah, they could also go grocery if they wanted to. So it's nice to show that wire frame option. And we would just switch all this out to grocery for a markup purposes. Remember, Sticky Header is gonna be on every single screen. So here we are. Here's what we have so far. Look at what we've done already. We have a slog and screen logging options. We have a pop up box to help us get the information we need from the user to do our search later on, we have our grocery restaurant options. We got them to either grocery or restaurant. And now we're ready to do the restaurant landing page. So they get a select one of these options. Maybe the one that's the highest rated. Maybe they're gonna click on ratings and click on highest and click on the top one. Then they're gonna go to the US landing page. We're just gonna be next. Let's go ahead and copy and paste this. So we're gonna cut to keep the, uh, this little box here. And instead of making this a map, we're gonna have a map. Later. We're gonna make this a photo of the restaurant. We don't need these filters anymore. He's dropped down filter since delete that. Not gonna need all of these options and what we want to go ahead and start having the menu kind of in the same style. So I think that's exactly what we're gonna do. One on group this grid. And we just need the very top option so that we can go ahead and customize this. So now we have to think about what we want on the restaurant landing page. What's important to see after you've kind of wanting to explore the restaurant Ah, photo of foods that you can scroll through were probably the thing that I want to know. I want to know what what are the entrees look like? How did they look? Appetizing. And so there's these photos could be kind of a sliding thing where you could take your finger and just kind of have a sliding carousel. Let's do that. Let's kind of indicate, Ah, carousel. In a way we could do that. It's having a couple of repeat. It's going. Take border off repeat circles that indicate how many photos are available to scroll through. Okay, this will be a little education. And maybe we could have an indication. Where you, Steve? One photo. Put that in the background. Let me make this a little bit darker. Not the border, but Phil. And that can kind of indicate the photo. And this could indicate maybe you see a little bit of the other photo next to it. And what I love about this that kind of gives you a little preview. So, you know, kind of what? Which way you want to swipe one of swipe left or right? What photo looks more appetizing in a little teaser on the left and right sides. That's kind of nice. Nicotrol. Those air aligned properly, we could have a be framed like this. More spacing between our photos. It's a little more obvious no ago. So there's kind of our would have the restaurant name. So let's go ahead. Duplicate that restaurant name. Need to have that somewhere. So we could have restaurant named down here kind of a header and make that darker, and then our menu system. So here's our menu. I don't wanna have maybe menu types. And then, instead of having to keep sending them. We're sending him to a lot of different screens already, so we could use pop up menus. We could do slide outs. We could do Ah, menus that expand out but not necessarily bring into another screen. Just try to reduce the amount of totally different screens the user's gonna have to hop through to order. 9. Menu listing: Now we need to think about when you're on the landing page. What's the best way to present all the different menu types you have because you have appetizers, entrees, desserts, small plates, top us have lots of different different categories, and we don't want to overwhelm them. I feel like a list format if we did a list format and might be a little hard, because maybe what they're looking for is at the bottom of the list. And they have to scramble to get toe entrees or school to get desserts. So I'm thinking maybe a side by side column based layout might work a little bit better, and so they would be able to see more a little bit higher up in this on the screen. So let's kind of justice seems to do a very slight little Warner. I'm not gonna spend too much time on that and border with lighten it up and let's see if we can't use the repeat great tool. So let's get our little title here, and this will be dessert. There's not all that. We're gonna be desserts, but we're gonna be able to get an idea. Let's do a center alignment of how this is gonna look. What I'm gonna do is maybe have an opportunity to have a symbol or photo there that would indicate a dessert. So to indicate an icon, I'm just gonna go to stew a plane circle. We're not gonna design. The icon will do that in the next phase, but we need to make sure we have enough room for very long names. Not everything is gonna be a short, concise name. Let's keep it wide. Get a group it. Let's see what this looks. With the repeat, Great Tool is due to columns and let's do six deep. Let's do eight. Just to really make sure we show a restaurant name that our restaurant categories that may have a lot of restaurant categories. Let's do the same width and the column here. So let's see how many pixels that IHS that's Ah, it's to 14 and let's do 14. What do you think? Do you think that works? Because now we gotta think about what's the next step if they want to order a dessert. And so I'm thinking, you know, I'm not sure if this is working, because if you do a little pop down menu. Let's say there's a little pop down. Then you could come out like this and you'll be able to add it. But I think from a developmental from the developing standpoint of coding standpoint that can maybe have some problems with the pop out menu. So I'm gonna actually scrap this whole idea, and I'm gonna go back to this idea of doing the columns. Have you noticed how I had to test that out? I had to test that out to sea, but was gonna work or not. And I didn't know it was gonna work until I started to think about I could have two should send him to a whole separate screen. And I want to avoid that. So this is just not gonna work out for that reason I'm gonna keep this around just in case I need it later. Slide that out. So reworking this a little bit to have a better pop out menu kind of action when it happens , just kind of doing something very simple. That's kind of going across. But I made it a lot skinnier or so I can do the repeat grid tool and fit at least six of these guys, all in a very nice, concise spot was closed. The collapse, the the pattern here a little bit. So maybe right about here. I mean, upsides, entrees, desserts. You just keep going down the list. And then we need to kind of figure out what is gonna happen when we click on the expand kind of option. And that will be kind of on the next screen, where we're gonna develop that. Get rid of all of this. All of these items, guys, we're gonna kind of duplicate what we have here, and this will be what happens on expansion of the menu. So what's gonna happen? Listless under group the grid, we could have access to all of these and we'll ship these down, so it's gonna be kind of an accordion style drop down. This could have dropped down with all the different options here. And remember, just like we've done before. We need to make make sure we have room for very long names because there's some very long side einem names at restaurants. So let's maybe reduce the text size, and maybe we just need to have it as a regular wait. So that will leave lots of room for very large size options. We have a shopping cart need to be able to add these items to the shopping cart. So we need kind of a plus or minus sign to be able to indicate they want four fries. They want just one fry and some kind of button that indicates add to cart. So we have plenty of room here to be able to do that. So we're gonna do that next. Okay, so I was able to work on this a little bit and got a couple of very arcade kind of buttons to indicate the kind of actions the user needs to take to be able to add it to the bag. In this case, I was calling in a cart, but I think we probably need to call it a bag. It's gonna go shopping. It's nice to can add things to a bag. When you go pick it up at the restaurant, you're adding to a bags. This kind of we're finding some of that language a little bit as I work through this process, and so we're gonna need to have a button that indicates, add the bag. So let's go ahead and do a little bit of a higher contrast button and let's go ahead and change the bill. So that kind of helps that element pop out and not compete so much with the adding to the items. So you can tell like this kind of a bulky you I designed right now we'll refine that a little bit later. But I think in terms of room, I should have enough room to be able to fill in the options here. I could always make the type a little smaller, move it over to the left a little bit. And when we do the you I design, we can always collapse us. Make this a little bit more refined to give us a little more room for longer side option names. So what I'm gonna do here is I'm going to kind of think I still have this as the repeat grid tool. It's gonna collapses again and take it off the repeat grid so that I could take this option , rupe it together and repeat it with the type inside. So I think we did five options and let's collapse that down here, we could put a little spacing between it. Not sure if that helps or not. Maybe it does. One thing I want to do before I do all this. Let me lighten the stroke on the border. We don't want to think of a border, So let me go down and make that set up a one. Let's make it a 0.6 Just kind of like to get up a little bit. Now I'm ready rates. And now what kind of showing? What happens when it collapses? They click on this button. This isn't an entirely different screen, but it's something that we're gonna be ableto haven't shown animation. When we do a prototype mode when we link everything together, we're going to show the pop out slide out menu so it would have it on a separate screen on X d. Um, to be ableto accomplish that animation, even though it's not gonna be a separate screen for the user. Great. So let's zoom out, see what we have so far, so there, able to add different side items. So now we're gonna go ahead and click the users going to click on the shopping cart, they're gonna be ready to check out. So now that I'm thinking about OK, you're adding options to your bag. Now what? So let's say have added option one and option to an option three. How do I get back out? Do I just go to shopping cart? It's not obvious what you do next, so I need to be able to figure out a way to get back to the restaurant landing page, to be able to kind of have a check out screen or have the option to always check out immediately. So just adding a few other detailed items that worker toe wanna have a landing page? We couldn't even have an option to put in some copy, maybe a couple sentences about the restaurant name and also need to have a place to find it on the map. So we're gonna need need to be able to have that as an option to. So I'm gonna shift this over and have maybe a little map icon, See if I can't find a map icon here in our little you elements once he won't be a good or actually you know what a better way I know exactly what we can do. I could go into Adobe Illustrator. I'm gonna get my branding package that I have together. And I have the perfect will icon to indicate a map. So we're gonna use that. This is part of our branding for our, uh, our app. Why not incorporate operating element of her app into the icon design? So let me go and grab a couple of these and export these so that I can have them as icons in the W x d. 10. Shopping Cart: I'm tweaking our layout, adding all sorts of details that are necessary for the user to have all the information they need to properly check out and to add to cart. So we wanted to have the BAP option. I wanted to show how far away the restaurant was from their location, and they can also click on this and a little pop up box will go ahead and load a map that will show kind of a rough e t. A. Based on the order they put in their court. And I wanted to make sure we had ratings on here and some of those details that were on the previous page so they could have consistency with the landing page. So I also wanted to have or of you order button at the bottom if they were ever to kind of get confused and not know that they were ready to check out when they have a review order, kind of to remind them that they could go ahead and check out. And I also wanted to have an indication here that when you add something to the carts, something happens and we could do an animation when we go to the high fidelity layout that can indicate maybe this zooms in a little bit of pops out it. She wouldn't change his color to know that you could click up here to do the check out process at any time. Want to add something to the cart? So we're gonna do that. We're gonna add another screen here, and this is just gonna be for the animation for later on. We're just gonna go ahead and show what that looks like and the low fidelity wire frame so we can show the client kind of how what we planned on doing in terms of the animation and showing. Ah, clear indication that there that the check out process is ready to proceed. So what can we do here? We can make this a little bit bigger. We could have this be a little bigger and we're gonna do an animation later, so we're gonna kind of make it go down when I could do that quite yet. We're just gonna kind of show what would change when something is added to the cars. Let's say two items were added to the card. Let's say this reverses will say that goes darker and the number goes lighter is to show indication of a change. Maybe it's red. Maybe it's a different color, and we can indicate that so that the user will want to click on that. So let's change the shade here. I know we're just doing black and white for now, but let's indicate lots of changes happening. So the add to cart this will automatically added the card and have a little pop animation. Maybe it kind of zooms in and zooms out just just a very small amount. So fantastic were very getting very close. Look how far we've come so far in the process. All the screens we are mocking up and we're kind of going a little bit further than a lot of people do is low fidelity wire frames. A lot of people are sketching this out on paper, so they're not thinking about these little small little details that we are. But when it comes to developing the high fidelity wire frame, we really have a lot done. We've made a lot of groundwork in terms of where things were going that we just have to refine the graphic side So now that we have this done, what's the next step? Let's go to our user flow diagram there added stuff into the cart. Now they're gonna want to be able to check out and review the car to see how much everything is. So we need kind of a check out CART page or, in this case, a shopping bag screen that's gonna live taxes in total and how much this app cost as a service fee. So here's our shopping bag screen, so we're gonna go ahead and title Something's go ahead, do it. Ah, shopping bag and we want to be able to start showing the e t A. Now that we know we have the amount that's being ordered. We know the restaurant. We know the location. We have all the data we need to be able to show on E. T. A. R estimated time of arrival for our food delivery. So instead of having these photos up top, we could have a chance to make this a map. So this will be a viewable map with an e. T. A. There were two people have this icon go to use our branded little symbol we have in our logo is their icon. I might be able to ungroomed this and switch out the colors and once again just keeping it simple pride. Only the shadow there. So that will be kind of the indication of where it is. We're gonna have a little button, and I have, I think, the perfect one. I'm gonna go ahead and open up by little cheat she here and see if I can't find something to indicate the e t. A. Have a little bubble to put the number in, See how easy it is once you kind of have some of these designed. Sometimes I'll go back to prior projects and grab you I elements from there. There it is that is perfect right here. It's what I want. Okay, so this is going to indicate et a. Let's say E t. A is going to be. Let's say it's a 12 minute, 12 minute arrival time. There's et A. There's a location on the map shopping bag. We don't need this information anymore. On our flow chart, we were able to see competitors, restaurants nearby that maybe had a quicker delivery time, so we want to be able to have that in our wire frame as well, because I think that's kind of a neat feature to have. So we'll have over here. And this is gonna be a little bit great out because we don't want to people to look at that . See that? That's their arrival time. Let's make that a little darker, Bray and make that. Let's just have it point with Eero, and this will be alternate restaurant over here. We're gonna have to figure out some graphical ways to make sure that's obvious. Would we do the high fidelity layout? That that's not the restaurant is the restaurant they're checking out from? This is the restaurant that they're going to be given an option of. Maybe it's a quicker, quicker delivery time, okay, and it's of a similar type. So maybe this is Mexican food, and it loads another Mexican restaurant that happens to have a quicker delivery time. So instead of offering some random restaurant had and want Chinese, I wanted Mexican that it's within the same category of food type. Okay, so here's a shopping bag. We don't need all of these elements anymore so we can delete it We're to keep our review order or gonna say purchase now finish order to finish order will be the very less but at the end. And we don't want the screen. We did kind of some U X research and decided that we want to have a very, very, very simple check out screen. We just want one screen. We don't want the user to have to scroll, so let's go ahead and collapse this so the user does not have to scroll. We're gonna do our best to make sure you go and do this. Click up top to my top art board name and get that to be the size of the screen. Great. You don't want them to scroll. We want really try to stay concise. If we cannot pull out menus Will will do that. Okay, so this will be, uh, be food item one. We're gonna have kind of a remove. We need to be able to remove from the cart. So what I'm gonna do is go ahead, borrow from the screen across the way. Always got to give people the option to remove and go back in time. The here's kind of our remove item. We also want to give them option to not just remove the item, but to remove maybe one. Maybe there's five and there, but they really only wanted four fries, but there's five fries we need to get. Also give them the option to add subtract. So I'm just gonna borrow these elements since I already signed them. 11. Finishing Up Checkout: I spent about 10 minutes working through these next two screens, and I want to kind of walk through kind of why I made some layout decisions that I made. So we have kind of this very simple check out process. We want to have a one screen. We don't wanna have to scroll check out process, and I thought listing all your items and having them be collapsible but also having the taxes listed. There's a service and delivery fee, but also having an area where they can type in and add a tip because it's nice to be able to deliver something and not have to worry about tipping anybody. It's already a part of the process and the finally of very easy to read Total and an order now button and so that when they click on the order now button, they're gonna come onto this screen. I was ableto get this from the cheat sheet a little you, I kit that we downloaded from Adobe the Will wire frame kit, and that saved me a ton of time having to type in all this stuff and figure out what is needed for a credit card. It was really nice to copy and paste this. We can adapt it to our own style later. But I did add this Add credit card wallet because we want to is the first time they're checking out. They don't have a credit card on file, so we're gonna have to give them on the option to add a credit cards so that they all they will have to go do this step next time. It'll just be want to use your card on file pop up box and they click, Yes, and so we start to really flesh this out. Do all the options available to the user to the design. We're gonna have to have that little pop up box designed that as well. So there's, you know, right now we're just getting the basics so we'll do that a little bit later as we get into the process. So there's really kind of screen three screens that the user will go through the check out process, and we could think was that too many? Is there a way to consolidate? I don't think there is. I'm trying to work on simplifying this process even further. This is when I might talk to some other people that have ownership in this project and figure out what their thoughts and ideas are, especially talking to the developers who may have ah, solution are certain pop up a slide out option that could make this process even quicker. So for right now, for basic wire frame and get some ideas of the overall process, I think this works well. They review the order they review, they click out order now, and they have to add adoption. And then there's gonna be one more screen left after this. And it's gonna be what happens when they have a successful check out process and it's going to show the E. T. A. Is a really big map screen. So what I might do is duplicate uh, something up here. Maybe here we already have a map and just expand that a little bit further out. It's gonna show how long it's gonna take. We don't need the competitors er anymore, since they went ahead and place their order. Put this front and center, and I believe if we go back to reserve flow diagram, we had kind of the option to contact the restaurant if they wanted to change the order. So let's copy this button so that could be, Ah, change order changer, ad order. And that button will have a pop up screen that will have access to the number and maybe a text message capabilities to contact the restaurant. So let's do another option I think would go back to the user flow diagram we created. There's also the ability to perhaps review, but that's not gonna come up to a little bit later in the process. So we have. We're giving them option to change or add order. Let's make the NAPA really big, and this will be updated but a little bit bigger. As the person gets closer, it'll be like uber where the course where they get the will change and then we'll have the screen upon successful delivery that will ask them to review the experience. So delivery successful and they'll have an ability to be able to rate it So, delivery delivery successful. We'll have, like maybe a nice graphic. It's a chance to kind of do some design work later on, gonna be able to cross sell. We want to send them back, interested and ordering groceries, getting them kind of excited about that next step. Of course, their carts gonna be down to zero because they just checked out. Right? So there's still so much to design. We have to design the pop out menus. We have to design what happens when they click on the card. If there's gonna be a pop up The New Yorker, it's gonna go straight to the cart. There's a lot of things we need to develop. This is just one angle. Is this this one journey through, checking out of a restaurant, We still need to have them check out a new grocery Were not to do that this class, because it would take 20 to 30 hours to really design every screen in the low fidelity manner. So we're gonna focus on this process that we did and working it next. Move on to the high Fidelity. This is my favorite part. This is the fun part we could to incorporate the branding arms. The logo will get to do some custom icons. We get to add our color palette in there, and it's gonna be a very quick process. This is the hard homework We've done all the really difficult for work, and now it's time to hatch on this designer, really dive into new I desire. 12. High fidelity wireframe - Getting Started: This is where the fun really happens. We're ready to tackle finally, that high fidelity wire frame when we get to really bring in the design part of things and have fun and run a little wild. This is where my graphic design background really shines and comes in handy. And if you have a design background, that's fantastic. This is where you really get to play and use your skills. So right here we have our low fidelity wire frame whipped up. Here. We have a wonderful kind of start, and now we get to polish everything up or just go screen by screen. We may not be able to do all of them, but we're do is many screens as possible and and a decent amount of time. So one of the first things we want to do is we want to set up our colors, our fonts for a brand and bring in some of our logo files. So I have a brand guide I developed in Adobe Illustrator and I have this available for you to download. If you'd like to go ahead and use this as a mock up brand for you and I have all these different kind of style assets set up. I have some color hex codes. I have some logos on a dark background and on a white background, and I have a couple of different colored icons. So I'm just gonna bring these all in as P and G's. I'm just gonna quickly show you that. Why not? Why not show you all the little steps I go through? I'm just gonna create several little art boards around my logos. Sit back and I'm group here. So all I did was created art boards around each one of these elements that I'm gonna need as a transparent PNG is gonna erase the background export that and all kind of export nicely. You're in your downloadable resource guide. I have local grub branding assets. I have all the icons as S. P G's, and I also have some of the local files as transparent. P and G's will be dragging that in and messing around with that in our high fidelity mock up. So now that we have some files to work with some images, let's go back into Adobe X'd order to set up the type choices as well as set up our hex codes in our color assets. You're the three hex codes I developed for this particular brand. I'm just gonna bring them one by one into Adobe X T, and it's gonna draw a just a box going click over to fill. And I'm just gonna pace that hex code in and then I'm going to uncheck border, and then I can add it in as assets was gonna right click on add color to assets. I'm just gonna duplicate this box and do the same thing. Go ahead and load my other colors. What I love about Adobe X'd is this global style panel where we can edit some of these styles and it doesn't globally on the entire document because you could see we've already done so much when it comes to our type and kind of getting it laid out to be a shame if we had to go in and change each one of the type choices to the one that we'd like. So what you could do is here's the four that are currently used on the document. We could start to kind of get a little bit of a type hierarchy going on? Determine what's gonna be our H one or big headers. What's gonna be our H two? A little bit of a smaller sized header. What's gonna be our paragraph? Our body copy type. We could go ahead and set the font. Wait and go ahead and set that all up. So if we ever do need to change it on a global scale and change 50 different screens, we just have toe right click, go to edit. And you can go ahead and switch him out once they're all set up and we'll change all the typefaces that are set to that global style. So that's really quite handy when you're doing you. I design. So what I'm gonna do if I want to kind of figure out what is selected right now as we did our low fidelity wire frame were a little crazy. We just kind of slapped it together. So now we need to be a little bit more precise when it comes to these type of issues, because we're going to start designing a whole lot more screens and finishing this all up. So let's say I want to know What is this Aerial 16 I got four different ones we needed Title these and make sure we set up a nice type R G before we continue. So I'm gonna right click, and he could do highlight on canvas, and that's gonna highlight all the type that's used here. So it looks like that's going to be cut of a top header here. So get it. Uh, go ahead and name this top header type. That's just the kind of help me know when to use that particular style or what that style is. I'm gonna go to the next one. Let's go ahead and highlight that on the canvas. Okay, So this is our button text so I could see all over buttons. Have this type to it. Let's go ahead and dio do button, but in text. And we're gonna go ahead and do that. Keep going throughout. Okay, That's gonna be our body copy. A little bit smaller. We're gonna go through that and kind of set everything up so that we can have not only a nice type, Harkey. We know what's gonna be the header size. What's gonna be so everything is consistent throughout the entire piece, so I know that all the headers or 14 point size or 16 point size, all the body copies, 10 point size and a regular Wait. So everything's kind of set. You could set the colors up. You set your type up and we confined to in this type as we work on her kind of design because we may end up changing the typeface, we may end up changing the size and can always add more character styles as we really flesh this design out. So this is always gonna be kind of a working area for us. We're going to continue to add and edit it as we as we continue to do this, let's do some symbols. So we could probably could have done this a little bit in the low fidelity. But when we're doing the low fidelity, we're not thinking about all this set up yet because the designs not even approved yet. So now that we have kind of approval to move on and really make this a slick finish layout , we're going to try to link all of our symbols up. So when we link symbols, we can change it globally. So right now, this. I did what I did. Is I right? Clicked And I just created Assemble out of this. So now here's my symbol. So now I can go ahead and change that to read if I want to. What I need to do is replace this symbol. Just hold down option and just replace the symbol with the link symbol. So now when I go back and I changed the symbol, it'll do it on both. And I don't have to sit there and change the color on both. That will really come in handy if you link all your symbols up so that all you have to do is kind of press one button and all of them change across all of the different headers. We're gonna set that up and make that assemble were also wanted to our shopping bags assemble. So when a right click and make assemble so that we can also change the ship shopping bag in the same way, I would probably do the header as a symbol so that I can change this header on all of the different headers at one time because I may want to change them all at the end of the design process may be, the client says I'd like the header to be white. That's not gonna be a big issue for us to change it on 100 screens if if they're all linked as a symbol. So I'm gonna do that real quick. I'm gonna go ahead and get all these links so that we would become changed all these very quickly. 13. High fidelity wireframe - the Login Screen: So what I did here is I grouped together this element. I'm gonna go ahead and one group and show what I did all these air individual, different linked symbols. If you go over here, you can see all these links symbols with, of course, name them so you can come to know which ones the hamburger menu. Which ones Not, but they're all individual one, so I can change them as individual symbols as well as this background graphic or bar. So all I did is I grouped all these together, and I'm just kind of sliding these into place. It gets it snaps nicely to the top of the page, was able to replace those all very quickly. And now that I have them in symbols and you show you how fun this is, so we're gonna go to the hamburger menu right here. This is our link symbol. Let's go ahead and just title all these. And now I'm gonna be able to edit so I could go ahead, select this link symbol that on group and I want to change them all. So now I just made him all red just like that. So if we want experiment with color. We could start to kind of really fine tune this header. So if I want to use our branded color here, I want to kind of change it to that kind of green blue color. Just like that, it's done. Um, I also want to maybe change this color to like a light gray done. I did that globally on all of them. We don't to sit there and do it over and over in each screen. I mean, it's amazing. I really love that part of X'd mostly wanted to change a shopping bag to a certain color. Maybe we want to add a new color to our palate because this brand was developed sticking about the logo. But it wasn't thinking about you. I, um, and have needing to have a really high contrast button, a really bright button that's very different than the green. So it really pops out. We're gonna add a new color asset here. Just gonna add a new color. And let's kind of make this golden over to Phil going to make it a red because it's very different than the green. But maybe add just a tiny bit of it's a little bit of maybe pink to it to kind of give it a bright vibrancy. You just kind of messing around to find the right color course. We could mess around in Illustrator and parrot together to find the right color palette. I want something pretty bright and vivid so you can definitely see it. Who knows how I change that? Look at that change on all the headers. Just love that now we could change this little box. We could even now that we don't have to do it on all of them. We can just do this one. Maybe do this red little bubble. What's at edit? That maybe not have a border and do a pink ville. I think I might need to UN group that symbol cause I have ah, type in here. Let's make the type white. There we go. So I think that's starting to look nice. And we want to maybe drag something into that assemble maybe a photo just like a little filler photo so I could download all my photos from Pecs ALS so have a really good headshots. I'm gonna go ahead and drag her in. It's dragger right over the photo. It should are automatically populate. We can double, click and adjust cropping. Nice zoomed in photo. There. Now it changed it all so you could start to see the header coming together. We could change this, uh, background bar to our branded dark color gray. And there you have it. We have kind of the top head or done on all the screens. So just one kind of show you how that global styling can really come in handy as we start to develop all of these different items. So now we're gonna kind of start back at the beginning. We're just starting our first page. We're gonna start moving to the right now that it kind of got the global style set up. There's just one more thing I'm gonna do. And I'm gonna need that for my log in screen. I'm gonna need a logo, so I'm gonna bring that in as a symbol is Well, so if we ever tweet the logo and the logo's on every screen, it doesn't globally. So I located the PNG files, and the downloadable resource is But if you're doing a different company, you could try to find a PNG of your logos company. So right now I'm gonna drag in both of these. So I have a couple of different versions. I have one that works well and tight spaces, so kind of a horizontal presentation. And then I have kind of a stacked version as well, and I have one on a black background on one under dark background. So let's go and just bring in all four and we're just gonna add this as a symbol. This is kind of the set up process of you. I There's a lot of initial set up, but went to get everything set up. It goes super duper quick, and I promise it's gonna get fun. And they were still kind of doing set up kind of some of the boring stuff that's part of the U I designer is there could be some tedious parts that could be some fun parts. So let's get one of these that will work really well on this on this different gray background. And let's go ahead, make this are branded gray color. You have a little bit of a darker shade to weaken use. We have to figure out what would work best. Or we could even change it to our Kareen. Lighten it up a little bit and bring in the one that'll work on dark backgrounds so it could bring this one in or could bring this one in. So it looks like I've developed him with that darker color toe work great on gray. So when you do Gray Dragon and it works great, but I want to try it with this lighter color. Think that's nice. I'm just gonna go back to the drawing board real quick and develop a version that works really well on that version, which would be, I believe, kind of an all gray version just like that. And I'll export this as a PNG and I'll see you right back. So have all versions of the logo that'll work on all backgrounds loaded in. So now we can kind of swap out and see what looks great. I think this might be a little long. You have a little bit too much space. So let's do the stacked version of the logo right here in the middle. This is where we get to do design work. We don't have to worry as so much about the customer extremely were always worrying about the customer experience. But this is where we get to really focus on what looks good, what feels right to me as the designer, um, so we can do a couple things. This is what we This is the time when we decide, Do you want a solid background? Send that to the back. We want a solid background. Do we want to have kind of this two toned? We could have it go down to here and we can use background elements to help bring out certain buttons. So we want kind of the log in button is to really come together. You could actually have this stop halfway, and we can add another box here to have a dark contrast. Let's do cut of our dark color. Send that to the back so you could see we have to switch everything out. But you kind of have this two toned look. It could really bring highlight to that button where these two are divided. So it's using those design elements to really draw your eye toward where you want the user to go, which in this case would be your log into your account. And so we need to have that high contrast button. So I really want to have kind of this dark kind of light pink color. I think we've already set that in our assets panel, but for some reason, it kind of got lost. But that's OK, so we're gonna draw a new box. I really want that button. The pop outs. We're gonna find a really good high contrast button. Take that border off. We're just gonna make this a color asset would always change it later. Here's our red color. So let's make her but in a nice pop, pop out at you kind of color. So it's not gonna be this color, is it? Because that blends right in. Let's do kind of an opposite color. It's really gonna draw your eye out. We want to make create a log in a different it's It's gonna be a different logging path so you can log in with your can. If you already have one. Created logging will be a little bit different, but not dramatically different, so we can kind of see what colors would look good with. that particular button. And then with our log in with our Facebook account, we could make that blue. So I'm gonna go pop over to Facebook and grab whatever the official blue Facebook color is negative. Load that hex color in. 14. High fidelity wireframe - Login Screen - part2: way. I took a screenshot of the Facebook color here, and I'm just gonna take the eyedropper tool and sample that I really want to be accurate. When it comes to Facebook, that really pops out. Well, I'm actually do the right button here. It's going down here, take off a border and lets us do a blue Phil, and we're ready to punch that out with White. You got some extra elements here we don't need. Let's make that a little bit lighter of a shade to that little divider button pops out. We don't need that anymore and change this to White into our white color. So what do you think? So that's kind of the version we have so far. Probably. It's some kind of other visual to grab you right here. Well, maybe less slogan. Find your best meal now, or some kind of slogan or type to kind of entice people to log in and get excited about using this app. This is also a time where I duplicate art boards and I can put him side by side was, once we determine this log in screen, it's really gonna start to determine how everything else is looking. These first few screens air so critical in the design process is once we set up all kind of whether we're gonna use a dark Bracker on a light background what type of logo we're using ? We're gonna set this, gonna set the stage for everything moving forward. So we got to spend a lot of time making sure it's right so we can go back to what we had before. Do this type of logging Those buttons really pop out there. That's nice. You could duplicate this as much as you want to do the same thing with logo designs, I'll do a local design. I'll put it right next to a copy. Change it, tweak it, see if I liked the old copy rather than the new one, and continue forward. We're gonna try this one, but waited with a light gray or maybe stick with white, just kind of reverse all these out. Okay, so that's an option to keep going here until we find kind of what we think would feel right . And we want everything to be obvious for the user who went the user to be able to find the buttons as easy as possible. And sometimes using those darker backgrounds really helps. Because with the white, everything's kind of blending in. So using these kind of colored boxes is helpful. We could do a solid box. We can always screen back photo. We could do that a little bit later. It's kind of punch this out. Make that white. See, now that we set our global Siles it so much easier toe kind of, pick your palates and pick your type. So what do you guys think in so far? I wish I could get feedback live in this class, but which which background to you pops out the most? This is when you can maybe put it in front of somebody else and go What? What looks better? What works better? There's always the option of having a white background entirely and then doing our logo that we have up here. So there's kind of your basic log in which I'm not a huge Vanna could always experiment to and do. Maybe a diagonal box that goes across that has had the pin tool and see what it looks like to kind of break the mold a little bit to experiment so you can see here the wide variety of layout options I have and you could see where this is could be One of the bigger challenges is not a lack of ideas, but of lack of direction and wondering what's gonna work best. So I'm gonna go ahead and experiment with one more option, and that's gonna be incorporating a photo to see if the photo can't kind of break down kind of this large kind of empty areas, but without making it look too busy. So we're just going to draw container box to put our photo and we're going to just one click border. Let's go ahead and bring in kind of a generic photo for now food and was gonna find the right cropping. I'm just gonna double click of really good. And I assumed and shot of that food because that's what we want with what people be hungry when they open this app. Let's enticing with little food, get out of shadows. You can have a little bit of a drop shadow, so it looks a little bit layered. You can even hold down option and kind of make this a little bit of a rounded photo that could look me. I think the logo needs to really pop out over that a little more unless we decide to bring it down to the bottom. But give us a chance to shift our buttons a little close closer together, but not too close right about there, Right? And we could put our little logo down here as long as it's very obvious that that's it. So that that could be great will be changed that to blue. We could even do a two toned bring in a box. You just have the bottom and blue are green. Whatever you would call, I guess it's more of a green, isn't it? Blue green and they could round, maybe pull down option. And around this you kind of have, ah, kind of a rounded edge here, but also a countering rounded edge here on the opposite side. On the top, we're starting to get busy. I really want to clean simple layout for our log in screen. I could even get the logos if I can't get look all the way over here. That has kind of the green and the logo to cooperate that that looks a little better, so that is a logging option. I do like the idea of using a photo. The photo could swap out. And since we don't have to worry about the photo having text on top or any other issues with a randomized photo because there's nothing over top of it that could be hard to read. We could be very flexible with this. And I like that idea so it could be swapped out. And I wish Adobe X'd had photo editing capabilities where I can change that, uh, make a do a tone look or do some kind of photo editing, but I don't have that capability. Next t I just go into photo shop and then bring that photo back in. If I wanted to have kind of a duo tone or single in color, look to it. I'm gonna kind of go to Peck Sal's dot com and kind of find a few photos that I think could work. I think having a photo and the log in really kind of helps know that you're in a food ordering app. I think it really makes a lot of sense, gets you a little bit hungry before you log in. So I think it's a good decide design decision to go that way because this screen could be any app. Scream. It's just a little logo, and it's really clean and simple but doesn't have a lot of personality to it. And this is where you could start to think about that user experience and adding a punch of personality. Well, you don't ever make it to busy, but you wanna have You want to be fun, you want to play. It depends on what your target audience is looking for. Uh, let's have a little fun with us and have visuals throughout. 15. High fidelity wireframe - Login Screen - Part 3: I downloaded a few photos to check out. Time's gonna drag these across, See if I can't find the right combination of cropping of the photo. Don't want cropped the top of the bowl. I like to have a little fork in there. That looks really wonderful. That looks clean. Let's see if we can't find a better photo. Always find a better photo cause you'd be surprised what works? I like this photo. Maybe if I do kind of a zoomed in cropping are tight cropping as they say. That looks really nice. It's complicated. There's a lot of details in there, and I don't want to already complicate this log in screen. So maybe we need to find a very simple That's nice. If I zoom and it doesn't look homemade, it looks like the God at a restaurant. I like this one. Oh is about finding that right cropping. Wanna get the fork in there? So it's not kind of the way this curve is. I don't know if the Brown bowls kind of fighting that curve, so let's go back to what we had before, which is this very nice, simple bowl. It's not complicated, doesn't have a lot of things going on with its very simple photo. And I think that works really well with this log and screens is finding the cropping I think would work, and there is our log in screen. So what we can do is we could start to delete the ones we don't think that work. I don't want to have all these screens here and let's keep one around the slide him way over here just to have him never know what we might want to go back to that layout. Here we are. We have her log in screen done with the first green done, and we could do some tweaking with buttons. What I did is I decided to keep this the branded blue green color this log into your account cause that's gonna be the most widely used button, and I decided to do create along in red because I want New Year's years to be able to see that button very easily. So I thought that could be the high contrast, different color. I want to make sure this is where we get really picky with margins and padding. Let's make sure the margins and the padding or the same hear that they are here and you can use the snap to grid option, which is kind of what we're using here is kind of smart guides. I guess you could say that's in all adobe programs. This one could have more spacing because there's, ah type pace there and log in with Facebook. We could but put a little border here. Maybe a light like color. A little pop out better. Who knows? Make the border one. You kind of have that option where you have that stroke. That really helps that button pop out if we feel like that. Dark Blue is too dark against the grey so we can kind of mess around. But I like having keeping consistency with my buttons. And so here's another thing with buttons. We can kind of mess around with the corners so it could make him a pill shape. We could make him a very slight pill shape because we were kind of took that away in the low fidelity markup. But now we get to do it. Let's see pre select all of these. Let's make that border a little bit smaller to make that 1.5 and let's see what we could do with the the shapes of the pills. So here's where we can change it right here. Here's kind of the selection in the appearance panel. Well says, Try one. Just keep increasing its try. 11. Let's try four. I like the slight around. This kind of adds a really nice Polish. Look to it, doesn't it? I don't like it to round for this particular case. It just just a little just a little bit. So that kind of softens everything. Having those nice rounded edges. Okay, so I'm still kind of feeling like that. Blue is too, too. This is too much of the same shade, and this isn't popping out as much. I always add a slight drop shadow to these things, so we could just go down to her appearance. Do little drop shadow. See how that really helps that button pop out. Make it feel like it's a press of a button. Let's do the same thing with all of them, so it could be consistent, so it's adding a little bit of a drop shadow. So now it almost feels like it's layered It's really nice. Okay, now I could tweak logo size. Make sure that's in the middle. If I drag this around, kind of see these little smart guides helping us out by the true middle right there. And remember, you always have the option to toggle on grids. We're gonna go ahead and select my top art board, and we can toggle a grid to see if we can't use that grid to kind of help us find the exact location of of certain elements. I like using grids. I don't like to be stuck. I feel like grids air making the decisions for me. So I do like to do kind of a rough design of how I like it. I just do small movements and put it on the grid. I know a lot of people like to start with the grid, but a lot of times I like to kind of designed by I do my layout and then do any kind of fine tuning like you see the little difference here between where this this four column grid is we can easily just snap that to the edge, feel like we use the grid to help us with your layout, but the grid didn't boxes in. You know, it didn't kind of restrict our free flowing design since so if you're the kind of person who likes to start with grids, you can go ahead and load your grids in. There's also square grids. Who have you kind of more of a traditional brid or he do the column, Uh, rids we do websites. You could do it based on the 12 column grade, which is really popular to do. We could set your gutter within the problem with and all that jazz s. So I'm just going to use this to kind of maybe snap all these to the edge of that grid point. So I'm just gonna stop all these to the edge. Kind of gives me a little bit of foundation and knowing that the gutters air the same width here, and we also want your Facebook button, right? So is turning my grids off. And I feel like we're getting really close this making sure this is gonna be the same with the top of the bottom. Make sure that centre alliance see how it that popped in that little blue. But our little blue line kind of goes up it down. Now I know that's perfectly in the center, Off the peace. Hey, let's save this. I feel pretty good about this. So let's move on to the next screen. So what we did is we have kind of the darker background. We're kind of moving in toward that direction. So that could set the tone for app that maybe we have darker backgrounds of them lighter boxes on top, as opposed to having a white background with maybe, like gray buttons on top, Which is what? How we kind of designed it to kind of have that light background. So we're gonna kind of see what happens when we get to this point whether a dark backgrounds gonna work here. We need to go back to this kind of method. So we're just trying to get our styling here, trying to get an idea of consistency we can use throughout. So next we're gonna go ahead, Hop into this is gonna be very easy, cause you to be basically the same screen. We're just gonna flip out some of the colors here. We're gonna do that real quick, and I'll be right back 16. High fidelity wireframe - Popup Screen: rights announced time for the sign up for an account page went ahead and made this background the symbol, this big kind of background On our first screen. I made that assemble on that. I'm still a copy and pasted, as do the rest of the screen. So they're all like symbols. So if I ever wanted to change the color, it would be easy to change it on both. So if I want to switch everything back to this color, which actually looks quite lovely, um, we could do that for all screens and then swap everything out much easier, So just make sure you use those linked symbols as much as possible. So let's make that kind of this color. And we can also make this assemble. This gonna be kind of a standard button we're gonna have. We could always right click and make assemble, and then bring that apart over here. We already have our little rounded edges, very slightly rounded edges, and we could just change that out whenever we need to. So sign up for an account. Probably needs to be a little bit bigger type, size like everything very obvious and easy for the user even try that as a white. Yeah, we could bring our logo over. Keep it on the bottom. It's on the bottom here. Let's keep it on the bottom and we could keep it in the same position as well. I must go ahead and make the logo while we're here. It's going. Make it assemble. Going to right. Click. Make it a symbol. I'll do logo. Black background. So now when I copy and paste Aiken, switch that up. That could make changes very easily. We can continue to have a photo up top here on the Tambor's hold down option. Soften that rounded corner here. There's the point. It's gonna soften it. Bring that down. I must do a different photo. Do the other one we wanted to use on the other one. There we go. Do a nice tight cropping so it doesn't look too busy. You wanna get that fork in there and want to make sure that that is not rounded up top and make sure we don't have a border right? I'd like to incorporate that green blue on every screen of possible, because I want to be able to connect it So this is a point we can decide. Do we like the grays at working isn't working. So what's great about having this linked? So I just go to my symbols. I'm just a title, this background screen background and we can play around with the colors here. So I'm gonna go ahead and make him all blue. Do you feel like a blue works? I feel like a black works. So how can we incorporate blue in here? We can always do finish up the sign up process. We could make that hopefully button and tuck that closer to the end there. It's going to switch to our grid and see if we can't get these tow line up. Everything's consistent. When would have the same rounded edge here, so we can always go back to see what we used. And we used a four. So I'm gonna go back and apply the same rounded option. Great. Now we're just tweaking layout that you should. We have enough breathing room between all the design elements. Notice how that helps so much having a little breathing room. Just make sure the spacing here is consistent and that gives us a chance to have a little bit of a bigger photo perfect like that, cropping how? It's cut in half. Their kind of creates a dynamic crop. I was glad and save. We got two screens down. Ah, 100 more to go. Well, we're not gonna do all 100 but we'll do at least 10 more screens. So Facebook authorization is gonna take this symbol here. But this is the back. Things are gonna start going real quick now that we're starting to establish kind of a branding standards here for you, I standards. So this will be the same exact button. So why don't we just take this button and just go ahead and put our authorize in there? And then we have our button text. We don't like that white. So what this is gonna be is probably instead of being a separate screen, it's gonna be a pop up box. So it's gonna just pop up over here to authorize It's not going to send you away to a screen. So what I was wanting to do is kind of have a blurred effect very somewhere to what you see over here, where you have kind of a pop up box, but it kind of blurs in the background. I know IOS did that a couple years ago when they did kind of gooey upgrade, and that's kind of been a very popular thing to do. So that's kind of the effect I was trying to emulate. But it looks like I'm not able to kind of take this and blur it as a whole because it doesn't give me that option here. So I'm gonna kind of do a little cheat here. I'm just gonna take a screenshot of my screen and bringing it as a photo, and I'll be able to kind of have the same effect so I can emulate that effect. I'm going to bring in that photo with desktop. You hear it? ISS It's going to leave that we don't need that anymore. We'll see if we can't emulate that effect using a photo so kind of giving the kind of the feeling that's gonna pop up and kind of dark in there and just give me the quick button to press eso I'm right now. It's on background blurring. Try object Blur. See if I can't get kind of a more of a blurred effect. Perfect. Right there. So now what we can do and we do go into prototype moan. We start to link this up, will be able to pressing that button and it'll pop up and still remain on that look like it's still remaining on that screen. And so we pressed on that button, we can lick it up where it will go right here. So now we have our second pop up. No matter which way you sign in, you're gonna have to give ah, local grub access to your location, and we can have this be a one time event. It doesn't have to happen every time they log in, which is good. So it's gonna stylized this little motile pop up box area to kind of match our brand so we can make it, uh, darker. Make it. This color can continue to use white, and we could make this a nice high contrast button. We could make it are branded green color. We can use the same rounded edge that we use here. So we're using a four here on these little, uh boxes so we can do four here so it could be consistent with all of our rounded edges across everything we do. I feel like we're pretty happy with that. We can roll with it. We can make that even higher, more higher contrast, but that almost we need to kind of read. Sometimes it means warning. You know, when a associate red when it when they have a decision to share, Uh, important information, like location. You don't want to use red because it's almost a warning like this is not what you're supposed to do. So from a psychological standpoint, sometimes sticking with the softer branded killer might work and have the always allow check box. Great. And we could even do a little drop shadow here, have a little more significant shadow there. So now we get to do the home screen, the user home screen. So this could be a very important page is gonna send them to grocery a restaurant when you make it very clean. Um, simple and easy to use. You're going to spend a few moments working on this, and we're gonna continue to work through this entire project. So just for the sake of time, I went ahead and spent about 20 minutes kind of working out what I think would be a good to lay out. We've already kind of did a lot of that beforehand. I didn't want to take too much time on each green going through the process. But I want to kind of talk about why I ended up at this final stage. So right now I thought about using the two boxes and kind of having a background showing through. But after a while, I thought it looked a little busy having that then background border all the way around these two boxes. So doing kind of right to the edge gave it a really modern, clean, slick look that I think worked really well. And I also had a problem putting the grocery on top of the photo. So I had to be very careful about what photo I chose, because if it was too busy, it wasn't showing up. So I tried to put him in boxes. I tried kind of a lot of different ways to get it to work, and and also another thing is I needed to have kind of some kind of text here, so we need to give have some kind of direction to the user because when we just had grocery and restaurant kind of obvious what you press. But it's nice to have some kind of verbal called the action as well to guide you through the process to invite you in. So I have kind of take your pick, have a narrow kind of pointing up and down to kind of really make it. Obviously, you select one of the other and that you have two options. We already have our top head or done that we did earlier in the lesson, so that was already completed. So this page essentially is done. Just found the right photos, tried to find the right layout. And maybe these photos can change every once in a while, depending on maybe your favorite favorite restaurant. That's something we could explore later. So that's kind of this home main home user screen. We're done with that one. Let's go ahead and move down to the next, which is gonna be a little bit more complicated because we gotta figure out colors and type sizes, everything for this next screen 17. Listing Screen: Let's do their restaurant listing. So we had a restaurant map that's supposed to be here, and it's gonna load Google maps. So it just took a kind of a generic screenshot of Google Maps who can just take this frame and drag in our photo that way. So go ahead and be automatically cropped and let's do a drop shadow on here. So it really kind of pops out over here. Let's bring this forward. And we also have a kind of a location thing. This is actually former logo, so we're incorporating something from our brand assets to kind of have the location marker here. So we're just gonna put that over the current one and make it a color that's gonna really stand out so red. And this says restaurant map. But we don't really need to say restaurant map, because I think it's pretty obvious that that's the location of the restaurant that the current location. But we also want to show all of the other ones on the map to the real issues, put a few of them just to kind of show an example. So there's our map, and so now we can kind of mess around with these bubbles, and now that we know kind of the angle or the curvature number over here, it said on five, I believe we did four on all the other buttons. So just changing the round corners to four to match everything we've done over here when we just confirmed for and Ford's want consistency there. So now we can determine. Do we need a dark background or a light background for our listing page? So this is what it would be if it was a dark background. I think it really pops out nicely, but it can also try kind of our lighter color as well, because we haven't really. We have a little bit of a darker one for log in. But if we switched it over here when you after you log in, that's OK. It's still pretty contests consistent with brand colors. Yep. And what's great about the repeat grid tool? Instead of having to change all of these little things, I can go ahead, delete everything but the top one, make this perfect, and then I could just do repeat grid. Let's make this red. We don't want to have a border. You do this star rating we could do that are blue color restaurant name. We'll see what that looks like blue and this color. Let's go and change it to one of our branded gray colors as well as all the body copy. It's this mess with spacing. This is when we really find Tune our type look and how much margin is left over. You do all the little tiny tweaks we need to make so we could change the border color, make it darker, take her eyedropper tool and get maybe that light color or not, have a border at all, or drop shadow, which would be consistent with their buttons. And so I'm really thinking sticking with this darker background color might work better to really help that blue green pop out, you notice how I'm using that very little mouth. I'm just doing it for The Star, which is important. I'm doing it for the restaurant name, which is important, and I have this red button to indicate moving on to the next stage, so let's make sure we have the same rounded Horner's market is a four Oh, that looks lovely. We also need to put rounded corners on here, but just on two edges, I would get stylized. This a little bit. Doesn't have to be see hold down option. Just want to change. No, we can stylized this and make it really rounded on one edge, much that we couldn't have kind of a rounded edge there. Let's create and zero what's do nice around the edges over here. I'm just going over the appearance, rounding out the edges and then rounding out the corners and then changing the size border may be cut that half. Maybe do 1.5 right there in the middle and then make it the color. We need the amount. See that has this little soft edges. Think it looks a lot better that way. Let's make sure everything's lined up. It's getting your pin tool, making sure it's nice and lined up great. And let's make it assemble while we're at it, cause we're gonna be duplicating this quite a lot. Make it the right size. What I love about this is kind of matching everything else we've done so far with this really small soft edge, right? So let's right click. Make it a symbol do May may narrow. So when we duplicate that all be linked objects so we could play well around with contrast ID items here, we could make this kind of a light gray take off the border. It's in that backwards into our little soft edges, and then that way we don't need this little dividing line anymore. We have kind of a little enough contrast area in here to really stand out. Okay, we're getting there. Let's make that Boulder filter restaurants because I want that to really stand out as an option. Let's make it bigger. Make it maybe 12 points. We could always go to our character styles and click one of these top header type. Maybe that will be help us get the same header sizes. They use your name. Let's bring that down. So there's just enough a little bit more padding and spacing there and let's do work rid. Let's not forget our grid that will help us as well, and I need a little bit more horizontal real estate space, so I'm not gonna take it all the way to this edge, so I'm just using it to make sure these are kind of lined up, but I do need more horizontal space. Have a lot to fit on here. But see, I still have very generous margins, Lots of breathing room. So let's make these bubbles the same as this bubble right here. So we don't have a stroke on those to take off the border. We have the floor around this perfect, and we want to change our little aero too. Match. So now we need to have a dark euro ungroomed symbol because we want to make a new symbol. That's gonna be a different color. So I took a few moments to swap out the arrows to have our softer edges. And we also want to kind of tweak our icons here. So right now, this is a very rough icon. We want to continue to use that you I kind of soft, round edges. So let's recreate this little symbol. We could do that very quickly and just getting the circle tool. I'm just gonna do a border, and we're gonna grab the same color that we were doing before, find the right thickness and then just gonna draw a little extension of the search bar and get around corners here. Does your appearance panel get her eyedropper tool in sample are great and have a similar thickness? And there we are. We just recreated it in our style. Group it together, delete the old one and bring it in, Get smaller, zoom out. You know, we have a little custom icons. We have search UTA ratings in cuisine. So if we feel like we're at a stopping point, we feel like it's perfect. We can use the repeat grid tool toe. Replicate this, but we've got to really feel confident. And this is a decision. When we play around with this button, I think that might look a little bit better than the red because I think the Red repeated six times might be too much attention. You really got to use the red and even more subtle ways than we do our branded blue. Well, let's replicate this was get a group together and do repeat grid and go ahead, make us many that will sit on here. So 1234 Now we gotta find the right spacing again right there. Perfect. So we can also extend this out a little bit, something to click on the main art board. You could delete all this. I don't need that anymore. Extend our board down so we could show how it scrolls. So we do. The prototype mode the user will be able to scroll down should be a little bit more realistic. Great. So there is our options here. So what we're gonna do is the user's gonna click on one of these restaurants and we're gonna call it Restaurant Select. We're gonna select on this second option, and they're gonna go to the next screen. So this will be the menu screens. We're gonna do something very, very similar to what? We have two seconds to stay consistent with our theme. 18. Menu Screen: Here's our restaurant landing page, so we have the idea of being able to thumb through all the latest photos that are uploaded for the menu items. So let's go ahead and drag and drop a few of these photos. I feel pretty happy with the layout already. How it ISS. So let's bring in one of these food items and bring in a few others scrapping them so you can kind of tell that there's a photo to scroll through. I think those dots are great. That indicates that I can thumb through and let's go ahead and put this stott as whites and thrown the second photo right. There's a photo over there on the left, that there scrolling through. Wonderful. So let's go ahead and adapt kind of the same style. Let's go ahead and bring this over. What's copy and paste over here cause this is a symbol when have that linked? If we ever want to change the background everywhere, we don't have that option. Do that quickly. So now that we're kind of getting a set up, let's bring this over. I believe this is set on a character style, the header so everything's gonna kind of have the same sizing. Let's bring this up. So let's do the same thing we did up top. Let's go ahead and I'm group the grid and we're going to delete everything but the very top . And then we're gonna be able to play with this depth, same style. So I'm gonna give you the the green and we're going to do the very soft edges, take the border off rents and repeat. Basically, let's get our icon that we used our symbol. Click on my symbol Dragon in there. I want to turn it upside down to indicate that it collapses accordion style, and this will be the arrow pointing downward. Make sure that's darker and we're done. So we have to do see how fast could get faster and faster. As we establish everything, Miss do that many sides. Great. We're done already with that one. So now we have to do this part where it collapses a little bit, so it's gonna basically be this screen. But what this added drop down accordion menu. So when ahead, did the collapse of collapsible menu just kind of save some time? So did the same thing where I erased all of these and did the one and then did the repeat grid tool to do them all. So now the next screen was supposed to indicate when he added the bag. There's some kind of animation that happens in the top when we're gonna be able to work out that animation by doing the screen. And what's great about this is we can go ahead. Believe this because now we have all of this designed because the only difference with the screen there's gonna be a little animation that happens. We're gonna use auto an innate to be able to animate this icon up top. We're gonna make this a little bit bigger on the screen poetess, unclipped, and we didn't make it assemble anymore. We're gonna make this a little bit bigger. And here goes a little animation that happens. I'm gonna need to grab another two over here. So they added two items to their cart. In this example, you were to make it a two. We'll show you how to do the auto animate to make that animated. Once we start to link everything up to save a bit of time. I spent a little while kind of developing the next couple of screen sets. And I just wanna walk through kind of why I did what I did. So the last time we left, we went ahead and did this little kind of screen where we're gonna be able to animate it later and they could be able to add to cart, and then they're gonna be able to review their order. They're going to their shopping cart. And what I did is you'll notice I know one or have the dark background, and I did that intentionally. So when they're going to the check out process, they actually see a different lighter background. And definitely they will take notice that this is a different direction. They're getting ready to check out. It's a little bit different, and I find when you're doing a long list and you're doing numbers, it's a lot easier to read on a white background that is on the darker background. So I decided to keep check out process with a white background to keep it clean and simple for the check out process, and just kind of broke these down kind of using a combination of the green buttons and for those really, really important items that I really want to highlight, even more than the green buttons is, uh, this kind of red color, which would be the order now and the charge card. So there's a kind of what I did there. There's a very similar screens going to go over to this map screen. I just kind of have the map that's going to show your E T A and a simple change in ad order , and you have the split off where you can change it out of your order. And this is very similar to the pop up box we did earlier. So it is kind of copy and pasted that in here he's in the same styling. I got some icons for my little cheat sheet. You like it and cut a blurred the background using background blur similar to what I did before. So this is not a separate screen but is gonna pop up over this one and will be able to show that when we do the animation in the prototype mode and like everything together, So it's one last spring left to do, and that's successful delivery. I thought I would maybe incorporate some photos here and kind of walk through the process of power thinking about this. So we have, ah, successful delivery and have this nice review restaurant button that they compress and review the restaurant. That would be more screens that we could dio at another day, but we're going to focus on this screen, so I get a little checkbook box icon and go and download one of those and have that there. But I like to incorporate some photos, so I would like to have a call to action so you can review the restaurant. But, hey, let's go back to the home screen and let's order some groceries. Let's keep you in the APP. Lets keep you interested in using this at more because the more you use this app, the more the money the company makes money. Let's bring in a grocery photo, see if I have one here, copy and paste it in. So interested in ordering groceries? No. We could just crop this photo as such said that backwards in the layering system just doing command bracket the brackets so interested in order and grocery. So we could have maybe get a little check box icon here and we need to have this on some kind of higher contrast background. So we can kind of see this little called action unless we make that a little bit smaller. So interested in order and groceries level arrow down Arrow. I think we have a downy or right here that we can locate, save a little bit of time. We already did that icon, and sometimes you can have icons on the side, so just like the you like it, you can kind of collect icons and have all grouped together so you can be able to locate those and drag him in without having to go back to prior screens. There. Just a little tip there. I haven't had time to set that up with this class, but if you had a little extra time really helps when you're doing 50 or so different screens. So what? The arrow to indicate there So it could have ah review restaurant kind of group these together Successful delivery and review restaurant. I'm going to locate a quick little chick, blocks Icahn and put that in here. But I think we're pretty much done here. I think there's so many more screens, we can develop it for the sake of time, for kind of teaching kind of this process. I think we're at a good stopping point. We're gonna have one more process to go. So we have a wonderfully designed app that was spent a lot of time doing background research. We did the whole U X process, developed a persona without a user flow, and we incorporated that doing our low fidelity now are high for the Libya Final design 2% . One more thing when we present it, you want to be able to have a working wire frame so I can click and have the links go to places so we could do some user testing and also show it off to the client and having in our portfolio to show off his well, if it's not for a client, we're gonna do that. Now we're gonna flip into prototype mode. I'm gonna go ahead and in this video is gonna be a new lesson. I'm excited because this is a really fun part where things really start to come to life so we could go into prototype note and link it up Next. I'll see in the next lesson 19. Prototyping - Linking It All Up: So let's link it up into prototype minutes on in prototype moan Adobe X'd. We're gonna link everything together. You have to be in prototype mode. To be able to do that, I'm deleting all unnecessary screens. We just have the main items that we need and let's get going. I'm gonna go ahead and save. This is a new document just to have an extra backup on hand hand. Let's do it. Okay, So when prototype mode, you've already kind of reviewed how the link things up and how to kind of do auto animate. So this is gonna be a very quick process. I'm not gonna go into how you do animations. We're gonna go kind of link it up, since you've already had some lessons on how to do that previously. So it's quite an click on our thing here. So now we have to remember our user flow. So when they go to log into your account, you're gonna go straight to the pop up box cause you're gonna go straight to log in. You're going straight through. You don't even need to go up here, Go down here. So that's gonna link to this page and we're gonna have that be a tap. So that's just a simple button click. We are not gonna do auto animates. We just do a simple transition and do a dissolve. Okay, so now we're gonna link our create a log in, which is gonna be right up here, is going to that page. It's going to save our previous settings, so we don't have to sit there and do it over and over, and Facebook is gonna have a pop up screen. So now we have to figure out, How do we make this pop up overtop, Since we already kind of did the, uh, background work on that, all we have to do is connected here. We already kind of did the work to make it look like it's a pop up. And this could be Maybe we can do something a little bit different here. We could do an autumn auto animate or an overlay. Well, let's try and overlay. It will overlay it on top of the previous image. Lets us see how it works. All right, so we have all of that linked up. So now let's just assume they click on allow and we also want could be really want to get detail. We could have a separate screen That's exactly like this that has the check box. So when you check it transitions to the checked screen state. But we're just gonna do click on allow We're not gonna do always allow. We're gonna go straight to the options here and we're not gonna do overlay overdue transition. And we can always do Slide left it slide. Right. Uh, let's just do a simple dissolved for right now. We could always do the fancy animation a little bit later once we link everything up. So now we're not We haven't done grocery. We haven't worked on that one yet, but we have done restaurant. So if they click anywhere on this big image, they're gonna late land on the restaurant page. So let's assume they pick restaurant number two or anywhere on here is for the example. They're gonna be able to go directly to the landing page. So now when they click on any of the sides, let's let's assume that click the 2nd 1 It's going to be a drop down menu. Good click on that. So it's gonna be a dissolve and we could try an animate and see how that looks. So we'll explore that a little bit later. Was could kind of do some basic linking. So once they click on here, they add to bag to click on any of these at the back part buttons, they're gonna go ahead, get to this. This is gonna be kind of an animation screen. So this little thing is gonna pop up and pop back. Click over to here and we are going to do an auto animate. And we're going to play around auto animate to see how that looks okay. And so we're going. This is just kind of a transition screen. Let's go to transition back to here. Just simple transition. You know, we're gonna continue to move down. The process is pretty easy. What they're gonna do here is they're going to just go to order now and click over here, and then they're gonna charge card over. That could be other screens that we could develop laters at credit card to wallet and then go ahead and click on the map and then changing ad or they are gonna change in that order is gonna have a pop up box and let's have that be transition. Great. And so this also another option to review restaurant that's gonna pop up automatically after the process. So what we're gonna do is we're just gonna link this here so everything is linked up. That was very quick, very fast. Are gonna go in more detail over that in a moment. So don't worry if you feel a little lost, Here's all of our connections is highlighted. All I could see all the connections Very simple flow we haven't developed that are where they go to grocery yet several different arcs we haven't developed. But for just a simple test, this will work just fine. Let's go ahead and save it and let's give it a test and see if we need to tweak any of our transitions as we go along. So I gonna click back and then you start my preview here. You clip on this little preview button, it's gonna pop open our preview. So here's the preview of our website. We could really test it out. We can open this up on her phone as well to test it out. But I just right here in my browser so long with my account. So I know that's clickable. I could create a log in Arkan, log in with Facebook. Let's Ah, lobbing with my or let's, um, what's longer with my candles? They already have my countin log in. Okay, so now here's my authorized local grub access. So I went to, um, allow. So here I am, back into the screen. So I want to go pick on restaurants. That and what we develop. Swing a pick on restaurant. So now here's my restaurant so I can click on really any one of these just for user testing so they can test it out. Click here and OK, so here's some side items. Let's explore what they have. We can always go back in and change all those names, So I believe the 2nd 1 is the one that's clickable Click open. That's great. So now here's kind of where we need to kind of work on transitions. So right now I clicked on this, but I can't un collapse. It would be nice to be able to add that, so we need to add another screen when we click back on it and it goes back to that page. Um, so we can cook that up right now. Whenever I see an issue, let's go ahead and resolve it right away. Let's go in here. So they're in here, and I would love this toe link back to this page. So just looking that backs within a cycle, it's good to a nice transition. So now if we go to preview, we could actually start the state anywhere. Start the preview anywhere. You just highlight where you want to start and click on play. Anybody would go right to it. So let's click on that second option, right? So if I click on this again, it's gonna go back to that previous screen. Let's go look like it collapses in that Nice. And I just need to kind of fix that photo. That photo must have got deleted. Somehow. That's kind of a nice option. And so now I want to add the bag. So let me add a bag. There we go. There's add the bag and, uh OK, so I think right here, let's go ahead and order. Now I'm pretty happy with this. We could always develop all these later. Add tip. That's gonna be a different little transition, our animation or change the total. You could do that with the animations and different screens. So order now. So here we go gonna charge card and he would go. So there it's gonna give me 12 minute et A. That would be alive map whenever it's developed. So that a load, whatever E. T. A. Is is developed by the algorithm and we can change an adder order. Listen, one changing out of order here with those will pop up box here. That happened. So I can change. And at my order, I can call or text message. Let's say I called and then it's a successful delivery. I can review restaurant and go to a different screen working, review it, or go interested in order and groceries and let's go and link that back. Now that we're here, we want to link this back all the way to the grocery landing page, which is gonna be up top, which we haven't developed quite yet. And then review Restaurant could go to the new screen where they can review the restaurant . You could see I can keep going with this quite a bit. It's not gonna tweak a few things. I noticed a few photos. This photo was missing on kind of fix that. So when you do the drop down menu option, you don't see that image disappear. So just do some tweaks and fix it up. And I'm gonna show you how to do the animation here that will make this little bag kind of pop up and down and give it a little jiggle to show kind of a little animation that something was added to the bag. 20. Prototyping - Creating Animations: So I spent about 20 to 30 minutes really thinking about how all of this is gonna animate in the preview and kind of adding a little bit of excitement and animation so that it's not just static going from one page to another. There's some kind of movement to show the client, but also to show the developer how would like things to collapse move, shift around from screen to screen. I'm just gonna walk through kind of some of the things Ah, go and show you on the screen. Where I'm gonna show you right now is how does kind of make this little animated. But there's some kind of action where you added to carp that changes the color to red. It gets a little bit bigger on the screen, and then it goes back to the normal state. So if you wanted to have ah reviews of lessons on how to use the animate and transition tools and and Adobe X'd Jeremy Deegan has some awesome lessons on that in the Adobe X'd section at the end of the class of definitely check that out. Hop into that section. If you really wanna find out kind of go back to the basics in terms of learning how to do some of these animations and transitions, but kind of showing how I did it with this practical project. Here's the animation that at it took three different screens. Kind of make the animation. I could add even more if I want to have a more smooth animation with that little, um, adding to the cart. But here's kind of the core image. So we have our landing page click on Add the bag. They're gonna click over to the screen. So the difference here is Arman trend prototype mode. Right now I'm gonna click on the art board, and I'm gonna go ahead and tell you this is just a typical transition. Ah, very simple transition. There's no time into it, so it enters right into the transition. There's no fading happening, so basically, you click over to add to bag. It goes to the same copy, but you noticed the difference. Here. You have kind of a gray state, and then you have kind of your adding the two different items to the cart, and so when you go up, I have three different screens to make the animation happen. So the next one I transitioned I didn't auto animate. And so what? This will do it auto animate from that state up to this state, and you'll notice I made it a little bit bigger to kind of indicate kind of a zooming in of the icon, a little bit of a movement so that their eyes drawn to the top of the screen so they know. Okay, I added to CART. It also hints to the user to click on the shopping bag to continue on the check out process if they didn't see the review order button below. So it's all intended. There's a reason behind all of the animations. They just don't look pretty. There's there's kind of ways we're We're drawing the user to their goals as quickly as possible, making it easy and intuitive. So here's the transition it goes into, and this is what's different as the trigger is a time. So what happens is it goes into this transition and then automatically does a time transition so it's gonna move on to the next screen up top without having to click or interact. It's just gonna happen with time, so the duration is one second. So after one second you're on the screen, it's gonna pop into this screen and do the animation, and then you're gonna have another time. Transition auto, animate to the very top is the last is the final state. So you have you already had the little animation happen, and now you have the two added into the cart, and then everything would act like normal at this stage. This is this is the screen that you would then connect back. If they click from a shopping cart up top, they're gonna click down here. So I know that's a little complicated, but go back and study the basics of Jeremy Demons lessons where he really walks through, kind of goes back to the basics with some of these transitions. They kind of get an idea of how to emulate some of these in your designs. So I'm not gonna go into too much detail, but it's one kind of show. You kind of what I did there to get that to happen and why I even did that kind of the why behind. Why would I make that animated so I could let the user know that that that's now a clickable shopping bag. Iconic kind of really draws your eye up there. So that's how that happened to go over a few others that I did here. You can see how you have to create kind of multiple screens and states to kind of get some transitions to go. Some transitions happen, which is one screen. I'm not gonna go over this. This is what happens. I'm gonna go and click on previews and got to see some of the animations I built in here. So we're gonna do with log in to your account. We're just gonna go straight there, and so we're gonna do allow. So this there's gonna be an animation that's gonna come up and show you how to get this animation to happen. So you click on allow it's gonna go to the home screen. That's gonna do a little bit of a zoom out on the photos. So adds a nice animation. But you also notice how the arrows kind of spend twos. There's some kind of action that's happening, and it's smooth. So how I did that is I went over here and I had to do to different screens. So we have this state, which is gonna be kind of your, uh, before state. So it's gonna come in here, let me go and click on the transition so I can show you. So this is just your standard transition. Ah, and it's got a 0.4 2nd duration. So this goes goes to the screen. Does he have one more transition? What I want to do is I want to make this turn into this. And I wanted to be this nice, smooth animation. So to do that, you're to do auto a teammate. So I'm gonna click on the top, and I'm gonna show you the kind of what I used here. So this is auto animate. I did one second, which is a little bit longer. So you can kind of really see the animation pop into place. You can really see the photos amount. It's not so quick that you miss it, and I also change the positions of the buttons. So I have this, uh, these arrows. I'm sorry. The arrows, the left and right arrows are pointing left and right. And up here they turned up and down, so you can see when you do. The auto animate it's gonna take from one transition all the way to another is kind of like using key frames. If anybody's ever worked in flash or are some other kind of program like that, you can have your key frame is gonna transition from this toe the next. That's kind of auto. How auto animate Works Once again watched Jeremy Diggins lessons. I can't emphasize enough how awesome it is to really go back to the basics when it comes air really learning what you could do with transitions and auto animate and prototype mode . So I did a couple of very small animations, not nothing that takes over the whole screen just little small things. That kind of makes helps the app feel a little bit more alive and has a little action, but not so much action that it's distracting. So take, for example, the map kind of seeing this very small little change from the map, and what we have here is we have member up here we have. This is our final state in the stage. This connects all the way down to the shopping bag So this is kind of the before state. So you have the map kind of dragged down here in the bottom, and I just did a simple auto timed auto animate. So, you know, since on the time so they don't have to click on anything, they just pop on the screen and they wait 0.6 seconds, and then the next green automatically transitions and it's an auto animate. So it's gonna be a nice, smooth animation, and the map pops right back into place where it should be. So it's just a very small little thing that you can add to really add. Breathe a little life into your app on same ghost of this state s so you'll notice. It's kind of all down here at the bottom. You have a little bit of a white gap here if you go up to the top. I pulled it up so you can kind of see that very small little snap up animation makes it feel like it's more interactive on the pieces. I did the same thing. I tried to do a little bit on each page just to kind of be consistent. And so here's the map. It kind of snaps into place. Kind of have this before state are the before state right here and then it kind of snaps into place, and it kind of hones in on them. Application said it Just popping out up the final location. Kind of see the map moving toward that final destination So you could see just kind of some small things that go ahead and show you the final project that we have so far, we're ready to present this to users to do user testing. And there's gonna be a new section added in the course. So if it's not there, it should be there here very soon. And if it's there, go ahead and continue on Teoh, the user testing We're just gonna do some very little go over briefly kind of what I do with user testing and kind of some of the best ways to test your app. And then once you do use your testing, you go back and you revise and you do some revisions. Also, the clients involved in that revision process until we can kind of get this final thing ready, then you're ready to send it off to development to code, and that's when you can be a resource to the developer. Onda let them kind of work their magic to make this a reality.