Visual Design for Web UI Designers & Developers → Getting Better at Design

1. What this course will cover?: Hello, everyone. This is a visual design course for you. Why designers, Web designers, developers or all the beggars who just started their design Now why I created this course. I have seen a lot off my students or no Miss. Designers are bigger designers that make the same design mistakes again and again, and the feel that something is missing from their design or their designs look very done. So that is the major problem, which I have focused to eliminate in the schools. So inside the schools, I will show you a lot of my process. My techniques, my design decisions, why and how I create and formulate are designed from a grayscale of block level design model to our color or final design. And in the end, how I present this design using more cups so you will learn a lot of basic visual design techniques. You can apply in your your design in your Web designs, in your mobile app, designs or even in branding. So if you are a bigger you are a developer or you are just interested in improving your design skills. You can take this class and I hope to see you soon and love to see your project. There's a project inside this glass which you are going to submit, so let's get started and designed something awesome. 2. Focal Point Of Every Design: every design in the world. It has some focal point now. What does the focal point means is that whenever you look at any design, whether it's branding, design, ah, logo design are a visiting guard or a magazine on each page on each section, on each a separate piece off design, you will find one focal points. So whenever you first see any design the first time your eyes are going to hit some area or you are going to attract, we look at that area that is the focal point off that design. So whenever you are designing of upside ah, by corn or some magazine ad, you need to keep that in mind that where you want your users to look first. So that item is going to be the focal point off your design. Now, once you have calculated that this is going to be a focal point, everything else will be supporting that focal point. So you are going to design everything around that focal point. So the focal point, or the mean you can say the main area off your design is going to grab the attention off the user, so it's main purpose is to grab the attention off the user and then support its flow. So once you look at one thing than your eyes are going to flow towards the next thing and the next thing so this is how you control the flu off the eyes off your user. So this is very important tip in design. Now you are the designer and you need to guide your users eyes toe the focal point and then to the next point. So focal point, then toe the next focal point and toe the third focal point, and so on and so forth. So actually, what you are trying to do is you want your user toe, read our act in a specific way. You want the user to take these steps 123 and you need to define those in your design. You are going to use colors. You were going to use white space or negative space to guide the eyes off the users toe the focal point, and then towards the next focal point, and then towards the next book, focal point. So there will be differences in focal point. There will always be just one major focal point then the next one is a bit you can say not that important like the 1st 1 and then the 3rd 1 is also going to be not that important. So the most important point is just one focal point. So now I'm going to show you some examples to illustrate our this concept. Eso Let's see some examples. Now you can see this is a website and I found it on a bar. Starcom Liberal toned or calm UK And it is about the violence, headphones and violists products. And you can see their focus is more on the image on the right where the subject is holding on this ah device or varying this device so you can see all the colors are in orange stone and only you can see that the black is the headphones are in black. So this is how they are going there, showing the importance on the left side. You can see the heading is on the left. The confidence to stand out portable music. So whenever I first look at this page, the first thing I see is this image. Then I see this heading. And then I see this portable music. So all these are on the left and the right side products. And this these are supporting elements. They're not that big in size. They are north, that colorful, like these images. So this is how you actually design on the focus around something So you can see here. The focus is on this text. So there's a lot of white space around it, and vice space is going to create some focus. Over here. This is the purpose of fight space. Here, you can see they're highlighting their product just a product and the pale background and a lot off white space or negative space, as we call it. And you can see here we have on the button. This is going toe guide like this one. Do see. And for So this is how these are the focal point steps on. This is how our eyes are going toe move around. So let's see another example Here you can see the focus is on this product image again than this one. Organic, dark chocolate. So, in, like, four and five seconds, I'm going to know that these are organic chocolate and it is ah, 100% organic or something like that. So here again, you can see a great use off colors, just the heading product and shop. So not too much clutter, a lot of wife space. And this is great example. Another one is this stripe and this is new standard in online payments, online payment system. And here again, the mean focus is on this heading. So whenever I you come to this page first, I'm going to look at this one. Then I'm going to see the staff's lack in stock, art and other things. Then also this one is very important or him so you can see all the page over here on this color. The screen is totally different from all this. So the background is blue. Everything is white and blue. Just this create account is green. So this is called call to action button. And that is why it is basically the focal point over here. So one and 21 and so moving your eye from this heading toe this button. Okay, so this is Walmart. Another example Here, you can see the focus is in this year over here. And also this bigger images. I'm not sure why they have removed the bar color. So if we move down, you can see this bar is basically the most important focal point off this website. I really wish that even in this state, they should have a full bar over here to separate it from the rest off the sections. Eso it can be easily. Um you can say easily Click by eyes and picked by eyes And next let's see this one. Okay, so this is a product page from Elektronik Samsung and you can see or hear Hear. The basic main focal point is the Samsung screen because it is colored and have a lot off colors. Then on the right it is This is the biggest 112 and three. So these are the three most prominent things. This is most Roman and then this is the second most prominent. This is a tired, most prominent. This is how you're going to design and ah, you know im guide the eyes off your users. No, Let's see some off the, um, branding designs. Now you can see here we have This logo is most prominent overhead. And this one dune didn't guide and ah, going Stone guide. Something like that. I am not sure what are these? But you can see here on the logo is most important part over here and then this heading. So I'm not sure what this is, but it looks great. Let's see these examples. Here we have another design branding motion. Graphics arise, and you can see over here on this page, the most focal point is this image, and then the next, your eyes are going to move towards this heading. So this is how we're going to relate. Woman will rebuild the world. So I think that this is about women's and bothering woman. Something like that. Here again, we have something like this here again. The first thing is this The most important is this joined the humanitarian revolution, and the next is this image. So you can see. Um, this is more most prominent on this because the colors are too dark and this is a bit light , like a shared colors in the image. So this is how this thing is working. Next. See another one? Um, lock them tempest. Odd. And you can see this is some kind of magazine and again you can see here we have different arrangements for images and layout, but the first thing you are going to notice is this content continue. Does I think it's content? Maybe on and I think it's French, so I don't understand much, but this is how you use focal points in your design. Similarly, here you can see the most important is this image, because it has a lot off white space around it, and then again, the images are have a lot of colors. Then the next thing you notice on this design is this heading overhead. So this is very important. The 3rd 1 is the snow goatee and see, these are the three most prominent things over here. Again, you can see or hear image very prominent and the text similarly over here, these are prominent inside. The first thing you are going to notice Artie's headings, so that is how you use the focal point and use that toe. Emphasize and guide your users eyes and give some things important and bigger than the other things. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson 3. Using Line, Curves and Shapes in Design: what they were designed to see in this world. They are all made off lines, a few curves and shapes, basic ships. So whenever you start drawing something or you start designing something, you're going to use the basic shapes, the curves and line. So line is basically straight line from one point to another point. Curves are a bit curved or angled, or something like that, and shapes are basically rectangle, triangle stars and ah your, ah, circle or lips. So these are all the things there are. You are going to use them in your designs to enhance your design so you have. You can use them in various ways. I'm going to show you a lot of examples. Let's see some more about this lines, curves and shapes. Now there is something more about these lines and shapes. So if you're designing for Children company your Children clothing or twice brand, then the lines you are going to use in your designs. They are not going to be very straight and having a lot of corners, so the shapes and lines are going to be changed according to your logo branding and the team off your design So, for example, if you your design is based on these three key words like strength, freedom and Morgan, what do you think you are going to use? Are you going to use overs are ellipses or you are going to use very straight board lines or something like that? So this is how you are going toe shape your designs, so using different shapes based on your team and also they can be used in a lot off different ways. I'm going to show you different examples, so open up your mind about using these lines and shapes in your designs. So let's see some of the examples. This is a striped website. We have seen it in previous examples and you can see over him that here we have one shape. This is Bill type shape around this also the biddle type for use over here. Then we have rounded rectangles over here and you can see this is only rectangles can be seen in a lot of shapes over here, or you can see on the right this lack there. But it is also rounded corners. This one do and all these images they are using rounded corners. So this is basically the whole team. They're using a lot of wrongness in this design. Now, if you see over here, you can see this is also another shape. This is a line which is slanted the around this header This blue area, it is not very squarish. So they are using it to create some interest over here. So this is another use off the lines. Slanted line. And if we go over here, you can see here again. You will see a line a separate her line again and over lower here to show you some of the things like icons over here. Ellipse again again we have the slanted line, This section You can see how they are using different shapes. So this is basically a slanted line which is making different sections. Were here again at the bottom over here. A separate line for separate these from this bottom one again a 10 line in between a 10 line across and you can see if I move over here. This button again has same corner, same shapes. They're illustrations also have rounded corners. You can see they are not squarish. So this is how the whole team is built. So they have taken this in and applied it to to there, all designed to all the elements. Okay, so here Walmart you can see or hear. The lines are not very curvy. This is straight. Then again, this is straight line. This is straight section straight line to emphasize this section. We're here. You can see here we have again. Um, let me show you. This is a rounded button, straight line separator over here. This 10 line you can see over here again. These are a bit a little bit bored lines and ah, again, a 10 line. When we click on it, it becomes up in Boulder. Also. You can see this matches with the top headed over here. You can see this such bar, and this style is almost the same. And this is how you shape your design. Using different shapes, lines. There are many uses off lines. Okay, so this, uh, this project is your totally different is charity for kids, I think. And here you can see, the lines are just in totally differently. The four styles, the lines behind them, dotted lines, they are They look like now, over here. You can see if you I look closely this Ah, underline off any link you can see. It is a very marker, Andrea. Marker driven lines. That's it. Looks like that some kid has put a line under it. Similarly, Over here they are using curve curry lines. Lines toe create interest. So this is again you can see brushed line on this whole area of discovery line. So to create some interest so again you can see 100 corners, curvy lines, one shape, hard shape. It is used again, twice or thrice, in this design. And this is how this whole design is fucking So also, you can see the shape of this. You can see the same shape off this sofa. It is almost similar to this burdens. So this is how they have used different elements in the design again, is another website Um very 10 lines have been usual here in different sections. Let me show you over here. 10 lines, 10 lines, 10 lines to conceal what here in the header rounded rectangular pill shaped such bar bell shaped button. And you can see how this sounded. Roundness is coming from this logo. You can see their package. It has all different. A rounded rectangles made together again. These icons are also it restricted in the same way I have a lot. They have a lot off rounded corners, very 10 lines. So 10 lines is basically their team. They're using very sleek 10 lines, even in the buttons you can see over here. Brazil leaks. I'm not sure what language is this. I think it's polish and ah, a lot off lines. A lot off lines, a lot off lines here again in the head in the photo, you can see if you look closely over here. There's a very thin line separating separation between these two lines and this a rectangle shape the spill shape. This is for support. So this is how this whole design is. Let's see another one. It is very latest design every love this on and here they have used some shapes, which I really love, so you can see how they have created some interest. So these are wavy lines. BlueWave here we have whitewave here we have a star shape rounded starship and it looks really awesome. Let's see some more examples so there's okay. So you can see here they have declines. So the whole team have a lot of tech lines. You can see here. Over here, this land more button has decline than again Over here. This is great decline with the decline with the decline and this is started line. So this is how this these lines are creating in just in this on design. Similarly, you can see or hear. This is a mobile app design and these very small, simple lines they are creating a lot off white space and create in just in this designs one line to line three lines for five and one curved line over here. This is the curve shape. It is used to create some interest because the whole design is very squish. So create someone just They have used this country line and it looks really great. It is from a levy or leave you dearest doing so. I'm using their pages to show these designs. So I got me toe credit anyone So you can see over here similarly, over here this is from multiple owners. I used to go and few agencies Similarly, this one these this is from this guy. Carol, She horn. Okay, so this is from Mika Park, and here's you can see this design is totally different. The shapes off the brush strokes have been used over here, brushstrokes platter and ah, this is how this whole team has been created. So you can see I really love how this brush brushing is creating in just in this whole top head of area. So I think these are, ah, lot off examples you have seen now. And if you have any questions about this using lines and shapes and how it is going to fit in your team off your design, you can ask me any question about it. Let's move on to the next listen. 4. Colors and theme of Design: the biggest problem I have seen in a lot off novice designers. A bigger big never designers is how to use color Saudia. They don't know how to use colors in their designs, so they just speak up to random colors or three random colors and try to mix them and use them for different elements on their designs. So this is the biggest tape I'm going to give them. For starters are notices or bigness store. Try to use more than two colors in your design, so I'm going to show you a lot of techniques. How to build your color scheme and a little big. A problem is that most off US designers, mostly the big metal notice designers, they don't know that colors are not independent. For example, if you're using just blue color or a purple color, it doesn't mean that they are independent. They have toe look great together, so you need to combine them. And this is not true for every color. Every color is no cannot be combined with any other color. So there are some rules. There are some colors that are going to go well together. Some killers are not going toe get well too well together. For example, if you go to the beach, you see a specific team in greens, salons and blues, and the sand is a bit yellow or grey age, something like that. So this is a whole team. This is natural color, scheming what which God has created anyhow. So the rule is which I have seen and used is that 60% use three colors. If you have one killer is going to be used for the background. 60% than 30% is the second regular, which is going to be used in different areas off your website, and 10% is the S and color are another color, which is going to be used sparingly or very less in your design. So this is the rule from basically the people who are interior designers. They use this rule for color scheming, so if you are pending your balls, they're going to be 60% the same color. This is going to be a lot in your room than 30%. Might be the so far in your room and the bed in your room and 10% is the yellow. For example, If you have yellow pillows on your beds, they are going to be act as extent color or 10% color. So this is how they're going to build their color scheme. So if you look at my this slide, you can see how many colors I have used. I have just used basically do killers. This is a purple black black color, Proper glacier, paperback ular. And at the top, you can see this is the blucher, white and black. They are not basically colors they are not. You can see they're not in the huge. They're just no color and ah Ali color. So this is how this color scheme is built. Also, you can see at the bottom where you have seen making your designs agreed Awesome. By Mohammed s and Parise. That is my name. And it is also Ah, it off. You can say bluish gray Calero here. So this is a This is generated from the same this blue color. So this is how this color scheme has been generated. One more thing is that there is purpose off each color in your color schemes. So if you are using very shark colors that they can be used as your buttons. They can be used as the capable items or getting attention off your user. Then you can use another color. For example, are dull blue color like you can see. What here? 30%. You can use that in some specific areas off your designed like top bar and top navigation bar. Maybe. And then we have British fight color something like that that I'm going to use for the background. So this is how you can build your color scheme? I have shown this example over here. You can see. Okay, now the last tip and that is most imported Tip. The most important tip is that start designing without colors. You're going to add the colors at the end. This is how I designed this is how a lot of designers design and this is the correct way. So what you are going to do is you are going to use creates in your design, and in the end, just one ex angular like you can see what here this yellow cholera have used. So this yellow will be used for are the buttons are all the active areas off your design or interactive areas off your design and others are going to use to define different sections and different colors in your design and all the other these greys they're going toe show a different areas of sections off your design. For example, this gray I'm going to use for logo this gray I'm going to use for text or disgrace, going to be heading this craze, going Toby body text, and this is going to act as my background color. So try to start your design with gray, just design in different shades of grays and then afterwards in the next iteration. Adv on color to it. So this is how you are going to add one color than the 2nd 1 and they are going to look like a great design. So I'm going to show you a lot of examples in the next lesson. So let's move on and see some off the examples toe. Get the idea off this color, scheming 5. Colors and Themes Examples: let's see some examples for the fuses off color and how it can be used. You can just use few colors like two killers, and create your or design. So this is a landing page I recently created for a client. And you can see over here that I have used just few lines and a few shadows and blue, and this is almost black alert. So these are the just two colors which are the major killers used everywhere in this design . So this gray over here, you can see it is also a great blue variation off the same nucular. All here and then if I move it up, you can see this is the second section again. These are a bit pale blue. That was a bit you can see attention grabber eight year section off this design. Then have we have this one. This is again blue and black again, blue and black. These are just few more colors, which I just created from this again. This blue and I have shown some of the tricks in my other courses about how to create different colors from the same colors that goingto go well together and Ah, and this is the only section where I have used these colors. And then if we go over here again, black button, this is different customers. And at the end, you can see over here on the lefties are again the blue colors, this backgrounds. They are also pale, grayish blue. So this whole team is using just blue and black two colors, a few lines, few shadows, and they're dissolved. So this is how you can create a need and clean design without using too many colors. Here's another example which I created on 99 design contest and I was in the finalist. But anyhow, unfortunately, I didn't want this contest. Okay, so here you can see again. I'm using this gray and blue so this you can see this whole team eyes using this cree and blue colors, nothing else. So you can see how I have created Ah, very sleek design by using just single are you can say two killers. So everything at the background is blue or black and just single x ankle. So this is the most important color over here. You can see I picked this color from here. You can see if you look at the logo. These This is how you're going to get the ideas again. You can see the local for it and you can see this evolved phone. They are matching clothes of their very close. So this is how we get ideas and create awesome looking designs again, you can see over here this ah dream traditional tobacco flavor. It has some texture on it. So I've used some texture, babe in the background, same colors you can see over here. I picked for the back off labour and this screen I picked for mental flavor just toe separate that otherwise everything else is blue and this blue is coming from their brand. You can see dream 1.8 and that is how I created this whole design and client review. Like this design, they almost called me to twice. Even after this competition Waas ended, he said that I really loved this design and I'm unfortunately on the actual client who was going to select on the CEO off the this company. He didn't select this in the end, but the agency I designed for they really love this idea. Anyhow, let's see another example. Okay, so this is another example which is, uh, another one competition from my 99 designs designs dot com. And these are very old. And unfortunately, I again didn't win in this one. I was in the finals, but I didn't mean any how you can see here. I'm using just purple color and great and blacks for glamour because it is, ah, Bush blowing bar. And you can see here I have just used that color patrons. I have you some patrons, some backgrounds, some shadows lines to emphasize different sections and areas. And here you can see again, the highlight color is purple, reversing the colors. This another technique I have shown you in my other designs that here we reverse the colors and here we have the actual killers. It was the color scheme. So this is how I created this whole team. Let's see some more examples from other designers because I think I am just a normal designer. My work is not that good, So let's see some experienced and more experience designers than me. So here we have jampp dot com. This is another website. I really love these killers because These are my favorite colors. Purple. Sorry, Purple. No purple. I like this Dark blue are blues and oranges. So these are two of my favorite colors and you can see how they have used it. Top line purple than this purple shapes over here, the blue shapes and ah, this is how the whore design is used. These two killers in their all their illustrations and some shades off that for this is a lighter. Blue is the same lighter blue from this darker broker. I really love this website. This is top notch and we love this design. Very simple, very sleek. Just two colors and different shades off that this publish blue. So this is darker one. This is light fun on this is again this great, great popular grayish blue color or here so you can see using just do colors. You can create awesome designs you don't need like three or four or five colors. This is so let's see one more example. I really love this one. It is from Denny Petty and the title is dogs should be pretty. And I really love this. How he has used different graze over here. The start blue this prominent blue on the stock on black A little here and I really love how these the things have been highlighted over here with some pale blue color underneath them. Ah, and ah, this is a great use off a simple color scheme to enhance your whole design so you can see just this is their primary or accent color. This is blue color which is used for the highlighted or selective or interactive sections off this design. This pale blue is used for highlighting few areas which are, you can say emphasized areas, and these are again links. Over here. These are again in blue. So I really love this design. Let me show you another one Hair again. They are using just two colors the screen and the sea on the sand, blue color dull blue and the black toe end house these colors and you can see these. Are there different illustrations again in the illustration. You are just seeing two colors over here, toe do colors to colors to colors, and that is all so you can see how they are using different colors to highlight, like jobs. We are hiding, so if we click over here. Let's see how their job spade is listed over here. So open jobs again. You can see here they have this Bill C on blue color and ah, I really loved this time. This is very bold, very unique on this plaque color and on the top off the black with the screen is looking really great. So these are a few examples I wanted to show you guys. I hope you have loved this lesson and accord the ideas of how you can use different colors . One more tip is that if you have a lighter background, try to use darker colors on top off that toe, get some contrast like you can see what here. And if you have some darker backgrounds, you can see here we have darker backgrounds. They are using lighter colors on it. So this is a very basically, but I have seen a lot of designers doing it wrong. So let's move on to the next lesson. These lessons are getting very longer, but I hope you are going to get ah, lot off improvements in your designs by looking at these examples and how I am explaining to you. If you have any questions to ask me, let's move on to the next lesson 6. Using Typefaces tips and tricks: Now let's talk about the Thai faces and the force you use in your design. They have, ah, very important rule. They play a very important role in your designs. Now a lot off designers, I think they don't understand that Eat Die Phase has hits own Weiss, or you can say it's own tone or own team or personality. So if you are trying to use some typeface, try to match it with the team and personality off your design. So if you are designing for kids the force, you are going to use their going to match that team. So let's see what more is there in the typefaces now? The first tip I give to the novices or all the designers is start with one or maximum two typefaces drawer. Try to use three or four typefaces and try to mix them So one typeface try to select the one typeface, which have a lot off different styles like Open Sands or Roberto Roberto have, like maybe 30 40. It is a very big family, and you can combine different styles and create a nice design. Similarly, try to use two different typefaces toe get contrast now you can see in my design. Here you can see I have used Rakitic forward face, which is for the heading and another one which is very sleek, very slim and very tall. So you can see it is they. They are getting some contrast between them. Similarly, whenever you try to use some typefaces, they must have some contrast. So there is a whole course from me on this typeface or typography. Now, the second dip I give to my designers is that try to use just one fort face family or try to use just two typefaces. So don't try to mix like three or four because they are difficult to handle and control. So want I face? For example, if you are using Roberto or any other similar typeface, you can see it has a lot of different styles. So if you look at Roberto, there is Roberto, Roberto, Condensed and Roberto. I think some court style tiefest there are like 30 or 40 different force and styles in Andhra border Tiefest Second dip is that tried to use two different I faces to get some contrast. So contrast can be used in a lot of different ways like take and 10 and a lot. I'm going toe. There's another lecture in the next lesson about the next section about the contrast. So we're going to talk about their about the contrast so you can make San serif and serif forms. The force, which have some dash lines on the corners, are at the bottom off them. So this is how you are going to start using some typefaces. Von midget thing is that each four style has its own purpose. So if you was using want I face for headings, you are going to use that same size and that same fort for all the headings in your designs . If you're using one ford for body dext or the text running text in your design on the small text, you're going to use the same tie face for all the body text all over in your design. So this is a very major tape. Try to fix your force and try to give them purpose that this is for heading. This is for body text. This is for this is for buttons. Okay, So the magic where the magic is going to happen in your typefaces it is. The magic is hidden in the scale. Scale is basically size or the contrast. How much the contrast is there. So scale is that, for example, I have very small fort for my dext and then I have very large fort for big phone for my heading. So they are going to have a lot off contrast and it is going toe create a lot off interests like you can see or hear in my D slides. What I'm trying to do is I'm using a very 10 Ford with a very take form, which is bolder black phone. So you can see these are different styles I have shown. I think this is a Bordeaux Ford 10 normal, medium, bold and black. So try to use as much contrast as you can for example, thin and black. They're going to have a lot of contrast. Similarly, you can use the contrast by making it a very big heading For, like, this one, you can see in all my these slides I'm using very take very big, very bright color for this heading and very thin and small phone for my texts or here. So this is how you are going to use the magic is actually hidden in the scale scale mean how you are making the one text very bigger and one very smaller fund very boulder and taken one very tin. So this is how you are going to do that These days. We are designing a lot for mobile APS, mobile screens and smaller screens. And there are a lot off for different number off screens, different sizes off screens, writing on on retainer, small sizes and then medium size devices, then large size device like desktop very big DVS and something like that. So keep that in mind that each tiefest is not going to work on smaller screens on smaller screens. There are different typefaces that are designed to work for smaller screens on and hand held devices, and you can see that they are going to work better on those screens. So before you purchase any phone or use any force, there is always information on that website. Or try to test that for on your mobile screen and try to see that 14 pixels or 16 pixels are 18 pixel four size is does it look readable? Does it look legible. And can you recognize different letters? So this is how you are going to select your deficit. So there are many factors in selecting typhus is, but this is one of them Now why do you think that Roboto is used by Android and San Francisco is used by Apple devices? This is the same reason they have developed their own defenses that look great on their devices and that are readable, illegible. And that is why that if our system for for Android is Roberto and Apple devices your San Francisco now in the next lesson, we are going to see some of the examples that how the selection off typhus is is going to enhance and ex create awesome looking designs. So let's see some of the examples. 7. Examples Of using Typefaces in Web UI Design: Now let's see some examples. And this is the first example from G she and this is on Bihar. Start now and you can see how this I think this is Ah, design design agency. And there are projects profile and general. And you can see how they are using this very unique typeface. And you can see it is it looked like that it is used. It is written by ah uh Carter neighbor Pen and carry graphic Ben. Something like that. And you can see how they have used just two colors and this die fares to emphasize and their style. Here you can also see the same typeface, same time face same typeface on Levante I face used in this whole design and you can see it is looking great. So this is how you the dye faces selection or die for selection can enhance your design. So let's see another one here. You can see this is some recipe upside, I think, and you can see here there are due to force. I think this is the same one. This is a very bold version and this is normal. I think I think they look the same. Let's see the old. Okay, so here we have these two force on they are looking create Very take heading with some great style and you can see over here visual core, new nourish You can see this phone is very rounded and it is sensitive And this is a sad day for so they look together create here again you can see San Serif and Serif sense that if it's basically have some endings like these and very thick balls you can see your here on the tail off Why? There is a small ball and they are looking create So this is under design and here's you can see again They are using very con trustee or very taken think and transformed as you can see in the top for the bigger one The heading four There is a lot of contrast between different lines. It is also a cell phone and you can see in the subheading over here where it is written Oscar Wilde. It is a sad reformed and it is a humanist, I think Humanise Ford. Here's another example Here. You can see very take over here so you can see the difference in scale. This is very big. This is very small and this is very take. This is very 10. So this is how it is going to create interest in your design so you can see just to die faces one very big one, very small. And they are looking great together. Similarly, this is another project Berlin and I really love this Fourth, this is again, I think. Ah, transitional Ford. I guess I don't remember everything, but I think it is more depends on, um, creating your sense off matching force. So you don't need to learn and remember every four style. But you can see over here the to force one is San Serif and one itself. So the top on it said if the bottom one is sensitive and it is more off geometric fort, you will learn about it. It is based on simple ships and this is basically they are looking create together. So if you look at their this is their app. So you can see how these two phones are going create together. This is used for heading. So the purpose off this phone the stop one is heading the bottom one is the text. So this is how the whole AB is using these forced. And I hope you have enjoyed this lesson. So, uh, let's move on to the next. 8. Using White Space properly in UI Design: If you want to be a great designer, there is one more thing you need to put in your design. That is a lot off white space. So using the white space or negative space where there is nothing written, it is going to improve your designs a lot. So spacing between elements and spacing between elements vertically and horizontally, both are going to work for your white space. So if you want to be a good designer, you're every day, word or everyday line should be. I use white space everywhere. Okay, so that is one thing you need to keep in mind. I have seen a lot off bigger designers that are afraid off using white space as much. They tried toe clutter, their design elements on the page a large, so they try to squeeze them together. So you make sure that you are going to use a good amount off white space. Now, why do we need white space? White space actually create stewed things? Number one is emphasis. Now you can see on this whole slide. I have a lot of fights space and very less content, so you can see the whole focus and The whole emphasis is on in the middle in the this text area where I have written. So this is how the void, spaces going toe emphasize whatever is captured or inside that fight space. So if something some image or something have a lot of white space around, it are negative space as it is called. Then it is going to be very prominent in your design. Second thing is that it is going toe produce effect off sleekness and clean design, and it will remove later. So I have seen a lot of designers, mostly bigness, that they tried toe just put text and different elements randomly on their art board and the don't know how to, you know, balanced our spacing between different elements. So, in my course typography for designers and developers, I have talked about this vertical rhythm where you are going to design your whole design based on different whitespace, different vital steps, so it is going to be very calculated, and it is based on science and maths other than art. So that is why I said that design is mostly science and mathematics rather than art, because we use a lot of calculations in it. Now, let me show you a few examples and you can see over here. Here is one of my designs and you can see why I have left a lot off space around this area so you can see this image. Sorry, This video, it is going to have a lot of emphasis because there's a lot of white space on the right side on the left side. And also over here, you can see the heading is Ah, lot have a lot of ice space above it. So reading on the top, left and right, it is going to get emphasis. And ah, this is how it is going to happen. So, um, here in this section, you can see we have a lot of white space on the left, on the right, at the bottom and at the top. So make sure that you're spacing is consistent. So if you have, like, 100 pixels or 100 points distance between these two sections, keep that everywhere the same. Okay, so 100. If you have 100 at the bottom, keep make sure it is always 100 or something like that. So eso make sure that you're spacings in different elements between different elements. It is going to be consistent. Okay, so here is another example. In this design, you can see I'm just using whitespace. Few lines toe separate, different sections. So you can see over here in this section why it is very prominent because it has a lot off background white space. Ah, vice space doesn't literally mean that it must be white. It can be any color, but you can see this area is dominant. So whenever you see on this whole section, I have deemed out the top you can see over here. Vmc. It is not that prominent this one also Ah, lot of white space at the top. You can see on the left and on the right. So this is a prominent so first you will look at it. Then you will look at this form because off this button highlighted button. So this is also another technique. You can use white space to emphasize or guide the eyes off your users. And here's another section you can see these sections are separated, but they are just separated with different spacing so you can see the space between these two sections is too much. So it means that now the new section off this website has been started again. The new section and a lot of space and it is consistent with the this space. So this space is equal toe Saudi Ah, this place and this is the end. So you can see again over here a lot of white space above this foot area. And if you try to squeeze these text toe the border off this one, it is not going to look very nice and it will look cluttered. So keep that in mind. This is how I use spacing between elements. Also, you can see the horizontal spacing and destruction is also good. Um, here you can see disconcert stint, horizontal spacing between these four items. So this is how you use spacing white space toe. Get in house your designs. Let's see a few more examples and this is a perfect example. Off wife space usage. You can see it is a Republic media. It is London based digital agency and you can see how their whole page has been designed logo over here. Some links over here, and the whole emphasis is on this section. So a lot of white space around this section is actually giving it emphasis. And this design looks great. So let's see how they have laid out their other pages. You can see here we have again a lot of white space around the subject. Great design. Again. A lot of white space and whole emphasis on this area is this section. I really love this website. Um, okay, so let's see another example. Here we have another example. It is significant. And it is by all these designers a team book I really love when a lot of designers back together because it is the most creative design. Okay, so here you can see let me show you. Um Okay, so here you can see if I go down there. OK, so this is their product page. Select quantity, and you can see how much white space they have used. So it is going to create a modern look, a sleek look and a cane look. So you can see you're here a lot of white space, just a product than the quantity in stock. And ah, just this stepper and guard. Similarly, if you look at this area. Interactive starts. You can see there are a lot off gaps between different elements. A lot of white space usage you can see over here in this area, Della Lamb. You can see how much space they have between this review and the name off the reviewer and this this start rating. So this is how you used white space between different elements. And here again, you can see how much space they have on the top. So, um, thesis, how you get the idea from different designs that how how they are using white space so again or hear few dem lines and a lot of white space to create this whole table for law orders. And that is how this designers using workspace similarly, is this in this asana website? I see a lot of white space you can see at the top over here and then again, this section over here before starting this, um, GF image gift for GF or whatever. Okay, so again, you can see over here in this section, you see a lot of white space where the next section is coming up again. A lot of white space again A lot of experience and it is consistent. You can see it is almost the same at the top and the bottom. A lot of white space. I really love this website. Asana is a great tool and this website have a great design. So another one. This is spicy, no spicy dot com, and you can see how this whole website has been laid out a lot off white space. Okay, so if we try toe click on it. Lexie. A lot of white space. The whole emphasis is on this area that's close this. See another example. Here's another example. It is four home and family known for their experience or whatever. If you click on it, you will again see a lot of work space. It is still loading. I think looks turn it off. I hope you have industrial how the white space is going to create a lot of emphasis. If you have a lot of text or lord off elements on your page, it is going to get cluttered. So ask your clients that tryto minimize Ah, all the content so we can make it look great. So that is all you can see if you look at over here how much content we have, just small heading three lines off text, which is, I think, nor no more than a long one line. Similarly, over here, just one quotation from a client and, like 434 major customers and then see more customers. If you want to see them again, you can see they are showing their few Ah, new and noteworthy, including timeline, and you can see here again the content is very less because human mind, it can consume less content easily rather than a lot of content. So this is also lady to human psychology. I think this lecture is getting very longer, so if you have any questions to ask me, let's move on to the next listen. 9. Block Level Design Technique: whenever someone builds their house or any building, what do they do First, do the start building it right away, or they start with the blueprint or the map off that design. So the first step and this is a very important tip in your design carrier that whenever you start any design Dr starting with its blueprint, it's wire frame. It's block level design. I called it a block level design because I'm going to show you on example how it looks like . And this is the biggest tip that can improve your design. Don't start your design by putting all the texture and all the images on your canvas. But start with the block level design and if you can start with it with great grayscale using just grays and blacks, that would be great. So let me show you an example at the end of this lesson, what that actually means and how we're going to build it now. The technique behind creating this block level design is that we are going to just create different simple ships and ah, we're going to place them on the areas where we're going to put some content. For example, if I have ah, social like app or something like that or registration app, I know that there will be, like four or five fears and one evitar image off that person, or maybe a button over there. So I'm going toe, create different shapes for those elements and just going to put those shapes over there in different emphasis level. So I'm going to show you one example over here. And let's see how I have created this block level designed by showing another getting in a little design. Now, here you can see I have created a block level design using this layout. So actually, I corporate this one. I am not sure who's design Is this because I think I just collected this? Maybe someone from dribble any whole. Whoever the designer is, it is a good design. And before you start something like that, you can see over here I put some elements over here in just block ships. So using shape rectangle, Asari, ellipse shape or circle shape for the seven. Our image this bigger, bolder line for heading than these two lines for text these two lines for more text and so this is going to be dead. This is going to be time. And this is these are two links. So you can see how I have created this. You can also create in 18 just using Chris Kate. And so, if you can I just use a darker shade of black or hear something like that and used white background. You can do that too. So I just used few colors. Just toe make it and you can say interesting. But I advised that first you try to use just grayscale. So I'm going to show you one website resource where you can find a lot of block level designs and start from the So let me show you that website. So this is a website called you a patron hub dot com. And if you browse over here, you can see if I go to this page like this one. You are all seeing these block level designs over here. So if you click on any design you can see here is the block level image O R version off it . And here you can see the real version or designed version off that so block and design block and design So this is This is where you are going to start your design so you can see over here it is it. Also make sure that these are these many elements of these many content sections there are on in your design. So it is going toe help. You better organize them, better create a new or goodly out, and you might know where the button is. For example, like this one, there's a button. So let's see a few more examples like this one. Okay, so you can see over here. This is very simple block level design, and this is the final design. So if you try to use this block level design, it is going to help you a lot in laying out and creating simple and great looking designs. So that is all for this lesson. Try to start with the block level design and try to use just create scales like you can see over here. They are using just graze different shades of grays. On the most important items are things like that. They are, ah, a little bit more gray or something like that. Right now. I think he's using this Stark a great for text, although it is lighter or here. Anyhow, this is his interpretation or hard and preparation. I don't know. You can see another patron over here. Ideals, app. And this is how all these patrons are used. So the biggest take away from this lesson is start with the block level designed is going to improve your designs a lot. If you have any questions, do ask me. Let's move on to the next listen. 10. Methods of Generating Design Ideas: whenever you start any design on the first thing you are going to in Gorder is that black space in your head. You are not able to generate any ideas. So how toe get different ideas? I'm going to show you different ways. I have been thinking about it a lot, and I also read a book on it. A bribe by Alan Lipman. Okay, anyhow, so the first thing you need to do is get a paper and pencil. So whether it's mobile app, design, local design or any layout you are sketching or anything, don't try. Toe, Um, get afraid off. That you cannot draw are you cannot use pencils and paper. Just get out there, get a pencil and a paper, and start drawing your layouts, your ideas and this is the first step. OK, so I'm going to show you a few techniques on Harto generate different ideas from one idea. Okay, so let's get to that. After you are finished with pen and pencil, you are going to create a mood board or collect inspirations. So before starting any design you need toe get some ideas from other designs. So this is another step so for the mood boards. You can use a website called Nice Start com. I'm going to show you just a glimpse off it. Okay, so here you can see this is a mood board I have previously shown you in the previous lessons. This is how I want this project to go in destruction. I want some Ford style like this one. I want some featured items like this one. I can't. This is the, um, footer area. This these are the colors I want. This is how I want a button to look like. And I really love this purple and blues share. So this is the direction I want to go in. So before you start any project tried to create a mood board, sketches, sketches you can also create includes sketches in this one. Anyhow, there are other things, like brand values. What? What direction You are going to go Whether your brand values will be attentive, reliable, creative or whatever. It will be fun, serious, just able or trust for the something like that. So your design is going to reflect that also, here we have another dragline from the business. We are helping small businesses to crow with us. So this is another thing anyhow, So this is how you are going to create a more board toe, get the team off your design? The biggest mistake I have seen a lot of designers they make is that they don't try toe hire someone or they don't try to consult with someone. So whenever you start a design, when you are going to get ideas border of one mind. So try to borrow in mind. You can ask your wife. You can ask your friend toe, get on, get, sit with you and brains Storm on some ideas, you can get their ideas, their opinions. So one mind two minds are better than one mind. So whenever you include anyone, your father, mother, your why for anyone, even they are not related to design you can add them because you are designing for the ultimate users the people around you. So try to consult with your kids. Are your daughters or your friends that What do you think about it? What is your idea? Try to draw it so it will always help you to get more ideas. And in their technique is mind mapping list off ideas. So, for example, if I am creating our kids clothing, you can say logo or branding. So what I will try to do is and what directions I can go with. So on the left, you can see I have the feel off the kid's clothes so kids are very delicate and they're like flowers. So I will try to use the feeling off comfort, care and special. So these arty key words that can be used to get more ideas. On the other hand, if I go to the drawing, for example, if I see that kids normally Dravid very irregular lines, their shapes are very on the mostly drawn people about their family about the different cute animals. Also, we can draw different flowers. Eso all these concepts can be used in getting the branding ideas for this kid's clothing, so you can also go in a lot of directions. You can create more Nords like here we have draw and feel. If you have something else, like or maybe princess. For example, if you are designing for girls, brain or little kids, you can go to Princess and Prince something like that. Maybe this is another direction. So this is how you men my mind map list off ideas and generate different sketches and designs on that ideas. So once you draw these, you are going toe. Just work on one or few off them to get the direction. So to set the direction you might select only one off them are to off them. So start your ideas, OK? Now there is an under idea which I thought about it a lot, and that is how toe generate multiple areas from a single area. So, for example, I created this logo this drop like for example, save water fasting I can do is what I can do with it. I can either rotate it. I can squeeze this symbol. I can combine and different symbols with it. For example, I can combine a hand with the symbol so it say it's sure save water, or I can show the flu off order, um, in it. Okay, so there are and multiple ideas. But what you are going to do is you are going to take one simple shape or single idea and try to apply all these different effects on it different. You tryto rotate it. You try to duplicate it. You try to multiply it. Your try toe skew it. You try to flow it. You try to stretch it. You try to hide different sections off it, and you try to combine it with different, more shapes or a different idea. For example, one is water when it's safe, so saving you can show a hand. You can show a child's moat that the water drop is dripping in his mouth. Something like that. So this is how you create different ideas. Try toe, start from single idea and try to apply all those different things on it, and you will have a lot of ideas. 11. Examples of Generating Ideas: No. I'm going to explain all what you have learned with this. Just simple idea. So what I did over here is I am, for example, designing a logo for housing society or maybe some real estate, it And okay, so you can see at the bottom if you see what? Here. I have a few ideas mind mapped house and home. Ah, I that it could be a nest because going towards the bird's idea, it could be a building or apartment, and it could be a tent to live in. And it could be a heart if we go a bit old times. Or maybe something like that. So from all these ideas, I tried toe do different sketches or here Hey, As you can see, I combined toe, um, things. One is dext and one is the shape. So this is what I said that try to combine two things. So this is a combination off on the left side, you can see I have written multiply. So I have used to houses and made them look together, connected together with bond or something like that. So this is multiplying. So two houses, then we have this nest. You can see two areas over here, two different ships and two different styles. One is this bird nest, and this one looks a bit more than like a house s. So I am going to discard this idea in the end. Okay, so here we have hiding and showing different areas. Thes two sections. Let me show you these two you can see over here I have hidden the bottom part of the home. But you can see just looking at these shapes. Your mind is going to complete that. This is home similarly over here this is again I'm showing and hiding few areas off this home, adding one more at the top. We can refine that at the end in Adobe Illustrator. Any other software? Okay, so again, here we have the apartment ideas. Uh, here we have an apartment with the different windows in it, and here we have an apartment simplified version. So you can also use simply fight, technique, toe, simplify different shapes. For example, I just use a rectangle for the windows rather than showing smaller rectangles because on smaller sizes, this is going to look better. So this is how you generate multiple ideas from a single idea. Here is a case study. I actually designed logos for this house chimp and Ah, and you can see the chimp. All although on the chimp is basically achieve Benzie. I'm not sure what it actually means, but my client says that we want something like that. So you can see here I try toe combined to shape. So they were basically saving money on there. You can say on buying houses, so this house shape and this pound shine currency sign is for saving. Here is just the outline virgin and hairs in the design iteration For this one here I can you can see I rotated it and created our you can say perspective, perspective off that. So here you can see this is also attached House gym and And this bar actually the green or orange. It is acting as the center line off the edge. And then let me show you a few more ideas Here You can see another idea. Actually, I don't like that This left side off that is going too much up. I think it should be a bit smaller. Anyhow, these are two more ideas and this is how it looks on. Ah, um guard. These are few presentations on. They really matter. Whenever you present, you are going to present it like that. So this is how you can get different ideas. This is a combining method here I combined at and shape off a house. This is perspective. I try to rotate it, iterated a try to create a TV effect or perspective. View off that house hair is again combination off. Two ideas, different ideas. This is how you get different ideas. Let me show you a few more examples here. You can see this is I got from 99 designs, and here you can see property company. And again it is multiplying using different multiplying shapes. Three ships again multiply two different sides off a house showing Ah, this is again. I'm not sure What is this? Anyhow, this looks create flow using flow. This is a floor usage in this home start investor group. And ah, Then we have this Peterson property management designed by a watery and you can see again. It is a combination off two ideas. One is these buildings and one is this house this is again house. This is a perspective. More you can see again. It is using to shapes s and this section over here. This looks like a house again. Multiply. Really like it. Hiding areas are the bottom. Just showing the top off the house. And it actually makes sense that this is house. I really like this logo. Actually, I use them from Google. You can s so I'm not sure what are different. You can say authors off these designs, but really good designs just to show you what it actually means. So this is how you can get different ideas and you can generate multiple ideas from single idea. I hope you have enjoyed this lesson and a guard and court a lot off ideas to create some looking designs and ideas on logos and designs. I hope you have learned a lot. Let's move on to the next lesson. 12. Tone of your Design: Every design has a team a tone and there is a direction, specific direction and don't and theme off every design. So whether it's mobile app design, whether it's a website design or a trending project, you need to take care off the tone off your design. So there are many tones. I have seen a few off my students asking me that Try to create something on that so you can see your design could be mescaline. Femi nine Childish looks classic and it can also look Morgan, or it can look healthy and it can look sporty. So these are different tones off your designs. I have also talked about this in my typography courts, off different voices and tones off your typefaces. Anyhow, I'm going to show you a few techniques. So there is stone and there are emotions. So what? Actually, your design is reflecting, so either it could be inspiring or it reflects freedom or it is very serious. What is the emotion? It is a showing to your customer or the user. Nevada Leach look very trustworthy. Matter it. It shows that this is a very powerful organization. Oh, are it is very fun or it is very creative. So these are different reflections that are coming from your designed. So the tune off your design actually depends on the business and the users. So if, for example, you are designing for attacks liars eso lawyers from or tax from So what are the emotions or water that bone or what is the direction you want to go in? So it it must be masculine. It must be serious design. It must be just for the and also it would be inviting. For example, I want my users toe try to contact me. So I don't want it to be too serious that they don't try to even contact me or they don't try to fill out my form. Also, we want to show authority that we know this business and we have the power and we have the nomination and we can solve your problem. So all these things are going to be reflected in that design. Let me show you some examples so we can get these ideas more penetrated into our tiny brains. Now, this is one example, and you can see the tone and team off. The whole design is paper based. So why is that? Because this plagiarism Avenger waas basically a plug in and it was actually for content writers, and it protects content so you can see the force used over hair and the whole this stickers on different paper. These clips on you can see these Step Lear's or clips. These are all showing the content so you can see thes are few more hints over here that this whole design is based on paper. So the content writers are lately to paper because the right their content first on the paper, mostly and S O, This is the This is my design. I think it's old one, but I did it for a Facebook and been another. You can see another design for same plagiarism in venture Is this one you can see here We have different shapes and different arrows. This is all hand written like scribbled force. So you can see this is how the whole direction off your design can change when the team and the logo and everything is alleged to dead. So this is how you can see I'm using all the colors almost similar colors from here green. This part polish or this purplish red color on this board over here to show some importance or something like that. Anyhow, so this is another design. Let me show you one more ad. This is an ad for varied US health, and you can see how this whole design has been laid out. And the typhus is they have you summer? This looks very smoothing. Affect spine friendly guide to summer. So this is serious, sub Bert, and this is enjoyable. And the same thing you can see you will hear. The colors are almost the same from this Veritas health logo. And ah, the image blow is very calming. So whole direction is calm and a soothing effect and trustable effect for the user. So you can see the blue color initiates trust and it is mostly used in trust, trust and 50 and something like that. Here is one of my designs I did for some client and I think I warned this. I'm not I'm not. I don't remember, but I think I want this contest. Anyhow, you can see this is about Trader Plaza, and the whole team is, uh, very sleek on. You can see this image has been used just to get the context clear. So this is about business or investing. So you can see a person using this newspaper written very big over here business. And also we have this video over here voice the 92nd video and you can see also this four selection this type selection. It's serious. So it is not very fun related. You can see over here. This is the whole design, the direction off their design is a bit flat icons, but not that flat. But you can see clarity dressed and ah, this is how I have created this whole team. Green is safety. So if I'm investing and something I might be looking for safety, something like that. You can see how this whole section has been laid out. So you can see. Um, this is how I designed this Ah, whole team and the direction you can see just using these two colors red and green. Ah, orange mean excitement and green means safety. So this is how this whole have page has been laid out and this is a lending binge. You can see that this design is totally different from other designs which I have shown you there were text based or paper based, but this team is not paper based. So this is how these different directions and emotions and ah, these different, ah, bones off designs we have that is all for this lesson. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 13. Scale of Importance in your Design: Another thing, which I have seen a lot of designers doing wrong, is that they don't know what is the scale off importance in any design? No, why? This is very important because there are different things that are important and which are different in different designs. Situations. For example, in a magazine aired, the importance might be given toe the main subject, or maybe toe the main idea because it is lady to selling something. But when you are designing some landing page, the scale of importance might be given to something else. So what are the basic rules? So if you want to give something scale, so scale means that that will be the most dominating part or the biggest part. Let it go the other items in your design. So first thing is that important things which are important in your design, whether it's copy tax, whether it's testimonials, whether it's some logo, whether it's some video, you want to highlight that thing so it will be bigger with respect to the other elements related or around it. Second thing is that it might be brighter, or maybe it has different color than the rest off the items on the beach. So this is very important concept, scale off importance. One more thing is that there must not be a fight between multiple important things. So the important scale of importance must be a skill from top to bottom or, most important, to least important. So keep that in mind that all the things in your design are not important. There must be a scale. You need to build a scale that this thing is the most important than this one than this one , and this one is the least important. So here is another technique which I normally use and mostly used in landing pages. So what you need to do is the most important content. Whether it's copy or you want to give the message off your website, you want to move it to the top off your design. So that is why there was a concept off above the fooled. So Ford means that 700 pixels are sometimes 800 pixels. The Ford was actually on a page height, which was, you know, you need toe, pull it, you will see the next content. So this is big, basically the concept that if you have something important you want yours, user toe. View it instantly, so it must be at the top. And is it must be grabbing the user's attention instantly and it must be moved to the top in the order off scale of importance. One more technique is if you want to give something importance you can also use can trust. You will learn a lot about contrast in the next section, so we're going to leave it right there. But it means that it must be different from the rest off the items on your design. If you ever read any newspaper and in blawg article, you have seen that headings are very bigger and they are easily scannable and they're bigger letter toe all the different tax and other elements on the page because it they are going to grab the attention. They are the sport, they are easier to support sport, and they are meant to be bigger because users are going to scan. So it is. It makes it easier to scan everything. So this is another way off doing this and one more thing. My typography course has a scale for your typography scale of typography, different sizes, which is again related to this topic, which is scale off importance. So if you want to learn more about typography, you can look at that course. Similarly, in my typography course, I have talked about typography scales, which is that this text size for example, 16 pixels are 12 points. It is going to be for my tax and 56 points or 56 pigs. I'm going to use for my biggest heading. So this is the level of importance in the text. So we are going to use typography. Scales in your designs toe illustrate this scale of importance and also one more thing. If you want to learn more about about typography, scales and typography in general, you can have a look at my typography for designers and developers schools. This is a very big topic, so I don't want toe discuss it head. So I hope you have learned how to use and how toe what is actually scale of importance. I'm going to show you now different examples. So let me show you some examples and to make it toe make this concept more digestible. So here is my design for my own land. Ux I d card. This is my website and you can see this is the front and the back side off the card I have designed business card and and here you can see on the front side you can see what is the most important thing. It is the brand image. So I wanted Toby my logo the biggest over here. Then the second you can see the second thing you're going to notice on this design is going to be Are you learning? And then there is the Lord portion, which is I want the user to read in the end, which is the website. Similarly, if you look at the other side and you can see that hair my most area averages and most colors are used in the top eight. Here you can see what here, where the text is learned, riel design and courting skills and improve your dollar. But so in the start, I wanted Toby like showing you how to do according But I think it is. It will be a very long of course. So I Oh, I did it. I focused on design anyhow, so you can see the most dominating area over here. Is this one than this? You exciting again. This is the logo. The simpler version off my local smaller version. And then my contact it is so you can see here. I want to give the message to the user that I want you to do this or learned this from me. So this is how scale of importance is. Actually you can see used if you have you noticed Over here you can see the size off. The text is also bigger. Also the space it is taking all the size, the size off. This element is bigger than all the other elements around it. So this is how scale of importance is used. So you cannot make everything colorful. If I make these, you can say this text below and also this tax below. Er this border, a lot colorful than the user than the scale of importance, is actually going to shift. So it will be not a scale of importance. But it will be a fight off importance between two elements. So this is how you use scale of importance. Let me show you one more example. So here's another example, which is, Ah, landing page, which I have designed recently and you can see over here the most prominent section or most prominent area. Is this one home off affordable and easy to use digital signings and capture generators. Also, you can see the difference between the sizes off this text below and this heading is too much if you remember correctly or accurately. My last lessons they were about the difference in scale which is going toe create contrast , so different between sizes off distraction this Texas too much. That is why they are looking great. They have a lot of contrast. Any hope, Then you can see the second most prominent area is this one. So if I accurately guess is that this section which is and get freedom or literature now is actually getting more attention because it has another color, which is this city and call to action. But and so basically you can see that this is a landing page and the purpose off the landing page is that you want the user to sign up for the freedom. So I want to educate the user and then want to sign up. So this is my actual goal in this design. So to follow that goal, I want to use the scale of importance. I want these items. Are these two items to be more dominant than others? So this is how you do that. Second is if you look at this area the contrast between the background which is very dark, and this this foreground color bridges the stacks color is too much. So this is also creating more contrast toe get the attention off the user. Then if we look at these areas again, you can see they are equally important. So everything is same. Similarly, these these are equally important. They are actually repetition. We will talk about this in the next section. And ah, if we look at this section, I want this video to be seen on and you can see it is more important. So scale of importance has shifted to this one. It is bigger. Inside. It is taking almost 70% of the space. Um then they are all almost important. I want the important ones, Toby Big Branch, like high art. And they are a big hurdles. So I wanted to move it at the top. So see, you can see this is how actually we do all these this scale of importance. This is how we use it. Similarly Another example is that I designed this Ah, bygone for medical company that waas i u k doctors appraisal app and you can see or hear I combined three concepts which you might have heard in my last lesson generating ideas box document and Dr And now you can see combining these three symbols is going to make this icon and you can see even in this icon, the most dominating element is the most important element is this Plus sign the middle off this box so you can see here I have your scale of importance by highlighting this middle. So I hope you haven't learned a lot about the scale of importance. And these are enough examples. If you want to know more, learn more. If you want to ask me anything you can ask me Let's move on to the next lesson 14. Proximity In Design- Principle of Design: the way. One of the major concept in design is the principal off proximity. Now there Waas, a scientist or psychologist called Get Start, and these and this is one of his principal. He researched on human psychology of perception, and one of them is grouping. This is used a lot in design, so if you make it or use it in a different sense than it is not going toe, get a very good or pleasant information display or the design, so make sure that you are using it accurately. No, you can see at the bottom you see different these sections, and you can see you can clearly see that these two sections are apart or different, even though they are the same circles. So they are all circles, but they are a part or they are not considered one group because there are two reasons behind it. Number one is the distance, the spacing. You can see that these are, ah, lot away from the red ones. Blue ones are lord away from red ones. Second difference between them is a different color, so you can see this principle off proximity or grouping this principle off proximity must be applied accurately. So whenever you are designing, you can use white space toe separate items. You can use colors to separate items. You can use different shapes to separate items. Let's learn more about proximity. There is one other thing you need to keep in mind. When you're grouping items together in your design that they must be related to each other , they must be off similar information. So similar information related information that must go together should go together. Don't try to mix all different items or put them in just one space and say, Oh, I have used proximity because all information should be at one place. Okay, so that grouping yours junking your Chungking off information, different sections. They must make sense. So it is also called chunking or information, and it is one off the basic or, I think, major concepts off you a design because you have toe and create ah, lot off. There is a lot of information that has different purposes. Eso you need toe group them together in different chunks. Now here are few techniques you can use while you are designing to create different junks, or groups or sections number one is try to use white space. So now you can see if you look at this slide the top portion eyes separated by a 10 line to the bottom off this slide. So the bottom or food or off the slide is making your designs egreteau awesome by Mohammed s and pervasive. And the top section is the content. So you can see I am using hair white space to create different sections. Also, I'm using this line along with this white space to make sense that this is separate and the top section is separate. Second thing is that you need to clear different sections, so sections is again. You can create sections using wife space or different colors. Sections is also a similar thing, like creating different junks off information. So actually you are creating different sections using white space, using colors, using lines using different shapes. For example, you might try toe use Ah, rectangular, or maybe ah, hexagonal shape or something like that to separate the top portion by a with a portion below. So there could be many things you might use shadow. You might use shadows there. You might use a lot of shadow on the top portions who separated that it is above this section, which is below it. So this is how you are going to create different groups and chunks. You can also use lines. You can also use borders to create the section or separate that section. So there are many ways I'm going to show you in the next lesson. Few examples, few designs. So this concept get cleared or this concepts and get more penetrated in your minds because this is very important. This is really, really important that I have seen a lot of designers. I'm doing this wrong in a lot of places, so let's see some examples, So let's move on to the next lesson. 15. Examples of Proximity usage in Web & Mobile App Design: thing is the first example I'm going to show you. This is a redesign off a card. The logo is not designed by me. But I designed redesigned the cards because the old cars were very you can say very outdated. Also, give some touches toe this logo like this golden ah, border around it around the shape off the line anyhow. Okay, so now you can see in the front off discard at the bottom Gun, wealth management, private wealth management solutions. You can see this is the tagline and what this company does and the logo. So I kept all this information in fund block so they they should go together, So I made them closer to each other on the other side. You can see at the backside all the information is indebted to the contact. So this is the L. A. Marty Gun. This is the name president and CEO than telephone and fax number. Also, you can see at the bottom left I separated the email. Andi, I think e mails should be maybe just the contact information, but I think that it should go separate because it is a letter toe Elektronik communication . You can also, my I might also listed over here their website Free world Eso That is how I designed this car. So you can see you might have seen a lot of visiting cards and you can see all the information contact information. The name always goes together in one direction and it is grouped together in some area. So this is how you use junking or grouping sections in your design. Let's see another example. This is a so far app smarts off IAB screens to off them. I designed recently and you can see if you look at it over here, you can see the Chungking has is majorly used in you, a design mostly app design and websites. Because you can see there are a lot of things. There are a lot of controls going on. There are a lot off icon. There is a lot of information, ah, lot of interactivity. So you can see the top section over here, which is the status bar and are different. Icons toe do different actions than we have this area. This section which is related to the information and that is about the sofa. So this so far name so far. Title different status off the so far whether it's connected safe or something like that. This is the information about the sofa and at the bottom you can see this This section this is a separate section and we're using some light shadow that this ah adaptable dad bar is actually separate from this section. Also, the color off this one The Bagram color is different from this. This is, I think, why This is a little bit grace white to reddish three white. Similarly, if you look over here, this button spring in is actually have a lot of shadows. So it shows that it is separate from the background. It is elevated from the background and it is different from the background. And now if you look at this screen if we press this spring in Britain 12345 menu items are going to appear. So when you press this button, these controls are going to appear and they're closer to this button because they are all related to each other. So they have grouped. We have group them together. Similarly, if you look at this screen here we have on the left screen. You can see I have used this little small line over here. Why? I used it to separate the top section to the bottom one. Now, if you look closely, the top section is toe select different seeds on the smart sofa and the Borden section is actually all the settings you can do with the seat. So that is how I'm using junking. You can see all the controls that are related to the seats are in the same area and also in the same section. So I have created actually 123 and four sections off this screen. Bottom one is for tab controls and then the top one is actually the title Apt title. Then the second section is so far Name and different seeds. Then this third section is actually all the controls later too so far and seeds. So you can see this is how you actually use junking and grouping toe layout, your screens, your designs, your landing pages, your websites Also you can see on the other side on the right side you can see this sink music. This is you can say the pop up conformation box and hairs you can see the top top section, which is just the information, is separated from the bottom, which is interactive area or the buttons by simple lines. Also, the color is different, so you can see there are. They are using lines to create sections and also they're using colors. So this is how you use your group. Different items. You jump different information pieces and create awesome looking designs. If you have any questions to ask me next, move onto the next within. 16. Alignment in Design: here is another principle off design, which is called alignment. So why does alignment actually is so important? Because we are all humans and this is built into our nature. Or it is in our natural psychology, human psychology that we love symmetry, so something. Then it is aligned. So something else. We like that when something is arranged in Ah, a symmetry in symmetrical form in a rectangle in a circle. We love that something is irregular or not in alignment. Oh, are you have put on things here and there on your design. We're not going toe like it. So this is very important. And I have seen a lot of designers doing alignment wrong. They don't know how to align different items. And when you have ah, good alignment in your design, it is going to look balanced, so this is very important. Now let's talk about balance, symmetry and alignment a bit in more did. The first thing is that if you are trying to center, align your text, you are center aligning your buttons. You are center aligning everything in your design versus their designs where you are using edge alignment or there on the left side as to edge alignment or the right side, so the alignment on the edge to edge alignment it is going to win. So every time if you try toe, align your text on the left side or on the right side, they are going to look more powerful than the centered A line alignment layout. So make sure that you try to align your dext and your headings and your images in one invisible line, so keep that in mind. Similarly, if you can use shapes, you can use specials. You can you repeat that alignment toe, create symmetry. So if something is similarly done on the left column off your design on the left side of your design, you can repeat that and create a patron similar pattern on the right side. So this is going to look more balanced. So try to create similar patterns. Similar shapes, similar layouts and repeat them. Used repetition toe a line and balance your design. Try to create SMA treated. Another concept is visual read alignment, which is that you are going to align your things on the base off their visual. Wait. So how heavy it is. So if you look at these two examples at the bottom, you can see the red one is an irregular shape between different, similar shapes, which is which are blue ones. So actually, I used a mathematical calculation by using photo shop and try to center align it in the top over here, you can see the spacing between to the top one looks hard. So if you look closely at this red section the red shape you can see there that circle on the right side and the left side that they are not having the equal amount of space. Also, you can see that it looks like it is more at the moving at the top. And it is more heavy on the top than the bottom, so you can see this is going to happen. This is called visual weight alignment. So you are going to use your eyes, your designers eyes, and you're going to align it using not just you don't not using the mat, but ignoring it. So you are going to use some off your heart brain and you're going to align it better. So now you can see at the bottom over here. I have tried to align the spacing between them. Using my eyes are visual weight alignment and you can see they are looking more balanced. Also, I have tried to try to move this red section of it down so it looks more balanced than before. So this is another concert, which is called visual varied Alignment. It is also later to Smith Tree and Balance, and I hope you haven't learned a lot about symmetry and alignment. Let's see some examples. Let's move on to the next lesson. 17. Examples of Alignment in Design: so I'm going to show you some of the examples of alignment and symmetry which we have learned in the last lesson. And here are a few examples. So if you look at this card, which I redesigned, you can see over here on the right side, you see that this name, title and telephone number in fact, they are aligned with an invisible line over here on the right side, so they are all aligned in one line. Similarly, if you look at this one, this is also aligned toe an imaginary line over here on the left side and this space and this space on the left and right. Both spaces are equal, so it is used to create some balance. Similarly, if you look at or look at it and the first front section gun wealth management, private wealth management solutions on the front off distant card, you can see why I have aligned the gun belt management with private wealth management solutions. This is a slogan, or you can see what the company does with the company name because it is going toe create more stronger image than center aligning these two next so you can see, this is actually a symmetry. Similarly, on the left side and right side, I'm using the same length off the same green bar, repeating the same section toe align it and they are aligned in a similar single line. They are aligned together. So this gun wealth management is aligned with these two green bars on the left and the right, so you can see this is how you are going to achieve some alignment in your on design. Similarly, if you look at architecture and the work off all the architectures and great and different architectures, buildings, different houses, you are going to see a lot off cemetery. In them, you can see how they have using different shapes and how they are balancing their design. There are things on the left and then on the right. There are things that are repeated again and again, and also you can see that they are. They are aligned properly with some imaginary lines, or you can say straight lines, so they are going to look elegant when they are aligned like this in symmetry and using some balance. Here's another image off a church, and you can see how alignment has been used. You can see even in the tiles at the floor you can see the alignment of a different sections. Also the alignment of the siege and the alignment off the walls. And you can see the pillars. Everything is aligned with some strict rules or strict line, imaginary line of straight lines. So they are going to look great when they are going toe use be used with some alignment. Let me show you another example, which is, ah, e commerce and e commerce website from Creative K A R E a T v from dribble. And this is a great design agency and you can see I'm going to show you how this alignment has been used and how they're sticking toe straight lines to create awesome looking designs . So I'm going toe go my into my for shop, and I'm going to draw a few lines over here, a few guides to show you how it has been used. So let's draw a line over here in this area and also over head like that. So now you can see clearly that this section, this whole section is aligned toe this blue line so This is how this left alignment has been used. Reviews, title price, number of items at a card, even the share they are aligned it with one straight line. Similarly, over here, you can see this home collection This stop, um, trail. It has been aligned to this image. If you go down, you can see again. These lines have been aligned. The left line is aligned with this image. And ah, so this is how they are using alignment. So you you can see now how this whole section, this product section is being aligned to two lines or here. So make sure whenever you are designing something, you are using proper alignment and also proper by expressing you can see there's a lot of white space between the elements, even over here we're here and over here and over here. So keep that in mind and you will be your designs will look greater with just using this alignment technique that tried to align it with a single line and it will be looking great . So keep that in mind. Let me show you one more example. Now, if you look at this screen which is in Adobe x t. I designed this. You can see there is on imaginary line. If I click over here and then on the layout, you can see how this whole design has been layout. So it is falling lines on the left and the right So you can see on the left these all items , this burden, the stop So far. Title dismounted. Um, Dad bar on and you can see the stacks. They are all aligned to this left line. So you can see this is how I'm using alignment in all these screens in mobile app design and similarly over here, same thing Happens not have been done similarly over here. So you can see this is how you actually use alignment and line alignment. Try to stick with a straight line and your designs will look great. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next Listen 18. Contrast in Visual Design: If you want to be the greatest designer or the best designer, among others, the one thing you need to master is using contrast in your designs. Now in the design world, I think that contrast is the king. So if you think that your designs don't look very elegant or door did they don't pop, they don't show the pop. In fact, are the others Dorsey say Wow, this is great design. I love it. This is because you haven't used the contrast properly. Now I'm going to show you some off the vase. You can achieve contrast in your design now how you can achieve contrast. So there are many different types of contrast. Like, for example, if you have a very big thing in your design and a very small thing, similar thing. So they are going to have a lot of contrast off size. Similarly, one thing is very bright, very sharp, and one is dull. So this is the contrast off color. Then the shape contrast could be everything. A squarish and suddenly a burden is rounded. Bill Burton. So this is the contrast off ship. Also, you can use the contrast off positioning so If something is elevated and it has a lot of shadow, it is in the foreground and something is in the background. So it is also the contrast of position. Similarly, you can use position and you can use chain the position off one element of a respect to the other one to create some movement to create some contrast. So if you want a wide similarities, for example, you are listing four icons or four sections and they are ah, aligned with the top off there with the top alignment. So everything is aligned. Suddenly you move one off them or to off them like 10 pixels above the other two. So no, you are creating some contrast and interesting your design. Similarly, you can use white space. You can use a lot of fights base somewhere and some in some portions off your design, you can use less. So whenever you use a lot of white space around something, it is going to create a lot of contrast. So here is an example off contrast with colors you can see or him. We have the middle Vidor Circle, which is white and black. They have a lot of contrast between them because they are totally two separate sides off the colors. Similarly, on the red right side, you can see red and blue. They have a lot of contrast. But on the other hand, on the left side, we are using contrast. It is not too much, but we are using some darker shade of blue and one lighter shade of so there are many ways you can use contrast toe with using colors. Here is contrast with size. You can see overhead. We and all these circles. They are same there, same color. But size is different. So if I try to I'm using some text hiding or I'm using a text paragraph. Then I can alter. Their size is a lot to create some contrast between the heading and the paragraph. Now let's see some examples to illustrate this concept of contrast and see it in actual designs so you can have some more understanding off this contrast concept 19. Using Contrast Properly Examples: let me show you different uses off contrast and whole We can enhance our designs using and trust by using some examples and case studies So you can see we're here. This is basically a landing page which I designed a while ago, like four and five years ago. And you can see if you look at this at the first section. There are many types off contrasts I'm using. The 1st 1 I'm going to discuss is color contrast. So you can see on the right side the form. It has a lot of contrast from the background. Background is light and the front off this form is very different from all the background. Okay, so this is how we can use color contrast, Reinharz some elements. Similarly, if you look at this person, it is right now very dominating and very different from the background. So it has a lot of contrast. Even the contrast on the text off the color and the background is also too much Similarly, if you look at the left side, I'm using the contrast between the sizes off my fort so typhus sizes You can see the heading size and the text size have a lot off scale different. So the contrast between their scale the size is too much. So this is a creating interest. Similarly, if you look at these three main highlighted sections, you can see that I'm using again the size contrast and also some adding some color color contrast to highlight these three items. Now, if we look at this a satisfied client section, it is very differently designed. And I got the idea from another computer website or this website. So similarly, in this section, you can see ah, the each testimonial by each client is highlighted because it is very different from the background. So background has appeal. Uh uh texture on repeating texture on it, which is great. So great is a pale color closer toe white and you can see over here our satisfied clients. They look elegant on this because they have very sharp, very bright colors. Similarly, over here here we are using a contrast off foreground and background. So something is popped up. It is closer to us. It is elevated from the background you can see over here and ah, background. So it is looking great. Also, the colors are very sharp. You can see where here bright colors blue not that bright, but they are very different from the background. Similarly, over here you can see again. I used a rectangle, a shape toe Put some contrast between this background and this section. So it means that this section is different from the background. So this is how you use use contrast. I have used contrast in this design. Let's see some more examples now. This is another example which I have designed recently and you can clearly see in the top section that a lot off color contrasts have been used. In this burden you can see or hear it is very dominant and very black. And the background over here, the greedy int is very light and when the ingredient is dark on the left side, you can see the text is light on it. So it is creating a lot of color contrast toe get some proper factor and to get some great effect. Similarly, if we look at this section over here again, I'm using ah, lot of color contrast, different colors to grab the attention and keeping it separate from others. So this is hospitals condo so they look different and grab more attention because I'm using a lot of contrast. Very sharp colors. Very you can say very dominant. These colors are not bill colors, so they are attracting a lot. Similarly, if we look at the heading size over here and the text size, they have a lot of contrast between them because they are actually different force. First thing is that their styles are different. One is ah, a bit off sand set of humanist. I'm not going to talk into more detail about thes force, but they are different force. Fasting is the difference between them their style, their structures different. Second thing is that their size is different. So I'm using the contrast off skill. So the text is very small. The heading is very larger s O. This is the difference between them that is making it more interesting. Second thing you want to remember always you won't remember where here is that whatever force size to you you use in your designs, it must be readable and legible from a normal distance. So keep that in mind. Door Try to be too much artistic and in the end user might not be able to read your website of Rapid. That would be useless. Now let's talk about the footer off this design and head you can see again. I'm using very sharp colors and creating some contrast over here. This footer, the lower section, have a lot of contrast between the colors. And also one more thing is that this color can trust. It has some ratio. So if you are designing something you need to past this ratio that discolor on this background is readable and recognizable or not. So this is very important. One of the important concept. I will shoot link. I will try to link the website. I think it's color ratio colored ash racial dot com, I guess. So. You need to test the background color and the foregoing color to see whether these killers have could contrast ratio and whether this this text can be read on small devices or not. So here again, in this section, I'm using a lot of Caloocan trust, and also I am trying to use some contrast off alignment you can see or hear about us is a bit away from this paragraph. Similarly, our products Heading is a bit away from over here. So why I have moved it. Ah, a bit left or this text to the right to create some interest. So this is again the contrast between the positioning off the elements and I'm using that to mix in my design a bit more interesting. Let's see some more examples. You might have seen this design Ah, lot of times. And Ah, this is my recent project. I'm still working on it and you can see what hell again. The contrast is the king over here. You can see if you go to this, right? Right. Most screen. And it is about instructions, actually. So there are video instructions and attacks instructions so you can see or hear this yellow color on this white background. And this dark brown, they have a lot of good contrast. So it means that they are interactive. They are buttons. They are possible items. They are capable items. Similarly, if you look at the bottom over here, this Ah, that bar where you need to press different tab items to navigate, they are highlighted with navy blue, dark navy, blue color. So there is a lot of contrast. So if you can master this color, contrast and contrast between sizes and the background and foreground concept, you can marshal you a designs. Web designs, mobile app designs everything. So again, on the left side if you look at this six Uncle Gunter So it means this is my Uncle Gun Gunter seat seat. So this the hair I'm using some shadow. So shadow is actually separating it from the background. So it is the foreground background concept. So I'm trying to create contrast between foreground and background items. So something is up. This is positioning contrast. Something is away from the background. So I think you have learned a lot about this contrast and how you can use that. Let me show you one more example. This is the last one, and you will really love it. Let's see some of other designers work because I think I'm just a beginner. So let's see some more mature designers and teams off designers because teams normally have greater ideas and creator designed level of design. So this is one design I really love on. This is by Nicholas Solar you and you can see over here he are. I think he has used this ah color contrast and the contrast between type sizes in our brilliant way so you can see the type sizes off important things like this new home value is to bigger and a different fort. And it looks great. All other force you can see are the same or Regina and cost and are wise is done. No investment, I think. And all this stuff and you can see the bottom portion is totally different. It is invite. So these are the options. So this is the most important information. So he highlighted it by using the stark blue color by using board bigger text tech sizes and off course he match this typography, matching or diapers matching is create. Let's see some more examples over here. Here. If you look at this orange button at the bottom, you can see this instantly grabs the attention that this item is different from all this. This is a burden. This is an interactive element. So mostly that is other design that arrest off the design. It is using very subtle colors, but on leave one dominant color. So this is great technique and design. I'm going toe create more ad vast lectures on it on the subtle use of colors in the next section, which I will be creating and making and improving and adding toe the schools again and again similarly, over here. Contrast off text size is over here. This mean heading is too big. This text is small on. This image is grabbing attention. There is a lot of contrast between foreground background, having some shadow around it to make it to give it some depth and position it at the top off this background. Similarly, over here, let's talk. This is the burden and this is the only interactive section over here. So there is a lot of contrast off positioning and then we have color. Contrast and size are size contrast between scale of contrast. Similarly, this looks great and here you can see again the contrast between the text sizes again, the public media. I love it. There's a lot of contrast between foreground background elements, the text sizes. They are really lovely. Next move to this fax. You can see what here. I really loved this website. It's very minimalistic and and ah, usage off typography is awesome. Similarly over here, if you look at this screen, the color contrast is easily visible. You can see the left side is actually that there bar or the section Were you? The most interaction is going to happen, then the second bar and then third section. So it has three sections separated by these lines and clear contrast between the major section and intersections. So whenever you try to use color contrast or size contrasts, make sure that you are using and not over using it. So if some color is like over here, you can see this eon bluish color. It has been used on the buttons on Lee so you can see or hear. Hear? We have been on the sand on, uh, here we have it on the friends and also on this friend. This is all about using contrast, off size, positioning, color and ah, all other things, foreground background. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 20. Using Repetition in Design: Let's talk about repetition in design. Now repetition means that you are going toe. Repeat same style, same similar shapes and same colors are you can say similar reads similar hides in your design again and again, and it is going to get you closer to the symmetrical and balanced design. Also, repetition is going to make more sense because, for example, if you're designing a landing page and you have a Britain sign apart enriches screen and whenever you try toe, use that similar green button. The user is going to think that this is about and this is an interactive element. I need toe kick on it. I need to tap on it. So repetition in your design is going toe. Communicate toe the user that your design is consistent, so consistency is going to come with the repetition so you can repeat different shapes. For example, if you was using ellipse a shapes for your avatar images, you're going to use the same lift ships all over your design. Similarly, your sections, for example, the heights and ripped off your elements. You can repeat them. You can repeat different colors. You are going to fix different colors For example, if my website is e commerce website, I have Ah, um orange button for add to card. I need to use that just on Add to cart not for the other messages or some other the things . Okay, so keep that in mind. Repetition in design can be in many ways style, shapes and colors and sections lines. You can repeat them now. The problem is, if you try to repeat the same thing again and again and it is very similar to the same thing. For example, two sections off your website. They are very similar in style and everything it is going toe create a loss often just so your design will start looking boring. So there is one technique I'm going to give you is variation. But you are going to repeat that with a little bit off. Variations are uses a petition, but with some vision. For example, when you see me in my typography course, I used a reverse color scheme for some off the text. So it is called repeat killers are space, but in reverse. So, for example, if I'm using this on the left side, you can see I am you are. I love you. It is written in red and you can see on the right side. I try to create some interest. I'm using the same color. Same shapes, everything. But I try to create some more interest, and I highlighted this L section for love. And this is how you can create different variations but limiting yourself to the same repetition or same repetition of space, color and different sections. No one important thing is that repetition should not be just with your colors or the shapes , but also with of it and the highs hikes and also the spacing between elements. For example, your each section off your website or your Each logo has some space above and below. You need to keep that consistent across all your design. For example, if you have designed a website that is going to be on the mobile that is going to be used on tablets or iPhones or iPads, you need to think that this much space must be around it, or this percent age of space must be around it to make it look prominent or may make it look great. So you need to use different sections. You can use those sections with using colors, or you can use some, um, hides. And we'd fix Heiser highlights and read. Or maybe some ratios that this image is going to be in this racial this size, and you can use that in your different sections. So this kind of repetition is going to be found in a lot of sections. For example, pages, websites, webpages. There are different sections, so each section will have some repetition off different space. Different headings, different heading colors so they are going to repeat. So in the first section, for example, of the hiding colors black, maybe in the next section. The hiding killer is white, but still the size off the hiding the same. So you are using the size of repetition. Similarly, for example, if in your first section your header, you have left some margin top margin or top heading, for example, 200 pixels, you are going to leave the same in the next section. No, I have seen this in a lot off bigger designers that this is a very big problem. I have seen a lot of times that the nervous designers or the big name designers. They don't treat white space as a content block. So whenever you see some white space or empty space, I don't think that this is not Ah, block off your design element. This is also a block, so you are going to repeat that design block white space, and you're going to use this repetition in your design and you are going toe. I used the vice space repetition toe, create vertical rhythm and horizontal spacing and vertical spacing. So what is vertical rhythm is how your elements are going to space out in vertical direction from each other. I have talked a lot about this vertical rhythm in my typography course. So if you are interested in using how to use that typography and how to make your design interesting and layout stuff, you can have a look at my typography course. Now I'm going to switch to a lot of examples, so we're going to see a lot of examples. I'm going to explain how I have used white space and how we have used repetition number designs, so this all makes sense to you. So let's move on to the next lesson 21. 08 Repetition Examples: So here are a few examples where I'm going to illustrate the concept off repetition in your design. Now, if you look at the left screen or here the full screen on the left, I'm going to start from here and you can see that this top never stopped at a bar where we have the application title is actually the same as this one. So on the 3rd 1 So on the right side and on the left side, they are using the same. Also in the middle is the same, but just the size of the fort. Or you can say the patron is a bit different. Now, if you look at this left screen, you can see the elements I am repeating. You can see this very 10 line at the top. Separation is being used or hair again in the next section so you can see I'm using it toe separate my two sections. So this is the repetition. This is the same style, same line element I'm using and repeating it to separate my sections. Now, if you look at, um, these buttons, you can see all off them all the control buttons that are inside the screen. They are, uh, ellipses. So they are all circles, the store button, the decline. But on this hating but on these controls to controls, they are all consistent. They have repeating their repeating the shape off and a circle. So they're all ellipse. So you can see this is the repetition off shape. So I am using the same shape all over my design all over the places. You You can even see this shape in the memory function. So if you can see 1234 or lead, this is in German, actually. So thes are for memory positions you can set so you can see even in these memory positions , I'm using the same design element which is circled. And if you look at my typeface, you can see many sofas. This is also have some softness in it. It is not very edgy. So this is a game little toe, this circles. Now let's talk about repetition off colors. Now you can see how you might be laughing behind while watching this video because you can clearly see a lot of colors. Deputy, over here. Now, if you look at this for skin on the left. This dark blue navy blue color is being used as a filler for all the primary controls. So you can see what? Here. Relax. This is selected. So it has this darker blue shirt. You might not be able to see it, but right now, on my screen, this is very dark, close to black navy, blue color. And also you can see this left navigation tab. It is activated. So all these have the same colors. Similarly, if you look at this so far inside this, it has ah, light blue color, which is again you can see in this activity but in these activities, but and so we're here. And this orange is actually I have used for the heating because it was a bit different concept, So I didn't repeat on the blue colors over here. Okay, Okay. Now let's move on to this middle screen. Now you can see you can clearly see that these are two videos. I think three videos and they are using the same style title button to play same height and width. So also, you can notice that the spacing between them you can see spacing between all these three videos is same more tickle spacing. So this is one more concept. Similarly, if you look at the left and right off all these screens, you can see the inner content. They have the same margin and gap, so the left and the right is equal. So it makes more balanced design, and you can see also the icons. These are using the play Burton's they are using yellow color, and inside is again naming on the right side. You can see we are again using the same green color for activation that these things have been activated or these are turned on and over here again, this yellow color, same yellow color for interactive elements. So it is basically my second regular, and you can see or hear these. This is also interactive, but I'm using a bit. You can say darker brown color over here. Okay, so these tea are using the same patron, same typography sizes. Everything is same, and you can see this is how we use repetitions. So repetition is one integral part off any you a design you need to fix the four sizes. If something is using for heading, it must be used for heading all across your design. Soak. Repetition is going toe. Create consistency in your design, so make sure you are using a repetition in the correct way. No, let's look at this design. So we are going to cover the concept off repetition with some variation. And now you can see over here on the left I'm using again the same. This is one of the biggest hiding. But the fort I'm using over here is used for headings all across my design. So this is the same ford of different size. On this is the same Ford and same size for all the sections, the fourth and the size is seem so you can see this is going to create some consistency in your design. Similarly, if you look at this, I have created some separation with some colors. So I am using junking matador here grouping by using some colors and separating these two. But if you look closely over here, the spaces between elements is very tricky. So keep that in mind that you can see or hear the form feels they have the same spacing in between them. Let's switch to for a short, but I'm going to show you how all the spacings are going to work and how I have laid out this whole design. So if you look at this over here, you can see this space from the top over here is almost similar to this place over here. So they are equal up top and bottom. Similarly, if you look at this pace, it is indifferent. And also you can see if this space is almost equal to the space over here. So I am using repetition off vertical space or hair white space. And similarly, you can see the gaps between these all four. They are repetition. So now you can see here I'm using four different colors. Why is that? The problem is that if I try to use the same color over and over again, it might get boring. So to create some, you can say some interesting interest in your design. I try to use different colors over here so you can see they are looking more natural and they are more attractive. They are more colorful, they grab more attention. Similarly, this one waas at the end. So alone. So I tried to use some other color for it. Now, here we have the reverse reverse off reversal off our color scheme and I'm using dark background and on the top light colors. So this is another variation you can do. But you can see that this is again the section and also this space between different sections is the same. Similarly, this one is again white and there are a lot off cos icons are their logos over here. Then we have again. You can notice the spacing. Did you notice the space? This is very important step so you can see I'm using a lot of white space above and below. They are almost the same. So if I do clear something like this so you can see how this is creating a perfect rectangle. Let's look at a few more examples eso to illustrate idea off repetition. You can see this is another design which you might have seen in a few more times in this course. So you can see this, but another here, the same color. The same burden is used in a lot of places like this one over here, over here. And also in this subscribe nobody. So you can see the same colors are repeated again and again. This line at the top off this heading it is repeated again and again. That may show you here is the line at the top off this navigation over and here we have it again, again, the lines you can see to show the headings They're not blue, so they're a little different with some variation again, the line at the top here again, the line at the top. So this is how we used repetition in our designs. Also, you can look at different colors. For example, Degrees grace have been used in a lot of different patterns and the background colors here again, grave with some patron. And this is how this whole design has been looking together consistent. And that is how you are going to use consistency in your design by using repetition with colors, shapes, lines, typography, sizes, 22. 08 Repetition Examples: So here are a few examples where I'm going to illustrate the concept off repetition in your design. Now, if you look at the left screen or here the full screen on the left, I'm going to start from here and you can see that this top never stopped at a bar where we have the application title is actually the same as this one. So on the 3rd 1 So on the right side and on the left side, they are using the same. Also in the middle is the same, but just the size of the fort. Or you can say the patron is a bit different. Now, if you look at this left screen, you can see the elements I am repeating. You can see this very 10 line at the top. Separation is being used or hair again in the next section so you can see I'm using it toe separate my two sections. So this is the repetition. This is the same style, same line element I'm using and repeating it to separate my sections. Now, if you look at, um, these buttons, you can see all off them all the control buttons that are inside the screen. They are, uh, ellipses. So they are all circles, the store button, the decline. But on this hating but on these controls to controls, they are all consistent. They have repeating their repeating the shape off and a circle. So they're all ellipse. So you can see this is the repetition off shape. So I am using the same shape all over my design all over the places. You You can even see this shape in the memory function. So if you can see 1234 or lead, this is in German, actually. So thes are for memory positions you can set so you can see even in these memory positions , I'm using the same design element which is circled. And if you look at my typeface, you can see many sofas. This is also have some softness in it. It is not very edgy. So this is a game little toe, this circles. Now let's talk about repetition off colors. Now you can see how you might be laughing behind while watching this video because you can clearly see a lot of colors. Deputy, over here. Now, if you look at this for skin on the left. This dark blue navy blue color is being used as a filler for all the primary controls. So you can see what? Here. Relax. This is selected. So it has this darker blue shirt. You might not be able to see it, but right now, on my screen, this is very dark, close to black navy, blue color. And also you can see this left navigation tab. It is activated. So all these have the same colors. Similarly, if you look at this so far inside this, it has ah, light blue color, which is again you can see in this activity but in these activities, but and so we're here. And this orange is actually I have used for the heating because it was a bit different concept, So I didn't repeat on the blue colors over here. Okay, Okay. Now let's move on to this middle screen. Now you can see you can clearly see that these are two videos. I think three videos and they are using the same style title button to play same height and width. So also, you can notice that the spacing between them you can see spacing between all these three videos is same more tickle spacing. So this is one more concept. Similarly, if you look at the left and right off all these screens, you can see the inner content. They have the same margin and gap, so the left and the right is equal. So it makes more balanced design, and you can see also the icons. These are using the play Burton's they are using yellow color, and inside is again naming on the right side. You can see we are again using the same green color for activation that these things have been activated or these are turned on and over here again, this yellow color, same yellow color for interactive elements. So it is basically my second regular, and you can see or hear these. This is also interactive, but I'm using a bit. You can say darker brown color over here. Okay, so these tea are using the same patron, same typography sizes. Everything is same, and you can see this is how we use repetitions. So repetition is one integral part off any you a design you need to fix the four sizes. If something is using for heading, it must be used for heading all across your design. Soak. Repetition is going toe. Create consistency in your design, so make sure you are using a repetition in the correct way. No, let's look at this design. So we are going to cover the concept off repetition with some variation. And now you can see over here on the left I'm using again the same. This is one of the biggest hiding. But the fort I'm using over here is used for headings all across my design. So this is the same ford of different size. On this is the same Ford and same size for all the sections, the fourth and the size is seem so you can see this is going to create some consistency in your design. Similarly, if you look at this, I have created some separation with some colors. So I am using junking matador here grouping by using some colors and separating these two. But if you look closely over here, the spaces between elements is very tricky. So keep that in mind that you can see or hear the form feels they have the same spacing in between them. Let's switch to for a short, but I'm going to show you how all the spacings are going to work and how I have laid out this whole design. So if you look at this over here, you can see this space from the top over here is almost similar to this place over here. So they are equal up top and bottom. Similarly, if you look at this pace, it is indifferent. And also you can see if this space is almost equal to the space over here. So I am using repetition off vertical space or hair white space. And similarly, you can see the gaps between these all four. They are repetition. So now you can see here I'm using four different colors. Why is that? The problem is that if I try to use the same color over and over again, it might get boring. So to create some, you can say some interesting interest in your design. I try to use different colors over here so you can see they are looking more natural and they are more attractive. They are more colorful, they grab more attention. Similarly, this one waas at the end. So alone. So I tried to use some other color for it. Now, here we have the reverse reverse off reversal off our color scheme and I'm using dark background and on the top light colors. So this is another variation you can do. But you can see that this is again the section and also this space between different sections is the same. Similarly, this one is again white and there are a lot off cos icons are their logos over here. Then we have again. You can notice the spacing. Did you notice the space? This is very important step so you can see I'm using a lot of white space above and below. They are almost the same. So if I do clear something like this so you can see how this is creating a perfect rectangle. Let's look at a few more examples eso to illustrate idea off repetition. You can see this is another design which you might have seen in a few more times in this course. So you can see this, but another here, the same color. The same burden is used in a lot of places like this one over here, over here. And also in this subscribe nobody. So you can see the same colors are repeated again and again. This line at the top off this heading it is repeated again and again. That may show you here is the line at the top off this navigation over and here we have it again, again, the lines you can see to show the headings They're not blue, so they're a little different with some variation again, the line at the top here again, the line at the top. So this is how we used repetition in our designs. Also, you can look at different colors. For example, Degrees grace have been used in a lot of different patterns and the background colors here again, grave with some patron. And this is how this whole design has been looking together consistent. And that is how you are going to use consistency in your design by using repetition with colors, shapes, lines, typography, sizes, 23. CASE STUDY - Grey scale Card Desgin: Now I'm going to create awesome looking, visiting guard or business card, and I'm going to show you how you can design using all the principles and all the techniques and elements off design I have taught you in the previous lessons. And also, this is going to be my your next assignment. So right now we're going to design this card using Adobe for a shop, and I think that proper software tool for designing print printable cards is Adobe illustrator. But still, I think at obey for the shop can be used to. So we're going to dive into for the shop, and I'm going to create basically three different variations off this and I'm going toe show you what are the design directions or what I wanted or the team off this design or ville it? What are the properties off this design, whether it's strong, fun, creative or whatever, So let's get started and start creating this awesome looking business card eso that's dive into for the shop. Okay, now, to start this design, we're going to go to file new and we're going to go toe print, and the size we will be adding is 3.75 inches for 10. Height will be to 5.25 So 0.25 is actually the bleed margin and breed margin means that this portion is going toe cut when the cars are Jessica printed. After that, they try toe, cut them in the car shape, and this is the breed area which is going to be cut and outside off the card. So we're going to add it to our design. Okay, then we're going to select this art board right now. If you select art boards, it just moves to the article. If we're going to convert it to see him. Michael Itron. Okay, so press on cleared. Let's name it visiting guard or business card. Okay. And press cute. So here we have the first art board. This is ah, front, side off, other card and that zoom out. And we are also going to create the second suppress. Just this plus and we will have the second artwork. So right now we are in first art board. So the first thing we're going to do is we are going to lay out some plan, so plan is going to be We need some grids and guides. We need some boxes, toe align things for that. We're going to go to view new guide layout and let me show you how I have created all this . These guys. So you are going to use. Let me show you over here. Four problems and the Gretel gutter is basically the space between the columns you can see over here. These are the gutters in between the columns. So there are 41234 columns and the governor is 0.1 to 5. So this is how I am trying toe design, my ah layout. And I am using five rows, which is top to bottom 12345 rows. And the gutter in between them is 123450.67 So even if you want to use the gutter off 0.1 to 5, it's up to you. Let's design it like this. It's up to you. Okay. So I don't think that this much cutter is going toe helpful because we don't have too much content over here. So remember the lesson with the layers designed with content. Okay, so this is all and we're going to press. OK, Similarly, we're going to do the same with this one in quite layout and it is goingto be over here. Okay, So once we slept this you can see these are activated. Okay, so let's get started. And first we're going to use our text tool and ah, let's use just the blacklist. So this is how I wanted to show you my design process. So I'm going to go with 1 40 pixels, very big four size and the foreign I am selecting or typhus I'm selecting is Roboto. Okay? So before starting over design, we need toe. Make sure that our what? Our bodies, Our design team on the direction. Okay, so my company is a user experience design company and I wanted to look very strong, powerful, creative and simple yet modern. So I want to convey my message. Using simplicity on it must not be too much simple. But it looks modern and sleek and I want to show that we are powerful enough and strong enough toe solve your problems. So the fort, based on all these things, the type I face I have selected is roboto because it is very sleek and it is very modern. It is powerful sensory formed and for the power I'm going to use with the bull Tiefest. So for this I am using bold condensed roboto 1 40 picks is Okay, so let's create this fictions company use able. Okay, so I'm going toe align it in the middle like this. Come on, Lee to de select. Okay, now, if you look at over here, we have 1234 columns and you can see that my text is almost fit in the middle column. So I'm going to align it over here, the baseline off my phone or die face. I'm going to align it on my role. The base off this room. So you might have guessed that I'm using black and vital grayscale. So this is the first step, OK, now I'm going to use is the second tiefest. So I wanted to be very sleek, and I want a lot of contrast. So contrast will be in size two. So what I did is I selected source Sands Pro, which is one of my favorites. Forks feared Force and I selected. It's like life. It's like style, because why did I do that because I wanted to have a lot off contrast between the between these two typefaces. So we design aligned it in the middle and let's select a little bit off regular for it like this. So this is our grayscale design. That's a line it over here. Maybe in the middle off this group. So either you can select this rule like this and then select this and we and you can align it in the middle like this. It's already in the middle. Okay, so we have to elemental here. Okay, So I'm just using one dot, which is our going to be our lips. And I'm going to use an ellipse over here just to emphasize strength. Okay, so this is going to be Let's make it 41 vixens. Okay, so I'm going toe, move it. Just like in same line. You can see the alignment. One 123 Let's hide the grid's command and control semi colon, I think. Colin, I'm not sure I'm going to list heading over here. The shortcut over here. Okay, so you can also go over here and show and hide your guys so this it is actually screened snow. Not a great north cred, but the guys actually see are the guards. This is actually the shortcut. Okay, so we have these two elements, so make sure before you start designing your your card. You know what you are going to put over here. So we have two elements. Just a tagline and ah, thats our text. Okay? Now, to create some interest and balance, I am going toe because you can see I'm using a lot of white space at at the top on the right and the left just to emphasize this piece and toe. Get some. You can say some interest. I'm going to use this bottom section. Okay, so this is going to be like this. Maybe like this, something like that. So this is our actual layout off over design, or you can see the grayscale designed. Okay, Now let's move to this one, and I am going to depend on the grids. Okay, So So what I'm going to do is one more thing. I need toe tell you over here that this margin this is actually unsafe. Area it right and to do anything. OK, so the stop this left this right? And the bottom, they might cut when the they are printed. So what I need to do is so I'm going toe use. Either this block over here for my text or what I can do is I can either use this. So if I use the right side, I'm going to align it with this line on the right. So if I'm trying to use the left alignment, I'm going to use it over here. Okay? So now what I need to do is we are going toe put our decks just here, and ah, force are again the reward. Oh, I'm using. So I will be using Robot over here. So here we have Roboto board. So this time I'm going to use bold or black? Maybe so The nearest black talic first black and we have the black. So I'm going to use my name s and and I'm going to use the title in the same line CEO or and on the next line, I'm going to use my phone number with some space. This is my real phone number and this is my email. And one more thing. That's add some dummy rep side over here. Use Amber. Don't go on something like that. Okay, So now if you look at it over here, I'm using the principle off proximity toe. Allocate all the things similarly and close to each other. Because these are all contact. It is. One thing I'm going to do is I don't want this text would be that big. So I'm going to use 36 I think 36 look rate. And also I'm going to use change it to regular, so I don't want it to be too bold on. Also, I want them to be line. Height will be a little. I want to make them a little closer. 48. Okay, so here we have the basically out. Let's see how much it away it is from here. So I'm going to make it a line to this. 1234 That's five. Let's make it something like that. Looks great. Okay, so this is going to be highlighted, so I'm going to use a darker black color over here for this one. So, my friends, this is the layout for grayscale layout off my design in my card. This is how you should start your designs and you can see it is looking pretty simple. Now, in the next lesson, we're going to add some colors and some experiment with the backgrounds and all that stuff , so let's move on to the next list. 24. CASE STUDY - Finalizing Card Design: the last lesson. What we did is we created a grayscale off our first design, which is our business car design. Now, in this next step, what we are going to do is we're going to add some colors and some interest. We're going to bury our layout. So at some textures, or maybe some patrons to it to create some interest and some balance, you already have seen that how much white space actually enhances your design. So I have very less content on this card and a lot of white space. So it is going to emphasize on the only information on their car card. So what I want is, I want to make my brand impression the first impression on my clients that we are inviting company. So for that, we're going to use, um, patrons. Okay. Okay. So let's get started and add some add some color straight and dig deeper into this design and all that visual design stuff. Okay, so I'm going to jump to my photo shop now, so let's get started. Okay. Now, here. You can see this is the, um this is where we left. So over here on this art bored. I'm going toe start adding some colors. So mostly what you will be doing is you might have already the business, uh, logo over here. So? So you might already have that. You don't need to, you know, use our, you know, invented colors from yourself. So I'm going to go with this blue color and this sharp red color. Okay, so I'm corrected. Okay, so here it is. And let me see. I am not sure just doesn't look aligned to me. Okay, So, yes, it is not aligned properly. So here we have it now, Like this. Okay, So one more thing is that if you look closely, you can see that this usable along with death, this door. So this whole section is not centered. So here we have more space. And here we have less space. Or so here we have on the left, we have more space. And on the right, we have left less beef. So what I'm going to do so control Command D to dissect. Okay. So I'm going to group them together this usable and this ellipse Come on, G and I'm going to center. Align it. Control each or you can use this one over here, command it to select the whole art board and then use this. Okay, So make sure you are You are selecting this group, so I'm going to name logo. Come on, D two d select. And now I think it is in the middle. Let's hide it and see if it looks great. So it looks great. Nobody's there. Let's use some bluish gray over here rather than using just the plain grey old girl, I have seen a lot of my students. They try to use blue straight Sorry, The pure great Which is this Over here. Don't try to use their try to mix it with some color. Like over here. So something like this it's look very light. So I'm going to use a bit darker or like this This looks create. Now you can see this sleek or slim die face. It has a lot of contrast with this usable tiefest. So they are They are looking create also they're looking moderns This sand set of pro a Santa. Sorry, Sore sense pro Looks great. Also, this all caps. Roberto Ford is looking great. Okay, So, uh, this part is done. Okay, so here we have just this rectangle hair, which is also a bit Ah Gresh blue color. Very light. I'm going to see if it is aligned properly. I'm going to go inside the middle off this one this rule. So I'm using almost 1.5 rows. So let's hide our 100 s o it looks cream. Let's move this side. Okay. Now on this side, what I'm going to dry is I am going to reverse my color scheme. So here we have white and contrast colors on it, and here I am going to reverse my scheme. So next use create a rectangle over here. This is going to be our this. Let's put this tech story it and I'm going to select all this text. And right now I'm going to use this color, which is pale. Why discolor something like that. Okay, so for this CEO, what I'm going to do is for this one. I'm going to use the pure vital just to highlight it or make it separate from the other three. Also, if you want to do something, you can reduce it like 42 maybe something like that. And also this 1st 1 I'm going to move it away, so I'm going to change the line. Height. 48. This I'm not sure why it is looking too big to me. So I'm going to go with 32 rather than 36. So this looks great. Um, now I feel that this size contrast between the CEO and this one looks good. Okay, So either you can use this black, or you can use the same blue over here toe for this pair ground. Or also you can do. One more thing is that you can reduce the brightness over here. So this is the same you 21. And what you can do is try to reduce the brightness, and I'm going to go with 30. Oh, are Let's He was 25. So this looks square. These are the colors, see? 100% magenta, 90% yellow, 42 and black 52. Next increase The black to 65 are 70%. Okay, so we can use something like that, but it looks very ready. Dark, So I'm going to go with 65 or maybe 60%. Okay, So still, 60% looks too dark. 55 saturation. I'm going to reduce the saturation toe 70% something like this. So No, this is a different color, but it is in the same color line or the same color which waas we were previously using to 21. So we are actually using the darker and duller dull shade off the same blue. So here is our first version off card. So, uh, now you can see it looks great, but maybe this looks too big. So I'm going to go with 42. You can see what I'm doing. I am zooming out. So zoom in, zoom out. So I'm zooming out and I see that this in relation to this one looks too big. So I tried toe reduce the size. So now what I'm going to do is so I'm using everything which I have taught you Zoom in, zoom out The contrast between different typefaces how the color contrast is reversing the colors. Everything okay, so no, What we need to do over here is we need to create some interest. So over here this art board, you can see it looks very dull and very you can say, maybe boating. So what we need to do over here is for this bottom part. I'm going toe drag some. You can see some patron or here, but the patron I will be looking for is inviting. So this looks very, you can say, very straightforward or very formal. So I want to get some fun or creativity and inviting in in action into this designed for that. What I did is I have this patron, which I got from ah, creative market creative market dot com. And I really love this. How these markers have been, you know, arranged dark, take markers. And I think this these may be related to user experience design because we use markers a lot. So what I did is I tried to drag it to my photo shop over here like this, and this is the patron. I just moved it over here art or option key to replicate it. And I'm going to align it with this. So it is basically a repetitive pattern, So it is going toe for it perfectly well with the other part off it. So now we are going to hide this background, and you can see? Let me zoom point of this. Okay, so you can see that here we have the competition between the primary focus off this this design, which is that I don't want the user to look at this bottom too much, so I just want this usable and this area to be in the focus. So what I'm going to do is I'm going toe, uh, you some color overlays on this one. So text layer color overly. And I'm going to use something, something great blue like this. And copy this style again. Basic over here base last time. So now you can see this is a bit you can see the contrast between shapes on the top. We have all, um very rectangular, very sleek and very finished shapes where they are. You can say they are very regular shapes, and here we have irregular shapes at the bottom. So this is actually the contrast between between these two things. So I added this to add some creativity and some simple less in the design that we we are a create digital creative digitally agency, something like that. So this is also allegedly user experience. So this is how I managed to create these designs. So this this exercise has been ended. And the next step, what you are going to do is you are going toe download some business card moke up. So what? Actually a markup is Let me show you. This is the business card Markoff I'm using. So you can see or hear that this is a business card. Mock up. And these are actually smart objects. So if you double click over here, it is going to show you that this is how you are going. Toe based your card over here. So let me show you what I did. So I actually selected this art board. Control Command A and Ah, copy must. And I went to this one base treated over here. So you can see now it is not a line because it doesn't have any bleeding area. So control a center. Align it. And this is how you are going to get your design? Come on, D on de select and let's use Yes, See how it looks like. So here we have this usable card. You can see how it is looking. If you want to adjust something for example, if you want to move it a bit down, don't be. You can say don't get bounded by these great line. So I'm going to use something like this. And I am also going to use moved a bit down. There's use something like that and see if it is going to look better. Next, try this. Moving it in the middle. Control Command. See? Okay, so this looks better because we have moved a bit down and also over here. This is looking great. It's, um Jane, this one, this layer toe. Actually, I purchase these. So if you are, if you are thinking that the's looks this looks great. Next me change this color and show, you know. OK, so this is how my card is looking, and it is looking create. Now what I'm going to do is I'm going to export it safe for web and the image will be. You can see image, height and width is too much. So I'm going to use something maybe 1500 and I am going exported like this, and that is all. Okay, so here we have this business card. Now, this is how what we design. And this is how you are going to use some business card moke up. So try to use a mocha extracted with within a bearable size, which I can easily have. You try to export it in a visit variable size and applauded in the next assignment. So next assignment will be creating this business card for yourself. You can use your name, your fiction, it's company or anything you want. Okay, So I hope you have enjoyed this lesson and how I managed to create this design and how I reached this design on how I use different colors. What was the process behind my design and how I used grids and guides and the whole layout . So if you have any questions to ask me, I will be adding a lot off lessons, new lessons in the future and, uh, till then, see you soon. Take ill and keep creating create designs 25. Project → Business Card Design: Now you have seen me creating my design process and how I created the simple guard. Now ex Jordan and you are going to create something similar on. I want you to create something mescaline, powerful, strong. And yet Morgan and creative so designed a card using any colors. So make sure that colors are also going to, you know, resonate with this same team. So what I said is strong on creative and all that tryto find the colors that are going to match this team. Also try to find deficits that are going to match this team. Strong, creative on and Martin. So these are the T key words. I'm going to give you designer card, factious company or your own using your own name Diana something. Or John Doe or whatever you want to use. Try to you use a tagline of one heading your name maybe, and your details contact. It is on the other side. Try to designed this two sided cards. I'm also going toe link the card file which I have used the Photoshopped file. You can use any software. You you you want you if you want. Oh, design using illustrator or whatever. I don't mind. I just need to see the freezers. And Ah, So that is all I will be looking forward to seeing your designs and this assignment. So let's get started. No. 26. Whats Next?: 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. 27. The Framing Effect → Advanced Topic: I'm going to talk about a little bit off Vast. You can say advanced topic, which is framing effect now framing effect. And you might have seen it, but you don't know how to use it properly. So I'm going to explain it A lot of examples in this lesson that how you can use framing affect effectively while you're designing for reference websites, mobile labs or anything you are designing. So you might have seen photographs hanging in your house or room or in your relative's house. So what it does it is that you need toe put a lot of white space or some content around your photo. Okay, so for the framing means that, for example, if you are designing something or you have some features listed on a website, so you are designing for the features section. So what you are going to do is you are going to use ah, frame off medical er, or maybe some lines or maybe white space and add it around that contract. So you are going toe frame your content just like a photo is framed inside the frame off that photo. Okay, so it is going toe. What it is going to OK, so it is going to emphasize that and it is going to make it more prominent and different from the rest off the content on your website or mobile app. A lot of people they don't know how to properly use who white space of white space can be used as a frame toe. You don't need to, you know, put some colored frame or maybe some hard frame around your content. You can use white space. Ah, lot of Y space around your elements. Design elements toe make them look, you can say emphasized and bold. Okay, so you might have seen that there are photo frames where when the photo is are the text in them it is very small and there is a lot off white space around it. So when you put a lot of white space around something, it is going toe. Give it more emphasis and it will look more cleaner or more sleek. You can see here I have designed a very small try no or no tanks box. And you might have seen these kind off papa boxes or something like that. So if you create a lot off white space around them. It is. They are going to look great. So keep that in mind that putting a lot of white space is going to help your designs. And don't really Don't try to. You know, I think that this is too much. Try to use as much as you can. So now we're going toe. See some off the examples. Now, you might have seen this example a lot of times because this is the recent one I designed anyhow, So you can see in this design if you look at this section, he's a fuse affordable, scalable, free sport. There is a frame white frame that is containing all this content and you can see that it is emphasized from the background. So I'm using actually the framing effect. So let me show you the frame. So this is the frame, and you can see how I'm using a lot of white space around my content. And also I'm using white color and some shadow around it. So to highlight this frame that it is elevated and it is different from the background. Now let's look at this section over here, and you can see here we have different cards off the usage off different digital Sinus products, and you can see if you look at one off them. It is also the use off framing effect. So the card concept, which was designed by Google Material design and ah, lot off you can see it is used a lot of times on in all mobile APS. It is basically the framing effect, so they are using a frame toe frame, their content inside it. Let's look at this example here. As you can see, I have designed this dashboard. And if you look closely, I'm using a very big frame on top off a blurred image toe. Show this. You can see the stash board and let me highlight that. So this is my frame, Okay, So you can see this is my friend and all the content around it. I'm not just using vie color so you can see the space around here and the space around here on the right and the left. It is being used as a frame so you can see we have some space at the bottom, on the left and the right, and at the top So I'm using framing effect to highlight this main content area or main content section off this dashboard over here So you can use all these thesis framing concept in lot of ways. You can see these buttons have been highlighted. Small frames I'm using over here. You might be laughing right now. So, uh, this is actually the framing effect that you spare. Leave space around it like that and highlight it the content between it. Similarly, I'm using very big frame around all my this dashboard. So let's see some examples from other designers because I think I'm just a big nerd. So let's see some more experience designers. So the first example is from this designer, Anwar Hussain, and I think he designed this landing page and it is very brilliantly designed. Very nice, very simple. Plainly out. Good use off colors. And if you look at this section over here, let me zoom into this section. So here we have this section attentive Gatien membership front and console. So this is actually the use off framing effect. So this content, you can see it is inside a frame again. If we look at another section at me show you. Uh, we're waas that OK, so this one I want to receive updates Unsubscribe at any time. No spam. So you can see this section for subscribing is also using framing effect on Dhere. We have again the framing effect content inside this frame. So don't don't ever think that frame is just you can say Ah white space so you can use any color like here. He has used some colors around it Very pale colors. You can also use some patrons around it. Let me show you some example Over here you might have seen this before and you can see again the eyes in the center. It is using the framing effect. So this is making it look great Space all around it. Just like a photo frame. Let me show you more examples. Here we have this one. You can look at this over here Image inside and it just looks like a photo frame. Now here you can see the designer is using a frame to frame this photo and you can see the space around. This photograph is just looking like a photo frame. Similarly, this text is also inside this frame you can see. So this is the use off the framing effect again. Don't mistake that The framing of fester fact can be used just with the white space. You can use patrons around it. Okay, so here in this package, back is designed. You can see this looks great. It is from Mamba Studio and, Ah, I loved their designs. You can see that this center information which is last Selva Cafe. Organic. Oh, it is surrounded by the texture. Or you can see the badger patron all around it. So this is a beautiful pattern and a great product design product packaging design. And here you can see they are using actually this patron for the framing effect. So they are framing this plane section off yellow orange and this text and frame it with some texture. So this is actually the contrast. This center one is actually playing, and outside is all patrons. So this is another, actually, in the concept which I have taught you contrast. So here you can see Look at them closely. They are looking great. This is actually the framing effect again. On the frame is too big. And image is too small. So you can see also, there are some parts overlapping. Create execution. Clear design. I really loved this package Package design. Okay, so let's see one more example. Okay, so this is from thes are multiple honors Isabel Sosa and cast solo strode you London And this is a great design again. And here you can see the as using the again the framing effect, but a bit differently. So what they are doing is they have They are using this texture that me zoom in using this texture on this images These patrons and they are using it just at the top off the page so that the top frame have this texture and the rest off the frame doesn't have it. It just have you can see you can see just the Voigt's piece. So actually, they are trying to use a concept which I have ah talked about in my other lesson, which is generating ideas where the concept waas to show and hide. So they are showing some part and hiding the rest off the part. So here you can see very great design. I wish I could I could design something like this great execution, great typography combinations, great style, great colors, great use of framing effect with using this pattern overall, a great design. So that is all I hope you have understood now the concept of framing effect and how you can use that in your mobile APS, Web, abs, websites or whatever your design. So you soon in the next lesson, I hope I will be making more lessons like these for this course. And ah, till then, just keep watching and improving. Don't forget to submit your assignments and see you soon in the next lesson.