Day 57- The Principle of Proximity- 100 Days 100 Skill Booster Sessions

Foreign? Yes. Welcome guys. Welcome to this day 57. In fact, we have successfully completed around eight weeks. So this is a. This is, I believe this is a great breakthrough. Consistently we have been doing that and people who are taking an advantage. This has been a. What you call a good turnaround for them. Okay, Two months it's been. And last week what happened is we did a project, right? So that is the reason we have not able to complete three other laws of gestalt. So today we are going to see something interesting which is called principle of proximity. Okay, so that is the main topic. And just, just a second, guys. One second. And okay, once again, let me also put it in design verse so that people can participate. Okay? Yes, guys. Okay, now let's start the session. I'll share my screen so that you guys can watch it out. Okay. See, this is also a very important law. But the point here is you will have to draw a parallel and a correlation towards it. The reason being it will all look very similar. It will all look with a very small differences. But unless until you pay very close attention, you won't be able to differentiate it. Okay. Anyway, I'll show you an example. I'll give you a clarity about what is this principle of proximity? Have anybody heard this principle of proximity before? Can you type out in the chat? Yes. No. Have you heard about this principle of proximity? What is this? And have you heard, have you heard anything about this? No. Okay, that's fine, no issues. So first of all, let me explain you what is this? Okay, see, principle of proximity asserts that elements placed close together are perceived as related. You know, we saw initially like clusters, you remember? So actually while those spaces are further apart are seen as unrelated. You remember, first we saw the law of grouping when we saw figure and ground, when we saw law of similar, when we saw law of similarity, also we had the same law. Okay, but the point here is the examples may be little different. The case studies, what I'm going to show you, it may be very different and you can use it in multiple places. So this is a foundation for creating visual clarity and it enhances the relationship between the elements, reducing the cognitive load. See, ultimately why we are using all these things is to help the user understand what he wants. We have to reduce his cognitive load, we have to improve the aesthetics and we have to improve the usability. Yes. So a clearer and more structured layout will be a final output of. It simplifies navigation by clearly defining relationship between elements. So let us see the mechanics and technique. First of all, grouping Elements like buttons and form fields indicate relationship. Like let's say if you take any particular UI element or maybe when you take particular buttons like let's say the names. Have you seen the forms when you are filling. Like let us say if you go to any Google forms or any kind of forms, you will see a little grouping happening. Like let's say if it is relating to descriptive, it will all be in one particular boxes. Okay, if it's relating to like let's say numbers or drop downs, it will all be in a different, different format. Okay, so you can able to think about it. See you can say personal info, payment info. So this subtle difference is felt. See when you're using very complex UI system, when you're using so big. Like let's say if you're making the user to fill a big application form. So this proximity will help you to prioritize how the user can able to easily stick onto one thing. Okay, so use grid system to ensure consistency and proximity and alignment. So you can able to draw a grid system when you're designing some kind of a layout or anything. So, so that grid will help you to align this. Okay, when you take an example of proximity, I'll give you one small example, okay, just a second so that you can able to get some more information regarding this. In fact if I have to show you a complex UI dashboard. UI dashboard for filling forms. Let's see that example. Okay, I'm just sharing you the screen. Just wait. Yeah, like let's say if you look at this one per se. Okay, like let's say when you are, when you are, when you are asking the users to fill this kind of a forms which is more complex in nature. So this proximity do really help you better. Okay, like let's say if I have to take this one picture, if I have to take you this one picture, look at this. There are more complex. See this is a visualized data. But I'm saying if this data is given to user to fill this information. Like let's say how much they wanted to fill the data. Like let's say if they are uploading the stock in their logistics, okay, many logistics planner has a very good UI. Nowadays all SaaS based system has this dashboard and other applications, right? So you will sometimes ask them to fill the data manually. So how do you manage the data very complex information to the user? Very simply by actually understanding this law of proximity. Okay, when you try to understand this law of proximity, you try to get to a very clearer way of navigating the user. So what happens user will know. Okay, this is for numbers. Okay, this is for percentage. Okay, this is for names. Okay, this is for description. So let's say if somebody is able to concentrate in this UI for 5 to 10 minutes and complete a job. If you apply this kind of a law of proximity, law of similarity and other law of closure and flow. Whatever we saw the figure and ground, he will be able to navigate much faster. So that is the whole objective of creating this kind of a difference in the user. So I told you, it reduces the cognitive ability. Ultimately why we are doing this, this is to reduce the cognitive ability. And grids and other system can able to help you lottery. See, the thing is, while you are drawing any kind of a patterns using the grid, so the eyes will travel in that particular grid. See guys, next week or maybe the coming weeks, we will see more about grid system spacing and all. So this is all about composition. If you wanted to learn advanced aesthetics, you have to learn something called rhythm, harmony, balance, symmetric, asymmetric. Tomorrow we are going to see something very interesting law as well. So this will give you a clarity on how you can able to create a grid system in that and try to make the users focus. See randomly if you are putting here and there, that is not called grouping. If you are placing it in a grid. If you are trying to create a meaning out of that, that becomes a law of proximity. Okay, so Apple website align products card to indicate related products. Examples are really lot. I can able to keep on giving you. Okay, spades creates a hierarchy and avoids clutter. So you can see the example of. Let's say the Google priority search. Like many examples are overlapping in this Google. So we can able to see that statistics. So speed of perception. Mainly this is the most most important thing guys, how people were able to process the information. See, when you are processing information, people can able to group it 38% faster than the ungrouped layouts. See, you take your case. No, you leave others. We will be very confused if something is given with so much of what you call here and there cluttered, you will not be able to get the relationship. See, it's not only law of what you call law of proximity helps. It's also many times law of closure, law of continuity. This all helps together in order to get that flow and the visual hierarchy we discussed. And also the white space and the figure and ground. How do you are able to. How you are able to create that white and black space. Everything comes together. That's why I told you these all laws when put together or maybe in a combinations or maybe sometimes individual will make a big difference. You will have to understand this one factor. Okay. Yeah. So one second law of proximity is different from this. Different from this? Sir, that means what law of proximity is different from this? Sir, I did not understand biology before today. Sir, you take the same class law of proximity. Okay. What the difference between law of proximity and principle of proximity. Sir, it is actually same. Did I take law of proximity before? Oh, yes sir. And day 52 you1 second in 50 we took about 52 figure and ground. 1 second 52. Oh, did I take proximity before? Oh yeah. Happened. Okay. Okay. But did I take this law of similarity? Yes, sir. Because similarity and closure I think I believe I covered. And figure and ground I covered. Okay, okay. Principle I thought proximity. I thought I did not cover. Just a second. Let me see whether I have taken the exact one. Just a second. Just a second. Thank you for reminding me this just principal standard. Okay. I think I've covered you guys. Sure, right? I've covered this. Yes, sir. Because we saw one day hackathon, you remember on the branding 51. Oh, that's why I got confused. Okay, no problem guys. Then what we'll do is. Then what we'll do is will exactly stop this. Are you guys clear with the proximity? Then we can close this. We'll move for the next law. Is it? Fine, we'll go for the day 58 principle of symmetry. Can we see that? But I want confirmation from everybody that everybody understood that. Because if I'm seeing that clarity, then I'll be able to go for the next law. Are you applying practically? Are you able to get some clarity in this law of proximity? Then it's fine. Whoever is there in the call has to confirm me. Anju, Arvind, Jayanandini, Padmavadi. If you guys are consciously using it, applying it, that's superb. Okay. I thought I did not cover this principle of proximity. That's okay. Great. We'll move for the next law. No problem. Because law of symmetry is also little interesting only. But I thought this was not covered. I thought the law of pragnance was covered here. I really got confused. You know what is law of pragnance? Pregnancy is also a similar gestalt law. I thought the the pregnance was covered. P. Okay, thank you. Thank you for reminding. But please confirm me. If I have to continue this. Let me complete it. What do you guys say? Balaji, are you here? Yeah. Yes, sir. So you guys have to Tell me like if I have to continue, I. I'll make sure I'll complete this principle of proximity. Then we can go for symmetry. Not a problem at all. We can cover two things. Sure, sure, sure you can. Sure, sure, sure. You have to. You can complete it or not. It's not about completion, Balaji. It's about we are comfortable with this law. We can able to apply. See, that is the point of taking this session, right? So it's not like it's. It's like somewhere some other day it is covered or not. That's not the point sir. We understood this. We don't need this. Or we will see one more time. Then I can able to go forward. That's the reason I'm asking you guys for others as well. What about Jayanandini, Arvind and yeah, Balaji is saying okay, we can continue this. What about others one more time. That's great. Okay, fine, fine. No issues. I will complete this one. Okay. Because we are in the explanation of this proximity. I thought earlier pragnance was covered. That is the reason. Okay, fine. So what are we seeing about this proximity? I will try to complete this faster. Ok. So today we will cover two loss. There not a problem. Yeah. So the speed of perception. So how people were able to perceive it really faster. That is the major objective of grouping this. But I remember I did not teach you grid, I did not teach you placement and all these things. Okay, I do not know in proximity what did I cover. But anyway no problem. So ideally when you are seeing proximity, proximity needs to be perceived in a form of a grid. Because grid system is going to help the user identify faster. Have you seen in many websites, in many applications building and many canvas like let's say Photoshop Illustrator, people use these grids in the background. The reason being grids will help you to construct it really faster. The grouping can able to happen. The proximity can able to happen only once you put that system in the grid. Like let's say icons, like let's say text, like let's say pictures or maybe hyper anything. If you are able to place it in a small small grids. So that will make the user really attract the things faster. And you can able to create a similar grids also. And you can able to create the repeating patterns as well. Okay, so that is the meaning behind user groups and engagement. Interface with a clear proximity have 52% higher engagement. The brain parental lobe automatically groups elements based on the closeness improving focus and comprehension. So this is a neuroscience backing for it. Okay. See guys, when you are able to consciously implement it on your designs, this will only make a difference. Hearing this theory. No, it will not create a big difference. Okay, we are going to see some activities as well. Don't worry about that part. So Instagram feed, Amazon filters. So you can see filters like price, brand ratings and all these things are for easier selection, right? So I told you, for complex system, see Amazon Instagram feed. And all we can able to easily understand because we are seeing this every day. But imagine when you are given a complex system, how will you do it? That is what is going to ultimately make a difference. Okay, numbers are grouped into 3. Excellent example. In ATMs, have you seen 3? 3, 3. And the last two numbers will be little bit spaced again. So that is like let's say hash or something else. A different number will be there. So the way in which you group, the user perception will change. That is why the recognition is much faster. Okay, so there is something called recognition. Then recall. It's a law of guest. It's a law of Jacob Nielsen. Also. Okay, for analyzing the UX principles. Car dashboards, air conditioning group together. Okay. In logo, when you take very common, like let's say Olympic logo, groups are closely placed each other. But the thing is, you can also draw a proximity here. There are certain logos, like let us say. I would not say FedEx. I would say the better strong example would be to Adidas. Okay, we saw in Figure and Ground also this example. But yeah, in Adidas you can say there are three lines which is grouped in a kind of proximity which will showcase mountains. That's a great example. You can able to understand how it is happening. Okay, and you can take another strong example of like let's say, I would say there is another good example, which we can say law of proximity. Another good example would be recently, what I can able to see Chat GPT logo is different. Google Bard is different. There is one recent logo which I saw. Just a second. I'll take one example and show you guys. Okay, hold on. Proximity logo examples. Yes, IBM, that's a great example. You can see this. IBM is not consciously written, but this is. This is all like put into a different. Different groups. Okay, this is also called law of closure. I would say it is a little overlapping. But the point here is you can perceive that element, right? And you can see this, what you call whatever. I can say, yes, this butterfly. This is one good example. AT&T. AT&T is a telecommunication industry. You can see. So this has been grouped in a Certain manner which will keep you connected like a globe, which will make you perceive like a particular circle. Okay, this is also called law of closure. You can definitely conclude it because two, three laws are sometimes overlapping. You can say something like FedEx. We saw the example earlier. No problem. And you can say another good example would be Adidas. We have already saw. And another example would be what I can show you what I can able to show you. Yeah, this is general law Tobleron proximity. Like too much of scintillation should be there. That is how the examples can be perceived. I mean, too much of separation segregation should be there. We'll take one more example weight so that we are having some clarity in this. Though dough is not very grouped together. Dog is a different example. What else, what else, what else? Walkman is not a very good example. Recently I saw one logo case. I totally forgot that it's like lot of what is this one? I don't understand this brand. But anyway, Amazon is not an example of this. WWF is law of closure. Like we can see this example is good for law of closure. Okay, and what else we can say? Toyota is not exactly proximity. We can say more. Yes, well, as a good example, can you see this all being grouped in the same pattern? This actually communicates a hair. Bella is skin care. I think skin care are some beauty products. Okay, so they have actually structured in a way so that it communicates the hair or maybe many. Like let's say this air filters and air purifier brand also has this. Okay, so if you wanted to create that visual identity, also you can use this proximity to create that. That's the conscious choice which you can make. This is a good example. I don't know what logo it is, but. But it is very, very clearly perceived. See, it's also called loft closure, but they have grouped in a particular element to make it perceive like an animal. So you can create logos, you can create visual identity, or you can create call to action button. Or you can create something like in any recognized which user can able to recognize faster. So how you are able to apply, that is what matters. Guys, so now the law is clear, right? So I wanted you to apply somewhere which you can able to consciously do it, which you can able to consciously convey. Meaning the functionality should be there. Okay, so can we try this? Everybody's okay with this? I think I've given you few examples which can able to help you out. Lot of figure and ground is only coming, but no. Okay, but I think that this examples are clear now, guys. Or should I give more examples? I think this is fine. Only parallelism is okay. Parallelism is not the Gestalt principle. One second, one second. Subway is not a good example, I would say. Yes, guys, so this is enough for you, okay? These are all like mostly law of closure will come. IBU is also very similar to IBM, you can say so all it matters is how you are able to perceive a meaning through a grouping functionality. Okay? Yeah, Many laws, whatever I told many logos, whatever I told you will also come under law of continuity. Law of law of closure. Ok, but the point is it is all conveying a meaning, right? You are able to group certain elements. So all we are talking is about proximal a grouping, right? So then you can able to create a meaning out of it. I told you, even seven laws will also come under one thing. See, if. If you take there is another law called symmetry. Okay? When you take another logo, like let's say certain logos are symmetric in nature also how many of you can see that? Like let's say if I take certain logos, like let's say when you take a symmetric logo, Apple is not symmetric. It is asymmetric. Actually. Yeah, like let us say if your logo is like this example I am giving you, okay? This is not a logo but example, ok? If you take this half, it will exactly be symmetrical. This is also called law of closure. This is also called law of continuity. Because the continuity is there. A triangle is perceived inside and it's also called law of symmetry. Many laws will overlap in certain logos. End of the day, are you conveying your intention of communication is the point? If you're not able to communicate that, then you failed. Many laws will come. I told you, right? Two, three laws will come inside it, sometimes separately. Law will be perceived here, grouping is also there. Like let us say this is all perceived as one group because it's all connected. And here you can see there are certain groupings available. I told you, the examples of the logos there are certain grouping. Here the grouping is there, but I don't know what is the meaning of it. But somebody else can understand. Maybe there is a logo inside it or maybe there is a meaning inside it. So why are we ultimately using this is to create a meaning. If you are able to create that meaning, then we can able to consciously know what we are doing. Ultimately we have to reduce the user's load. Make the user understand what we are trying to say. Okay? So that is the example of it, okay? Like let's say movie posters. Many movie posters. I Would say guys, like let's say credits are grouped in block for readability, right? Have you seen the movie posters? The credits will be separately grouped together. E Commerce Banners Discounts Product images Call to action Buttons are grouped for clarity and impact. So these are all some examples. Now I wanted you guys to do one exercise, okay. So you guys need not have to design a landing page and all. I just wanted to understand from a landing page where you're able to find some grouped elements. I'll give you three to four minutes. Okay, I'll wait. In this call I wanted you guys to take any landing a complex landing page. Okay. Don't take any easy landing page. Or maybe you can take a complex dashboard. I wanted you guys to find at least three law of proximity just grouped together. Maybe it could be a meaningful grouping or maybe it is not a what you call very related but at least some example. You will have to mark and send me the screenshot. Okay, I'm. I'm going to give you time till 6:32, 6:31. Okay. So fill it. Okay, you can use Google, you can use some of your earlier projects also. But I need that exact marking to be shown. Can we try once? If this is clear then we can go for the next law. Fine. Is it cool guys? We can go for the law of symmetry little later after you complete this activity Because I want everybody to implement something and show me the examples. Fine guys. Everybody switch on your camera. Are you guys here or are you guys sleeping? Just confirm me. Yeah, please do it. Please do it. Any doubts is there? Take a complex dashboard. Don't take any easy examples. I wanted you to take a complex dashboard and do it because this will be predominantly applied in those dashboards only to make the user navigation easy or else what happens? If you're taking simple logos, then it's okay. Last week itself we saw a lot of logo examples. Don't take logos. Yes, do find it out. I'll write in. Good. Any doubts is there? You can type out or you can open the mic. We can help you. Yeah, can you send me the screenshots or any examples in my WhatsApp or something? That would be better. Yes guys. Yes. Yes. Time's up. Times up. So yes, I was actually seeing that last class which is law of proximity. Yes, we have taken that. We have not gone. We have not got many examples. Actually in the last session I have just opened that mind map and then I saw that. So it was only. We have discussed a little bit over concepts and mechanism I believe so maybe this session could be little bit giving you some clarity on the examples. Since we discussed lot of case studies and example also. But the point here is we can apply it consciously and take a benefit. That is what I want. So anyway, we are going for the next law now. So let this day be for the law of similarity. Fine, can we go? But I do not see any screenshots coming from the students. Guys, just mark it and send it to me fast. Tagar Bhatmavadi, Jayan Andu, Arvind, Shri Balaji. There is nothing coming. Go ahead. Go ahead. Go ahead fast. Hi Divya, where you on the call? Can you share some snaps or examples? Yes, yes, yes. See guys, if I see some examples only, I'll be able to understand, right? Like let's say are you guys getting the concept or not? Only one example is coming. One second. Okay, that's great. Whatever you are actually marking is perfectly correct. Good. More, more, more. I want other people as well. What about Sri Balaji? What about Aravind? What about Jain? And I just wanted to get at least one example. You guys can show me maybe one marking that would be better. Take complex dashboard. Don't use logos please. It's very fairly direct to put it in a logo and show it to me. That's not what I'm expecting. A very complex UI you can take. Hmm. Guys, I'm really sorry. I can't wait because time is up. I have to cover one law also today. Anyway, if you guys are reacting really fast, I can able to take it forward and go forward. But time is up. Sorry. Okay, we'll go to the law 58. Because today we are covering two laws. You need to understand that. Okay. See guys, it's very simple. Why you have to think too much? Take one dashboard complex. Look at it very closely. Take one screenshot, put it in mark and send it. No, it hardly takes two minutes. So is there any difficulty to do this? Please do ask me. I'll help you. Sri Balaji, is there any difficulty to do this? Or Jaina, is there any difficulty? Don't use Photoshop editing tools here. Just mark it in your WhatsApp and send it to me. That's enough. There is no neatness or have you look at this. Padmavadi's this one last screenshot she sent just a marking. I just have to understand how are you visualizing it. That's it. Okay. Anyway now the time is up. Let's go for the principle of symmetry. Guys. Okay. Now this is a very interesting law. In fact Symmetry is very elementary, very, very basic. Okay, so first of all I'll explain you what is mean by symmetry. Most people know that from the name itself. You can able to understand what is this law. Okay. Symmetry means like let's say in x axis, in Y axis, whether it is symmetric or not. Left hand side, right hand side. Okay. So when you take the four axis, is that particular visual element symmetric? Is that equal? That is the thing. Okay. And you can also sometimes draw asymmetric work. Also that is totally up to you. It's. It's a conscious decision how you wanted to take. Many people are very comfortable with symmetry. Some people are comfortable with asymmetry also like this. What is asymmetry? Asymmetry means it will not look identical, but still it will be a balance. I would say you can have something called a symmetric balance. Asymmetric balance. Okay. Even when you take a symmetry, like let's say this box, when I. When I cut into half, it will be same size. If I cut this box this way, this will also be same size. This is called symmetry. Simple. But when I take the visuals of it, this is not symmetry. See, the picture is somewhat half different here. It's different here. If this picture is also same like this, then it is actually called law of symmetry. When we are seeing about balance, maybe I will talk to you for the asymmetry. Then you will comparatively understand. Let us now only focus on symmetric part so that it becomes clearer for you. So symmetry refers to a balanced arrangement where elements mirror each other along the axis. I already told you, provides a predictability, establishing user trust and creating aesthetic pleasing designs. This is majorly for using ornamental purpose for building your visual aesthetics in a more better way. People use it mostly, but I'm telling you, being a product designer, you guys have to use it functionality also. It's not like you're using very ornamental purpose always. The functionality should also be met every time. Okay, okay guys. Enough, enough. Later you can send. Fine, now we are going for the next law. Send it to me later. Maybe I can able to help you. Balaji, this is. This is not a complex dashboard. And this example is very easy. I needed you to find out very complex example because apply your learning. Okay, do it after this class. But take a very complex dashboard and apply this. This is very simple. For this you took this much time means no. Go to a complex dashboard or any kind of a SAS based system or anything and try to find out at least five different elements in the law of proximity. See, your learning will only be enhanced when you go for that search. So try to do it after class. Now let us come back to the symmetry. Fine. Okay, fine. So it provides the predictability and enhance usability. I mean enhance aesthetic and everything. Ok. But ultimately why the skill matters will first understand this trust and stability. Symmetric layout evokes some reliability and comfort. See many logos, have you seen it will be very primitive in nature, the brand logos. Because they wanted to tell that the trust and stability of our brand is very same. See, you may not know what a visual language talks to people. You may not know what the logo communicates to the people. To that brand. It is actually more than what words speak. That is why the visual identity what people keep for the logo. They spend lakhs of rupees to create that logo. Part like let's say Apple has spent 80 million I think for creating that logo. The branding, the kind of attention to details, what they have created. Of course it's a very simple logo. But Steve Jobs was very, very, very meticulous towards doing that. He was more keen. He doesn't want a simple cheap logo. So you can get nowadays from for 1000, 2000 rupees also some logo done. But the point is the logo is actually communicating the brand value to the people. So when you keep a symmetric kind of an element, people see that stability in that brand. Like let's say if you are a banking system, okay? If you're having this kind of a very simple, primitive, stable logo like a symmetric one, people input a lot of trust into it. The logo talks to the people, the colors talk to the people. The way in which you arrange that element, it will create a different level of trust. It's a life, it's a person to person connect. When you take hospitals, when you take travel, when you take all this safety, trust related brands, you can see mostly their logo will be very symmetrical. Because that will actually create a very good trust in the people. You need to understand this part. Guys, I want everybody to switch on your camera. What happened? Is there any problem? Guys, I have to give you permission for switching on. Please type out in the chat. Just a second. But I think Balaji Anju can able to open. What about others? Just a second. Guys, let me also check. Maybe if Arin, can you also help others to switch on? I'll make you co host. Okay? Sure. Guys, please come forward. Because if I'm seeing you like how are you guys able to understand? That would be a little better for me. Okay? Yeah. Thank you. Thank you. Fine. Because I need to ensure that Whether these concepts are comfortably understood by you or not. Because I'm not seeing any screenshots from the people. Only one or two people are sending. That's why. Okay, yes. Second is ease of use. Predictable arrangement reduces mental effort for the user. Yeah, this is very obvious. We have seen that aesthetic appeal. I told you, it creates a harmony that resides. But this point is more important. Guys, please understand this. The symmetry and asymmetry and elements. Why we are playing is to create the trust and stability. Okay, we'll see many examples, don't worry about it. Let's see the mechanism. Horizontal and vertical symmetry. I told you, right? X axis, Y axis, very simple to understand. So mirroring, like let's say example. You can say Google's homepage balances its logo search bar buttons symmetrically. Okay, maybe this is little complex to understand, guys, Maybe we'll go for something else. Okay, don't worry about this part. I'll come to a very simple example so that you guys can understand radial symmetry. Even radially. How it is very symmetric. Like let's say, have you seen this logo? It would be much interesting if I show you this. Guys, just a second. How do I bring this? Okay, hold on. I'll give you one radial symmetry example. You guys will understand really, really faster. Wait, no, this is not symmetric in nature. Mostly bank people will have. Because, you know, right? Bank is all about trust logo, which reflects law of similarity. A law of symmetry. Sorry, symmetry. Yes. McDonald's. McDonald's is a food brand. But yeah, you can take this Motorola example. Very good. Right? It's like exactly symmetric. When you cut this logo into half here, like, let's say, I'll try to draw one line here. You'll understand better. Okay, like let us say when you cut the half here, this element and this element is all same. Ok, Let us say when you take Airbnb, this element and this element is all same. So this is all about the symmetric logo part, what you are creating. Even when you take this Audi logo, this is the symmetric half on the one hand. And when you take this logo, it is all also symmetric on the other hand. See, sometimes in X axis it will be symmetric, in Y axis it won't be symmetric. That is okay, perfectly symmetric. Sometimes it will be all in the axis. But like let's say in one axis this is symmetry. Airbnb is in one axis. X axis it is symmetry. But in the. In the Y axis it is not. That's okay, no problem. Okay, you can see this Red Bull, the logo. Only the logo Part not the written one. Okay, this bull is exactly the mirror of the other side, right? See this, this what what brands are trying to perceive is the stability and the trust will be really high. When you take this kind of a simple symmetric element. If you take this, like let's say if you take this example, guys, Mercedes Benz logo. I'd also give you a good example because Mercedes is a very favorite logo of me. You can take, see, perfectly symmetric. Even it is symmetric in this angle. Even if it is symmetric in this angle. See like a little radial kind of a symmetry. Can you see this? So this is actually called radial symmetry in 120 degree. It is there so many brands, why are they consciously putting the simple simplistic elements? Is to create that stability and trust with the people. And also it is for recognizability. Like people will know. Okay, this is Mercedes Benz. Ha. This is this logo. So that faster recognition is good. You can see this also is a radial logo. But I am not sure which brand it represents. But yeah, this is a good example. To show you other example, BMW maybe, maybe the inside copter logo is symmetric. You can see this one. Like let's say, like let's say when you take this BMW logo, okay, Only this part is symmetric. The inside, okay, if I have to put you a mark, only the inner circle, guys. See, the blue and blue is same. The white and white is same. When you take the half also it is same. Okay, this part and this part, so many logos. If you can able to decipher it. See, the Honda is not symmetric. Maybe it is symmetric in one axis. Okay, you can see it is only symmetric in X axis. It is not symmetric in Y axis. Okay, so if you look at the UI elements also it will be definitely symmetric. Not a problem. But the point is you will have to look very closely inside each and every screen, each and every section, you will find the hamburger. I can. Sometimes it is very symmetric. Sometimes the UI elements. See, the point is what I am trying to say with this element is you will have to create a functional meaning with this. It is not only aesthetics. You will have to create a functional meaning with this. Let us come out of the logos now. Let us go to something real application. So using this symmetry, what meaning you can able to create for your user? That is what you have to take it from this class. Your application should be towards doing that. Yeah, for understanding this law, you can take the examples of logos, whatever I told you. But the point here is you will have to take it to apply and create a meaningful experience for the people. Okay, so that's the main objective of going forward with this. Just a second. Okay. Yes, many people are sending examples. Arin, too late. Here. What is this here? You send it to me in WhatsApp here. Okay, we'll see that. Not a problem. Now let's come to this example. This class Watch faces are Audi logo. Yeah, I think I've shown you the Audi logo. Okay. Watch faces is symmetry. Like let's say we have the clock and everything. Okay. Using symmetry in branding. It creates a sense of completeness and trust. I already told you that. Okay. Starbucks logo. Symmetrical arrangement reinforces brand identity. In fact, I showed you a lot of logos. Starbucks is a very good another example as well. Okay, Good user preference. Like let's say 82% of the user prefer symmetrical designs for tasks like form filling us research journal. See, I'm telling you guys, while filling the complex form only people will feel the very, very complexity. If you guys can able to make it very simple using this law of proximity and this law of what you call this similar, the symmetric law and proximity. These and all will club together and create a beautiful experience for the people so that they will not feel discomfort. Okay? You have to understand that point. And also symmetric layout improves focus by 45% because you are not making the user distract. You're making the user focus rather than getting distracted. This is a neuro design. Studies have shown this example. I mean show these statistics. What are the neurocyte inside occipital lobe processes symmetrical visual faster and enhance usability. So we have seen the parental lobe. Last time. I don't know in which law we saw people can able to group it very easily and they can able to create a meaning out of it. Right? So they are saying the occipital lobe, I don't know, like chemistry biologically, where is it located but inside our brain? What I can able to tell you is we can able to recognize a pattern and create a meaning very fast. When we are able to create then apply this law and our job as a user, as a designer is to make the user recognize it faster and take an action and move forward. Because the more you are creating confusions in the user interface, people will be distracted. I already told you, 70% of the people are abandoning the user cart or maybe the shopping application. Whatever they are using is because the engagement is not there. Why the engagement is not there? Because these laws are not consciously implemented. That is the whole point. Okay. So this enhances the user to stay Focused and also it enhances the usability part. The Journal of Visual Psychology said that you can take many example like let's say Facebook login page. You can see the balanced input creates a familiarity and trust Facebook. The color of the Facebook is blue. It's all about trust, right? You are giving your personal data, your photo, your information. So social media brands are actually the very first brands which will show you the trust element or else people will not understand it much faster. Netflix homepage Symmetrical arrangement of movie banners enhances navigation. It's a very simple, fair, direct example. Physical product example. Perfect symmetry of its front face creates elegance and simplicity. Have you seen this iPhone? Symmetrically it is what you call in one axis it is symmetric. In two axis it is not symmetric. BMW dashboard Symmetrical layout of instrument clusters. Yeah, these are all like typical examples. MasterCard logo overlapping symmetrical circles create a balance and professionalism. But the point is if you take the gradients and other things, maybe that is not symmetric. Shape wise it is symmetric. That's super. That's good. But gradient wise they have a different different colors, they have a different different patterns. So if you take symmetry in all aspect, sometimes centered logo will not fit in. Okay. Only the shape will be symmetric. I told you, right? The BMW is 1/2 symmetric. But when you take the other half, it's not symmetric. Okay, Colabes it is symmetric. But when you take letter and font it is not symmetric. So but the McDonald's yum is symmetric because it is both way same. Okay, so you need to understand this target logo concentric circle emphasizes simplicity and trust. I don't know this brand guys, maybe you can able to try it out. Okay, I showed you whatever example I could magazine covers. When you take graphic design, symmetric placement of text around the central image draws attention. See, maybe in there is another class which I planned in the future which is called Schnelcut golden ratio. Maybe I'll teach about how people can able to get attracted to a particular spatial arrangement inside your graphics. Okay, you guys can able to get it. And in restaurant menus, when you take balanced grouping of items ensures clarity and ease of selection. Like let's say when you're having a lot of course menus in your like let's say hotel list of items, then you can use this consciously. Let's say if you're designing a landing page for those restaurants or. Or maybe if you're designing any kind of hotels or something like lot of services are there for that product. This loss can be consciously used. Okay, so the activity guys, let's come for this. This is the most important design a mobile app login page using the horizontal and vertical symmetry element. Guys, I wanted you to do that. The goal is balance visual appealing layout. Okay. You need to choose certain colors or maybe you can choose any element but the symmetry should be felt. Okay, I'll give you five minutes. Guys. Take one particular mobile application first and try to create one symmetry which is comfortable for you. Maybe you can create like a login page or maybe you can create any kind of like let's say people will input their name and email id. That's okay, no problem. Maybe people can able to give their personal data. You take anything, no problem. But I want a law of symmetry to be applied consciously. Can you guys try it out and show me now? I'll give you five more minutes till 6:56. I want everybody to take action. It's not like we are just going, going, learning, learning, learning. You will have to take action. Okay. No excuse. Just do it and don't overthinking. Just go to Google, find out which is comfortable for you. Apply this law of symmetry and show me. Okay. If you can build it also it is super good. But people who are beginners, it's okay. First try to mark in the examples of what online presence is giving you. Then you get you can able to recreate it on your own. But some people are really super fast. Like people like Aravind, they can able to build it fast also. That's okay. You guys can try to put a small element and try to build it. Okay. Yeah. It. Hello, should we mark our create? You can mark it first. If you are comfortable you can build it. No problem. Okay. It's up to you because there are a lot of new people also like they are hearing probably for the first time what is law of symmetry. So it's up to you if you can show me a builder screen that's also great. Like let's say you can take any one element and you can also show that I tried to create a meaning by using this law of symmetry. Now people can able to understand and fill this data. That's also functionally great work. Yes. Two more minutes. Yes. Divya, I can see your example. That's great. Okay. This is for what you're sending it for this example or the previous one. I am not sure whether it is symmetry or I think it is for law of proximity you are sending. Proximity is fine. It's. It's a correct example. But symmetry. Can you do it now? Yeah. Last two minutes. Time Is gone up. Balaji. SRI Balaji. What is this example? No, this is not exactly. I'm not able to understand like you're marked somewhere. Actually the title here the law of symptoms presence. No, this is not a correct example and understanding. Wait, I will give you an example in the screen. Whatever you took. Okay, There is no big law of similarity here. But I'll take you an example. Just guys follow my screen. Okay, I'm just taking example of Balaji. Whatever he has sent, I'm just going to mark on top of it. Okay, just listen to me. See when I have to consciously take various law of proximity here. I mean law of symmetry here. See you can take maybe the symbols are symmetric in nature. That's one example I would say. Okay, grouping is happening. There is no doubt about it. Symmetric. How we can able to create symmetric? Maybe for each line item you can say it is symmetric. Balaji, this is not a very strong example. You can take another screen here there is no what you call. There is no strong example to explain that. Maybe in a line you can say it is all symmetric. Like let us say in X axis it is all symmetric in nature. That is ok, but Y axis wise it is not symmetric. See, this one is having a different spacing. This one is having a different spacing, right? There is an empty space here which avoids which. Which tells clearly that this is not symmetric in nature. Ok, maybe these two are little bit looking symmetric. But I mean I would not say it is a very strong example. See, recently Divya shared one example that's actually a. No, that's also not very strong. That is for grouping. That's different. Ok, but you can take another example. Balaji, keep trying. See initially you will not get it. Take another example and try to draw it. Okay, maybe when you take very closely what I can say? Can you see this window here? Window is symmetric. Man, this is perfect example. First X axis symmetric. Y axis also symmetric. This window is symmetric and these three windows are symmetric. For these three windows perfect example. Are you understanding or not? Okay, see architectural and this windows and doors we can able to really see this symmetric really fast. But in UI you will have to consciously find it or else you will not get it. But anyway it's good that you're making mistake because you are learning. Okay, thank you. Another people have sent me guys last one more minute. Logo is class is going to complete. Perfect. Excellent, Excellent, excellent. Correct example. Correct. Correct. But I told you your logo and all. It's okay. Try to find it in some complex ui. That will be better. Okay. Maybe if you're a fresher that's okay. Great, great. The example is correct. But send it to all. No. Why are you sending it to me? Okay. Yes. Guys, before end of the day try to send me five screenshots of law of symmetry as well as law of the first one what we saw which is proximity. Okay so with that I can understand because the more examples you mark it down you'll be able to consciously get it okay. You don't have to recreate sometimes if it's possible you create or just show me the marking that would be more than enough for me to understand that you guys are learning the skill particularly okay. And it's not about that you'll have to consciously go and implement it. Fine. All the best guys have a great day and we'll see you tomorrow with another interesting topic because tomorrow is hackathon. We're going to combine the class as well and Wednesday we'll.