Figma Bootcamp 2: Learn UI Design: Effective Landing Pages | Brian White | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Figma Bootcamp 2: Learn UI Design: Effective Landing Pages

teacher avatar Brian White, UI Designer / Brand Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

6 Lessons (1h)
    • 1. Introduction to Figma Bootcamp 2

      0:42
    • 2. Setup, initial layout, and icons

      6:40
    • 3. Layout, spacing, images, and menus

      17:03
    • 4. Image tricks, gradients, and components

      17:32
    • 5. Typography, details, and the finish

      13:34
    • 6. Spin off landing page in white

      4:55
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

540

Students

7

Projects

About This Class

Give yourself an edge in the UI design world by learning the basics of setting up a successful landing page.  You'll quickly create a new landing page composition with strong imagery in Figma (or XD). Learn how to make consistent design decisions to make an attractive page.  We'll look at negative space and utilize minimal navigation to keep the image and text forefront. We'll also create a unique but user friendly gallery navigation (UX). 

I've broken each design sprint into separate videos.  This class also has a bonus video (sped up) on how to shift your dark design into a light design with new content. This Figma class will give you the tools to launch your User Interface Career. 

This class dives into these breakout sessions:

  1. Introduction, setup, spacing, icons, 

  2. Initial layout, more spacing work, main image drop in, and base menu layout

  3. Image tricks, gradients, and menu components

  4. Typography, social links, detail work on gallery selection, preview images.. the finish!

  5. Bonus: View shift changes in original layout into "Super Tubes" white surf version. 

---

ecee1cae

  • 9982bb42

Meet Your Teacher

Teacher Profile Image

Brian White

UI Designer / Brand Designer

Teacher


Brian is the creative director of Brian White Design in Lawrence. He directs the studio’s strategic and creative growth while also serving as senior designer on many client projects. Enthralled by the color, layout, pattern and typography of branding, Brian loves to apply this outlook to clients and businesses. He brings an abundance of national branding industry and user-interface experience to the table and has developed a strong foundation in interactive brand strategy. Brian enjoys connecting and collaborating with outside agencies and design studios that share similar loves in brand and interactive design. Some of the companies Brian has worked with include: Motorola, PBS, Sprint, Dell, Capital One, Geico, Microsoft, Kansas University, Arizona State Univ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction to Figma Bootcamp 2: Hey, everyone. My name is Brian White. You Ryan UX designer out of Lawrence, Kansas. I also do brand design and a lot of other things. Give yourself an edge in the U. I. Design work. By learning the basics of setting up a successful landing page, you quickly create a new landing page composition and learn how to make consistent design. Decisions will also create a unique but user friendly gallery navigation. This'll class includes a bonus video on how to shift your dark design into a light design with new content. This big MMA class would give you the tools to launch your user interface career. Don't forget Sigma's free, so grab a copy and jump in. 2. Setup, initial layout, and icons: welcome Teoh, Effective Landing and I'm With Brian went designed on the principle of greed above it. And I want to talk about your landing page and when he's laid out, thinking about your branding logo looks minimal menus and really making the image or the main focus of the focus, thinking about the higher keep type Huge X like call out A. This is what we're about, and then you have your higher, useless subtext that's easy to read but not overwhelming, and then a call to action like this. But we've got gallery yellow, blue or a strong interact color that you click to get people to go into your site. So hopefully class pigment give you a little bit more portfolio class. This is Sigma Boot Camps to, and we're going to be building a landing page. So if you haven't downloaded bigmouth, please do. It's free at figment dot com, and they have a free version that you can use for personal use and just super nice program . I enjoy it a little bit more than X D. So I just want to walk you through the basics of how to build landing page, and it's kind of a nice graphic to be able to just drop into a portfolio or, if you need toe, learn some of the tools and tricks is just There's just not much on the page except a really nice photo and some laid out texts that works really well. So through the process, I just wanted to show you some of the tools and tricks from Sigma. I think if you follow along and you're a beginner or starting intermediate, this will go really smoothly. So we want to start with our frame right here. Actually, I'm gonna do something really quick. I want to go to the menu and go to Preferences and now down to nudge amount and make sure that this is set to eight and not 10. This just helps for divisions for user interface, so you can divide eight a lot of times and items that are using a can be divided really easily. So that's the way I like to set it up. So we're going to start with our frame. Just click right here and actually gonna go back and say frame and you can come back. Teoh here on the design and select desktop and we're just gonna work on desktop right now. So and we're gonna do something called Deep Motion. It's just I got super excited about some of the latest shots that NASA had from the fly by of Jupiter. So we're gonna I'm just calling deep emotion. You can do whatever you want. The idea for this class is like if you're into skateboarding, do a skateboarding one, and I just want to show you how I'm laying out different things. If you're in the ballet, do that so and then share with the class afterwards. But I was just super excited about Jupiter shots, so that's what I'm doing. So now that we've got our beasts framework, you click on the name and you can come down to here and it says layout grid right here on your right side bar. So obviously that doesn't work. What we want to do is go to, uh, from grid down two columns and I want to set my account to 12 and I always set this, like in figment. I don't mind like the red, but where which is turns pink with the translucency. I set it down to three with landing pages. The grid applies still, but it's like this is kind of a flowing project, so just stick with me. So, um, I'm gonna sit, It's a stretch, and then my margin I'm gonna set to zero. I just want thes edges to be flat. What I want to do is after this classes take this shot and make a nice dribble shot. Or for instagram where your you're floating in and doing some of that stuff that you see so on the gutter we're going to use eight. So we're gonna go to 32 pixels and push that wide, and we've got 12 columns. Might not use this very much, just trying to get get a sense of layout and and dropping in photos. So I just we'll see how it goes. So I like to do is get some of the assets we need up front, which is the NASA logo. Just grabbed it from their site. And then I'm using font Awesome, and I've got the pro version. But there's a free version. May see if Aiken on the tab over and show you so that you can go too far. Awesome dot com, and I'm on pro. But you can get whatever you want for free, which is great. So once you have the font loaded onto your system, you can just copy this, were you Click it and it's coffee. Okay, now that we jump back here and we've copy that code, since this is front awesome five pro, I can actually just tap it right here, and it will copy it right into here, and it will go to the Chevron. I've wanted the Chevron instead of a narrow for some reason. So, Well, just start to lay out different items. Since this is such a simple lee out. I mean, there's some intricacies to it, but usually I would use a wire frame set up, and that's what I was gonna do and will do. But I'm not going to use this icon. I'm just gonna kind of flow it 3. Layout, spacing, images, and menus: so I want is a menu. So I'm gonna actually show you exactly going up to rectangle dragging a menu, making sure that you can see that in here. You have your page, deep motion and your rectangles under it. So it's jog to the right so that, you know it's in there. This is important, because if it's outside or like, let me see if I can do this as your Yeah. If it didn't get all the way in and it was right here and you try and export it, this won't show up. So you want to make sure that when you see Okay, now you can see what happened. We have had other files. Do this to where rectangle is up there. So what you want to do is get it. Make sure that it's in deep motion. All right, so now I've got my menu. Well, since we're doing eights, this will help with your eye to stick with it and make sure that it just feels right. So you can do, like, 88 or like, uh, like, 90 to see on 96. Maybe that would be better for, like, kind of a heavier menu. We'll just play it by ear. And I'm in a copy of this command C command D and maybe have a spot for I'm just I'm just using whatever colors I want really quick a spot for the logo itself. Bring in the logo and maybe here. And so this would be kind of cool is if we have a right sidebar. So I just held option down and did that little fast for you guys. So click select hold option down drag. Then grab the edge and hold shift and it will lock in place. Okay, So this these air 91 right now, and I want this to be the same with Is that so? This is 96. So we're gonna go ahead and break the grid, and here I'm gonna do this saying 96 up here and lock it, which it's not locked. Sorry. There. Okay, so now this one's 96 this one's 96. It jumps out of the grid just a little bit, but this is a stretch pull grid. And let the depths worry about that one. It won't be that bad. So I think it just feels a little too thick. So we're actually going to go down to 92. Or let's just say 91 and I want 92. Okay, So we're gonna make this 1 90 to this one 92 as well. Okay. All right. Let's see. So I wanna had, like, a big photo here and a nice, like gallery button to click Teoh. Some kind of, um, like shows which picture you're on, but kind of a unique one. Maybe maybe a preview of, ah, of the next image and some nice scroll bars, like down here or over here and then just a blurb about the image. And I want to do something and show you how you can blur it. And I'm let's see. So what I've already done is I've grabbed these images from NASA. Thank you. They let you grab them and use them not for profit, but for just for an instance. So Ah, I think this one's really cool. I think that that would be a good one to use. So basically, you just drag your image in here and you can move it around, but I'm gonna keep it up there just for the heck of it right now. And before we get into the image stuff, I want to jump back and I'll show you these these colors. So what I did whips is this color right here is the NASA blue. So I I use a thing from, um, MBS really nice guy. And it's called contrast for Mac, but I don't know if Windows machines have this or not, but you can You can grab the color of anything you want and quickly grabbed the hex color. So I grabbed that and I grabbed the red and went to colors. You see if I can grab this quick, So under coolers dot co, you condone Drop in your your NASA blue right here and you can lock in. You have to double click it just a heads up. And then what I did is I screenshot of these just to drop him in to see if I wanted some of the colors. But you hit space bar and it will create color schemes for you, which is cool. So, like, these might be like settle accents or anything like that. It's really nice. So I'm gonna jump back here, and I'm gonna grab these colors, and we're not gonna get there yet, But I'm just gonna I didn't want you to be looking at these and trying to figure out how it got them, so I'm just gonna look through and find some of the ones that I like after we've laid this out. So before I dropped this image in, Well, I might as well since this the landing page. I'm gonna go ahead and drop this in so landing page boom. Make it huge. Uh, option command left bracket will take it all the way back so you can double click it and, like, go to image crop and, like, shifted over a bid like that, Do all sorts of stuff, but I think I like it. It's like this just really full just It's just such a neat blue. And now I'm going Teoh work on this bottom area. So you've got kind of a section for your logo and then a menu, then, like, a secondary menu might be up here and then, like, social icon stuff like that. What you do want is your I to move through this. So I'm gonna hold option, bring this down here and and see your I will take that straight down and catch Catch this section, Teoh. So if if you have sections that that air up here with lines, your eye will actually go down and cap capture that in your mind and say this feels good So it's all of this balance and like using the grid in the right way and not over using it. So So I think this will be like the gallery button and we're just wire framing right now and holding option and made this one would be bigger, like when? 28 and no, no. And then, like having a secondary image right here. So I'm just gonna make that like this would be an image of the like, the next image. And this 92. What we'll do is just come up here and say 92 hit, enter. And so this will be our back. And then I'll put a forward button on this menu that will be kind of cool. So this will be like the color. And I think we should figure out that color now. So, like the highlight color, surprise should be something bright that goes with this blue and the red But I think red's sometimes you deal with when you have black on red The contrast is too hard to read She won accessibility and thinking about that. So I love this Prussian blue and I think just look at grabbing some of those so Amana create another box. And when you're in here and you click the fill, you can go to your eye dropper and hit Hit that blue and hundreds that yellow will work. I like that war, INGE, But thinking this yellow less mustardy would work. And I see some of these greys are really nice. Just it has, like some of that blue in it. But it's just really nice and settle and a dark a nice dark gray to use. So after we do this, just grabbing a few colors and yours might be completely different. We can always come back and grab something else, But I'm gonna come back and grab that initial NASA blue, okay? And we want this pretty simple. So gonna grab this one and let's let's go ahead and go to fill. So when we select this, we're gonna fill, and now we're on yellow. I'm gonna hit this button here and hit Plus, and we'll just say nasa yellow. Yeah, they're brand guidelines, guys probably screaming right now, but we're just doing it so good. Are Phil now on this one and click that yellow? OK, so now that we have the Chevron's here, this looks a little thick, but it will. It will be nice and small. So with AIDS, I like to keep it under in that division. So 16 24. 32. Yeah, that's right. So we'll do 32 and let's look and see what our dark black could be. And it could be that one or this one. But let me me go back here and grab this darker. Well, it's not that dark, actually. When you click on it, graze it out a little bit. So what we'll do is use this one. Click this and you use this, and I like to skip these in the circles. So try and push down a little bit. Keep it in the blue so you can see it's not straight grade. It's not blue, but it can bring it down just a little bit. And it will be in that same value, but it has a little bit more black tent that we want. All right, so let's go ahead and make this nasa blue black. Okay? I'm gonna make this blue black and make this white. So now that we have the blue Black, I'm in a hold option on this chevron. And since it's the same, you can either, you know, go to awesome and go to Chevron. Say, Chevron left. So this is the left one. You can copy it here by clicking it and then go back to Sigma, go back and hit paste. So it's probably smart to do that. Sometimes I'll just blow it out. We're all outline it, but I want to keep in front. Awesome. For right now. Just Debs would like that too. So I'm going to make this black. So now we have are nice big image and our Chevron's. And I'm thinking this feels just a little bit too big. It might be, um, just too wide. So let's let's drop it down and goto like, 78 something like that, and do the same thing here. And since these air the same, we can click that link and drop this to 78. I am put in the middle and same here. So we're going to make this 78 and just drag that up and then bring it back to 78. We're just type it in. Okay, so now that we've got yeah, I feel like that's right. So this one would be going down to 78. And if you can't see the these grid lines, you can always click the name of it, come back and bumped this up on columns. So, E, I don't design it with the like that. But you can. You can use it like it's 6% right now just for the heck of it. And then we'll get rid of it pretty quick, so it will walk on there. And so I think since this is the gallery, we want that to be the hot color too something and bring it down to the yellow. And maybe this one Let's see 1 44 Something like that might begin, So this one could be a little bit larger, but I think we'll keep it there and bring this down just a tiny bit. 1 28 So this is 1 28 All right, so I've already grabbed some of the text in here from the NASA segment, so I'm gonna Whoops. Don't want to do that. Just grab some of the initial paragraph because you want this to be really clean and simple , and you don't want Teoh Crowd it. So I'm gonna drop this into a new paragraph left, justify. And we want this to float pump on this background. But we wanted to be really readable, Easy to read. And this would be our sub header I'm using next, uh, for the headers and, uh, acumen. Pro for the text. Really nice to read. Kind of like Helvetica a little bit. So just follow along as I'm going. So we've got maybe a big, like huge. I think we'll look. We'll look at that quick and lay that out eventually 4. Image tricks, gradients, and components: But I think the idea what we want to do is have this left side be blurred of the image. So we'll see. Assess. You can do that. If you have a duplicate image and then you blur it, a certain amount. It's so now we want to blur this area, but keep a nice sidebar. So what we'll do is do something around 400 pixels wide, something like like this where this would be the sidebar. But we don't want, you know, heavy sidebar. We wanted to be blurred. So the idea is that we duplicate this background here and you want to make sure Not when you selected that. You're not like, if you saw that, what happened when I selected it. It's like, mostly grabs that the full page. So you want to make sure you're just on the image itself, It command C command D. Okay, so now if we drag it, you see what happens. Since we've already cropped it, it doesn't work. So what we want to do is crop it again. So click image and it will go to the crop and you can see that you have your handles. So what we'll do is just come over here and lock it. So now we have an exact duplicate of this image here. But it's on another later. You can see it's up above so top level photo. Just name it that and you can come in here to the effects click plus and we don't want to drop shadow we want If you do background blur, it won't do anything. But you come in here and get toe layer blur and you get this really nice effect. Might be a little too Menschel Turn it back a little bit. 28. Okay, Still hard to read And you want to be careful because you're gonna be flipping through images and your image might be really white or light up above. So what we wanted you is just make another version of this. This would the rectangle since we named our layer can come down here and we'll just a greedy int. It's really nice toe label it if you can take the time, because if you're handing it off, developers really like that. So we're going to go to our colors and pick the NASA dark blue and that won't work either. I mean, you can You can break this and then come down here and hold shift and down, and it will go back 10 10% each time you go back. So it's kind of nice if you've got it, Uh, like a linear effects so that you can see more of this image. That's so cool. So what we'll do is come down here to solid the fill you click this color and goto linear. And now that we've got this to set to zero at the bottom and then this one, you can drag this over and you can see and see. Okay, skip that part brain. But it's set that way. Yeah. Okay, Now start again. Brian. The linear effect you want is set to 40 already, so you want it to be like, 100 and then tone it down from there. But what you can do is drag this to match any elements that you want to get your I toe line across. But for right now, will just said it like this for now and maybe set this one at 90%. Uh, let's see. Yeah, I think don't work well, So we're not gonna lay out the text yet, but we'll get there. So I I think with your eye you want to match this one over here, which is the now nasa blue Black. All right, so maybe we could have the NASA logo pop out a little bit, and then do this one just a little bit lighter. So let's look back at these colors and see if any of these work. So what we'll do is go to our fill, click on the eyedropper and come back here. And now this is getting annoying. So I'm gonna start. I'm gonna probably take off the grids just for a little bit. So you can you can come back here and make this lighter, or you could just toggle it off. All right? Now you can see kind of some subtleties where this gray is gonna match some of these grays , and I think what we'll do is just match this great too. And, yeah, it's flowing a little bit better. So let's add some button tax. Some menus. So we'll say this is missions and make it white. And let's say this is next, uh, fold. Okay, sometimes I mean There's just not a lot of space to work with on the headers. So you want toe not spread out your text too much. But you can, you know, do like a 10% letter spacing sometimes or even just a little bit toe. Let it read a little bit better, smaller. And if this was a big project, we would make thes into components and then duplicated. I'll just do it really quick so you can see and we'll just keep the component there. So I'm gonna do option command K, which makes this into a component. And what we're gonna do is auto layout right here and horizontal. And we're set right now. So with when this is just a standard menu item, you can see it's right here. So what we're gonna do is hold shift in option, which makes it creating a direct, uh, it aeration of it. And then we can just go in and type whatever we want in it. And if the client later which they were not doing for a client. But if they later wanted something to change like, well, we don't like Mexico, we like Ariel. And so then what happens is this changes to Ariel too. So that's just something for larger projects. But this one, we're going to do it just cause it's super fast and easy. So we'll do Is missions. We don't want cereal, so we don't want this to be aerial. So since this is the component and this is the adoration of it, then we'll go back here and go back to next. Uh, cold. All right, so now that's changed. Click shift, option hold and downloads. Okay. And this is a good way to look at this to is, I'm just gonna make these really quick and about And let's let's add, I always keep like, social icons or this is the This is the search with fun. Awesome. So I'm gonna drag that over here and go to white. Okay, so about let's just be double tap kit about is under case to lower case to want all uppercase. Uh, and I type these out that way. Just go back to your component, come down to your text area. There's these three ellipses right here, and it opens up quite a bit of stuff. It's really nice what they've done. Eso will go to the letter case. Don't get overwhelmed. Just just stay right here and hit upper case and you can see immediately. You can click and change all those at the same time. So we're moving quick. So just keep going and we're going to align these holding shift, and then you can even do this where you space it out, tidy it up. And that worked pretty well. Sometimes it doesn't. We'll see how it goes. All right, So there's our menu. You wanna maybe have galleries? Be well, this is a gallery. That's why I did this. So, yes, we will do galleries, and we'll do this, Phil and I think in coming back here there was a nice gray or something. Let's see this E, uh, see, e a. I might be too light, but what we'll do is duplicate that. How you can barely see it. I bet you can't. And we're gonna drag this down about there, all right? And that will make this one a NASA gray one. All right, so then what will do select these missions downloads about and go to our fill and woe? We don't want that. We need to be in. So what we can do is go back to the component. This is why I love components. Go back and make them all gray. Then we do this version and we come back and do a white. So now you have the grays and the white. That's probably not enough to show that it's on. They're trying to keep this really simple. Let's do a rectangle with four and you just like 32 by four. Just really small. Something like that we use are hot, hot color maybe. All right, let's keep moving. So I'll grab this text. And what will do is make this come back now to let her case upper case, you might have to go down. I am. Stack this. So we want this line tow line up with your eye and then probably this line. That would just keep going. I think I'm gonna show you really quick on this. You can change your line. HaIf it's just right in here. It's set to auto, but like you can do some tests and so that would be like directly on 16. Sometimes I'll go to 24. That looks good. Something like that I did that. I moved it off or I wasn't supposed to. All right, you can see how it's shaping up. It's cool. Um, pretty simple. Pretty quick. We'll do. Maybe a really fun, like walk through, um, showing which, which photo you're on. Okay, let's make a menu over here, so I'm gonna make a menu come in a little bit. And since we're using fours right now, we'll do that rectangle 32 by four. And make this white and try and get your wine all the way across by holding shift. It might be too fat. So sometimes I just like to simplify it. Make it to space it out a little bit more. Let's see what that looks like. Yeah, that's fine. It might be. We're gonna cheat and just go two threes and that will be OK. Yeah, that's great. So I was thinking, Let's keep this really simple. I'm not gonna even use the social icons and just think about it more of a science type of site. So we'll what we'll do is use. Maybe this this font here and say Twitter. Yeah, we'll make this centered. Linked in something like that, Facebook or as Vongo, Chika says. Face bag. Okay, yeah, And maybe let's just go crazy and twist, um, a little bit, make it a little bit more exciting, or maybe enough less exciting. Maybe it's a little bit less exciting, if that makes sense. It's just kind of like on the side, but it's not the most important thing, All right, so, like, 40 pixels space. Yeah, All right, So now let's keep moving. And what we'll do is see if see if we can do a really cool like this is why we're doing this is so that this is a gallery and that you're going to see other images and you're here to look a really cool images. So let's do a detail button cause you're gonna You don't want to post a whole bunch of text . You'll want a small details button. But since it's, uh, since it's a hot spot, we want to make it that that hot, um, color here and a plus kind of simple, and I don't like to hamburger this kind of stuff. So I want this to either be closer or further away so that your eye combines these two together. And then this is the action we could do. Some Chevron's to that are small. It might be too much, but let's see here. And you got to think about, um if this is an iPad or ah touch device that you you you can't stick the next chevron right next to it because you don't know if it's a mouse or a finger. So if you have a finger, I'm just just for time purposes, I'm gonna spin this. Do you want to make sure your hot spots have, like, I think it was 44 pixels? Uh, the hot spot would be nice. You know, you got big fingers. You just have to be careful about it. So All right, well, take this details. I think we'll take it down. 5. Typography, details, and the finish: bring it down here. Oops. Yeah, That's very so we want this to We want this to go to gallery. I think we'll go back up because this is really important. This is why we're here. We wanna make this part really nice and interactive. So, you know, you can flip through these really quick. And as I'm looking at this, I feel like we're losing. I mean, this is like the intro to a gallery. So it's like we have just this beautiful, beautiful shot of Jupiter. But we really want people to get excited about it. So we want them to interact with the gallery. And as they flip through, um, we're making this up as we go. So we want them to really be excited about the pieces. So I like this one quite a bit. Somebody bring this in here, drag it down, and this will be like the next one, but we just want to show a sneak peek of it, I think. Yeah, I think that's fine. So if you hold option down and shift, you can really snap thes things pretty quickly and hit shift option command right bracket, and it will pop this up. Keep doing that with different pieces. And I just holding the edges, changing the text to next and go to white and might want to start using, like, as we go down. We've been using the acumen pro for the paragraph and then these for the hot spots. But I still like it. I'll just keep it really small, like 12. Bring it on here and then drop this back on the Phil to, like, 50%. Yeah, something like that. Okay, cool. So how was planning really make this big? So this is next Black too. But to make it stand out more would just make it all caps and maybe like 1 28 Boom and fix the letter spacing like 20. And now we've got that kind of effect where we can come in here and so this If you remember that you want to think about your spacing. So this is the 96. So we can have this up here and space it out that way, and that might work. Or like you can do this. Just shifted out a little bit with the like, maybe goto like 1 28 Something like that. So you get this fund balance? Yeah, that's looking cool. It's fun. Just simple and just easy to read. You kind of want to enter interact with it. But this part, I think we really want to make it look cool and just work really well, So I'm gonna just call this deep, deep motion. So like, well, say that this is three out of seven or something. So this will be the the section itself that we're on. And I remember I'm just holding option down 03 Change this to White and might change this back to next. Regular. I don't know why they're all like that. They came and bought this. And it it's all separated out instead of in a section. So I need to look at that. Let's see here. Maybe for, like, 48. Maybe a big one. Yeah. So this is like, Hey, you know, there's a lot more than this to see, so check it out. And some of these I like to do where you space out the text just a little bit with, like, 10% texts. So if you were right here, this is the letter spacing. So If you ever have an issue, you can have her over, and I'll tell you what it does. So we were using four, but we went to three here. So just just for the sake of it, let's try and just go down. The three and I always like to use pieces that air else used elsewhere so that it just feels like a family. So I'm gonna move these and we'll do a vertical line and say, like, one of them is shot up. So something. Let's see. What was this? We didn't name this one, I think. Well, just name it. Yes, Uh, dark gray one. Okay, so now we've got dark. Great. One will break it and then come down and we'll just drag it up. A couple thoughts like that. Nasa dark gray too. I might be too big, so we'll just do It's based out. And so here's another line here that you can get your eye to capture with that that three, which is cool. And then if you check this out and you're captured there and you're almost in the middle, doesn't have to be perfect. But the idea is that your you're thinking about placement and how it flows. And one thing to do is to scoot back and see if it's balanced. It's looking pretty cool and your eyes moving around and the hierarchy of you see these hot spots and than this little teaser right there. It's kind of fun. Okay, so these are all, like, spaced 20 pixels. So we wanted seven. And there's more like so you could have, like, 10 if you wanted. And we might move this over here so that you're left justified text. So sometimes with Debs, you want to do that. You left justify this, that they know to set that in this section as left justified. So if the tax changes your you're dealing with it stretching out. But I think what we'll do is stretch it out this way. So I'm gonna select all these and then go to tidy up or distribute. I'm gonna distribute it because I wanted to exact and now So these were all 21 pixels. Let's go ahead and you can grab them all, and then you go up to 25 so you can hurt 24. So then we'll make this 1 32 okay. And then make it white loops. You will swap these because we're on three. It might be cool to just drag hold and make this that same lighter. Agree? And I just hit command left bracket to go down, and I think I'm gonna just make it really hard to read. But the idea is that you're on three and it kind of floats through kind of look school that way. Oh, and I forgot one to give the guy credit photo guy credit. Where was his name? Wonder if I covered it up. I'll grab it from my other tech stock. So this would be like the image credit and I'll make this part upper case and really small , spaced out and a little bit bolder. Maybe not text in the middle enough for spacing. I wanted it up with top. We're gonna make this even less apparent. There's not a lot of difference between this and that. So what I'm gonna do is going to my NASA great one click on this, drag it down. You can see like you can see what's happening. The image credit and the mission's downloads about is shifting down and I mean, I just come down to about there. Cool. All right, well, I think it's pretty good for quickly out. So that, um one thing you can do is just change everything really quickly. So, like if you wanted a surfing picture here and then call to action basically is just a nice quick landing page with the gallery that get your I'm moving around and then what you can do? The last section is you can duplicate this and grab everything in here, hit a command G and group it and what we do take it out of the page itself. Where did that go? Oops. I'm gonna create a component from this page. This will be a little bit easier and say, Let's let's make a big page here and will say it's 19 20 by 10 80 and maybe even make it a little bit bigger. Make this black. And so then you can kind of see, like, setting up a dribble shop so they need export this out and, like, it almost looks, has shading on it already, but so you could do a little bit lighter, lighter background, too, and then set your section with an effect. So, like drop shadow and Florida and make it barely suitable. But you're nice 6. Spin off landing page in white: on this last video. I wanted to show you how easy it is to change things once you've got it. Got it going. So if you're wanting to shift and use some of the elements for another layout, you can just duplicate the page by clicking on the page itself, holding shifting option and drag it down. So just to show you really quick what you could do per se if you want to do a surfing page a surfing lee out, you can, um, just shift all the colors and swap out the photos really quickly. So I'm gonna call this, um What, uh, what was this? It's a surfing one. So I think it's deep tubes, I think. Now, Super tubes, that's what it is. Super tubes. So I just grabbed a little bit of copy, changed it up a little bit and grab the billabong logo just for fun. Okay, so you can you can just Everything is creditable. So, um, you can change it really quickly and change out your your fonts and everything. I'm just going to show you really quickly. I'm gonna go through really quick to show exactly how you would shift a look and feel into , like, surfing page and way and