Learn UI Design: Quickly create an On-boarding Web App | Brian White | Skillshare

Learn UI Design: Quickly create an On-boarding Web App

Brian White, UI Designer / Brand Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (49m)
    • 1. Introduction

      0:45
    • 2. Setup & splash page

      7:47
    • 3. On-boarding templates

      15:43
    • 4. Dashboard Cards

      14:51
    • 5. Dashboard Table Area

      4:28
    • 6. Screen shot and finishing touches

      1:45
    • 7. Prototyping

      3:27

About This Class

This User Interface Design (UI) class will help you build your design arsenal with swappable icons, state selections, and a flushed out dash board complete with card sections, tabs, and tables.

98ec3b4d

We will be going over the steps of designing a simple on-boarding process for a web application and how to make it fun and interesting to keep potential users clicking onward.  Once they land on your dashboard design they will be hooked. We will start with a simple horizontal navigation design with simple components. We will use the basic grid system to align text, and flush out a few sign-up, onboarding pages with swappable icons.  The final design will be a quick but solid dashboard design. After the design is complete we will tie the pages together to create a simple but usable clickable prototype to share with a potential client.

This class is geared towards people that have working knowledge of InVision, XD, or sketch and wanting to try out Figma.  Figma is a strong, fast and free browser based UI design application that has incredible strengths in components (symbols), responsive web behavior, and co-working.

The skills you will learn in this class are important and will create a foundation for you to build and grow your UI design skills quickly and in an organized and easy to use manner.

LESSON BREAKDOWN

1. Basics of the app, a list of the pages and designs we will be tackling and what you will come away with in skills and product.

2. Setting up the workspace and Splash page with size, spacing, grid, typography, and color.  Setting up your first component and Form Elements.  Creating component buttons with states.

3. Setting up an on-boarding template with component navigation.  Vertical and Horizontal navigation help frame the 8 quick pages we will create for the on-boarding area.

4. The last page we will tackle is the dashboard.  Through the build of this page we will create overview cards, a tab menu, and a table with easy to edit details. This video focuses on the card area at the top.

5. Dashboard page lesson focusing on the table components at the bottom of the page.

6. This lesson focuses on how to quickly grab design from the dashboard to showcase it subtly on your initial splash page. 

7. When the design is done and it’s time to show off to the client, we create a working click-through prototype.

** Don't forget to post your class projects to the chat! Happy designing!

Want to be the first to know about new resources including classes and bonus content and design resources (and freebies)? Sign up for my email news alerts here!

Follow along with me at https://www.instagram.com/brianwhitedesign/ and https://twitter.com/BWhiteDesign and https://dribbble.com/BrianWhite

44ffc733



Transcripts

1. Introduction: Hey, everyone on Brian White. I'm a u I and UX designer out of Kansas. Also do brand design and a few other things, but one of the touch base on what this project is found. It's on boarding Web, and this six projects run into setting up components, which are like symbols. Sketch. There's an uneaten on boarding template that we just duplicate is a lot of fun. Things in the dashboard toe look forward to where we duplicate tables and show how easy components are switch. So if you're familiar with X t envision sketch things courses for you hope to see you in there. 2. Setup & splash page: just jump in and get you going. So what we're gonna do is set up a new art document and they have specific designs, like sizing that you can just jump in and use for phone tablet desktop. Since we're doing a deaths, top app will just use the desktop feature, which is 14 40 by 10. 24. And I'm gonna make it easy on you guys and just show you what I had done before and then rebuild it for you really quick. So what I usually do is set up a nice color palette with a lot a couple of more interactive colors and then some nights graze to flush out the rest of the interface. So what we're gonna do is set up our layout grid and over here you can see it. You can click a great style. What we're going to do is not use grid style, but we're going to change it to columns. So basically, bootstrap, which is kind of like this standard break out for front end development, um uses a system of columns and gutters. And so what we're going to do is set are count to 14. So you have a nice set to work with, and then our I'm gonna leave the getter at 20. Sometimes I do 24 I a lot of times base everything off of 88 pixel grits because it's divisible and a lot easier to use. I think we'll just use 20 since I had done that before, which is fine, since most of this is fluid anyway. All right, Excuse me. Now you consent your the the red portion, or it's pink. Basically, I said it down to three, so I can barely see it Just kind of less in the way. So So what we want to do is create this I bar. And now that we have our colors up here, I've put them in here a swell asl local styles. So we created a rectangle tool for the sidebar. And usually you try and hit on the columns or in the gutter. Makes a little bit easier for Debs. So we're going to use this, Grady and a filter which is like, is showing You can edit it here where you've got your green toe blues, and then I just shoot it like a nice angle. Um, going forward. What we're going to do is take a screenshot later and throw it in there so we won't have that right now. So what we're gonna do is just create create this section here. That's kind of an overlay. So, um, basically what this is is just a the setting of gray, and then I break it apart and then change it down to, like, 50% or 60. Just so it's kind of like a teaser to show Hey, this dashboard, you can build it with this. So what we're gonna do is build this button here, and what's nice is that they go side by side and they're not rounded and around it. So, uh, this is pretty nice and easy, and I'm going to use monos rot for you guys. I had approximate noble, which is very similar. It's just more expensive. So basically, what you want to do is create your your button size, and I'm just generalizing course, but 11 thing you can do is is make sure that it's divisible by eights, so you can go down to, like, 88 or whatever, but since we only want the left sided rounded you can click these independent corners, and it will actually tell you which one. It's long, so we're really do the top left on the bottom left. And so now you can see that's nice and rounded. I think I had done originally five. So, um, so now we've got this side, ma'am. We're gonna fill it with white. We're gonna type John Doe. She will come. I'm gonna set this as center text. Oops! And going to make it not bold. And now it is a LaManna surat. So we're going to change it. Teoh the Phil to be this kind of like standard great one that I made for the text. I think I had originally around 22. Um, so now you've got left side. What we can do is click and hold in drag, and when you hold option and shift and then you can flip it or just rotated. But what's nice is everything is movable and re sizes. So we have our rounded corners over here. Get it to blue and going to get your coat. All right, get rid of my junk in there. And one thing I like to do is keep thes together and label them as you're going. I'm in a group. This Just say, uh, email sign up. So one thing you can do as you're going is is making is dragging it down to hit hit um, the center area. And obviously I didn't get your co walked in a place. So all we have to do is throw that into that group, and so we're I'm just going faster now, But, um, basically, you can put your your text in here like call out called the Action, and to get this kind of nice little pop out, what we're gonna do is show you how to connect that as a unified object. So what we really need to do is create a polygon, which is a triangle going to move it to the middle, which is nice and easy. And what we're gonna do is select both of these. We have the polygon and the rectangle selected. I'm in a unified these and I'm like, Whoops, I don't like that I want to fill back, so that's why it saved it. So now move it down and we're gonna turn off our grids. You can see it without, so you can see it jumped down below. So there's a option. Command right bar goes all the way up, so that looks a little big. What you can do is just double quick it hold option down and resize it and good to go. 3. On-boarding templates: we're gonna jump in and start working on the on boarding area. I'll move quickly. So, uh, if you have questions, feel free to ask, or just slow it down. So I'm gonna slick this the top page area and show my layout grid. Uh, I'm moving pretty quickly, so I'm not following exact but, um, on further projects or longer projects I usually do. I just wanna make sure this moves quickly for you all. So what I'm making is a navigation area. So what I like to do is do slight, um, drop down shadows in the background, and but I couldn't get that over here. You can see your effects area with drop shadow. So I've got a 40 for with the 5% it's very light. I'm gonna add that over here said just for a before 5%. And what I'm gonna do is if I need a logo or anything that I've already made a component. You can select a component area here, and it's already up on you. Drag it over and you can easily find things as your library grows. So it's pretty nice. So in fact, like if you update a logo on a web and you have your component all the way through. Everything changes. It's really nice. So what we're gonna do is make a component for the navigation. As you can see, this is like grouped navigation. And we have this component, which is Ah, uh, basically a mini navigation with an icon that swappable. So how you would create this is we'll start with just one something a zoom in. So it makes a little bit more sent and turn off this terrible think so? I'm used to it, but I don't want to make you suffer through it for a while. So what we're gonna do is just say dashboard, and it might look a little different just depending on what I'm doing. But so what I'm going to do also is make 24 pixel box for the icon. Um, going Teoh, look over here and see what I've been doing. So I'm gonna change this to that teal and set this toe left. You can see here the constraints and top. Sometimes you have to, uh, depending on how you group them, you have to change a little bit, But it's nice. Especially if you're, uh, text line left when you type out, it grows with you. That's what you want to dio, especially with navigation. So here's your icon looks really bad right now, but we'll swap it out pretty quick. So what we're gonna do is look and see if we want to add anything else. Like if you if you want, like an action area you can, you can add and like this is, you know, this is active at this state, Onda. Then what we can do is is hide it when you don't have an active state. It might be overkill on this one. We're just gonna say that's the active state. So I'm going to select both these option command K in Mac, and it makes it component ants. I'm going to name it something different, so I don't mess up. Okay, so we'll say this is new knave and dashboard. I didn't have Well, So what I like to do is again you copy it and hit command D on Mac or controlled the windows. So you have two versions of it. You can move it to components than the component. And this is a, um uh, duplicate of the component. So since I have this component, what I like to do is swap out this area for your icons. And, um, in your icon group, you can have it all sorts of icons. And once you have the set size, like 24 by 24 then once you type out your knave, you can quickly select your the icon that you want, especially as you build up your Icahn area. And so I have the Cetus nab icons, tokens and these variety of pieces. So once you pull in your component, um, so I'll bring this over here just Expedia eight things. But say this is raise, and we're going to have, like, three pieces, so we'll have dashboard raising tokens. So now that this is set up correctly, you can just type this out. We're going to Spacey's out later tokens. So how to change the icon? You go click it. And what's nice about this is it's actually set up so that when you uh huh, I broke it when I moved it over. But what? What it does is when you come into here, you can see your instances here. Um and say I want this to be market or manage And these air all those icons that I set so underneath, knave underneath the icons, any of these named and I'm just dropping I think these were from, uh, uh, fun. Awesome. So I bought that Kickstarter. That was great. So what's nice is and you can just swap out these any time you want to create your you're a navigation. So once you have that flushed in, um, and changed, you can space it out by using their new tool, which is kind of nice. They've got this just this tidy up tool if it works for vertical or horizontal. But, ah, lot of times I'm a little anal about navigation. Obviously this attacks projects so but what you can do is is space him out this way. Uh, with where you clicking the alignment and making sure that you're spacing is correct. Throughout, uh, one of the things that you wanted to is get your component boundary lines set up correctly so that when you do the alignment, it's it's it's really working on the edge of your components and and not like floating back and forth. So that you don't have like a eight pixel issues. So, um, this is just a standard drop down. I was adding in different elements toe to kind of get a sense of of use your experience. A simple avatar This is with a pill is an image, so if you choose an image, you can select the either fill with a solid or linear color. But what we're wanting to do is just the image. So this is just pulled off oven splashed. There's another really cool site called This person doesn't exist dot com, and you can grab people's images from that that they're kind of a hybrid of faces. So that's a fun one. Kind of but scary place to think that, you know it's 20 different people for the user. But I added a simple one o'clock with the little notation to make simple hamburgers like this, Uh, I would. I like to do is do the really get zoomed in well so that it's crisp and nice, but it's basically just not three rectangles. And then sometimes what I like to do is I'm gonna go to the master component and show you, but I should have done this already is unify it, so it makes it a little bit cleaner and easier to to mess with on it cuts out layers. So next step is this type of navigation of showing, like as your on boarding, knowing where you're at, Um and these all can be made to have an on or an off section. So, for instance, right now, this is just I made this a quick component, but to make a component for your navigation, you just want your buttons to be, uh, doubled so that you have two versions or three, depending on what what you're wanting. So I have to, but to two bullets or whatever navigation balls and ah, so that we're gonna name this one blue, um, active and then, uh, not active. So this one, I'm just gonna hide. And we want this to be a stroke to, and you can change your colors. You have set colors here, or you can you can go from the the set color choices in your styles would not like to do. And we want Oops. Sorry. We wanted that from here and white. So yeah, I must have not selected it. I did it to the blue one. Okay, I'll say not active. And blue just got to roll with it as you're building it quickly. So I'm gonna select both of these option command K again component, Um, vertical navigation and, well, I'll do is copy duplicate. Send this to components. And now we have this ball, which is kind of nice, And then we can duplicate it here and here and here. And as we duplicated what's happening? Well, fusilli, I would flip this and say Hide the blue. Uh, but what happens is you can see is you can hide the state that you don't want to show, and then we just change that on each page as you go so that you can quickly see which page you're on. Um, when then I usually drop a line below. Same thing here with with numbers, you can do active states in your components and show and change the number to show whatever number you're on, which is great. So and you can see I've done that here says you looked through the file. You can see we've got, like, an upload profile picture area linked to social media. So the difference here is these air huge icons. You just have it set on a certain plane and you can see the instance, Um can be switched to email and share. And the reason why it's easy to find them is it's under icons and their 124 pixel dimensions. So when I'm looking for the bigger icons, I can quickly, um, change them out, which is great. So sometimes you have to shift to the area. But that's a pretty quick demonstration of like getting getting this page set up and changing for each section. So this component area are not component. This base area changes for what content you need but bringing in like a component like a large button that you can change any of the text, uh, to whatever and stretch it. So we've got social media links in there. I've got the components and therefore you guys, um, different icons, telling a little bit about yourself. Simple fill in places. And as you can see, I've messed up the the component that I had because I had added thes these balls on the sides. I'd take that out and it fixes that it will fix it. Um, I just need to go back to the original and the original I did on the first page to make it a little bit easier. So now that I've done that, you can see it's fixed it throughout. But you can see the active now moves as you go. So you go down the company name company. Ah, a little bit more about the company. A little bit more, I guess, was adding extra pages to show that sometimes you can be funny with it, too. So So here's another, uh in fight. Add mons with then we had originally messed up and put the name in there. And so now it's showing up, since it's part of the component. But we can always hide that, which is kind of nice. So, um yeah, and so that's this section for three of on boarding project working. And, uh, the next section will go into in the last one is the dashboard, and I'll show how to build these cards and then the tables. Thanks 4. Dashboard Cards: last installment of this class. Thanks for following through with me. If you have questions, please let me know. What we'll do is start on the dashboard area and we've got our page. And what I'm gonna do is instead of eight columns, just toe make it a little bit more legit. Sorry. Uh, it is legit. I'm just going quick for you. I've got this set up in the file that I'm giving you guys. So I'm gonna set this, uh, the column count to 12. And since I'm on eight pixel set up, this is kind of stupid to have it at 20. So I'm going to set these at 24 pixels and so you can see on Zoom out just a little bit. I've got a nice grid system and 12 is divisible by three and four, and it works well with eight. So what we're gonna do is use this as a base toe. Just set this this dashboard up for you. So we're going to create a new rectangle and we're going Teoh, get around 600 pixel 6 20 Something like that. Since we've already set up our linear to Grady int, what's nice. You can just go in. Click it. And I had already had hidden the each one in there. So Siri's a raises in here. This is our dashboard section, so I'm gonna zoom into 100% and keep moving. Um, going to try and get this little bit smaller so you can see everything. Okay, so now you have your standard dash, Um, and were selected on dashboards. You can see that this component is highlighted. I have the name of it under as blue or the teal. It's really teal. And then I have the dashboard icon as well, so you can see how the components can change and shift as you need them to show an active state. So what we're going to do is build a card, Teoh. Just a get a sense of, uh, quickly. When a user comes to a dashboard, they want to get as much information. But parse down is as best as possible. It's we're going, Teoh, uh, do ah, simple card and then duplicated and show how you can shift components. So we've got this token overview and what we're gonna do is use these grids now, finally and make a new rectangle. Well, I'm going to make it. Saw three of these, so I'll just make it for four columns wide. I'm gonna fill this with white. And what I like to do is when I'm designing and it needs to be approached. Approachable design. I like to round the corners a little bit. Have to be careful about the styling of this. But usually what I like to do is start at 10 and and see how it feels. And as you progress inside So I'm gonna use option shift and just duplicate this, uh, I'm gonna go down to five. And what? What I'll do is I'm just I'm just testing and designing and throwing things in here, but, uh oh, that feels too much. I like them not to be so round. So I'm actually going to use eight and then, um three. So spacing this a little bit for my nice header and I'm going quickly, so I'm gonna kind of paced intimate this text. I've got, um, issued to date, and we're gonna build a scale in a scale to show quickly where you're at on this on this issue. Um, I think I'm going to go green green on this one, just green. And I want my my ingredient to move. Um, this way. Eso When you edit the ingredient, you can click the Phil and you'll see how it you can shift it however you want. I'm going to bring in this green one because I want a specific green. Okay, think a little bit smaller. I like to think, um, in in divisions of eight. And sometimes my brain can handle it quickly, and sometimes it can't. So what we're gonna do is now make, uh, table on, Bring this to the front. I said, table mint, a little sliding bar. So you have to think about it in layers. And I like to keep these a little bit more clean, but basically coming in and saying this is my background. This is what I want for my background. And, um then I'm going to layer on top of it. And as you build that than you group those sections, so it keeps it nice and clean. So in a space is just a little bit, um, and around the corners to 100 and make this really light and I mean, you can copy with a command C Command V, and it will make you another one if you want or just option slide. So here's our far that is progressing basically. And so what? We'll were in this green section. So I want it to be this this teal ish green so you can see you can grow these And it will keep that rounded corner that you want, um, and actually can select him and and push him in a little bit to make a little bit cleaner. It's nice. Pigment runs really fast like that. So here's some numbers. And what's nice about this is if you want to make everything kind of pens on if you're, um, designing quickly for a Nen initial design pitch or if you're building for a lot of the long haul. If you're building for the long haul, I would make everything components and and then at it as you go. So this is just showing that you can have another one, and this one is longer, so you're quickly reading these numbers. SPX this is this. How far and so all these would be able to be changed thes were set separate components. So I'm gonna drop in, um, other pieces down here. So you've got, like, a Siri's one in a series B, and then you're called action, which is were you tokens? So Ah, I think this would be better as a little bit of gray. So I'm gonna add that in here with me. Sometimes I just keep it under there so I'll have one below just to give a little sense of depth. I think I'm gonna change all these to this gray five. So and then we don't want these rounded. Looks weird. So what's nice about this is you can you can get independent corners, and when you click it, um, you can you can actually just push it down to on this one, and it will keep your your rounded corners at the top. Flatten those on and on. The end looks nicer. So we're gonna add an effect on this? Um I mean, get make sure I've got this right. Thanks. Um, do it drop shadow, but we don't want it to go. We want the blur, but we don't want it to go anywhere. Just wanted to kind of blur the background. Um, try this. So get the light grey back here. Then we'll just set are called action Kind of down below, Get it looking a little bit nicer. So this is, like, one card. And once you get it all finalized in nice and making sure everything with line going to lock this card back so it doesn't bother me when I'm moving stuff around. So Okay, what I'm gonna do is bring in the one I'm made previously to make sure that I got it right . Um and then we'll duplicate it. Okay. And so what's nice is, Well, I had ad Cem styling, so you can see you got, um, blinds that are the same background color as your initial, um, insect. And so I've added Cem like pointers to show where you're at and just to make it a little bit cleaner, fun, and some some grays and stuff like that. So if you built this correctly, you should be able to scale it pretty well. Um, for responsive nature, I, uh, and moving pretty quickly, So, uh, just Oh, I had locked the rectangle. That's what happened. So So what we're gonna do is make another card here by holding shift and option with that selection. And so this would be like card middle. I don't like to be very particular on how I named things, unless I'm trying to show something very quickly. So what we're gonna do is add change the the fill of this of this linen, your radiant, and we're going to change it to blue, and then then take this to blue and then take it to 50%. So, yeah, you get a sense quickly of like this card is is the first in the section, and what's nice is with these buttons and everything of about components Onda, this this is not a component right now, but usually is that you can just quickly click and change some of the elements to to match your your card. Okay. You can't see what I'm doing. So we've got to nice cards here. Ah, a nice layout. Um, I like to add items that would be really nice, this faras for actions and, uh, animations. So I'm gonna bring in one of these pieces I have on this other file and the one on I'm giving you guys. You see, I get it right, Totally bringing in a little bit what it is. I created a shadow that is, um, like a pop up almost where it's just really settled and has some intricate details in and just looks really interesting. So if an investor is like, Hey, um, you need to look at this. This piece, this this stock is tanking because you picked horrible. Then what you can do is bring in some interesting pieces that would slide up and you would have action on it. I am having trouble cause the other screen iss so dark that that's okay, I'm going. Just drop this down. So something like that So you can show a variety of ways of where this is. This is the initial section has some spacing available for, like, called the actions or like, hey, be careful about this on Grun with it. So then a tertiary cards pretty easy where you would just duplicate some of the items and re size as needed, but or doing gray and we have, like, our special interest rates 5. Dashboard Table Area: So we're gonna run down and, um, add add to the table section. And I've got a quick investors tablet area where we've got tabs. These air just simple tab showing which ones on and which ones can be quick. So just dropping that in just quickly to show you what? Um, but might work well for this kind of investors section. So this is the part that components comes in pretty handy, and ex D does does this pretty well. But with with some of these components, it's pretty. It's pretty exciting what you can do with this. So what I've done is I've created this table cell and you've got your your name and then, like badges of of their qualifications, anything like that and their status investments if it's signed or not, and then this is kind of a part. That's kind of fun just quickly to throw it in there. But, um, basically, this whole section is is a component, so to swap out images and you can just click it, fill it and then choose a different image. So we've got Jenna Bridges, and what we'll do is now that we've created this this table cell with with the rectangle at the bottom, which is kind of a nice divider section so you can click it and drag with option and duplicated just with figment. There seems to be a little bit more of, ah, control over certain things, especially for responsive behavior and being able to swap out images. Next is easier, but, um, when they lack, that's like that. You get that first level of excitement. You're like, Oh, this is really easy. And then you go into, like, Well, I want this component to do this and hair dropped in this This next person, this lady and her face is not build correctly something that move it to crop. It was set to fill. Remove it to crop and you can shrink it down. And you could see easily the, um, the cropping of it. All right, so we can double quick the names and name her Caylee mix Smurf in. All right. And she has a lot to badges, same badges. She is denied for some reason, and it was too high of an investment man. She has not signed. So one thing that's said in here is they have this disc opponent that has a sign featuring and all you have to do is click Um, the that she has signed it. I don't know why she had signed it in this one. Hadn't been, doesn't matter and just playing around. So, um, you can see them data wrong. Of course it's 19. So one thing you can do is really quickly change. And so, as you build these and save like this, tax is too big. The tables air pushing way too far. You can go into the component and shift. Shift the text size toe to make it work so you can keep going and change the names. Changed the people. And remember, this person does not exist dot com. These people are not really people. It's kind of scary, but cool. 6. Screen shot and finishing touches: last but not least, we can't forget what to do with our splash page. So now that we have our dashboard looking good, we've got signed in pending sections. We've got different avatars. We have our three cards with different call outs. What we want to do is get this up close to the top. Get any blue lines out of the way, do a screenshot screen grab and grab down. I think around here will work well. And so what we're gonna do is scroll back up, go to our arm boardings, flash screen, not that close. And you can remember this kind of covering was here and this wasn't there for you, but it is now. So what we do is we paste it in here into our section. If you if you need Teoh, grab the next layer, you can hit option command left bracket, and I'll push it down in Mac still learning windows keys. So now that we've got our actual dashboard that we built back in there, then you can export your on boarding splash page. So the next thing we're going to work on is prototyping. This whole thing shouldn't be hard. It all it's pretty easy 7. Prototyping: is the last part of the class, and this is going to go over prototyping. So it's pretty easy to share Sigma Files with potential clients or friends and say, Hey, I want to look at this. Check this out. Um, one thing that's nice is doing prototyping. We'll show you how to quit. Click through your Web app. So what I'm going to do is turn off any of these layout grids just so we can get a better look at it. But basically, what want to do is look at the hot spots, the action spots and, um, drag actions. So when you click a button, it will go in sequential order to where you want it to go. Um, so I'm gonna show you really quickly right now you're on the design tab. If you go to prototype, you can quickly see I've already got some, uh, links connected. So if you take a look at this is really important, the little triangle at the start, this could be dragged. And this is your action or to the start area. So you wanted to start on your splash page. So we want to get your co uh the button to link. And now that you notice when you select an area or a button, this would be the full hot spot You can click down to the button itself and do that if you want. If I'm just going quick for you, but you click hold and drag and snap it to the page that you want. And so this, for instance, this get your coat will go to the sign up for an account. So what we're going to do is keep going and we're gonna just, like, keep linking and, um, and get that movement and getting a sense of, Hey, you're going through this app and making it almost looks like it's working. So I'm gonna skip this other page. I just was messing around with that. So we're going to whatever. And as you keep going and so I'll zoom out and you can see that we've got those on boarding screens linked. So now we want this one, so you have to zoom out pretty far or shift your pages down. But what we'll do is just like that one and you ready to go so you can preview it by clicking this present I item or icon. Sorry. And once it loads, it will show you the first screen, which is nice. Get your co flop through Flop through. You can do different animations, all sorts of things. And as you keep going, you go all the way through the web app and it really gets a sense of Hey, I've made it to the dashboard. So thanks for watching. And I'd love to get feedback from this class, so please follow me. And thanks again for jumping in.