Adobe Xd Masterclass: Design a Mobile App & Website Wireframe

1. Class Intro: Adobe X'd is an all in one you x you I solution for designing websites, mobile, APS and more. That means you can create live living wire frames to design and work through user journeys , to create believable mock ups to present to clients or to expand your portfolio to include more user experience and user interface board. As a digital creative graphic designer, our Web developer learning this tool can expand your marketability and helps you adapt to the high demand, more lucrative jobs and you x This glass is one part graphic design, Web design and UX ey design as they incorporate all necessary disciplines together to create believable real world projects in this class will design a simple desktop website layout and learn how to use the prototyping tools to create interactions between all of the design reports. To create a seamless working wir franc, who also learned the repeat grid tool to make creating complicated layouts, a breeze in the intermediate level of this class will create a mobile app will think about our user personas to create two unique user journeys to create a fully designed and polish layout. We will learn the auto animate features and other transition features to create menu, slide out effects and buttons that look real and authentic. Everything you're seeing here you'll be able to do by the end of this class. So join me for lessons that will up your design gain and give you the upper hand in the next few years and beyond as you X and your Y becomes the cornerstone of your design skill set. 2. Getting Started: welcome to Adobe X'd. You're gonna be very comfortable with this program if you're already familiar with Photoshopped or illustrator or even in design. Once you know one adobe product, it's very easy to adapt to another adobe. Pride in the same case is here, and if you're already used to illustrator coming to this program, everything is very simplified. You'll notice there's not a lot of tools on your toolbar. Very few options here on the right, and that's it. It's a very simple system, and it's gonna be very easy. Toe learn this and very quick toe lenders after you've already learned maybe a more complex program, like in a Adobe Photoshopped illustrator. This is going to seem like a breeze. So I wanted to. Can it give you a quick little tour using something I've already created for a brand that we were working on a previous class and lessen called Parson Dynamics, which is an industrial conglomerate. So I have what you see Different art board. So I have the main home page, which is gonna be feature here on the Left column, and I was able to add new art boards that would be all the sub categories or the other Web pages on this website. So you have two main windows in the dhobi X'd you have the design window which were in right now, and this will show This is where we put together are designed to put together a typography , was set out our columns and we go ahead and set everything up graphically individually. And then you have what's called the prototype section. So you just switch over to prototype mode by going over and switching over to prototype. And this is how we link all of our different art boards together so that we can make a live wire frame. So I'm gonna show you an example. There's a play button right up here, so I kind of show you what all these linked connections air doing. So this home page and I'll show you kind of, as we do a Web, a little Web design together to kind of learn the program will show you had a link everything up, and it's very easy. It looks complicated, but do not be intimidated. This is one of the easier programs I've learned in the last couple of years. So all these different items a link. So this option one this has linked all the way to this option. So when the user clicks on any anywhere on this button, they're gonna go to this page. Same thing with option two. Option two is gonna linger right down to this page, and Option three is gonna go down to that page And the reason we're able to link things together as we could make a living, breathing Web wire fried. We're gonna go ahead and click on the play button. You'll notice the play button was right here in the upper right hand corner. We're gonna preview our prototype. Wow. Like I said before all these air linked up together. So I'm gonna go ahead and click on Option one. James could go right to the the length that it's linked to the art board that is linked to I can click on the home button and that's also linked Points back to the home page. Same thing for option two, and it could do to sift different transitions. So you notice how I clicked on option to it slides nicely to the from left to right, and you can set up different transitions tohave instead of just appearing that has nice animated kind of smooth effect. Same thing with option three, and that could go down from top to bottom. So this is what we're gonna be creating together what it created all from scratch. And we're going to show you how to work with typography, how to set your assets, which are really important. Next, he's setting your assets so you don't have to keep recreating the same asset or assemble over and over. And I can show you how their global to let's start even open up a new document and get started. We're gonna go file. We just start a fresh new document. We could do this with any size, but I'm gonna do a typical 9 20 by 10 80 Web page, and I'll show you later how we can make this adapt to a smaller screen very easily. But we're gonna go ahead and do our design based on a 9 20 by 10 80 websites. Let's go ahead and click on that particular size, and it's gonna open up. So it created this first art board for us, and we're gonna be creating many art boards to be able to modify this art border shifted around to simply click on the name and you're able to shift it around and then you can zoom out. I have my track pad on my laptop. I'm able to kind of zoom in, announced to be able to get the size. And this will be very helpful because there's some Web designs or some mobile app set will have 20 to 30 sometimes even 50 different art boards, all transitioning and linking up in different ways. So it's very important to get comfortable with having multiple art boards and having kind of an organized system when we start to create multiple art boards. So here's our first art board. This could be your home pages. We're gonna really feeling kind of figure out how to adapt our brand parson Dynamics to the Web. So we're gonna start at the top. I like to design at the top and kind of work my way down, so it's starting out with the most important element, which is gonna be kind of our knave bar. We're gonna go ahead and grab a shape tool. We're gonna skin are kind of a rectangle tool. You also have a circle tool. And if you're familiar with illustrator, this will be a breeze. So just a heads create a simple bar that's gonna be our nab our and I have over here on the right, That's where all kind of your properties are gonna go ahead and double click. I'm Phil, and I can change that color. So I want to be able to adapt some of my hex colors from my brand that we developed. So I'm gonna hop back into Illustrator was recently working on a poster and I'm gonna grab a few of these colors. So here's a couple of kind of go back in time. Here's a little bit, a little bit of a mess, but I just need to adapt some of these colors. Here's kind of a yellow found on this poster that we kind of liked for the brand. And I'm gonna just double clicking on mice watching Illustrator and I'm just gonna grab this hex code. We're gonna pop it into X D. You're gonna go fill and pop in our hex code. That's gonna be yellow, and I'm just gonna draw another box. So we can put our purple pop in here, grab our purple color the booklet this watch and go to fill and pop it in. So now we have our two colors. What's great about this is we can save these colors and our assets panel, which is gonna be down here on the lower left. You'll see assets, we're gonna click on assets and there's gonna be a little pop out menu to the right. We're gonna add these colors to our assets. So we're just gonna highlight a color gonna right click and add color toe assets. So it added are purple hex code and now we're gonna do the same with our yellow orange color, and we're gonna add that color to assets. So now if I draw any shape, I can go to my assets panel here on the lower left, and I'll be able to recall any of the colors I need. So going head and setting up your font styles and everything we need in your asset panel really helps to kind of make the process go a lot quicker when we're doing lots of different pages, so you can see we have our colors assets set up. But there's also character styles. You could take a particular headline font. If you like that particular size and typeface, you can save the character styles and recall that at any time, which is great if you want to set up all your headers and do your H one h two h three. If he ever did CSS. You'll be very familiar with those terms and symbols. You could draw symbols and icons and be able to save those symbols and load those on all your art boards. And what's great is their global. So if I change, if I make a little symbol of a house and I decided to change that symbol, it'll change it on all the different art boards. And when you have 50 different art boards, it's really nice tohave, kind of that global stylization. We don't have to change each symbol over and over, and so we'll do that as we kind of finish this website. So let's go ahead and get this stylized here arm instead of a yellow bar going to do a purple bar. So in my assets, Panelists little down here on the lower left gonna go ahead and click on purple to make that a purple bar. And I want to bring in my logo toe, have it in the center or in the left. So this is where we're gonna bring in a few of her assets. So the logo, a transparent PNG logo file would be an asset. And so I'm an illustrator, and we did a local design here for our Parsons logo. And I already have this in two different art boards in Adobe Illustrator. I have a black and white version, but I have, um, switched out. So I have one in kind of a gray and then one and white. So I'm gonna need that white one to go on top of a color bar. So all I did is just export, and I'm gonna get these as a transparent PNG with the type this logo top. We could do a higher PP. I That's foreign. Higher resolution. This isn't gonna be on the web as of yet, but eventually we got to think about file size and not making a PNG too high and file size so we can make sure we don't have super high loading times. But for right now in the concept in design process, it's OK, we're gonna go ahead and bring in that asset. So I'm just gonna go bring up my finder. We go to desktop and drag these guys in. So here's our 1st 1 to get ahead, make him much smaller, and then bring in our white one. Looks like I have to do it one at a time. Go ahead, make him smaller and go ahead. Right. Click and save these to my assets. So I'm gonna right click and make a symbol. So that's gonna appear on her assets panel now is logo. I'm gonna right click and make a symbol. So these air now brought in his symbols and I could do this logo black and I could do this local white. I can recall these logo's at any time, so we don't really need those at this moment. I could go ahead and bring this out and I have my white logo. I could bring out the black one if I needed to put it down here so those assets could be recalled at any time. So now I'm going to double click this and kind of get the right sizing. This is We can zoom in and really get an idea of pixel sizes. So you see how I shipped this around? The smart guides kind of kick in, unbearable to see the spacing to see 8 16 That's how how many pixels are on the left margin and on the right margin? It's 853 so I can go ahead and kind of center that on maybe do both three. And this is where I might need to resize my little image a little bit to make sure it goes perfectly. There's kind of our top bar. We're gonna focus more on just kind of getting a layout finished. We confined to find to find two details later so I could use my keyboard keys of everyone a nudge it just a pixel to pixel or two. I can take my keyboard, arrow keys and kind of punch it up there punching down. You'll notice the different pixels between the spacing here, and you're able to kind of do some small adjustments that supposed to trying to drag it kind of snaps a little bit. You're not able to get the same precision 3. Hero image: So I zoom back out and I want to kind of get an idea of how thick I want my top navigation bar to be. So if you ever want to do minute changes instead of trying to find out where a particular pixel is by dragging it, you go over here to the properties panel and I'm able to make this 100 pixels tall and get a little bit more accurate placement. Okay, so now we're gonna kind of do our hero image are kind of our main kind of banner or spider that will be on our home page. So I have a new image here that I want to use and go down to downloads. And go ahead, recall that image and just dragon in here, just like any other asset. All right, so here's my hero image. I'm gonna go ahead, drag this in as a full photo, and one thing we could do it dragged it in, and we could resize it this way by double clicking on it, being able to do cropping and figuring out the right size. But I have something even better to do. Go ahead and delete that and we're going to draw a box. We're basically draw where we want this to be able to go. So now that we have a box, we're gonna be able to drag our photo in and it's gonna populate the box perfectly. You're gonna go over and bring in our hero image again. Just drag it ends, gonna pop in nicely and so we can make adjustments by double clicking on it and sliding it up, sliding it down, which is already to the max. But we'd be able to make it further and zoom in if we wanted to. We're done. Click off. I'm gonna try to find the right placement for our photo. And once again, we confined certain sizes too. So we want to add maybe some text on top of the image, have some live text that will be shown. So I'm gonna go ahead and grab the type tool. We're gonna go ahead and just do a box, and I'm gonna do Ah, let's see, what's our taglines going? Grab our tagline from our poster. Okay, industry redesign. So that's all the tagline is Pop back into X'd industry redesigned Go and make that bounding box a little bigger and kind of shifted. Take our arrow tool kind of shipped it up top. We're gonna double click and make this a white Phil, and you also have a shadow option here as well. So if you feel like it's really not popping out, going to click on the shadow option to add a light shadow, of course we can change the distance of that shadow. And also the blur here be for Blur, and we can also make it stronger. We just double click kind of the shadow kind of transparency box there, and we can make it stronger so it conserve 16%. We could make it 33%. You can also change the color of the drop shadow just like any other adobe program. So let's say we wanted this collapsed and center aligned. We could do that by just dragging this box the bounding box, making it a little larger and then going up to center alignment in our properties panel right here in our text properties panel. And we could also close the gap with letting between the space between the different lines of type, so it's gonna be done right here in this area. So let's say it's 1 41 may be closed. The gap. So it just feels a little stronger and like together unit, just like with layout design. I'm doing the same fundamentals of print layout design that I am with Web design kind of thinking about how both of those are very similar. So just like with any other object, I can highlight my photo and add a little bit of a drop shadow so you can see a little bit of Ah, nice drop shadow that was added there, I'm gonna go and take off a little border. It looks like there's a little thin border around the photo, which I just clicked off and removed. So now we're to do three little boxes that come across and be and are able to be linked to other sub pages. We're also gonna end up having menu items appear up top. But we're gonna do kind of a very simple Web Web design just to get started. I'm gonna show you a really cool trick. So we're gonna go ahead and develop one box exactly how we want it, and we're gonna be able to use the repeat grid tool to replicate that over and over as much as we'd like. So we're gonna just create one box. But we're gonna be able to create all the boxes after that very, very easily. So gonna go ahead and grab our square tools, make a simple shape, and I can add rounded corners to this. So fight the kind of zoom in. I grab kind of the circle area here in the corner and drag it down to create any types. Where have you making a perfect pill shape? Or can just to a very, very slight curve, which I think this used to be in when he had this really sharp Caracas apple made that really popular kind of that nice, smooth, bevel rounded edge. But as time has gone on, we've kind of adapted a little bit more of a sharper curve where they're almost barely seen . That's kind of more what's trending these days. So I could make this a fill or I could do a little bit of a shadow, have a shadow. I don't want a border, so I gotta unclip border kind of see how still has a little bit of a drop shadow and has just a little bit of a bevel the corner rounded corner. So now we're gonna do maybe an image on the top and maybe some text to let them know what that next Web page will link to. So let's go ahead and create a box that will be where our photo will be dragged into and I want to show it quick trick. So right now, I have all the corners kind of curving at the same time, and I'm gonna make this a different color so you can see this in action. So let's make it red so you can see how all of them do it at the same time. But what if I just want one as a rounded corner? I'm gonna hold down the option key or the old key when I click on the one that I want to be more rounded and I'm gonna click on that, and I could do it is independent shapes. So if I want to do this corn around it and this corner, I'm just holding down the option Orochi the entire time that could just individually edit these. So now I kind of have more of an interesting type shape, but I'm gonna keep these all round and just for the sake of it, So I'm gonna go click on this go kind of command Z command Z kind of go back in my history back to where it was white. Let's go ahead and add our image. I'm gonna add a little placeholder for by image and so I'm gonna make this a different color so I can kind of see what's going on, and I want o make this corner match the box behind it. So I'm just gonna hold down the bolt or option key because I just want to manipulate this top right corner and I'm gonna match the corner. We don't need a border. So just one connecting that hold down the all key kind of matched that background. Is this gonna be where our photo will reside and be able to pull this down and let's go ahead and drag in a photo dragon? These people talking from the industry setting and there you go. I want to change the cropping obscure DoubleClick and I'll be able to change the cropping that way. 4. Repeat Grids: Let's add another text box. Grab the text tool, go ahead and type in. Let's just do option one for now. We can figure out details later on what we want to say. So we're gonna just do a Phil and remember, we already have our color saved. So if we're gonna go to our globe styles, which is down here in the lower left, we're gonna be able to recall on orange Option or can do a purple options. Let's do our yellow orange color and bring this down to option one. Must make this a little bit smaller. We're gonna go over here to our text panel and make that 55. That's pretty big. So let's make that this is keep adjusting till we can find the right sizing. And once we do well, we can save. This is a global styles. Well, so we go down to our styles. We can right click and do add character style toe assets. Just gonna add this character style. So if I ever want to bring out this again, I can easily bring it out with that same size and same color. Let's make this a little bit longer and let's add another little body, copy or paragraph copy, um, to our items. So we're gonna go ahead and bring out the text tool, but we're gonna click and drag and make a paragraph text box. I'm gonna just grab some generic text I have right here and copy it and paste. Make sure my text tools back out again. Paste it. We're gonna need to change this significantly to be our body copy. I'm just gonna highlight all I'm gonna go over to, uh, my global star of my assets panel and click on my grey and let's make this railway. That's what we were using in our poster for our body copies. We're gonna use that for a paragraph copy. Let's make it significantly smaller, maybe 14 ar 15 in this case. And let's make it a regular wait. Are a medium in this case Castaignos kind of coming together slowly. So now we're gonna change the alignment. We could do a center alignment, or we can go up and do a left alignment and we need to change that letting or gapping between spacing. So I'm gonna go here right here in this area and go ahead and try out 18 See how that works . You can widen it a little bit more to have some nice spacing, but not too much. So that's works like any other text box. And and designer or illustrator could go ahead and pop this under here. I don't want to make it quite as long. So I'm just gonna have it be two simple sentences. Just enough to kind of explain a little further what the user needs to do or what will be in here when the user does click on this button. I think I'm gonna do a center alignment here because I don't have a whole lot of text. So let's do center alignment center alignments. Nice. When you have smaller text boxes, the larger your text box gets, the more left alignment tends to work out a little better. So I'm gonna change this so I don't have ah orphan. It's called Orphan. It's all by himself. Just one word. It looks strange. We don't want that this. We want to disclose the gap so we don't have an orphan, and we can also change your pixels is automatically happening when I drag. Have your smart guides are kicking in its notice. That kind of scion colored blue line That means this is gonna be center aligned with that white box. Same thing I could go ahead and drag this till I could get some center alignment. I'm good to go. So let me go ahead and change everything about this box because once we start to repeat it , we're gonna be creating lots of different versions of this box. So let's get this box perfect. Before we start to repeat it disclosed the gap. You notice how it's kind of automatically adapting the photo to when we make it a different size. So I'm gonna zoom out so I could get a good idea of the layout so we could even do four across the bottom. The lessons do three for now. And I think I'll be able to expand that a little whiter. We gotta think about mobile options. So when this does collapse in the mobile option, we have responsive design. This is gonna be shown first, and it's gonna be stacked so you could have the 2nd 1 here in the 3rd 1 here. That's why. Haven't image to these. It looks a little redundant on a desktop, but when you do have mobile view, that image, along with the link does kind of help instead of just having a symbol. But yeah, we could do custom icons instead of a photo. We don't have to have photos, but just for this case, we do. So here is the cool trick. It's called Repeat Grid. So I'm gonna go ahead and group this together as one unit. So I just right clicked and I grouped it, and I got to go ahead and click on this repeat grid over here on the upper right column. So now it's gonna have these kind of bars that I could expand. So I'm gonna expand it out to the right and you'll notice it continues to repeat the same box over and over. And you can keep you go on and do 45 if you like, But we're gonna do three. And what's great about this is I can go over to this column and I'll be able to change the pixel space in between the column to get it just right so we could have 90 pixels between the columns and the same thing goes for down here, I can actually make a rose. I could make many, many rows. So this is so easy to be able to make mobile app concepts when you have maybe, yeah, you're doing a mobile app and you have a lot of data, maybe user data that you're listing and you do it in a nice, stylized box. We can create hundreds of these things very easily by using this tool. So we just want to have one row, so just click on one just kind of size it worse, one road and we're ready to go. So right now, these move is one unit. So let's say I want to start toe update kind of some objects in here. How do I kind of unlinked thes? We're gonna right click and work going to a new group of grid. So now there's gonna be treated as individual elements again. No longer linked together like they were when we had the repeat grid option on. So in our it's gonna be able to stubble click and modify our options. So option two, an option three And one thing I want to do, I save my character style here for my option One headline But I want to be able to say my paragraph copy. So I'm gonna highlight that. See if I can go ahead and select the box right click and you to go to add character styles to assets. And now I have my paragraph copy. And then I gonna make this my header. This could probably be H two header to will probably have a larger size, which will be this up here. It's only right Click Click off of it quick again and right Click and go see add character styles to assets. This could be our H one. This will be our biggest header size and then the yellow H two will kind of be our next size down and then we'll have an h three n h four We've ever done CSS coding. You'll know all about that. So I'd like to change the photos on all of these so we could just go ahead and bring out our finder. You go and find the right photo for these Just dragon in. If I want to change your cropping, I double click and I can kind of zoom in a little bit more. My photos 5. Creating The Footer: so we're doing mobile app or Web app. Mock ups are digital product mock ups for clients. We want to do it in a budget friendly way. We're just trying to get the idea across of what we want the website to look like and how it flows and how it meets with target demographics and our user personas we developed. We really want to make sure the website looks good, but we want to do it in a timely fashion. We don't want to spend a whole lot of money in the concept face because we still have to develop this. And sometimes that means hiring a developer to hard code this and get this to become a reality, unless we're really good at that, too. But it's not always expected for us to design and concept, but also code. It's crazy start. We need to start to specialize, but anyway, so we need to do things in a timely matter. So I'm gonna try to show you a little tricks of the trade to kind of speed up that concept in process. So when we went back here, I gotta go ahead into a simple circle, hold down shift to make a perfect circle. We're gonna click on repeat grid. I'm just gonna make three. But this is exactly what we just did down here. But I'm gonna show you a little trick. So instead of dragging each photo in like I did, you could speed up the process a little bit if you already know the photos you want to load and in a certain order. So I'm taking threes, photos that have highlighted in my finder, and I'm straggling them in to that first circle, and it will automatically populate with all of them. So that works really well, if you want to kind of do some generic profile shots, so you maybe have some headshots or people shots and you have maybe 20 small circles that she created the repeat grid. You could dragon 20 kind of generic all different headshots drag him in there, and they're gonna populate that entire a row of 20 which will really come in handy when you're doing mobile app development. Would you have a lot of users? So just a little trick of the trade. Now it's time to do a simple footer. So right now we're kind of stuck with this 9 20 kind of size, but we know there's something called below the fold. So when you load a web page, this is what they'll see. But there's also ways they can scroll down. And Seymour So how do we design lower than this when we're already at the cut off? We're gonna go ahead and click on our main name here for art board. We're gonna go down here to scrolling, and we're gonna make sure it's set on vertical. And so this will allow us to pull this down so we could do things below the fold. So this is what people will have to scroll with their mouths to see. So less important stuff, really. But we're gonna do the footer. So this is gonna be the point where when they loaded in their browser, this is the line that it ends. We're gonna do a simple footer. Let's go ahead and we can just grab that bar. I can hold down old for option. You go ahead and copy that. Now we can make it a solid color. We could even make it that yellow color, order our styles panel and make it yellow? It depends. I want one. I think it probably looked a little better as we could do a light gray, but I think a purple would look nice. So now that we have kind of our assets panel opens, we click over here to get our assets panel. We have our logo and black and white. Let's go ahead, populate with our white logo. Have it down here at the bottom when we're gonna be able to add or contact information. So now that we have our character styles go a lot quicker, let's go ahead and bring in a paragraph copy. So we're gonna go ahead and highlight our text box. We're gonna go ahead and set up our foot or columns. Seems like a type in kind of some generic text. So text here, text here, text here just kind of be some links. I go, I have my paragraph styles. We're gonna go ahead and click on the paragraph style, but this is gonna be over dark backgrounds. We're gonna have to set a different type of paragraph style here, So I'm gonna go to fill, go ahead and set this up. How I like it could do different columns here. We'll get our arrow keys with drag some of these elements, and we can probably make that a little bit bigger. So let's make that 18 point and size. Let's change the gap here, so we have a little bit of a bigger gap. It's 2 30 It's pushing a little further to 40 so this could be your kind of our link text. So let's make this and drag that box lower. Let's make this a link, so we're gonna go up and make it a medium. We're gonna make it leading metallic and let's do a yellow feels will scope to our colors and do yellow. And once we let's go and do link here, it's gonna double click this link. One link to Blink three Almost do a link for Okay, so now we can right click and we can add that character styles toe assets and now we have another stop character style. Let's double click this into ah, links dark background. This will be your links for a dark background and that we could do something cool, which is repeat grid, and we can continue to replicate those to make multiple columns. That's a lot of links, but we're just kind of doing example. Maybe lets us do. Does this do for Ah, let's do three rows right there. Okay, We could do some header text here, too, so let's go ahead and on group that object, let's grab that option. Tombs could hold down the option key and were able to get that little header down here. And let's make that a little bit smaller. So let's make that 25. We could make that white as well, or I like it. I kind of like it yellow so good. I kind of do the repeat great again, save ourselves some time. Let's do three and then we gonna be able to zoom in and we could get the columns and making wider until they're nice. And even so, see how quick we're able to do that. An illustrator would take a lot longer. I wish Maybe that will happen. Someday. They'll bring this repeat grid to illustrator and Photoshopped. That would be awesome. Okay, So just like that, we made a quick footer. So let's say I want to do some kind of cool graphical overlay photo over top of the footer . We're gonna do that next. So now I'm switching years I'm back into Photoshopped. X'd is fantastic, but they don't have a whole lot of photo editing capabilities. So that's why it's nice to have another photo editing program to be able to edit photos to do transparencies and blending modes and kind of do some cool photo effects. So we're gonna do that here with this photo. I'm gonna go ahead and grab rectangle tool and create a new layer. And I'm just gonna take the, uh, this watch tool here and get a double Click it and I got a copy and paste. My little hex code that I have for the purple was basically getting my purple sample and I'm gonna get the paint bucket tool, Go ahead and fill that in and I'm gonna drag this underneath. I'm just basically gonna be doing a blending mode. I'm selecting my top color photo and I'm doing a blending mode down to luminosity or whichever one I think would look the best. Pretty sure that's gonna be luminosity, and I'm just gonna do kind of a feathering effect. So I'm just adding a layer mask to get my Grady int tool and doing a black and white grainy in. So when you do black and white over a mask, you'll be able to blend it, okay? And I just go to reduce the transparency on this so it doesn't compete with any of my foot or information, and we could always crop it annex D. So I'm not worried about that. I was gonna go to sharpen. I'm just gonna sharpen a little bit, get a nice, sharp Kristen Crisp and an image fucking talk. So now I'm ready just to say this is a J. Paige and I'm gonna bring this into Adobe X'd and be able to blend this in How I like we're gonna go pop into X'd and what I'm gonna do is I'm gonna go ahead and copy and paste my footer container so I'm gonna hold down. Option could drag a copy on the so called head and crop My photo How I'd like it. I'm gonna bring in my most recent photo, this dragon in And I got a double click cause I don't like where it cropped it and I'm gonna bring it forward or up. I'm just gonna drag it over on top and send this backward into the layering system. So I'm just going to do that by holding command and left bracket. My little shortcut. It works in all adobe programs, and they're weak. We have our little footer with our cool people background shot, and I might want to reduce the transparency on that one. So I'm just gonna go ahead and do that working shadow, But let's reduce the transparency. I'm right here in appearance number screening that back so it doesn't compete with detailed link information. All right, so we need to do one more thing, and there will be able to start toe link our object. So one thing we could do is just kind of noticing this. I'm gonna group both that background, solid shape and the photo we just dragged on top of it. I got a group those together. So those stay together as one unit I thought about you know, what if I extended this up here Kind of created an interesting kind of design. Maybe it kind of overlap. So you can kind of see the shadows down here that could work. So we could do that or have it how he had it. I kind of like it that way. Let's do that. So let's just kind of an automatically resize the photo inside that container automatically resize is as you shifted higher, which is really cool. 6. Creating Our Subpage: Okay, So I just made some small adjustments and had this bottom section can go over the three boxes as opposed to having the footer kind of interact that way. So now I'm ready to do a little icon, a little home icon. It's got to be to the upper, right, So that no matter what page I'm on, I have this nice little home icon where I can collect back to the home page. So if you're familiar with Adobe Illustrator, you're gonna be familiar already with the pin tool And so this works exactly the same way in Adobe X'd. So I'm gonna go ahead and grab Gonna make a little house icon. So let's go ahead and make kind of a simple box. It's going to take off border. I'm gonna make this nice, rounded corners but not too rounded. So just really subtle corners and I want to hold down the option key and I want to make those sharp corners because that's gonna be where roof is gonna go. I really just need these bottom corners soft. So I'm gonna take the pin tool and draw a simple roof to our house. I come you could just adjust it. And unlike illustrator, you can double click on this. It will turn into the curvature tool just by highlighting. They just have the one pin tool option. So you double click. It will turn around it, and you have your handles where you can adjust it. Nikkan Double click and it goes back to a pointed shape. I can make any of these rounded by doing such a thing, So let's take off the border and switch it to a Phil. We have a little house icon. We can adjust this. You can also develop this in Adobe Illustrator, another vector program, and be able to bring it in as an asset. But you can also created here. But if you have Adobe Illustrator available, I like to do all of my I have a little bit better pen control, pin tool control and ill adobe illustrator, so I'll do a lot of my icons there and bring this in as a character cell. But the great thing about X TV keep it live. You'll be able to maybe animate particular parts of a symbol of that something you're interested in doing. So I had this kind of life simple. I want to do a door, Glenn, create our door. We want to make this a solid shapes. Let's switch that to fill. Let's do a different color. We were gonna punch this out, just like in Adobe Illustrator. We want a punch that out. So I'm gonna highlight Go ahead, group these two white elements together. I'm gonna punch this out of this, this background. So there's the Pathfinder tool up here, just like an adobe illustrator. We're gonna click on these until we find the right one. So exclude overlap, which is the far right icon is clicked on. This is just like the Pathfinder tool. I punched that out. So now I have my icon. So I'm gonna go ahead and make this the right size so it's kind of zoom out, would hold down shift and make it the right size for us. It looks like it's keeping those curves and tax, so as they make it smaller, it's adapting those curves, which is not necessarily want I want. So it might be better to do the icon size the size it's going to be in zoom in as opposed to doing it larger and making it smaller. But that's no matter, because I can ungroomed it and be able to do the same effect. So let's go ahead and there's my little home. I Collins make sure like the size of it. That's fine. We're going to click on this. Got to get the right position. I'd like to line it up. See that pink line? How it's lining up the left of the corner of the roofs is lining up with that. That's nice. Nice to be on a grid like that. You could just find the right positioning. So I'm gonna make this symbol, so I'm gonna zoom in, select it. I'm gonna right click and make a symbol So we'll find out why it's so handy to have that as a symbol here shortly. So now that we have our home page designed, we still need to do a navigation menu. But let's kind of keep it a simple three options down here just for the sake of doing our first project together and making it a more simple web design. So we're gonna need to create multiple art boards now. So we've been in this design window this whole time and we're gonna be soon crossing into prototype, which requires multiple different art boards to be ableto link and actually make this a real lot live wire frame. So let's create a new art board. So this is create and the new art board options over here on my left, it's gonna simply click it and it's gonna add a new option wherever I click. So it's gonna go ahead and add that option, which doesn't have the footer. So I wanna make go ahead and drag it down. So it has the footer, so this will be our first sub page option. So what I like to do is I like to select all my elements and copy and paste. Or in my case, I'm gonna hold down option and drag. Go ahead and get this available. So now I could make my sub menus. So when I click out option one, this will be the website it will go to. It will be our landing page for our first link down here, an option one going to keep most of these elements like the top navigation and the footer will all remain the same. But I'm not gonna need these options. What? You need my headline photo anymore? Go ahead and delete all that. So now we need to make a landing page. So let's think about layout for this. So I'm gonna draw a rectangle box to be the container for an image that's gonna exist over here. And I would like to use that same image. Let's go ahead and go back and see if we can't drag that in here. Let's go to download City back. It can't find that same guy various drag that in here So not can double click and make the right cropping. And I'm gonna make a header here, so I don't think I'm gonna need any of that information, But let's go ahead and copy and paste some generic text. Let's do this entire block of copy into this box. You need to highlight all of that and make it my paragraph for my white background. And let's do a for this. I think the left alignments gonna work out the best. So let's go ahead and zoom in, do a left alignment. I'm going down here and just doing a left alignment. Okay, so now Let's get a header text. Well, let's go in. Grab our type tool type something in generic Go and highlight it and bring out our styles. Let's do an H one. Let's make it yellow Now I could drag my bounding box out so I could get all of my text So headline will go right here. So that's a rather large so almost wonder if I could do in h two or if we need something in between that So let me do H one I want to do h two and make a little bit bigger Let's do an in between size It will be good for sub pages We're gonna do a 60 this will become hh too. So I'm gonna right click and add that character to my assets This is now gonna be H two and this will be hh three. You kind of needed that in between header size Make that age too. I just go to replicate Bring that bounding box up here. I'm just gonna replicate this paragraph copy. So we have a little bit more to work with. All right. You don't need quite assman e breaks, so we just got There we go. So there's kind of our sub page Probably bring that a lot higher. We don't have a big white area when they first viewed the Web page. Because remember, this foot is not gonna be visible. They're gonna have They're gonna be cut off right about here. So we need to think about that when we're doing our design. We want to make sure it's adaptable. So if a really had long headline was here, it would still look good, because you you don't know the size that the headlights are gonna be when you're in concept mode. But she want to be able to make a design that's flexible that can deal with short headlines and long headlines because we could make things that look pretty. But can we put put both short and long phrases in that box and it still works because just don't know how long this phrase is gonna be. So we want to be able to make it work with multiple headlines, her longer headlines, we're gonna go ahead and adapt this and make it a little bit shorter of a letting between spacing between the lines so that I could be prepared to put longer headlines in here if the client needs it, so that's already prepared. Good. So I might need to go ahead and click this and add that character to my asset, Make that age too. And if I have an old one that has that different spacing and I don't want that character style just right, click and delete it and it's gone. Okay, so now we have that because we're gonna be copying and pasting this to make all over other sub pages. So we make sure it's right, so that when we have longer headlines, we don't to sit there and adjust the leading each time. Okay, so we're gonna do our first prototype where we link great length and create our first kind of interactive wire frame. 7. Responsive Grid: so grids grids are incredibly important when we start to develop multiple art boards and we adapt our design over and over and over 20 different times before we go to that step would win are really make sure home page and our first sub page are really perfect in a line to the grid, so there's a couple ways to do. There's two different types of grids that you can call up and X'd, And I'm gonna show you the keyboard shortcut so you get a hold down command and do quotations to pull up the larger grid, and you're gonna want to select the art board. Before you do that, the shortcuts are gonna select the art board and new command and then my quotation, and it's gonna give you a small, typical grid that you'll see on most other adobe programs. And this is really great for layout and blocking. We got a whole command and do the quotations again to get it back off, and so this is a very handy for blocking, But there's also something really great for responsive grid. So there's a responsive grid, and to call that up, it's the same thing but you're gonna add shift. We're gonna do command shift and the negligee, the quotation. It is gonna be ableto pull up the response of grid and you'll notice. And your panel, your properties panel. You have a new grid option once we recall the grid so you can change the amount of columns . So right now it's gonna be your default 12 colum response of grid. But you could also change the gutter whip the column with and you could even adjust the margins if you switch over to the box grid over here on the right and you can always switch back to default or he can make default so you can apply the same grid toe all your other art boards, so we're not gonna customize it significantly. But we are gonna change the color so it doesn't get in the way of of us trying to be able to adapt it to the grid. So I'm just gonna reduce the transparency of my great just a little bit. Second, see my design a little more, and now we're going to start to adapt some of these elements to our grid. We're going to start at with specific elements and kind of work my way down some school zoom in and kind of aligned my logo to kind of where I think would be a good placement on the grid and using my smart guides that they're gonna help me snap to certain points and then using, like, keys on my keyboard, my up and down and left and right keys to adjust. So maybe we could do a little home icon and kind of took him to the end of this column here . Same thing with our boxes. We can go ahead and group these boxes. It's gonna slide him over, refusing my keyboard keys to get very nice control over how much it slides grouping that element together. You want to be able to slide it over. We could adjust the screen if we wanted to go further over not have such wide margins on the left and right. It's really up to you. What kind of grid that you'd like to have. You can go over to grid and change those options from Magna. Slide is over and have equal column with left over on the right and the left. All right, so now we're gonna make sure logos on the top of the bottom are line. So I'm gonna select the top one first and select objects all the way down, holding down shipments, lightning objects to make sure all of them are centered. Some over here in my line panel just to do a line center. All of those are line. I'm gonna zoom in and do some changes here. I believe this is still on the repeat grid. So if I wanted to unlock those and start to change those individually, I can Where can change the column with to make them line up? Okay. And I gotta go ahead and right click this repeat grid and on group it. So now they're gonna become their own elements. So now I'm gonna center these elements, the header and the bottom links. Same thing with this. It's holding down shift, selecting both. And now I can align these on the grid. So perhaps I want thes maybe lined up on the end of this column, and same thing goes with this column absent. Nice spacing. So if I'm putting the end of the queue over there, so maybe put the end of the end. Where May just need to do a center alignment here and a center alignment here. So now that everything is really wind up how you like it, we can start to think about our prototyping and start toe link up some of our pages. I want to go over here to supply the grid here real quick. We're gonna click on my art board. Name on. I'm gonna do my little command, which is Come, man quotation to bring up my grid. But I want to bring up my responsive bridge. So I'm gonna do ah, command shift, quotation And I have the same grit applied. You can always switch it to default. So if you changed it on the 1st 1 and you want to apply, say you change the columns when you want to use that one, just click up here and you could do make default. And whenever you, uh, recall the grid on a new art board, it will do the one that you modified. So if you want to do a 10 column grid and use that for everything as a default, you can we'll go ahead and adapt this. Since the bottom footer is exactly the same. I'm just gonna right click and group this element and go ahead and get rid of this one. So why reinvent the wheel? Time's gonna hold down option and get that Put her back over here. Anything to save time. I want to make sure I could go up here to my settings so I can see the Y position is 10. 66 not gonna click on this group, and it's 10 77. So what I'm gonna do is copy this. Why placement on this home page, and I'm gonna adapt it to the one I just dragged over to get a perfect placement from one to the other. So I'm just pasting my y placement, which was nudged up a little bit. So you press enter. So now it's gonna be exactly aligned with each other. Bring my picture down. We could drag her picture over here to the column so that lines up nicely The same thing with our typography, we could maybe do it the beginning of a column. We could drag it here. We have a lot of white space and let me drag this over here, and I also wanted to put another little line here something. Grab my tool here. I think we have a lot of white space. We need to have some kind of element to divide everything and just going into my assets, making that a color and taking off any border on my on ad by default. Okay, so great. I'm gonna go ahead and zoom out and toggle off the grid. And I also realized I want to do the top part two. So I'm gonna go ahead, get rid of these elements. Let's go and get this top part Exactly how we like it. We can add knave links a little bit later, but I'm just kind of doing a really simple website at first, without too many lengths to kind of show you how the protest prototyping works. We're going to send that backwards and layering system I'm holding now. Command left bracket holding it. I think we have a hero image. That's why this isn't perfect. So let's go ahead and toggle off are responsive grid. I'm gonna hold down command and then shift and then the quotation mark to get them to disappear. But you're gonna need to select both of your art boards if you have a both on. So I'm just gonna do command shift and rotation. Now they're both off, and we're ready to start to prototype and link up our very first week. 8. Prototyping : I'm gonna move my art board a little over to the right just so I can see the connections a little bit better. Now, I've been in design mode this whole time, but let's switch into prototype mode. I think we're ready. We're gonna start linking some of these up, gonna click away on my assets panels. I can have all of this available. So what I want to do is this is how I'm gonna link things together. So when I do a live preview and click up here to do desktop preview, I'll be able to interact with the Web site. So the first thing we want to link it's our first sub page, which could be option one. So I'm gonna zoom down here and you'll notice you see a little arrow key. This is how we're gonna be ableto link it. We're gonna click on this arrow key in this entire box when that is clicked, where to click down here and do tap, which is basically a clip, A click and a drag is when you drag with the mouse or with your finger, and we're gonna do a just transition. So it's gonna change from this one to the next green. Margaret, you choose an art board which we're going to choose, the only one we have available, and you notice how it links it all automatically. And we're going to an animation we could do, dissolve. We can have it slide to the laughs, light to the right. Let's do a slide to the left so I can come show you what that looks like. You could change the duration and make it look really sleek by making a longer duration. So maybe try a 0.8 and see if that's not too slow or too fast. And that is about it. We could do in ease out. There's a couple of different ones. You could play with a couple of these air new within the last month or two that you can experiment with. Okay, so we have that linked. So now if we go to live preview or goto our preview, this is the preview of a website we scroll down. That's linked so we click to that's gonna slide to the left, and then our sub kind of page is available. So now what do we do? We're stuck. We have a closed loop. We need to make this an open loop that loops right back to the home page again. So we want to make this little symbol clickable back to home. We're gonna create another link. So we're gonna go down to our home page. We want to link this back to home. So see this little line? I'm gonna click and hold. Go he and click that back anywhere on this art board. Click it back. We're gonna make that a tap, which is a click. Gonna make it a transition. Uh, go back to our 1st 1 And this is when it's nice to name your art board, so you don't get confused. So I would name that home, and we're gonna do a slide to right. So instead of sliding left, it'll slide. Right. So it looks like it's dynamic in it automatically remembers our settings, which is fantastic. So now we have two links. We have a link here and a link here. Go ahead. See, all of her links are gonna quickly just double click this and type this as home and type this as option one. Just so when I start linking him. I have names as opposed to random numbers. Great. So let's go to preview and see our links and action. Just click on option one. Just like that. It had that nice transition. I want to go back home. I'm gonna click and you'll be able to go back home. And I do think that delay is a little too staggered. It looks kind of clumsy. So if I want to edit a particular connection, that's good. Click on the connection. Double click it or just quick at once. They're gonna change it back to maybe a 0.4. Cut it in half. Okay, I'm gonna go back here and cut it in half, too. So now that would go back toe preview. We could test it out. So let's see how we like the transition. It's click. It's gonna slide. That's a little bit faster. Were quick back home. Here we go. So there we go. We already have kind of a live working wire frame, which is so cool this would take so long to do just a couple of years ago. And now look how quickly we were able to do that. So next time we're gonna do a couple more options, we're gonna click all those together, and then we're going to start to do another project after that. So let's do a couple more sub pages and link those up really quick so we can get a better understanding of prototyping and working with multiple art boards. So I'm gonna create a couple new art boards. I'm gonna go right here to this icon and do a couple new art boards. So I'm just gonna click right below and then click again and I'm just gonna slide these right over so I could be right underneath my sub page menus. And eventually, when you have 20 to 30 of the of these things, you need to create kind of a user flow. So you're gonna have a user click on one particular option, and that goes into this sub page, and then you'll have them cycle through some sort of funnel to get to whatever end goal they need to be in. So this will eventually look just like a map, and you'll see the user flow that's gathered from your user personas. You may develop if you're kind of doing some UX design so we're just gonna kind of copy and paste are sub page and be able to pop some of those photos. And so I'm just zooming in here and I'm gonna just hold down option and drag. This could hopefully snapped to the right location. So you noticed I was able to drag it down, but everything below the fold, it's not visible. So I'm gonna go ahead and select my art board up top and go down to make sure it's on vertical, and I'm just gonna scroll all the way down to the bottom. I'm gonna do the same thing. I'm gonna go ahead and hold down option Drag this, make sure it snaps two point. So it's got the same dimensions or same placements on the art board, and it looks like I need to go click on my art board and go down to vertical and just make sure I have everything below the fold, which would be our footer. So here's our three different options. We can always drag our art board up a little bit to give them the same spacing between the art boards, which could come in handy when you have a lot of these things. And so let's go ahead and swap out our photos. So let me go to downloads and swap out a few of these photos with the factory works. I could drag that one in and drag this one in. Go ahead and double click so I can get a better cropping. Okay, that one's cropped. That one's cropped pretty good, and now we're ready to link these up. Of course, all the content will end up needing to be changed. So let's go and length ease up into the prototype mode. So I just switched over to prototype, and we're gonna link these up so option to click and drag down. That's gonna link toothy second page and it's memorized Oliver setting so we don't have to change that, and we're gonna go up top to the 3rd 1 and link that down. So if you ever want to see all your linked connection, go go ahead and select the top name of the art. Borden's couldn't show you all the connections on each one, and we also need to connect that home. I come back to the home page, so let's go ahead and go to each icon. Make sure we're just selecting the icon and linking it back and linking it back. One last one, we're gonna link it backs, and now we have an open circle where they concise Eichel through and get back to the home page on each one. We'll go and select all over our boards and we could see all of the connections we have. So now we're gonna go up to the preview option and let's check it out. Let me make this smaller so you guys can see. So get a click on option one. Of course, we could scroll down now, below the fold, clicking on option one. We have that coming up. We can go back to the home page, click on Option two back to the home page and go to Option three. And we could go back to the home page so you can make this more elaborate. But this is just kind of a great starter designed to get you used to prototyping. And we're gonna do much more complex prototyping and will be able to do animations in the next project We do, which will be a Web app, concept and I wanted to go over one more thing before we move on to the more complex project. And that's your symbols. So we created this symbol with a next E. We didn't bring it in as a symbol or bring it in as a photo. This is a live little edit herbal object, so I can actually go to this. Ahbd are the symbol. Double click my symbol, and I'll be able to edit the symbol on any changes I make to the symbol or global. So if I change this symbol to, let's say yellow, you'll notice all of them on every page is changed to yellow. So that's what's wonderful about assigning symbols is their global. So I like the yellow. It looks really nice. I can go in with the pin tool and edit it further and will make all the changes on all of these. So you don't have to sit there and copy and paste the changed house over to the next art board. It's all global. So this is it. This is there a little kind of Web design? We came up with very, very, very simple display. Three simple links were not even doing an app bar, but I'll show you how to do animations and pullouts, hamburger menus and all that stuff in the next uh, project, which will be a Web app development when we talk about the branding and have incorporate that into kind of a user experience for a user flow that takes a user log again and gets them to their final destination. 9. Sharing & Resizing: So how do I show off my design? There's an option up here over here called Share Squatting. Click on share and there's a couple of options we can always go up to file and export. And we can export the art art boards as a J. Packer, PNG or a PdF. And we can have be multiple pdf pages. So this is great if you're still in the kind of the prototyping stage and you need toe, have a client mark up a pdf. This is perfect for them. But if you want to have that live, clickable kind of interaction, you'll go over here and we will do publish prototype and you can do it. There's a couple of different options, but we're gonna create a public link, so it's gonna take time to create a U R L that we can then send along to other people. Now we have a public link. We can go up here to the Link icon. We got our link copied to our and then we can copy and paste that into our browser, and it's gonna be ableto load are working prototype. So now you'll notice everything works exactly how it does when we're within X T. But now we're in a browser, and so anyone can see what we see in the preview section of X'd, and you could also make comments. You go back for the client or other people that you're working with, and there's another option gonna show you. You can click back on share and go down to plug published design specs. And so we're gonna do this and it's gonna be able to export all of our different settings for our character. Styles are symbols and colors, which would be great to share with the developer who needs to know the hex codes who need, who needs to know on the sizing of the typography and have some of the symbols. So that's exporting Now, once that finishes exporting, will do the same thing, will copy that link and paste it into a browser. Okay, here's the link. The link is copied. Let's go ahead and try it out. So this could be a little bit different than the last one. It's gonna be able to show our links. Who could go back to all screens? It's gonna show the developer how we want their user to click and flow through everything. So if this was a full website, there might be 30 or 40 different art boards, but they'll be able to see the user flow and how that's supposed to be linked up. You can also click on the individual ones, and we have all of the specific colors and you can actually click in a copies the hex code . So this is perfect for a developer who just wants toe. Have all of your specs ready to go. It shows all the typography the typeface used and any kind of interactions it'll show kind of a slide in and easing. It's gonna let them know everything they need to know. And they also click over here and make comments as well. So this goes in handy when you're working with that developer or if you, yourself are the one that's gonna be developing this in making it a real reality response. Obree sizing. This is a great addition to Adobe X'd. Now I'm able to resize my art board down to a small iPhone, for example, and see how we look on mobile. This is very important for developers and for clients to see how things adapt to smaller sizes. So let's go ahead and create a new art board. Going clicked, create new art board and let's do an iPhone X art board. Let's drag that a little bit closer to her home page. We're gonna adapt the home page first. Let's go ahead and select all over elements on home, and we're gonna do a couple of things first before we copy and paste it down there so we can select all over elements. And if we reduce it down, it'll automatically start to resize everything for us. So we see how the industry redesigned collapses when I make it a little bit smaller and everything is working pretty well. The three main boxes air not collapsing. How we like and that's OK, responsive resize, which I have right here on the right. It's click toe on. It's pretty good, but it's not perfect. It'll work about 80% of the time, and they're still kind of working on that feature and getting it better each time. But for right now you can mainly tweak how things collapse. So if you go over to your response of resize after selecting these three boxes you can unclip bond fix with. And so when you make these smaller, the with will now be responsive when you reduce it. If you click on the Bennett Highlights blue, that means the width will be fixed as you resize it down. Same thing for high def lien. Click with an height. Both the width and the height will adjust as they bring it down and they'll be smaller boxes. So now it could bring a few elements one by one kind of in and seeing how it collapses. We could highlight everything and make a copy and try to resize it down to that very small size. But the responsive resize is not perfect. It's not gonna look 100% so we're gonna have to kind of tweak health things respond. So we may need to group the footer together, group that together and go over to responsive resize. And instead of having on auto, we may need to change it where maybe the width is fixed. So when we size it down, the whip is going to be fixed as opposed to not being fixed. So kind of test out how these react. So when you do bring it down and has the best kind of combination of collapsing and becoming responsive, so auto was great, but play around with manual and see how they collapse and see how you want it to collapse on mobile. It it's not gonna work perfectly, but it is a great guy to at least get you started with. So you don't have to resize it for each size manually and kind of do a few things automatic . So I really liked how this top portion works. So I'm just gonna copy and paste my top hero image and my header and now far and I kind of like how that collapsed. 10. Mobile App Design - Setup & Ux/Ui: So now we're gonna go through an entire app design developments and you're seeing right near here a little bit of a brand that I put together quickly, and you might recognize the icons if you've taken previous classes or lessons with me. We developed these icons all in Adobe Illustrator, which is where I met now. So this is the original typeface I started to work with, which is, as of Sands Black, and I decided to round the corners to kind of give it a softer, youthful kind of appearance and kind of added this different color to indicate maybe the dime in the dive app. So what the app is? It's for young millennials who are wanting to have a very simple budgeting app. So it's called Dime, and I wanted to have a very simple typeface that's rounded. That's thick. That's Bolden. That simple because the whole idea of the APP is your money made simple, which is the kind of slogan, So everything's gonna be simple in terms of our design. It's gonna be a nice user flow, very easy to use. It's not complicated. It doesn't overwhelm with lots of advertising, either, so I also developed a couple of kind of radiant meshes here to maybe uses background elements in our APP design. Not sure for using, but I developed, um, to have those assets ready. So a few things we're gonna do we gonna happen X'd and we're gonna grab a couple of these colors and start setting some assets up. So when we start designing, we don't have to think much about this stuff. It's already loaded into X'd. So let's start bringing these colors. And so I'm just selecting this first lighter mint green color and get a copy of my hex code and pop it into X'd. Let me do it, Phil. And now it could right click ahead, take border off right click and add color to assets in order to do the same thing with a little bit of a darker green color or the blue green. I guess it would be poppin X'd. It's gonna create a box, make sure there's no border pop in our fill right click and add colored assets, and now my assets are loaded. I don't need any of these objects anymore, so it's going to get rid of that. Let's also bring in our type character. So I'm just gonna type in some generic. It would be a header font. I'm not gonna make this as of Sands. So, Ese O Sands, Okay. And I'm gonna go ahead and add that to my character styles. So I'm gonna go ahead and select with therapy, right? Click and add character toe assets and so it can add different sizes. When we started, developed the app and get an idea of type, we can continue to add assets. So now we're kind of ready to get started. There's just one more thing I need to bring in. So let's pop in. The illustrator. I want to bring in some of these graphics. So what I'm gonna do is I'm an illustrator. I'm just gonna set up some art boards real quick so I can export those is P and G's and have those assets available. I'm also gonna grab my logo to, and I won't have a transparent PNG when I bring those in two adobe. Okay. And we can bring those in as well if we wanted to. So if I wanted to have that icon and also these little icons, I could bring those in. When I'm ready, we're probably gonna want to do one that's white as well. So I'm gonna go back in and add reverse these out. Let me see if I can't make all of that white and then make one this color and the other little dot of the I would be the green color. So now others will be white on a transparent background. Let me just export. Let's make these all kind of a size. We think we're gonna end up using it at We'll save these into our symbols. Okay, So I'm just gonna right click, right click and just do each one. Okay, so now I have my symbol. I'm gonna do this white. This will be called Blue, and this would be called Green. And once we do all this kind of background work, when we start designing, it's gonna go super quick. So as you can see, I created a new art boards. Could be iPhone 678 Just kind of have a little bit of a smaller, more prominent size out there is the iPhone. X is still kind of getting out there. So I thought I designed for this size and then kind of do some responsive re sizing and show how it would look on iPhone X and other sizes and an android Phillips first start out with kind of some basic blocking. We've got to start thinking now about the user experience and the user flow. And so while I'm developing this brand, I'm thinking about the user persona and this is where we sit. Shift a little bit away from you, I, which is user interface, and we start to get into U X, which is user experience. So now we're thinking about the user flow and how they're feeling and how easy the product is to use as they go through kind of the funnel or the kind of experience there wanting to get out of the app, which would be a budgeting app. So how easy it is, is it to use the? Can we eliminate problem areas? Can we eliminate areas of frustration that may discourage somebody? Can we offer great insights right away so they can feel like the app is really giving them what they want, which is a very simplified version of a budgeting app. So when we think about the user foot flow We think about our baby. Our first let's develop a few quick personas We're not gonna go too deep into you. X were to focus a little bit more in the u I side in this particular project. But let's have two different kind of user percenters. The person was gonna be young man is to be 25 years old. He's gonna be well educated. He really wants a very simple, easy to use app. His professional, He's busy. He doesn't have time to mess around. He wants a simplification of an app. We also have a 28 year old woman who is a mother of two. She also doesn't have a whole lot of time. So both of these persona share a common theme, which is not a lot of time. So we need to capture them quickly with information that is relevant for what they're looking for. So we're gonna go ahead and develop our kind of splash page log in page whatever you wanna call it, because when you first open the app you half the log and you have to have an account have this app. So the log in page will be our very first home page. And then we're gonna have to users that are gonna be on this page, and that's when we're gonna have two different kind of user flows. So 1% of the male is gonna go one way, and the woman is gonna go maybe a different ways. We have two different kind of user flows in this particular prototypes. 11. Mobile App Design - Homescreen: So I already made a couple of assets that I thought would make a nice kind of colorful user log in page. And so I have these two assets. They're both radiant. Message meshes. I created an adobe illustrator, so I'm just gonna be re sizing this down. And what I could do is create a container. If I want this to take up the entire app screen, I could just create a color container, go ahead and remove our border, and we could his dragon in that would make it a lot easier to resize. We can double, click and be ableto drag this to particular colors that we think would look cool. So now we're gonna need are two users. So let's go out and get some circles. We have two different users that you can log in. Perhaps they're husband and wife, and so they'll have the APP, and you could have multiple users having multiple budgets depending on your family. So this could be a family based app where you're encouraged to have the same kind of account, and you can log in with different profiles just like Netflix, where you have one account. We have different profiles and you can log in as a family. And then there's also a joint area where you can kind of see joint finances. So it's kind of a really cool way for married young couples to have a simplified wait a budget and work as a team. So get up to different Loggins. One for the husband, one for the wife or two different personas. And so we're gonna get a young man was going to go to downloads. So here are some head shots I could find out who I think with better fit. Kind of our user persona were kind of thinking of a young guy. He could be this one, but he looks like he's in his 30. So let's grab this guy. We're gonna drop him in. I'm gonna hold down option to keep that same size. I'm gonna drag in our wife right here, young person. We're gonna double click and cut of resize. These head shots get a little bit closer on around the head. So right now I have kind of a thin border here. Let me see if I can't make that a little bit lighter zoom ins and kind of See, this is when you really get a zoom in and find out what we like. So I could do a drop shadow here for these Loggins, so just could highlighting both. And during a small drop shadow, we would have our logo on the log in screen. That's pretty important, however white version. This is when you test out different things. So I'm realizing, Oh, I might need to grab one with the light green to go with this kind of this is blending in too much. So let me grab my other version. So I have my other version here that uses the lighter green so that'll pop out a little better. I can also add perhaps a drop shadow to this as well, and we're gonna need to have some log in information. Course we have their names. Instead of just having kind of nameless people floating around here, let's grab our type tool. We could start to define our type a little bit, so this will be will have to come up with a fake names. Will just name him Bob. We'll just have a generic last name to Bob M. And this is our azo sands tight face, which is in our character styles. But we're gonna did have one that's also white. So let's go ahead and define our type. It was going Grab that arrow tool. Bring that up. I almost wonder if we can make that green when you take the eyedropper tool of sample or little green color. And I also want to add that green little green right here. Just take a square tool and we're gonna take the eyedropper tool. I'm gonna fill in that green. We could bring in our color this way. I need to bring in that third green color. So let's make that a color asset. So there we go. Now we have three green shades to work with. Let's go back to White and then maybe just make the first name Green. And I'm not really liking the as of Sands as lower case letters. So what I'm gonna do is experiment with perhaps a secondary type choice that's more thin. So maybe just go with Helvetica just for the sake of having something really simple. Let's go ahead and fill out his last name. So we're gonna do a bold Okay, we only have just bold. So I wonder if Helvetica new hell the tika do you see if I have a wider amount of weights? Yes. So Helvetica new I have a little bit more different weight options. So I'm gonna go black and then we can go ultra light with the last name still Helvetica New do ultra light. But that's well too thin. So let's do thin, See how that works. So once I'm kind of happy with that, I could hold down, option and drag and do hers. And let's go ahead and add this to our character styles is gonna add the character style toe assets, so it's gonna add all these different weights. So it added Bob as one character style and Smith as another one. So I'm gonna need to rename the. So I'm gonna rename these really quickly so that I could be able to define which character style is which it was able to kind of name. All of my assets just kind of make it easier for me to remember and to recall them. So we also want to make this apus simple is possible. Some were designing that we're keeping that in mind. So we want to let them know just a few other things, which is this is a log in screen, so it makes sense that they click on your user profile. But sometimes you just need to have a visual kind of guide for that. So we're gonna ship these guys down or we can ship them up. This is we're gonna play with spacing a little bit. We could break out our grid to so I could do command and the quotation to bring up our grid . I need to select my art board. First Command include ation, and that will help us. Or I can toggle in my responsive grid by doing command shift in the quotation work so that could help us kind of size things up a little bit. And I'm playing around right now with different ways of saying log in because log in. It's not really from my user persona. Long in his old kind of archaic term, Wesley use something a little more softer and friendly, so I'm doing the lower case bold. But I'm also just saying open because that's what we want to do is open the app and so we don't want to make the open app so big that they don't realize they need to click on their photo log in. So we're gonna say click on the profile to load your customs budgets green. Okay, Gonna make that a lot smaller Steuer light white and let's do a center align. So I want to make sure there's lots of breathing room and white space with this, we could even have diamond the bottom. This is where we just got a experiment with what we think would look good. We could do another bar here because I just really wanna have some contrast with this desire. Click off border. We just have a fillers doing a command left bracket. Kind of sending it backwards and layering system. I could play around with different colors. We do our greed, color gonna have a bar to help separate this big open space. And maybe we could have a little arrow that ports down. So we're gonna go ahead and create a little simple or asset that's gonna be a narrow, So I'm gonna get my little pin tool. I'm just gonna draw a simple zero, and I'm going to make that take away the border or actually do want the border. Let's make it a little thicker. And let's do some round edges to our little lines. So now they're nice and rounded. Let's make that we could make that any of these colors. Okay, so there's a little arrow. Maybe make it four instead of three. Or we could have it over here at the white. I'm going to rework this praising, and then we're gonna do our first animation, so stay tuned. 12. Mobile App Design - Homepage Animate: So I want to play around with contrast, really have something behind the profile images. So the viewer really hones in on those profile images, and that's when I grow up. Pop brought the gray box down a little bit, so it intersex and really draws the eye toward the center of the screen. Which is exactly what I want the user to see first. So if this really small text, it's not big and overwhelming, it's very soft. Who is opening the app today? It has an arrow that points right to the two user profiles. I also added a slow get that your body made simple. That will probably be a requirement by the client. And there's also probably maybe some copyright information that I'm gonna need to put down here as well. So I make that smaller. Maybe 10. Oh, it's updated. All right, so we have that little small information that will probably be something we gotta consider . That would be a requirement. So I think this is nice and simple. I don't think I wanted to be any more complex than this. Let me just play around with the pin tool here. Just make sure I have this the right shape. I like it. You could make that soft. I could make maybe one one of its soft that No, it's kind of neat. That kind of like a nice simple interface. Let's try to not be too complex with this. Okay, let's leave that alone. We got kind of have our first page, and so we're gonna kind of do a little bit of animation. So we're gonna do in animation so that when you hover over or when you click on the user, it kind of comes forward a little bit. So you cut and have a little bit of that interaction. So it's not just a stale, static front page. So we're gonna go ahead and create another our board right next door, and this could even be on top of it. Since we're doing an animation. When I do the user flow, when I do animations, I'd like to stack up. And when I dio progression toward cut oven end goal, it like to go to the right. So this will just be an animation. That's fine. And when the user pushes toward the next step, I like to go further to the right. This was kind of how elected map, but you could do it. Own special ways. One, copy this. Bring all that down. And this is where the animation is gonna happen. We're gonna make sure this is an exact copy, and everything is in the same position, so I'm gonna change this very slightly. So this is how the animation is gonna work? I'm gonna have. This is the first part of the animation, and this is the second screen of the animation. So down here, I'm gonna change what I want to change. So I'm gonna have this be the end state of the animation. So I want him to be a little bit bigger, and I want him to be our top. So he's gonna be the 1st 1 that's gonna be selected, so I might even want to shift the name over a little bit. We'll see how that looks. So now we're gonna animate, and we're gonna flip into the prototype mode to do that so I could go and flip it to prototype. Okay, So this is how you do the animation when I'm in prototype and I'm gonna select what I want to animate. So I have this You have kind of profile selected, and I'm gonna go click over toward this other little profile piece and I am going to have this be a auto animate. So transition is this moving from one click to another? And this is animations where you click on auto animate and the destination has already been selected since we dragged it there. We want this to be kind of Ah, let's just keep this animation the same and see kind of how it looks. Okay, so we're gonna go click over to preview preview and see how our animation looks. So here's our animation. Okay? So when I click on Bob Smith, it'll go ahead and bring him forward, an animate to the next slide. So now what we need to do is click on Sarah and have it go back to the home screen. So let's say would click on Bob Smith that's gonna continue on his use, your journey, and he's gonna log in. But then what if we click this and we want to give people an option to click on Sarah because they clicked on the wrong one? So let's give them that option next. So now I'm still in prototype mode, but I'm gonna need to create a new art board. So I'm gonna go to design and create a new art board. Right. So this will be for her journey, and she's gonna be a little bit bigger. She is. Sarah Smith is gonna go over here. I'll see how we haven't hear those stay in the same line. You can have Sarah's profile go forward, make sure they have a similar kind of arrangement. So I'm going to back to prototype mode are gonna be switching back and forth a lot. I'm gonna go ahead and connect. This is gonna be her journey. Everything's going to be the same auto animate and everything is the same. So now when we click on preview with a click on him, you can't click back yet. We haven't set that up, so they click back, we can click on her. So now we need to get it cycled so that when we're on hers, it links back to hiss. This seems complicated, but it's really just linking everything into a loop. So now we have Let's go ahead and move her. This is when we start to really need to map out. So this could be her journey, and this could be his journey. So now they're gonna start to fan out into different persona user journeys. Okay, so now we need to dissolute back, just in case. We want to go back from this kind of journey and go back to her. We need to give people a chance to get out of it right away. So let's go to war in prototype modes. And now we just need to link this back. This could a link over to the next option. But if they click on Bob, let's get a link down to Bob. So now this is gonna just auto animate to Bob. So now we have If I go ahead and zoom out and select all of them, I kind of see how the journey is the click on Bob. They go down the bobs journey so they click on her, they go to her journey. And then if they click on Bob, it'll go back to Bob's journey. So we have one more to do, and that's to click if they click on Bob. But they want to really do. Sarah, when I click this to Sarah's journey. So we're just creating this gigantic kind of loop here between all of them so they can have an open circle and they're not stuck in a dead end. So now we press play. Okay, so let's say I want a law whose opening the app today. Okay, Bob's open the app Oh, wait at Sarah's opening the app Oh, wait, wait. Bob's opening the app. So now you can see this kind of open cycle and sound. Now, what we need to do is when they click again, it'll load into Bob's journey. So now we're gonna do we can focus on Bob, or you can focus on Sarah. But let's go ahead and focus on Bob first. So we're just gonna continue to go into design and we're gonna create several different pages. So we're gonna click his home page after he logs in will be right here. We're gonna work on that. It's gonna be very similar to Sarah's journey, So we're gonna go ahead and do a new our board right next door, and this will be his first step after he logs in. So now let's create the home screen for Bob's budget. So I just went head and copied and pasted. We're gonna have Bob's profile, perhaps hit kind of shifts up here would go ahead and ship the screen. May we can make that animated kind of up here. We could grab Bob's name, have it be listed. Just trying to keep kind of a design theme. We probably don't need that. But we can make that something else. And maybe we don't need that either. I'm not sure, but we're not gonna need Sarah unless we want to give the option to go back and log in somewhere which will probably be down here. So we want to make this information probably a lot smaller. Let's click on this one. So you noticed When I try to resize this dime, it does it globally. Well, I don't want that. I want unlinked this particular one to make it smaller on this page only. So how do we unlinked? Global styles are global symbols. We're gonna right click and ungroomed symbol. And now it's gonna be honest and kind of level. So now I can make it a little bit smaller, maybe push it down to the side. We can go ahead and zoom in and make sure we get the right alignment. And another thing we want to do is go and call a park or IDs. So I'm gonna do a command going to do our responsive grids who command shift and quotation . Can you use that as a guide to see how we're doing with lining things up? That would just toggle that off and on whenever we kind of want to get an idea. The grid. So now we need to figure out what is Bob Smith could see in this apple. Let me make his name just a little bit bigger. Let's make that 33. Maybe not quite as big. An atrocious Let's do 27. It's getting the right size for this interface. We also want to be able to go back to the home screen, so I'm gonna put a little hamburger menu that's gonna be ableto slide out and go give you some advanced options to maybe walk out to the other user. Let's go and do our little hamburger menu Pullout icon. Cem's gonna grab a couple of these shaped tools and start creating our little symbol. I don't want to have a border on that was clicking that off. I grabbed my little handles here and make it a pill shape. Make it a little bit shorter. And I get a hold down option and get another one hold down option and get another one so we could do it. A simple is that we can make it stylized and make him different levels. Weaken Break out a circle here, kind of keeping it rounded because in keeping with the theme of our logo, you go back down here. It's got these rounded corners and some kind of keeping with the theme when I'm developing the icons as well. Okay, so I got a group all these together as one unit grouping it. We're gonna make it the size. I want to have it. In the end, some skin, a kind of hold down shift. So they all kind of scaled down together and once get some final placement on group deciding I want to have some more spacing between all these. So that could be our little icon. Let's go ahead and group those together, find the right color, you could do lime, which would go nicely with his name. So now let's go ahead and make this a sizing, right? Because, you know, once we make it, global will have ungrateful it. You don't want to do that. This is gonna be on every page. So let's, um, group this and I'm just being really picky here. I'm gonna make the spacing between each one of these. Even so, I'm just gonna select each one of these and I'm gonna go up to my alignment panel. You see, if I have the right alignment tool to do this There we go. So that's horizontal distribute center. It doesn't have a little pop out name, but I know in Illustrator it works similarly. So you do the same thing going to distribute the same amount of text between there, make sure that's right. I don't know. It seems like it's off a little bit there. That's 3.2 and thats 4.2. So I'm not sure why it's not doing it. Even that thank goodness for smart guides. We can get that even I'm going to select them all again. I think I'm finally done right click group, get the right sizing and then I can add that as a symbol and I might drag that so it's horizontal of his name. That might look a little better, but we'll see what else is gonna be on here As we start to block it out, Gonna shift it over, pull out my grid command shift, flotation and maybe line it up with that last column. Okay, so I'm happy with that. So let's make that a symbol. So right, click and I'm gonna make a symbol. And now I can be able to recall that at any time if we want to give that an option on the home page, we can make that an option on the home page. But I think it's just a simple we gotta know who were logging in first. So let's try to give them less options. The better 13. Mobile App Design - User Home Screen: before I get too excited and start doing the hamburger pool slide out information. I want to probably finish this budget page first so that I can copy and paste it and have my animation and have the same screen shown. So let's do that now. We're gonna use the repeat grid to make a really quick kind of page here. So I got to kind of create some shapes here, kind of be his budget. Gonna make him a little bit skinny, cause we will have that quite a bit on one page so we don't have to scroll. You do a little bit of a pill shaped, but not much. What's cool is that can hold down the option key and just do, Ah, few quarters. I don't have to round them all so we can kind of have that shape if we think that looks cool. But I kind of like it all rounded because of our brand. Tend to have that kind of work, But I'm just gonna push it out. So it's a very, very subtle girl. I'm gonna keep my border, but I'm gonna make it. Let's do a very, very light gray or do a dark grey. Let's kind of do something. Let's make it super thin. You already have. I wonder if I could do a 0.5. I can, Yeah. So I just have a very, very skinny border. We could do a drop shadow, but I don't know how that's gonna look. This might be too heavy for this kind of simple flat design that we're gonna go for. Let's make that a light gray. Not quite white. That's too stark. So just through a little bit of a grey kind of gives it a nice appearance. And so let's put our first number cisplatin number. Well, what could have to just do some fill in some guesswork? Here you put in 12,000 because that could be its bank account. Maybe he's Oh, really? Well, I do kind of guy and let's do would probably need to set, um, a color here for a dark gray. So let's go ahead. I think we have one right here, So let's add that one to our global styles. I'm just clicking on our gray and I'm adding it to our color assets right here, and I could be able to make our type that color. This will be kind of his balance, and then we'll just hold down. Option. This will be bank account number one. So now we need to make the type small enough where we can fit a long bank account name. Because if we design an app and someone has a really, really long bank account name, it could mess up our entire design when they start to develop it. So we need to be flexible and be ableto have long names in short names and still have it technically work well. We gotta think about the development side when we're doing these beautiful designs so that it's practical. Let's make that even smaller. Let's try 16. There's a bank account. One. Let's try. We could either bold that or weaken bold. Let's have a little bit of contrast. We have one thin Let's have this be bold. Well, what kind of like it? Maybe not quite a school. Let's try a medium metallic were just experimenting with design. Let's have some kind of design element that divides that we could put a bar here to separate the elements where we can take a solid box. Take the border off and we could send that backwards so that the type is in front of it. Have a little bit of division here. You know, that could be an option. Make it same rounded corners. Go ahead, make it match up perfectly. Let's bring that border back in. Let's make it that same half, half a point, size and make it softer or darker and just get a hold down option. I'm just creating the same curve as the one behind it has. So that could bring contrast. We can make instead of a white Phil who could even make that are dark gray, Phil. And have this be green. So it could be, uh we could have an arrow that indicates that have increased recently. So let's go ahead and get an arrow icon there. And once we develop one of these, we're gonna use the repeat grid to create all of them in seconds. So we're spend a lot of time making this first bar. But all the other bars will happen really, really quickly. Let me go and get kind of an arrow icon, or I can draw it right here in X D. So Let's do that so we can practice. Since getting Arpin Tool was doing a simple arrow. Nothing too exciting. Go ahead and fill that and take out the border. Who could make it rounded? We could make this appeal shape go with our theme. So the little arrow I created right here wouldn't hadn't finished him up A made him green. I right clicked and made him a symbol. So if ever need to recall that arrow, I can go ahead and recall it. But I wanted to kind of think of the fundamentals of this page. So this page is gonna be for budget. So it's good to be less about your bank accounts on a little bit more about your every day budget. So for ah, budget for food budget for electric. So that's what we're gonna be creating here. So I started to kind of create this first little box where that would reside, and what you gotta think about is you got to think about the development process when you're doing the design process. So I have to think that this $150 could go up to $10,000 so we need to make sure there's enough space for that amount of digits to fit in that area. And same thing for here. We could have pretty long. The user's gonna be able to customize what the budget name is. But we could always limit those characters. So we may need to limit it to however many care characters convict in this area. Or we could make the type face smaller and kind of be able to have a longer term. So we gotta think about that is I know a lot of people do this beautiful designs with this nice big typography, but they're not thinking about longer form names that have to fit into these small spaces. So I'm gonna go ahead and select all of this is one unit and what's great about the response of resize, which is I have it clicked on right here as I could make this longer, and it's gonna automatically resize go ahead and make it longer and see how it's automatically adjusting. So I'm just gonna have a little bit of a margin on the right and left so I can take advantage of as much screen real estate as possible. So I could fit as many characters for the name over here. Some just one grouping these elements and sliding them back in. Okay, so that will give us a maximum amount of room for maybe two more digits here. And then I can have a pretty long name here. So if I feel 100% happy with this, we can start to do the repeat grid. So let me get a little bit more margin over here on the right. Okay? I'm kind of using my align panel here to see if everything is aligned. How I like it. Okay, so I'm gonna go ahead and group all four of these together, right? Click and group. So now that is one unit. And here's where I love to use to repeat grid. So I could use the repeat grid and go ahead and create as many as I think they would have on the budget. I'm gonna hold down the columns and collapse that I want. I don't wanna have to tight of the spacing. So perhaps right about here, let's do one more. We can always delete it later. Okay, So now this is right now. One group So if I want to edit these individually, I just do right click and I'm gonna ungroomed the grid. And now I can go back and change some of these two different titles and for different numbers to have a little bit more realism. 14. Mobile App Design - User Home Screen - Part2: So I spent a few minutes kind of thinking about the functionality of each bar in each line of budget, and I wanted to kind of create a few details. So we want to have the budget remaining, but we also want to have the total budget here. We want to have an indication so someone can go and change the total budget. But we also want to have an indication where they can click and show who's spending the budget, the wife of the husband. So we could have two different little indications or icons we're gonna need to create for each bar before we go to repeat grid and start to repeat everything. Want to get this line perfect. So I'm gonna go and kind of take the pin tool, and I might need to go into illustrator to make a more elaborate icon at another date. But let's go ahead and create kind of an arrow that could indicate that you could raise or increase the budget. So maybe just a little arrow, just like we created before, make it round around cap, maybe make it a little bit smaller, just a little indication where they can feel like they can click on it and change it. Maybe if we made a lime green, it'll stand out a little bit better. That eyedropper tool maybe could sample it that way. Okay, so that's kind of an indication where they can hover over and they could change the total budget. And now we need one more indicator to be ableto click so that this could go into another menu system that can show all the food items that have been spent by both Bob and by Sarah . So now we want to have detailed transactions here in the food. So we just need to make a little bit of room for both of these. I gotta change. He's bounding boxes, so they're not taking up as much space. But leave him where I could be able to have longer titles right about here. Same thing with the budget. We want a line that to the left down here so we could do detailed transactions and go ahead and grab the symbol. I haven't made it a symbol yet. I just kind of created the icon Did want to make it global quite yet. Maybe just do a green I guess that's for the borders will be. Do a fill. Let me do a border. Get the eyedropper tool and sample this blue. There we go. We could make this pop out a little bit more. We could add another little pillbox underneath. Let's do a very small bordering to do a 0.5 again, and I could add a drop shadow for effect. But I don't know if I'm liking that too much. Let's do the pill shape and let's send this backwards into the layering system. I really want this to pop out, so let's see. Try, Align. We'll zoom out, see how that's looking. We might need to make the type a little bit bigger to have a lightless using medium and let's make it eight. I really want to make sure people know that's where they can go for detailed transactions. Yeah, let's see how this looks. We're gonna right click. We're gonna group this together and we're going to do the repeat grid. We're gonna go to repeat grid and we're just gonna pull down. It's good to replicate it, and we're gonna go up here and change the columns and we're to replicate maybe two more right about there. I think that looks great. So I'm gonna go spend a few minutes and kind of adjust some of these different ones over here, so it doesn't say food over and over again. It has a more realistic budget. So I'm starting to fill in all the details to make this as realistic as possible. So I change kind of the categories, and now I have specific realistic budgets. So I'm gonna want to come up with a total down here. So let's go ahead and make this logo a little bit smaller. Maybe tuck that to the right. I couldn't need more screen real estate course. We could also click on our art board and do vertical scrolling and be able to indicate that you don't have to keep everything above the fold. We could have a longer scrolling option, So don't worry too much about real estate, but me personally, I like to fit as much as I can on one screens. You don't have to scroll, so let's have a total area. So we're just gonna go ahead and sample. Let me ungroomed this one. Go ahead and hold down. Option I'm just gonna sample my total number. I'm gonna make that white And, of course, all bold. So that really stands out among the other ones. Let's do a condensed black might look kind of cool. The let's dry this is try a bold We're gonna make it a little bit bigger in size. So let's try 37. We'll zoom out so you can see how it looks. Let's make it a tad bit smaller, maybe 32. This is gonna be our total, so we can go ahead and sample this. Bring that down and let's make that not quite as big. Let's make that 30. We could try line just to have a contrast with their colors. Zoom in. It's gonna be total. So we're gonna have to figure out we're just getting estimate for now. So let's just say they've spent around C 405 106 7 Loosen about $1400 or so. Let's just take a little guess here. We could figure out the actual amount, and I'm gonna go ahead and copy the smaller text pulled down option. Now we're going to say they've spent for 14 50 remaining out of let's say their total budget was 2200 month. We're gonna need to make this bigger and bolder. So let's make that a medium weight. Let's make it 12 points and let's make it white. Okay, so there is our first budget page for him for Bob. And so what we're gonna do it was We're gonna do our first little animation. We're gonna make this many system workable. So they so Bob clicks on, he logs on This is his home screen. And so now he wants to have other options after he's viewed his budget. We're also gonna link up detailed transaction button buttons. Were you at least gonna do two of them? And that will click to a different screen that will have the detailed transactions for food . And also, we're gonna have one more where we can change the budget. Maybe it's a slider that pops out or something, but we're gonna figure out that user journey as we continue to design this 15. Popout Menu Design: Oh, so now we're gonna do our little animated hamburger, Many that's gonna pop out just in case Bob wants to do something other than click on these buttons. He wants to get back to the menu system, so we're gonna create need to create another frame to be able to do that. So there's one easy way to do that and sit up having to create a new one and copying and pasting like I have been doing. You could right click and copy and then based Boom, just like that. And we have to think about our user journey. So this is him moving on through his user journey. So we're going to be able to make this hamburger menu on this side. So here's kind of the trick to this, and I may need a little more room, so I may need to slide this down south for the menu system. I'm gonna go ahead and hold all of this together. I'm going to right click and group it. So here is the trick to auto animate. I'm gonna first make my little pop out menu system and let's go ahead and make that her break color we could make it a little transparent, but let's just keep it a solid color for right now. I'm just gonna kind of pull in some generic type here. It's gonna hold down option and bring it on top. This will be Link one link to Link three and let's just have three simple links. Well, let's do a link for why not fill out this menu a little bit? And let's put some more letting or spacing between the characters, which is right over here, That will be enough spacing. So, like one link to link three, we don't have to have the hamburger menu go all the way. We could have it go down here, have a pop out, and we also maybe want to bring our icon down with us so that they can close it down. Okay, so there's a little menu. So what we're gonna do now is we're gonna group all these together everything in the menu, get a group together and slide over here and everything here. We're gonna group together all original screen. We'll get a group it and we're gonna slide him off the art board and slide him on top right here, right where we want him to overlay. So this is going to give the appearance that this is coming out and animation and shifting that screen over, Let's go ahead and make it animate. We're gonna go up here to the top. This is gonna be what initiates the slide out to the left, and we're gonna click that all the way down to here, and we're going to make it a transition. And we want the content to slide to the left. So we want this to transition to this, so this will be popping out to the left. So let's do a sly push left. We have a push left and we're gonna do an easy in and out, which is gonna be a nice transition. And let's do it really quickly. So we're just gonna do a 0.1 seconds and we want this toe link back and be able to collapse the menu that we just brought out. So we're gonna bring this right back up here, and they were gonna do the same thing, But instead of push left or what? The item to push that menu back to the right so instead of left we're gonna do, right? So it is have to support connections here, which is gonna be a slide left here, which is gonna be a slide. Right. So now I'm gonna click here. So good seeing my preview from this particular art board instead of having to go back to beginnings and click here, be able to preview starting at that page. So let's see how this looks. We're gonna click that slides out nicely with a click back and that slides out back. So you have a slide, right? Slide left. So that looks pretty nice. And then we could even take that one page this one frame right here, and we'll be able to link those two different pages all throughout our design. But we just wanted to show the client the kind of how the application would look in terms of the menu system coming out, and we could make this a little pretty. We'll do that next, and then we'll be able to continue on with our app design. And I went ahead and downloaded some icons and kind of customized him a little bit to our brand and our color scheme. Not gonna go ahead and use those as little icons of squats. Those big budget planner credit scores be this icon later too. A little less. Send message icon and switch users. I'd like to get some little crossing arrows, but I can always replace these at another time. I'm just gonna make these a little bit smaller. Now that I'm seeing them. I don't think I need him quite as large. Just having a little icon to help the user break down that information and to know what it is. So let's have some dividing lines. So I'm just gonna take a little ride here. Just gonna make some dividing lines across once I have it. How I like it. I can always just hold down option and dragged down another one hold down option hopes. And another thing is, we could create the tops and message. And what could actually do a repeat grid on this as well? So if we wanted to create one box and then just repeat the grid all the way down and I want to add a little bit of contrast, so I'm just changing some of these Taub old be the first word could be bold. So now we have a little bit more of a polished menu system. Let's go ahead and save it and see how that works When we play, it should still remain the same, and I also added a drop shadow to this box to make it look like it's overlapping. So you have this top gray bar and you notice right here. That nice drop shadow helps bring some definition to the pullout menu. Let's go back up here and see how this looks. It's press play, and we're going to have it pop out and then have it pop it beautiful. So now we just need to create all these pages, and Lincoln will probably not gonna do all of that in this class. But we could at least link up one of thes and one of each maybe one of the detailed in transactions and one of the remaining budget just kind of do a few of those to kind of see how this process works and how it could really make this a fully functional a prototype 16. Transaction Menu: So now we have our pull out menu set. Let's go ahead and make some of these other pages who can start to link them up. So we have this kind of connected. But what about the detailed transactions? What happens when Bob or the user clicks on detailed transactions? Well, what I would like the app to do is when you click on that shows all the recent transactions for food. So let's say we're doing the 1st 1 And but it also says who spent what. So did Sarah spend it? So did Bob spend it? So that whoever you share this hap with, you'll be able to see who is using the budget and how so? What I'd like to do is send of this going to a whole nother page. I wonder if I can't do a little animate drop down box to show Um, so you don't have to leave this home page. You can kind of do some things and view some things without having to switch over to another page. So we're gonna do something similar to how we did with this and do a little animated kind of pop out box. So we're gonna take this and replicated. So I'm clicking on the art board and I'm gonna copy and then paste it over to the right so we're to keep everything intact, but we're gonna do a little drop down kind of box that comes down kind of shows all the transactions that happened with food and maybe a little arrow indicator where they can load it to a new page if they want to see the entire history. So now they have a little poor pullout box going. I want to make sure this food is on top of that poor box. So I went ahead, created a group out of this, and I can go ahead and do command into the right bracket toe. Send it through the layering system, putting out put it on top, or you can go down here to your layers and you'll be able to see all your layers with this particular objects you'll see group and then you could slide it all the way up top. So it is the most top layer I could do my little shortcut, and I could see it going up through the layering system all the way to the top. Yes, it's gonna collapse that. Okay, so now we need to kind of figure out what color we want to make it. Let's go bring up our assets panel and play around. We could do it. Ah, dark drop down menu and have lighter colors. Or we can kind of sample. I don't have a light gray in my assets. Let's click on this color here. I'm gonna add that light grade to my ass. Oh, it added a whole bunch of them. I really just want one. So let me get a box here when we do it. Phil, let me grab that color. Take out the border now. I got that sample and right click and make add color to assets. Now have kind of a light gray color so we could do this color pop out, which I think might look the best. Let's do a nice skinny border 0.5 again. Now let's do a little bit of a drop shadow. I think we're gonna need that drop shadow to really pop out over the remaining options. So this will be your detailed information. Let's sample. Let's go ahead and I'm Group this. I'm just gonna sample this food. Hold down Option. Let's have one group it yet again. Well done. Option drags. This will be our first food item and we're gonna do the repeat grid so we don't have to keep doing over and over and over the crab a line here make kind of a box for our first transaction. Now you make that a nice light gray. So this will be transaction one. So let's say it was food lion. It's a grocery store where I live. And let's say it's couldn't collapse that down. Grab this option here and let's collapsed that so it doesn't get in our way. Make that dark gray. And let's say they spent 55 27 just kind of some random numbers. Let's make it smaller. So there's contrast between this main one and this one, so let's make it smaller. But Boulder. So let's do 18. But let's do a boulder wait all the way across, make it even. There's food line, but we also need to have an indication of who it is that spent that item going to scroll down here. And this is gonna be Bob who did it. So Bob Smith made that transaction. But let's make that smaller and bold. Do our boldest wait. We have and make it even smaller, maybe 12. Let's make that a color that's gonna really pop out. It's gonna make it that color. So now that's gonna indicate that Bob is the one who spent that and let's do a couple of a couple more and then we're gonna do their repeat grid. So let's see. I wonder if that would look good. Bold. That's just too much. Too strong. Okay, so we're gonna go ahead and click on all these items. We're gonna group these together, and we're gonna cheat a little bit and do our repeat grid. We're gonna drag down, over, over, over, over, over. Let's do, um we could do five transactions. And let's collapse the spacing between him till it's right about here. And then we're gonna wanna have a little more options. We're gonna have this down, and I am gonna do a little box here at the end, and I'm not sure what color yet, but I need it to be high high contrast. So perhaps the black and this is gonna have a simple arrow on it, so I'm gonna go ahead and bring this down. Get my pen tool, just a little arrow so that they can click more to get all the whole history of the transactions. Make that lime colored. Let's make the border lime, not to make it rounded. Rounded caps. Let's make it thicker. Not quite that thick, maybe three and maybe two. There's your little indication you could get that centered aligned Go. That's a little indication that they could do more or you can also play around with color. We could have a little fume or or see all transactions so we can have a visual as well as a word. It's gonna bring this down. Let's bring that up in the layering system. I'm just holding now command and right bracket. I can goto layers and do that to make this smaller. These were all these little details that we have to figure in. So see full details, and maybe this arrow, instead of going down is to the right. Let's look that over to the right and make it smaller. Let's make that a tallix have you don't have any italics going on. So let's do, um, live metallic and let's make it a 10. It's good for now, so they could do see full details, so that just kind of gives him an idea. So those there's Bob Smith and this may be this. Say, this one is Sarah Smith, and let's make her a different color open. I might need toe unlike these. So now that I'm happy with this, let me on group the Grid and now I could edit each individual one. Let's do that with select these two and do a shadow. There we go. That makes it look a little more three D and layered. I'm not 100% sure about the red. It really helps visually to have it stand out. I'm just wondering if it's a little bit too different from the color scheme we have going, so we can always switch those colors fairly easily. I think I might need to angry that to access so you could change that to the lime, which you can't see very well. I could change it to the green, and you could tell the different users. Let's do that. I think the red was a little too much. Well, too jarring. But that's why we test things out to see if they work. So now let's make this cool and animated. So we're gonna go into prototype mode. So now that we're in prototype move, that's go ahead and isolate this button because that's going to be the button that we're gonna click to be ableto load this particular afraid. So what? This is his group together, so we're just gonna need to right click and on group it so we can get access to Justice Button. So that's the button. We want the user to press to be able to get over to the side, to be to go over and click over here. And we are going to see if we can't do an auto animate and that's gonna be on click So that the on tap great ease in, ease out. Let's kind of test that out and see how it looks. Let's go click on our aren't bored up here so we can start our preview there. Perfect. So it almost looks like it slides out, doesn't it? And so now all we have to do is have this button click back. So right now I'm stuck. I can't move anywhere. So what we want to do is be able to isolate this button and link it right back over to here . So let's see how that looks. Let's go ahead and click here and play. So now we're gonna click over. I got my drop down menu and I want to click back and I'm good, Good to go. So eventually we're gonna have to click over the full details, but probably not in this particular class. But you would continue to do the same, create another, are bored and be able to send that on its way to that particular screen. So let me just in review, just go back to what I did. I went ahead and did a auto animate on that one, and they didn't ease in and out and on a click and then just did the same thing back. So now let's save and see what we have so far for hiss user journey and see if everything is linked how we like it. So let's go see what we have here, and so far we have hiss journey. He starts here. He selects his profile. He goes into his main home screen. You can click on detail transactions and he gets a pop down menu. Or he can go up and select this top menu and get a pullout box, and the next couple steps will be to figure out where those go we're not gonna do. All of them will just go to do one. And then also what happens when he clicks down here or any other remaining buttons that need to be selected and, of course, will probably fill hers out, which might be a copy of Hiss. But maybe she takes a different direction and does something different down here with these buttons, and she has a different user journey. Then he does just to kind of show the client at wide variety of different user trails. 17. Fine Tuning and Linking Our Design: so get a click on play and let's see what happens. So let's click on Bob's. So get a click when we got to go in. And let's say we want to do the menu, see what's Check it out. Okay, it's quick back and let's go find out what detailed transactions are. Okay, excellent and still cook back. So that's what we've done so far and a couple of things we could do. So we want to do switch. Users, maybe can have that on so we could cycle back to the home page. We could maybe make this dime logo clickable back so we don't have to go over here and go to switch users to get back to that home page. We could even have Hiss profile picture clickable back to the home log in screen, or it could go to settings. So these are all things we're gonna have to figure out what that user flow is like. So let's say we want Teoh have switch users. Let's go ahead and on Group. I think this is still all grouped together, so let's say we want to have this switch users button likeable. So I had to separate these from this big group and have it on its own. And I want to go ahead, have this linked all the way back to the selection screen, and we want to just do a transition. We just wanted to be a simple going back. We could have it slide down or up. Let's do a push up and see how that works. Let's go ahead and preview. Okay, are on Bob. Let's go to his page. Let's go to detailed transactions. That's great. Let's go to menu. Let's go down to switch users and we're back to that screen and then we could go to her journey. So before I continue, I want to make sure everything is exactly how I like it. Because if we start once we start to do more art boards were gonna be copying and pasting and replicating all of this. We really want to make sure it's good now, so we don't have to go back and change. Many are towards later. So I'm gonna spend the next 10 minutes kind of fine tuning my selections. I've already made a couple of changes over here. Uncle hadn't show you where my drop down and wanted to have the ability to show increases in budget cause another partner or husband or wife or whoever is teamed up on this app with you who's also sharing your budget. They could increase the budget on a particular category. So I really wanted to highlight that as something that was separated from all these others transactions is something special. So I did a kind of a higher contrast, different background from the white and kind of used a little arrow. We did a couple lessons back and then wanted to do kind of a profile picked at some kind of personality. Teoh to that so they could No. Okay, that's the person who increased the budget and also went down, added a little bit more. Drop shadow here so you could see it over top a little better. And I was able to kind of do a preview. So what, Over here to share? And I went to publish prototype that I was able to kind of test it out on my phone, and I realized I need to make some things a little bigger and music tweak some colorings. Also at this little link is too small. So what I needed to do is link up this whole ah white section to the detailed transactions to get that pull down menu instead of that that tiny little. But it was really hard to press it with my finger. So shearing going over to sharing, sharing the prototype sending linked to yourself, Open it up in your phone. How does it work? How does it feel? Do you need to make buttons bigger? So you need to kind of go back and do some testing by coming up here and doing this, sharing options and getting that link or even just exporting them as a J peg up here. And then you could just load those pictures on your phone and kind of gauge. The size of the buttons are the too big or too small. So I was able to go back and link this entire section instead of that little button to the detail transactions. So now I feel like this kind of bold money symbol and the light type of type OC reused for the numerals was too much contrast, and it kind of looks a little bulky, So I wanted to streamline it. So I kind of change it to a Helvetica new 22 at a medium weight instead. And I made it a tad bit smaller so I could have room to fit in larger numbers. So I want to be able to change all of these, and this is a little overwhelming. I already have three sets of this. So let's see how we can changes a little quicker by using our assets panel. So I have this exactly how it like it. So I'm gonna go ahead and right click, and I'm gonna add that character style. Okay, so I added the character style. So this is now gonna be Let's call this money on the list. Dark background, whatever you want. A title it. And I'm gonna be able to select all of these, and I think I am. Group him from my, uh, big group here from the Rose. I'm gonna go back and click on it, and it's magically change so I could go ahead and changes all fairly quickly. Gonna go ahead and change all of these and change them here and there were ready to move on . I did one other change as I just added a little box, little different great colored boxes to add some contrast between the different rows so that they don't look like one big, long list that they see more like boxes. And people can break down those four options better and looks a little better that way. So now that I feel like I find too and everything, I'm gonna finish up doing that your real quick, and then we can move on to the next slide, which will be this little button right here. We want to make that active, were to do that slide and do one more, and then we're gonna be wrapping it up so is able to select everything and switch up all over to this global style over here. So let's say I wanna edit it. I did three different Rose took me about a couple minutes, so it didn't take me whole lot because I just I just selected. Um, all went over to my character styles, but let's say I want to change it again. You have to select him all to change him again. No, all you have to do is go over to your character styles are going to right. Click the one and I'm gonna edit it. This is the one that we're using for all these numerals. Let's say I want to lighten it, are dark in it. I could do that. We'll get the eyedropper tool and sample a different color where I can get maybe the green . That's what's so wonderful. Once you link all these up to Stiles is, you don't have to sit there and select him all again. They're already there for you. So let me right click and edit that again and we can get the right number or the right shade. I think we had it pretty much on the right shade. I wanted to get this live, So let me just get this little character and select line. But we can also change the width and the height and the size. So let's say I want to make him a little smaller. That could make him all just a little smaller, which might work out best for us for making sure we have room for longer numbers, and also I could go back and right click again. We'll see if I can find it here it is. I think it shifted down because I edited it. So now instead of medium and maybe try out light and we could do gold could see it go across the entire page medium. I kind of like BD um And I wonder if I could change the gap. Looks like I can. So I want to change the spacing between the numbers. Right now there's 66 points. Let me change that. Cut that in half. That'll tighten the spacing a little bit more once again leaving us more room to have long numbers. Somebody, I guess some people have big budgets. We need toe. Always think about that. I moved this out of the way so I can update and select the numbers. And I have this group does one big groups and I'm just gonna slide him back over and find the right position because we have not duplicated this slide yet. So we could still edit it once we start duplicating. Were to start the locket on our look a little bit. So this is a good time to pause. Get some approval from somebody. Senate passed people to make sure everything is perfect because As we get deeper and deeper into this, it's gonna be harder to change small things even with global styles. Um, like the positioning of this, there is no global style for positioning. So if we have this replicated several times, another slides, we're gonna have to mainly change it. We can't really do a position, character, style or asset, so let's get the position right. We can have a drop all the way down here. We could have it drop in the middle. We can trap up all the way to the right, so I kind of like where I had it before. I think that worked out well when we also make sure this is behind in the layering system. I can go to the layering system here, and I could shift that group around because right now it's on the very top, so I could drag him down so that he's below that food. One. Let's just keep dragging or I just like to do my little command and bracket. But when you have a lot of layers, sometimes being able to visually see all your layers, um works better to be able to drag those round So now I'm ready to go. I feel very happy with everything. Let's do our last couple ones and wrap it up. 18. Testing Your Design On Your Phone: So I have my link, the your L. I sent it to myself and messenger, and I was able to open it up on my phone to kind of test out the buttons to see if they were big enough and just kind of testing out the prototype. That's kind of what it looks like when he loaded on your browser on your phone, and I'm able to kind of get all the blood in options. So I'm gonna go back to the switch user option and then my many systems, we're gonna go back to switch user, and if you double click, you'll be able to see all the live interactions. So if you ever want to tell a client a double click on a prototype, you'll be able to have them show all the interactions on the page of their lives and link herbal 19. Linking It All Up: switched on a prototype note, and I wanted the link any remaining links that we have available. So I want to be able to link this dime low, go back to the home page or back to the option screen or some other kind of options screen . So I'm just a prototype. Modi was gonna drag and get these things back to the log in screen or wherever. I'd like to point so that everything is clickable, so this might go back to that one. Same thing with here. All the all of them will point back home just one point. We don't want that one to be active. We don't want someone to accidentally click that one, but people intentionally click the logo down below, so we just want to make sure they click. That will go somewhere. Or perhaps not. And so let's make all make sure we select everything and everything's linked up. How we like it looks like a best, but if you break it down one by one, it's not so overwhelming. So we have this linking back. Do we have this linking anywhere This does not look like it's linked anywhere, so this is our will pull down menu. This one is linked. This is the one we link down here to have it slide out. But we also need to have this other page like down there as well. So this is where we could. Mapping comes in handy. Okay, so we have a push up. So it memorized our last live. But I think for this one, we want to have a slide. That's what we did for this one. We could get a slide, a push left. So this will also be a push left because we want to replicate the same pushing left the hamburger menu sliding out. So push left. So that one's connected. Now it's, I think we have all over little connections and let's give it one more test. This is Bob. Sarah, We haven't done Syria yet, so we click here both the click back here. It'll go back. But it did kind of a slide up thing, So I wanted to kind of a transition so I could go back and change that later we go to Bob, click through and I can do this and click back. I can also live this screen, but Now this one's connected. So if I want to go back to pull out menu, I can. So now it's all a complete cycle with that on off. And then now we just got switched. Users connected. So now when I do this switch back to the home screen and I got myself a nice cycle, why would you go back to the home screen is click on the logo and I'm back. So we're ready for our next art board. And this time we're going toe link up one of these down here, which is gonna be the same message. We want to kind of go to that idea of. He goes through here. He's this kind of this journey that he goes through his user persona. He kind of comes in here. He looks at everything he wants to check out food because he doesn't. He has a lot remaining. He clicks on transactions. He goes here. He sees that the wife increased it by 50. And he's wondering why. Because he's got a big budget left. So he's wants toe kind of messenger. So he pops into here to the menu and he wants to send a message to kind of communicate about that particular budget increase so we can't create a new screen or a new art board. So we're gonna duplicate one, just go and duplicate this one. We're gonna copy it, where to go down here and paste it. And he noticed that it also copies the prototype links so we don't have to like all those up again, as opposed to doing the option and dragging. It doesn't say that it just copies the graphics, but it doesn't copy the prototypes. So these prototypes air saved now that I was able click on the art board copy and then paste it. So we're gonna position this and part of the layout of the story. So we're gonna do this kind of in an order. So he's going to click on here to his main home page. He's gonna click on detailed transactions first, and then he's gonna shift over. We're gonna drag this over part of his journey. Where to share the client. Put some spacing between here. Okay, so then he's gonna click over here to send a message, and there's good click on message, and it's gonna load this screen. So now we need to edit this to be a nice and message screen. It's 20. Message Screen: way. Get too deep into the sign. We need to think about what this message page is going to entail. What is the purpose of this messaging system? Well, this is a private app that is shared a private budgeting app that is shared between specific kinds of users. So I could be able to talk to each other about certain budgetary things. And we want to make sure this is private and within the app, this doesn't just link outside of the phone and go to the messaging app. That's gonna be its own unique communication messaging system. And all message of all messages will be deleted after 24 hours for security purposes so that these air really great ways to message your partner about finances. And you don't have to worry about if you're phone gets taken. There's not any kind of things that that'll be sensitive. This will be a private messaging app. So now that we have that in mind, we're switch back into the design window and get started, so I kind of slide this out to the right because I don't think we need those particular details. And so we're gonna think about what we're gonna need. Not gonna need that. Maybe have dime here in the middle. We're not gonna be that item either. But what we are gonna need is we want to continue to have our top menu, have some consistency with everything here, or we can slide him out and have more room for messaging. It just all depends on how we want to design this. So the whole point of this app is to be very simple. So let's do a very simple clean design. Just go ahead and do a message box and let's do some rounded corners all the way around. So just click it hold and let's see what it looks like with a little bit of a shadow. Let's do a further cast shadow, so I'm gonna add maybe a five and five. So the x and y axis it's gonna be further cast out, gives a feeling of distance and kind of blur out that shadow quite a bit having at 16. Let's make it 11. Do we need a border? I'm not sure I was going to click off border. Try to make this clean, and what we could do is once we're done with this bubble, we can go ahead and copy into the next bubble. We're gonna have a one, um, bubble kind of conversation one from him and one from her. So this will be one that was previously from her. And we'll have one where he responds down here to her with the response of our little story , where she increased the budget. He's asking, why did you increase the budget? So what we could do is we may not need this anymore. You know why? Because we're gonna have the bubble. We could have some kind of profile image in the bubbles. So what we could do is this could slide up and that will give us more room for messages. So I helped us have a slide up animation, and maybe it kind of goes to the middle and keep that in the same exact spot. Eso We'll have more room for the messaging part. So this will be message when we just told down options. See if we have ram for a second response. We're also gonna wanna have a bubble where we type, so that'll have rounded corners. Make that a pill. We're gonna need to develop some icons for text indications where they can type in. Okay, so this will be one message, and that will be the other. Let's go ahead and grab his response. Let's go ahead and do command and I'm doing my right back bracket to bring them to the front. Or it's got a lot of layers going on. Goto our layers panel and bring him up course. We can nicely group all these so that we can group them all into a different folder so that each art board has its own folder. So we have all these different ones so it can pop into message. And I titled these Now, So have menu and message. So now I know which art board is which, like a double click to go in there and there's all my layers and that one our board. Okay, so now we get to figure out how big do we want the little profile images to be? Let's take off the shadow on that. I don't think we need it, and we need to have her. So let's go ahead and grab her. Just gonna hold down option and drag her on over. Make her about the same size. We also want to remember to pull apart grids every once in a while. So command shift, quotation. Just kind of get a good gauge on our little responsive grid. Here, man. Shift in quotation marks. So what we're gonna do is have him in the middle of responding. So what we could do is have it right here. This will be his responses. Is getting ready. Type in perhaps a little bit bigger. Hold down shift. So I could do a nice, but I don't hold down shift to get kind of this odd. That doesn't scale dimensionally. So if a hold on ship, it will scale the dimensions perfectly. Just little trick. Now, we're just doing kind of some design ideas. We have a profile picture hover above, give it a layered look. So now we need some typography You to go back to styles and see if I can't find when I like , do light white. But let's make that are dark gray. This will be our message that she made So get a type in kind of a fake message and type in the fake message here and then we'll do a couple of icons to help us indicate that this is where he needs to type his response. Okay, so I kind of typed out some generic conversation here and now. I couldn't kind of lay it out. How? I think it should look, So I'm just gonna go over here and do like, a left alignment and let me kind of put that back. Probably would have a name to just win. Grabbed her name. Sarah. That's up here. Hold down Option and describing her name, dragging it down so I don't have to re type it out. This will be Sarah, but we're gonna want to have this be in the dark gray. And once we get this type correct, we want to save this in our style So we can recall this type of black text on white background again. So let's see this to 28. And when I add a little more spacing between type a little more letting as they call it. And so we also would have a time stamp. Let's do the time stamps. This was 12. I'm 11 2020 and the timestamp doesn't really need to be that large Just enough to be read and let's make it medium. So that's what she said on that date. We can add little design flourishes here so we can make this a little bit of a dark box toe add contrast. You bring this up a little bit, z man, that the line up as such match the curve here. But I'm gonna go down and hold down option just to do that one and then hold down option and just do that one. So now I just have curves on the top sending this back when in the layering system and I'm gonna now want to make this white. We're actually a kind of a dark or light light gray. And now that we have it on a dark background, we have the chance to add in color, which always helps. Now it could change the size of a profile photo. We got to remember, people are gonna want to be able to see longer messages without having to scroll. So this is where we may need to sacrifice the some of these elements up top to make sure message can be read and be much, much longer So if our message needs to be really long, because this might be private conversations, these air private conversations that are going to be deleted after 24 hours so they could be it could be long. Let's go ahead and hold down shift. Let's make her picture smaller, just trying to be efficient with our space and thinking about when this is going to be a really live app and that we have needed a just for larger text. So that's why maybe this text could be 16 and maybe instead of a thin wait, we do. A lightweight would be read a little better, and we have a chance to fit more coffee and more type before you got great, they said. That's her little area. Some Scott copy hers. The group are not copy, but group it shipped it up higher, and this will be what he responds with. So we'll have him be in the middle and then kind of have a doctor at dot like he's still typing. And let's go ahead and save this character style. Save that character style on this is gonna be our message text, fallen white background. And so now I can click on this and change that to the same type as above. Okay, so we can have a little indication of a type, so I just put, like, a little line here, maybe a box. 21. Message Screen Part2: a thin line up to the right. I want to make it a different color because we want to make sure we indicate that that's not a letter. That's not a really awkward L. That's the indication that he's still typing. We wanna have a send icon, maybe an up arrow, to kind of indicate what he needs to press to send this. I'm So what's gonna create a simple circle and we're gonna make it thick border. So let's take our border and make a little thicker. Maybe four, maybe three. And we could change the color of the border. We could do any one of these weaken do. Maybe maybe one of these darker shades right there an hour to draw a little arrow icon Riddle thin arrow with this one. Do you cook up down right there and we're gonna make this green guitar. I drop eyedropper tool in, sample the green and we're gonna make these rounded caps or a round And then the rounded cat there go nice rounded. We can always change a thickness after we draw the line, Draw simple line and shift that over. It's doing smart guides, so let me select both of them and do a central line. That's not helping, either. So sometimes this is why I like to do a lot of my icon development and adobe illustrator, because I just feel like Adobe XY. It's great for doing very basic stuff, but if you ever want to do some complex symbols, there's some little things that kind of bother me. There's no way I can select the snap to grid off like you can in Adobe Illustrator. So I made him hopping Adobe Illustrator and get a little bit of more precise button. There's also the ability to make this bigger cause we are resumed and quite a bit so I can go ahead and scale that bigger. Do you get them lined up that way? They would, you know, have a little bit more control. Now I can also grab my pin tool and edit these little points. Got a center it There we go now, Aiken, group this and send it all the way down. I think I was zoomed in so much it was snapping to the grid and not allowing me to, uh, center it like I wanted to. So let's change. We're gonna do a border on this and we're gonna make them both the green color. We make sure they're both round of caps around the corner around the caps and then make it thicker. Let's make it a three. Let's see how that looks zoomed out. That's about right. Make it a little bit smaller. Group these guys together. I could make this assemble and use it elsewhere if I like how it is. Cam can also trial different colors so we can trial the plane or the blue. It's travel blue, the blue looks a little better. I'm gonna collect both of these groups together and right Click and make it a symbols was gonna pop over to my symbols. And if I ever use this anywhere else, if I do modify or change the color, it'll change it globally. Unless I decide to kind of, unlike owned, group it in the little won't will no longer be a link symbol. Okay, so now have that thin little border around both of these. They match graphically, and this one does not have a drop shadow. So let me add a drop shadow to this white box. Let me make sure the drop shadow has the same settings of 559 This is not so, Steve. Five five, You have the same drop shadow on that. I think that needs to be tweaked a little bit. So let me do, like a make it tighter. Let me do a two and a two and then a two and a to a little bit of a tighter shadow. So the unique part of this message apples. You have the ability to delete messages after 24 hours, and we want to have that be an option when you send a message. So what we want to do is go ahead and shift this message up. So I'm just gonna group him together and give him a little toggle option to be able to delete the message. After 24 hours, let's go ahead and make that white, and we're gonna make it a little bit older so they can really read it and make it that light gray color. So let's make our little toggle or on and off button it brought down. There we go. So we're gonna create a symbol that looks a lot like this for our toggle. Let's get it to be the right size first. And we're going to recreate this toggle button. Of course, Make it our own. So I'm gonna grab the let's just do a box tool. We're gonna add a pill shape to it, okay? And we are going to have We're gonna make the fill kind of a gray color. We're gonna do a thicker stroke on it. So let's do, like, a three and let's make it. We can make it lighter or darker. It's gonna be on a dark background, so it might be better darker. We're gonna make this our own. We don't want to copy whatever this one is. So let's do a circle. Let's do our little buttons. Hold down shift, do it. A little button here that could slide. Where do the same thing. We can't even get the eyedropper tool. Sample some of our colors here. I'm gonna make this lighter so it's gonna be light, but not all the way lights moved like a dark, and we're gonna do it may be a thicker and lighter border like that. Make it a nice decline. All right, so now we could do another circle inside. This will be the one that will have our little color to it. So let's grab for the border. Let's grab our We could do the green. We could do the blue kind of like the blue. No, I didn't make it out a thicker line. Maybe not so thick. Or maybe split the difference. 2.5. We're gonna make that inside circle the same as the gray circle. So I'm just going to do that would be a fill. You grabbed my eye dropper to him. Sample this one right here. That gray. Now we gotta figure out how to do without snapping. Let's select a couple of these circles and let's do a center align ment. Okay, so there's our little unique, but we can add a little shadow effect here, like this one does. We could describe the pin tool trace around, so let's do that scrap. The pin tool would add like a little shadow here, just doing the pin tool. You know, the pin tool from illustrator, You will be right at home. I was doing a will shape switch this to a fills and these shapes undoing right now doesn't matter. it will be covered up. They're not going to switch that to a Phil away from border. We're gonna make it shadow color. So we need to figure out if we want to make it. Lime do command. It's in that backward. We're gonna have to make this a stroke then so that stroke can cover it up. So I'm just do option. I'm gonna make a copy of this, and I'm gonna take away the fill. So now we just have a stroke, and I'm gonna put that on top. We'll be able to cover a little shadow shape, but also make sure that button showing through. So you see how we did that? So that just covered it up. Zoom in and let's think about color here. Do we want to make this also blue? Yes. And let's also make that blue. But we're gonna double click, Phil and make it just slightly darker to indicate the shadow. And I could describe my pin tool. If I need to edit anything, pull out the shadow a little bit, drag it down just like that. So there we created our little button. Maybe make that stroke a little bit for the border, little skinnier. Here we go. I'm very happy with that. You ever a little slide button? Could a group that together and bring it down now that it's going to reside? This would look really good over white. So we're gonna make two versions. One that looks good over white and one that looks good over dark. I'm gonna go ahead and pull this down. So if I put it here, I went ahead and put our button here, and we grew that together. They could click it, but it feels disconnected from the actual message that you would need to make that setting for. So I'm gonna pull this down a little bit and have the option here which could be shifting around some things, changing the color in size. We could even make this high contrast and do a dark background. We already had that done here. So let's not reinvent the wheel and flip that down. Can a student command right bracket to bring it up forward? Now, I could make this a lime green color and really stand out well down option kind of adjust my corners to match the one below. Let's go ahead and turn on our grid here. That can help guide us some of this alignment. We always talk about our other graded to command quotation. It's locked our message. Our art board First, a new command quotation would get a more minute grid. Help us with certain alignment issues. Okay, talk all that off. Remember, toggle that on every once in a while. It would be nice if the profiles match. They were both over here to the left, what's great about that and leave room for long names. So that will be smart. Let's make these the same size. They both have a little border to him. Let's at same border, so one and that color on the 22. Message Screen Part3 - Animating Our Toggle Button: right. So I'm in prototype mode. I'm gonna link this and make a little bit of an animation to toggle that on and off. So I'm gonna go ahead, drag over because he wanted to link over to this state, and we're going to do an auto animate, and we're gonna do it on tap. All that he could do, drag what we're gonna do, tap in this case. So we contest that on your desktop, we're gonna do it. He's in and out. That's going to give it a nice little bit of a smooth transition. And we have a 0.2 2nd duration. So let's give it a try. It's click out our art board and preview and let's click on a button. Beautiful. But see, now we need to click, have the click off button. So now we have to do is link it back to the other state and do the same thing. So now we go ahead and preview it, and it should be a cycle click on. And when you click off. Okay, so what we need to do see all clicking here, and it's not transitioning back. Let's look at the place where it is doing so I think that what I did is it Onley linked this little square. So we're gonna go ahead and drag this out and kind of reset it. But we're gonna group this together to make sure that entire block is workable. So let's go ahead and select all of our elements. There we go. Let's group that together. And now let's go back into prototype mode. Let's click that entire area back over. Great. Let's make sure this is linked. That whole thing is linked. So the whole thing is interactive, so let's go to preview and this should work perfectly. Let's go through the whole process, Okay? We're gonna send a message, send the message, and then we're gonna click it off and on, and it goes back and forth. Beautiful. What would be really need is if we couldn't create another art board and that would be clickable. And then a new message slides in. So his whole message lights. And so if we really wanted to keep going with this, we could show every aspect of this app. If we really wanted to spend a couple 20 or 30 hours together building out this entire story, but I think we're at a moment where we can link a few more things up. But we can go ahead and end it here. And I can always do more lessons where we link keep going until we get the whole thing all linked up and we kind of go through all of these different ones, like the budget planner in the credit score. But real quickly, let's just kind of do her story and it's gonna be quite a breeze cause we could just copy and paste his story to get started. And then we just need to swap out photos. So let's go grab her over here, okay? Deleting him, bringing her on board. We'll go back into design mode, and we just need to cut change up some things home screen's gonna be exactly to say right, and the process is going to be exactly the same. We're gonna copy and paste this to keep all of our lengths together up here. We just need to make sure we swap her out for him and make sure that's in the same position on each slide. We could do that by going into our positionings and getting him in the same position. And also Sarah Smith that needs to be. Do you go to prototype mode? It's going to save all those connections. All those connections air saved doesn't look like this one is saved. So we could just easily like that. Link that back to through transactions or that's gonna link back to this one right here. Boom. So we're gonna keep going with her story, but I'm gonna stop right here. I think we've done a lot together. We've been able to develop several icons, do some animation to some slide outs. Menus really get into the repeat grid to save ourselves a lot of time and prototyping and have a link this and have a live preview by going up to sharing publishing your prototype and sharing that with others. So we had I had a lot of fun doing this with you, and now it's time for your student project. 23. Student Project: It's now time for your student project, and I want you to design a very simple Web loud or mobile app with at least three transitions or links. Try to think about your user journey and mouth out his or her final goal or destination. Keep this one simple and add to it as you feel more and more comfortable with X D and the many animation and transition options you have. You can go the extra mile by publishing a live link of your prototype and posting it in the project section or in my student Facebook group. You can even posted in the community section of this class to get feedback from other students. Remember to keep it simple at first. The best digital layouts are simple and focus on making the experience for the user as easy and pain free as possible. Feel free to reach out to me anytime, with questions you may have along the way and happy creating 24. Bonus Lesson - Create A Slidable Bar: So now we're to do a cool slider effect. So I gotta click on preview so I can show you what I just created. We're gonna go through his story, but instead of clicking through, do you tip tail transactions? We're gonna go over here so they could change their budget click through, and we're gonna be able to click and have a dragging effect who can increase their budget. We would do this over and over and list all the budgets. They're going to teach you how to do this. Simple sliding techniques using auto animate. So we're gonna go ahead and copy. I had a copy. Our home screen. We're gonna make a new art board. Let's go ahead and drag him over here. We're gonna go into the design mode and we do not need any of these for right now. We're gonna go ahead and eliminate those. We have this one left. We're gonna create a little slider option. So I'm gonna move this all the way over here. Just kind of creating our little bar. We could still have this era which will indicate a way to get back to the home screen. Can we could have our information, but we're gonna need to go over here and make it dark and make this dark as well. So now we're just gonna go and take this button and we're gonna bring it all the way across . We're making our little slider portion, and now we already created kind of a little button over here in a previous lesson. Go ahead and grab him. There he is. We're gonna go ahead and grab this on a slider, so I'm gonna UN group this. All I need is this portion. Like, I need to have a group this a few times. You're right. Click. Group that together and bring him over. And I might need to make him a little smaller where I might need to change the border there so you could see it a little bit better. So let's do that. The changes border and make a little bit darker. Perfect. Going to group my elements together and add a little shadow that here, There we go. About my shadow option. I got a group these back together as one unit. So now I'm gonna do the indication of where it's sleds. We need to do a different color for bar. So I just got a hold down option and copy it, and I'm gonna make it blue. So this will be the portion that has not slid over yet. I have a two tone going on here. Make that a little bit thicker. We could change a lot of this a little bit later, so let's do the animation part. So we're going to copy and paste this into a new art board and we're gonna do the animation in slide, so it's gonna shipped over. I was taking my directional keys and sliding over to where I think would be a good place for it to end. I want to do cut of a dramatic scrolling, so I want to do it pretty far and I'm just gonna drag this down. So this is on the right portion. We want to change the amount because that's what happens when we slide it up is the amount changes, So we're also gonna change the amount we could do that at another time. You change all the data is our food budget. This is where it's gonna start. And this is where it's going to end. So let's pop into the prototype and link this ups we're gonna wake up or button your button is gonna link over to this one. But we're going to do an auto animate, and we're gonna have it as a drag instead of a tap, so it requires you to click and drag or 13 your phone tap and drag. Now we're gonna keep it on the easing. We're gonna eat in and out, okay? And we wanted to also go back, and we want to slide it down. So it's gonna remember the same settings so we don't have to do any of the settings. We also want this toe link back to our home page so we could lick it up that way. Let's go ahead and test it out. I went ahead and have the same thing here just a little bit more finalized with type, and I'm gonna click on this one and click on play. So now I'm gonna be able to click and hold, and he noticed how the amount changes as well. So this nice little slider. So now an easy way to replicate that if I want to be able to have all the budgets on here, so I'm gonna go ahead and go back to design mode. Get this grouped. If I am 100% happy with this, I'm getting ready to replicate it, so I better be pretty happy with it. I'm gonna do repeat grid, and I'm gonna go down. Put all of our budget items on there, which I believe are seven c. We have seven of them. So now I'm just gonna change my with between so that I can have them all on there. So now all they have to do its link all these up and change that the amounts. So let's just make this gas and I'll have these linked up to So these will also DEET individual pages toe like up to. So what you do is you just copy and paste the one we created here and replace it with gas. So now I have them side by side. I have I just did the repeat grid and did this and then copied it. So now I can do the before state over here and then the after state, seen as the amounts change drop of food and gas and the sliders changed and I have them both on its going Click have a both on the auto, animate and drag. And they're both linked to this one. And I'll show you kind of a little bit of Ah, I'm a headache. You might have to get through if you want to animate all of these separately. So it's going to click out here and see what it looks like. We're gonna go ahead and drag food. And he noticed all the sliders slide up or new and the amounts changed. So that's what we want, but we want to be able to have the users slide them separately. So where you're gonna have to do is you're gonna have to have each one of these for each slider. So you gonna have to do one food that links to food. So this one would just change food. So go ahead and show you an example. So it's like gas back to where it belongs, and we would just have the food option. Then we need to copy and paste this and down here we would just change the gas so the food would go back to this state and it would just be gas over here. And then you create another one and you have everything back to the original state and just changed the other one. So that's a little bit of a headache if you want to change each one individually, but it's worth the work to be able to see them all move individually, but you have to have one. Let's see there. Seven. So you need to have seven different ones with each with that one only that one state changing. I just want to kind of show you had to do this slider. You don't have to do all of them independent, but only if you want to. But at least you know how to do kind of that sliding animation on You can have other things slide around us. Well, so play around with that auto animate future. It is very powerful. So now I have each one of these. I have one for food. This is our main home. Then we have this one is the, uh only the food has changed on this one. Only the gas has changed. And on this one, only the car insurance has changed. So now I'm gonna link them all in prototype to show you how this works. I'm not gonna complete them all but food. I'm gonna go ahead and linked to food, and that's gonna be auto animate and drag. I'm gonna link it back to the home. It's gonna save everything. So this gas is now gonna link to gas over this 3rd 1 and then the gas will link back over. And lastly, insurance has its on state, which is over here, and that links back. And he would just keep going with the other four. So now, week over here to play, Let's see what it looks like. So now they're each individually moveable. Just took a lot of work. We're going to make sure they link back to each one links back. I think we link them all back to the home, so that's good. So we just need to make sure the amounts are consistent as we go back and forth and we can double check that. But there you go. That's how you do a little slider