Adobe XD: Improving Visual Design

1. Intro: Hey, guys, I'm that I'm a senior designer, Truest bank. And I've done some work for some places, like Mail Chimp and Home Depot in my career. And this class is going to be about how to improve your visual design abilities in a Debbie X'd. This will be great if you're just beginning out in Adobe X T. Or maybe you're a UX designer. That hasn't really worked too much with you, I or visuals in the past, and you're looking to improve some of those abilities. So very early on in my career, I was always very frustrated that I wasn't able to design things that were beautiful or well laid out. Her had excellent typography, and it took me a really long time to really develop the skills and get to a point where I was proud of the designs I made. So this class is actually going to be about how I did that. The best way to do that, because it does take a lot of time if you're not doing it the right way, and I'll show you some tips and tricks and Adobe X'd along the way to help elevate your skills. But also give you a foundation for how to improve your visual design ability across the board, no matter what program you're using and what basics you can kind of follow to improve your abilities. So let's get started. 2. Overview : to probably the biggest part to improving your visual design ability is actually just developing an eye for what looks good and what doesn't. So you can look up any like font standards you want. You can look up any layouts. You can play around with a bunch of stuff, but you really don't start getting good until you can know when thanks look good or they don't. That sounds like the silliest answer, but it's very true when you begin to develop an eye and start to understand of. This layout is slightly different from this one, and this is why this one looks better is when you really start to improve your visual design ability. But the big kicker is it's hard to just improve your visual design ability. If you're starting like me from no design background, know our background whatsoever. You don't really know where to start. You don't know what is good, what is bad and why they're different. So the method I'll be using today is actually using you. I kids and you can actually use you I kids to kind of measure and grade yourself on what is or isn't right and use them as, like a way to test to see if you did it well or you didn't. So what would be doing in this sense will be taking several you I kids and trying to replicate them as best as possible. And what this is gonna do is it's going to begin to train your eye and kind of teach you how things were laid out. What's making them look different? What isn't making them different? And through this, you do start to develop an eye for it after you've done it enough. And so I can assure two methods in this class one is gonna be just copying a You like it as much as possible. I know it sounds so weird, like I'm a designer and need to be creative. I need to do new things. But actually copying other good work is the best way you can learn how good work is done. And now I'm not telling anybody to go out there and copy work and pretend it's your own. But you can copy work as practice, and it's gonna help you learn faster than just about. Anything else will. So I'll be using a couple different You rockets here and the first thing will be doing is actually just trying to copy a couple screens exactly and seeing how close we can get it. And then the next part will try to have a similar screen, copy it to some degree, but then change the theme and change the style and start to inject our own personality and our own kind of design flair and theme into it and what this is gonna do gradually, once you Once you copy enough, you're gonna understand how things air laid out, how things need to work. And you can begin to inject your own personality, inject your own themes and start to make things unique and different in your own way. But anyway, let's go and get started with this first part. 3. Background : So before we get started, I just wanted to give you guys a little background on kind of this method of learning, visual design and some basics of it. So the big thing is that good visual design is actually compromised of a bunch of different things. I mean, colors, shaves, hierarchy, layout and all these things really have to come together to create something that's beautiful, create something that works. And so the second part of that is they also should be practiced together because learning any one thing isn't gonna kind of complete the picture for you. You really have to learn everything together. And that kind of brings up the best way to practice is actually by copying. And I know mentioned earlier, but just wanted to reiterate and also explain that I'm not. This isn't my idea. It's There's a great book called Steal Like an artist. It's by Austin Klay on, and idea is that no one is born with a style. You develop a style by experiencing things by designing things by trying new things, and this is just how we learn. We learned by copying people that are better than us, and it's just the best way to do it because it really brings all those components together . It once and allows you to learn everything at the same time. And luckily we live in attain age where we have dribble. There's just tons and tons of stuff. Rest a look for we have instagram Pinterest. There's all kinds of other things that we have out there, too. Learn from to copy from Teoh explore to help get motivation. But the kind of caveat to that is that copy Don't steal. Um, copying is about reverts Engineering. This is about learning. How something is done is not about taking something and using it as your own or using it for profit. So just keep that in mind, using this method and kind of what the true intention is behind it and the way I like to look at it and the way I like. The reason I like to use ur kids is it's kind of like rebuilding a car. You're still reverse engineering, but with you, I could have access to the manual if you just try to recreate something from an image or something you saw that you kind of liked before in the past, you usually don't do that great of a job. And you also don't know why you didn't do that great of a job. So you like it is a nice resource because you can go back and check yourself and see what was there wasn't working. And just a quote that really stuck with me from steel like an artist. Please check that book out if you guys, but like, but they start copying what you love. Copy, copy, copy. And at the end of the copy, you'll find yourself. And I think that's just absolutely true for a designer because you don't start knowing what your style is. You don't start knowing how to do things. Amazingly, you have to learn it, and you learn it by copying it. But I just wanted to leave that quick note there before we jump in the class. 4. Web - Navigation: so the 1st 1 will actually uses this Africa travel You are, kid. So this one is nice because it has both, um, desktop screens and mobile streams. So the first thing we can do is select one desktop in one mobile screen to try to replicate and again, part of the reason I like using, um, you I kids to practice Visual design is really because you can go in and select and understand, like font sizes. You can see the colors people were using. You can see just everything like spacing layout. What this does is it allows you to have a tool to check how well you did. So what we'll be doing is trying to replicate one of these screens when from the desktop and one from Mobile trying to replicate it and get the visual style, then kind of great ourselves on how well we did by going back to you like it and kind of checking font sizes and things, too, see kind of give ourselves a great more or less so the first thing we can do is actually export one of these screens. Then we can do the same from one of the mobile screens, and I'll only be doing one screen for each of these. You could do the entire app. I would almost suggest that if you were really trying to practice. But just for the purposes of this class, I'll just do. One screen is an example. That way, we won't get to in depth. And so once we export one of those, the first thing we can do is create ill. So the 1st 1 will be doing is actually the Web, the desktop version so we can create a new Web file. A 12 80 by 800 resize the screen. Okay, so the first thing I'd do is actually drag in. The image of that desktop screen will replicate, and one thing I like to do here is well, is actually resize the screen, so we don't copy it Exactly. That makes it a little too easy if its size completely the same. So our main goal is going to be trying to replicate this as closely as possible in this New York, and obviously because it's an image, we can't just go in and copy and paste anything. We just have the visual reference so what kind of have to break down the screen piece by piece and understand, Why does it look good? What's working well here and how can we replicate it? So the first place I like to usually start is kind of the header. We'll go ahead and I held. Are you press? Are That's a shortcut for rectangle. And then we can kind of size this whatever size we think is a proportionate to our image over here. And you can play around Teoh like you don't always get it right or stride, but kind of play around with the sizing. Here. We'll go ahead and change this to the color we think it is. And so you could use the eyedropper tool and select colors from the image. But that makes a little too easy. At least if you're practicing, try to select the color in your own. So gonna assume this is black. It might be a slightly off black now that I'm looking at it, so we'll adjust. This just a hair right about here. And what we can do is well, if we're close to a color matching go and save that color as well, because we'll probably use up in Iran. But this is kind of Ah, the first small note to notice is the way to get your visual design skills better is it's all in the details. The reasons things look good is because super small details air consistent in the same throughout a screen or the experience. And this is a small one, for instance, but you'll notice this actually isn't black. The quick thing to do would be to just to come in here and change the color to black immediately. But it's those kind of small things that will really have to pay attention to you because that's what makes visual design good. Like the spacing of things, the size of icons, the shape of. So we'll be diving into a lot of that depth here, but we'll continue on with this header. So if we look over here, you notice there's 12 or five. So we have five tabs at the top, this one page, so I'll press T not to bring up my text tool. The first thing I'll do. You go ahead and create a title. No, I don't know what this font is exactly when kind of cheat you can use if you're not gonna change the font. At least when you're starting out and you're just trying toe replicate it. Exactly. You can go back into the file and check what that fund was, because it can be pretty hard to match these fonts. So if we go in here and select, he's an acumen pro. So we will take the far from that. And then if you just select this text right here and begin typing, you can actually use it to pull up funds, which saves you a lot of time. Now, I'm not gonna look up any of the font sizing or spacing are, um anything that using the file? But like I said, it does save a little time to use the same thoughts they're using because it can be a hassle to try toe match those. So if we noticed the top here, it's a small fund. Their bowl did. And so that's what I'm gonna try to replicate over here and kind of estimate the font size try 16 Bold. I think that's gonna be pretty close and then change it toe wait. And we know there's five tabs at the top. So actually, what I'm gonna do here might save a little time. I'm actually gonna select this first title and then use Pete Grid appear at the top, then drag five out. So using repeat grid like this is pretty handy because we can actually adjust the spacing by selecting in between the titles and kind of pulling it in and out. And that's just gonna save us a little time trying to get the spacing accurate. We can actually take this repeat grid and hit the center button up here and then that we can kind of judge and guess the positioning. So they have discovered plan a trip. All tours, hotels are blob, and it looks like this may actually be a little smaller. Maybe there's a different font size. So with Ackman Pro, there's only regular italic, bold and bold italic, which is kind of good. So we know pretty sure that this is a bold Some fonts might have 10 different weights. They might have like a medium light of Ben, so it is kind of helpful. That document only has a couple south font sizes, so this is definitely probably a bold, appear center. This what we can do is just replicate this font sizes. There's titles. Excuse me. So we have discover trip, then our block is best, and in a repeat grid you can update the text like I did here, and sometimes it's kind of hard to find. But if you hover in between where there's where you can push it back out, that's because it gets a little crowded when you change the text. And if you double click right there on Discover and a pull ever you resize it, let's have a little I say, read about their looks. OK, Senator it again and kind of compare and contrast, so this might actually be a little bit smaller, so a double click end. What I'm gonna do now is change this to 14 and if you'll notice in the repeat grid, it actually updates all the fonts at one time, which is great. It's a big time saver, so if we minimize that again and center it up here, it's getting pretty close. I would say that's that's pretty accurate because it again, the way you're going to judge this without having an exact comparison, is we're really looking from the space. Besides, I'm just drawing a rectangle is an example kind of the space. And if you hold all and drag, you can get in directing over here. So we're kind of looking at, like, the space and lay out of the screen one of the big portions and trying to get these pretty accurate because the title that titles air in the middle and then these big portions on the side or look relatively similar to this can to eat those and the next things we can do is actually replicate this. Go here in the top left. What I'm actually going to do is just try rectangle placeholder for now. Draw the rectangle out this up a little, then move it relative position to this. It's probably about 75 and I'm not gonna worry about filling this in with an icon just yet . We'll do that in a second, and the next thing I'm going to do here is actually go ahead and establish the grid for the page. So if you click on the art board, it's like grid. You'll actually see that you get these automatic grid lines that come up, usually pretty helpful for starting out. But if you notice that on this, the grid is definitely wider. So what we'll do is we'll adjust this default cred so we can use it later. So calm what gutter it. But what? We can actually switch here and we'll try to adjust it so it's pretty similar. Will try 100 go maybe 90 and just kind of keep playing around with this until eggs accurate . And if you'll notice you do you have to play around and make sure that he's match? You said we'll try 80. That's how it says 88 year, always helpful to go in and change that side as well, because what it's doing here when it it tries to balance them out. And if you don't correct this one, it'll kind of script him the spacing here. What's try? He said. This is pretty, but you notice on the left side of the right hand side, the grids a little different. So actually do is have to play with the column width just a little, and the easiest ways actually switch back over to this work that so that it makes the kind of wit here on the edge here. The same. So this is actually going pretty close at 78? You look back over here and we're kind of trying to measure this side with this. Uh, so now we complete this other end header So we have a name, a profile, imagine name and a drop down. And that search icon it's what we can dio cause I'm gonna hit E to create the circle and I'm gonna hold option shift and that's going to draw a circle around the center point V to bring in my select tool and drag this into place and I take the border out, zoom back out and kind of look at the reference for this. So I think it's a definitely a little smaller. So many use option shift drag, mystical in some. That's a little bit closer. Then we're also going to drop that name next to it. It looks like the name is a little bit smaller spot man are header I'm gonna do. It's just double quick into this and then copy command C command v paste it. Contract this over and just gonna name it. Um, let's issue a fake name John Smith Back over here. It looks like it may also be bold, but just a much sponte and the title. So we'll try. Maybe now used Shift Select. Not as well. Drive us over a little and then you'll notice if you have responsive resize on over here at a pop up to explain it awesome, you'll actually be able to pull this element with this side on the side and have it adjust relative to the position of this. That is pretty handy. So if you ever need to sold shift to select both of these, and you can kind of play around with it. So we know we also have this drop down here around, and I pressed p to bring up the pen tool and then I'm holding shift and shift is gonna make it snap to these angles, and we'll do it at a 45 degree angle. Bring it to here. Click again. They're holding shift. The whole time is gonna have it in a nice 90 degree angle. This up changed the color on a white and the size probably two to If we look back over at that reference, it's about it to you or maybe a 1.5. And one thing to note here on this image is going to be hard to you really see this, But it's probably not a flat edge here. I think this is a rounded edge, and we can double check this in the file to you when we get finished. But if you select this again the drop down arrow over here to the right, you'll be able to change the ends of the line. So if you notice this is the rounded end, now we have that rounded in and also the drop down around it. Well, so we can make that match like it's gonna match over here. And I'm pretty sure that surrounded, even though it's hard to see here but can check it later. And so it's small details like that, but actually make a pretty big difference, because if you think that you're drawing 100 arrows like this on the screen, but none of them have that rounded edge, and it makes a pretty big impact on how the visuals are gonna look. When you're finished, we'll drag. It's over. It looks like it may need to be a little bit smaller. Maybe even the font can be a little bit smaller, too. Will try 10 and then I'm gonna track this over a little and resize just a bit that I'm holding all shift when I resize it does it around the center. It's getting a little closer, and I think we need to put this over just a little bit. So a lot of this is going to be a Justin exercise and kind of repetition, like making sure the sizing and spacing of everything is right and just making it matches closely as possible. Because when something has, like good visual design elements to it, it's because a lot of this spacing is very exact, and we just have to make sure to try to replicate that as closely as possible. And then I'm using Ault in this scroll wheel to zoom in and out. Um, just why I'm like lying around the screen so fast. So the next thing weaken dio. So I'm going to draw this search icon. We can hit the for a lips tool that I'm holding option shift to pull that up. Actually, this is the border make this white the size, too. So one thing to know is well, because this drop down hero has the sides of two on the border. That means pretty much most icons and the rest of the page will also have this size. So that's kind of an important note to have. If you look around here at thes icons, it's probably gonna be the same story with them. Probably have a two border, so it's pretty important to try to match these sizes as closely as possible. On that first icon you draw because it will kind of replicate what else is going on on the page and then two. I'm also using the space bar to bring up this hand. And that's how so, how I'm clicking and panning across the screen, By the way, so will draw the and the search icon the size match with two. Change it toe white and also around the end, because I'm rounding the end there. I'm going around it here as well, and then I'm a select both of these and just hit command G or controlled G. And when that's going to do is group it over here and then I'll look one more time to check the spacing of this every here. I think it's a little smaller and then I have it. That's what I'll do is actually make this little smaller. And I'm holding shift. I'm not pull this down just a little bit and then resize it so we can't see the end of this line. And I do the same with this line. Teoh, I'm gonna hold shift and pull it in just a little bit. But I'm also gonna push this out just a hair and then hold shift to slept these elements and drag it over a bit right about there is probably right. We're getting pretty close with a header. The next thing we can kind of jump onto you. Is this image down here? 5. Web - Page Body: and again I are turning up the rectangle tool. I'll try to match this space that's taking up, I would say probably Okay, here be just a here bigger and then what we can do here is once we have this kind of placeholder for an image that's we can actually go to the Web browser and one website I love using for images as pixels dot com. Um, have a ton of really high quality images, and they're free to use. So if we type in most, you see you have a ton of super high quality images that you can pull from. And one of the biggest things about creating like you I screens like this specifically is that you really need to be using high quality, high quality and great photography for them, because that's actually a huge impact of how it's gonna look, even if you get like the tech sizing, the spacing, the layout right, you really still need good photography to really pull it all together. So that's why using something like pixels is a great resource. I think there's had a lion in it. Oh, elfin so I can actually look up. You can try to replicate it with elephants or not just anything that kind of fits the sea with me and would probably be fun and feel free to just kind of be picky about thes and select whichever ones you think would fit the mess time. Kind of like in these lines, actually. So I downloaded this. I'm just gonna drag this over. So one of the cool things this you can have a shape in the w x d and then just drag an image on top of it. And if you double quick in, you can kind of shape and resize it. So we'll have this lion recited to about there so kind of getting an image to map this header. And if we want to turn the grid off, be slick. The art board. I kind of see what it's looking like so far. And just a quick note to you on this because we dragged it in from outside. You'll notice the rectangles still has the border on it. Just make sure. Did you select that border? You should be good there. I'm actually gonna make this color to this Tahir. Darker too. Incidents of thing if you ever see anything that certainly need to be adjusted, you can adjusted on the fly because it's gonna look a little different when you have images dropped in instead of that white background so great and save this again. And if you ever want to delete a color you save right year. All you have to do is drag it off and then it'll delete it, which is kind of confusing. But it took me a while to figure that out. So the next thing we can do is kind of put this destinations fought appear so t to bring up destination our text. Excuse me, and we can put destinations. And what ideas left online? This and you can actually select area text two year point text. Excuse me? What that allows you to Dio is actually grabbed this bottom on a scale. The text up. So we'll lining up with our icon there, then actually dragged the size down just a little. So now that we have our header in and I'm pretty confident about the spacing of our header , you can start to judge this text from the header. So we know this is about the size for this. And if you'll notice the spacing in between, this text is much closer together than what it is here. And you can actually adjust that. So right here justice the spacing in between each character so we can try. Negative 10 actually, Or another option is hold option. Used the keyboard button, the left arrow on the keyboard. I lied. That's not an actual option. You can just stick toe adjusting it right there. So if you want to try, I mean nectar 30. You start to get the spacing a little closer. So here, if you look, it's almost touching on the d s here, and we're still a little too far out for that. So we can try and negative 40 then kind of keep playing with it until it's about right. So probably negative. 60 is close, and it also looks our image because it's a lighter background. The text actually isn't showing up as well. So if you wanted to you you could even drop another rectangle and I pressed already create the rectangle we're gonna do is just make a little overlay with that black. And then I'll hit command left bracket. It's gonna send it backwards, and you can kind of see that happened over here on the left command left rackets and something backward and in command forward bracket her close bracket, the foreword, and then you can adjust the capacity. Then that way we'll get our text to show up a little better. You to about 18%. Let's just so it's pretty similar there. And then we have the text. Underneath are top destinations in Africa, and so I plucked t again text box, drag this open and type. Then, of course, my phone is way too. Bigs will probably bring this down to five notice. It is definitely regular that's coming out to about this and and one thing to notice. Well, I really want to space this text back out to match this and then size down just maybe like teen. And another thing you can do is actually, if you hover on the left side of our board, you can bring up God. Well, actually, line on this up. And one thing to note, because this text box is a little smaller, the font size it actually doesn't line up perfectly, so that drives me a little insane, so I'm actually gonna do a slick this title appear the keyboard left hero to push it over a little That way, it truly lines up. Generally speaking, it's always good to check or something truly lines up like this because it can really kind of make the page Look off. If you just do into the text box, you'll notice that that's actually a lot of space, that it's off. Okay, so now that we have this image title up there, the next thing we could work on is kind of this area. So the first thing we can do is actually make this title, and the font size looks pretty close to you. That subtext there, the spacing looks pretty close as well. So the next thing we can dio has actually just copy and paste C Command V and I'm holding up. Ah, shift to drag that down, too, so it stays a line. We'll make the color. We're actually going to use this color. I don't know if it's you leave black extra known. I don't think it's completely black, so we use that scene and it's bold Main destinations and then you're kind of taken out of a of the padding this has on the top and bottom and tried amounts that is best in right about there is fine. And then another thing you can do is I'm going to use a rectangle. It actually measured this out. I'm holding. Rest are and hold shift the rectangle to come up is a square. And then so this is a 45 and I'm just gonna make sure there's 45 below vis or I start on this kind of image image block. And then when I can do I'm actually gonna keep that there for a second. I'm drawing this bottom portion. So we now there's an image underneath. So gonna are again to bring up erecting. So we know that three rectangles fit in this period. A. And then there's a Seymour button on the side. I'm actually gonna do is pull our great backup and try to get this spacing Teoh about as close as I think it can be gonna go back to here and maybe a little smaller than this. Don't. But the halfway point I'm gonna go ahead and delete this space at the top and there's a little bit of a rounded edge on this as well. We're going to replicate that. And I would say about 10 maybe maybe a hair less will try. Eight. The one thing to note here is I'm going to remember this as well, because you want to kind of match the same rounded edges on their thing. So what? I'm going to remember that eight. These images and I'm gonna copy and paste this text again. This the title in the bottom part, and it looks like these are probably the same sizes the same. And I'm also gonna copy and paste this again. Except this time I'm gonna change it to you area text. And this is gonna become kind of the subtext, the body text beneath this back over here. And so this is definitely a smaller font. And it's also a different weight. So we'll tribe 12 I think 12. It's pretty close there. And then the next thing I'm gonna dio is I'm not actually gonna type all that text out directly. Have a plug in that I love to use. So if you go over into the bottom left, you'll notice that there's a plug in panel and you can bring that up. Actually, if you don't have it, click add begins. Go to this search and then type Florham and search for that. And there's this placeholder text plug in that I love to use. You can just click and download that. That's what I'm gonna use here. That's right. Every year, the top love and just go fill with placeholder text. And all you have to do is click this button while your text boxes selected and you get this prompt to come up. Then just it insert. This is a pretty big timesaver just so you don't have to copy and paste all this text. Exactly. And so now that we have multiple lines of text you also need to take Now that the spacing for the text is also similar, it looks pretty close right now. We're not actually gonna just that, But that is something small to always keep in mind of is how much spacing is in between this text and then because we know this art board is gonna scroll because it did in the original you I kept quiet start to pull this help So the next thing we can do is actually draw these icons on the bottom and then this plus as well. Now you could take the time to draw the icons. If you need practice doing that, that is an excellent thing to do. But I'm going to shamelessly go Teoh website called the Noun Project that cone. And if you're ever in need of a quick icon, this is a great used to use a good reference to come. Teoh. I think it's this type in any icon you need and kind of search for the specific use I don't like hey, drawing heart icons. So I'm actually gonna borrow one. You got a school around to see one that matches the style that you need down there that is needed. Can I put this BG over and bring that into the file? Thank you, Maxim David very much appreciate your icon. And then just command shift G done group it that this is for educational purposes. Very grateful for Mr um Maxim David. So we'll come back over here and again. What kind of just this spacings? It looks pretty similar in the 19. That's probably pretty close that these areas pretty similar and spacing in the next two on icons we will actually create really quick. They are a share icon, Presti, to bring up the circle too. On an option shift to scale it up. This black color we were using scale it down this shift just and p for pen tool. I bring this up. Hold shift. Drop this on my copy and paste this over right about there, and I'll copy and paste it one more time. We could get the share icon, and I'm gonna hit command shift right bracket to bring that run. I'm actually gonna resize. That's the little want to pull this up. Petit's it. Their relative positions change the color of this border and then also changed. Sized too. So we use, actually might not be too. Might be a little smaller. Just that Teoh 1.5. And these air actually filled porters so will change accordingly and then resize a little bit as well. Actually, just leave this and replicate this man and I'm holding option and shift. Sometimes we were working really small it icons like this you'll notice that it kind of snaps not quite where we want it. We want it right in the middle, this lime. So instead of just letting it snap, what you can actually do is just go up here and adjust. It will try five at the end of this. I don't get us a little closer to being the center line of this group. Actually resize it a little this way and something to know here. If you want to turn off responsive resize, you can actually gonna smush it a little. I think I'll have to go in and I extent make sure these actually still circles and then it just this basing one more time. Another solution to you would be just to scale this up so that it's a lot bigger and then center out like this. Besides them back, this is something that coming. Just need to play with an Adobe X'd. It's usually better to try illustrator for icons, but this can't be a quick and dirty way to do it as well. Okay, so we have a share icon and then the bookmark I What I can do here is I'm actually just gonna pull up a rectangle dry, do 1.5 border change the color that I'm gonna press fee for the select tool. And I'm actually gonna double click on the line itself and add a new averted vortex and then hold shift and pull this up. You just created the share I much easier for the bookmark icon. Much easier there. Gonna change the size of it just a little. Then look back over and check. Just we can match that as closely as possible. And if we have responsive resize, we can kind of real space these out. Just make sure they match for three. Hey, were you actually may want to bring these little closer, then we'll create this ad I read here. I think he lips and shift an option circle to come up. We know this is kind of a light red. I'm actually gonna turn right off just a double. Check this and also has a drop shadow school select out wrapped. It looks pretty less, but I can tell that it's maybe a little bit bigger. Will try 10 not up to this edge and then we'll just drop plus mark right in the middle. We'll press get the pin tool to come up. It's too white. 1.5 is the size shift bogged down. And then I'm actually gonna hit copy and paste and then grab up here so it rotates an old shift and after a please to together and then I'll group Jesus. Well, my command g get our plus icon. So if we look in here, it looks like the icon is a little bit smaller than I have it. Double click in and hold, shift, option and scale this down a little, and then I'll do the same here. Then I want to make sure going a good line ever. This is lined up, not quite lined up centred. There we go. It looks like I may actually pull this down. Just a hair right there. So it matches just this radius one more time. I think it's more okay. So, actually, the next thing I'm gonna do is drag and select all of these. And this is where it gets really fast in a w x d. Specifically. And I'm actually going to go over repeat dread here to the top, right? Then drag this over. And so we kind of instantly got are other images populated the right about there. So we see this Seymour is kind of lined up with a profile there. But then we immediately get this populated just a huge time saver. We can actually resize this a little, too if we need to make the image is bigger. So if we just hold shift and resize that will actually resize everything else in the repeat which saves us a bunch of time. We can select here, and I'm holding shift to select all of these and then I'll dragging this down a little. So we get better spacing there. I think that's getting pretty close. We're pretty close. This just make sure to drag this text out so it matches the same with this. Plus icon actually changes to black because this does look pretty dark. Okay, so the next thing we can dio is actually use another one of my favorite plug ins. That's called repeater. No, I'm here. It is actually, like, slightly misspelled and surgery, Peter, and install this. This one is a lifesaver. It helps me make things so quickly and also at a really high quality. So we want pictures of animals. So if you look here at the top left actually shows us every piece of our repeat grid for some reason the share icon in the plus I, Connor Middle, I have no idea why and what we can actually dio has shuffled through these. Until we see animals we actually want to populate and use these two. And reflecting me is shuffle. And then we'll do that. One has 1/3 and then the next thing we can do is actually slept This text right here and then if you drop down, What this is doing is it's selecting any random text generators to populate our text boxes . Weaken Teoh, we'll just track name. And really, this is more placeholder than anything. So it could be any kind of nonsense. I think it's kind of funny to always let it the first name and just see what that populates as in the making Click apply. I actually didn't click Apply for animals. We'll look at that one more time. Shuffle enamel applied is as well this out. Then double click here and then turning that border off. Okay, so the last part of this is will also be getting the Seymour hero and text right there. They don't actually just copy and paste this from the top. Generally speaking, it's always better. Just a copy and paste the elements over. And it is to try to replicate. Make sure this is rounded again as well. Well, you command you to group that there, no copy and paste this text box for that Seymour text below it. This one might actually be, Does it hold in? So we'll just make sure that's bold as well. We'll re size a bit. Make sure we have our spacing well, and I'll go and save this red actually use here. And then I think this area is actually a little more shortened and tighten us up a bit, then selected both and it looks like the Seymour is coming right at the bottom of this image. Put that read about never a bit. And then the next thing we could dio it's draw this line underneath. Looks like it's going the entire disc Ross page. So we'll make this match up with our Seymour text. You were here, but I'm actually gonna turn the grid back on, so I just double click the our board to get this to come up. And just to make sure everything's gonna nicely centered on this page, how we use this original red line Sure everything up. Pull this over and adjust the spacing just a bit. Double click internment. But also just the gray on this bottom line. Just a hair, then, for the very fun and satisfying part. I mean, a command shift you toe on group this repeat grid, I'm going to select all of this, then hold option shift and drag to leave this line at the bottom. And then there we have it. So actually going to slide these over just a bit so you could go in and change the kind of titles and fonts as well in the the text here. Not really going to do that for this. This is kind of enough or practicing, getting used to the spacing, the layout. And the big thing is, you're really understanding how you can do things better or how you can do things and future designs. So I'll actually take this heart board. I'm gonna copy and paste it. I'm gonna go back over to the original You like it and kind of just measure and see how it . So The first thing to note is the screen size. We got pretty close. Not quite there. This one, was it? 17 83 and our high? It was 17 17. Not too bad. Pretty close that if you look at these font sizes, we had 20 appear. Had 15 So it's pretty off there. So that's one thing you can kind of go in, remember and then correct it. Men. Same. I'm assuming with these font sizes. 12. We were 12 there except Helvetica. They're interesting and 20 for these. So if you can go in and measure it looks like our icons are a little bit small. You can kind of start to understand and get an idea for the spacing. Improve your own kind of visual design aesthetic this way, and it's just a good way to kind of measure and meter how you're doing. We were pretty close here. There's definitely some areas like this font was much bigger also using Helvetica there, so this one was much bigger. But it's kind of things you learned. Teoh kind of get a feel for understanding the layout in the spacing and it really helps you kind of further on in your own designs. And from there we can kind of move forward Teoh other mobile screens and finding more examples like that. 6. Mobile Screen: for our next green will be grabbing this mobile screen down here. Go and you file. This one's gonna be on. I selected here kicks we can bring our image over. Then again, I'm gonna resize it. Just that's not so easy to copy everything. Exactly. And then we're going to put this, um, screen together pretty similar to how we did the desktop version. Go ahead and start matching the header first and go and get that space and correct what could be helpful here. Teoh as well. Try to use the same phone size here as well. But when you're generally of practicing anything on mobile, I do encourage people to try to use the found size that you already have. So if you have an iPhone X, that's great. Use it. But if you have an ex are on Android, you can try using it on that phone screen size and just selecting it when you create that new file. And part of the reason is is because when you can pull it up on your actual device and use live preview, it's really helpful for actually understanding the sizing and spacing of everything and kind of getting a feel for the device before you start trying to design for other found sizes when you get more experienced. But for this one, we can just kind of continue with iPhone excise. And the first thing I said. Like I said, we'll be getting kind of this header area on first. And you can plug grades again as well. And it looks like the grids actually gonna be pretty close. So we'll keep the stock, create up and it's big 36 on the side. So oppressed T to get text to come up. I didn't get text in the beginning and I did look in the file earlier. And this one's also Helvetica now. So what would keep at font the same this point? We're actually gonna bring this up a little, too about 28 and then we'll change it. Teoh little off black. You're right about there. Go and save it. Looks like the vertical line spacing need to be tightened up a little. So, um, I actually 20 there. That's way too tight. 30 30. Looks pretty. That spacing look similar. And again, I'm gonna put a placeholder for this logo at the top maybe about 25 then held our to draw that rectangle and 25. It's probably pretty close and I'll just create that filled with black, Actually not gonna go through the trouble of tryingto replicate this pretty intricate level , but we'll just use that as a placeholder looks about right where it's at, and then we'll create this minion to the top right as well. So the mini is pretty simple, just three lines. So I'm holding a pressing P to get 10 tool to come up after our first line and we'll look back over here. It actually looks like it's probably too, or size. Then I'm gonna selected that option and shift, then shift, get a little bigger, and then I'm gonna do the same thing. I'm gonna hold option shift and dragon in an old shift and scale it out a little. Looks like it might be a little bit smaller than this, so I'm gonna select them all. Is this to push him over? And I'm not gonna use responsive resize. I'm gonna control See that in that way, that kind of formally and then I'm going to go in, actually try to play with the spacing a little. Yes. So it looks pretty similar. What do you actually do? Is somebody is P. I'm gonna draw 45 degree line by holding shift right there. I'm actually just gonna measure this. Just so it's pretty quest, then. Kind of used This is like, uh, guide. So that's a little more act. I'm actually gonna tighten up the spacing just a little as well to match, then command G to group this. And that way it looks like the spacing pushed out on this side. Tomo Matt that as well on a dry rectangle with our and so we're at about 27 right? Just make sure to match that on this other side, okay? And so the next thing for us to do is gonna create this title of these tabs in a copy and paste this Sure, this it looks probably will say 16. Mm. I'll try 60. We'll change this through a lighter. Grey. I lied. Let's go. 14. And what I'm gonna do is actually used to repeat grade here. And we know there's 412 or and then we can go ahead and replace this text and all. I'm doing right? There was just double clicking to you the text box, and that just allows you to select it within the repeat grid. So I'm actually gonna do is adjust this tech sized year, it's 11. Me. 10 changes spacing just a bit. I'm actually gonna use let it come medium on it. The does look like it's a slightly more weight than what's on the top. This might actually also be made in. Maybe not. That should be pretty, but still, and then we'll less icon. I don't really know what it plus I guns there. Exactly. Actually, I'm just gonna eliminate it. It will stretch this out to the didn't I just don't. Earth likes the reason what? And our to create the search bar rectangle and border often. Then we're gonna do a slight gray there as well, and I have a little bit of blue in it, so I'm actually gonna slide this over kind of play with this color a little. That's pretty. And then it's got radius on the add something to click in and drive this town put you about eight and then we draw this search icon again, oppressed you to get the ellipse to come up holding shift. An option to get it scale. Turn the fill off. I should It's actually gonna be a darker gray. So but there p for the pin tool and draw the rest of the search icon Gonna save this gray color as well. Okay, make the bottom half of the search icon. Let's see it Check has a rounded corner, anything can't really tell. I'm gonna assume that does, like the little rounded touch. Anyway, the group this actually make it a little bit smaller and drag this over just a bit. This might actually needed to you'd be 1.4. So that's kind of the name of the game. Like, a lot of it is kind of playing around with what size is best. Um, a lot of his try on here kind of. What looks right is the best way to gauge it at this point. And that's kind of how you start to build your eye or it is. You really guess you check. You play with it, and then eventually you can do it pretty easily. With enough practice, I'm gonna copy and paste this text right here. two point and scale down a little. It looks like this is definitely you later, maybe change. Okay? And so from the next part, be creating this like hotel on the image block. The first thing we'll do is hit hard to draw a rectangle draught to this edge. And keep in mind of where we are on the page as well. It's me now, the spacing. He's to partially cover up the bottom of that one's. This is probably pretty close. We can go in and give it a radius to eight to match our search bar good and turn the border off and then have the drop shadow. So if you notice the default drought shadow is way to dark and close, it's what we can do is we'll try, maybe 15 go in and actually make the shadow a little lighter. And so that's probably close, and we'll go ahead and replicate that image block right here. And so what we can actually do is copy and paste this rectangle, put a border on it, turn the drop shadow off and actually lifted up to about looks like about so we can put it right about there you see, I got that little grid mark. It was halfway that I'm actually gonna hold option and then pull this corner in. You hold option on the radius. You'll notice it just changes that individual radius, and I'll do the same thing on this side. So what this is going to be is the placeholder for the image A reading copy and paste this Texas Well, drag that down here to begin formulating the title and then play around its tech sizing just a bit, our for another rectangle and will make this ratings placeholder over here. I'm gonna make sure the spacing is pretty similar as well. Also, save this gray that way we can use the same gray from the search bar to make sure that's consistent, then actually, copy and paste this over because it looks like it's probably the same size or pointed here , and it looks like there's a little bit of a radius on it as well. Trust, or maybe yeah, looking pretty class and then so will replicate this per night and 50 next. And while to you is actually just reuse this text. All right. A lineup right there, then just then option shift to drag that That's another copy. The same 259. I'll change this black we were using and then really step up the size actually gonna drop this size down a little About 10. I know exactly what this fun is. It might be different than Helvetica not 100% sure, but we can always check that later on once we get finished. The big thing is just trying to get it proportionately pretty the same and then getting the layout similar as well. I'm starting to think there's probably fun going on in here and you could check in the other file if you really wanted to make sure. But it's not a huge deal. Just as long as we get used to the sizing and spacing, I'm gonna go through and kind of replicate all these other elements as well. Don't actually know what this included. Button is use the air. Okita Bump that up just a bit. Actually resize this town copy and paste that text the WiFi and shift option to drag another company. And I'm actually gonna line this up to if you go appear to the top of our board Grab one of these guides are you have to do is kind of hover here to drag, click and drag you get a guide, and if you needed to lead it, you could just slide it back top. It'll actually make sure everything lined up minds up well here. And I kind of want also check these margins as well. So for this to match, I need to move this over a little bit. And the way I told that you can see you get like that pink. I'm text right there and just make sure that kind of matches up edge in both places. It's a 51 so just making sure that matches up there. You can also turn the layout on the grid to see things a little better. But I think he's in a combination of the guides and that helps. Okay, so the next thing we're gonna dio read of these grid lines, you can use command semi colon to hide the grid lines, but I preferred it to lead them just so there's not too many going on at once. Next thing will dio actually his repeat grid the best tool in the world and drag this down . Looks like we got the sizing pretty close. So we'll just the spacing. So it's right about there. Most select our grid, then we use our repeater tool again. You don't have that plug in. Definitely hit this plus arrow and just havin repeater to grab it. And so we actually type in a hotel. It will select this one. This image actually select the image, re type it, type on her toe. And we can just select these two pretty good pictures. Really It apply. Close this window and we'll double click and actually don't repeat grid. Turn this border off, see him back out. One thing just looking back over his we're gonna make sure to add this drop shadow to the search bar, maybe make it a little lighter, but it doesn't pretty close for Okay, so now that we're kind of finished up with the screen, what we can do is copy and paste, pullin our original You I kid and see how close we got. So one thing to know. Definitely some places where the font could have been adjusted a little better. This search bar is honestly unusually small for mobile, so I wouldn't recommend doing something this small heights a little too small. We could bump up. The font was 35 Helvetica Bold were 28. So just kind of looking back and looking at some areas that we improved on and just kind of measuring and grading yourself and understanding where you went wrong or what things you kind of just. But for the most part, we got pretty close. And you could really repeat this process on any of these and kind of go back and look and understand that if something doesn't look visually similar, it's something you can work on. You can remember it for the next time and for the next part of this will actually be moving on to one more example. But this time, instead of trying to copy, it will be trying Teoh, create a new theme for it and really make it something that's unique. And I'll help you guys understand how to do that. So let's get that next part started 7. Add your own style: okay for this next one, we're actually gonna try different method to help practice. And once you get the hang of being over to replicate other designs, you can begin to kind of change the style of them and begin to see how like the designs can adapt. Who can use them in different areas. So if you'll open up their food up, you are kid can find a link for it in the description of a class or also one of the ones on X'd karoo dot com. So the first thing we'll do here instead of just replicating these designs exactly we were actually going to dio is kind of change the theme of the design and then change what its purposes. So for this one, it's like a food app. Recon, like order food and see like nutritional value will just be using these two screens. And what we're actually gonna do is change it into, like, a Halloween store app. So instead of burgers were going Halloween, And in doing that, we're also gonna kind of change the name to be like a creepy kind of spooky theme as well. So I will also not develop it from this file as well. So the first thing we can actually do is export these screens hell shift, dissect them both, and then just get the images on the desktop. If these air on I found X are so get bile? Yep. Then so I created while and then what? I'll do you. It's just drag screens over and again. I do it this way. Just so it's not so easy to copy and paste because if you copy and paste things, you kind of you lose out on the steppe of really trying to figure it out for yourself and understanding, like have a sizing and spacing is work. So what we'll be doing is replicating these two screens, but we're going to be changing the style of So the process is pretty similar what it was or and we're gonna go out and do this menu item right here at the top and then just pee for the pinto or to come up again, and then we'll change it, Teoh. But one thing to note is, if this is going to be a Halloween store and we're gonna be changing kind of human look of the whole out. This is a great background, but I'm going to do in this new version is actually change the background color to you a black. That's because it's gonna be a Halloween store. We wanted to be kind of spooked. We don't want it to be super light and airy like this food app is, and then what we can. Also Dio does make this menu a little thicker than this original version, just to be more pronounced and start to give it a little more of a style swill. Copy and paste this lime. Drag it out a bit. It's actually the top line that's dragged out. And so if you'll notice because I'm changing the theme, one good thing to Dio is actually on this. There's a lot of rounded edges everywhere. One thing to do in the beginning is just change those rounded edges to straight sharp edges , and that's gonna help kind of define like a new style or it right off the top. So it's an easy decision to make thes menu items a little thicker and also make sure there is no rounded edge in this option and say, We'll do our header appear next, Presti to get the text to come up. It can also feel free to change this text or whatever you want it, Teoh. Since it's gonna be a Halloween store, maybe we do welcome Teoh. And for fun. You can try to pick another font or kind of the basic titles. I like to go safe and just use um sf Pro. So that is the native IOS font. You can actually just go to like, um sf pro font download on Google if you don't have the fun already so free an apple actually gives these fonts in their developer guide and you can download them from here if you don't already have it. It's a good idea to go and have this, and that's kind of the same thing for any android wants. I believe roboto going down there. There's and just kind of have them when you need him. We go back to our file. So if you don't have that fun, just grab it there and size looks like we need to be a little smaller school. Try 16 This saying find your favorite foods actually gonna go ahead and rename this like Halloween store actually want this be in all caps and instead of retyping it? If you go over here, you can actually select all caps or uppercase lowercase or title case. I'm gonna resize this as well pump it up. Maybe about 28 and I'm gonna make this text white. So what I'm doing is I'm using similar sizing and spacing to this original Abbott A Mr Toe Add different like stylistic elements to it and kind of explore like what we can do to really change the look and feel of it. Thou changing like a lot of the layout and fought and spacing necessarily spot sizing. That is one thing we can dio is actually change the font type for how Ming store. So if you want to go and let's say let's try how so you can go to any website to download Aunt um, anything that's free, that is, the default is pretty good. So if you want to search here for your own specific fought feel free to use any kind that you'd like just a bunch of them, try not to do anything too over the top, but something to give it a little flare would be great. So if we go back to our file once you install it or just use us, have pro if you're practicing and let's see if I can actually find the font that I downloaded. Okay. Luckily, that didn't take too long. So I downloaded this kind of creepy fought well, actually want to be, Do you liked? They've even thin. So again, I'm kind of using the general sizing. It's pretty similar, but I'm really kind of playing with the font waits to kind of create a spooky vibe, especially with this, like, Halloween fun we have here gonna send her this. And if anybody wants the specific want was called man eater BB, Um, and the next thing we can do is kind of create this search bar and held our for the rectangle again. I'm gonna look at our grid, so I double quick part board, turn the great on No, line it up with no, actually screwed to. Maybe there and he's probably pretty quotes. Okay, so if you'll notice instead of this, being white will actually do a dark off black. You're right about there. And instead of doing rounded edges on the search barbell do angled edges here, and that's just going to kind of go along with foreign. We have going kind of a creepy Halloween vibe, but we'll still have search in that search icon up here as well. He's copying and pasting the text. I generally prefer to copy and paste text instead of just wrong you text box. I find it a little fast. You're just to do it that way, but you're, of course, free to try anything you like. But that's just the way I like and scale us down just a little. Then we'll draw probably our third search icon so he for lips draw this out, and especially when you're just starting out and you're getting used to the program you're getting used to design, Um, for digital products, it is generally better to go ahead and try to create these icons yourself. It just helps you get more familiar with the tool helps you get more familiar with, um, icon sets and just kind of just better visuals all around. So it is a little cumbersome toe always be drawing icons, but it does help in the long run, and actually, I'm going to make the end of this not rounded. So it matches with kind of the edges of these box boxes. That's one of the really small notes toe to kind of really take note of is things like the edges matching are very important when it comes to having and achieving a visual style. So we'll just make sure that kind of all balances and makes sense there. So freezing back out, it's a little smaller again. We're still trying to match some of the sizing and spacing of this, and then we'll create this icon as well. So repent pool, track this over. Actually, I'm gonna delete this, Needs a rectangle instead, explain why in a second so are for rectangle, but and draw that open and then we're just gonna fill it, turn the border off. I get a little smaller here, freezing back out for this little smaller I'm going first, you friend of lips, then shift option. No, that and Phil off. Then I'm gonna make this about 1.5, and that's just so it gets a little closer to matching This will do to actually this way. Actually, I kind of like this orange color. Just because it's very Halloween, I'm probably actually gonna try to match that orange. It was a little more red in it. The question of that and that also fit in well with our Halloween theme. So what I'm actually gonna do here, select both of these and then up here, I'm gonna add the path. Well, actually, I'm going to do two things there, So I'm gonna copy this on a select these, and then I'm gonna hit had path, and then I'm gonna paste it again. Phil, turn the border off. So I'm to scale this down a little. Yeah, And then I'm gonna take this past, so we're gonna make sure they're both selected. And actually, it's subtract. Right? So what that's going to do is this makes this a hole filled icon instead of just a border. Hold option shift to dragon ever in. Then if you double click and double click again, we can actually edit and move over these circles the same thing here and double quick end. Sometimes it takes a little playing to make sure you're selecting the right layer, and I actually rotate this all the way around. Then I'll group this all together command G and shift option and scale it down. I'm actually bumped this size up a little as well. So the next thing is kind of this tab bar gonna save this color as well. Bring these texts down here for kind of these tab titles. You for this line? We're gonna make that the same orange we used up there. I'm actually not gonna draw these icons yet. Feel free if you want to attempt these icons is definitely a great practice. Or if you want to go to the noun project like we did earlier, that's also a good option. But for now, I'm just gonna drop like a square police hold for them. So I'm gonna actually use repeat grid now, draw right. So wherever you can, it's usually a good idea to try to use repeat grid. It's a huge time saver. So if you see any elements that could be replicated, it's probably a good idea to try. Replicate them just so it's faster. I'm actually gonna change this fund. So that's a little I actually might slightly different weight as well. Okay, then I'm gonna find a placeholder icon on the noun project for this. So if we look up costume cause Halloween store, you can probably find something that's decent, like this one shout out to I have no idea how to say that, but thank you for So we'll scale this actually gonna go ahead and make this whites We can see it, but I'm actually gonna dio ungroomed this repeat grids that was command ship Jeda and group it and then command shift to you one more time, and we're gonna put this high pounds a placeholder, select all these holding shift, and then we'll do you repeat grid. In that way, we have a Nikon placeholder that's a little more, a little more visually appealing. Well, center that and I'm gonna one group this command shift G because these are the ones being selected. Select a mall hit command shift. JIA on group. I'm gonna select these little lines, actually, just make them a light gray, and we'll call this like, our home page, and then we'll just make up some names for these other ones. I'll actually select all these and make sure Texas centered. We'll just call this deals feature. Sure, this gets rescinded and and you could go through And changes are cons as well. But for this will just keep them as is then the next thing is to create these two elements on the bottom here and again, we'll kind of keep in theme. Well, do we won't do any rounded. I just here, make sure the background is kind of darker. We can also dio extract another rectangle and our to drag that rectangle, by the way, created shift an option to scale it down, copy and paste. This you could try to draw star. I'm generally don't like drawing stars. They think of a decent amount of time. But if you want to practice it, you can. You can use the triangle told to do it as well, but that usually takes some time to get things perfected. So thank you, you d. So just to save a little time, I will drag in the star from the non project. We use the same orange for it as well and again, So I am pulling in things from the noun project Pretty frequently. I don't use those and anything commercial not using those in any APS that I'm releasing. So just always make sure that you are using them in anything that's gonna be commercial or not. Educational base that dio shout out, Give some credit. Um, extremes. This It's two year 12. We're gonna make it a little smaller. Maybe like hey, nine. That's really small. We'll just keep the star number there. I will say rating instead of minutes. And then the other thing is this price tag, and it's using a rounded price tag. Actually draw a rectangle, this red core Halloween and one thing I'll do is I'll double click in. You can actually grab these edges if I have shift and then drag it over a little and actually make it a little funky kind of play with the shape. So we'll do that, and that's what we'll put the price on. And we'll just that size a little. See how this looks in black. I like it in white just a little better. We'll scale this up besides a little bigger, except when I make this bold as well. Okay. And so in theme of this will also be selecting this and use repeat grid, and I love utilizing repeat grid. It just saves so much time. So I select this and then go to repeat her at the top, generate, Select here on the type and how mean media costume. So we'll shuffle and look for some good damages. And you can play around with the search words and the keywords. Maybe we'll try scary, but just search around and find some images you'd like. Now, fast forward this until I finally get satisfied with some images, you can also, if you want something more specific, we can go to pixels and find some things a year. A lot of times, this is a safer bet. Um, because you can get more high quality images. So it's really just up to you for what? You'd like these air really creep business. So just fine, whichever images kind of see you, whatever you'd like to put in there. And this is actually an important note. So if you select multiple items and then dragged them into a repeat grid, it'll kind of hover where gonna drop in and then you let go, and it will actually populate both of those images there. If you have a bunch of trying to bring into ever repeat grid, you can do so pretty easily. So we'll actually command, shift, cheat on group this, and then we can scale these up in a similar fashion. How they have it scaled up this town, and the reason it's off center is I'm assuming there's some kind of scrolling animation that happens. We won't get into that, but just now that's probably the reason it's off centered. And the last thing is, so we pretty much have everything in the relative place that it is here. But let's add a little bit more of kind of like a flare more, a little more pop color and something to kind of drive home this a Halloween store. So if you'd like, you can go to the noun project and what I'm looking for, it's like a background, and we'll actually do is look for a splatter background, so we'll make it look like kind of a blood spot or something. So pick something here that you'd like download it and then once you dio you can come back in here. I like this one a lot I found earlier. Thank you, Becca. Appreciate that. And then what? We can dio make sure it's all grouped together. Come in, G has used. This is like a background and something in this top right corner because it does look pretty land with everything up there. What kind of scratch? This big blood spotter across the screen. And I'm gonna hit command shift left bracket and send it to the back. And then that kind of drives home or Halloween store vibe. It's a nice change in mix up from this and gives us kind of a better feel for it. And then, like the last one, if you wanted to, you could copy and paste this and go back into this original and see how close we got. And it looks pretty similar. This was a pretty simple one. You can still kind of check and see the safe basing and sizing of things. I do like our search icon sizing better. You want to stay at least 45. You're making anything that needs to be clicked on, so that probably just needs to be larger over here. It's pretty close, and it kind of has a nice Halloween flair to it. So if we go back over here and If anyone wants to try it out, you can actually go ahead and make this page and try to make it into a Halloween theme and show how a howling costume could be created here. One of the options. One of the other screens you could play around with year and kind of try it out on your own . Maybe it's a class exercise would be great and really try to change the style of it and see what you can play around with and kind of. I understand your own visual style and see how good you could make it look. But that should be pretty much wrapped up for this island cleared all the links there if anybody needs them and thanks for watching. 8. Outro: so that wraps it up for this class. Thanks so much for watching. Please leave a review or comment depending on how you felt. And please feel for you to try the class exercise. I will definitely do my best to give feedback to all the class exercises. So you guys can really begin honing that visual design I and start to build that in date sense of when something looks good and when it doesn't. Because that is definitely the most important part to increasing disability. So thanks again for