UI Design Basics: Design and Prototype Your First Mobile App | Ljubomir Bardžić | Skillshare

UI Design Basics: Design and Prototype Your First Mobile App

Ljubomir Bardžić, UI/UX Designer • Adobe Certified Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (1h 39m)
    • 1. Introdcution

      1:06
    • 2. Platforms

      1:32
    • 3. Planning

      2:04
    • 4. Software Choice

      0:39
    • 5. Adobe XD Workspace

      4:06
    • 6. Typography

      3:20
    • 7. Colors

      7:02
    • 8. Getting Started

      5:10
    • 9. Empty State

      6:45
    • 10. Empty State Illustration

      8:16
    • 11. Inputs

      7:39
    • 12. Input States

      4:41
    • 13. Designing The Main Screen

      7:37
    • 14. Main Screen: Creating Lists

      10:34
    • 15. Displaying Info

      10:24
    • 16. Prototyping

      4:03
    • 17. Sharing Your Work

      2:29
    • 18. Adapting To Different Screens

      8:41
    • 19. Assignment

      1:54
    • 20. Resources

      1:04
    • 21. Final Thoughts

      0:19
17 students are watching this class

About This Class

In this class I’m going to help you design your very first mobile app. We are going to do that by completing the class project together. As we go through the class I’m going to share with you the methods that I use to create the layouts, how I choose and manage fonts and colors, as well as some other tips and tricks. After we complete the design I will show you how to turn your designs into a prototype.

Once we have completed everything I’ll give you an assignment which will let you apply what you learned and add personal touch to it.

You don’t need any prior knowledge on this topic to follow this class, as I’m also going to teach how to use the software that I use to design apps.

By the end of this class you are going to have a solid foundation so you can start designing more apps and make your ideas become reality.

Transcripts

1. Introdcution: Hi. Welcome to my class when you had designed basics. My name is Gruber, MIT, and I'm an independent user interface and user experience designer, as well as an adobe certified expert. For the last five years, I've been designing in the faces and crafting unique experiences for Mother laps in this class going to help you design your very first app. We're gonna do that by going to reach step of the process together and as we go along, maturity, the method that I used to create layouts tell you how I manage fonts and colors and give you some other tips and tricks. After we were done with the design, I will teach you how to take what you made and turn it into an interactive prototypes. Once we have completed everything, I'll give you an assignment so you can go ahead and apply what he's learned. You don't need any prior knowledge to follow this class, but I'm also going to show you how to use the software that I use to design APS. By the end of this class, you should have it solid foundations who can go ahead and design more APS on your own. So let's get started 2. Platforms: before I start designing. There are a few things when it alone, and the 1st 1 of those things is what platforms are we designing for at this moment? Toe platforms, car Pretty much all of mobile devices, and those platforms are android and IOS. As a designer, you should get acquainted with both of these platforms, and I'll talk about ways to do that at the end of this class. But right now, there is one thing I want to learn that will help me out the most when you're just starting out. And that is what screen resolution you need to be designing for. In case of Android, put restaurant on a lot of different devices from low end ones all the way to flagships. Screens don't just wear in size, but also in pixel density, and your designs need to accommodate all of these greens. The question is, how do you do that? It's actually very simple. Android users what are called dips or density independent pixels and at the base resolution off 3 66 Worry one dip is equal to one pixel, so all we need to do is designing wraps. This resolution and the system will scandalous gaming based on what phone it's running on. It's a similar story for IOS, where the base resolution is 3 75 by 6 67 Even though the screen resolution of five on 67 and eight is double that, you don't need to remember all these numbers as later going to show you a very easy way toe pick an appropriate screen resolution for it to device. 3. Planning: The first thing we need to figure out is what screens we need to design might get this list from a client to a team member. But I want to show you what to do when you don't get it. For example, when you're designing your own app, one method that could help you the most is called task analysis. To perform a task analysis, just take one high level task and break it down into sub tasks. In our case, the main goal off our user is to view details about the certain transaction. Now all we need to do is ask yourselves. What steps does he need to take to get there? Let's get started First, he needs to open the APP. Now our APP will have option toe show in for for more than one card. And that means the next step for our user is to pick a card. After that, he will find the transaction he's interested in and then selected to view transaction info . Visually, the list of tasks are user performs in most cases, but sometimes and especially the first time, you will also need to add a new card toe viewing for for it. This would be simple test analysis. We cannot use it to determine what screens we need to design. First stuff will need the screen that will show the list of transactions, and we call that our main screen. It will be a good idea to also show what quality selected somewhere on the same screen as we found out. The first time user uses are appealing away to add the new card. So we need a a new card screen in our list. And finally, we need one more screen relaxing view details of other transaction, and we'll call it transaction info. Now we can at least of our screens before we move forward. I want to give you an advice and that this, when designing an app, always focus on the task that the user needs to perform. This will make it much easier to come up with solutions that provide real reality reserve 4. Software Choice: there in this class, we're going to use Adobe X'd. It's made by the same company that makes for the shop, and it's aimed specifically at user interface and user experience design. It runs on both Windows and Mac, and the great thing about it is that it is completely free. There is a paid version did as a couple of extra features, but everything you need to design an app is included for free. There's some other options that are pretty popular, including further shop and sketch, but I would recommend that you take with Adobe X'd. The link will be down in the perfect description, so go ahead and install it before moving to the next lesson. 5. Adobe XD Workspace: once you open Adobe X deal degraded with the screen, The section that's more most important to us is this one right here at the top. You've got iPhone acts iPhone 678 plus 678 I from five. An android mobile. Let's, for example, start with iPhone X. Okay, so now we're in the main. Don't be eggs. The workspace first, up here at the top, we have this cam burger menu. They told all your usual file management options. Like new, open, safe, save us export. And so on. Next to it, we have the design and pearl type taps. For now, we're gonna stay in the design workspace, and later I'm gonna teach you how to use the prototype tool. Seen will be X'd Next. Here on the left. We have the tools panel, including all the tools you need to design an app. Those are select rectangle, Ellipse line, Ben, text art board, and some tools down at the bottom. There. Two more icons that open two panels those air assets panel and layers panel. We're gonna talk about these two in just a minute. On the opposite side, here on the right. We have the properties panel. Once you select an object, it will show and traded all of his properties, for example, Now we have the our board selected so we can edit it with height changes, color and alder some other specific options. So here in the middle, we care. I mean work area within it is a single art board. Adobe eggs. The uses our boards to organize elements. Any chart board represents a single screen. So for our rap, we need four screens. So let's have three more. We'll grab the are porter here on the left and click three more times. It will add. Three are boards. They're the same size as the 1st 1 You wanted to add more about that different size. We could pick any other device here on the right. Okay, so now that we care about the dollar words, well, it's the last thing we need to learn is how to navigate the work area. You could use the zoom tool, but there is a better way. So to navigate the world carrier I like to parties don't halt. Or that would be our persistence and Mac, and then use the scroll wheel off my mouth to some meaning out. The great thing about this is that it zooms where your cursor is pointed. So if I put it right here on the first starboard, that is where it will zoom. And if I zoom out, place the cursor on the fort, are bored and zoom in there. I'm right where I want to be so you can use This is the only way to navigate. But there is another thing that will come in were useful and that is planning the pan across the screen in x'd just call down the space bar and then click and drag. You can also use the scroll wheel to go up and down. Or if you hold the shift, it will go left. Right. Okay, so now that we have made herself familiar with eggs workspace ready to move on 6. Typography: topography is very important when designing a nap as text is the main way, information is displayed within and face. You can use a lot of different funds to give her up different look, but you got to make sure that it is easy to read. So it's a good idea to write any 100 France in most cases and the safest way to go issues, systems, default funds and for Android, that is a roboto. And for IOS, that is San Francisco. Let me show. We have to get them onto your computer so you can use them in our designs. And I'm going to show you sure to get the funds that will be using today onto your computer for a roboto. Goto fonts that google dot com and Final below. It should be first on the list. After that, just click this plus I come and it will be at a tourist. Now open this and click on this don't like After that, you'll have toe unpack this somewhere on the computer so you can goto there Stop, for example, and after that, just select all of the files. All right, quick and click on install now, I already have these funds, but for you it will install them right away. After I installed the front, we can go ahead and the lead of piles so they don't cause closer on your desktop. Now for San Francisco, you'll need to goto developer the chapel, not calm slush funds and click on download San Francisco funds. Stop Note that it will. Don't know is that DMG file. So on windows, you'll need some suffer that can open the M J files. I use seven zip, which is completely free. So you go ahead. Right. Click it seven Zip. Open our home. Now open this fuller. You will goto sf pro And now copy all of these Thursday Stop and then repeat the same process as with Rebollo. So by now, your schedule, the fonts so we can move forward to help you get started. I've included some of the character styles in the resource file that you can find in the project description. So go ahead, download it and open this file in the top left to find a section called typography. So go ahead and copy the starboard into your main file. And to be able to easily use all of these character styles, select them going to the assets panel and click this little plus icon, and they will be out of your access panel under character styles. 7. Colors: the colors give life to your design and confused to draw attention to specific elements as well as create visual hierarchy. Samos with funds. It's very important that the color stay consistent across Europe, so let's create a system to help us with that. If we go into a resource file, we'll find a section title colors and the Here you can see the color system that I use for pretty much all of my projects. The first part, our primary colors. And these are the colors that maker user interface interesting and give it life, and that this party's very flexible and changes from project to project. So a Z follow me long. You can go ahead and change these colors and, as a matter of fact, that the end of the project that will be part of your your assignment. But let's talk about these two sections and these sections did define what color we will use for our text icons onda similar items. So on a light background, we use black with different levels off the best. So our primaries, 87% secondaries, 54% disabled is 3% and dividers are 12% so based on the importance we use one of these three. We used dividers for lines. These three are reserved for tech soup. If it's important, we use primary, it's not so important, were secondary and it's if it's in a state where it can be used in the US is disabled rears 38%. Now the same model applies for the dark background on. The only difference is is that we use white with different levels off pastie and levels very a bit. Here we have 100% 70% 30% in the divider serve the same 12% on the reason why we use black and white with certain levels off a pass city is toe maintain the contrast with the background. So, for example, if I grab this dark background and change it to, ah, blue color, everything will still be still be available and no matter how retained the background as long as it's dark and by the way, full color is considered a dark background. In our case, as long as the background is dark, these values will work. And let me show you why we're using, uh, different level cells of black is big also to maintain the contrast. So let's say, for example, we move our background so it's closer to this color. Let's grab a picker and big discolor exactly and see what will happen. Although we picked that exact same color, it doesn't blend in as it the ads on top of the background. Now that you know why we use this system, let's copy it. And third file, go ahead and add it to our Facets panel. I like to start with Blackstone. Switch the lights, just grab each square and click on the plus. I come now here. White moved. I don't know why, but you can just rearrange items. And now, let's said, are main color and are accent color. So let's rename our colors so we can stay better organized. And if we open this project somewhere in the future, will no, what? We were doing better. I call this based on the background. So next toe black site, right light as they're part of a life theme light background. So don't let that confusing if you want. You can switch that around and for the rights will actually very dark because there for a dark team with the dark background and now only dividers dark left on. And now we have our colors ready to be used in the interface. We can go ahead, then delete this as well as this as we have everything in the assets panel and next will be ready to start working. 8. Getting Started: Okay. So we can finally get started on designing a rap. The first screen we're going to design is our main screen. And to be more exact, it's empty state when designing the screen. I like to start by taking care of the system elements and the navigation. So you can just go ahead and grab all the elements from a resource file that's provided in the project description. Go ahead, select all of dissidents as we're gonna need them. Aziz, we work on the APP. Go ahead and copy them. Go back to our main file and pays them. You can move them summer, so they're not in the way like this. And let's start with navigation. We're gonna grab this one and added here. No, The next thing we need is ah, status. Bert, I'm gonna grab this white one now. It basted right in place. But if it didn't, for example, it it was off like this. You can, uh, the stake it and line it manually. Or also you can use the A line tools at the top. I'm casings were designing for iPhone X. There is one thing the 2012 and that is the home indicator it serves. The same purpose is that was a physical home button on other iPhones. So well, it's just added there, and we can start working for the The first thing we're gonna need to do is change the color of far for a navigation. So let's go yet selected. You gonna notice right now that when you click on it, it selects there everything. That's because it's in a group you can see in the Layers panel. It's a group called Navigation Bar Dark. And to get to the background, you can open it and select it manually. But there is also one more thing you can go and that is, hold control and click on it. This is a shortcut for direct select. You can select an object that's within a group directly, and another way to do this is toe double click on items. As you double click, you go deeper into the group. So you know this. We just went one level deep. Now if I double click again, we're down another level. Now that we heal selected this, you can find our main color here in the assets panel. Right click on it and a place feel. Okay, so now we have our navigation colored in the way we want it. Let's change somewhere. Thinks a so this will be our main screen. We don't need a bag. Botanists. There is nowhere back to go through within a rap. So let's just select it again within a group. So we double click it toe gettinto the group and then deleted Now that we should delivered it, we can change the title toe my cards and we can align it on the left side. Since there isn't back battle, we can use the title to fill the space. Since we wanted to stay on this access as we move it, we're gonna hold down shift and place it about here. And now when you wanna align items you can use what are called smart guides and toe make smart guides appear. You select an object and then hold down old or that would be option on Mac. And as you have over other items, it will tell you how far apart they are. So we wanna do 16 from the left touch. So let's more our title go pixels. And now we're at 16 pixels from the edge. OK, since this is the title of her main screen, we can make it a little more permanent and make it a bit bigger. So let's use, for example, this 22 points character style and we can go with Seibold is a rate. Okay, so that looks pretty nice and we can move forward and design other elements. 9. Empty State: Since this is our empty state, the first thing we need to do so is at the message that lets the user know that there is no win for because he doesn't have any card. You grab the textile and drag a box, and we can write something like, Don't worry. If you start typing in your text doesn't appear. It may be just the set white. So go ahead. The type of another changes color and return back to time. Thing here, will. We can say transactions will appear once you have have that, uh, the card. Okay, we'll make it aligned to the center, and we're gonna use, uh, different character style. So let's go. With 17 points in regular rate, let's make this box smaller and, well, that's make it a little narrower. So we have our message. Okay, maybe black is a bit strong, so we're gonna go to secondary light so you can right click. When a plane color, you can right click and apply us fill, or you can just double click the color, and it will change the color. So you have more than one option. We can again use the line tools to lend to the middle and to the center, and the only thing that we need is a way to let the user at the card. So we'll place an ad button writing here. But before we do that, I just wanna let you know that these plus icon at the top can also be used to add cards. But with the actions like these were, it's the pretty much only action user could take. So is the most important action on the screen. It's good to keep it somewhere close to the bottom, since debt area of the screen is much is your to reach, especially on your devices that are a lot taller and use aspirations like 18 by nine and so on. There is no problem with having two buttons that do the same same thing, since one will be very prominent, and there is just a small like and so let's start with are walking. We're gonna take the rectangle tool and draw a rectangle. I'm not too worried about the size when I draw it, since we'll adjust it right now, let's do again 16 pixels from the left, and now we only need to do is at nine more pixels to it. So it's so now it's 16 pixels away from each side, and we're gonna make it a little shorter. So there are two ways to ah resize objects. You can grab these little handles, or you can also use the properties panel where you can type in or use keyboard arrows. When using keyboard, there was still downshift Togo in increments of 10 and just use keeper. There's without anything to increments off one. So we will go 48 pixels for hype. Let's remove the border because we don't want that. And let's go to remain color and apply to spill. Okay, to make this shape look a little bit nicer, we're gonna around its corners by four pixels. So just like that, and after that, let's place it right here. A pixels from the from the communicator and ah, we need to add text. Remember her first time we dragged the box present screen to create text? Well, there is another option toe. Create a text layer, and that is by just clicking anywhere on the screen. And the difference is is that this will create a point type and The other version is area type, so a point type you can keep typing. It will stay on the same line and just go on while the area type will wrap around within its box. You can change this later if you want to, but for the button we only need one line of text, So use point type. I like to use all uppercase letters for buttons, so let's type at cart. It's a right to the center. Now let's make it something points in size and we can use semi bolas a rape and apply right us Phil. Okay, No, you can select both of these by the drugging selection box across them or by selecting the text and then holding shift. Also, select the shape and go and press control or command G to make a group. You can see it's a group now, so let's go back. Those two selected command G or Control G and it's a group. You can go here, then rename it. Give it the name like add button. I don't usually name all my groups. Is there usually aren't that many within within our port, but you can go ahead and do that if you like to stay organized 10. Empty State Illustration: Technically, we can call this screen completed, but there is a way to make it look a lot more interesting. And, ah, common way toe design on interstate screen is toe include them. Illustration toe. Make it look more fun and more interesting to the user. Since we're asking the user toward the credit card will illustrate one again. Take the rectangle toe drug rectangle. I'll make it 100 and 44 maybe by 88. It looks nice. We don't need the border. Let's use the lightest straight of great through it and let's around the corners. You can use the same value as before, which is four pixels. Okay, so now let's. Once we have the main shape, we can add more details to make it look like a credit card. So let's do the backside of a credit card. So let's draw magnetic stripe again. We'll remove the border, and we can use the same color. But this day your capacity they'll layer on top of each other and create a new shape. So this looks nice on now on the back of a credit card, dairies, a little shiny sticker or hologram on what it's called. I'm not sure, but I will add it right here and no, we wanna, uh, around the corners, as much responsible. So you can do that by looking at what side is shorter. In our case, the shape is smaller in height, so we can just type half of the value. So then any fool around those, they're just completely They're so also another way. And that is to grab these little dots, the image corner and just drag them until it can drive them no more. So now here we are. Slow sticker hologram. Let's make you the same color. And the last thing we're going to add is the field where you're signature usually goes on the card. So maybe this big, uh, and again we're gonna hold on, Ault. So we see how far away it is from our elements, and we're gonna make some rearrangements. We're gonna bring this down by two. So it's told from the top, bring down by one. So it's six from this 61 This. So it's, uh, six pixels away from this sense experience away from this shape and well, Bigs, let's say this color. And now we have something that looks like a credit card. So again, so it doesn't get done. Group. Let's go ahead and select all of them and press control G. It's going toe the layers panel rename it this credit card cannot. Phyllis creation. Okay, so that already looks a lot nicer. And I just wanna at one more element toe, I'd even more interest to this screen. So what we're gonna do is we're gonna grab the ellipse stole find the center of this card. The smart guides will tell you where that is. And once you're there, hold on all and shift and just drag a circle. The reason we're holding out Ault. So we draw circle from the center. So for let go it. This is what it will look like. But when I called it drop from the center and we're holding shift because we wanted to be a perfect circle. So if I let go off shift, it can go in any shape on if like presses back again, it will remain a perfect circle. So let's do something like this. Let's remove the Phil. And now let's play with the border so will make it our lightest shade of great a plate as border. Let's increase the size to, let's say, three pixels. And now I'm not the biggest fan off this being a solid line. So let's, uh, let's make it dashed. Let's also three pixels. So we have the dash and the gap. The dash is how long our line is, and then we can also adjust the gaps between them. Ah, okay. And we're going to use deception right here, toe around the the end and maybe addressed the gap a little more. So we don't have something like this at the cupboard there. Too close. So now that looks pretty nice. You can change it if you want to. You can play and maybe make it bigger. 14 on that looks nice. So let's group everything. We'll select mode illustration in the circle group it. We can call it maybe illustration plus circle. No, let's just align everything. Make sure this center and we'll place this maybe like this, uh, really no pixels away on. Make sure everything is aligned and we can see so far this from each side. So let's bring it down a little. It's that. Okay, So that looks pretty nice. And we made her screen a lot more interesting. So let me just go back on this. Same. I think it's better like this. Okay, so we have Ah, really nice looking, empty state screen. So go ahead, save your file so that you don't look, It's progress. And we're gonna go on and design are odd card screen next. 11. Inputs: okay, so we can start working on our add new card screen again. We're going to start with our navigation this time. We're gonna grow up this large title navigation bar and just based it people based in place . If it doesn't, you can always align it. We're gonna grab it, change the color to our main color civil has an appliance filled, and again, we need to add the status bar as well as the home either. So since we'll use them for each screen, a good idea is to go into the assets panel and Adam right here at the bottom, into the symbols. Once you added a night, um, into the symbols panel, you can pull it right from it and onto your screen. And another thing that is specific to assembles is that you can control them from the assets panel on uh, if you change one of them, All of them were changed. So, for example, if we change this 1st 1 and change its color, all of them will change colors. Since we'll be adding a new card, these two actions cancel and then work for us so we don't have to change them but we'll change our title, so we'll call this new card and we can start working on the contents of this screen. So before we start working, I just want to briefly talk about input on mobile devices. Unlike on a computer where you have, ah, large keyboard animals input mobile devices much harder, since the keyboard is one screen, a much smaller. So when you're designing and screen with a lot of input fields, you would want to make sure that the user has easy time filling them all out. There are a few ways to do that, and I'll talk about them as we ghost. Let's first start by creating on empty textiles could grab the rectangle tool and draw one . But we're gonna do something different. We're going to grab our at card button. Copy it on, turn your screen on. Now we're gonna group it toe that hold control shift and G so we can remove the text. And now, which is gonna remove the field at border, use our divider color for this go shit and applies border. And now we have an empty text field, and the reason we do this is to keep the look of the app consistent. So we used the exactly same shape. We re used it and it looks very consistent. It's always a good idea to keep things looking consistent within Europe. Eso no matter what screen the use result, he knows what type he is in for stuff. Let's look at this film. It's AM theaters knowing for excited so no one can possibly know what it needs to be filled with. So let's give it a label at the top and here will say that we need the car number. We'll make it smaller use, Ah, points semi bold and we're gonna go and the line it felt points from the from top of the field. And we're gonna insert by, Let's say, eight more pixels. So it's 24 away from the edge instead of 16. Okay, so now we have our label. We can apply secondary as its color. What else can be Noto make? Make a parent what? What needs to be inserted into these fields? We can place what's called a placeholder, and that's ah, text. That, in a way represents the the expected input. For example, the car number has 16 digits divided into four groups. So we're gonna years a placeholder that looks like this we'll use for zeros and that should interest paste them once type for them and will use 17 points and used disabled as a color . You know, it's completely clear once the user looks at his card, you'll know exactly what number he needs to go here. We have our first field completed, so let's go ahead and wrap it. Command G 24 pixels from top and let's go ahead, then create more fields now wouldn't be very smart to go ahead and drove one of these. Each time we just go and copies by holding now Ault and then clicking and dragging, Let's say right here, 16 pixels below. And the next thing we need to know is when the card expires and that is displayed on the cart was four numbers, two numbers for the month and two numbers for the year. So our place Fuller will look like this month, month, year, years since its this will only be four digits, it would be a waste of space Barretto occupy. Entire also will make it smaller. Something like this, and we're gonna copy it here and use that for see very cold. That's the one that's on the back of the card. And since that is three digits since, the user might not know what CTV is, if he's using a nap like this for the first time. So let's make it easier for him. We'll use a placeholder that looks like this. Let's address three digits. So now the user knows to look for ah, number on his card. It's credits, and this is 16 pixels from the side, 16 pixels from the top and 15 pixels from this side. So let's make this one pixel never and no everything. Alliance perfect. The last thing we need to do is had one more field where the user will insert the card holder. So here we expect a full name so we can use that as a placeholder. And now we have all of the fields that we need. The only thing left to add is done bucking. We have one at the top. That's perfectly fine. But as we talked before, the bottom of the screen is much easier to read, so we're just gonna copy this one. That's what it right here, Bill over fields entrees the text So dumb. And we share our form complete and a new card screen complete. 12. Input States: we could move on to the next screen, but they want to show you how to create the states for all the input fields. So what I'm talking about Well, go ahead and grab the are Bert holdout to copy it. And now we're gonna show how these each of these feels look, for example, when they're filled when they're being filled, when the input is right, when the empathy is wrong. So let's go ahead and start with card number even before the user clicks the done button the app contract of the in parties in the proper format. So, for example, it contract give the card number has 16 digits. So, for example, let's say that is correct. So let's make up a number. So some telling this, uh, what, the 1234 And since it is now filled, we'll change the color to our problem. Primary color. And since this is corrected, this has 60 numbers. We can show the user that the empathy is correct, but applying this green color of their border. So now the user knows that the input is right. Let's want to the expiration date field on this field will show what the feel needs to look like while the user is typing it. So the first thing we can add is typing the killer. So just grab the line tool and draw a straight line to draw a straight line. Hold shift and let's do uh, 20 pixels will apply our main color us the border. We can round off the address or the ends and let's make it two pixels. So now just line it where it feels right, and that's what it now we can also alter the color of the edge toe. Make it apparent that this is the active field since world the using green. For the correct, we can use a darker shade of great something with this on that makes it stand up. Okay, so there is one more state that the field can be in it, and that is that the input is wrong. For example, in CV, we're looking for two digits. So, for example, if the user types to seven, that is not the proper inputs. So will change the color that black border we can change. So something like Red let the user know that the input is wrong. It's also a good idea to add the message that says something like, See Really needs to be three digits. Let's make it smaller. And we can also use the I say the red Online it like that. Maybe eight pixels on. Now we'll move this down so everything fits. Okay. One thing that we forgot that is for the active field. We need a keyboard and let's talk about death for a second. Let's grab this one. Align it to the bottom we talked about. So it's very important toe. Make it easy for the user toe input, the data that we need, So one of the ways to do that is to give him on appropriate keyboard. So in this case, since we need the numbers, there is no letter seen this input. We can give the user the numeric keyboard straight race, that of giving him the regular keyboard and sharing him changed toe the American manually. It's, ah, small things that make the difference in designing enough. So now we have ah completed screen on Let's call this ATM card states 13. Designing The Main Screen: Okay, so we're ready to start working on the main screen this time. We're not gonna copy the navigation from our selection right here. And the reason why is that? Because we already designed the navigation for the screen to be more exact for its state. So we're gonna were at that and copy it. We already have the indicator so we can start working. The first thing is wrapped will be able to show transactions for more than one card we need to accommodate. That s so the first thing we need to do is show the card in for the top. We're going to make it a really interesting and design a credit card right here to show therefore that we need Now this is a group, and we need these elements to be easy to move. So we're gonna and grope it. Control shift, Jeep. Now it's separate elements on I don't know why this background is and I grew up Soul. Let's remove it again. Let's grab the rectangle tool and let's do something like ah, 3 20 by 18 By the way, On easy shortcuts toe get back toe. The selection tool is V so next will remove the border. Let's around the just by for pixels in what will actually, in this case breaker role and do six. Let's position it, uh, like right here, that looks great. And let's start adding them for the first thing that we're gonna show is the balance or how much money user has discard. So let's stay that selected and double click on this character style, and we're gonna reduce its way. Toe what's a medium? And let's place it right here. 14 from the left and 48 from the top. Okay, so the next thing we need to show is the card numbers. For example. Right here we can show the full card numbers user is in putting it. So here's to track if it's correct. But this is a screen that someone else might view what the user is using the phone. So it's common practice to quite all the numbers except the last four, so the user can use the last four numbers toe. Identify the card. So what we're gonna do is add dots instead of numbers. You can draw them a circles, or you can type them by holding Ault and typing 01 for nine and a that will appear. So once you hear one, you can carpet so there to grab the stool and copy them sooner here for no press space, all right, based for more again space and based for more and now at 123 as our last four numbers. Now let's make it smaller. Let's do 16 points. Let's use disabled like was there. Fill color will move it right here and now they look so close together on ah riel card. These numbers are spaced apart. More so. Let's use this character spacing option on. Give them a spacing. Let's say 100. We can do even more like 1 50 that that looks great. Now we need to add the cardholder's name as well as the expiration. Its so for the call cardholder's name. Just user. Full name. Let's make it smaller, semi bold again. A. We're gonna use the same color as before. And let's line this 20 pixels from the bottom 24 from the left and for the expiration date triggered hold down ALD copies. Make sure it's aligned will align to the right and let's see this card expires in September off 2000 and 21. Let's lined up again. 24 pixels from the right and funny from the bottom. And member just gonna select all of these. So hold shift, click on all of them and group them. We can call this group credit card, and we have completed what should be the next. As I said, our APP has an option toe. Show him for for more than one card. So we need a way for user toe switch between cards. So we're gonna use a very simple, simple solution. And that is swiping left right to illustrate that which is gonna grab this? I'm holding control and clicking. So for direct select, then copying it and basting, it's after that. I'm gonna. But right here make it 160 pixels stall all I need to the center. And so it doesn't cause any inconvenience right here. We're gonna make it a bit smaller, like 40 pixels, right? And we're going to copy the one right here. And so now user could change the card by just swiping left to right. Since these are interactive, let's give them the secondary light color, and that will be it. Okay. We need to add one more thing to let the user what car they have selected. Since users can have, like, maybe seven different cards and he might not know he should go left or go right. We're gonna add small indicators. We're gonna create a six pixel that and then copied We can do. Maybe it can You win with five to illustrate why we're using them. So and then we're gonna select for just host shift and click on them, and we're gonna give them the disabled. What color and Senator it. So the user knows that he has one guard on the left he's doing currently the second guard. And he has three more to the right. It's very important toe. Let the user know where he is. We can more easily navigate to Europe. We just Well, it's actually malign. Great. So we can move on 14. Main Screen: Creating Lists: So the next thing we need to do is add a list of transactions were going to start by adding small title here will say transaction should the line complex. We place it right here. 16. 24. Well, actually use the same color to match it. So this and this looks the same track the 13. Simon go 13 semi bold. Okay, so just made the color secondary light. And now there are a few pieces of info we need to show about the transaction. So the 1st 1 is the date. The 2nd 1 is the name of the person or the company we made a transaction with. And we need to show the state benefits completed or pending and last. We need to show the amount of Let's start with our date. For that, we're gonna grow Draw Square called it. I'm holding shit. So it's ah, perfect. Swear on that rectangle. So 36 by 36 will remove the border. Go to remain color. Apply us, Phil. Well, around the corners again using the four pixels. Give everything consistent, will align it right here. That's great. And we're gonna fail. For example, 21st Uh, to the center. Make it bigger. He was right off August, and this needs to be a lot smaller. So let's don't maybe nine. And let's fight from the bottom. And for from the tops, that looks pretty good. We're gonna grab that and group it. So the next thing we need to go, is that the name? So for now, we can just take clean Case of the text is right. So that's where you can see the war it name for debt. We'll make it 16 points and you can is the space below toe, right. The state, the transaction, in this case, I will say completed. Make sure both of these are aligned to the left. There will be important book later. And let's change the color of this too disabled. The only thing that we need to do is at the amount. So just write down any amount, make it 13.7 bolt, and let's use the main color. Now make sure it lands to the right. The text lines to the right, right here, and then put it 16 pixels away from the edge. Grab Everything okay? Just so just for you, I'm gonna make a mistake intentionally. If I grab everything like this and ah, line it the story line, uh, to make sure that doesn't happen, you can grab them and group them. So this way the groups align instead of the each independent element. So let's make sure everything is the line. That's great. Now we can group it and we have our first transaction. We need to make more of them one way to do it. It's toe click, OK, and go ahead and carpet and make a lot of copies. But there is a much faster rate to do it in Adobe X'd, and that is using repeat grades here at the top. In the Properties panel, you can activate the repeat grade and this green line. We'll show around the group and you have these two channels we can draw either to the right or down. We're gonna drop down, and what it will do is create copies or far group. It can make copies of different elements. For example, if we activate the repeat grid on these texts, it will make copies of that text. Right now. These look pretty good, but let's had something to them So it's easier toe. Look through the list and find what you want. So what we'll do this is spacing between the limits in in the repeat. Great. You can just that. So let's go ahead. Click into her group. DoubleClick. Use the line. Cool. Put it right here. A smart guide will show you that your properly lined grow line again. Whole shift to make sure it's straight and release it. Now we're just gonna adjust. The position of this land will make it 16 pixels from here. And as the border will apply divider slight as that is the color that should be used for lines. Now, that is 16 pixels from this text. You make sure that the spacing between each copies also 16. Okay, so it's now a bit easier toe transactions. Right now, this it wouldn't be a problem that we're not using any real data. But if you wanna make your designs true life, you can use some company names for examples and change the dates. But you don't have to type them each time and type them individually. I'm gonna show you a very easy way to take advantage of the refit bread toe ad really awful into this into this design. So we're gonna switch to our resource file and find the repeat great text section and what you want to do his first Let's grab this first column, select all of it carpet and open an editor that can edit a simple text like no pad. Know that this won't work with text that he's got for my thing, like a reward or something like that. So you're something like no pet. That's very simple. And go ahead and save this and we'll call it. Ah, transaction dates. Save it. Now, go ahead and open. You know, that stopped. And right here we have the transaction. They dot txt file. What we're gonna do is grab that and regulator this number and what it will do, it will distribute this the list that we made across our repeat grade. Let's do that for our other values. So go ahead, toe resource file again. Copy this list. Create on your file. Save it, call it transaction transaction names so it saved. And let's go ahead then. Great. One more file and go heaven. Save it and call it transaction amounts. You can actually call it whatever you like, that our files right here were gonna grab names and drop it occurs the name. So now we have some companies like our pork honorable Netflix adobe. So now let's also dropped demands. So we made the mistake. This text is line to the left instead of right. So let's change that before we had the text. So line it to the right and it will change in all of the copies and just repeat the process so we can grab the transactions. Time dropped right here. So now everything lines perfectly so we could call that screen finished. But we mentioned that the started We also need transactions that human being completed. Yet toward that ERP endings. We could help them right here in this list. But it's a good idea. Toe, give them a separate list. So we're gonna do something like this. We'll call this completed transactions. We'll move everything down, and then we're gonna grab this group just going to the grip. Selective copy based movement up growth. This title will dull more with the top. It's 20 pixels away from this more Everything Okay, so it's right in place and will change this tape toe spending. We can change, the amount doesn't matter, and this case will use color toe differentiate these pending transactions for mothers. So we're going to use their accent color and we thought a place filled. So now we have that in a place that's really is it to view? So let's group that and group this we have completed our main screen. 15. Displaying Info: the last queen we need to completely is the transactions. Info. First off, let's grab this navigation right here. Copy it. Grab the status bar from the symbols panel. Align it. We're gonna go ahead and make it their main color. Now we can use the back button. So parent title means, uh, shows what screen you'll go to if you press the back button. In our case, that's my cards. And it's ah really useful feature, because less than usual where they are. And in this case, we're not going to need the title. You'll see why in a minute again, let's on group. This can go right clicking on group or you can't the shortcut shift control Jeep. And again, we're gonna drag the South like that and we're gonna drag. Let's big, for example, Netflix. Um, copy it right here. So we're gonna place it on top of this. So some things my not divisible like this. So let's change its color white. And here we're gonna inverse the colors. The text will become green and the square will need toe become white. Were done with that. And for the text. Let's since we're going to use character cells and they're going to change the color of the text. Let's first, uh, applied Them, for example, will use 28 points for this. And for this week in your 17 like our primary color toe the title for two names, right toe our state. We can apply secondary. What more of these over here. And let's increase the size of this. Make sure it's aligned properly to the edge. And we're gonna press this little luck. I can't toe lock the aspect ratio on we can make it. For example, 56 My 56. So let's check. Okay, these are actually pretty nice. Let's make this just a bit bigger. Let's align them when you enlarge text like this can happen. Sometimes that no longer alliance to the red. So the numbers of the coordinates are earned whole numbers. So what you do is go ahead, select items you want a line and right, click them and click on a line to pick. So great. Now everything goes back to normal, and you can place them where every wish. So that's about right. Now. Let's land this to the top 24 and the land just took a bottom, and now we're gonna grope them. Now let's take care of our amount. It most large enough for the list. But now it's a big car to see compared to all of the other bigger elements. So let's make it bigger, like 17 semi bold making white. And to make you a bit more permanent will give it sort of frame. So let's do, like, 60. Okay, Well, uh, draw this rectangle around it by four. Drop. It's the best. They are used disabled are color and move it to the back. We're gonna line this right here. We can do, Let's say, 10 pixels from each sites. We'll make it. One more. We're just gonna grow this, align it the edge. And now grab everything. A line into the center of each other grouped them. And now let's determine how we want plays them. Let's do 24 away from the navigation on, and we can do also 24 from the bottom. Actually, let's increase this. So let's go. 28th of the bottom, and that looks good. We have completed the top section off our transaction info screen. Okay, so now that we hear made our main aim for really prominent. We're goingto go ahead and display all other in full. This would be a list off, a lot of different name for about the transaction and in a real project, the client would provide you with all the requirements. Since this is very technical and shouldn't be determined by the designer, you will be in formless what items you need to include. So we can use a technique that we learned earlier as right here we have all the items that need to be included in the list. Let's create two more text files was gonna grab this great. A new file carpet save it does will call it left. We'll see why in a minute and let's go the southern one. Open that Snoehvit and call it right. That's open. Adobe X'd and let's add text. Let's call it left naked. 17 points regular. Make it second. Right, Klein, This right here, 16 from the side. Call this right. Align it. The text of the right aligning relative to the edge. Make sure these air center group them so control g and make a repeal grid. And now we're just gonna grab our text files drop left the left drop right to the right. Then we have our list. There is one thing that we can do to make it easier to read as there is a lot of different import. What we're gonna do is group these. So first we will click on Grow Great. This will give us separate elements store equipped since this, his shown up twice will deliver it. And let's make groups. Let's at card and type one. All the items regarding the amount will be the second group and transaction idea Invoice idea will be the third group Soul. Let's go ship. Well, this year, um, you dropped this and will add titles to this. So let's call this, for example, transaction info. I went to the right. Move it, make sure it's someone like that may keep black, and we can go with medium front weight. One thing will add is our line we can carpet from the screen, since it already has the proper color and weight, and we'll do maybe really from the bottom. We're just gonna increase its size by 68. We can move this up a bit lower, and now we're gonna group it. We're going to repeat the same process for this controlled re to group. It can copy this text. So I'm holding control and clicking toe. Go directly into a group and select one item. If it didn't hold, control it through just like the whole group. So control click to select single item Copy it based IP. Move it down. Make sure it's the same spaces the above, which is 24 pixels. And we can called this transaction details. And we can also copy the line again Whole control and click to go into the group Control Lee based It's out Now let's move it right here on the top. It was 32 from the items. Now let's group everything and space and appropriately And for the last section, we are not going to use the title. Just gonna move it right here and we can give it a line on the bottom. Okay, so we now have or last green complete 16. Prototyping: Okay, so now that we have completed the rap, I'm gonna teach you how to turn it into a prototype to start working with a prototype. You first switch to the prototype work space right here. Gonna notice that something's despair, like the properties panel and most of the tools. But we have an option to go ahead and click on any item and it will get this blue overlay. And when we drag on this era right here, we can use it. The link toe, a different screen. For example, I dragged the link from this at car button for a new card screen. And now we have all of these options. So before the target, we can change the target to a different screen and transition can use. Dissolve can use, for example, slight left. We have easing and we have the duration of the transition, which is 0.4 seconds. You can change that and play with it. But for the easing and duration. If you don't know what you're doing, just keep the default values, and you will be OK. Onda, we have preserves crow position, but for now, we don't need that. Okay, so we have connected these two screens. Well, what now? Have toe. Have the viewer prototype go up here. This play I come It's called Desta Preview. Click on it. You can show you the first Queen. This little house icon sets this as her home screen. So when you fire up the prototype, that is the screen it will start with. So let's straight out. We have winter at card button, so go ahead and click it. It will change to the new card screen. So, for example, before Ana be able to go back, we're gonna grab this well canceled section and drug back, for example. Now we can use the dissolved transition. Keep everything else the same. When we go back toe preview, we can click on Cancel and it will go back. Can we go back on and let's continuing, connect all the other screen. So let's select all of the screen and make it linked to this, you know, let's link Dumbarton use light left, for example, against light left and we can again lingua canceled here and use dissolve. And in this case, we can grab this list on just you can go in tow, specific items, but ah, let's use the whole list. His link tour Next screen news slight left and on the last screen, we can only use back. It's carpet here we can use dissolve. And one more thing that we can link is this. Plus, I can on your screen, so look like it. Here, black here. So now when we play a prototype, we can go through all of the screens, go back for it, had more currents and so on. Okay, so now you know how toe examine up within Adobe X'd and make it into a prototype. 17. Sharing Your Work: So the last thing we need to talk about is faring or prototype. It's great that we can mute on our computer, but it will be even greater to wait. Another devices. We have two options. 1st 1 of them has to go right here to share and then published. For the type you can create a public length, you consent to people and they can open your app either on a smartphone or on the desktop. There is another option that can be really interesting to you and that is viewing this on your phone toe Here. This on your phone. Click on this. Meanwhile, Previ, I can and you will get the instructions off how you can view this prototype on your phone. So you move your file to your Creative Cloud folder. I'm sure murder is in a minute. And then you installed the eggs, the app on your phone and open the file so you would go to the desktop or wherever you save the file. No hearing. Copy it and go toe creative cloud files. If you can't locate this folder, goto the creative cloud app and find it through there. So you just go ahead and pays the file right here. It will upload it and what sits uploaded. You can open it on your phone and view the app on your phone. For that, you need toe. Make sure of some things. First thing is that you need to delete all the other screens that aren't needed. Like this system elements. Go ahead and create a new file. Go to save as maybe name it finance. I up for the type and in this file delete all of the unnecessary screens. So when you open the app on your phone, they won't make a mess. So the next thing that we need to take care of is to make sure the screens are designed for our phone. For example, we designed this for iPhone X. So if you don't have an iPhone X, this might not fit your screen or make look completely out of place. So in the next lesson, I'm gonna teach you how to adapt these greens to your phone 18. Adapting To Different Screens: Now I'm going to teach you how to adapt your designed toe. Other screen sizes so we're going to start with adapting are designed. It was made for iPhone X toe the screen off iPhone 6 7/8 ous You can see I already did that here, so I'm gonna show you how it's done. It's very, very simple. You just grab the arvato, pick the screen, say that you want, and it will add on our board. And the easiest way to do it is to take everything from the iPhone X design carpet based it . Now take the status bar for the iPhone 67 and eight. You can find that in the project. The resource file. Go ahead and copy that right here and align it to the bottom off Haifa Nexus Status bar. And I don't go ahead and delete iPhone Access Steles bar. So now all you have to do is determined how much they need toe, shorten it and just grab this big rectangle and shorten it from the top by 24. So let's see. So it's just should be 100 and 16. Okay, now that you've done that, grab everything and pull it up on. That's it. You can go ahead and do that for all the screens. And if you have iPhone 67 and eight, you can go ahead and then move the filter phone in preview right on your device. So this is how the app would look like for Android. I'm gonna show you a couple of screens. How? Toe make the change. So here, we'll need the U elements for Android. So when it happened, copy them. Let's bring them closer. So the first thing that we need is, uh, naff bark Skopje that to the bottom. And now let's start working on our navigation. So let's grab this at bar. Let's change the color. Change the title, my cards again. Samos with iPhone. We don't need a back button so we can move this 16 pixels from the edge. And let's and group this so we can work on you. Tried them separately. Still 50. And now let's copy this card right here. Now, since the iPhone screen is 3 75 in with and Android is 3 61 thing that will, though, is reduced this by 15 on. We'll move this a bit this way, it will be easier for us toe accommodate the change. And it won't affect the look very much. So the next thing we do is change the fund for a bottle. Although you can was any want you like I'm gonna use and raise the fault here? Yes, about Let's go medium on here. Let's go with 14 and again maybe, um, you can go ahead and removal the letter spacings, except here, as in the android system or about a densely really use spacing by default. Look and set one. Now let's go here than copies. That makes one on. Make sure they're aligned. Yes, well, now, just copy this at the bottom Made this but shorter aligned this the center. So we have completed the top part, and now let's work on the transactions. One thing to note is that with Android this resolution, we will work for devices that are 16 by nine. But as a lot of phones today are, uh, 18 by nine and use the aspect ratio. We can make this 3 60 by 7 40 so make it a little larger and also make sure toe increase the view port right to some 40 and I will just move are never all the way to the bomb, and we can bring their transactions to the back and let's start working on them. So first, let's change their stool. Maybe, um, 14 points. Let's go ahead and change. This is the good thing. We kept the repeat grid. So we're just update one and all the others will follow sloughs, bravado, medium we'll use. So I'll, um, linked to some default font sizes that Android uses. So you contract this out. Onda used them in your design. Um, so now all we need to do is make this a bit shorter. That would be it. Now we can go ahead and at another pending transaction 28 here, make sure everything is the same. Um, change the color. You have to stop. All right. Spending with this position it position this and we have completed The first screen will also dio the empty state. So to make them consistent let's navies 7 40 copier Never karp air navigation, my cards maybes really de later back. Carol, position this Now we can just carpet illustration align it with center will change the fund to Roboto Regular will remove the weather spacing and we're gonna adjust this a little. Now let's position again. And we could use this and Kurt Button. It would work on Android. But Android, here's something specific all the floating action button that we can also use. So you have it right here. So this copy it basically here and position it 16 pixels from the never bark and 16 pixels from the right edge and will change its color toe Are Xing colors on Android. This is used a lot, so use it instead of the classic Barton. Okay, so there should be enough for you to know how to adapt a rap toe any screen size. If you have any questions about this, post them in the project discussion, and I'll do my best to answer them. 19. Assignment: now that you are told the lessons, I have an assignment for you. First off, I want to go ahead and adapt the app to the screen size of your phone. After that, I want you to play with the APP. Go ahead and change the colors. Play with the funds, are just a rounded corners and see what you'll get. Remember that it can edit colors and fonts in the assets panel, and they will change everywhere in the document. Don't be afraid to be creative, and don't be afraid to experiment. And after we have made something that you're happy with, go ahead and share it in the Projects Gallery. What I expect to see our designs for all four screens. To be able to share them, you'll have to export them for Max de. And to do that, you will select all the screens and click on the export option in the menu. In the export option, you can keep PNG as your format and pick the system you were designing for. No pick the folder. We want toe the files to end up in and click export. I would also love to see her prototype to share that disk. Copy the link off your published prototype and paste it in your project. For those of you who want to take it a step further, I have a bonus assignment. To be able to complete this assignment, you will need to learn one more thing about the repeat grade. Aside from distributing the text, it can also do the same with photos. You can grab a set of follows and drag them over a shape, and ex D will distribute the photos in this case, their photos of people. But we can also use the longer so companies were named in our West. However, in that case, we will need to find a different place to display the date, and that is your bonus assignment. Find where you could place the date of transactions. Think if you can add it somewhere or replace something. There is more than one solution 20. Resources: there are few. Resource is I would like to share with you to help you with your future work First you I kids, this class I provided you with system elements that you need to complete the project. And now I'm going to show you how to get other elements. The next day you just need to go to the menu, find you. I kids, pick the one you were interested in. Click on it and it will lead you to a paid recon. Download it. Second funds. We isn't the fault funds for design, but if you want to use different funds, a good place to get them for free. Is Google funds the same place? We don't let that bother from third guidelines. A good way to learn more about IOS and Android is to track their official guidelines for Iris Goto apples, human interface guidelines. And for Android, you will go to Google's material design. Both of these will blinked in the project description 21. Final Thoughts: if you made it to the end of this class by now, you should have a solid foundation so you can go ahead and design more APS on your own. I hope that you enjoy this quest. I'm looking forward to seeing your projects. If you have any questions, expose them down in the discussion.