Creative Layout Design for Web and UI Designers ► No more boring layouts

1. What this course will cover?: design is just like a story. So whenever you are telling a story to your users via design, your layout is going to decide how this story is going to be unfolded. How you are going toe. Tell the user the first part of the story, the second part of the story and then the twists or interesting part of the story or features off your product So your design is going toe unfold in a very nice creative way. If your layout in straight so layer design is most important, part off your mobile app, design your website, design your landing page design, whatever you are designing layout is going to play a vital role in deciding how your story is going to be told to your users. So this course is going to help you understand and put some creative vase off unfolding that story and how you are going toe, uh, lay out different, kind off designs and how different layouts creative is that are going to help you stand out from the crowd. So other designers they might be doing simple layouts. Four columns or four different boxes. I'm going to show you a lot of techniques that are going to help you get out off that box and create creatively outs. We are going to see a lot of different, basically, outs. We're going to understand different columns, grids, guide systems, different mobile labs where you can apply those ideas that I'm going to give you some exercises toe master these skills. So if you are having difficulty like myself when I started, designed the most difficult part for me WAAS layout design. Then I kept on analyzing different designs and I I sort off, you know, understand different techniques, and I'm going to explain them in simple ways so you can implement these techniques in mobile app design you I design and website design. So I hope you are going to enjoy the scores. If you have any questions you can always ask me, and I am hoping to see you soon inside the schools 2. Basics of layout design: Let's start with some little basics. Now, the first question, whenever you are going to start your design, you should ask is what purpose does this layout serves? Why are you creating this layout? What is the information you are conveying to your user? So these are actually off the few questions you should start with. If your user is unable to understand what you are trying to show them or what you are trying to, you know, convey them than your then your layout is a failed. Now I have seen a lot of designers that they create very creative layouts, and they show ah lot of different styles in the layouts. But the problem with their designs is that it is not usable. So the first thing is that you need to understand we are creating a layout to show the information or the images or our content or our message to our users in a meaningful and digestible way. So this is the frosting. Second thing is, you need to create some in just points in your layout, so you need toe, have something that shows them toe. Explore this layout a bit more. Okay, so these are the first questions you should always ask your users. Now let's move on to the next thing, which is also an important which is a priority. Now. The second question you're going to ask you users or your clients or your business, or that the person you are designing for is what is the most important part off this design . Now this is, Ah, question, which I think a lot of designers miss what your users is going to see for the first time in your design. Matters are lot. These are actually first impressions and use User is going toe based their decisions on their first impressions or the first time what information they are going to see. How will you start your design story? How the story is going toe unfold so you can see when you view a movie or watch a movie. The 1st 5 or 10 or 15 minutes are going toe. Create some interest in the movie, so they are going to show sometimes something in the future, and then they're going to go back and show that one hour later or one hour before that, or things like that. So you are going to create some interest in your study and how you're going toe unfold it so you might have heard our term that is called Full and Design four is actually the first instance off their design in the viewers window. For example, if they are viewing with ah, desktop, they might have fold off. 700 pixels are 800 pixels on a mobile device. They might have 600 or something like that. So these are actually your frames. If you have seen a photograph, there is a frame that is containing that photograph. So if some image is out off the frame, you cannot view it. You cannot see it, so you need to think in a very priority first way that which information is the most important. Should I get the sign up form at the top, or should I include some video at the top? So these are a few questions you should ask your business and your users. Now the third question is what is the type of content or the medium you're designing for. So if your design is going to be read on a kindle device, or whether your users are going to view this app on a reps on a mobile. All they're going toe consume this content on industrial, PC or laptop. So these are actually the questions you are going to ask before starting your layer design . So there are actually two types off basic types, off content websites or designs. One design is content heavy design, so we have a lot off tax. We have a lot of images, like a news websites blog's different article websites, things like that. Then we have second type, which is focusing on few products or just one product. So when we have one product, for example, a mobile app or mobile game, we have very less content. We don't we don't want to, you know, write like hundreds of paragraphs for that product. So we're going to have more focus on very small lines, very few features that are going to convince our users to buy our product. So these are two different types off layer designs, which are going toe based on your content. So content is actually going toe shape. Your layout and other question which I am going toe ask my business or my users is what type of fuses I'm designing for, but that they are elderly users there, old people and they are kids. They are millennials, or modern people are. They are in their thirties or forties. How well, they are familiar with the technology. So these are the questions. For example, if I'm designing for kids, I am going to have bigger Britain's simpler words and, ah, very bright or sharp colors for the Burtons. And also I'm going toe present the information in a simple layout. I'm not going to, you know, move around the Lord and create a very uniquely out where my and the kids or the old people are having difficulties finding the information they want. So this is very important. If you have ah, old people are kids or different type off users, you're going tohave differently out designs. For example, if you have seen that design agencies, they use a lot of creativity in their websites or Web designs because they have that kind off users or viewers or consumers. So whenever someone is going toe goto, a creative agency, they are going toe hide them for some creative work, so they show their creativity in their layout design their website things like that. So this is very important. You need to consider which type off user you are designing. For now, the last basic off layer design is function over form. So this is a very old saying off graphic design. And if you are from a graphic design background, you already know that. No, what does this actually mean? It means that if you have a website or mobile app or landing page or any design, your layout should support the functionality off your design you are designing for first the functionality off your app, your webpage or whatever you are designing. Then the second priority is going to go for aesthetics or you are going to, you know, add some colors or some creativity. So here my advice is, limit your creativity. Layout should first serve its purpose. So it means that we are going to create a usable app rather than unusable very creatively out. So whenever you are designing a layout, you are going toe. Keep your creativity in check. Don't try to create a layout that is too distorted or too difficult, and it doesn't support the functionality off the APP for example, you have seen a lot of APS. We as you place the order and the place order button is at the bottom. Now it is at the bottom. For some reason, it is a little too usability and ease off use. So if you try to place that button at the top or in the middle off your screen, it is going to create some problems for your users. So keep that in mind that functionality usability on da readability legibility these are going toe have more importance than your form or a statics or things like that. So this is going to sum up this lesson. I hope you have enjoyed it and see you soon in the next lesson. 3. Content defines the layout: This is another mistake a lot of designers actually make, and that is without your content. First, you cannot design a layout you cannot define. Their different elements are going to go, how they are going to go on top of each other or side by side or things like that. You cannot decide the layout if you don't have your content, so you cannot decide how many blocks of content you have. For example, we have one heading one subheading than we have few images in the header. So we have, like six or seven elements in our header. So these are the questions. These are the things you have to have before starting any layout design. So if you have like three items you can have, you can arrange them. In three parallel boxes. You can have one box a bit bigger and two boxes on the side right side, so there are possible arrangements which are going to be decided by the number of elements you have. So get the content from your CEO from the business or other your client you are designing for or whoever is going to write that content now. Content doesn't mean just the text and images you have might have radios. You might have illustrations. You might have icons. So try together all these different things before you are going to start your design. You are going to ask your clients and the emails that I need these kind of images I don't need. I don't want these low quality images or things like that. You also need toe get icons that our little toe similar team off your images or your text. So gather all the data and ask your client that give send me all these images, the content, the taxed so I can start working on my layout or design. Now let me show you a few examples that how different content is going to shape your designs. So let me, let's see some examples. No. Here are a few examples. Websites forced its CS districts. It is a content heavy website for Web developers. Although they are, they are using a lot of great colors, good layout, very different and unique website. But still it is a content heavy website. We have a lot of text over here. You can see then we have different articles over here you can see or hear. And ah, again we have a few articles and in destruction. And if we open up on article, for example, this one So you're going to see that everything is laid out for better reading. So we have ah, easier to navigate, easier to read, easier to digest in different sections you can see over here. So this is actually the purpose off this website. Now if we move on to the next content Harry website, which is BBC English, BBC door com and you can see we have news, we have top news over here. Then we have over here few news with some text and images. So it is basically happy with text and images. So you can see this is actually another example off a content heavy website. We have a lot of content. Now let's move to this one. This is Bolivar Club dark sietch, and you can see over here it is not a very content having websites. If we go down, you can see we have a very creatively out. Um, Texas moved a bit on the right and you can see these simple and emissions. And if we move down, you can see we have fewer images, fewer lines off text you can see we have one paragraph on heading. That's it. So this is the end. So this is actually not a content heavy website. It is based on some service, simple sarees or one or two services and very simple and unique website. If we move to the next example which is Fitbit Ah, this is fit versa. Light Edition website And you can see this is actually focused on a single product. So we have very big large product image with big product title and a shop no button. So again, we have some features over here with the with the background image. Then again, we have some image and some tax or here then we have again something new and you can see or hear. We have very few lines off text because we are focusing on a product so you can see this is building the product products image in users had. So they are showing very powerful images. You can see here they have their app, screen sharks and then we have different, um over here, different features. Again, we have some features on the left and on the right. We have image is changing with the features so you can see something like that. Then again, you can see an image mortal wearing this watch. And few decks and lines were here. So you got the idea that it is not a content Terry website. It is actually alleged toe a single product and focusing on a single product. Let's see another one. Okay, so here we have some, I think design company or some design agency? Interior design, I guess. And you can see they have created a simple but uniquely out. They have, like, three columns 12 and three on the left. They have few menus and attacks in the middle. They have image on the right. They have some other meet ups or things like that. Project information. So again, we have very few tax because ah, here, their work is going to show what they actually can do. So you can see over here nice images off this office design. This is actually into your design website and you can see next project. So this is actually focusing on a single service. So you have now understood what I actually meant by having the content for. So if you have all the content, for example, you know that in the first screen, for example, this one over here, if you have all the these text, these features, you already know that you have five features. Then you are going to show them in this In this way, if you have like four features, you might have them shown in four different boxes on top of each other. So let me show you. So, like you can see what? Here here they have three features. So rather than showing them horizontally, they took the vertical direction. So this is another option with the layout, So content is actually going to define your layout. How much complex content you have, how many columns you are going to make that you are going to show them in 50 50 column or you're going toe, have some other layout. So I hope you haven't destroyed the idea off this content having content before starting any layer design. So don't they make this mistake? I am giving you a sincere advice. Let's move on to the next lesson. 4. What are Grids, Gutter and margins: re designers. Reuse greets toe shape our design to shape our layout and arrange different design elements according toe that grid. Now, why do we use grades? Because human minds, we like organized things. We like balanced layers. We try to find balance even with the imbalance in nature or things. So we are going to use different grades, and we're going to align our different elements according to them, to shape our design. Now let's understand what actually our grades if you already know what our grades, margins, gutters or different terms, skip this lesson For those who do not know, Let's move on to the next slide. Now you can see I'm showing you a 12 column creed for website design, and it is called Basically Bootstrap Bridge. Boot Shop is a design framework for Web developers, so let's see what our different parts off this of grade. So you can see in the middle. We have 12 dark lines or dark bluish lines dark. I would say them black lines just for simplicity. Okay, so we have 12 black lines in the middle. These are actually other columns, so our different design elements were going to place them into two columns or three columns are four columns, depending on their sizes and breeds and their arrangement in the middle. You see orange lines and that those are actually Curtis. Those are actually spaces between different columns. So right now they are 30 pixels and the column Bert is 65 pictures. So these spaces are actually going to have some breathing room inside our content or inside our page on the left and right. You can see those blue areas that are actually margins. The margins are going toe. Have some breathing room around your design. So gutters are going to have some breathing room inside your design and margins are going to have them on the outside. So these are both very, you can say very important. Now I'm going to share a resource where you can download all different kind off different grid systems for different devices and different You were designed tools for fig ma for Roby X t for for the shop for sketch. It is not by me, and it is from some You are design firm, so I'm going to share that link. I normally use them in my projects. I just open up that grid and start building my design from there. So make sure your download that I'm going toe include the link. Now, let me show you how you are going to use these grades and how I have been the simple design just to show you how to use these crates. Now you can see all here at the top. Over here, we have a very big heading, which is this one and I am using Ah, all the whole vert off this one and just center. Aligning it. So if you have some element that is center aligned or in the middle off your design, you are not going to worry about your cribs. So this is also center line, and this burden is also centered Line. But you can see or hear that this burden is spanning over four columns over here, so you can see these are actually 1234 columns, including their gutters. So whenever you are placing ah, your design objects, they are going toe. They're going toe take like, whole two columns or maybe three columns and or maybe full column 678 But there is a part because I have seen a lot of students that they start making this mistake. Don't limit your creativity that we are going to have a button that is going toe perfectly fit. This four columns, you can have a burden like this. Okay, so it all depends on your own ideas. And you can You are not always going toe. Use the words and heights off your elements. According Toa this script, they're just there to align different things. OK, so now move on to the next. You can see next section. We're ahead here. I have this graphic on the left, which is an illustration, and you can see I have it. Ah, in 1234567 columns. So it is taking seven columns over here. And then I left this margin and I started my This is basically gooder. And then I started my text leaving discovered. Now what does that actually mean is that whenever you are allocating your grades number of grades to a content, you are going toe leave. Ah, and And the next one is going to have a distance between them. So we need some distance. So we have to leave this margin. So try to understand this. For example, if I try toe, um, let's say I try to squeeze this. Oops, I tried toe. Move this. And over here. Now you can see I'm using 1234 columns over here. And I'm leaving these two gutters and this actually call him from here. No, I cannot do something like this, although I can do it. But this actually means that I'm taking 12345 columns. So whether you move it over here or over there, you are using five columns. So whenever you won't leave Ah, whole column, you are going to leave this space a column and it's scooter. Okay, So you now if I want O arrange my you can see hopes X move this. I'm going to move it over here. Now it is taking four columns, not five. But whenever I smile my design elements, it start occupying the next gutter. It is actually taking the next column. So make sure you are designing and you understand how these actually creates work. Let me go to this for shop and and show you Actually what I actually meant Let's, um okay, So if I want to squeeze it, maybe I want to have more space. And I want to, you know, make it upto over Hit. Okay, so now you can see. Although I have reduced the size off this graphic, it is still taking 1234567 columns. So if I try to reduce it a bit more Okay. So over here Still, it is taking seven columns. If I want to have it Taking six columns, I have toe move away from this cutter. Now it is taking 123456 columns. And we have left one column over here. So this is actually understanding how you are going to use these grids? A lot of designers, my students, they make mistakes. They don't know how to use them. So I think this is going to make your mind clear about yours. Increase. If you have still have questions, you can ask them. I have seen students that actually asked me, like, 10 questions in a day, and I really appreciate it. Okay, let's move on to the next lesson and dig into grades a bit more 5. How to combine columns in grids: now. You already learned about Griggs? No. The question is how we are going to combine different columns inside of a grid. Why should I combine four columns for this content? And why not six columns or half the columns? So it is going to depend on the content you have. If you have few lines, you might they might fit into three columns. If you have just a logo, it might fit into two columns. So this is actually the question You are going to ask that your content type is going to define your crates and layout. So this is what I meant. Your content. If it is small, it is goingto be fit in tow. Smaller columns. Number of columns. And if we have very large image, it might take up 12 columns or even go outside of that. So let me show you and illustrate this with an example we saw in the last lesson. So let's see now. Now, this is the same design I showed you in the last lesson. And you can see I have changed a bit off the layout overhead. So you can see we have ah graphic on the right we have 123456 columns and the structural here is also taking six columns or here so you can see or hear It is upto over here, but actually it is taking six columns off. Whenever you're developer or quarter, they are going going to court this website. They're going toe and develop this website. They're going toe. Locate six columns for the stacks over here and align it on the left. So you can see I showed you in the last lesson that either you can align them in the middle or you can have them on the left. So this is totally differently out now. In the next section, you can see we have our services GDP, our GDP are or these icons we have so icons and this text we have very small text. It is like three lines or maximum four lines. So what I did is I actually located four columns for each off them four columns than a gutter over here. Then again, we have, um, four columns over here. Then again, we have got over here. Then again, we have four columns were here, so you can see this is. Actually, we are. And this is actually how we're using Joe's Ingrid's. So we are leaving these gutters so toe have some breathing room inside these three content blocks, so you need to keep that in mind. These are three content blocks and let's de selected on. Also, you can see over here here again. We have two different content blocks one and so these are two major blocks. One is actually the introduction or one heading subheading. So are the tag line and then a burden. Then on the right, we have an illustration. So these are actually two different content blocks we have. So actually, we are designing in blocks. Okay, So, um, what else is that? Whenever you are designing using grids Don't just think in numbers like 678 Try to think in percentages like this is 50% and this is 50%. So we have to columns major big columns that are 50 50% taking a little 50% for this image or illustration, and 50% for the content. Then over here we have 33% or 33.33 33.3 t and 30 point TT. So this is actually how you are going to think. If you want to have a flexible or responsive design, you are not going to think in terms off. Two columns, three columns or 12 columns of 16 columns or seven columns. You are going to think in percentages that this layout has 60% image and 40% text and things like that. So this is actually very important concept. That is why I created this design, and I traded it and change it upward to show you that a single content have multiple layouts. No, I hope you have understood the meaning off this creeds and how you can clear different layouts. How you are going toe think in terms off percentages y creating your layouts. If you have any questions, do ask me. Let's move on to the next lesson. 6. Baseline and Vertical Rhythm: Now we have already talked about columns and grid systems, but that are basically horizontal in left right direction. Now we're going to talk about top to bottom spacing, which is called vertical grade or vertical rhythm. Now I have talked a lot about it in my typography Gore's course, but right now I'm going to repeat it again because it is very relevant to your layout and spacing. Now, if you look at over here, I have shown that base for no. First thing you need to establish is your base. Four. Baseball size is actually the fourth you are going to use for all your paragraphs or 90% off your paragraphs. This is goingto be the base off all your calculations. Now, every fort whatever typeface you slack, you will have some line. Height line height is actually the distance between two lines. You can see the top one and the bottom one. And if I click over here, you can see on the right. We have 24 line spacing online. Hide. If I try to increase it, you can see the lines are going toe, fall apart and have more space in it. Now this line height is going to play a very essential rule in your vertical greater vertical vertical rhythm. So what we do is establish a base for size than a line height, and then we multiply both these values 18 multiplied by 1.3333 and it is almost closer to 24 pixels. Now, this 24 pixels is actually going to be the base, or you can say based unit off your vertical grid. Now I'm going to show you the vertical grade in Adobe X D. You can do it in for the shop. You can do it in a sketch. If you want me, I can create a YouTube tutorial on that to create vertical them on all three thes three you white design tools. Okay, so based in good, we got baseline height. Multiply baseboard, multiplayer line height. We got Baseline Creed. It is trying to four pixels. Now you can see this is actually let me show you how you can do it. And you can see this is actually no NATO 18 24. So this is actually we had using based phone and line height of 1.33 which is going to be 24. Now, let me show you an example. Let me show you the same design we did over in the past. And if we go over here, let me hide this repeat grade and on this content, or here Now, you can see this is the same thing we designed. I change the layout a little bit. We have center line, everything at the top. And then we have this our services section. Now you can see the spacing, How I'm going to. Uh, no, that this text this heading and the distance between the subheading must be so how I'm going to know the distance. Ah, in vertically vertical vertical distance between my different items. For example, this one Let's click over here. And if I press art or option key, you can see I can see the distance between bought off them. It is almost 88 pixels on. Then if I again click over here, this 1.3 again if I click overhead is 46. Okay, So one more thing is that in web design, your line height works differently. So you can see we have if I select this one it is 24. 36 is the line height for this one and 24 is the size. Similarly, we have 67 67 is this size for the line height, which is one 100% line height. Okay, so actually, you can see you are seeing space above this and below this text. So this is a little bit of difference in web design that whatever line height you're going to select, it is going toe have this whole block for that space. So this whole block is going to take 67 pixels off height. So you need to consider that if you click over here, you can see it is 36 line height, so it is going to take 36 pixels vertically toe, you know, allowing this text. So whenever you were designing for Web sites, you can see what a free click over here This home have a lot of space at the top and the bottom similarly, this and this also. Now you can see how I created this vertical Good. So if I make this a bit like this so you can see over here if we look closely, you can see that this text over here it is inside these X zoom in a bit more It is inside these one toe See, eso won toe see And four, almost four baselines. So this is actually if we want to align it we can also align it like this on life This So if If you can see closely the whole boning area is actually in the blue. So we have 12345 So we have almost five vertical spaces for this. Ok, Similarly, if we click over here, you can see this is our text. 123456 cities almost taking six And then we have almost three above and three to below almost. Oh, Bill! So if we move it a bit up, you can see now it is going toe a line. This bounding box is going to align with these lines overhead. So this is how we're going to align our things on. Now let's move this one a bit down. Um so we have something like this. So now you can see this block Blue block is in this four rose. So these are actually our vertical rhythm Rose. Then we have this hour. Burton, if we click over here, you can see it is also taking 12345678 vertical spaces. And similarly, you are going toe space out your whole designs. Everything is going to be spaced out vertically. Now there is a trick. If you are designing something, obviously when you have, when you're going to start a new block off information a new section off your website a new um, you can say feature off your website or whatever you are designing. You are going to have more space over here. You can see or hear. We have a bit more space over here. Then we have between these burdens and this one, you can see it's okay, So this is very important. More space when you are starting a section more space when you're ending a section and less space when you are when you are within a section, so like you can see or hear Here I am showing the section heading services and then we have few icons over here. So this is another thing. I think we're going to talk about it. I'm going to show you my process and my design the last designer worked on and how it actually created. Ah, whole system off vertical mattresses and you can say bricks. I normally call them vertical bricks. And I used those vertical blocks or bricks toe create my whole design and expressing. So this is very important. You need to create this vertical. Great. If you want to know how to create this vertical grid, just create, um, uh, rectangle off 24 pixels and remove this border or here. Change. I'm going to change X color toe something like this, and then we're going toe, um, duplicate it and replicated, and I'm going to remove all the spaces between them. I'm going to make it a little bit dull like this. No, we have to off them. Repeat, great, created greed, greed, and we're going to repeat it like this. Now we're going to close the gap between these two. And here we have the whole patron. You can similarly create a patron in for a short of for shop and apply that pattern at the background off your image. All your website You can see if I place this text over here like me. Move it a bit up like this. And if I move it over here, you can see Right now it is fitting inside all these lines. So this is actually vertical rhythm. So I have 24 bigs line height, so it is fitting perfectly in 1234 vertical spaces. So this is actually how vertical rhythm works, and you are going to space out things. So, for example, if I have something like this or here and I want to create heading over here Um, now, if you look at over here, I can space it between these three lines. So right now, it is actually taking thes three vertical spaces. So if you want to move it over here like this, you can also do that. And we have almost half the space between these two. Let's see how much space we have in between. We have, like, 11.3. So let's make it 1000 it Dean and 11. So you can have one more thing, which is called blocks and, for example, we have 24 pixels off vertical rhythm and 1/2 off 24 is 12 so I can have a 12 space between board these. So this is actually 48 56 line height, and this is 18 pixels off some decks and 24 line height, and the space between them is actually actual exult is 12 pixels. You can have something like that. So now I'm going to hide this beat, create, and you can see we have a very nice balanced spacing between heading and it's better graph . So this is, I think, a very simple technique, and you can say a very simple method which a lot of designers start use in their design. That is why they have mismatches in their spacing vertically and horizontally. And I hope you have enjoyed this lesson. If you have any question about vertical, great, I'm goingto go more into detail in the next lessons on to ask me Let's move on to the next lesson 7. Vertical Blocks for spacing ► Secret: Now you have already learned about vertical created. But right now I'm going to share with you a secret off. Great designers create your designers, create Web designers, and that is using white space blocks or bricks. I call them bricks. You can call them vertical mattresses or vertical blocks or whatever you have. You want to call them. I'm going to show you that. How? Actually, I created this design at me. Share with you how I actually created X height. These Okay, so this is actually a design off landing page? I recently did. Still, we are working on the courting section off this one, so you can see or hear. This is a very balanced design. You can see the spacing between different elements spacing between different sections and the headings and the content off their section. And that is consistent Over here. You can see some similarly over here again in this section. I'm going toe share this design. Maybe one in next few lessons. More because I have to show you some more techniques off alignments and Leo X. Now the secret lies in your vertical spacing. Now let's hide this one, and I'm going to show you how I actually have the system off or giggle spaces. So on the left, you can see I have few components that are called 1 2096 70 to 64 56 48. These are all different brick sizes or vertical blocks. SoHo. I actually space my items. Let me show you if we place this 1 20 over here. So it is 1 20 pixels. You can see this is actually these are components. So I'm going toe experiment like this. I'm going to show you in a minute my secret off designs. And I think I really think that most of the people don't use it like this. Okay, so almost 1 20 including this shadow like this. So it is going to be here 24. I think we have 36 over here. Like this. Um, this is goingto be within. Just ring. Okay. So again, 1 20 because we have a section oops, section or here. You can see how I am using the different spacing system between different items over here. I think this is enough. More than enough. I have already created a lot off pink lines over here anyhow, So this is actually how you're spacing system should look like. Now you can see this is actually a secret technique. I am revealing right now. I have seen a lot of designs and I wasn't able to understand how the different spacing world. So I emailed and considered with two expert mawr designers and asked them how. Actually the space are different sections and they said that the top and the bottom off each section is almost equal. So whatever, you are going to leave at the top like we have won 20 pictures and again at the bottom we have won 20 picks is again when a new section is going to start. I have 1 20 pixels at the top and wondering depicts is off white space at the bottom and you can see in between sections we have less base, so you have to create a spacing system off your designs first. So try toe, get these blocks, and these blocks are going toe based on your base line. So, for example, if I have a baseline off like, um 24 or may be in an even number, try toe, have a baseline in even numbers. It is easier and try to create blocks which have a good difference between each other. Like 24 I have 24 36 48 56 64 72. I don't have things like 1 21 118 Because in this way, if I try to create a 1 20 space and 1 18 there, that difference is not noticeable. So whenever you are creating this, your vertical blocks try toe have blocks off different sizes that have good amount off. You can say like 25 to 30% a difference off size between them. You can see we're here. Here. I'm using 36 than 24 then 1 2120 32 It must be 36. Actually, I think maybe I have missed some pixels over here. So it is actually 36. This must be on. This must also be consistent with your whole design. Then I have sub heading to the content. 72 pixels. 1 20 Then again, actually, I used a bit off less space over here because I think these two sections should belong in ah, same section so they are almost related. So I used 1 20 space and then I altered my space. Other than having 72 I used 56. So this is another one. Then again, we have won 20 at the bottom off this section 64 after this heading 64 64 between all these different testimonials. Then again, new section is going to start. So I am going to leave 1 20 at the bottom and ah, tohave some separation between these two. Then again, we have 36 before the next tagline or you can see the future paragraph starts than we have 56 between the these bullets points and this paragraph. And then again we have 48 48 40 years and 48 repeating for all this this list items. Then again, we have won 20. So this is really, really important. You have to apply this technique to your whole design and vertical direction. It is going toe. You can say improve your design 200% so you can see over here if we go to this section and I dragged over here, This is actually 72 at the top and 72 at the bottom. So this is looking really nice. So if I If you look at this design and I try to reduce it something like this, it is not going to look very nice. So it has less space at the door. Been more space at the bottom. So try to have something that have equal top and bottom For each section you are designing than inside the sections, we're going to have some spacing system Define. So this is basically your spacing system. I call it vertical blocks. I use them in all my designs like this. You can see this is how actually, this has been laid out similarly on your mobile version on your mobile devices. These blocks are going to be smaller. So here you can see if you look at all here, we have less space. I think it's 56 over here, I guess. Hopes? Um, 56. Yes. So in my mobile design, what I did is I actually reduced it to 56 we have 56 or here similarly 56 over here. So you can see this is actually how you're going to change your design or block system for your mobile app. So we're going to have smaller sizes because we have small screen or small devices. I hope you have learned and enjoyed this secret off my designs, and I hope you will try them in your designs to If you have any questions to ask me, let's move on to the next lesson. 8. Balancing your layout with blocks: in this lesson, I'm going to share and other secret which is balancing your layout. It is the most difficult. Asked a lot of us we think that we should have a symmetrical balance between all different elements off over design. We are afraid off using white space. So most of the times we try to fill and balance out were refined that they're here. We have the empty space that we try to fill it out. So this is the, ah, lot off designers. This is the biggest mistakes they make. I have seen a lot of designers, even me. I waas, I think, like maybe one year or two years ago I was like that. I I didn't understand how actually the white space works and how you are going toe. You can use that Ah, in a lot of different phase. So what we're going to do here is there are two points you need to keep in mind. Number one is that whenever you are balancing your layouts, you are you think like you have different wooden blocks and you are putting them on top of each other. This is one way off balancing your layout So, like I have two wooden box of warrants, slabs or whatever blocks at the bottom. Then I'm going toe stand one up, and I am going to place another one at the top. So this is actually going toe have a very differently out. So I'm going to show you some examples and then going to explain it better because, like, right now, I think you might be just imagining how is it possible? So let's see and see some example layouts. And then we're going. I'm going to show you some real examples from different websites or Web designs. Toe, get you started with this layout balancing. Now, this is the first layout I'm going to show you. A lot of times you might have seen different magazines, different books, and you have read them. And you have seen that this is a kind off typical Leo They have. They have a large off white space at the right top bottom left. And one thing you are going to notice all here is that we have more white space over here on the left, and also we have a lot of white space at the top. So this is how, actually this white space block is working. And then we have these three blocks over here for the content. And again, we have a lot off white space. Or you can say good over here to separate these two pieces off information like this. Okay, then again, we have some gap on the right, which is again called Margins on the Right. So we have something like this. And again we have, ah, border margin for everything else. So you can see now I have highlighted the void space in this design, and it is more than whatever the content is. So whenever you have more white space than the content, it is going to look very crisp and clean. So this is another way off. You can see control. Come on, D. So we have this over here, and you can see you. Can we have If you consider that these are three blocks, this can also be a white space. So if I remove this one in the middle white block, that can also become a white space so you can have a very long image over here and then heading and attacks over here. It all depends on whatever the layout you are trying. So there are many possibilities. Don't think that you are going to have three or four columns or 50% for our image and 50% for the the text. So there are many possibilities off different options for your layouts. Now I'm going to show you another technique which is leaving some space out. And it is going to look very, really nice. So this is a technique I use when I lay out things. And ah, which is that you can see what? Here. Here we have one big block, which is taking 12345 columns and I intentionally left one column in between. And then again, I divided. You can see the image or information or icons into three different blocks. So I have you can say. Actually, I intentionally created a white space block over here, so this is very important. Similarly, you can see we're here here again. I have did the same thing, but actually I varied it. So what I did is actually I buried the words off my blocks. You can see these are different. Just imagine that these are different wooden blocks. So if I put on top of each other like this, they are going to balance out easily. Similarly rather than living white space over here, I can do the same by white space would here. So rather than having everything, I can use that so I can have all my design shifted to the left and have more space on the right. Similarly, I can do the same by leaving some white space on the left and moving everything out like this. So these are different options. You have to pay dry. Don't try to, you know, think in just blocks and you can see simple blocks and always try to do something like this . We don't need to fill up everything like this, so don't try to think in simple ways. Try to leave out, try to very things that are different and that are going to have ah, different spacing options to create some interest. Now here I have another lee out and you can see everything is filled and ah, right now what I actually want to show you is ah, crude column combination. So this is actually how you can going toe create different combos off your grid column so you can see at the top. I am using 123 blocks and each one block is taking four columns over here. But in the next portion, what I did is actually I've varied it. I just created one block and one bigger block for to cover hold this area. So this is going to create some interest whenever you are changing your combos. So if you are ah, video game player, you know that if you keep on playing O r with the same combo gin and again, you're going to lose with your opponent. So it is not going to be very interesting. So try toe create combos like for example, I can also do something like this. Maybe, Ah, I do something like this. Rather than having three different three different same columns, I can have something like this. I can have two blocks on the right and left, which are same. And in the middle, I have two blocks that are going to take two columns. So there are many variations you can dough, so try to very your design. Maybe we can skip something like this over here and we have a lot of white space. So there are many variations you can create your with different great column, Cambone combinations and using white space effectively. Now, here I am going to show you again how you can combine different columns. You can have four elements you can have. Divide them into two. You can have something center aligned like this one on. You don't need to worry about combining them. You can have whatever Richie warned. And this is almost layout off. A typical website you can see on the right at the top. We have some links over here than on the left. We have a logo than the headline, and then we have four features or something like that. Then we have one image. We're here on the right and on the left we have text again. This might be an email subscribe field or something like that. Here I am. Come combining 3456 Sound it and four columns and then again, 50 50. So try to very your layout, for example. I have four over here. Then again, I have to over here now. Actually, I broke my users you can say you can say uses eyes you can see Right now my user is seeing the space like this and then I again broke it and move the space over here. So we have a content in destruction right now. Similarly again, I came back with here, So this is actually very ating your white space and having different, different combination off your columns. This is going toe have a very good effect on your design. Now, this is the last example I'm going to show you. And this is very unique and very differently out and which is actually I have seen a lot of websites, mostly creative website operative agencies that used this kind off layout, which is everything important is aligned on the left. So we have a very big heading over here. This is actually that their logo, the SEC. This is actually a navigation. It can be at the top or it can be on the right side and on the left. We have very big and bold headings, and everything else is white space. So this is going to have ah Lord off impact on this section over here. So it is going tohave, um, a lot off importance. Something like this. So it is going toe glow in the dark. So it is something like that are you can say dark in in a white room. So if you place ah black table in a white room and there's nothing else, you you will always focus on that black table similarly, on the in the next section, what they do is we have heading on the left very big heading and text or information or images on the right, and they keep on going like this. So this is a very nicely out on very nice style. You can try it in your different websites or represent No, I'm going to show you some examples. I think this lesson is already very long. So I'm going to shift to the next lesson, and we're going to see some real examples and how different void spaces have been used are different layers have been used by different designers. So let's move on to the next lesson. 9. Balancing your layout Examples: Now, the first example I'm going to show you is this page. I I don't remember, actually keep on collecting different designs. So this is not my design on this is some other designers design. Anyhow, I really like it How simple and elegant It is a lot off use of white space. So if you look closely, you can see on the left we have a lot off white space over here. So over content is starting from over here like this and again at the bottom. We have a lot of work space on the right. We have a lot of work space, and at the top, we have a lot of white space. So you can see it is typically our book lee out where we have more white space on the left and the bottom and on the right and the top, we have less white space. So this is another technique you need to follow. You have tow create something like this, and it will have a very soothing effect or very nice effect on your users. Uh, just for fun, I think they actually enlarged. If this image and this line out off this box and into the margin just to clear some interest. And it is looking really need and really nice. So this is actually how you are going to use your white space effectively. Don't try toe, get afraid off white space. Try to use it and it will create a very good effect on your designs. So let's see another example. Okay, so here is another example. And here you can see it is a design of shopping bag for soap web site. I guess this is another designer's work. This is not my work. I wanted to show you how, actually, these margins and these things work and you can see over here are in this section. If you look at it over here, it has a lot of white space on the right and on the left. Okay, so again, you can see over here this section. If your eyes are moving in destruction, you can see it is taking the whole space over here. So this is actually burying your ah written off your content. So we have less Contador here and a lot of white space than again. We are moving our content into the white space and then again back. So you can see this is going to create a very nice effect. Actually, if you try toe, implement this. So this is very great design again. They are showing it in a book. Form it again. We have more space on the top and the bottom, and we have less white space on the right. So this is actually book form it. I call it a book for Mitt, and I really love it when you try to use it in your websites or in your mobile app designs . So this is how actually the void spaces working over here we have a block were here like this and the block we're here like this. And then we have a block over here like this again. We have a block over here like this again. We have a block or here like this. So this is actually a little bit on the left. I think maybe it is not aligned properly, but actually, this is a center aligned design, but it has good variation off white space around. So this is looking really great. Now I'm going to show you another example, which is this one, and you can see we're here. Here. We have different blocks off different heights. Although I don't like thes too much creatively hours, but I think it can work. Or here. So we have everything laid out horizontally from left to right. And you can see here we have on the right, I think some Chad icon. Then we have to download buttons over here. And then we have this block over here and this block. So if you look closely, this is actually the whole block, okay? And then we have ah, this area over here, this area over here and this section over here so you can see on the left. It it has It doesn't have too much white space, but on the right, it has a lot off white space. So it is just like if you look at it, you can see it is it looks like a gun. Okay, so this is the back off base off the gun. This is where the bullets are. Just like cash and golf. And you can see over here. This is the Nosal. So this is actually geometric. You can say some designs or some layouts are based on some shapes or some geometries, so you can also use that also over here. I wanted to show you one thing, which is white space. So here we have a very big block off white space. Here we have a bit smaller block off white space, and here we have a slim block off white space. So you can see if we look at it over here, we have almost a very smith tree in these white white white space blocks. Okay, so this is actually what I won't want to show you here and guide you that you can also do something like that. It can also work and everything right now. Over here it is aligned in this direction on the left. So it is moving from left, right? But And the designer, rather than burying the vice pres on the left and right, it varies the vice piers at the bottom. So this is actually what I wanted to show you. This is where the unique design Let's see another example. Okay, so this is like me. Sure you hopes the the actual 100% off this one? Uh, oops. I think now 100%. So this is a website called work responsibly. And you can see this is the layout I showed you. We have a very big heading over here. Like you can see what hit. We have some small local. We're here and small link over here. So this is the layout. A short You in the last slide off last last part off my last lesson. And you can see this is the same layer there's using So on the left again, we have heading. And then if we moved down, you can see we have this content. Then again, the heading is on the left and you can see some content is on the right. So this is left, right, left, tried. And then again, we have something on the left. It is veering on the amount of white space on the left and ride and having some you can see in creating someone. Trust in over here again. We have this and again it is leaving bright white space on the left and right next on the left. And again we have on most white space overhit and use off a bit scale big, smaller and bigger. And if we go down, we again have a lot of white space on the left. Onda, Uh, that is all. So I wanted to show you that this this is how you can use designs creatively and you can have a lot of white space over here. It is going to put a lot off importance and stress on this section or here, which is their tagline or whatever. They you can call it just they're heading. And ah, this is another way off reading your layouts. Let's see one more example and then we're going toe Go to the move to the next section. Now this is an example off Ah, dashboard or an app. This is a web app and you can see over here the cool thing about this design which I really want to show you, is fight space. So you can see we have a Lord off white space on the right, and we have a lord of White Space between these two sections. Over here, this is the left navigation and the content. So between the content and the navigation, we have a lot of white space, and I am really living this design because it is it is so you can say so unique and clean because off its whitespace use it Similarly, if we look at the top, we have white space, but it is less white space. So this is actually and again we have you here white space. But it is actually the navigation you can. If we have more navigation, we can have we can fill the space. So I really like how this has been layout A lot off white space. You can see over here. Here we have at the top off this content section than again inside this content section. Then again inside, over here and again you conceive in the next section is moving again. We have a lot of white space. So this is another example that you you can have a lot of variation off white space even in Web apse, where the creativity is limited because this web is for content consumption. And it has a lot of different sections different navigations, So you cannot create a lot off. You can see creatively out. This is actually for content delivery, and you can say that data delivery websites or Web apps based on data, so you can still use a lot of white space over here and create a layout that looks something like this. So we have everything left aligned over here again. We have everything left line over here, but we have a lot off white space which is giving clarity and sleekness toe this design. So I hope you have enjoyed this lesson. If you have any questions, do ask me. Let's move on to the next lesson. 10. Single column centered layout for Web and Mobile Apps: in this lesson. We're going to talk about a different kind off layouts and different types off lots, and then they should be used. So 1st 1 I'm going to talk about a single column or what we call it centered layer. So everything will be mostly in the center center aligned, and it is a great way. And whenever you use it, you are going to put a lot of attention to whatever is in the middle. So we have a lot off white space on both sides and the middle thing. Whatever you have, it's a product. It's a burden. It's a form, or whatever you have, it is going to get a lot off attention. So if you have a lot of content like four paragraphs, three images, I think you should not go for a single column. Leo. It is good for highlighting something which has less content. So if you have a lot of content, I think you should avoid using single column or centrally outs. Now let me show you how it actually looks. Here. It is a simple presentation off center layout most of the times when you open up a Web site we have logo on the left and we have top navigation. And then below that, we have a very big heading over here. Okay, then we have some tagline or some other features, or maybe one or two line paragraph or things like that. Then we have a very big video or a big image off the product or ah, form over here. And then we have a call to Action Button. But you should sign up for this product or things like that. Then we have something over here. Maybe it's safe and secure, and it's just $9.99 per month. Or maybe something like that, which is going toe give you some a surety that this is a good bye, or you should purchase this product. So this is basically a simple, centered layout. Most of the time, it will look like this. You can move things around like you can have something like over here and heading and thinks, like over here, it's It's up to you how you actually try toe, move around things and how you grab the attention off your users. So this is mostly going to be in the Haider or hero section or top section off your designs . So this is all about centrally out. Now, let me show you just two or three examples because I think you have seen it a lot of times I'm going to show you a few examples, so you get the idea written on your mind or you can see engraved on your minds. So let's see some examples. Now here are a few examples off center early out, and most of the times you're going to see it at the header because they we need to grab attention. One and second is that we have to put some emphasis on our product. It's tagline or what it does. So here we go. You can see top. We have the same things here. We have everything in the middle. Then we have a tagline than we have this button and here we have a smaller button. Or maybe not much highlighted section watch demo. So again, we have this illustration at the bottom, which is again in the middle. So this is how this APRA start Io. They are putting emphasis or here, so it is not bad practice to use this I think I really think that if you can create a very nice atmosphere using a nice, kind off typography and colors, you can create any design. If with a simple layout. If you have a very simple layout, you can create an elegant design. Don't think that that you have a very complexly out of very creatively out to tell your story. You can tell your story with simple layouts would have by having some typography style using good colors. Next, we have this website. This is called same form and you can see over here they again have something which is sent early out. So very big heading over here. And I starts. They have some greedy int going on in the heading, which I really like. Then we have this burden. I think this should be like this. But anyhow, it's their own style on, and this is how actually they are grabbing the attention off their user and putting it on toe this area over here, Then we have this another one, which is border dot io. And this is I think, part costs kind off project, or I'm not sure what it is anyhow, so you can see or hear it again starts with the center layout. Although it is a line on the left, We're going to discuss this technique in the creative ideas in the next section. So keep that in your mind and keep your you can say, uh, your, uh, curiosity level high. So keep your curiosity level high and we're going toe talk about this in the next lesson. Right now, I'm going to just telling you what this leotard is. Centered layout Next is base camp base. Kim is a very popular website and you can see all hear very big and board heading. Then they have some paragraph would here showing what it does to their customers. Then they have their city A or call to action button over here. Nice touch. And then they have some line over here again. They have some images in the middle. I really like this simple and straight and a lot off emphasis on what it does. So this is a great example. Okay, so here we have another one, which is basically a design packaging design, and you can see where here this symbol, which is their logo. It is in the middle off this whole illustration, which is really giving emphasis, and you can say strength to this design. So if you look at it over here again, this this is designed in a centered layout. Everything is in the middle. But it is looking really nice because the designer has used a lot off create type guy faces , I think, to die. Faces which are looking create over here, have been combined like that. So good illustrations, center designed, everything looks great. This is how the create designers execute their design that don't worry much about simplicity. I think that simple designs with good graphics could typography and colors. They're going to get more attention than complex layouts. Again, we have this one finisher, dark CEO, and it is again something. Some app. And here we have again that center layout. Let's see some example off mobile layout, which is against anchor. This is Shopify website, and this is their mobile. Responsive you so you can see or hear on Mobil's. We have very less space, so sometimes on we have, like toward three columns. Design would try to squeeze it into single column or centered column so it is going to be used. Ah, lot of time on mobile interfaces are user interfaces for mobile mobile devices because we have less screen space. So we tend to ah, you know, have some get some space around by moving our objects in the top bottom order. So everything the center line you can see or hear it is looking great. So you have no guard. The idea off how you can use center, align layouts and try toe create emphasis in your designs. I'm going to show you one of my recent design I did and how I use center layout toe get the emphasis on the first or the top section off that design. Now, this is my recent project I did for back taxes. Help from This is one of my clients from you United States, and ah, you can see over here this is a custom tiefest about serious because it has some seriousness because it's a taxation company. So this is a custom tiefest. This is not Google tiefest. So again, you can see very good contrast off green and yellows or yellow oranges, amber color and very simple design. This is again center layouts. I want toe have the user to get attention on this. We have helped 300,000 nationwide to get tax relief. So this is again, I think a great you can see start for any customer over here. And then they had some credit. Certifications are and things like that. So this is actually I wanted to show you how you can use on the center layout on and create a good impression. First impression on your users. I hope you haven't destroyed the centrally out. If you have any questions, do ask me. Let's move on to the next lesson. 11. Project ► Centered Layout Design: now it is a time for your assignment. Now your first assignment is that you are going to create a centered layout where you are going to have some logo, some something or menu on the right top or navigation or phone number or whatever some element on the top. Then I need you to create a very big heading, board text and with some accompanying paragraph or text at the bottom are burden and and a shoulders textual. Here, you can use an illustration at the bottom. You can use on image with some overly effect like I have used. Or here you are open to use anything you want. You are open to use any design tool. You can design it in sketch. It will be actually for a shop illustrator. Whatever you have available right now with you, you can use that and I want to see something like this. So right now I'm using a grid off Boucher Grid, which is 12 column 30 got over 65 column Bert and 1 65 margins on board sites, and my canvas is actually 14 40 void. So I also have ah ah video on YouTube about creating boots, sha'ab grades so you can check out my channel toe anyhow, So this is their design. I want from you Ah header Designed with some centered layout of one column layout. You can also do something like this, which is my previous work back. One year back. You can use they have one heading one paragraph one this demo test burden and some accompanying text at the bottom. So you can use something like that too. And make sure that you are going to use some mattresses over here like I have told you. The vertical rhythm, Brocks. So try to use some blocks on top or bottom off this one. And also over here, where I have shown you this vertical blocks in my previous lessons. So try to use that technique toe. Have good spacing among your elements. So make sure you are going to use these vertical spaces and vertical rhythm too. So start designing no and create some awesome looking header designed with some center layout. And I'm hoping to see your design soon. So let's make it quick. And don't forget to submit this assignment 12. Two column layouts with examples: now, another popular layout is two column layout. Or sometimes I call it 50 50 layout or magazine layout. Most of the times when you see or read a magazine or newspaper, we have mostly content and images on left and right things like that. So this is basically dividing your content into two sections. One might be images one might re tax. One might be product. One might be its features. So this is actually dividing your layout now. One thing you need to notice is that it must not be always 50 50 layout. You can change the column. Birds. Maybe you're right side. You have more of it off your column and the left one is smaller, so this this depends on you. So it is easier toe juice with multiple images and text on side to side. And if you have one topic or one section you can easily have, you can easily have ah, create lee out and you can show your information easily, and I just I just table in that adjustable we to your users. So I'm going to show you a lot of examples and how we can create these different two column layouts. So let's get started now. Right now, I'm showing you a very typical start off. Ah, two column layout when we have a video on the right or an image on the right or product image or mobile app screen short over here and then we have on the left. We have some heading over here than we have a tagline or feature line featured line. Then we have a burden and watch demo or try it now or try it for 30 days. So we have some kind off patron like this. So this is a very typical two column layout, so we are dividing more off most of the time like this. Now you need to notice one thing that we use is most of the users. They're going to scan your website or design from left to right, so they're going. Their eyes are going to hit over here for the first time, so make sure whatever you want the user to read first. This is going to be your sport. Similarly, from right to left languages, most of the images and most of the titles and headings will be on this side on the right. So this is the thing you need to notice. Now, here is another variation off the same 50 50. But you can see you were here. Here. I have done something new, which is I extended this image on the right to the whole background. It is getting out off this section or hit. So this is another way. And also, you can have a form over here with the submit button. Most of the times if you are designing a landing page and they have a lot of forms, so you can have a form on the right and maybe some headings and text or images on the left . So there are many combinations you can do. You can have something like this. And let's, um, make this decks lines like that. And we have sex lines over here like this. Oops. Like this. And then we have try No, something like this. And we have some kind of layout like this one. So there are many things you can do over here as you can change your layout, you can You can do a lot of things. Maybe you can divide your images into two like this. like we have one image or here and one here or maybe some illustration or anything like that. So we are actually allocating 50% 50% off this space for our images, and the left is basically content. So there are I'm going to show, you know, examples off how it can be used and how it is used by different designers. So let's move on and see some examples. Now, here is one example, and it is a portfolio website by ramen, a product. Design them from Barcelona and you can see over here this is a very simple use off two column layout so you can see here his hair. He has some welcome Dexter here, some illustration off him. Then he has images in falling into columns. Again, this is again. Everything is in two columns. So this is very simple, very elegant. Clean work by Ramon. Now here is another beautiful design, which is a game two columns on. You can see this header is two columns on the left. We have some texts and learn more button, and on the right, we have a product. So this is another way to introduce a product And if you have one or two variations off that product or single product, this is a great way toe. Get some emphasis and also tell a little bit information about your product. It is a very popular e commerce website, which is Shopify, and you can see they are using same two column layout over here, which is Ah, this heading a big hiding on the left and on image and this. Actually, this is actually really over here on the right, and again you can see in this section they again have some feature. They're telling the features, Start your business journey. And so they have again used this two column layout. Again. We have a two column layout with some variation on the left and right and from the right and left. This is a good technique toe get variation because your muses mind they are going to get bored with the same Badran. So this is actually very ating. The pattern toe show that this candidate again you can see is this section. This is a great example. Off a book layout. You have seen a book. If you open it like this is this is one paid. This is the left page. So this is a great example. And I think you should try something like this. I'm going to make a new assignment for you to have some image on the left and have some text on the right and a button at the bottom. Something like this. So you can see you got the idea. And there are a lot of different ways you can use this two column layout. Here we have image on the left and tax on the right. At the top, we have text on the left image on the right than in the middle. We have some variations off texts and images, things like that. So this is a great way off using your two column layout. Now, here I am going to show you a very nice does nicely designed app from Huberdeau. I'm following this design agency for a while. And what I wanted to show you as this screen on the left, this first screen on the left and you can see you were here. It has a two column layout. So if we go closer over here, you can see these 24 options they are divided into two equal columns, and it shows it very simply. It is easier toe tap over here. If they have like this for buttons over here, they can easily tap it over here and use these features. So this is a great use off this Ah two column here. Don't limit yourself that these can be used just on mobile, just on websites. You can use them in mobile labs, too. Here is another example of a mobile app, and you can see over here in this section or hear slacked upto three sports you like. You have, um, four things over here to select, and they have, like, two column layout. So this is again another example of a two column layout. It's easy to tap. It's easier to navigate. You can move down easily. They have a lot off good area to tap overhead. So this is other way. You can use that in your mobile APS. Similarly, you can see this is the recent design I did, and you can see where here I'm again, using a two column layout to show these to video side by side. These are actually decks, professional videos and this is a great way of showing something like that. Similarly, if you go down in this section over here, text services available, you can see her or hear again. I'm using are two columns to show all these bullet points or text services. So this is a great way off using two columns. Don't think that you have to use one image and one tax. You can use text inboard off these columns so similarly, you can see what here. I have used the same thing over here two columns, but here just to create some interest, I change this information which is a bit off different from thes bullet points. So this is again the usage off left, right, two columns. So I hope you have enjoyed this. Ah design. You can say lesson about layouts and how to use your two columns, Layoffs, creativity with creative. Ah is if you have any questions to ask me, let's move on to the next lesson. 13. Project ► 2 Column Layout: Now, I want you to create a two column layout using the same techniques I have showed you before . Don't forget to use the vertical spacing, right. Vertical spacing and bullsh upgrade over here, you can see over here I am using the same bootstrap bread. And what you are seeing is the variation off the design ended, which is center line design. And this one you can see it is using two column. So this form, you can see get a free concert ation and court I'm using on the right and the left. I have some text. And also I'm using the technique, which is called overlapping, which you will learn in the next sections at boss Techniques. And you can see over here, toe Bella's that I'm using some images or some icons or whatever you can use over here. Or maybe Facebook as as seen in magazines or anything like that. So you can use something some logos over here, something like that. So try to create something like this two column layout. I don't want you to always have a form over here, because this was a lending binge. So I drink something like that let me show you a few more examples. Here is another example. This is not my design, but you can see you can use something like that and what I want. Uh, what I wanted to show you here is this one. So we have these few logos over here that this man or whoever he is featured over here, over here and over here. And you can use something like this. You can use a logo or some something over here. Then try to use two columns to have your layer like this. You can use 60 40% 50 50% whatever percentage you want to use. I'm not, you know, pressing you to use 50 50. You can see. Here's my other design. My old one, which is one year ago. And you can see over here. I'm using two columns. You can use the same, and that is also try to create a two column layout. And I'm looking forward to seeing all your assignments. So start designing your assignment now. 14. Multi column layout in Web UI Design: Now our next stop is multi column layers. If we have columns like three columns, four columns, six columns, then we are actually using a multi column layout. I have seen a lot of magazines using three columns. So that is why I have written over here magazine layout. Although it is not totally a magazine layout, but a lot of medicines use three columns. Lee Our toe show different action images or different articles and stories. So if you have a lot off content, you can use T column or four columns layer because you have to divide your content like we have four bullets, point bullet points or three bullet points or three features off a product or four features off a product. We're going to divide them inter. Different columns. So this is actually the use off multi column Lee hours. Now I'm going to show you some examples, some sample layouts, and we're going to go to live examples, different websites and get the idea off. What actually is multi column layout. Now here is one example or one simple layout you can do in the start or header off your website. Maybe you have to images over here. Two products toe, maybe something like that to boxes. Whatever you have, this is actually divided into three different columns. So we have 12 and three, so we can have some person standing over here with some tax return. We have some features over here, O r. Maybe a customer review over here. Then we have some heading and text over here and try out, but annoy whatever. It can be done in a lot of different combinations and this, but it shows that we have more than three different content types. One is a maze. One is maybe a testimonial when we have hiding text heading and maybe a relative text and a city or Caldwell Chamberlain. So we have actually three blocks off text. So if we have, like four blocks five blocks, we might not use this one. Maybe we can just our content like this. For example, if I have, like, two ah testimonials, I can get them like that. So there are many ways I can do something like this one bigger testimonial, smaller testimonial. Our customer reviews to to customer reviews or hear product image over here. And, um, the heading and introduction of the product and try it out by now. But an over here. So there are many ways you can do the streak and use this multi column, a three column or four column layouts. Hair is another representation off the same three column layout, and you can see here. I actually try to use some margins on the top over here. So this is three columns We have left one column over here, one column over here for the spacing, and then in the next section over here we have four features or four steps. Step 1234 and I have divided them into four different boxes. Now, why I left this these margins or head just to create some in just point in your design, if the user is seeing like in a linear way, everything is linear, linear engineer, they are going to get bored. They're going toe. Dive it. You know what the similarity are? Same experience again and again. So try to very with your white space over here with your columns. Over here we have three columns and then we have four columns again. We can have two columns again, we can have. Ah, center layout again. Then again, we can have something like that. So this is just to tell you that I'm using two different kind of multi columns or here three columns and four columns at the same time. So don't try to get afraid or try toe. Think in in a very that I should always use four blocks or four different pieces off information and divide them like that. You can use 34 are variations like this. Here is my recent design. Just example toe give you some idea. You can see where Here I'm using three different columns toe three different major columns . To show these three, you can say trusted features or services or whatever they have. So this is actually I have before that I have two columns than I have three columns. Then they have sent early out on Let me show you again. We have three different feature three different steps over here. Stepped one toe three. Uh, over here, you can see I'm using four different columns. And if you want me to turn on the grid, let me I think this shortcut key. So here is my grid and you can see this is a bootstrap grade and you can see we're here. I have left these gutters over here, and these are taking, like, four columns each. This is centered. This is centered center. This is again taking four columns each. It is taking three columns each. And, um, this is again two column layout on and we have again over here a multi column layout, which is three column the or so we have this column, this column over here, which is this one. Then we have this column over here. And then we have this column over here so you can see how I divided this footer into three different columns and we have site links. We have contact. We have the information about this website. What? This product? Whatever we have. So this is a great way you can see where here, Actually, I divided it with some colors to port. Actually, these are three columns Here. Have another example off. Mobile app. You were. You can see what Here. These are different games. I guess Sticker shop is a stickers shop and the whole grid is actually built on three columns so it is create to shore different products. You have seen it a lot of times on e commerce, Step side on clothing website. This is a great way to show a lot of data because we have, ah lot of things to show, so we can show them in a great off three or four different items. It is easier to scan for the eyes. So this is another way. Now here you can see a very simple example and you can see here the dead is actually divided into four different columns. One is bigger, three are shorter. And how actually this your designer data is that the dead actually is Tuesday February 26. It requires more with so they have Ah, again, they have some time 7 30 B m or a M. So this is a great way off showing date picker. This is another great example off using three columns over here so you can see this is a great design on. They have, like, six options over here sponsors because agenda exhibitors contact us map, so they are using three different columns. So if you look closely in this top section over here, below this homepage heading you can see we have again these three columns. So if I try toe, have some alignment or hair so you can see here is the first column than we have the second column. And then we have this third column over here something like this, so you can see a little bit off gooder inside of them, some bedding. So just to separate them with some white space, and then we have two different columns. This is another great way off showing information. Or if you have a lot off options or information to show, you can show them in tea column layout or multi column layout. Now this is Wall Marks website, and I like their design a bit minimal. And, uh, it is again you can see over here we have three different columns. Free grocery pickup training involvement dot com. So the free shipping. Then again, we have five different columns to show different categories than we have again using the same layout. Five columns. Then again, we have three columns again. We have three columns, one left, one is bigger and the right toe are a bit smaller. So this is actually usage off multi columns, and I hope you haven't destroyed the idea and how to use that properly. If you have any questions to ask me, let's move on to the next lesson. 15. Project ► Multi-column Layout: Now is the time to create multi column Lee or three column four column. Whatever you want, you can use them even five columns. Now I'm going to show you my designs and some examples, and you can see over here. I want something like this over here. So here we have. I got on the left text on the left and text on the left. So everything is a line on the left. Left, left, left. But the whole continues in the middle. Ah, and in the next, Over here, Here we have. Ah, this title on the left. But everything is in the middle like icon is in the center off this card on also, this text is in the center. So what I need you to do is create some heading like this, cleared at least four or t columns and three using icon, some tax and some link over here and create multi column layout. Let me show you one more example. Now you can see this is under design, which is my recent one, which is going to be my new website design and you can see or hear here we have three columns and I'm showing all my courses like that. You can use some button over here or you can use heading or whatever. So door thing that you always have to place. You're heading in the middle. You can use the hiding at the left and everything is in the middle. So this is what I need. I want you to create three columns of four column layout and give me something like this. So I'm reading for your assignment. Make sure that you are going toe. Submit this because this is how you are going to improve when I try to review them. When I try to show you your mistakes and ah, in this process, I also learned a lot. So this is, you can say, mutual learning and understanding off design and design mystics. So I am seeing forward to looking looking forward for your assignments, or do submit them now 16. Flower layout ► Secret: Now we're going to talk about a very different kind off layout, which I call a flower lei out. Now, why do I call it a flower? Because it has a shape off a flower with some battles. So you can see whenever you see a flower, it has, Ah, big middle. And then we have five or six or four battles on all of its size. So this is called flavor layout. Now, why and when you should use it? When you have a central item, you have to focus on a product, for example, a mobile app or some e cigarette or something else. So whatever the product it, it probably will be. It will be mostly in the middle off the layout in the center off the highlight. So it is good for highlighting different, like four or five or six or seven different features off a product. Normally, it will have, like you must have at least four different things around the central item, like four different features. Tow it, you can present them In this layout, I'm going to show you a few arrangements than we're going to look at a few examples How others as using it and how I have used it in my previous designs. So let's see some arrangements. Now. This is a very simple arrangement which we have seen a lot of times, but maybe you might not recognize it. The product is in the middle. It could be more by lab. It could be some perfume or anything else. And then we have features over here. Feature. 123456 So this is actually I'm using six battles off this flower, so I call it flower layout. Others might not call it flower loud. They might call it something else, but for simplicity and to understand the idea off the sleigh out. This is, ah, flower shape layout, and this is a very typical example off it. Now I have turned on my column. Urgh leads 12 column grids, and you can see or hear how I have used the same. A flower lei out to my benefit, so we have a product image in the middle. At the top. We have heading on the right. We have to features on the left. We have two features with some tax and in at the bottom we have by no button. So it is still flower layout. But it has 123456 battles. And I have used my hiding and by no button in the same arrangement off a flower layout. I hope you have learned a lot and how you can use it. No, let's see some examples. Let's go ahead and let me show you my design first. This is one of my old design which I think I've worn the competition. And this is a design competition entry. And you can see over here, here, in this portion over here. This is basically an e cigarette and you can see I'm using this same flower layout. We have the product in the middle on the left. We have cartridges and batteries on the right. We have some features like portable charging back car demises, Traditional tobacco man told in all those different features on the top we have heading and subheading Tagline. Then at the bottom, we have by nobody. So this is using I'm using over here flower layout. You You might maybe misjudge it that it has three columns, but still it is a flower layout. We have like everything arranged around this middle object eso Here we have another one. This is not a flower lei out. It is basically three columns, so hopes So this is what I wanted to show you that you can use flour layout like this in these different ways. No, I'm going to show you a few more examples. No, this is the second example. And ah, here you can see this designer he has or she has used Ah, this design ready uniquely Because you can see this shape or the sparkle hair is in a three d format. It's on in a perspective, uh, perspective layout. And we have again the same thing going around over here. So this product is in the middle. We have agility, focused vitality, energy and product attributes at the bottom that are actually making a flower layout. Bert. Ah, here. You can see that it is a bit shifted in the in this direction. So on the top, we don't have any battles over here, so you can say it is 1/2 loverly out, but it is almost floor flower layout, which I call flower layout. Product is in the middle and everything else is around it. So this is basically another use off flower layout again. This is another website from some Russian designer and you can see over here again. We have park in the middle and everything is on the left and right. And at the bottom is this is again a use of floor flub early out and you can see over here that it is not using any heading at the top. And we have 123456 on the left and right. And seven is the basically on the button oil here. So this is again flower layout. You can use that in a lot of ways. You can see or hear, hear. We have icons with text and up Burton and an image. So this is another way. Here is another example of flour layout, although you cannot seem to recognize it, that it's floor flower layout, but I think it is flavorless. But you can see this shelf. Sherlock Holmes in the middle is almost a middle off this design or the central point of this design. Then we have 123 around it. Then we have this shut lock This is also the heading. But it is, you know, around this main character off the series. So this designer, they have used this in. Ah, you can say creativity because everything is lay out in a different way. So you can see here we have image and text on text at the bottom. That image text on the left image text on the right image, text on the left image, text on the image, and then we have this heading. So this is another creative way. I am just trying toe open up your mind in different creatively outs because this is going to help you a lot while you are designing. Don't try to bond yourself in tow grids off food like this, like four equal items. Try to veil your design. Try to have some use some creativity in your layouts. I hope you have enjoyed this flower layout, lecture or lesson. If you have any questions to ask me, let's move on to the next lesson 17. Project ► Flower Layout: Now it is your time to submit your assignment and create something with flour. Early out, you can see Right now I have used Fitbit verse of upside and create this simple flower Lay out very quickly. And I was not, You know, I just created it in 10 minutes. So a t least I'm expecting something like this from you. So product in the middle, we have six features or here and here is the page I took. Okay, so this is the page. This is the text. These are the things you can also use the icons. I didn't have time to find all these icons. You can use them to enhance your designs. And ah, this is the flowered lei out I want. So let me show you, um where we have this one. Okay, so one is this one and 2nd 1 is this one. So I already showed you this one, which is Ah, my old design. And you can see I have ah, almost lovely out. But things are different. We have some features over here to features over here and by nobody. So you can either create something like this and you can have a mobile app, our mobile screen in the middle and show some features over here. And you can also have something similar to this, like I have used it but versa. And I'm the four time using or typhus I'm using is really big, which is a free die face. And that is all. So if you can create something like this flower layout, I would really love to see your assignments to start making your assignment right now. 18. Masonry Grid in Web Design & Mobile App Design: in this lesson. Now we're going to talk about masonry grid now. Why it is used. If you have a lot of images, you have a lot off products. You have, ah, lot off posts. Articles you can show them using masonry cred. Now fasting is that if you have a lot off article based or content based website where we have a lot of images or news articles, you can show them using this grade second. Why It's name is masonry. Because if you have seen a brick ball Vaulx full off bricks when the miss and try to build that wall, they have a patron. They try to fit different bricks into different styles. They are not putting each brick on top of each other. Some breaks are on the right on the left, and they make up the whole wall. So this is how this name is, as actually masonry greed, and I'm going to show you some arrangements than we're going to look at a few examples. Websites that are using them. I personally don't like missing a great much are at least agreed that unknown and Ingrid So there are some missing the grades. If you're dragged down. They are There is content appearing again and again. And there they are, endless screen. You can call them and Astrid. But Mason agreed, is not actually an endless scrolling grid. It is basically Ah, design designer time. Okay, so let's see some arrangements and then we're going to see some examples. Okay, so here is a typical masonry greed. You can see over here we here. We have three products on the left, and we have product and product in the middle That are big. Ah, a little bit bigger than the left product boxes. Our cards. You can call them on the right. We have smaller products to smaller, and then we have a very large for at the bottom. So this is actually missing. Agreed. The concept is that you are going toe have different sizes off bricks, so you can see in the middle. We have very big stones on the left. We have ah, standard Briggs on the right. We have two small bricks than we have used. A very one large brick. This all depends on you. You have to create some variety you have to create, alternate some lengths or heights toe, you know, create some interest in your layout. So this is how you are going to use masonry grid? Here is another arrangement off the same masonry greed. But this time I am trying to use it in a different way. In a creative you can see we're here. Here we have Ah, horizontal. Ah, very big product image at the top that is taking two columns. And we have again on the right smaller break than we have a large one, Nor here than again in the middle. We have some wide breaks on the left. We have some red bricks that are standard sizes. So there are, like, tons off different combinations, different layouts you can do with miss and regret. So it's up to your creative ideas what you are trying to do so you can have some feature product in this area in the top, where we have very big image than we have some ads on the right. Maybe some advertisement, maybe some subscription box on the left. We can have our articles in different categories, something like that. So there are a lot of possibilities. It will all depend on your content so you must have your content first. Ready toe. Apply this masonry grid design. Now, let's see some examples and riel time usage off these layouts. Now, this is one example of masonry greed. But I really don't like this layer. Why? There are two reasons. One is that thes kind off. Very creative layouts that are totally out off the way are going to confuse your users. So on the top, it might be good, but over here, this is totally a mess. I cannot tell that which section is or images later toe resection. Whether it this image is literally this one or this one. So there must be some gap between these the's blocks off text and images. I really hate when designers, you know, try to use creativity and create a mess like this one. This is a very creative Rubley out, but it's totally use less. Why I have shown you over here because, in my opinion, the layout, your colors, your visual design, everything is going to facilitate the functionality off your website. The usability off your website, the readability ledge ability and understanding off your user user must be able to understand and get toe what he or she is looking for easily. This is totally messed out. I think for me, this is totally, um, lost cause So I am not going to ever, um, tell you to design something like this, But just to get the idea what can be done with Mason really out here again, you can see we have this another example of masonry layout. You might have seen this layout in Ah, window, Stan. Menu bar. So for me, I I don't like it a lot, because for me, it's really messed up right now. This one looks better because we have buttons over here and all this is inside this whole box. So it is not letter to the image on the right, on on the left. So each section is on its own. So it is a little bit are I can see a lot better than this one for me. This layout, like you can see at over here with this image, I cannot I know that this image is elated. Toe the bottom text or the top fund. So this is a bit confusing for me, so I normally tend to avoid these kind off layers. You must have very clear separations between different contents sections. Don't try to use images like that. Our try toe, have some border around them, so I can see that this is a whole section of this is a whole block. Now you can see for me over here. I can see that this is Look, this person is looking at this one, and he's looking at this one. Don't know whether this whole posters lated or this guy is related to this Collender or whatever. So I This is really confusing for me. So try to avoid you. Have you must have some, um, separation riel separation between different blocks off text or information. Now, here is a good shoes off. Mason agreed. And it is used on fine, just fine trust or been just whatever you call it. And you can see what here I have such for masonry grade, and you can see tons off missing regrets over here. Like this one over here. They have a great usage off these and you can see total separation. Let's see this one. You can see that these images are totally separated from each other with some gap. And this is the good usage off Mason recruit. So Mason regret is used on Pinterest and we have this blogged or curio snort com and you can see all these are actually missing Regrade forced articles you can see or hear it is going to go on and on for me. I don't like these ever scrolling websites that must have some end anyhow, so here we have one more fully any dot com And if we go down, you can see again. We have masonry grade and we have different posts. Articles even. See where? Here They have clear separated lines boxes around them so I can see that this is one post. This is another one. This is another one. So this is another example. Great example. Very simple, very unique. Very nice. Then we have another one, which is vanity, Dean. And you can see over here if I drag down, we have again the same medicine regret. But the problem over here is for me that it is, um you can say sometimes I see some irregularities like we can see image heading text and ah, the text is weak or something. Something is missing from this design. Maybe used some lines over here to have some separation Or maybe at the bottom, some line just to show that this is a separation or something like that. But for this is another example off masonry, Greek. So this one is great. This one is good. This one is really great. And, um that is all about masonry greed. I hope you have understood the idea off using Mason Regrade. Ah, and you will use it in different creative ways. If you have any problems, let me know in the questions. Or you can ask me anything. You can contact me personally. I mostly response as soon as I can hope to see you in the next lesson. So let's move on to the next video. 19. Killing with percentage combos in Layout Design: in this video, I'm going toe Talk about a creative method off defining your layout, which is always think in percentages, but never as you are defining your grade on your layout. Try to think in a way off that this is going to take 20% off the layout horizontally. This is going to take like 80% off the layout so you can define Lee out in percentages and allocate different grids using percentages. And your developers are going to love you because it is easier for your developers or development team toe. Quote it, and you can create different simple variations to have some creativity in your layout. Now, if you have ever played video games or fighting games, there are there is a term called combo. So combo is when you try to hit your opponent and keep on hitting them with different combination off. He's so in their design. What I mean by percentage compose is that you are going to use different layout combos like 60% and 40% campell 50 50 combo, 20% and 80% compulsive. We are going to very over layout by using all these different combinations, then We can also have three column combos like 2020 and 60 com bowl 40% 30% 30%. So they are all making up 100% to make sure they're adding up, 200% bought. Try to, you know, make a combo that is going above or below 100%. Then we have 50 30 20. So there are you can say tons off combinations. You can do a lot of different combinations by doing this, like you can have 10% or 20% or 30 per 30 70% combo. So this is another technique which I think a lot of designers start. Try to think in these kindof terms. Try to use percentage combos in your layout. So here you can see I am showing few ideas off different combos like you can see at the top . We have 40 60 now in the next section, rather than using again 60 40 or 40 60 or repeating badly out. I try to shift it on the left, and I tried to use 25% and 75% combo, then on the next row or in the next section off my design I'm using 25 25 25 25. So we have four equal boxes. So this is how you are going to very your layout with different percent age combos, rather than using a monitor on US layout off 40 60 40 60 40 60 or 60 40 or 50 50. This is going to create a boring design. Your users are going to, you know, your their minds. They need something different after a few seconds. So whenever you try to very your layout, it is going to create some interest in their mind, and they will keep on browsing that wraps. I don't try to be over creative and try toe create layouts that are, you know, a problem for the users. But you have two very your combos. So this is another technique which I think a lot of designers don't use. Now, here is an utterly out and hear what I'm trying to do is I'm trying to very my layout and try toe advice space over here rather than having 2040 60 combos. I am going to have some white space over here, so we have like 6 50% over hair, 25% over hair and 25% white space in the Haider. So what I am doing is 50 25% white space and 25%. Uh, what here? So you can do something like that, too. So don't try to always feel everything. You can use white space in your layout again. Over here. As you can see, we have like, um, 40% something like this or here. I think you need to divide thes 5/12. So get the idea off whenever percentage I'm using. This is 25% and ah, this is, I think would be divided into 75%. So whatever I'm using, I'm tryingto very my design. And again, you can see over here, these four boxes are 25% but the layout is different. It has some radiation by adding some white space over here. Now I'm going to show you some examples from one of my favorite designers. Raffle tomorrow. I'm trying to follow him from a lot of time, like maybe one or more year, and you can see over here. This is a recent design for so your bulky and you can see. I want to show you how to use your layout in percentages and try to vary it into different company combinations. So here, you can see if you look at this head over here, we have, like, 65 or 60% and 40% for this stool gate or this download. Talk it over a video here. Then if you go in the next section we have about and this little information about this awesome guy Anyhow, we have, like, 30 or 20% by 80% allocation overhead. Then again, if we go to this area, we have, like, almost 50% by 50%. We have more space, some white space, some percentage for white space. So I'm going to call it 40 60. So 10% is almost of white space. So this is again, again. You can see over here again. It has used 20 or 80% than we had 25 25 25 25 again. 2080 25 25%. Then again, 2080. So you can see this is how your layout is going. Toe look like more creative design. So you tend to have some gumbo, different combinations for different sections. You can see we're here. This is repetitive in a lot of different ways. So this is again a principal off design repetition Port. Try to very your repetition. So don't try to use a similar thing 10 times over here. Try to very in your layout. So this is a great way off showing how you can use layouts and creative is like You can see where here here, rather than using just image you. He has used image with text and on the left again, we have some button and image and this Saudi next and this heading now. Now let's see one more example. Here's again another design from the effort Amal. And you can see where here almost we have more heavy on the left. Here we have the image and this burden this burden is getting inside this. You can say Ah, a little bit breaking the layout. But still it is looking great. It is called like out of the box. Later. I'm going to talk about in another lesson anyhow, so you can see again over here we have, like, 70 40 or 70 30 something like that. And again in this section. Over here, we have over here on the left, 40 or 45 35 65 or 60% almost on the light. So you can see this is a great vidi ation and lay out again. We have overhead. We have ah, like 33 33%. Or here again in this section, you can see we have, like, 30 70 again, almost similar to that. This is again a great use. And we have, um, 33% 30% 33%. This is 100%. This is again 33% 3 reviews. And here we have something similar. Almost this head over here. So the layout is we have, like, 40% over here, Or maybe 35% and 65 or 60% on the left. So this is the breakdown off different layouts off great designers, and that is how you are going to use your combos. And I can show you down 10 and thousands off different designs. But I think this is going to have this is going to explain everything for you, so I don't need to explain more than that. This is not a very scientific subject or time travel equations. So that is all. If you have any questions to ask me, let's move on to the next lesson. 20. Creative use of Margins in Layout Design: in this video, I'm going to talk about a very important concept off label design, which is using white space and margins creatively. A lot of designers I have seen that the try toe avoid a lot of white space and margins on sides off their design. They are afraid off, using white space or breathing room in their design. Now I'm going to show you some ah, lot off examples and some layout ideas. And then I'm going to show you how different designers are using whitespace and margins to create creatively outs that are going to look ah, Lord better than yours. Usual layouts where we have equal amount off margins on both sides. So here we are going toe discuss two techniques. Having margins on one side and using voice space blocks. Now design is a story. So in just like a story, you don't have to show everything in the start. You have toe show scenes where only some portion off the design is visible. So here's you can see in this design we are using a great or heavy margin on the right. We have a lot of white space in our first header section on the right side. Now it actually means that we are leaving a big white space block over here. Similarly, in this third section were living a very big white space block on the left. Whitespace, if used properly, does have its weird. So if you are trying to do something like that, you can do it. You can also call it asymmetrical design because it is not properly balanced or balance on both side. But still, it is kind off balanced. So if you look in nature, you will see symmetry with asymmetry a lot. If you look at any tree on the branches and the leaves that have fallen on the ground, they are not in a symmetry, but they look good because they they doesn't deviate too much from the pop patron. So if you have some pattern like this and you are using white space on the left and right and you are not, you can say you are using the vice pres blocks within your grades. Your asymmetrical design or unbalanced design will still feel balanced. So here I am, using a lot off big blocks off white spaces over here. Now, this is another example, I would call it Sometimes book layout are a lot of graphic. Designers might be familiar with it. If you look closely, you can see that the visible line which is falling this design is over here. So we have, like, two columns. Gap over here on on the left side. And also similarly, you can see here in the top. We have three columns here and two columns over here. So let's hide this. Now if we try to do something like this, that's how these I'm just trying to explain this idea. Now you can see that this kind off layout is going toe have, ah margins, which are going to be mawr tilted on one side. So we will have bigger margins on one side, Like you can see you're here. Here. We have, like, three column margin, and on the left, we might have a smaller margin. So this is going to create a very nice effect in your design. I have seen a lot of designers that they try to balance the voyage based on both sides, but sometimes if you try toe imbalance them. Try to use one side more heavier with white space, it is going to look better. So in your next design, I would advise you try to do something like this. Try to shift your design elements. Leave two columns rather than, you know, bounding your everything with these columns and try to fill everything up. Try toe leave. Ah, lot off, um, space on one side and a bit less space on one side. So it is going to create a very nice effect. Now I'm going to show you some examples where margins have been used creatively. You can see if you look at this screen over here on the left. The margins on the left is more than the margin on the right. So we have more white space on the left than we have more white space on the right. So this is how you are going to try toe, have a different kind off layout in your mobile app. It's going to look more creative. Let's see, said this example and I'm going to show you what I actually meant. So if you go down, let me show you, or here. So this is the page you can see this whole design is tilted on the right side. It is heavier on the right side and on the left, you can see if you look closely. There is a lot off white space. So if you follow this design, you can see why. A lot of white space, lot of white space, lot of white space. And then this designer changed the ah linear view and reverse this and we have a lot of white space on the right. Then again, we have equal almost equal vice ways on both sides again. A lot of white space on the right side. So this is how you are going to use your margins? Are your white space creatively? You have to leave a bigger voice based block on the left or on the right toe. Get some creative layouts. Similarly, we have this design smart retail. And if you clearly focus on this design and see that it is also almost tilted on the left side. So we have more heavy design on the left. We have mawr empty space over on the right. So if I drag down, you can see Okay, Okay. So here we have more white space. Everything is a line on the left. So we have more white space over here, similarly in the section. So this is actually Jews off white space. Try toe. Focus that you can also have a lot or leave a lot of white space on the right side or left side to get better ideas in laying out your APs or websites. Here is another example Flex flat tax ship smarter and you can see that here we have something some creative use in this section off white space. You can see we have a very big block of text and we have image and we have a lot of white space below this image. So I don't think in terms off margins that we're going to leave. I space on the laughter on the right. You can also leave a big block off white space at the bottom. So it is going to create a lot off Good effect. You can see this image is already very heavy. It is colorful, so users so it is not looking imbalance. We have a lot of text over here, but still it is looking great. So it is just like a shape off. You can say, Um ah ah Hammer or something like that. So we have ah, vertical direction over here and horizontal over here. So just two blocks off, would you can say combined together? Similarly, you can see in this section we see the reverse reversed off the reverse arrangement for this layout. So this is another technique which I already showed you that you tried very things toe get better layout and to look better toe have some mawr engaging designs again. If you look at the top off this section over here, you can see there is a lot off white space after this. Ah, navigation. So we have, like, I think two or maybe 300 or 350 maybe 400 pixels off gap over here. So this is a lot off gap. I have not seen a lot of websites that they try to use white space like that. Let's see some more examples here. We have another example and here is this app and you can see we have more margin on the left and everything is shifted on the right. So but Hanzal, you can see our Children towards the right and ah, this whole information instantly toward the right, although it is aligned on the left, but everything I have. Ah, lot of margin. Or here, let's see this one again. This is another example. Here again, you will see clearly that we have a lot of white space on the left. So this is going to create a very nice effect in your designs. If you are designing for Mobil's or websites. Don't Don't think that we have very small screen on mobile, so we cannot use creatively out ideas. You can use them. Okay, so here we have another example. And again you can see over here we have a lot of white space on the left, and everything is Children on the right. Even the plus button is used very Vice Lee. So everything is mostly heavy design on the right on good margin on the left. So it is going to create some creative look in your designs. So I'm going to give you ah, and exercise or assignment to create some something some screen like this one. I will give you an example screen. We will try to do something like this. Maybe something like this one. This week and we will see how you come up with different ideas. So I hope you have learned how we are going toe. Use creative margins on left side or right side or even at the bottom off. Some image to create creative layouts and try toe get out off the normal designers. Lynn. So we are getting out off their lane and we are driving in some a little bit off creative lane, our design cars. Okay, so I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 21. Project ► Creative Margin Layout: Now you have learned how to use Ah, a lot of margin on left or right side to create creative layouts. Now is the time you're going to give me some assignment like this one. I'm showing you on your screen. I am right now using figure. You can use any design software, any tool you want. And you What I want you to do is you're going to leave a lot of white space on the left or on the right. Whatever you think is possible for you. So right now I'm you. I've created this tummy app called healthy foods or he'll food or whatever. You can designed something like that and show me your screen like this. So try to create a layout with having a lot off white space or margin on left or right. And here we have the rendered image you can see over here. So create something like this and I'm waiting for your designs. Try to submit a mock up design where you show your design in a mobile phone or something like that. So let's see what you can come up with 22. Out of box and overlay method in Layout Design: in this video, I'm going to talk about a very different technique which a lot off designers don't use, or maybe the notices they don't understand, which is out off the box layout. Now out of the box is basically based on this principle that whenever a user or human beings, they keep on seeing the same patron or seem similarity in your design like you have more, not own voice. So, for example, if if you hear some music, if the Sam be beat is going on for like 10 minutes, you are going to get bored. So what musicians to is there? Try toe very after every 30 seconds or after every 15 seconds that try Toe Jane. There beats or things like that. So this is about music. But whenever you are designing something, you have ah, layout. You have to keep the interest off your users into your design. To do that, you have tow, think and change. There you can say viewing line, for example, if they're viewing something and everything is aligned toe one line on the left, you have to change that. After some time, maybe her intersection. You try to extend the background to the whole screen or you try toe overlap some elements in your design toe Another section. You are overlapping two elements, and it is going to create a very interesting layout. So try to deviate from the grid lines. Try try to deviate from the same monotone kind off design layout. Try to go out of the box and I'm going to share with you a lot of different examples and also different screens, which I have sample screens which I have designed for you. So we're going to discuss this and I will give you a lot off creative ideas to use this out of box technique in your Leo design. And now here I am showing you first arrangement and you can see everything is lined up on the left to a single line. Now, if you look at the right side, I am very ing my breeds. Ah, Lord. So in the second section over here, you can see that I have extended this and I have moved this image outside off my grades. So these are my 12 column grids and you can see your hair. I'm using 12 column grids and I'm moving this image outside of Tikrit. You can move this, and maybe it is going to touch your hair on going to take the whole right side. You can also do something like you can extend it in this direction in both directions and is going to break the flu off your users. I so they might be thinking that everything is contained in this container. But if you try to break this country in container 12 grade container, it is going toe make a lot more interestingly out. Now here is another arrangement off out about off the box technique. Rather than extending your image, background or any other thing our dear design element and breaking the grade, we are actually breaking the layout. We are overlapping things on each other, so we have taxer image in the background, and the next some off the text is overlapping on the image. So this is another technique, which I think that a lot off noticed designers are new designers. They don't try to use it, so don't be afraid. You are going to look a lot better. Your designs are going to look a lot better when you try to do something like that. So try toe overlap, image over text or we have a tax block and we have an image over here like that, and text is overlapping. So now text is actually a readable element, so we don't want to hide a lot of portion off it. If you want to hide some off the text you have, you have to hide some off the portion. So still it is readable and the user can understand the meaning. So just keep that in mind. Now you can also overlap image over an image like that. We have a lot of images. We can also have any Mitchell here just to break the monotone off. Your design design is a story you have tow change. Some plot twist in your story is you have tow Jane the direction off your story than again . Go back to the point. So these are the things you have to keep in mind while designing creatively out. Now you can see you can create a lot of different combinations Here. You can see I have a full bird image and I have overlapping text that is on the left. And it has just some off the part off it as an overlap. Now, in the next section, you can see I change the direction off my over lab. I went to the right side, and now here we have a right side block that is overlapping on the image, which is almost in the middle. So you can very these things in your layout. Just make sure that you are falling some grids over here. You can see I'm aligning things to the grids, but it will clear a lot off creative lay out when you try to implement things like that. So this is very important concept. I'm repeating again and again. Try to use creatively outs out of the box layout. Try toe overlap things. Try to exchange your things out off your boxes. Think out of the box. And don't limit yourself to the 12 colonies. Greed. Now here is another relation. You might have seen this. I have a full image background, and then I have a subscribe form on the top. So I have seen this and I have used this in a lot of designs. I have designed few landing pages where I have used this subscribe form and the subscription form is a bit, you know, extending extending out off that first header section. So this is going to create a lot of interest. Now, at the bottom you have, you are seeing a subscribe section over here, and you can see we have ah, bad grown at the bottom and at the top. We have this subscription. Um, this is going to be a subscription form in the left right direction rather than talk to boredom. So it will have some email over here than ah Burton over here and some texture over here, something that's so subscribe to our newsletter or things like that. Now you can see this is ah, almost taking. It is almost in the middle off this section over here, and this is on the right, and it is taking 12345 almost five columns. And this is taking almost, I think, 10 columns. So there are many variations you can do now. I'm going to show you some off the examples s so you can get what actually you can use and what actually you can, because in inspiration is going to give you a lot off ideas. We generate ideas from other ideas. So let's see some examples in the next lesson 23. Web Design and Mobile App Design out of box examples: Now, let's see some examples off out of the box layout and how how you can use that. Now, if you look at this design, let me show you. Okay, so let's go to this section over here. So if you look at it over here, we have this stacks over here that is taking something like this. So on the right, you can see we have dis portion. And if you if you are a new designers, you might be using your burden something like this. So So you might be using You might be aligning that's de selected. You might be aligning your button with the text like this. So you are taking the whole space and another tax and things like that. So here's you can see, rather than using this button and moving it just below aligning it with this text, that designer actually moved it on the left so you can see everything is aligned over here . The text is a line, but the elements on the right are have different variations. So this is going to help a lot. Actually, this designer moved this button on the left a bit. So this is ah another technique. And here you can see. Here we have this. You can see what? Here? These images, they are extended out off this section or head. So similarly, I actually told you that you have two. Very. Your layout. You have to change things. For example, You can see over here this section over here it is ending with this line off direction. So on the right, We have let me draw something over here, for example, Rectangle. So, actually, this is actually the direction our I was moving when we left this. Okay, so we have to, uh, lines off. Movement one is this one and second, this one. So this one he kept along moving elements. Elements are aligned toe this line over here, but here, actually, he moved everything out off this line. So this is how you are going to create in just in your design. Just look at these two sections. Okay? So you got the idea how, actually we are going to use out of the box layout similarly in the next step, and now you can see hey, actually tried toe varied or he or she whoever the designer is this It is a great design. I think I got it from B Haas. No, I don't remember where actually is the UL or whatever the design. Those name is eso Here we have again the same thing. But you can see the arrangement off. The images has been changed. So here we have 12312 And here we have 12 and three in the vertical direction. So this is a big change over here. And also, you can see the layout due to changing the direction off the image. It looks clear similarly again. We have something over here which is breaking the layout so you can see this image extended over here. Now the next section is starting and taking this like that so you can see you can understand what I'm trying toe. Tell you the point over here again, you can see this is extended outside of the box on, and that is all. So that is why I wanted to show you this example. Because it's a great example off varying. Your layout are getting out of the box. Let's see some more examples. Okay. So rather than thinking that you all are always don't have to move your image or things out of the box. But you can use a similar technique that is actually used over here. You can see in this section over here. Let's zoom in a bit. So in this section over here, you can see I also call it out of the box technique. Why? Because you can see this shows the movement. Now, here we have some patron on the back off this box, this image over here and it is moving in the left and top direction. So it is actually have some backgrounds, a little bit of background off this patron or help. And it is also making it out of the box. Why? Because you can see this is the line off site. So here the uses LA, um eyes are moving in destruction. But to break that, he has used this little patron or here. So I really loved this technique. This is another technique you have toe show something some, some color. Some patron. You can use some background. I have seen it a lot of times. Similarly, over here, you can see in this hair it has some pattern. It has some leaves on that are extending out of this box. You can see if you draw a box over here. Let's draw a box. So if we draw a box, you can see this is this Leave is going out of the box. So this is another example, Lexie. Few more. And here we have some examples off hope. Bring on other elements. Okay, so here we have another design which is very simple design. And you can see this whole aboard text is overlapping on this image. So this is another technique we have, which I told you that overlapping on other design elements. Similarly, if we go down over here again, we have two overlapping images. Rather than having text overlapping the image, we have image overlapping the image. So this is another technique which I showed you. And ah, here we have the same technique. Which is you can see if we are moving from here. This is of a line off site. So this is the box. And in the next section, you can see hey moved on the left and a taking different space over here. So now our great is actually this wide so we have two blocks on top of each other. One is a Britain vertical direction. One is a bit in a horizontal direction. This is again varying your layout, having different layouts often out of the box and moving things around. So this is going toe to create a lot of interest in your designs. Now, coming to the mobile APS you can You cannot see a lot of things over here, but, um, I have to show you something which is overlapping so you can see this burden. Your hair fall over, and it is looking really nice because it had it is overlapping half off the ah, the half off. The burden is overlapping on this image. So this is very important concept. You can use the ate it, and it is going to create a lot of interest, even your mobile labs. So let's see a few more examples here. We have again overlapping text over here. If you look in this section over here, we have a lot of different breeds and hikes off different blocks just to change. You can say the monotone off your design. Let's move to this one. Okay, so here we have image at the background and text is overlapped on it. It is looking very nice. Ah, effect. And I'm just going to show you a few examples and concepts. So just to open up your mind So here we have again the same thing. And this is a very great design. We have a blue and red and orange block and on top of it, we have investigations is new. So this is an article you can see here it read article over here. You can see on the left the left Over here you can see this image has been overlaid by the stacks block and it is looking really cool. So this is I sometimes call it hide and show or hide and seek something like that. It is a very nice technique. You have toe overlap your elements. You have toe, move them like you can see over here. These three over here they are not aligned to this image. They're moving out off this image. So this is looking really cool here again, we have overlapping image and text images overlapping on the tax block Over here again, we have the same technique this small image every dot is overlapping in this on this big image, this textures overlapping on this big, big image. So this is a great technique you have toe he use it sometime. Now, here we have a very minimal design and you can see again, we are seeing the same patrons were here, which is overlapping. So this new looks creed it is overlapping on this Over here, make up. And, um, everything is in 33 blocks, Three columns, and still they try toe, you know, divide this second middle column into two. And the interesting thing is that they are moving things up and down. So I'm going to talk about the moment in the may be the next few lessons. Until then, you have to read anyhow, So this is another one. This is an experimental design, but I'm going to show you a few things over here. One is that you can see. This is almost centrally out. We have few tax on the left and some some off the letter over here. You can see it is, um it is behind this image, which is, I think, jelly highlighter elf. Something like that. So but I don't recommend that you hire that. You hide a lot off your letters. Maybe one or two are maximum. But this is an experimental design. Now I really love how this whole shop in store shopping store, which is, actually, I think navigation is in destruction. So it might be terrible or movable. Something like that. Anyhow, so here we have again hiding some off the text behind this image. So this is a layout that is actually in destruction, moving in, destruction from the top top left to bottom. Right? But I I really like it. It is, um, using a lot off creative things over here anyhow. So again, we have different block sizes. We have full weird. We have some margin on the right and left, and then we have again in the middle. Okay, So the thing I wanted to show you is this stacks hiding behind this? So that is all. I hope you have understood the idea off overlapping things and moving things out of the box . And I hope you will enjoy using it in your designs. If you have any questions to ask me, let's move on to the next lesson. 24. Project ► Overlapping Layout Design: Now I'm going to give you an assignment toe. Create a layout where you were going to use overlapping. So you can see in this design this girl image is overlapping. Dumb The dresses or dresses short over here The text eso This is one example Also, let me show you. Here is my example. I think you have already seen this, that I'm overlapping this this form over here on the two sections also, it is going out of the bottom off this image. Okay, so here we have one example here is another one you can see if you look closely over here in this section, you can see this. These four icons of these four features off our services are actually overlapping This section at the top, which is this header also, I think let me show you one more. This is another example you can see over here. I'm overlapping image over here. Let me show you. So this this is overlapping in the next section or here. So this is just to create some good effect in a layout so you can use or design anything like this and show me how you are going to use this overlapping technique, you can use overlap image over text or you can use overlapping into another section. So I'm looking forward to seeing your assignments. So let's start making some overlapping technique and use their technique and show me your designs. 25. Using Emphasis in Layout Design: in this lesson, I'm going to really one off my secret techniques, which I have learned through. You can say that I actually keep on analyzing different designs, and then I learned something which is very unique in layer design. So if you are designing something and you want to have it create interest, then you are going to use scale and emphasis in your layout properly. So scale is actually one off the design. You can sit techniques where you try to emphasize one or highlight for an item more than others. So you can see if you have, like three or four features off your AB or something like that. You are going to highlight or make one off, one off them up bigger and larger in size. Similarly, if we have, like four blocks off tax, we might try toe change the background off one off the blocks. So this is going to create some interest, and it is going to have a very unique effect on your layout. So I'm going to show you some off the things that you are going toe really enjoy and love. So let's see some patterns and then we're going to go toe different examples. Now just assume we had four blocks off features. Oh, are some business process or anything like like that? No. For the first time, when you try to design something, you will get this boringly out off, having divide them into four similar blocks and it is going to look really boring. Anyone can do that, even a kid air any anyone. If you give them four things who tell them to arrange them, they're going toe. Arrange them like this. So instead of doing that, we are going to have something very different. We're going to highlight one off them and we're going to change their layout. So let's see how they will look now. Now, this is the same four block layout, but we have changed the layout. Now one element on the left over here is having a lot off emphasis. Whether it's a feature or anything, we're going to highlight it. It is the best feature among these four features, and we want toe change the layout. We don't want that old boring for block layout, so this is the answer to it. So we have highlighted and scale and make this one bigger and on the right. We have three features which are listed in top to bottom order like that. So other than having old boring want to 34 horizontal Brocks from left, right, we have changed the layout. This is a very, very important concept. If you can understand it and use it, it will create Lord off interest in your design. Similarly, you can see I have like three items. For example, I have three items in my design. For example, we have thes three boxes at the bottom. So the first layout that comes over mine is these three boxes dividing them into three boxes. So rather than dividing them into three boxes, what we are going to do is we are going to highlight one of them. For example, it's heading or anything like that, and I'm going to heading and some textile hair very big. I'm going to make it bigger and some of the details or maybe some articles related to this one I'm going to put over here. So this is another in just interestingly out off if you have three items. So I have highlighted and scaled one off them and I have Ah, the other two that are a bit you can say. Not that much highlighted. Don't have that much emphasis. So this is a great technique. No. I'm going to show you some examples which will clear up your mind how to actually use this technique. No, here is a design by some awesome designer. I don't know anyhow, So what I wanted to show you here is like you can see in this section. We're here. The second section off this website. We have actually three blocks off items. One is this one This block. Then we have this block over here. And then we have this block over here. So you can see here. What? Actually we are using. We are using scale. We are using emphasis. We are putting emphasis on one block off this whole section and we have very big heading. We have some sub tagline On the top. We have some colors over here. You can see this is totally different from the styles and text over here on the right. So we have colors over here, very dark colors and very attractive of big typography. And on the right, we don't have some same same thing going on. So here we have on this section, we have more emphasis. We have made it bigger in size. We have used bigger typography, deck sizes and we have used some doctors. So this is the technique I was talking about. So let me show you a few more examples. Here is another example of fusing emphasis and in your layout, and you can see or hear this designer. They have, like, four blocks, actually, five blocks off things over here. One is this town lord over here. So rather than, you know, having four blocks at the top in same line and having a download button at the bottom. This designer, what hated is he actually used this very different block over here and use this four blocks over here and one bigger one and your skill in his layout. So we have one. Do three and four blocks over here and one bigger block over here. So we have, like, five blocks. So try to think in this way rather than you know, using simple layout like 1234 blocks and then download button at the bottom. You can do something like this, so try to very your layout like this, and you will be pleased with your design. Other people, they are going to love it. So this is actually the point off interest. I wanted to show you that you have to create a point off interest in your design or section you are designing. I'm going to give you an exercise for the same section. You have to design something like this. So, um so just to sharpen your skills, So let's see a few more examples. Okay, so here we have another section that is using the same technique I actually described, which is having using scale in your design or layout. You can see you here. Here we have this section, which is Ah, a bit bigger. Then we have four qualities or four services or whatever you call them on the ride. So actually, we have five sections, five elements, and we have arranged them in tow like this rather than having heading over here than we have four blocks or down there. And we have a big burden over here, which is going to have very, um, simple layout, which you have seen a lot of times. Similarly, you can see in this section or here again, this designers is using the same thing over here. So we have one block. This is also a related toe overlapping and going out of the box. So you are actually this designers mixing two techniques going out of the box and at again time at the same time using skills. So we have a very big element over here than we have four blocks on the left like this. And then we have a one block over here like this. So this is a great layout. This is, I think, a great use off layout design in in this information displaying this information looks create, you can see he is also using icons with some text. Don't try to always think in just four boxes that we have. We have to align everything like this so we don't need to align everything like this. We have toe change our layouts again. This is another design from one off my dessert favor designers which I tend to follow on. Be Haas. I'm not sure what was the name off fighting. I forgot anyhow, so here again. You can see the same thing is going on. One block, big block. Then we have four smaller blocks. So this is the idea. I think you have already in destroyed, so I don't want to explain it again again. But there are many situations where you can use it. It is going toe have a lot of great impact on your design. So this one is another example. You can see this is, ah, carwash service. And it is designed by Quantico labs from Poland. I really love a lot of designers from Poland because I think they have a lot of creativity from this side of Europe. I have seen a lot of your designers there agreed from that side. Anyhow, um, so you can see we have one image and two features contacted us and best car wash. So actually, they have, like, four blocks. But you can see here it has been arranged in a totally different way. We have deciding at the top over here, and this is this is in the middle. Then we have image over here and some texture. All here. Then we have again two blocks over here. So three blocks, which are totally different. I really love this layout. So you I What I normally do is I actually use a tool called Jing and I captured these in and keep them in my layout design ideas. So whenever I have toe design something, I use that similarly, in this section one big image on the left, four features like this. So this is again use off scale. We have one very big image or here than we have four features over here. Eso This is actually again. If you look at it over here again, the scale is being used. This image is a bit bigger than all of them over here. And it is a great layout for all these images. And this is kind off medicine masonry greatly out. But it it is looking great over here. So that is all about this technique. And I hope you have enjoyed this scaling. And, ah, one big emphasis point off your design in each section or your whole design. That is all about it. If you have any questions to ask me, let's move on to the next list. 26. Using movement in Layout Design: in this lesson, I'm going to discuss another secret technique which I'm going to share with you, which is very simple. And you can create a lot of interest in your layout and in your design using movement. So how you have to do your movement. Don't think that your boxes or whatever your containers that are continuing different elements on your page they are static. You can move them up and down. You can move them from left to right. You can move them in a diagonal vapor, so there are a lot of options or tricks you can make. So movement is going to create a lot of interest in your design day, and it will move them from, um, you can say boring static boxes to something that create in just So I'm going to share with you for some off the layout options, and then I'm going to share with you just to ward three examples because I'm unable to find more examples. Maybe they are, you can say, but it in my, um in my inspiration folder. So I think this will clear up your mind about using movement for your layout and how you are going to do that to create in just in your design. So you started with these four boxes. Now there looks pretty boring to me, and I think this is not going to work for me. So instead, we're going to do this. Now you can see this is the same design. But I have added movement toe my boxes rather than they are static boxes. Now they are moving. So we have a movement like Jane movement going on up and down in different directions, and it is going to create some interest in your layer. So this is one idea. Another one could be this one, so you can move them in diagonal direction. Toe. Just don't think that you have to move them up and down are may be left to right. You can go into different shapes like diagonal and other ships, like a triangle. You can do that too. Here is another representation off the movement. You can see over here. I have very big box or big content section, maybe an image over here on the left. And I have two images that are overlapping each other and some tax over here on the right. So we have one heading and the three lines of four lines of text, so there are many variations you can do. So these are few tricks using your movement in your designed to create some interest. So I know I'm going to show you two or three examples. So we get better at this movement stuff in our design. Now, this is a design by Andrew Lo matter off from Latvia, and this is very simple, very unique design. And you can see what I want to show you. Here is the movement. So you can see over here in the images and the text. So movement is that it is actually reversing the effect in each section. So we have image will here than we have textural here. And then we have image. We're here. Text on the right image on the right, text on the left, image on the left, text on the right. So this is actually a chain movement, but done like you can see we're here. This is just like a rope fortune, like over here. And it is in the top to bottom direction. The one I showed you Waas in left right direction. So you can see this is going to create a lot of interest in your design. So if this designer just kept on all the images on the right and all the text on the left, it might look very boring. Very static. So we have to create some interest by using movement in our layout. Similarly, we have this design. It is by multiple honors Smoove all. I think it's ah design agency. But I really like their this design very minimalistic, where we create very script very clean and you can see or hear in this section, you can see although it looks like a flower lei out toe me. But still you will see how the icons and the different text have different movements. So here we have. Ah, this icon on the top and this text at the bottom and left. So we have going on things in this direction. Then over here, this runner, it is this Ah, direction is in this. So here we have text. Then we have this leading line and it is leading towards this icon. So we have left through this diagonal direction than we have this then we have something like this. Then we have something like this. Then we have something like this. So this is actually movement. They can have icons just at the top and in the middle and the center. They might have used the text, but instead of using this simple way off laying out icons and this text, this designer used some movement in the cloud. So they have some diagonal movements going on in almost all these icons and this text. So this is Ah, great use off movement in your layout. Similarly, if you look at this design, we have these icons over here, and these are all diagonal icons. These are just like beehives. But the thing I want to show you here is that we have movement over here. So we have this chain movement going on. So this is I got on the left and I got on the top in the middle. Then over here and over here, over here, over here. So it is not Ah, if the user can. This designer can do the layout in just ah, nine or 10 boxes. But what they did is they used movement. So you can see. It really works well with even the are numbers. So we have 123456789 nine boxes And they are looking great. This layout is great. So let's zoom in and see. Okay, so here we have these icons. So this is again a great use off movement in your layout. Now, in this example, which I don't know how who the designer is. Anyhow, this is a great design, and you can see in this middle section or here here we have mother daughter suggestion and you can see over here how this designer has used movement over here to create interest so they can have these boxes lined up. But what? This designer, she did watch it. It is. She actually moved one off them a little bit down to create some interests. Also, there is this temp over here, which is another technique which I showed you before moving out off the boxes. So this stamp is moving out off this section just to create some interest over here. So these are two techniques that you can combine to create create looking layout and I hope this will solve a lot of your problems. If you have any questions to ask me, let's move on to the next lesson. 27. Centered with Left align layout design technique: in this lesson, I'm going to discuss a very simple technique and very elegant technique which you can mix and use in your layer. Designed to create a lot off interesting layouts and designs. A lot of designers they don't know that they can use or move things almost in the middle, plus using left aligned along with it. So you have tow, align everything on the left. You're all designed elements and move the whole block almost in the middle. So this is a very simple technique to create interest. I'm going to show you toe off those layouts and then we're going to see some examples. Now you can see at the top I have white block, which is going to be a very big text. So any website you are designing, we have, like, two or three lines, very big, bold text that is going to show what we do. Our service and this white block you can see or hear that everything will be Your text will be aligned on the left so all text lines would be starting from here. And what we do is you can see it looks really weird, but it looks really great if you try to do this in your layout, I have left like two columns from here and three columns from here. So this is going to work a lot. So it is almost in the middle and it has left a line. So try to move things while keeping the left align element over here are in your design elements and it is going to look create. Let's see, one more arrangement. Now here is another one. So you can see over here. Here, we have heading. Then we have subheading line or hear some dext. Then we have four different features or something like that. Any kind of features or maybe some services. And you can see we have one icon, one heading one line one icon, one heading one line and you can see they are almost in the middle. And there their whole container is actually in the middle. So if we, uh, get this whole block, it is in the middle. But if we look at individually each block, they are aligned on the left. You can see this is what I mean that whenever you are trying something like this, you have tow. Align your inner elements on the left and the whole block whole block off these elements in the middle. So this is going to create a lot off entrusting your designs and we have button at the bottom. We have heading in text data in the middle and then these four features, they are all left align. But they are in the middle, the whole block, the whole container for these features or for these services, they are in the middle. So this is actually combining central line, plus left Align. Now we're going to see some off examples from my work and also from other artists or designers. And we will see how. Actually this works in real world life or website designs or mobile app designs. Now, this is an example off this landing page I designed and you can see over here. If you look at this section, this is listen to one rial, tax relief testimonials, and I'm going to turn on my grades and you can see this middle boxes over here they are not aligned to any greed. Instead, they are in the middle of this whole containers in the middle and the text and you can see or hear. Hear. We have listened to David on and this text this testimonial, it is a line on the left. So if we draw a block over here, you can see it is aligned like this. Me changed the color so you can get the idea. So everything inside this container is aligned to the left. But the whole container or block is in the middle. So this is what I actually meant. And let me show you one more. Okay, so here we have again the same arrangement. Everything is on the left. Align. I conjured like this. And this whole block is it is in the middle off this thes 12 columns. So this is another example than we have. Let me show you this one. So let's hide these and you can see or hear. This is tax services available and again the same concept. This is in the middle. This is in the middle. Then again, this is this whole block is in the middle and thes two blocks. They are left. Align whole text icons there, left line. I am not using a middle align with it. So we have center line plus left aligned elements. So this is going to work a large. Similarly, we have this one. So your next assignment will be you have to create something like this one, four or five features. And you have to use something like this, which is going to be middle alignment and central lineman plus left alignment. So you can see the top toe over here that this tax and this heading it is central line. And if we go on this next section where we have different different penalties and taxes done different offers and we have everything on the left left. So all these icons, all the steps that they are left line, but the whole block at the bottom. So if we select this block, it is in the middle. So this is another technique which I have seen a lot of times, but I think most of the designers they don't notice this one. So here we have this and I hope you will understand it better. Let's see some more examples. Here's another design by who is this? OK, so I cannot get name off this Christian Randall anyhow. So if you look on this section Over here. It is a design. And if you look over here, you can see this text and the stacks over here in the red. This is actually middle align and left line. So this, designers using middle line and left line, you can see here We have two columns that are left over here. Here again. We have two columns. You you can see. These are almost grid lines on that are following these for this design. And he has left two columns over here. Two columns over here. So it is almost in the middle, but he has used left aligned with it. So you can see this is how it looks. So we have one block over here, one block over here. Some darks over here. And this is looking really great. So this is again again. If we look at this section overhead, let's zoom in. This is the same technique. It doesn't always mean that you have to align your text or your block almost in the middle of your page. You can do that by moving it on the left to so again it is left line. A lot of space on the left and it is left line, and it is looking great. Let's see some more examples. Okay, so here we have one more example. And if you look at this section where we have thes tools you need Okay, so we have everything. A line on the left over here. So we have heading in the middle. Then we have some small tagline in the middle in the center. And these all these features 123456789 features. They are all a line on the left. And one more interesting thing which I have seen or here these different features are these different services. They are in three different sections. This is section one, toe three. And what this designer did is actually, uh, let's see who is multiple owners. Okay, so we have design agency or head anyhow, so you can see that this text this heading on the left is actually right aligned. So it is touching this line. This is stitching this line. So it is really, I think creative use off alignment in your layout. So these are a few examples which I really wanted to share with you. Let's see one more example which is using a mobile app. So whenever you are designing a mobile app, I think you might not have noticed a part. Most off them they use left line with middle align container. So we have you can see like this white card over here and all the textile here it is. And the button Oh, here it is in this direction. So we have left aligned everything and this whole container which is containing all these elements, it is in the middle. So we have We have the same margin, the right and on the left. So you can see similarly if you look at this screen, this is home screen. And this a simple online home loan. It is all left the line. Everything is left lining when you can see Yes, I see regulated. It is also left a line. But you can see in the middle we have a box or container which is in the middle. So these are the things you are going toe use in your you can say in your layouts to create , really create Lee or so I'm going to share with you one more, Which is this one I think I showed you in previous lessons. Border. And you can see I really love how they have used very poor, very organized, kind off simple design. It is nothing complex, just product teams. Part is a simple visual way to define sheer parks are resulting in a more aligned organisation. So you can see a very nice button, a simple link. But what they are using has actually left line with almost a middle line. So it is not a purely in the middle, but it is still trade on the left, but along with their using left alignment. So this is looking really, really nice than they have this image that is spending almost the whole space. And then they have again used this again technique Middle center aligned this whole container and everything is a line on the left. So taxes I line on the left. It is looking really great and simple. Let's see if we can find one more example. Okay, so here we have it again. Middle line and the text is left a line. Look closely. I think you should be able to do that now, till now, And, um, I think I think that's it. If if I tried to find some more example, let's see if I have Ah, some more examples from my my previous work. Okay, so here I have my own design website, which I am redesigning right now. I'm not sure which version it is. Final one or whatever. So let me see if I have used Yes. Okay. So you can see over here. This is actually let's hide this one. Let's hide these. So in this section, off user reviews or my student reviews, you can see what students are saying. So this is actually heading British, which is in the middle. And these all these all these testimonials. They are all a line on the left, images on the left. Dex is a line on the left, but you can see it is looked looking really good. I don't want to, you know, have just a middle align one element, and this is going to make this design very boring. So if I just had one like this in the middle, it might make it a bit pouring. So I have used left alignment with middle alignment. Um that. See if I have used it somewhere else. Okay, so here we have it again. Here. You can see this address and contact. This block is almost in the middle. I don't think it's almost in the middle, but a little bit on the right. But I'm using left alignment. So this is a great technique. You can use that in your designs and you can create Ah, really interesting kind off features or testimonial sections or services sections, things like that. Similarly, I have used over here almost. This is not a line in the middle, but I am using this whole block, which is almost in the middle of these six columns Over here. Let's try toe have something like this. So we have our grid on and you can see it is almost in the middle off this whole 80 hour here, okay? And it is using left line. So don't all the thing that you have to align it in the middle off the whole page or your whole design. But you can also use something like this. I have usual here. So this looks Let me hardness. So this looks really great If we have. If we try to use something and make something like this, let's see if I have used somewhere else. Okay, so here we have it again. That's hard. These so you might be hearing a lot off my keyboard noises anyhow, so you can see this heading is on the left. Then again, this section this your design courses section is actually in the middle, and it is not actually totally in the middle. It has some. You can see everything is aligned on the left. So we have middle alignment or center alignment with combined with left alignment. So this is again again. We have hair, two courses, and we have here two courses. So this is going to be the new design for my, um, website land. You exciting. I'm also going to give my logo redesign to some other designer, and I hope toe, uh, show you the soon I know I don't have timeto, you know, court this myself. So I'm going to hire I have already hired another quarter. So, um, I think that similarly you can see in this mobile mobile Let me show you this one. So we have this mobile interface And if I go down over here, you can see this sectional here it is in the middle, and it is a line on the left. So this is looking really good. So, uh, this is how you can use this middle alignment with left alignment and create awesome looking designs. I hope you have enjoyed this lesson. If you have any questions, you can always ask me. Let's move on to the next lesson. 28. Thanks everyone: thanks a lot for taking this class. If you have any questions regarding design or regarding this class, you can always ask me in the community section. Also, don't forget toe right. Some review some nice words. So for me, So I can, you know, get some inspiration to create more classes like these on. And also don't forget toe check out my other courses because they are. I have a lot of courses on UX design, user interface design and freelancing and visual design. So till then, see you soon in the next class.