Design Mobile Apps in Adobe XD

1. Promo app design course skillshare intermed: We're going to build an awesome mobile app in Adobe XD. Hey, there, I'm Chris barren, certify the Adobe instructor and furthermore, the CEO of Dean junkie, a mobile app design company that I founded and ran 2013-2018 in just 3 h. I'm going to teach you some of the most important design principles for the app design, all based around Material Design 2.3. And that's from the official Google guideline. We're going to design a mobile app. But more than that, I'm going to teach you how to approach such a project from wireframe to brief, all the way to the finish product. Keep in mind we're not going to code anything. Everything is going to take place in Adobe XD design program that has a free seven-day trial, then it's ten bucks per month. In the first part of this course, we're going to cover all the components of an app. Then we're gonna get to work and apply all that knowledge. The key difference that makes my core stands out is the thought process. I not only tell you how to design certain things, I'm going to share all my insights, all my experience, and you can immediately apply all those things into your own workflows. With that, let's get to work and get started. 2. Introduction to Material Design: Welcome back. In the next minutes, I want us to explore the material design, whether it is, what it isn't, and why you should care about that. Material design is a design language that was created by Google in 2014 with the sole purpose of making gaps not only beautiful, but also usable, predictable, and meaningful. Now, design language seems pretentious, but you can think of material design as a set of rules. If you follow those rules, you'd likely going to end up with an app that looks and feels natural in the user's hands. Now, this guideline is publicly available for everyone. Right now, the third version is out there. And that's because as with everything, it evolved the lip balm, it got better and better. Well, at least we hope so. Now what you need to know at this point is that most of these rules from the guide, our rate, they produce results. They talk about simplifying layouts using bold colors, using motion to provide meaning and so on. Just look at the overall Gmail and the new one where the rules are followed. So it's night and day Material Design does help. Now, all of these guidelines should be considered when you're building an app or even a website. Now, think about how your clothes are made and why they made a certain way, right? That's the reason why fans have two legs, but why a tee shirt has a certain length? Well, why does a hole right here, right? The politicians have to stay within certain parameters, right? If you don't follow the most basic rules, you're going to end up with crazy designs. So this is what material design is trying to prevent. The only problem is the packaging. The guide itself is a bit difficult to follow. It's a bit overwhelming. Now, you might have visited the website. My God, this is way too much and you're not alone. Now, again, this is the third version. Google revamped it several times and it's still being updated. But even so, it's still somewhat difficult to follow, especially in certain sections. The wording is a bit too complex at times. And overall, this makes it very hard to read and follow. E.g. things like pixel density, density independent displays, scalable pixels and whatnot. These can intimidate anyone. You then move on to other parts and you find examples where it says you should use 72 dB between the title and the edge of the screen, DP. I thought we were going to use pixels. How do we convert pixels to dp? Do we need the formula? Do we need a calculator every time you add a rectangle? So these are the types of things that leave you scratching your head. And again, this is just one example. Now, what we're gonna do in this course is we're going to have a down-to-earth approach that will produce great looking gaps. So this brings us to what material design isn't. It's not a gift from the gods. It's not the end-all, be-all of apps. While it does give us a lot of resources, I personally don't believe in following it to 100 per cent. Like it's the Constitution, like it's the law. Now, I've found situations where I had to deviate, but loads of reasons. So that's why in this course, I'm going to teach you some of the best design principles I found to be bulletproof, practical, and easy to use. Now, most of them can be found in this guide as well, while other ones have been discovered through my own experience and working inside of Adobe XD and building gaps. Now, what I want you to understand is that there's never a discussion whether this or that is a part of material design. And that's because it really doesn't matter. What I like to focus on is results. Does the app look good? Can it be coded without any workarounds? Does it give us the intended result? These are some of the questions that go through my mind and guide my decision-making. So there's somebody up in one phrase, we're going to use material design and other apps, but we'll also deviate from it from time to time. We'll refer to it, but we won't worship at, with that being said, let's jump to the next lecture. 3. Android interface components overview: Welcome back. We need to know what are the building blocks that we can use to create apps, specifically Android ones. In this lecture, I'm going to give you an overview of the most important elements. This is gonna be quite fast, but you don't need to memorize them at bank, you have a cheat sheet attached. The idea is that any cake recipe needs flour, eggs, butter, and so on. Most of them need the same things. So it's the same with ads. Let's take it from the top width, the status bar. This is the tiny band at the top of any app that shows you the time battling level, your carrier and other notifications. It can be black, transparent, or it can be a solid color. This is the status bar. The status bar, status bar, whatever you get the idea in terms of its design, will probably make it a solid color because that looks best. Immediately underneath the status bar comes the app bar. That's the official name, but it was also called the action bar awhile back. Some developers still call it by that name, and I'm in that boat. I think it best describes that area. Now, the action bar is quite important because it serves multiple functions and we're going to talk about that in a dedicated lecture. Now, let's learn to recognize that you might see it occupy a single imaginary line, like so. But it can also take up much more space, usually to make room for tabs. And rare cases. It may be transparent, but even then, there's always a mandatory element present. And that's this arrow, which is the universal Android sign. To go back. It's actually called the up arrow in the official documentation. But again, we usually say is the back arrow. Since I already mentioned that, let's focus on the next building block, tabs. Now, these can be used to split up your content. Android users are very familiar with the swipe gesture that switches that as these aren't just about everywhere in just about every single app. Now, there are two types of dabs, fixed and scrollable. I prefer the first one because it's more aesthetically pleasing since we divide the width of the art board to the number of beds, we can go with as little less do or as many as 45 tabs becomes too crowded in case you need more tabs, it's best that you use the scroll feature. The distance from the left edge is also quite significant. It's quite big. But overall, that's dabs in a nutshell. Another component is the left menu, but not because it allows us to jazz it up in terms of the design side. There's not a lot that we can do. Actually, this is really useful because it clutters the app, it makes it simpler. And then drug users are the highly used to this menu. And this allows us to hide quite a lot of content inside it. So instead of littering the action bar with loads and loads of icons or many tabs, you just move all of that right here. This layout is very much standard, so developers can quickly create the default look, which is what you see right here. We can customize the icons and add a bit of color. But that's about it in terms of customizing it. Again, developers always play a big role in this compensation because if you create a slightly different layout, they're going to have to do a lot of work on their end, which is quite difficult and again, more expensive. Now, it's usually not worth the effort, so we're going to keep it like this. So for that reason, the navigation panel won't get a separate lecture, at least not for now. Moving on, cards are a great way of presenting content. You can identify them by the white, slightly rounded base, which usually sits on top of a light gray background. It's fairly easy to confuse cards with lists. These are best used to show content that's similar in nature. E.g. a. Recipe index cards on the other hand, can display various types of content like text, photos, and then usually different. A dashboard is a good example of cards being used properly. Every item point is a different part of the app. Okay, Now let's keep this going. My next component is present in just about every screen, and that's the pop-up screen. This is officially called a dialogue, and it can be seen in two formats. The regular one, which is very easy to spot, and then the full screen one. We're going to discuss both of these in a separate lecture. But you can quickly identify a phone screen dialogue by looking at the action bar. If you see this close icon coupled with an action word on the right side, then it's a dialogue, okay, with near the end. But I love these guys, so I really wanted to give them a shout out. Snack bars. And those. Now while these seem to be part of a balanced breakfast, these guys are actually used to inform the user of various things that just happened. Now conceptually, these can be confused with dialogues, but we'll go through the differences soon enough for now, and let's make sure that we can spot them if we see them in a design. Unfortunately, we can't do a lot in terms of design work. But yet you have to know about them. They do really improve the user's experience. Next on our list are buttons. These are divided in two large categories. Regular buttons and floating action buttons, which are also called FAB is. Now regular buttons are predictable. They are large, right? They have a pressed state and they can be placed just about everywhere in the screen in a reasonable amount of pores. Now, floating action buttons are usually positioned in the bottom right side. Effects. So as you scroll, the button stays put because that action is usually the main feature of the app. Now e.g. in WhatsApp, the FAB opens a new compensation in nodes. Their baby creates a new entry. So that's the main difference between these two categories, classic buttons and their babies. But we're going to talk about them in more depth in a separate lecture. Finally, let's talk about Beck's fields in Android. So these are extremely versatile and you can see them in just about any app out there. They might have a label or some text underneath them. They might have a drop-down arrow or the calendar icon next to them. The labeled with sometimes be displayed in line. And when you activate the field, it will move above it and shrink. These other a lot of fun. And they can dramatically change the way your app looks like. We're going to use them quite a lot. But with that, we've concluded this overview about the major Android components. Now, I know that's a lot of bacon, but please check out the attached cheat sheet and you can even print it out. You don't have to memorize anything as we're going to discuss all the details in depth at the right time. Now before you go, you should know that there are other Android components like chips, sliders, tool tips, and whatnot. But in my book, those aren't as important. And I really wanted to take it step-by-step for that reason, we're not going to talk about them. Instead, we're going to focus on what we discussed here because those are going to be in 90% of all projects. Okay, I'll see you in the next lecture. 4. Here's the best artboard size for your apps: Welcome back. Let's talk about the size of the art board, which could get quite complicated if you don't have the right births back there. Now, we saw that Google measures everything in dB and Sb. Now, if you're the coder, you're probably familiar with these terms. But what about for the rest of us for design, That's what should we do? Well, here's the short version. Now first, for Android apps, we're going to use 720 as the width. The height really doesn't matter because most of the time we're going to have longer apps. So why 720, even though we have 360 or the fourth dwelled in the presets panel. And then some UI kits you might have seen 375. Here's the situation. 360 is the standard in material design. Number two. You can see an example here where the height of the action bar is 56 dB, and that translates to 56 pixels on the 360 art board. Now, you can see all of these other measurements which are very useful for beginners. Now, the problem with three-sixth is that it's quite small. So when you export that, all you want to show it off to your friends or even your clients. It's not going to look as good. It's not gonna be as sharp, right? So that's why I prefer to simply double it, double the entire thing. The proportions are the same but with just doubling yet, right? So that's why we're going to use 720. Again, we're basically doubling the screen size, but everything is proportional. So you can always look at these values from the guy and double them. And you'll be good to go. E.g. 56 dB becomes 112 pixels, 16 becomes 32, and so on. The proportions remain the same. But gives a bank say that the standard changes from three-sixteenths to whatever else. Whatever. Well, just as a rough example, say that we have a 16 pixel gap here, here, and then here on the TV screen. Cool. Then on the full hundred and 12 pixel one, then it might increase to 24 pixels. But again it's going to be 24 everywhere. So the idea is, again, everything is proportional. Everything either scales up or down. And because we're using vectors, this is all fine. So to sum this up, the size of your screen isn't really all that important because your elements will always scale up or down. That's how apps work. Some phones have super crazy high resolutions. Cheaper ones have a lower resolutions. So are you going to design then plus versions of every single app? No, that would be crazy. Instead you create one as a guy and then the coda is going to scale it up or down depending on various things. And because we're using shapes and icons that are vector-based, this means that you can do it without any quality issues. You're not gonna get fuzzy or bloody edges. And again, I recommend seven 20th for the width. And that brings us to the next sizing issue. What's the best size for all of our components? For the buttons, for the action Bode's for the cards and so on. Let's talk about that in the next clip. 5. Size in pixels: here’s why people argue: Welcome back. In the previous lecture, we talked about using the Material Design Guide. Cool. Now, the way you can quickly get all the right sizes for the other components, just look for the specs, which is short for specifications. And you didn't get quick answers in terms of sizing. Example for the top bar, that should be 112 pixels tall. The gap on the left, there'll be two pixels. Now how am I getting these numbers? I'm just doubling them so they will fit the 720 art board. Now, let's go to Buttons, e.g. the minimum width is 128 pixels, the minimum height 72 pixels. Now let's go for one more example. Let's look at fabs, e.g. look for the specs and developed several types of dabs. But in short, these ones are 96 pixels tall, and that's the standard. And here's another one. This is 144 pixels tall, just in case you want an icon and the label, a text label. But yeah, overall, this is the fastest way of getting up to speed with material design. I'd like to remind you that this is the second version of the guide. If you want to use material three, which I don't really recommend. Just a minute update as far as I'm concerned, you can still double those values, but you're going to have to use 824 as the art board size. So instead of assembling 28, 24, not a big deal. But again, you do you. Now, let's take a step back and look at the bigger picture. Now, do developers coders, do they care if you use material design two or three or if you use 36412, which means 72824? No, absolutely not. I repeat. Most coders do not care at what screen size you design. And that's out the door. But that brings the question, why do so many people argue online about the size of the art board? Well, let's just think about all the objective. As a designer. At the beginning, we only want one thing, but not paths change looking gaps. E.g. designing a huge button that takes up one-third of the screen, right? That would be bad. Or an icon that's so tiny that only ends can use. That's what we're trying to avoid as beginner designers, right? And that's where the guy comes in. It's a good set of rules that prevent these types of mistakes. So again, you want to design some fans, right? You need two legs, right? You want to design the car. You're going to need some wheels. Standards are there for a reason. They provide a strong foundation for our design. Now, to that end, Here's what I suggest. Open up some beautiful apps on your phone and take screenshots. Look for the apps that millions of people use. Then drag them inside the Adobe XD and adjust the size if needed, that so they can fit in your art board. Chances are you'll screenshot there's going to be much bigger. But again, that's fine. Scale it down proportionately. Now the question is, is your size about the same? See, it's not a tragedy. If instead of 96 pixels, you're going to use 100, the Material Design police is not going to come to your door. Now, the main concern is that you don't make it 400 pixels tall. That would be an issue, or 20 pixels. So a lot smarter people decided that 96 pixels works best for most people. So that's why we're talking so much about size it so we can start off on the right foot. But just in case you dislike the material design guidelines, just continue taking screenshots and comparing your design to major Apps. See if Yahoo Mail decided that 96 by 96 button works best, then you really shouldn't use 20 by 20. Or if you see that 90% of apps use tabs that are 96 pixels fall. Again, don't use 50 pixels, right? These are just random examples off the top of my head, but I do hope that you are seeing my point. These sizes from the guide are not laws sent down by divinity. No, that just a quick way to set up a foundation. So if you see some people debating over 363,754.12, four AT, with whatever else. Please don't get involved into any argument. Focused on the design principles. Instead, a gray colored scheme, balanced symmetry, awesome pipe biography and so on. That's what's really going to make your app look great. And of course, don't deviate too much from the standard. A few pixels here and there, that's totally fine. But don't change up the sizes by more than 20 bucks. And thank you so much and I'm gonna see you in the next lecture. 6. Learn to design the action bar (top bar): Welcome back. Let's talk about the action bar or the app bar and see what it can do for us as designers. Now before that, let's quickly see what's up with the upstairs neighbor, the status bar. This doesn't get any love and it's quite ashamed when developers leave it at its default state. A dark gray bar is not really a great luck, though. You can make it transparent or black. Designers tend to use a solid color which matches the action bar and it's more aesthetically pleasing that way. This also provides better contrasts with all of its icons, which are mostly white. Now, most recently with material design tree, the status bar does get the same color as the ActionBar by default, but that's it about the status bar. So let's move down to the action bar. Now, the ActionBar can take several shapes and sizes that are formed in total, but you're probably going to use only one or maybe two. Now, this is the classic one with a menu icon on the left and the logo in the middle. This is the center, the action bar. And it's quite popular for the home screen, meaning the screen, whether you always come back to. Now, this menu icon is typically called the hamburger menu because well, lines on top of each other. So I guess it's somewhat resembles a hamburger anyway, this is very popular. But please be aware that these tabs are a separate component. Yes, they are the same color, but they're not a part of the action bar for say, okay, Moving on, On the right side, you'll often get some icons that help you do some fairly important actions. In this case, we have a search feature which is quite useful in a news website plus another menu. Let's move on to another very popular action bar. When you enter inside an item, you're typically going to get this layout. This arrow helps you go back for upper level depending on how you look at it. Then you have a title that helps you navigate the app, plus another icon on the right side. This is a typical action bar that's left the line wherein the first action bar, we had to centralize them, the logo. Here, the title is to the left. So to sum this up so far, we've seen two types of action bars, centered and left line. Again, typically the centered one shows off the company's logo and you'll usually see it on the main screen of the app. The left align title is usually shown when you are inside some type of content. So that's two out of four action bars. What about the other two? Well, kids and example from Gmail. As you can see, the title is very long and quite large, so it wouldn't fit next the arrow. You'd actually not supposed to make the title super small to make it better. That's why Material Design suggests these two options. Basically the title moves down my advice, try to avoid it because this doesn't look all that great in my opinion. Now, let me tell you the truth. Apps get updated all of the time. So you might check out these very same apps from this course and you might see del completely different. That's just how things are. But the essential point always remains the same. A hamburger menu, a title, some icons on the right side. Never use more than three icons on the right side. And if the title doesn't fit in line with the hamburger menu, what the back arrow? Just move it down. Don't shrink it. Now the question is, could you do small variations? Sure. E.g. here's Google Calendar. Here with on the main screen, you would expect the title to be centered. But this is actually a drop-down, so it's left the line. And because the About three icons on the right side, this actually makes sense to place the month and year on the left. And still inside Gmail, we get this action bar in the savings. Now, this arrow is very common. Again, it shows you that you're inside something and that you can go back, or as the official guide says it, you can go up a level. Now, the ActionBar is left align icon, title on the left side, and then a menu icon on the right side. But yeah, overall, this is how most action bars look like. Now, let's talk about size in pixels. You have a guide that dashed so you don't need to memorize them at bank, we're talking about the V6 screen size from material design to double. So 720 pixels for the width. So the status bar, we want 48 pixels. And for the action bar 112, this gives us a total of 160 pixels. But the empty space on either side, 32 pixels is the norm. By using this art board size, you can always look up the official Material Design Guide and double the values that are shown here in VB. So if we take a look, we're going to see that the action bar is 56 db times 2,100.12. It's the same for the margins. They say 16, we're going to double it, so that's 32. So this is a results or the entered the double the number than the official guide when you have using my recommended are War sides. That's it for the status bar and the action bar. You have the sizes and pixels plus the most common layouts. See the cheat sheets so you can refresh your memory. Thank you so much. 7. Everything you need to know about tabs: Welcome back. In this lecture, we're going to talk about dabs and other essential Android component. Their main purpose is to separate content across different screens. Now, there's only one major rule you have to keep in mind. The content in each tab needs to be at the same level of hierarchy. What does that mean? Practically, this means that your tabs should show things that make sense together. If it's a music app, just a random example, you might see pop, rock, hip hop and so on, right? If it's a store, you might see appliances, cell phones, cameras. So it's very intuitive once you consider all these examples. But here's what you shouldn't do, which is even more clearer. So say it's a food delivery app and it shows Italian, Indian and then settings. So that obviously doesn't work because savings belongs in a completely different place in the app. So that's what this means, the same level of hierarchy. Now, in general, the why everything is likely going to show you the information structure of the app. So actually there's little chance that you're going to mess this up. Now let's talk about the design side. Tabs can be divided in many ways depending on what interests you. Now from a navigation standpoint, they can be fixed or scrollable. Now fixed abs I loved them. They look great. But you're limited to four. The entries that width in pixels is determined by the number. And here's the math. Tabs means three-sixths deeper tab, because the entire width is 723 tabs 240. And if you want for 1AD is all you're gonna get. The easy way to arrange these items in Adobe XD is to create the rectangle that shows the active tab. This is always four pixels tall. Input here the width, say to 40, and now left the line and then center the text or the icon with the tabs means you're going to need to be individual texts layers. And just move this bar around. Right. Now in case we are talking about scrollable tabs, the distance from the left side needs to be 104 pixels, 104, the Paxos. Then you have active rectangle starts. Of course, the word itself needs to be centered, so please make sure that you don't get confused about that distance. So again, leave 100, then pour the empty pixels from the left side. And then that's going to be that. Okay, Nice. Now regarding the minimum width, that's again 180. That means you're gonna get two-and-a-half dabs in one screen. But this shouldn't be a problem considering you want to show the user that, that are loads of other tabs. Now when you see it in action, you ever going to see that it does actually make sense as the active tab becomes apparent through a nice animation. Okay, Moving along, another way to look at Bell Labs is based on their label. It can be text icon or text plus icon. But as you probably already assume, you should never mix and match them. If you have two texts labels, don't add the third one. That's just an icon that doesn't make sense. Choose one direction and stay on it. That's a very simple rule that applies just about everywhere. Now, these choices have very specific sizes. So let's see what's, what option one with text labels. This is by far the most popular choice. Its size, its background is 96 pixels tall. 96. This, of course ties into your action bar and the status bar. The entire block, almost 720 standard art board is 256 pixels tall, and that's 48, 112, and then 96. If you choose the icon route that uses the same height for the background 96, the icons themselves have to be kept at the size of what the eight by 48 pixels. In case your icon is an irregular shape, you can use a rectangle to guide you. Now, I'm not a fan of dabs with icons alone, as they're pretty hard to understand what's behind them. So I would personally stay away from that option unless the icons are extremely intuitive and very well known. This group is reserved for things like search, GPS, bone, Wi-Fi, and the very few other ones. Now the third option and the final one is label and icons. So tx plus icon, which again, I'm not a big fan of because of the height. This needs 144 pixels versus the 96 for the single line. So that's quite a big difference. You are eating up quite a lot of space. Now indeed, it does look nice, but with losing pressure space, there's something to be said about a scrolling feature where the action bar goes away when you scroll down. But we're not going to focus on movement because that's very difficult to add in all projects in Adobe XD. But note that it's not the end of the world. If you do either a bit of space at the top, most apps show a label though, exactly for this reason to keep it simple. But at the end of the day, it's really up to you. Now, going back to our subject, stick two text layers and try to avoid very long names. That can be avoided. These use dot dot, dot at the end of the word, even though Google says, it may confuse the user. Now, what they propose is you increase the height of the component. But in my book, that's going to look worse. So this brings us to the state of dabs. There's two of them active with that full pixel rectangle underneath it. Now, that usually has a color that really stands out for the maximum contrast. And then we have inactive where the text layer has a washed outlook and no additional decoration, nothing in terms of the design side. Now from my experience, most of my headers are brightly colored. So my active text label and the rectangle underneath can be pure white. Now sometimes I do deviate and I use yellow, but only when the combination is not jarring when it doesn't upset the eye. Now please note that active tabs text layer should never be any other color than white. So you can play around with the rectangle, the bar underneath, but not the text layer is white is usually best. Now, here's another thing. Whitehead's are very common. So it may look clean, but most of the time we don't really use a pure white background. Now, I want to leave you with this idea in mind. Sometimes rules can be broken as long as you follow the design principles described in this entire course, you can step outside the box and create something beautiful, something that's usable no matter if you followed the material design guidelines or not. But for now, it's time for the next cell size. These create five headers of your own. By headed I mean status bar, action bar in a tab system all combined. Now, the purpose is for you to get familiar with the process of setting things up in Adobe XD and experimenting with various colors and layouts. In general, we don't work in isolated conditions. We won't create just the header. We're going to create the entire thing. But I really want you to try this out and see how you do. So that's five different headers in any style you want, in any layout. For the icons you can use black icon.com or just take some from the Internet. It really doesn't matter. This is just for practice purposes. We're not going to use it anywhere else. Please post your work in the comments section. And ideally, all these designs should be one underneath each other in one single art board. Have fun with it, and I'm gonna see you in the next lecture. 8. How to work with cards: Welcome back. Cards are one of the most important elements in any Android that, and that's because they're one of the best ways to display content. Cards come in all shapes, sizes, and looks. And it's surprising to see how many varieties fall under this label here that some examples. This one shows a video in the top section and the title and description underneath. This one has the title above it, and then a photo, a description, and the call-to-action. You can display gifts musically adds weather-related elements. You can have all sorts of things like icons, switches, a lot of things, buttons, e.g. or nothing at all. In short, they're extremely versatile. There's only one major rule. Cards have to stand on their own 2 ft. That independent, meaning, they don't rely on surrounding elements or the components or a specific context. So let's go through a few cases so you can better understand why cards on so flexible. Now, if we take a look at the memo app at nodes, we can see cards inaction. So this is why I said you may be surprised to see how many varieties that are. In this version. We don't have titles, buttons, media of any kind, thumbnails, descriptions, nothing, just the container and the preview of the actual content. A preview, That's it. That's cards where you now considering all this, I don't have a specific size or the template that you should follow. Think about what content needs to be included and apply the design principles from this course, specifically the ones we're going to discuss a bit later on in the course of example using the right aspect ratio, consistent spacing, great typography, and the forelimbs of legibility, adequate line-height and size basically is super important when it comes down to text. So these are the things that are going to make or break it. Now, let's switch to I Herb, a very popular supplements store that features multiple cards on there. The initial screen first, here's a row of various brands. So a very minimal approach regarding content. Directly underneath this row, we have something completely different. A photo of the product. I felt star rating price, but also a menu that holds the options. Now, that's quite a lot. Moving on down, we see another guard for the blog post. This again, features of podo idle and the description at the foundation of every card stands the container which is white rectangle, slightly rounded or squared, that may have a very subtle drop shadow. You can typically find them place on top of a light background as it flipped this, the idea that the card is a distinct element That's independent of anything else. Here's another example, global delivery app that's taking Europe by storm food delivery basically. Here we can see another example of cards being used. It's nothing special though, but it's interesting to see how many styles can be pursued. Now moving on, when you tap a card, it can expand into full screen mode. But there are cases where there's a drop-down icon that shows us the cards ability to reveal even more content. This example on material dot io is bought on. What's important is you don't have to scroll bars and your app. So if the card reveals a lot of content than the bead, you'll have to scroll too wet, but you won't get a secondary scroll just for that action. Continuing along, cards can be stacked on top of each other. But there are lots of cases where you can place them in a row with a horizontal scroll. So this is a very popular approach as it delivers a lot of content, but it's under the user's control. This makes it less likely for the user to feel overwhelmed by the sheer amount of inflammation. Now, again, please be careful when you mix dabs with scrolling cards. By default, the user knows that he can swipe and switch tabs. But if he touches a region that's featuring the scrolling card, a horizontal scroll for the Guard's. He's going to end up shuffling through them instead. So this is the type of thing that really annoy users. This is something that seems small, like it's a small inconvenience, but actually people hate that. Now, going back to our cards, I hope you take away one thing in particular from this lecture. A card does not have one particular look or size. It can include lots of elements. Or it can take up the form of a rectangle with a bit of text on top of it. And that's it. What's essential is you lay things out in such a way where the goal of the app, the objective, is fulfilled without overwhelming the user with lots and lots of inflammation. Right now we're going to talk about that second part in a dedicated lecture. But for now, I want to see some other cards you've identified and other labs. Please post a screenshot so others can see more examples of cards. Though, as I said, they can be in all shapes and sizes. After you've done that, please create at least two cards of your own. Please make them all inside the 720 art board. It can be any type of card with any type of content. I really want you to practice more than anything else. Get wet and I really hope to see other work in the comments section. Thank you. 9. Create beautiful and effective buttons: Welcome back. Let's talk about buttons and how they work and an Android environment. We have two different categories. We have regular buttons and floating action buttons, which are called FAB. Now, let's talk about this fancy one, FEB, whenever you start a new app project, you're probably going to ask, what's the purpose of the app or what's the user supposed to do inside the app. If we're talking about Gmail, e.g. the main action would be to compose a new message. Or if it's the calendar app, we need an FAB to create a new entry. If it's Google Maps, the user has to start his journey Real quick. If it's a clock app, the user needs to create the new alarm and so on. You get the idea. This specific action is a core feature of the app that the user often needs. So it has to be right at his fingertips. It must be shown at all times. So that's where the floating action button comes in. It checks all the boxes. It's main property is that it floats above the content in a fixed position, so it's always there, it's always reachable. So FAB, floating action button, certain apps when you scroll down, it does high, but then when you stop, it always pops back up. Now, FAB is can take on two shapes, regular and extended. Now, the regular Floating Button is always placed in the bottom right side of the screen. And I like to place it 32 pixels from the bottom and right edges. Now, the size of the button is one-twelfth by one-twelfth, and the icon inside it is 48 by 48. And like I said, the button floats. So that's why it usually has a drop shadow. It's also brightly colored and the icon is usually pure white, so it's very easy to get. The most common icon is the plus symbol, which usually means create, create the new e-mail, create the new reservation and a new entry and so on. Now, there is only one single floating action button, only one single FAB. And that's because usually that's the most important thing inside the app. So please don't have more than one FAB. Now, here's another thing that I discourage the use of multiple actions hidden inside an FAB. Now, this animation, sure, it's lovely. It makes an impact. But when I've used it, I've seen fewer clicks. And that's because people aren't used to all of this. So please, again, avoid that. Now, the next type of floating action button is the extended one, where the regular one was limited to a single icon and fairly small. The extended FAB can also have a text label or text and an icon. And you can make it as wide as you want, but the recommended height is 96 pixels. Now extended. The babies are great for the actions that require a text label. Sometimes a Nikon simply doesn't cut it, it's not clear enough. Now, these are also used to grab the user's attention by the sheer size. And that's because they can be quite chunky and like the regular ones, they extended ones float above the content. So it's quite clear that the user is supposed to click on it. Now, a good example is the Checkout button. Sure, you may have an icon for the cart and the top-right side, but that may get lost when you see an extended floating action button, you're not going to miss it. So obviously when you want to finalize, not just that, but that's a much better experience. Let's move on to the next category, regular buttons. Now, these come in many shapes and sizes, but they're fixed to a certain position inside the app, as you're going to see in a moment. So that's the main difference between them and their babies. Fab is float the vout, and they're typically in the bottom right side. Classic buttons can be absolutely everywhere. Now, there are five types of irregular buttons, but you will probably only use about three. So it's filled, outlined and text. This screenshot shows you exactly what you need to know. Basically, you choose the button type based on its importance. Now, in this case, what does the company want from the user? What's the most valuable action? It's add regard. That's why the Fill button is here because it stands out the most. It grabs your attention. Now. You may say, Hey, you know what, by now might make the company more money. But typically people add several products to a cart before checking gout. That's why the focus is on Add regard. This is what most people expect to see. So it's quite clear that this is the key actions. So that's why it gets the field button. And the secondary reaction by now gets on the outline button. This is also called a ghost button, and that's because it doesn't have a body. Nobody goes fun stuff. Now the third type of button is pure text. In this case, it does feature or an icon as well. Ask a question. Again, this action is way less important than the other two. So it needs to be less shout the, it doesn't need to stand out as much. So that's how you think about buttons. This is called the hierarchy principle. And really it's nothing all that complicated. You think about the level of importance and then you move down. So it's filled outline and then text. Now, moving back to the material guide in its third form, I really don't like Donald buttons. I think that used for the fringe cases. So I really don't want to bother you with them. And the final one, the elevated button, is often confused by beginners with a extended FAB. So my advice don't focus on these other to focus on the three I mentioned, and you'll be good to go. Now when we'll design stuff, you'll see that we won't stop and wonder, oh, is this on FAB, what is this an elevated button? Know what we're going to focus on? Is it lovely to look at? Is it easy to use, and so on. Now overall, these are buttons in a nutshell. The second part of the equation here, There's always a rank to consider inside any screen. So there's the most likely action, something like add to cart, but there may be other things like more info or compare items that are less important, but they're still there. So based on this thought process, you can decide how big of an impact your buttons should make. This requires a bit of analysis regarding that and the current screen and circumstances. But we're going to talk about all of that in this course right now. That's it. Let's take a moment and I'm going to see you in 1 s. Thank you so much. 10. Work with text like a pro: Welcome back. In the next minutes, we're going to discuss the many aspects of fields in an Android app. Right from the start, I have to say that I'm not in love with the suggested designs from the official guide. I think these fields look somewhat dated then, clunky, plenty enough. They've updated the styles since I recorded this lecture, but still the new version seems a bit disappointing in my view. Now, having said that, let's study the components of a tech skill. And we're going to talk about styling at the end. Now, any field must have a label, a place where the user can type, and then an indicator that signifies its active state. Sometimes we can add the hint or an icon that describes the field that's usually placed to the left. Now, another thing you could place an icon on the right side for the various actions, such as a microphone, e.g. for the voice input or a drop-down in the gay there. Now, all of this requires a height of at least 100 pixels, but this varies depending on your styling. The rectangle is called an activation indicator, and it has two states, inactive with a height of two pixels, usually dark gray and active. What pixels tall with a vivid bright color. Now, the label in general is displayed in the place where the user is supposed to type. When the field is tab, when you click it, when it's active, the label moves up and it shrinks. So it makes room for the user to type some things. Now in case there's another, there are three things that light up the label, the hint area, and the warning icon on the right side. Whenever there are no healthful hence displayed, the error is always shown underneath the field. More than that, what they use, the types is never highlighted in red with any other warning color. Now, let's move towards styling. Your colors are essential because they convey meaning. E.g. if you'd activation field is displayed in a washed-out gray, the user might think that this is a disabled field. The same thing applies to the label. So you really have to carefully consider how light you want your grade to be. You might not consider this a problem. But most Design Galleries are the filled with apps that really have loads and loads of very light grays. And I stress the fact that these are the concepts because relapse don't actually look like that. Again, you might seem cool on Dribbble or Behance. You might get likes. But that very light grade does not mean that it follows all the standards that we have for that designing. Now continuing on this path, the text field should never look like a button or a banner. The good folks at Google try to set things up by encapsulating these fields in a rectangle, right? But again, I'm not in love with it. I can honestly say that this is probably a terrible choice, All things considered. It's functional, it's clear, but it's not pleasing to look at. What I propose is you search all the coordinates of the web and find beautiful looking forelimbs that inspire you. E.g. in my latest app, I went with an off-white direct angle that features a slightly darker stroke, a washed out hand, and the label above it. Now I'm still playing with it because that ever-present danger is here, that it might look disabled. Overall. I'm going to play with it some more, but again, don't use the official guide if you're not in love with it for that specific case. Here's another one that stood out for the iOS apps, but I really don't care about it. This looks interesting. It's intuitive. So why not use it, right? This is the type of approach that I want you to have. If it looks nice, use it. Here's another one this time from the web. As you can see, it's all in the slide, this smallest details. This requires a keen eye and patients, you design, you check up on your phone at values brightness levels. You chip away, you work at it until you're happy. There is no magic color-code that I can share with you. It's a matter of DNS, good spacing and excellent color choices. But the thing that makes the biggest difference is contexts. You see the examples from Google are soulless because they don't have any identity. They're not the part of a bigger picture, of a bigger app. So does no soul. There's no passion. You don't see whatever attached to. What we see in Design Galleries are snippets for the potential apps that have huge personality. When you break it down. It's just a line with a couple of texts layers attached to it. What makes it special is the designers attention to detail and his respect for the overall vibe of the app, then that personality, the entire atmosphere, whatever you wanna call it. So what we're gonna do is we'll design a few forums in this course where I'm going to address this point in depth. But the main takeaway from this lecture is to get inspiration from absolutely everywhere on the web. Because forms are the point of conversion and they don't exist without any texts, yields, registration, checkout and other essential points inside any app heavily rely on text fields. So pleased, take your time with them and make them an integral part of your app. So let's practice. Please take a moment and create three different screens with a different type of text field design. Now again, there's no context here. You have to make it. I'd like to see at least three fields per screen. What's important is you try out different sizes, arrangements, layout, and colors. If you've ever watched my courses, you know that I'm a fan of certain color codes. But for this exercise I'm not going to give you anything. Try it all by yourself. When you're done, post your work in the comments section and I'm going to review them. Thank you so much and I look forward to it. 11. Introduction to the project: Hello and welcome. In the upcoming section, we're going to design a food delivery app is gonna be quiet the project. The goal is to get familiar with all the components of an app, use Adobe XD effectively and create something that looks great. Please watch each video twice. Once to understand what's going on, then a second time to work along by pausing as often as you need to. Okay, As we're gonna go through each screen, I'm gonna give you my thought process and how I quickly make design decisions. These be aware that the principles that I apply require an in-depth analysis. But I decided to talk about the principles a bit later on. Right now I want you to work as much as possible and leave most of the theory for later. You may ask if there are a lot of things that I need to learn. Why are we jumping into a fully fledged app design project? And that's because I want you to get experience actually working in Adobe XD and designing. That's why with jumping straight in, it's one thing to read about stuff. It's another thing to actually practice. Moving on, I also want you to design standard layouts because that's what you're going to encounter in your everyday projects. Now, if you look at the hands of dribble, you're going to see extremely creative layouts and animations and all sorts of effects. But most clients don't spend a fortune on app development. Thus, what we're going to create is based on my experience working with real clients and real coders around the clock. That means applying best practices and using fairly standard layouts. You have to be aware that every design decision can increase or decrease development costs. So while something may look awesome on Dribble, there's a good chance that developers have to work extra hard to make that happen. Obviously not everyone has hundreds of thousands of dollars to spend on fancy animations. Again, I've been down that road many times. I've also been in the client's seat where I had to approve additional payments because the final version require more work than we initially anticipated. So I've been on both sides as a designer and as a client. I'm going to bring all this knowledge into the course and I'm going to teach you how to choose your battles carefully. For now, stay curious and do your best to finish the entire chapter. Before we go, I have to ask for your understanding regarding certain parts that will be sped up or skipped. Any decent app design project is going to take you a few weeks when I'm trying to do is cut it down to its essence. So you get a great learning experience in a timely manner. That means I have to edit certain things out. Things like finding icons, googling another time-consuming things. Would that out of the way? Let's have some fun with our first serious project. Let's go for that. 12. Understanding the brief and the client's wishes: Welcome back. This is our first serious app project. This is going to be a food delivery app. And we're going to use this chance to go through a lot of different screens and scenarios. This project has a brief that's about an eight out of ten. Not amazing, but it's certainly not a few sketches on a napkin. It's twofold as it should be. On one part, we have the wireframe, which shows us the most important screens and what content needs to be included. On the other side, we have a document that describes what's going on inside the app just in case it's not clear from the wireframe. Ideally, you should always have both of these when starting a new project. It's not your job to come up with them. But if the client does want that, you should increase your quote in a very significant way, basically charged more, I would say at least at the very minimum, another $1,000. Okay. Attached to the course, you can find the link for the wireframe, the logo, and the documentation. Now, this business is called the Live short for delivery, and it's basically an app that delivers food. And a few cities, we need to list all the restaurants that offer takeout, but only those who have their own delivery staff. Okay, good to know. Now, the company the left doesn't handle the actual delivery. Now, this area of the brief is very common. It's the essence of the project and it's a good place to start as you get a general idea about what you're about to design. The next phase is critical, the target audience. And this is going to determine the look and feel of the app. And it's nice to have at least some inflammation. Now, this app is for people who are active with disposable income. Both genders, probably single, not married, office job, unlikely, upper management. We have to paying points, the quality of the food and the delivery time. Now, these are useful points because these can help us determine the look of the app. How we should style LEP. Context is everything. Now I would like to have a few more details, but like I said, this is an eight out-of-band. Another thing you should find in these briefs is the app's value. Now we have the main pain points, so we know what needs to be fixed, but how does the app do that? How does the app make people happy? Here, the app has a few strengths. It's the views, great delivery time, and real photos of the products. Okay, pretty good, reasonable. In the upcoming paragraphs with getting key details that will shape the entire flow of the app. Now, I'm going to skip through this part, but please read everything yourself after this lecture from what I see, I think the user can skip the registration process and same thing for the address, he can just skip it. Now, typically, registration is the very first step. But here the client, aka the business owner, has made the clever choice. He doesn't want the user to get stuck with filling forms without seeing the value of the app. So that's why we're giving the user the possibility of interacting with the app, of actually using good. And that he's convinced he can sign up during the checkout process. This is a great sign. This shows you that the owner or the project manager or the business owner, whoever is running the show, has thought things to do. We have to analyze this stuff because this tells us our position in the project. Should we share our own ideas? Do we allow ourselves to be vocal and challenge certain decisions? Well, it depends on how well-thought out the project is and of course, your role, your job in this case, this is a great sign. Things are under control and we don't need to second guess the brief. Sometimes clients have no idea. This is not one of those cases. Moving along in case the user is logged in and the location isn't filled in with just gonna show the city with the most amount of restaurants. But he can use a drop-down to quickly change that. Again, sounds good, quite reasonable. Now, in case the user is registered, the drop-down will obviously show his city. Now, the rating system is percentage-based, 1-100% instead of the five-star rating, which for us is a good place to add some personality. We see that our four categories of ratings. So we'll have to design something that's a bit creative and interesting. Now, let's pause again. This is another great sign that things have been analyzed in great detail by the brains of the operation. Rating systems use the standard five-star approach, but some of the biggest companies on the planet have switched to a like dislike system. This includes YouTube, Netflix, and in some parts of the world, Facebook. Now, the listing is the fundamental screen inside the app. So we need a clear understanding of what needs to be included and what can be displayed in another place. Now, here we see we need the photo, a title, rating, cuisine type, food type delivery time. Without this inflammation, we can move on. The thing is we could include e.g. a. Minimum order, right? Or the delivery charge. We could include the distance in miles or kilometers from the restaurant to the user. All of this would completely change the structure of the design. So again, I'm quite happy that we have all of this information and we know what needs to be included and what's optional. We have a few other bits and pieces here and there, but let's move on to the wireframes. We have to be aware that the number of screens shown here isn't actually accurate. The wireframe typically shows the most important screens and we have to fill in the blanks by using the documentation, e.g. pop-ups, intermediate screens and whatnot. Obviously, those are not included in most situations. You're not going to find them if you do have them. Great news, but in this case, I don't think we have them. Now back to it. Things are pretty well laid out. So I think we're going to have a good time with it. Simplified of names. These are numbered, which is awesome. So we might talk about the location screen, e.g. but it might be quicker to just call it screen one. If you want to comment on something, please include the number. That's the best approach. Now back to it. I see we need to include both the left and the right menu, which is not something google recommends. But I think this is needed because of those filters that are going to help the user find a specific restaurant. Finally, we have to be careful about the different flows of the app. We have multiple avenues. A, when the user is registered, that's important. Be when he doesn't have an account and he skips the location, so we don't have an address and see when he's not registered, but he provides an address. This won't affect us too much in the initial design stages, but in the prototyping phase, we're going to have to sort out all of these scenarios. We're going to have to make the app and directive. So it's gonna be quite tricky, but we'll see at that point in the prototyping phase, All in all, we can start the design process by checking out the competition in this niche, we have to look for inspiration. We have to see what other people are doing. So let's continue in the next clip. 13. Analyze the app’s competitors – Part 1: Welcome back. At this point, the brief shouldn't be a mystery. If you haven't gone to the width, please pause the video and analyze it that only the next step is to check out the app's competition to see what's going on in this particular sector. Here we have a niche that's fairly well-established, food delivery that are more than enough apps that we can analyze. Another, do one better understand the project's requirements and to get some inspiration regarding the overall style. Please note that these apps are location-based. What I'm about to show you may not be available in your country, but you do have several screenshots from each app attached to the course. The line-up includes the liver though, Food Panda, the Live, which is an app that has the exact same name, but it's purely coincidental. Takeaway and then hit Menu. Now, all labs are constantly updated, so the live versions might be different. Actually, I'm quite sure that different. Still, the screenshots will be the reference point. Okay, let's start out with the live so we can get it out of the way. Now, the initial screen is a big mess. We have bank yellow, navy blue, and curiously the main button is yellow as well. The background seems to be a picture of the city, but it's blocked by this solid rectangle, which makes no sense. When you search, even though you don't understand my language, Romanian, you might see that this text is quite low quality, very pixelated, and somewhat distorted. And that's because these have not actually texts layers, officially called strings by codons. Instead, this is an image that's being stretched out. That's bad practice and it's not good Looking at all. Okay, now let's switch to the listing page. Here we immediately see the little attention to detail. There's no empty space on either side. So if we drag out some lines, you can see the alignment is out of whack. The topography is modest, the fonts are boring. There's no diversity in this region. There's no particular the hierarchy that's easily spotted. Overall of four out of ten. And I'm being generous. When we go inside the restaurant, we can see the tabs have these vertical dividers, which I've not often seen in Android apps. On top of that, there's no elevation anywhere. You can spot any drop shadow whatsoever. Now, that's not exactly a bad thing, but this have falls short in the design department. Worse than that, the swipe gesture that's often used to quickly change dabs. Well, it doesn't actually work. That's quite a shock. Instead, you have to manually tap on these items, or we could use these arrows, which are from Windows XP times. Now, I honestly have no idea what these guys were thinking. This is a prime example of an app that was made by developers and business people know designers with involved, I promise you that in the top right, care to guess what that icon does. Is it additional information about the restaurant, maybe a share function, Add to Favorites? And the answer is, I don't know. When I tap it, nothing happens. It doesn't have a downstate, so I'm not sure if it actually works. But moving on, the checkout is also laughable. Everything is randomly thrown together. I think they wanted to center these texts layers, but everything is off. Try as you might, you won't find many imaginary lines. Nothing is aligned. Oh, and this deliver the icon, takes the cake. I changed my mind. It's a two out of ten, another four. Okay. Let's move on to take away.com, which is a company that's buying delivery apps left and right, does nothing blocking us. Like it was in the lives case where you couldn't see anything unless you put in an address with an S for the location, for the GPS permission. So the app basically wants our location and immediately a list of restaurants is going to pop up. Now, I personally ordered a lot of foods, so I'm actually quite a heavy user of these apps. Takeaway is not one of them. I don't like it and let me tell you why. Everything is confusing. Nothing is where I would expect that to be. Sure. The restaurant listing is lovely. Nice, clean logos on the left. Clear the bold titles on the right. Interesting icons underneath. But that's where the happy train stops. Can you tell me which of these two restaurants has a higher rating? Because if you've ever used booking.com, I think you know, there's a huge difference in quality. Between an 8.0 hotel and an 8.9 hotel. Or how about IMDB? If you like movies, 6.1 film versus a 6.91, night and day. What I'm trying to say is 4.5 stars for two restaurants doesn't tell me anything. I need more information in order to make a decision. Keep in mind, I have over 50 restaurants in my area. So this star system, without any other information, is not good enough. But let's go back to the design for the moment. I loved the orange. It really shines through and it has a nice zinc to add. It's fresh. It's grasp the icons of again, nice and lovely. And we have an interesting switch that changes the way the app works, either in the Liberty mode or pickup. That's well-executed. The fonts used aren't out of this world. And the same can be said about their icons, decent, but not great. Inside the restaurant, everything is well spaced out. But curiously, they went for this weird deal shade for the call to action color. This is quite odd. Now, there's a tab system that allows you to swipe between categories as expected by any mobile user. Some dishes have descriptions, but others don't. Regarding the photos of the dish. Same story. Now, the checkout is really lackluster. Lots of dividers, lots of gray, little attention to detail regarding typography. But then let's pause the design side. This would be a 6/7 out of ten in my book, the problem, like I said at the beginning, is the functionality. Just have a look at the card system. It's somewhere in the top right, but not in the action bar. No, it's actually an FAB of floating action button, so it just hovers about. That's quite unusual. Deb system has fonts that are way too big, and this makes it hard for me to know what's available in the restaurant. The left menu is actually on the right side. It's also completely custom. Now, I'm not saying that's a bad thing, but it's another thing that I have to get used to. These four icons above the restaurant listing. Again, quite odd. This is one app that hasn't even considered the official guidelines of material design. They didn't care at all. And it feels like it overall, the app in my hands, it feels clunky. It's hard to put into words, but it just doesn't feel right. Overall, this is a much better AB design than the live the previous one. But I don't think I would rate it more than a five out of ten, maybe six if I'm super generous. Now, let's go on to help menu, which has a totally different approach. First, I loved the onboarding process, meaning the first few initial screens that tell you about the app. Nice, clean design. And once you enter the app, it shows me a list of restaurants based on the address that I put in. Now, the listing is very easy on the eye. But there's a problem regarding functionality. You don't have any way to sort these restaurants. You have to enter each one and see what's what. And this is the vibe throughout the app. You have to tap a lot to get to the finish line. A lot of clicks in short, where some apps wants you to arrive at the checkout phase and four tabs or less. Here that number is easily doubled. You have to put in a lot of work. When you tap an entry, this is what you get. Again, lovely design. This is an eight and my book from a design point of view. Here's the restaurant's menu. We have a two column approach, but I'm not sure if this is the best choice. Should we get to see more items? But the luck isn't all that great because of this height. It feels too small. It seems unnatural. It feels like something is off. And the fonts, they've not ready there. It all seems thrown together. Now when dishes have photos, it's a bit of experience, but overall, this is a mixed bag. The floating action button is confusing as well. I'm not too sure what's up with this button. After some investigating, I do believe that this allows me to do a group by whatever that is. Basically, it's something about ordering with your friends. But why place it so front-and-center? Anyway, the background is a bit too strong, the gray a bit too dark for my taste. It stands out too much. The dapp system looks nice enough and the icons from the ActionBar are interesting as well. It's difficult rated in some parts it's a seven, maybe even an aid. While in other bonds, is it the other four foot? Now, let's give it a 6.5 and move on to the liver. But we're gonna do that in the next clip. Thank you. 14. Analyze the app’s competitors – Part 2: Welcome back. We're now at the liver. Do, let's analyze it and see if this is a source of inspiration. The first impression is great. The topography is spot on, it has character, it adds value to the design. It's easy to read. The next thing that I notice is the horizontal card system that's used to showcase feature the restaurants. The shadow is pretty strong, considering the background seems to be pure white, but I do like it. Up top. We have some type of ad, but notice how nicely it stands on top of that diagonal line. I also appreciate how they've used that small icon in the action bar area. Sure, it's wasted space, but it shows they care. It's all about branding and making sure that you know that you're in their app. You're then the liver though. As for the listing itself, I love how the delivery time is carved into the photo. I appreciate the hierarchy in the listing. I think that's very well-executed. We have the title in bold, various tags in a smaller washed-out color. The delivery time is set aside and has been given quite a lot of real estate because of its importance. And finally, we have the rating system and percentages. But what I truly love is this splash of color to do the emoji. Now, another way of translating the hierarchy principle inside the listing is this. You know, where the luck, you can easily scan various areas and know what's important and what's not. That's the hierarchy principle. The content is easily distinguished and this makes for a great experience. It feels effortless. Now, if we switch back to the live, we can see that everything is basically bunched up together. This feels crowded and basically bland, boring without any taste, even though it features just about the same amount of elements. Now, going back to the liver, though, this app doesn't seem to follow the material design guidelines. At the top, there's no tab system, nor is this irregular the action bar. Instead we get to dropdowns, which are very uncommon. In the most recent update. They got rid of them and I'm happy they made that change. The size of the cards is quite generous. Well that improves the impact of the app. You can only fit about to restaurants inside one screen. And the second one is a bit cut off. Now, for the small city, this makes sense, right? But for the larger ones with loads of restaurants, it's gonna be quite difficult. Basically after the six or seven listings, you're just gonna get bored. Now, the photos make a big impression and it's definitely the best looking gap out of the bunch. But I would love to see a bit of use of this space. Will see what's possible when we start designing. We also see a bottom bar, which includes the search feature. Now, okay, pretty good. What's interesting is the color scheme, white and Thiel, nothing else. The content is left the shine, probably because the pictures are quite heavy in detail. That's quite smart. And probably we're gonna do the same in our own design. Even more so considering the fact that most restaurants don't have great photos of the food. In most cases, the photos are dark, the plates are busy and the colors aren't usually flattering. Again, you can see the live for that. The difference is night and day. Back to the initial screen, we have an extended floating action button that helps you fill there. This is well-executed, but once you tap it, you're going to see another sign that takes this app to a nine out of ten, if not more, superb icons that are in tune with the abs vibe. We get beautiful icons that are in tune with the apps of vibe. Nice images underneath with great contrast for text. Clear call-to-action button. There's little to say on the negative side. Going inside the listing, we see the restaurants photo at the top and all the menu items are in the scrollable list. No tab system to speak of. The fonts used are easy on the eye, then you can easily tell what's what. I don't like. The fact that there are no thumbnails for the dishes, especially since there's enough room on the left side. On the other hand, it does make it quite airy. It does feel like it has enough reading room. Okay, now let's add something to our cart and see how that goes. Okay, we get a sticky bar at the bottom that shows us the current basket, and it's separated by a shadow at the top. It's curious the button has a shadow as well. I'm not sure that I agree with that. Anyway, the checkout is another strong point. Everything is easy to follow and they've used these cards intelligently, a bit heavy handed with that stroke, but still good work. Overall, the app looks lovely and that's because its elements are the well spaced out. Their fonts are nice and interesting and the content is left to shine. A strong nine out of ten. Let's move on to Food Panda to see another bulge on the same subject. Here, I immediately recognize the same one colored style, and this is used to draw the user's attention. If you can tap it, then it's pink slash red. I do like this style because this guides the user without making him think. The first impression is that this is the best designed app out of the lot, 9.5 out of ten. The main difference between it and the level is the atmosphere. That's a bit friendlier, while this is a bit more professional, let's focus on the listing though. There's more going on underneath the photo. So this does look a bit busier than the liver to the fonts used are, okay, but they lacked that special node that sets them apart. Let's quickly go back to the liver do and check out the delivery time. Notice how these numbers stand out, especially the ones. Ideally, that's the type of personality I'm looking for in my typefaces. Food Panda also has a floating action button, probably to help you check out. It's clear enough. The ActionBar is a staple of how it should be done. It's well-defined, it has proper hierarchy, well spaced out. If there's one thing that I would add is the fact that I wouldn't have liked the search icon to be left aligned with the hamburger menu. That would have made it perfect. Still, overall, this is one of the best ones I've seen so far. Let's move on to the restaurants listing page. Here we get tabs that have placed underneath the restaurants main photo. This looks nice. It's functional, but I'm not in love with the star system as it's shown here. I think it gets lost. As for the actual items, that spec ratio is a bit odd. The photos are way too tall and that's gonna be a problem for the most restaurants. When that other antennae thumbnails. It's another thing though one could argue that this is to plane two basic. We're going to have to find a good solution in our design when it comes down to it, neither of these options work for me. Deliver that was simply abandon the idea of showing a photo of the dish. But in other Wireframe, we do see it as a requirement. Overall. This is tied or maybe slightly behind the liver though. Let's call it the nine, maybe an 8.5. Now, the thing is I could easily carry on, but I want you to explore some of these apps yourself or find similar ones. The goal is to understand how they tried to solve various issues. I want you to tell me what you like and what you don't like about them. To sum this up, the conclusions of this lecture are the following. We should use one single beautiful color in our app and let the content shine. We need to be careful about the aspect ratio of the photos in the restaurant listing. We need a great looking font that add something to the design, something with personality. Finally, we should do our best to include at least two complete restaurants in the initial listing screen. As a tip, the more apps you see, the more the inflammation you're going to get. This process should take you at least 2 h. But for time considerations, I had to cut it short. Please. Don't be afraid to be ruthless in your comments. Your goal is to pick apart every component and see if it's something you should avoid. Or on the contrary, maybe use it as inspiration. Take a lot of screenshots and put them side-by-side so you can easily go back and forth. Okay, Let's continue. 15. Set the layout for the first two screens: Welcome back. Did you explored the competition for yourself? Hopefully you've gone through several labs on your own phone, or at least you've looked at the screenshots I attached to the previous lecture. Now, it's time to start Adobe XD. Custom size is fine. The settings that I'm going to use are based on material design 2.3. Now, to keep things simple, go with 720 for the width and 15, 24 the height. Now, how am I getting these numbers? I'm doubling the values from the old Samsung Galaxy S. Then. Now, why am I doubling it? So it's going to look better when we reviewed the design. So we can see everything nice and crisp without getting eyeglasses. That's the only reason we're doubling it to make it look nice. This doesn't matter for the code there. He doesn't care. The coding process is not affected in any way. Okay, Let's enable a vertical scroll. And the viewport simply means the cut-off point, the point where you have to scroll down to see more content. Initially, you're going to get 15, 20 pixels, and then whatever's underneath will require the scroll. Okay, great. Next I have two monitors to displays, and I'm going to constantly look at the wireframe and the documentation on the other one. I won't mention that every time. If you don't have a second display, please drag the wireframe inside the program and shrink it a bit. Okay, Now what's the goal? Well, we want to set our layout, the foundation of the project with no design considerations. So no colors, no fonts, nothing just basic stuff. We want rectangles and texts layers in their purest form. After we have a base of foundation. After that we have a few screens. Then we're going to start to experiment with various colors, fonts, and whatnot. Okay, Now let's start with the first art board, whether we need the apps logo, this is attached to the course. Now, the icon itself is not styled in any way, nor does it have any text. This will help us keep it in line with the rest of the design. This is ideal. Okay, I'm going to center it and place it in no particular position at the top of the screen. Something about their. Next, I'm going to add the location field to a rectangle. This should be about 600 pixels wide and about 80 pixels tall. I like to use the properties panel for that. Remember w for the width, h for the height. These are not precise values because that comes later in the styling stage. It's just ballpark numbers. Please be aware of something. I'm always going to center everything in the art board, these tools. Now, I don't want to sound like a broken record, so I won't mention it absolutely. Every single time. Plus I won't tell you when I rename or when a group layers that are given this is an absolute must. You have to be organized. Make the rectangle a very light gray. And that's because we're going to add some texts and we want some great contrast. Let's write something like an interview or location, something like that. Now, we won't add an icon at this stage, but we can write GPS to remind ourselves that we're going to need one here. We can also duplicate these layers and create a Submit button. You can make a copy however you want. I like to hold down the Alt key, does the Option key on the Mac, and then drag out a copy like so. If you don't like doing that, you can also use control the gay, nice. Let's change up the text. Shrink the button to about 250 pixels. And of course, center everything that text inside the button. And then the entire element with the screen, with our board. Please remember to work along on your second viewing by pausing as often as you need to. Now we have two more things to add. Skip this step and create an account slash login. The first one can be a text layer because it's not important enough. We don't really want people to use it. The other one should be a button. So let's add it anywhere near the bottom. Let's say create an account slash login now. Okay, nice. Remember, hit Escape when you want to finish editing. Okay, Let's resize it to about 500 pixels, so double the size of the Submit button. Again, these are not final values, but it's a good starting point. From the brief. I understand that account creation actually happens in a different screen. So actually, that's about it here. But what this means is this gives us a lot of freedom in our designing. What we have to be clear about consistency. This is a good chance to talk about that. E.g. we can make the buttons and the text fields. Let's say Well over the 100 pixels tall, let's say one-third dy, right? And we can explain that decision quite easily. It's for the sake of usability, right? The bigger the burden, the fewer chances for the Minsk legs or the accidental tabs. It makes sense, right? Have big buttons. Take a look at this green here. In this one we have four texts, yields plus a button. So the size that we previously said one-thirty creates a big spacing problem. And obviously it's not okay to use different sizes on different screens. Because again, consistency, we have to make our design decisions based on the entire app as a whole, not as individual elements. So this is why we're creating screens in batches. And with thinking about the size for the entire design, for the entire app. So one-third D would not work. 16. Design the most important screen in the app: Welcome back. Let's move on to the next one by making a copy and removing everything. Now again, let's get back to the basics. This is a good chance to remember our proportions. The status bar has to be 720 by 48. We'll leave it blank rectangle any random color and position it correctly. What I like to do is I like to top align it. Then use left align our gate. Let's drag out a copy for the action bar. And this needs to be resized to 112 pixels. 112 pixels. This is where the properties panel pays off, changes color to something very different. Maybe a very light gray. Just in case you don't like both terms. By the way, you can select multiple rectangles at once, like so, and just disable it just like that. Now, let's add some texts layers. We need city filter and search. The first one is for the left side, while the other two for the right side, I suggest you use shift when creating copies because that helps you keep your texts layers on the same line. Basically Alt and Shift while dragging. Awesome. Okay, Now the drop-down triangle can be created by using the polygon tool. Make sure you hold Shift when you drag, so you get a perfect triangle. Check the right side, then set the number of coordinates to TV. That's the default values. So I'm good to go here. Set the point downwards. You may need to rotate that changes color to absolutely anything you want, probably black. One thing to note, some people prefer to use the pen tool for something like this. Other people like to download icons. The keyword right now is speed. So do whatever you like, just do it fast. Now it gets interesting. Remember we want to display as many restaurants as possible without squeezing and cluttering all the elements. So let's start with a rectangle that's going to be 600 by 400 pixels, as this will cover the most of the screen's width. Plus we'll have a decent aspect ratio to begin with. The real size is gonna be said later, but this is a good starting point. So somewhat wide and fairly short. Switch to the move tool and place it just underneath the action bar. Even though we're rushing along, I'm going to steal center. Everything is good. Practice. Now gate, Let's add some dummy text. The title, let's go with dessert heaven, right next to it. Let's write something like delivery time 30 min. I'm, the category is twofold. One for the food type and another one for the cosine type. Now, okay. Whatever this is, the brief That's telling me this this should be Desert and international life. Thank again, it really doesn't matter what we put in. We just want to lay out some information. So we have something to look at, something to work with. The rating. Let's go with 92 per cent out of 24 votes. This covers all the elements according to the wireframe and brief. Okay, now let's select absolutely everything like so and see if we can fit two of them. Remember, that's an important requirement. Yes, this works. We can fit two whole restaurants, though. Again, this is just a rough draft. Nothing about it, There's precise. So we have to take it with a grain of salt. But let's sum it up. So far we recreate the two screens from the wireframe with the purpose of having something to work with. In the next lectures, we've talked about being aware of the impact of our decisions. Specifically how making a text field or the button toddler is going to affect the entire app and may cause problems. We stopped it out strong. I'm gonna see you in a second after the break. Thank you. 17. Create the restaurant details screen: Welcome back. Let's move on to the restaurants detail screen where all the dishes are listed. So without any further ado, let's get to work. Let's copy screen them, but do, and let's start with a top to bottom approach by replacing the city with any random restaurant name. Let's call it mature their pizza delivery. That sounds Italian enough, right? The drop-down and Filter have to be removed. But we'll keep the last one and rename it. This should say Info. And this is going to be an icon that's going to show us the restaurants address, screen 15 and then the views screen 16. If we look at the wireframe, we can see some tabs, but it's unclear whether these are fixed or the scrollable. We're going to start with the fixed version. I think that's more likely. First, copy the action bar and drop its size to 96 pixels. Of course change the color so you can see what's going on. Back to the size for the moment. 96 is big enough from a usability standpoint, you can actually use it, but small enough so it doesn't eat up too much space. This is also the recommended value in the official Google guide. Remove the two listing groups if you haven't done so already. The text, I'm going to use breakfast, lunch, and dinner as my main items. This means that three tab design, so to 40 wide rectangle is gonna be needed for the act of item. So let's grab the rectangle tool, click and drag out any shape, then change its size to 40 by four pixels. This can be left blank for now, but please remove the stroke. This is one thing I absolutely dislike about Adobe XD. The fill is always white and there's a board that applied by default. This is not ideal. Anyway, make sure you place it correctly at the bottom edge of the tabs background. This is an optional step, but any experience designer is going to do it center breakfast with this line to make sure that this is clearly the active tab. Obviously centered the texts vertically as well. And then do the same for lunch. Just make sure you understand this principle. You select two layers, the text and the rectangle, and then you use the alignment tools. But what about dinner though? Vertically, That's not an issue. Draw out a box to select both of them and use the proper command. Okay, nice, but what about horizontally? Well, here's the track. Select the black line and write the line at. If only one layer is selected, the alignment worlds will consider the screen, the art board, as the second element. So a line right makes the line touch the right side. Now, hold down shift and click on dinner to select that. Center it horizontally, and that's it. Well, there's actually one more step. We have to put a black line on the left side, de-select by clicking anywhere. Then select that, then just let the line at. Awesome. Now my advice is you work zoomed in so you can easily grab the correct layers. And just like that, the tab system is, then, let's have a look at the wireframe yet again, keep in mind, this is not the end-all be-all for our design. We can experiment with various looks if we have any ideas. But for now, I think we're going to keep it simple and follow the wireframe, meaning a one card layout. If we're not happy with a one card layout, we can try a different approach, though. I seriously disliked the two column design that we saw in the previous video. We have to create an image holder for each dish, a thumbnail. I think this needs to be a somewhat squared shape, probably a bit on the wider side. So let's start with a rectangle with a size of say, two to five by one AD. Like I said, not exactly squared, but not too tall because we saw that doesn't work too well. Place it 30 pixels from the dabs. Remember, hold down the Alt key, that's the Option key on the Mac. Then use your arrow keys with or without shift would shift does, is it helps you move the layer and ten pixel increments. This is looking nice. Okay, for now, let's move back for the title and the description. I have something prepared in an ODE bad, the title of our GU, all for now. Now, here's the thing. I could've used, Lorem Ipsum, but I think a real title helps out a lot. The description should be a paragraph text layer just in case you want to quickly change up your content. So this means you have to click and drag. Now locate the lines should be enough, though we might drop it to only do just in case we're not able to display enough products in the screen without scrolling. That is. Okay. Now, by the way, in case you want some quick dummy text, I recommend lipson.com. This is a great website for the fake text, fake content all in all. Take your time with it and make sure you don't rush these essential bits. This is the foundation of our design. So if you get a fixed idea and you stay with it, you might put yourself into a corner. So again, be flexible, e.g. the size of the thumbnails. I have no idea if this is good enough. That was one point where the competition failed or the opposite, they shined. Going back to our listing, we have to add the price, say 14 bucks. This is gonna be the third line. And next wet, Let's put in the weight of the product, which as I understand is quite important. This is all from the brief, by the way, here, Let's write 350 g. Finally, we're going to need an Add to Cart texts. Though I'm pretty sure this is going to be an icon. But for now, let's rather than give me a moment to sort all this, I like to align everything even though they're going to move about when we start playing around with the size and the font. But again, this is something that I absolutely want to do because it just makes me feel better. Ideally, we want an imaginary path for the user to see the thumbnail, the title, the price, the product weight, and then the Add to Cart button. Everything has to flow. Then later on, we have to make it happen to the size and color to basically help this move along. Now, even though things are quite bunched up together, Let's wrap this up with a divider. Use the line to all hot key L and set it to maybe two pixels, so it's easier to select one pixel. Lines are incredibly hard to pick up. Now, why are we using a divider? Because in a tight space, this helps us separate our content. Without it, we would have to use a lot more empty space. And we want to avoid that. There's, by the way, it should be placed about 30 pixels from the photo, just so we have that beautiful symmetry. Now to wrap this up, group everything together because we want to make some copies. Let's populate the entire screen with clones. And let's see where we're at. What I love is this superb option called Repeat Grid that can really speed things along, but we're not going to use it. I want you to gain speed the old-fashioned way. I want you to do some manual labor. After the last one is placed, let's select all of them and use this command, distribute now that all neatly aligned and this is sketching shape. Let's pause for a moment. Thank you. 18. How to make great design choices: Welcome back. I'd like to pause so we can discuss an important point. How are we supposed to make important design decisions in this particular project? Do we go for the full screen background image in the first art board? Or do we keep it simple? And if we keep it simple, do we go plain white or do we use a subtle pattern that's food-related? If we're going to use a white background, how is that going to affect the next screen? Are we going to use white for the action bar? That means that we're going to need to use white for the status bar as well. So as you can see when decision impacts all the rest. And that's because an app needs to be cohesive, everything has to work together. So then the question remains, how are we supposed to decide? The color scheme isn't defined either. So that's another factor. Do we go with green to imply freshness? Blue because it's calming and safe. Red or orange because it's Bolden hot. There's a lot of questions like this, and I believe this is why a lot of designers spent hours without making any progress. Here's my answer. You do them all. Yeah. You heard that, right? You create all your ideas. You put them side-by-side. And that's how you not only get better, but you also choose a style for the entire app. This is called an iterative process, where you have one idea you may get, then you drag out a new screen and you try out another idea, another idea, and another one. Let me show you an example. I had to create a schedule screen where we had some appointments as well as a new one that had to be shown for approval now. Okay. The new one had two adjustable unavailable periods which were about 15 min each. Okay. Now, that's quite a lot to handle. The schedule ranged from 06:00 A.M. to 12:00 P.M. so that would be quite a lot of hours. Naturally, I wanted to fit as many as possible in one single screen to minimize scrolling. That was my objective. But I also had to have enough space to make the screen usable for regular people, not just elite snipers or ends. We had to have big buttons. So this was a challenge. So what did I do? I started exactly like I showed you in the previous lecture. I added all the elements in there, the simplest form. And then I started working, I started experimenting. I went in by playing with various distances between each line. I constantly, they viewed each version on my phone and I made steady progress with each version. Next king, the meat of the design, the actual appointment bubbles. And I want to show you how that word here. I tried to show the time inside the rectangle as well as some text that describes was there. Then I taught the red is a bit too much, so I tried to clean it up a bit. Thus, I left one single red line and then I added the subtle pattern that marks that area off. Now that was marginally better but not a whole lot. Then I created another version, another variation, where there's no overlapping areas just to get a better sense of how this design applies in various circumstances. I then spotter the problem. The green I used for new appointment is the same green as the call-to-action button. So I decided to change it. This became purple. I then added an Edit button to make sure that this is clearly editable. Okay, but then I said, Cool, Let's try other styles. That's what I thought. So what I did was I rounded the rectangle completely and then I kept the single red line. I then squared it off and I let it run from edge to edge. I also drop the red line and they replaced it with this symbol. The colors were clashing a bit, so I made yet another copy and I change that to purple. I also made it touch the rectangle, a very small detail, but everything was on the table. Okay. Isolated. This looks fairly well. But what about when it's next to another appointment? That was the next thing on my mind. So I created a new screen for that specific purpose. On and on it went and you can see various other cases, colors, schemes, symbols, and whatnot. Now, the gut is short. In the end, I decided to go with this design. A big jump from where I started. This is what I mean by iterative process iteration. Iterative. You get an idea, you create that as fast as possible, and then you move on to the next concept. You create that new version next the original one, and you compare them. You bank out several ideas until you're empty. You try to improve each version, but you can also mix and match elements from different ideas. Basically, repeat until you're happy. Sometimes it takes maybe a half an hour for the screen. Sometimes it may take you days. You need to take constant breaks where you don't look at your designs at all. Then you come back and check it again. Each variation brings you closer to the best version you're capable of drawing. So whether you call these iterations variations, versions, or whatever else, the idea remains, you have to take the ideas from your mind and put them on the Canvas. This is my mindset in any project. 19. Create different versions for the first screen: Welcome back. It's time to get to work without food delivery app yet again, now we have a couple of screens that are waiting for some attention. Let's start with the location screen. And the first idea I want to try out is the full screen background image, which is a very popular choice in this niche. To find great, totally free photos. Use unsplash.com. If the project has a decent budget, you can also use Adobe stock, but let's start out free. Here. You're probably going to look for the food and we're going to download everything that sparks are and trust no more than ten images though. Ideally, a top view image is probably going to look best. But let's keep an open mind about that. Once I see something interesting, I'm going to hit the Download button. Now, the process is fairly simple. Choose several photos and then drag them into Adobe XD. I already have some selected, but I promise I chose them exactly like I told you. I relabeled them 1-6 so you can easily follow along. Here's the thing. Before we add them, Let's add a rectangle that's the size of the art board. This way the photo is going to be resized automatically. This is quite helpful. So drag a rectangle and focus on the properties panel. Here. We're going to change its size to 720 by 15, 20. Okay, now, the main thing is this change the fill to something dark and disabled the border. Now k. Finally, the rectangle should not be on top of all the other layers. So go to the layers panel, click and drag it down just like that. Okay, Awesome. Now we're ready to drag in our photos. This is where the magic starts to happen. Now we're looking for an interesting image that provides good contrast for the logo and all the other actions that are available in this screen. Number one shows several plates of spaghetti and a few glasses of wine. So it's in line with the app. It makes sense. Now, the first question is, would the logo be white or a solid color? If we go for the first option, we're going to have to make the image a bit darker. If we make it the solid color, the background needs to be as simple as possible. So let's see what's what. First, let's add another rectangle that's pure black, exactly the same size. Okay, now, for the opacity, 50 per cent also should give us a great contrast. Pretty good, pretty good. Now remember the objective is to test things out. It's not a final decision. Okay, Now, let's make the logo white. By the way, this is not a PNG, rather, it's an SVG. In short, this means we can resize it without losing quality. Plus we can change its color by using the fill. Awesome. If this were a PNG, we can undo any of that. But this is looking quite nice. And one thing about logos, they don't need to hit you in the face, like a bag of Brex. Don't make it huge. Just think of what the liberal did. Albeit on the initial listing screen, they use the mini version of the logo. Okay, back to this design, a dark background makes sense, especially since the textfield is probably going to be white. So let's make that happen. We're going to increase the rectangles coordinate radius to five pixels. Square corners. Don't look all that great. Now for the buttons, we're going to do the same. But let's change the color. Let's make them a bright green just to see how a regular call-to-action would look like. Take your time with it and try to cut some corners by sampling colors or by using the properties panel on multiple layers at once. Now, Okay, good stuff. Please make all these texts layers white. And don't forget about skip this step. It's there, but you might not see it too well. No K change its color, its position, or maybe both. I think at the bottom of the screen is going to look a bit better, right? We can't judge this look right off the bat because we have to compare it to something else. Not to mention that these are the broad strokes. We aren't operating at a fine level just yet. Currently we're looking for the general direction. And once we experiment with these couple of screens, we can come back and refine that, do perfection. For now, let's try another approach. Let's duplicate that and try an alternative where maybe the logo is any type of solid color, maybe a dark blue, e.g. so a fairly safe choice. Now, the logo might need to be raised a little bit and the photo needs to come down. Now K. And while we're here, grab the type tool, hotkey D, and let's write the live right underneath the icon so we can get a better sense of things. Now for the formatting, keep the standard font, but make it bold and maybe 60 pixels or something like that. Please make sure that you use the same color codon it. We don't want the rainbow on our hands. I repeat with just playing at this point, this is not the final font. This is not the final look. Now gate. Now in the past, I might have suggested a fade away gradient for the photo. We could do that in Photoshop, but I don't think that's the right look. Most apps have stopped using reflections or the fade away is quite awhile ago. So I think the full-screen version might be best. Okay, this can work, but let's try out some model images in this version. Here, the process is this, hide the 50 per cent black layer by using this icon here. Great. Next, Drag another image, Image Tool above the original one. Finally, reveal the black rectangle. Now, I can't say that I love it. Let me quickly go through all the options. We need something rich, extravagant, and interesting to look at. The gap in the lower left isn't going to fly. So this is no good. Let's try photo number to be. Now, this features friends eating together, a great concept, but the aspect ratio is way off so we lose most of its Sparkle. Next, photo number five. This works as well, but I think the previous one is a better fit. The main problem is the food shown. This is an egg based salad. Now, the target audience expects good quality food, but although we are not talking about upper management, we're not talking fine dining. An egg salad, isn't the right look, I think it's not going to be something that looks appetizing. I think hamburgers, fast, stuff like that, will work for the target audience. Finally, number six, this has that rich, plentiful look. But I'm not loving is the food itself. It's too focused on desserts. We do see some eggs in the background. But again, it's more towards deserts. Option for this works and I think it checks all the right boxes. A good choice immediately stands out, and this is one of them. It has a top view. It features interesting multicolor food. The wood table has a nice cozy, familiar field. So yeah, pretty good option for looks best. Now, let me bring it back. Now, this begs the question, what else can we do here? The only idea that comes to mind is a pure white background or maybe a subtle pattern that's maybe an off-white color. Now, I'm not going to make that happen because apps that are absolutely swimming and white, I've usually high end. And this is not the case. Think about the Michelin star restaurant or the big fashion named the likes of product e.g. those are brands that can rock a minimalist design with just maybe a splash of color, but most of it is pure white. This is not the case here, so I'm not even going to try it. In conclusion, at this point, we'll stick with all the initial 50% black concept and photo number four. This our board can be thrown away. It was a decent idea, but it's not going to work. Okay, I'm gonna see you in a second. 20. Explore different ideas for the restaurant's page: Welcome back. Let's continue with the restaurant listing screen, which is the second thing that the user is going to see. This is one of the most important screens in the app. So we need to experiment with different lags. From the get-go. I know that I want to see a version without a background, so pure white. And one would maybe a light gray that will provide the good contrast for our listings, which should have white cards. Now, I came up with those ideas by researching the competition. And these are very two common styles, very popular ones. Okay, let's kick things off with the actual content. I've prepared this image of a pancake for the restaurants cover, so I'm going to drag it in, but let's talk numbers. Now, the official material design guidelines says we need 16 dB on either side, which translates to 32 pixels in our case. Now, let's do some math, 720 -64, that the two on each side means 656 pixels, 656. So this is the rectangle's width. That's what we need to use for the dividers in the edit screen as well. Now again, please center it after you resize it, it goes without saying now, it will probably look better with slightly rounded corners. So let's go with five pixels for the corner radius. And while we're here in the properties panel, disabled the border if you haven't done so already. Like I said, XD adds them in by default. I'm also going to drag out some guides because we have to make sure that everything is on the up and up. You can get guides by moving to the left side of the screen. And you're going to get this cursor, click drag, and thus you have guide. This only works from the left side and the top edge. Okay, while we're at it, let's delete the second entry. We headed there just so we can see if we could fit two of them without scrolling. And indeed, that's okay. Now let's talk hierarchy. We have quite a few items here. And the question is, which is the most important one? I'd have to say the title, right? But very close to it comes the rating as that's the main value of the app. That's what the brief says anyway. Next comes the delivery time, which is surely a deciding factor. And finally, in fourth place with likely going to have the tags related to the food type. These can be used to quickly filter similar food types or the cuisines. The user can tap on them. And obviously the list is going to reload with that particular filter applied. We're talking about the importance because this tells us how these items should be placed and style. So those go hand in hand. You don't look at what's beautiful. You think about their importance for the first version. And I do want to stress first, I'm going to place the title and rating on the same line because of what we talked about, the tags can occupy the second row. And I'd like to place the delivery time somewhere over the photo, similar to what we saw in food Panda zap. Let's move this entire element 32 pixels from the action bar. Okay? Whenever the possible, please aim for symmetry. It just makes the design look that much more polished. Clients, I've never going to tell you the distance on the sides. Is there D2 but on the top it's 38? No, they've never going to tell you that, but trust me, they're going to notice, they're going to feel it in their gut instinct. It's not intellectual, it's not something they can articulate, but they feel it. Okay. Now the title make it 40 pixels, and let's make it bold. The default font is totally fine. What we're looking for, our rough ideas, make it pure black as well. The standard gray is not great. I wanted to repeat. This is not going to be the typeface that we're going to use. I'm just trying things out to see if the importance we gave them makes sense. Aligned the title with the left guide and leave about 20 pixels or so between it and the cover image. For the delivery time, I'm going to place a black rectangle on the top-left side of the cover image. And I think I might add the clock next to it. We're going to do all that later. But for now, let's make sure this is nicely positioned. Then sort that raised up the text and the layers panel so you can actually see it then read that. Okay, now let's lower the rectangles opacity to say 30 per cent of. So this is going to give us great contrast, but you can still see the photo gate. This also is going to give us more room for all the other elements, more space. But the question is, should this be kept white with black text on top of it, or vice versa? Now, I think a black rectangle works a bit better. Let's try it out. So let's change it from white to black. Disabled the border, and then switch to the text layer. This needs to be white, but change its weight to semi bold. So it stands out just a bit more so you can easily read it. When you're done, select both of these layers and center horizontally and then vertically. This item again, should be placed in the top left side. Now the question is why there and not someplace else? Well, I've seen countless apps use this specific location. So I'm going to do the same. Okay, we're going to keep the tags exactly as they are, but we're going to left align them with the title. This is easy because we have that guide the distance. Let's leave about 20 pixels between them. Actually, let's make them a medium gray, something like 777. Now a hex code usually has six characters. But in Adobe XD, if you put in the first three, the other ones are going to be copied and pasted automatically. Okay, let's talk about the rating. I want something similar to the liver rule. So a Smiley face is quite nice that the best place on the web will icons is slab icon.com. But please be aware that most icons need the subscription. I won't show you how I searched for the Smiley face because there's nothing special about that. Just know that I always download the SVG is not PNGs, and that's very important. That's what I recommend you use as well. So here's the final result. You might want to know how to find awesome looking icons. But we'll get to that later on in the course. For the size 40 by 40 is a good way to go. Usually, I would go smaller, but this is a fantastic icon, is quite happy. So why not show it off? Place it then pixels from the text. By the way, I think it's best we make the percentage bold and green because that's the part that really stands out in the listing. They come in it and the line, everything nicely. Keeping these two on the same line as the Bible, but have the element touch the right guide, okay, with making good progress. But it's nothing to shout about yet. Remember, this is just the first version. Let's handle the top part because it's actually throwing me off. I wanted to judge this design without any distractions and these gray rectangles, well, they aren't doing it for me. So let's handle that in the next clip. Thank you. 21. Set up the status bar and the action bar: Welcome back. When I analyze the design, I'd like to do it in context. Now, could we isolate everything and just focus on this card? Sure that we could, but why would we that's why we have to handle the action bar and the status bar. The first option is a very clean look. Both shapes should be white, but we'll have a drop shadow for the action bar so it won't get lost. We have to separate them somehow. Now, this is far better than using a stroke, a drop shadow. So please don't even consider adding a stroke. A border that is stroke is in Photoshop, border is in Adobe XD. Sorry about that. Okay. For the settings, sex and sex. And that's it. Good to go. Nothing special. We have a good drop shadow. Moving along. We're missing important elements from the status bar. So here's a file that the unhealthy out. This resource is attached and I expect you to use it in all your projects. Now again, please use Shift if needed. The idea is this. There's nothing really all that special here. The status bar is basic and super simple, so we shouldn't waste anytime with It. Just copy-paste it, and that's it. Okay, let's replace the city texts layer with San Francisco, written in bold, 40 pixels, pure black, no grape leaves. This is exactly the same as the restaurant's name. Center it with the action bar. Remember, even though this seems like one big continuous block, there's actually a separate rectangle for this specific area. Left. Align it with our guide and we can continue. As you get more and more familiar with XD, I suggest you learn the commands to align horizontally and vertically. Those really help out, so you won't have to move your mouse all the way in the top-right. Move the drop-down icon to if you haven't done so already. Finally, for the sake of time, I'm going to skip ahead and I'm going to show you the icons I've selected for this right area. You have them attached. These should be 40 pixels as well. Centered them inside the rectangle. Please be aware that when you drop them inside the project, don't drop them directly above the rectangle because you have not going to have a good time. You don't want that. Actually, you have to place them a bit lower down. Okay, now write the line, the search icon between them leave 40 pixels, so fat fingers won't be an issue. We forgot the hamburger menu on the left. That's a given, that's a must. Please give me a second to do the magic of everything. Here is a lovely icon. Again, what you want to avoid this, this, see the highlight. If I'm going to let go here, you have not going to have a good time. So let's undo control Z. This is what we actually want. I'm going to use my guides to position it correctly. I'm going to leave 30 pixels between it and San Francisco. Once again, make sure you use align vertical centers, gate. You might ask why I didn't use 40 pixels between these two items. Two middle, the space on the right. And that's because this place is also going to show the user's address when he's logged in. So we're going to need as much space as possible. We have one final thing that needs sorting. The drop-down arrow should be resized to something like 20 pixels by ten. And I think it should be placed as close to the city as possible. Though 30 pixels would look better. I'm going to stick to ten now, okay? Yeah, I'm more than happy with that. After all is said and done, please select all these items and center them inside the action bar. Like so. Great. If everything is in order, nothing should move. Well, maybe a pixel of two. Notice the font seems offset towards the bottom. This really annoys me, but remember, this is not the final typeface. So we can move things along. No worries about that. Okay, this is our first design. Let's select the entry and we'll finally use this option. Repeat grid. As I said, I want to judge it in context. So I'd like to see the entire height occupied by entries. Overall. It's a rough draft. It's just an idea, but it has all the required elements and we can begin to play with them and come up with at least two to the other options. This is how it goes and this is what I recommend you do as well in your own projects. Okay, Let's continue after a quick break. 22. Quickly create another version - the easy way: Welcome back. In this video, we're going to explore several versions for this card. We're going to duplicate it, so we're going to keep things nice and clean. This is also going to help us compare all the versions, all the iterations. Okay, the first thing we should try out is a light gray background. I've actually sampled the nice color from Dribble that has a nice hint of blue. The exact color code is f z though, F11, F8. And it's very subtle. Please be aware there's no rectangles set as a background. This is the color for the entire art board, so you do have to select it in order to change the fill. Okay, Now the text doesn't look great on this gray background. So let's create the base rectangle for the card. Here's the quick process. Select the image by clicking on it. Now create a copy with Control D, D as in duplicate. Move to the Layers panel and select the bottom one. Okay, Now let's increase the height to 500. At the moment, it doesn't make sense, but here's the thing. Click on the fill to open up the color beggar, move it around. And now you're going to see the rectangle will show up, make it pure white, of course. And that's it. We now have a card. Okay, sure. The text doesn't fit and then add a few things to fix. But this is the process. So again, duplicate, select the bottom layer in the layers panel, increase the height, and then play with the fill color. Back to work. Let's select the image and change the coordinate radius at the bottom. Please be aware that we have a repeat grid here. On one hand, this is great because we're affecting all the copies from underneath. But the downside is now we have to hold control and click on the image to actually select that. If you don't do that, Here's what's going to happen. Let me de-select, check the layers panel, right? Nothing is selected. Okay? Now if I simply click above the image, I'm going to select the grid, not the photo itself. So the conclusion is you have to hold down control and click to select an item. Okay, back to the corner radius. We've previously used this field here, right? But if we want to change individual coordinates, we have to click here. My advice is you click on the first one and check the icon. This is showing you what corner you're actually affecting. Use tab to quickly switch to a new one. What we actually want is z though is you though for the last two, just like that. Now, Okay, awesome. Now we can begin to arrange our text layers. Please select both these items and move them 30 pixels inwards. As for the distance on the vertical axis, this really doesn't matter all that much at the moment, but tried to place these two somewhere in the middle, the right side, exactly the same thing there, the pixels. But keep this in line with the title. Never sent the written this situation. Think of these as two individual rows. By the way, this is a method of knowing how to use Control and Shift. Let me clear things up. So hold control and click on the dipole. Now that select that. Assuming we want the grabbed desert as well, we have to hold Shift. Now, check the layers panel for that. So remember, control-click helps you select a single layer. If you then want to pick up several other layers, you're going to have to hold Shift just like that. So again, with using Shift to select multiple layers, keep in mind we're going to remake all these final adjustments, these fine edits when we get to the typography lecture, when we're actually going to choose a font and so on. After a bit of tinkering, this is the first scarred. Please move your mouse in-between the cards so we can adjust this space as well. See this pink rectangle, click Hold, and this is going to allow you to change the space. There. D is absolutely fine. This is what we're going for. Okay? This is our first option. Looking at them side-by-side. I think it's an improvement, but overall, I'm not too happy about this size. Let's duplicate this entire art board so we can try something else. Please make sure that you have enough room. We have loads of room and Adobe XD. Now, let's say that we shrink the card by 40 pixels, e.g. this means the base rectangle has to be reduced to 460 and the end of the one needs to be only to be 60. Next, we need to handle these texts layers. And this is where your speed really kicks in dexterity. That's the keyword rapid file. Select them and move them up for the Pexels. And you know what? While we're here, let's also add a splash of color to these tags. They look boring as they are. Plus he wouldn't know that these are actions. You can actually tap them and you're going to filter your search results. So any colored is gonna do. But I'd rather not use the green from the rating. I'd like to avoid any confusion and really separate these two as much as possible. Red slash orange would be the complete opposite. So let's go with something like that. Again, the colored code doesn't really matter all that much at this point because we're going to set the color scheme a bit later on. Remember that we're still working on the header with still working on the cards themselves. Okay, I'm quite happy with this one. Overall, the aspect ratio is pretty good. It's not as tall as I would like it to be, but it's still quite big. And this translates to a strong visual impact. When you open the app, it's going to look beautiful. The photos are really going to hit you. Now, let's think what else can we do? Make another copy, please control D or Alt, drag. And let's think we could have these tags and the solid background color to show the buttons tappable, there is an action behind them, right? But because I want the rating to have a lot of attention as well, I think I'm going to move that above the photo. So let's get to it. Move the rating in the bottom-right coordinate of the photo. Something around this area. Obviously we can see it, but we can add a rectangle that, that's going to provide a good amount of contrast. The size after the bit of back and forth to 50 by 60 pixels. This is going to work well, and of course, it has to be pure white. Now, here's the thing. You may have issues with moving the rectangle underneath the texts and emoji. Now, that's because we have a repeat grid. So what's the solution? Well, it's quite simple. You have to use a hotkey control left square bracket key. This is going to move the selected layer down. Just like that. If you want to raise it up, it's Control, right? Square bracket key. This is one of the easiest ways to get great legibility while not making any compromises. Just add the rectangle. Leave 30 pixels from the bottom and right edges. As you can see, once I set the value, in this case 30, I'm keeping it. Next, let's increase the roundness to the maximum value and that's going to match the Smiley faces shape. By the way, you can put any ridiculous value here, like 90 or the whatever, is going to go to the max, and that's it. Okay, Let's disable the border. If you haven't done so already. It doesn't help us in any way. But I do think it's time to move the emoji and texts right in the center of this shape, something like that. Just move it around. Always look for both bank lines. Now that we're here, select the basis well, and create a group with Control G. Now why do we need the group? It's only three layers, right? Well, we're probably going to move this around so it's best we stay organized. Call it rating and that thing That's that. Let's take a quick break and we'll continue in a moment. 23. More variations for the card: Welcome back. Let's handle the bags. Here. I'm going to create another rounded rectangle, about 40 pixels tall. The width is going to vary depending on the length of the word, but we want about 20 pixels on each side. So please be generous with it. Remember they use the hotkey control left square bracket key, the position that correctly in the layers panel that moves it down. Okay, this should be orange slash red. But don't worry too much about the shade. Just make sure that text that's pure white is going to be visible. Moving pretty fast because this is standard stuff. So you should be able to follow along. But of course, you have to pause the video often and obviously work along on your second viewing. The coordinates must be rounded to the max to match the rating. Of course, everything has to be centered. Now here's the thing. The height of the card is no good. We simply can't make this work even if we raise the title a bit. I suggest we change this to 470. And after all is said and done, this is how it's supposed to look like. The thing is, not all your ideas are gonna be great and that's totally fine. It's essential you create them as fast as you can and then judge them all by looking at them side-by-side. Let's finish this version by moving around this delivery down from the top left coordinate. This should actually be placed on the same line as the restaurant's title. Let's write in delivery in 30 min. This basic font is fine for now. What we're looking for is balance. Does the card look good? Now, I can't say that I love it with a rating on the right side. Now gate, at the end of this session, we can copy this design and zoom out to see all the options that give it the Fed chance. Make sure everything is buttoned up. If you spend a lot of time on your design, you'll be naturally more inclined to like it better. So all those final adjustments, they do matter, they do influence you. Okay. We started here with no background and large cards. That's clearly the words when the second version looks nice, but the third one is definitely better due to the smaller card size. I also liked the dash of color that orange actually helps a lot. But when I compare these two, I think solid tags were a mistake. This is a bit too busy and not balanced. It was worth a shot, but I'm not going to put you at I liked the floating rating though, but we'll have to work on it some more. Okay, Let's take a break and we're going to continue in just a moment. Thank you. 24. Explore one final layout: Welcome back. I hope you're having fun and you are working with me. But of course, on your second viewing, at this point, we've played around with various options and we know for certain that we want to stick with this version, but no tags. So let's do this. Create another copy of the latest art board, and let's delete the orange rectangles. I do like the colors, so I think we're going to apply it to these texts. Layers will divide them with a hyphen and clean this up. This divider can be black or something like that. As for the distance between them, I would say anywhere 15-20 pixels. The question is, should we keep this position? I think we can play with it a bit more. Here's my idea. Let's move the delivery time underneath the title because the brief says this is a very important factor for the app's users. So this means that the eggs will sit on the right side as before, 30 pixels from the edge. Quite soon we're going to start picking out fonts and this is going to look that much better. During our break, I took the time to find the clock icon that matched all the rest. Here it is. And you can go with 30 by 30 or 40 by 40, whatever you feel works best. The smallest size is fine because it's not an action. 40 pixels is what we used in the action bar. So that would have been appropriate to, but overall, I'm gonna go with the lowest value, 30 by 30. Okay, please take a moment to arrange everything between the clock and the time. I think ten pixels is fine. And obviously everything needs to be centered vertically. The clock icon, the delivery time, and finally, the categories. Just like that. As an optional step, we can shorten this text to deliver the 30 min. I think that's clear enough. We could even remove delivery because we have that clock icon. But I think I'm going to leave it in this version. Finally, while I loved the rating design is covering a significant part of the photo. So here's what I propose. I got inspired by the liver blue. So I want the rating to sit on this edge. This should also balance out the design. The thing is, we do need the drop shadow, so please control click the rectangle and enable it. This is called the bill a button by the way, a bill. Bill as in medicine, because it's fairly round. They could time and place it 30 pixels from the right. But here's the thing. Even though this is not the final font, I think that's too much empty space on either side of it. So select the base rectangle, not the Group, By the way, you would anything else and resize it. And here's a great trick when you want to re-size a layer, but you want to keep its position hold Alt while dragging. That's Alt or the Option key on the Mac. As you can see, you're affecting both ends. This means the content inside that stays centered. So that's the Alt key and the ideal version. This shape is as wide as these two tags. But of course, those will change all the time based on the actual words shown. Here, international is quite long, but obviously other categories may be short, so don't waste your time on it. But yeah, that would be the ideal situation. Having said that, I think this is a great improvement from the previous version. The shadow is too strong. Once we tone it down just a bit. This is going to look quite nice. Six per cent opacity is just fine. Please be aware that the opacity is controlled from this field. You could also use this vertical area, but I like to use the field instead, it's easier. I firmly believe that this is the best version by far. That's my take, but what do you think? Let me know in the comments section and please make sure that you work on your own version when you finish up this one. Okay, Let's take a break. 25. Creatie variations for the action bar: Welcome back. Let's focus on the top region for the moment, we created something very clean, even iOS like, but is this the right way to go? Remember, we went to the width pretty fast because we wanted to analyze the cards without being thrown off. But it's time to create some model options. Let's create a copy so we can explore some options. Make room, and let's get started. The first one that comes to mind is very creative and that's the use of photo for this entire area. This can be a picture of the city and that would be San Francisco, since that's the current one. Let's delete the status bar and expand the action bar and that area. Now why do we want to remove it? Because it's much easier to add a photo inside the single rectangle. If we like it, we can then talk to a coder and see how much effort it would actually take to make this happen. Because again, this does change the cost structure. The thing is, I know that this is possible, but I'm not sure how expensive it is, how difficult it is. But we're going to have that discussion if we love it. Let's see. I paused the video and I went to unsplash.com to select several photos of this iconic bridge. Here they are, and let's try this out. So here's the first one. We have quite a few elements that don't work on a colored background. So in this case I'll quickly make them white. Nothing else, please don't be tempted by yellow, orange, or lime green. Those are the devil's worst spreads. Only white will work. Okay, This isn't all that bad. And we can actually add the black rectangle with a low opacity to improve the legibility of this text. But for now, let's keep going with the photos. Remember that you can always double-click the image and reposition it, or even re-size it. Adobe XD tries its best to place the photo inside the rectangle, but it doesn't always do a good job. So don't be afraid to get in there and change it up. E.g. for the last image, number six, this should be placed way lower down. But we have to think about this strategy. Do we really want to bring a lot of attention to the action bar C? We love the simplicity of the liver though, but this takes us away from that. And I really don't think it's worth that. Some of these photos look okay. But that said it's not amazing, it's not fantastic, it's just okay. So let's not complicate things. So we're going to trash this idea. Instead. Let's try a solid Heather, something simple, a new copy. And we're going to experiment with some bold bright colors, something quite saturated. At the top of my list I have green, orange, purple, and blue. The basic ones safe options that most people like. So what I'm gonna do is I'm going to stack them side-by-side so we can give them a fair shot. So making copies is quite important. Give me a moment while I go through all of these versions. I'm going to have to speed up the video quite a lot. But there's nothing special going on. It's just playing around with the color picker. Okay, Here they are. Now, Do you have a favorite? Do you think any colored option is better than the pure white one? Because the thing is from where I'm standing, I think the white one is best. The photos are rich in color, so I think we're asking for trouble here. White is much more elegant. My conclusion, Let's take with it and refine it. If you think otherwise, just continue with your choice and show me your end result. This is a method of taste, but also how you interpret the brief, how you see what the client wants. Okay. Let's take a break and I'm gonna see you in a second. 26. Design concepts for the restaurant details (3) screen: Welcome back. We're ready to move on to screen them, but the restaurant details design, Let's see what variations we can come up with for this green. But first, let's update that. These rectangles have to be white. And the one for the tabs needs to have a drop shadow enabled. Please remember that we had specific settings for that, not the default settings. It was sex and sex. This is quite important when dealing with shadows because we don't want the shadow to show up at the top of the rectangle. So changing the settings is critical. Now for the status bar that needs to be pure black, except for the rectangle itself. In the past, I used PNGs, actual photos, but for the status bar, it's best you use an item that's adjustable. And the format that you're looking for is SVG. But even better, you can simply copy pasted from any freebie, from any resource from the web. Just look at any freebie for Adobe XD and you're likely to find that. Okay, moving down, we need to add icons. I took a bit of time to find the matching back arrow and the inflammation icon. These needs to be placed exactly like an screen them but do all on the same line. Width enough room. I think we might have skipped adding the guides to this specific screen. So let's add that here. There's a track. Add any rectangle that's 656 pixels wide. As usual, the properties panel is the best way to go when you're looking for the specific size. Then when you have it and you send the red, you can drag out the guide and then delete the extra layer. It's as easy as that. This is one of those hacks that I absolutely love. This technique came out of necessity. And only a freelancer that actually values his time has this approach. If you see someone manually moving a guide pixel by pixel, then you know he's way too relaxed. Within business, please remove the information texts if you haven't done so already and place the info icon next to the guide. Repeat for the other side. Please take your time with it and make sure you do it right. Of course, the easiest way to arrange these is to dry out the big box that grabs them all, then hit the Alignment command and you've made quite a big step. Awesome. Leave 30 pixels between the arrow and the title. So it's nice and airy. This font isn't all that great, but soon enough we're going to start making some finishing touches. That's going to be a bit later on. Now k, Now to match screen number two, we're going to change the screens title to 40 pixels in bold. Again, keep this typeface. Please make it pure black though. Now, this may be a bit risky. Making gets so big, but we'll get everything sorted soon enough and we can make various edits. The main idea here is to stay consistent. I don't like to use different values on random screens. After you set aside, you have to stick with it. And oh, by the way, when you change your size, it's best you align everything once again. For the tabs. Let's do this. Select all of them at once because this is the smartest way to work, then change that orientation to center. This will make them stay-put because my plan is to increase the size to about 24 pixels. That's true for make them bold and obviously black. If they aren't already black, that gray really x me out. I don't like it. We spent quite a lot of time arranging them with the help of that line that shows the active tab. And the thing is I don't want all that effort to be for nothing. So this is why we change that orientation. Okay, let's move on down. Select the first entry and you should have it grouped if you've been following along. If not, please Group at now with Control G. Now again, let's enable a repeat grid from the right. Excellent. Drag this down so we can get a few copies. Obviously the spacing doesn't seem right, but that's a quick facts. We're looking for 30 or 32 pixels. This is one of the gain changes versus Photoshop repeat grid shows us how our design is going to look like when we have loads of entries and that's with minimal effort. Take this line as an example. It's not the right size. It needs to be 656 pixels wide. Will select one of them and use the transform area in the properties panel, type in 656 and move it into place. By the way, let's take this chance to use the x field as well. X is for the horizontal access. So if we type in 32 pixels here, this means the layer is going to be placed 32 pixels from the left edge of the screen. So x horizontal axis, and it starts from the left side. And y vertical axis, it starts from the top. Okay, Now for the photos we need to use unsplash.com. Yet again, I already have something prepared, so I'm going to drag them in all at once above the first rectangle. And because this is a repeat grid, XD knows that I want a different photo in every entry. By the way, if you haven't disabled the border, please do so. No need for it. And while we're here, let me show you another feature of repeat grid. I have this simple node bad. This is just a standard dot TXT file with several of those. If I drag this over with one of the texts layers, say the title of the dish, look what happens. Magic. I'm going to repeat this step for the description price, and then finally for the weight, the name of the notepad is not important. I just rename them so you can easily follow along. The only thing that you need to be aware of is leaving an empty space between your entries. This is how the description dot TXT file looks like. Even though the valve multiple lines, XD knows when the next century starts based on this empty space. And in case there's too much text, just reduce the height of the text layer and that's it. The excess is going to be hidden. Cool. When that's done and you're ready to move on, Let's focus on Add to cart, the main action in this green. Here's the thing. I've looked long and hard, and I decided to use this plus symbol. As I understand it, when you tap this entire region, the product automatically gets added to the cart. There is no other page, there's no other screen. Well, with not add the styling phase just yet, please lightened up the divider so it won't be distracting. This color just doesn't work for me. A very light gray. The likes of ddd should work well as a temporary solution. And yes, you can add letters in the color code. The hex code doesn't only contain numbers, it can contain letters as well. To continue our chain of command from screen tool, I'm going to make the title, price, and weight bold. Let's set them to about 30 pixels. Though that may be a bit much, it might be a bit of a squeeze. Once we get rolling, we can get a better sense of our spacing. Oh, by the way, you move the title down a bit if needed. Though, that's an optional step, remembered. We're going to choose a different font soon enough. Ideally, the title should be aligned with the thumbnail. The price wait, an icon should be bottom aligned with the thumbnail, but as an entire unit. Now, okay, In the meantime, I want to remind you that I want to see two designs from You. Want a perfect replica of what I'm doing here with exactly the same icons, fonts, sizes, and colors as you see in the course. And another one that's your own new photos, new fonts, new icons, new layout, the works. I also want to see different content. Please don't post your work without using a repeat grid. Choose different restaurant names, tags, prices, etc. Don't be lazy about it. Now before we continue, please make these two menu items, gray 777, please. I think this is what we use so far. And that's because we want to show they're not active. Okay. Let's see what we can do here. I have to beg directions. One is to use a photo instead of the action bar, which might work better here than it did in screen number two. And the third one is to provide the client with a scrollable diversion instead of the fixed three Deb design. Let's do all that in the next video after the quick break. Thank you. 27. Variation for the restaurant details: Welcome back. Let's create a copy and get to work on the first variation for this screen, the leader status bar rectangle and raise up the action bar. We want to add an image in this region. But here's the thing. We could make this area even bigger, though it's not as common. We do have that option. From my testing and doing my research. A height of about 270 is going to work fairly well. And again, although it's not standard, it is very doable. The tabs will of course, have to be moved underneath along with all the other dishes. Remember, work smart, e.g. to better see what we're working on, change the background color to something like gray. This way we'll know where the tabs need to start. The idea is to create something similar to Food Panda. Take your time because there are quite a lot of layers. I recommend you zoom in and out so you can have more control. With this change, will probably have to remove one of the dishes from the bottom. But I think that's fine. We have more than enough. Okay, now we can start building on top of this layer. Let's add the restaurants cupboard photo. In this case, it's an image of a pizza. I already have something prepared. Obviously we can see the text, but let's practice the previous technique. Duplicate width controller will the play with the fill, so the image is going to be replaced by a color. Go for pure black. Now, lowered the opacity to say maybe 40 per cent of. So we might need more, but we'll see everything in this area needs to be made white, including the status bar icons. This is going to take a minute, but let me show you how I like to work, especially if I wasn't recording this. I see the status bar is grouped. That's no good. Let's ungroup it like so. Next, I'm going to drag out a box to select all of these layers. Check the layers panel for confirmation. Trouble is I have two extra wounds, the photo and the black rectangle, even though they're named the same, I know which is which. Okay, hold control and click on them in the layers panel to de-select. Now that's done. I can change all of these guys in one go just like that. Awesome. Remember, we have in iteration mode with banking gauss diversions, though the action bar isn't present per se. Still going to keep these two layers positioned in that spot, the back arrow and the title. Let's drop the info icon though because it gets lost in the mix. And let's add the rating elements somewhere in the middle of this area. Though it's not required, it is a nice touch. Pick it up from any of the previous art boards we created. The drop shadow might need intensifying, though in the end, it's not going to make a big difference because here's the thing. Even at 50% opacity, it's barely visible. On a phone. You probably won't notice the shadow when it's all said. And then this is how the variation looks like. Personally, I like it more than the clean version, but it's all a matter of taste. And these situations where you have two very solid options, you can let the client decide. I'm going to keep both of them, and then we can move on to the scrollable tab option. Let's use the initial concept for it where the action bar is standard. So let's make another copy. And these should be all side-by-side by the way, so we can easily judge them. Here the main difference is the menu items are all placed on one single text layer and they're pushed towards the right. So delete these two and come up with five or six food categories. I have something prepared in a Notepad, but you can come up with your own. The thing is this is all coming from the official material designs guideline. It's either the fixed tabs or the scrollable ones. So this is where I'm getting all these options now regarding scrollable dabs, again, by using the facial measurements, you could potentially wing it and simply align things as you see fit. Just eyeball it. Or you can use the official measurement. I'm going to go for that option and you can see it in action. So you can see what's, what. First of all, the rectangle, this has to be changed to 180 pixels, which is the minimum according to the guide. Then you have to place it 140 pixels away from the edge. That's 52 dp from the official guide. Now, remembered how you can do this easily. You can use the x field from the properties panel x for the horizontal axis, and it always starts from the left. Excellent. Now, regarding past my first step, this needs to be horizontally aligned with the rectangle. But of course, that's a problem because this layer contains loads of menu items. Now, in this case, I will approximate that we could add a rectangle on either side and we could do some manual back-and-forth. But I'm just going to approximate it. When you're done, please change the color of all the other tabs to a washed-out gray. The color of the code we set as triple seven, so 777. There's one thing that I'd like to address. You may be curious about the background and why I left it white, because we could try an off-white color. But here I decided not to. I tried it off camera and it just didn't look right. But just so develop no secrets kids have that would look like and in my view, this is muddy, dirty, busy, far from the air the look we want to create. Now, here's the thing. Another option would be to create rectangles, white rectangles, which are called cards for each dish. But that's another thing I decided to not do. And the reasoning is sample number one, it would either pressure space because every one of them would require more padding and spacing. So that's not a good idea. And the second thing, this is a list, so cards don't actually belong here. According to the official material design guidelines, all the items belong together. And if you remember the lecture about guards, there actually used to show individual items that don't necessarily go together. Remember the dashboard example or the Notes App. That's why at the end of the day, I decided to not use the background. But yeah, There you have it. These are the options, full-screen number of v. Of course, we do need to choose a font or a color scheme and apply some finishing touches. We can move on to that part because I don't have any other ideas about the screen. So let's go for it. Let's fine-tune things. I'll see you in a moment. 28. Choosing the best typeface: Welcome back. It's time to talk topography and we'll use the same iterative process on these few screens. Select the best versions and you are the view and put them side-by-side so we can quickly go back and forth between them. If you're undecided, that's fine. But leaves choose three different art boards so we can explore each typeface in a number of situations. I already have mine separated from the back and we're going to work on copies. So we'll keep it simple with one single typeface that has at least two weights, regular and bold. It has more, that's great. But another factor is its size. Here's the thing. We want it to be as small as possible in terms of kilobytes. So if we're undecided about two similar typefaces, we'll go with the smaller one. We're looking for the sans serif fonts because we want that clean, sharp, modern look. And serif typefaces are the trickier. They don't work as well. Finally, the essential searching point is personality. We want something similar to deliver, do rounded, interesting, and with a little bit of personality that adds value to the design. Now, you might be scratching your head about that. What does that mean, personality? Well, let's put it this way. If we use Arial e.g. you won't win any design. The words in my book devoted a lot of typefaces that have no personality. They're simple, they don't attract attention in any way there, the blend, and that's for the reason that means they're versatile and they can be used in a lot of circumstances. In the context of an AB design, we want our text to stand out, so our choice might make or break the design is quite important. Now, I already mentioned Ariel, but late though, certain weights of Open Sans robo though Source Sans Pro and a lot more fall in this lackluster category. Those are the fonts that you should avoid. Okay, let's get cracking with Google Fonts. I'm gonna disabled serif and handwritten. And I'm going to go to town with looking for at least four or five typefaces. The first one that grabs my attention is Montserrat, which is a favorite of mine. I'm going to quickly go through these because the actual research takes at least 20 min. Okay? Now ubuntu has a lot of layer. So that's two, I'm not sure if that's how you pronounce it though. I think it's Ubunto. Anyway. Moving on, Nieto, this looks lovely, so I'm going to add it as well though, says is a bit too light, but maybe it has other the weights. And we can see it has quite a lot of styles in it goes. Finally, quicksand, this is quite lovely as well. Now, for the sake of keeping things short and concise, I'm going to stop here. But when you're doing this yourself, please go to more typefaces. The more the better. And as you practice, you're going to start developing a mental database of grade looking fonts. You'll have a merchant either with lists, what you have next project. That's why I won't waste time scrolling around. I already know what I'm looking for and you're going to do as well if you go through this exercise, download archive, extracted. And I'm going to show you how I quickly sort them by size, especially if you've selected lots of typefaces. Now, inside this folder, you're going to search for dark TDF. And this is going to reveal all of them. If you've seen get the files in the details mode, you should get the size and the separate column. And immediately we can spot that Ubunto is four times as heavy as quicksand, 400 kb versus 10. For now, I won't cross it off my list just yet. But it has to look absolutely fantastic to keep it as an option. And that's because everybody in the apse space is very sensitive about the size of their app. In my company with constantly looking to trim any fat. And this would be at the top of my list. Loading speed is incredibly important, so making the app smaller is a must. Let's go to Adobe XD and see what's what. I already have these installed in my systems fonts folder. You just got to copy paste them. Let's check out quicksand. And there's no magic here. It's just the magic of editing. You have to select all the texts layers and change them. I'm going to speed up the process so you can see the final result. This is a very time-intensive process, but I do want you to practice and I do want you to go to the web. We could use various features in Adobe XD to go fast there. But at this point I really want you to do it the manual way. Okay. Now, what's your first impression? Take a close look, zoom in and zoom out. Is this a winner? I'm not sure. So let's continue with the other ones. Please be aware that these changes are obviously going to ruin your alignment. So you might need to do some changes here and there. Now again, now this looks pretty solid considering that with going through it pretty fast, we could work with a higher degree of precision, but right now it does not need that in this step of the process. Okay, Let's go to the next typeface. We're going to clean things up in a few lectures down the road. For now. Let's be things along. So neat though, this is a tad lighter, but let's see it in action. Please be aware there's another version called Nieto sands. We don't want that, just the regular one. So my impression is that this is similar to quicksand, but it's slightly rounder. You can see that especially in the delivery time, the TV is much sharper than this one. But it is a close race. It really depends on your face. Now I'm going to zoom ahead while I try all the other typefaces. Thank God for the power of everything. Remember, you do have to do this on your own and develop a lot of options available on Google fonts. There is no alternative to hard work. Try to be as efficient as possible. You could select the bold text layers and change the typeface directly to that weight. That means that you have to be really fast with your console click technique. No matter how you do it, it's important that you do it. Plus you have to have a good number of texts layers. If we would have done this, just add the location screen, the first one. It wouldn't be relevant. It's like asking to people on the street who they're voting for. They say candidate X. And then you will report that the study shows 100% of people want to vote for the candidate X. It doesn't work that way. Don't fool yourself. To votes, That's not enough. It's the same here. Only two or three texts layers, that's not enough. You have to see it and contexts in lots and lots of situations. So use several types of texts, layers, headlines, descriptions, sub headlines, numbers, white background, mixed background, and so on. But be aware that the more artboards you include, the difficulty goes up. This is why we didn't create all the screens and left this step at the end. Well, that's possible as well. It's much better to decide the style of an app. At the early stage. This makes it that much easier to change things around. Here they are all the typefaces I select that you have this file attached and I suggest you explore the each option. Xd might give you some warnings if you don't have those fonts installed. First visit Google Fonts to avoid any interruptions. Each typeface has its own strengths. But what I can clearly see from the get-go is that Ubunto is not worth it. It looks nice, but it's not four times as nice as the other ones. Montserrat is also lovely. But all in all, I think the best looking one is nu need though. It has a lot of weights. It's fairly small, so it won't blow up the app size. And it has this special zinc that makes it stand out, especially in its black variant. It's quite chunky and round. Considering the target audience, I think this is a great first choice. In case something comes up at a later point, we can easily change the typeface to any of these alternatives, as well as we can explore some other ones. But that wraps up this lecture. We've made great progress and I wanted to congratulate you for sticking with the project. I'm going to see you in a moment. Thank you. 29. Define and refine our app’s style: Welcome back. It's time to set a few minutes aside so we can define the AP style. We're looking for the colors, font sizes, line heights, and so on. So we're going to apply all of these to the rest of the screens. I know that may be boring, but we have a life-saving technique and that's the assets panel. Let's start with the color scheme. Once this panel is active, right from here, the process goes like this. Let's say that we choose a pipe l, say San Francisco. We open up the color picker and we experiment with various shades, right? What's great is that we can see the change in real time. Now, to cut it short, I decided to use this one to one. Do f49, which is a very dark shade of blue. I'm saying the exact color codes so you can follow along. But honestly, I just played around with the color picker until I was happy. This is nearly black, but it's ideal for lots of texts layers. Now how do we apply it? First, we added in the Assets panel. Go to the color and click on this plus symbol. And just like that, we have the swatch right here to show you the power of the assets panel gives a quick example, like this title, desert heaven, which is black right now. Now, go to the Assets panel and make it blue. That's faster than using the fill area in the properties panel. But actually, this is the real reason why there's this panel is incredibly important. So say the client doesn't like this color. Instead he wants read. Okay, here you go. You right-click the swatch and you choose Edit. Now, let's make any change. And it's as easy as that. Both layers automatically updated. Two layers isn't such a big deal. But imagine we have 200 screens and nearly 1,000 texts layers. That's where the assets panel is an absolute must. So let's hit Control Z to undo. To continue, please select three art boards and move them separately if you haven't done so already. We have to clean things up just a bit. I want the location screen, the main listing screen where the rating is floating on the edge, on the right side. And finally the Virgin where we have scrollable tabs. So three screens in total and we can build up our assets panel. Okay, Let's focus on the second one. The title is blue, shown in new Nieto black for the size we could go with for D. But I think a smaller one maybe better, I think before is a good choice. The styling should be applied to the restaurant title too. Well, in the assets panel, you can actually do that as well. Move down to Character Styles and hit this Plus. And just like that, you're going to see new Nieto 34. My advice is you rename it by right-clicking, get, call it title or something like that. Next, let's apply it. Control-click dessert have on to select that and then click on the entry to test it out. Let's make a dramatic change. So right-click it and the Assets panel, hit edit and make it e.g. 50 pixels or something crazy like that. And yes, it does work. Hit Escape, then Control Z to undo. So let's take it from the top. The title is done, right? But what about all of these icons? I do like that orange, so let's try it out. Grab the hamburger menu, and let's set it to the following colored gold, F, F, E, C, z, z, though, which is a very lovely intense orange. Then add it to the Assets panel. So my plan is to apply it to all these other icons. The drop-down, the filter and search. Use Control to select the first one. Then add shift to multi-select, and they're orange. Lovely. Please apply the same color to the tags to the bottom right side. As you can see, with minimal effort with changing the design and no time at all. Basically what we're doing right now is with the branding every single item. So the tags were already orange, but we wanted to tell Adobe XD that it should apply this specific styling from the assets panel. Basically we're connecting the dots with connecting the layer with the Assets panel. What about the delivery time? Well, this needs to be shown in new Nieto regular 24, the pixels in a fairly dark gray. Let's go with 777. We can add that color as well as the character style. I think it's very likely that we're going to use this as a main body text, meaning the description of each dish. So let's rename it to body. I want to make it clear that I'm not 100% certain. I may change my mind. We're going to see as we move along, but because we have the assets panel, we can quickly change our mind the rating. Let's go with new Nieto 20. So fairly small. We can make it gray, That's 777 color-code like so. And then select the 92 per cent part and make it black. Black in terms of weight, by the way, because for the color, we're going to actually keep at green, you can sample the emoji for that because we changed the font, the alignment doesn't make any sense. But that's a quick fix. A question you may ask, is this Chris, How did you decide on 34th black for the titles? Why not 30, not 40? And the answer is quite simple. I tried them. I uploaded the design on my phone and I compare them first between themselves then versus other apps that we previously analyzed that before the seemed like the best choice. The same goes for all the others sizes. Okay, fast-forward, and this is our result. This is how your project should look like at this stage of the game. Let's take a quick break. Thank you. 30. Practice your speed: Welcome back. We are on screen number two, and I want to replace all this dummy content here of all the resources that I prepared for this grid. First, the photos, grab them and drag them over the first entry. If you feel any of them are not set right, please double-click them and you can reposition them or even re-size them manually. Next, I'm going to drag in the titles. Remember, this is just a standard text file. Nothing special about it. Okay? The position is not okay. But the main point is this. We first have to change the text to write a line. And only now we can position it correctly 30 pixels from the edge. And that's because the length changes. Awesome. Finally, the votes. When you drag the content, the styling is going to change and there's nothing you can do to prevent it other than having two separate layers. I don't want to do that, so I'm going to keep it as it is. In case I have time, I might manually change each entry, but don't count on that. You might ask, Chris, why are you doing all of this stuff? And it's quite simple. On one hand, it's great practice. You have to exercise day in, day out and be prepared. Secondly, it's important that we showed the client and the developer something that we're proud of having fake repetitive content, lots of Lorem Ipsum, it just breaks the magic. So that's why I have to do it. And just to bring it home, Let's decrease the size of the photo by 40 pixels. I do think that's needed. So control-click it and let's have a look for them. Three-sixths, let's go to 320. And for the card for them for 70, let's go to 430. Of course nothing is aligned anymore, but we know shift helps us move things and then pixel increments. So we need four tabs. The question is do we have to re-size it? No, But as I said, I don't want to put in the hard work and see if I can improve the design, if I can make it even better. And I do think this looks nicer. Okay, when you're ready to go, Let's move on to screen to be start with the title, selected and applied the character style called exactly that by Bell. For the back arrow and Information icon, these need to be orange. Excellent. Finally, let's select all of these elements and align them correctly. Beautiful. Moving on down, the active tab needs to be orange as well, so you know what to do with it. Okay. The rectangle is now orange. Cool. For the tabs. Well, to be honest, I'm not sure. Let's start with the title styling. Now. Obviously that's too big, but we can change it down to maybe 26 pixels as before, the inactive tabs get the blue treatment. So we're going to have to fix that up. Here's what I propose. Let's select all the other items and place them in a separate text file. This one needs to be set and Nieto 26 as before, but in the regular form, you should never change the size of the font even if it's inactive, it's not good practice only the weight and the color. As for the active one, this should be made orange. Now here's the thing. You might not know how much space you should leave between pasta and pizza. After all, we want the middle, the space between pizza and risotto, right? But because this is a single layer, you can't find out what's the actual distance. Well, here's the hack. Add the rectangle between these two and have a look at the width. Once you have that value, it's actually quite easy with the layer selected, hold Alt and check the existing measurement. Then fine tune it with your arrow keys. Maybe shift and you're good to go. Okay, let's move down the dish names. Well, I think these should be the same as the tab. So that's needle black, 26 pixels, but this time around and blue, what I love is the fact that this is a grid, repeat grid. So everything changes. So it's quite easy to judge the size. You can easily play around with it. But I'm actually happy with it. For the description, Let's use the body styling. Nieto is a bigger font than the default one, but I do want to keep only three lines of text. So re-size if needed. For the price and wait, let's apply the 26 titled styling and check the position Wanted bottom aligned with the thumbnail. Though here's the thing. You might have to eyeball it. You might have to approximate it. And that's because this specific font has quite a lot of extra space on the top and at the bottom. And there's nothing you can do about it. So the alignment two worlds won't work well. I do think the price should be shown in orange though. Yes, I think this is miles better. Finally, add to cart should be orange as well. After all, it's an action and it does need to stand out. And believe it or not, I think we've actually done with this screen. If there's anything else you want to edit, now's the time for it. E.g. the weight of the product. I'm not sure that deserves to be so chunky. It's not that important. So let's actually make it bold rather than black. The thing is, the Assets panel is absolutely fabulous. And you could make an entry for every little thing. As you might have noticed. I didn't do that though. I didn't add every single styling to the Assets panel and that's intentional. I don't want to add too many things and get confused with that. It's time for a quick break. Thank you. 31. Finish the first screen: Welcome back. Let's handle the first screen, the location one. Let's take it from the top and make sure that we're on the same page. The icon needs to be 18180, pure white. Place it 80 pixels from the top edge. This is a great chance to use the y field. Remember, this is the vertical axis and it starts from the top. The name of the app, the live has to be written in. Let's dial it in the following way. I'm thinking unit all-black, 70 pixels in pure white. Oh, by the way, I think it's best we add white and assets panel as well. It's just a quick thing. If we constantly move our mouse in this area, it's best to have white here as well. Okay, now centered it on the canvas. And let's place it about ten pixels from the icon, give-and-take. That's then next. I think it's safe to say that orange is gonna be the main action color. Let's apply it to both of these buttons. What about the text? Well, first of all, let's change this to show restaurants which is more than meaningful. Let's start out with 26 title and see what's, what the size itself is pretty okay, but it's a bit too chunky for this small size. So let's drop it down to bold. And actually this makes a big difference. I'm not sure that you can see it through the recording, but trust me, it's quite substantial. Check it on your phone and the thing you're going to agree with me, okay. Centered the text and then center the button. If you haven't done that already. The problem that I'm having here is the hierarchy is unclear. So let's think it through. We have three available actions, right? You can enter the location and then a submit button, skip this step and move on to the next screen, or the finally number three, create an account or login. In general, these can be considered two separate directions, login and register, but I'm going to combine them to keep it easy. So how should we go about it? While it's okay to have two buttons with the same level of importance, I think it's best we apply at different styling to create an account. From what I understand from the brief, the registration process isn't all that important. You can see the restaurants without registering. So that means show restaurants is the priority. This is the number one thing and this screen. As such, Let's make it super wide, 656. Okay, we should also bump it's height to 90 pixels, just so it stands out more. By the way, centered the texts once more. Going up for the moment, the field needs to match the buttons we have. So 656 as well, things are rapidly changing, but remember the bars as often as you need to. For the text. This is officially called a hint. Please apply the body texts styling. When the user touches the field, the hand is gonna go away, center it and leave about 30 pixels on his left. That should look okay, and I think it's quite nice. Our progress so far as decent, but let's keep up the pace. I paused the recording and I looked for the nice GPS icon. Here it is, you have it attached. The size is 28 by 40 pixels. When you do your own version, please make sure you find your own icons. Make it orange because you can tap it so the app can get your address automatically, place it on the right side of the field and leave 30 pixels on this right. Speaking of 30, That's what I want to leave between these two items. So select the field, hint the Nikon and group them together. This is going to make it easier to reposition it if needed. As I said, leave 30 pixels between the two and place them somewhere near the center of the screen. Take your time with it, move them around and let X d help you. Okay, let's think this is the most important part in the screen. But then what's next? I think create an account comes second. Now we could give it an orange button as well, but I think that's going to compete with show restaurants. As such. I think it's best we place it at the bottom of the screen. But first, let's move, skip this step out of the way for the styling. Let's do this. Increase the height to 100 pixels so you can't miss it. That's not exactly huge, but it is slightly bigger than the main call-to-action. Make it pure black backdrop its opacity down to 60 per cent. No border for that, just in case you still have it on. The idea is to give it loads of space, but without making it stand out way too much. So that's why I chose black and the low opacity make it spans the entire width of the screen. So that means 720 pixels. Align it correctly and you should now see where I'm going with it. When you're done, please change the text to create an account or login with a capital C. All these details really matter at the end of the day. Finally, let's send the red shift M, where M stands for middle, and Shift C with C stands for Center. But obviously you need to have both layers select that. Good stuff. Overall, this is a good design for the second year reaction. Let's have a good look at our design during a quick break. Thank you. 32. A new style of button to have a great flow: Welcome back. We have one main item left. Skip this step. I'm going to use something new. Start with a rectangle that's 300 by 90 pixels. Keep the equivalent radius as before, five pixels. That's without question. Never mix these values. You choose one and you stick with it. If you don't like it, change it to ten, but you have to change it everywhere. Now centered on the art board. And here's the thing, please disable the fill. What we're gonna do is we're going to create a button called a ghost button. Ghost because it has no body. That's why we disable the fill. Instead we're going to use a thick border, three pixels, pure white. By the way, please make sure that you're spelling is on point and that you capitalize every letter, the first letter of the word that is, center everything correctly. But here's the thing. You may not have enough contrast versus the background image, especially if you use another photo. Now, sure that we could increase the opacity, but even that may not be enough. Plus the most important thing, when you have no fill, these buttons are incredibly difficult to select. It. Here's what I propose. Enable the field back again and make it pure black, then lower its opacity to about 30 per cent of. So. You may need to activate the layers panel and change the order of these layers. But that's not an issue or Control Square Bracket key. By the way, I do hate the fact that I can see both my Layers panel and my assets panel at the same time. It's been years and I don think there'll be is going to let us have floating panels anytime soon. Quite shame. Back to the design. Let's analyze that. So the logo is at the top. You glance at it and then you move down right in the middle, you have the main area where you have to put in your location. Awesome, cool stuff. It's big, it's bright, it stands out. Now the question is, can we add any more extra details to make it look even nicer? Well, one idea is to include an icon inside the orange button. But instead let's do something a bit more interesting, a bleed effect. So select the orange rectangle and enable a drop shadow in case you have a border, please disable it. We don't need it for the color. We don't want the shadow to be black. So use the eyedropper and select this orange. Be aware that you can't use the assets panel in this case. For the settings. I've done this 1 million times. So here's what works best, five for the y field and 15 for the B. Finally, set the opacity to about 60 per cent. Once you de-select, you're going to see what I mean, a bleed effect. Basically it's a neon like effect. It stands out quite a lot. And it's just an extra detail that some clients might love, or they might say that. But any case, I'm going to leave it because I do quiet. Appreciated. Okay. What else? Well, I don't like the position of skip this step. It's just floating around. We could bring it closer, but I would rather not get accidental taps on it. So instead let's do this. Get the type tool, hotkey D and write or needle, bold, 26 Pexels, pure white divorce. So that's, or as an alternative, center it horizontally and move it 50 pixels from the orange button. Now here's the thing we want symmetry in all cases, it's something you should always aim for. So if we have 50 up top, we need 50 between skip this step and this item here. Hold Alt and measure things out. Then use your arrows on your keyboard. Okay, this is catching shape, but it's not the end of it. Get the line to well, hotkey L. Let's do some math. We know that these guys are 656 pixels wide. So I want the divider here, but without going across this word, I think 50 pixels is enough already. So let's do this. 656 -50 is 606/2, that's 30 to B. Okay, so let's drag out a line and then resize that 303 pixels. Hold Shift when you add any line to get a straight 1303, pure white. Lines don't have any fills, so don't try to use the assets panel on it. It won't work. Make it white from the properties panel, of course. And for the thickness, I'm going to go with two pixels. One is a bit too small to be as too much. Now, duplicate it, Control D or the Alt drag and place it on the other side. It should be quite easy to align. You have that orange button up top, so please use it. When you're ready, center, and group everything together with Control G. And I think this one really takes the cake. It looks interesting and it helps the user navigates through his options. Okay, Let's have a break and we're going to do a complete analysis after that. Thank you. 33. Overview: Welcome back and congratulations. You've just finished the first part of our food delivery app. I know it's been quite a journey, but hopefully you've arrived at this point with minimal nail-biting, swearing and head scratching. The process is somewhat difficult at the beginning. Very similar to 1,000 BCE puzzle. But as you make progress piece by piece, the whole image becomes clearer and you can pick up speed. I can't stress the value of patients and dedication. This delivery app is a real-world project, something you might encounter in your job that the design agency or on any freelancing platform. This is not me bragging, but most designed tutorials don't show you relapse. It's just pretty photos and that's it. There's no thought or the functionality behind them. And that's like learning to ride a bike when the world is filled with monster trucks. So while you're learning process is difficult, I'm a firm believer that the harder the training, the easier the fight. Meaning when you land the job you can truly shine because you went through this training. We still have a long way to go. But look where we started a wireframe, the layout, then some design experiments, we choose a typeface or colored scheme, and we solve the actual problems trying to fit as many restaurants and as many dishes as possible without making the screen look busy. We talked about having the right aspect ratio for the photos, the chain of command, aka the hierarchy. We use cards, icons, various topography techniques, and we learned the use the assets panel. Again from the bottom of my heart, congratulations for making it this far. Stick with me and you'll do even better. The first screen is probably the trickiest though. That's because you can type in your location in this field, but you can also use your phone's GPS. You can also skip this step. And the app is going to show you the restaurants from the lab, just city. All this is in the brief and I do hope that you read it. Finally, you can register or login. Knowing how to structure all of these actions is no joke. It's no small thing. We sorted them by their importance and then we made design decisions accordingly. That's why we use the ghost button, e.g. that's why we lowered the opacity for this rectangle. All in all, again, congrats, fantastic job for getting here. I'll see you in a second.