Day 52- Law of Proximity- 100 Days 100 Skill Booster Sessions

That's great. So we are going live now and also we are starting the recording. Just a second. Welcome guys. Very good morning to this skill booster session. We are in the day 52 in fact, this week it's all about aesthetics. Okay? So Monday we started with a different aesthetics and going forward, what happened is yesterday we did personal branding. So that was the main objective of the session. And, and I think it was very aligned to the hackathon also. Right? So today we are going to continue back again. I'm going to teach you one very, very important aesthetic principle and this will set you apart, how you can become a visually stunning designer. Okay? So this is very important and I request you to observe it very carefully. See, Monday itself, I told you this, this seven days which I'm going to teach you in this YouTube live. This is going to be a start. Your consciousness is getting started now, okay? The way in which you visualize the skill, it will be very fun and it will be very superb. But only if it is practiced and only if you internalize why it is important and what difference it is making in the final product. This will only make a difference in your work or else it will just remain as a theory. Okay? So with this caution, I am taking you forward because the reason being these all will look very easy and simple, okay? But when you go and consciously apply, you will not be able to do it. You will forget it many times. You will forget it until these laws are going inside you. Like let's say until these laws are getting internally to become a part of you, become a part of the DNA, what you are designing in every single screens, every single digital product, physical product, this will not become a part of you until then. So you will have to consciously reinvent yourself and apply the strategies. Okay, then and only it will make a lot of sense. Okay, so let me share my screen. Just a second, just a second, Let me share my screen and. Yeah, give us a second. So that we will be posting this in our channels as well. Join. Yep, just a second. What else, what else, what else? Just a second, guys. Okay, fine. Yes, we can start. So let me share my screen. So today what we're going to see is actually called law of proximity. Okay? So you might have heard about this proximity, you might have seen some applications of it, but consciously you might have not learned it in this way, I'm sure about it. Okay? So that is why you need to be a little careful about it while you are applying it, okay? Don't treat it like a theory subject and Forget it. After few days. That's not what I want. That's not why we are waking up at this time and learning the subject. Okay? And this is a complete basics of your aesthetics. Okay? See no graphic design institutes really teach this skill very, very particularly, okay? They just tell you make the screens beautiful. Okay? Okay. No product designer teaches you that because this is not very important directly for product design, okay? This is for making that product visually, aesthetically applicable. Like let's say simple. I'll give you one small example, okay? How many of you can see this dapa, this box, okay? This is a. This is some headphones, okay? Apple headphones. So the way in which these people have kept the branding here, okay? The name of the product here, a simple representation. And when you take this side, a very simple description. And when you take this side. So there is a reason why certain things are kept in this order. There is a reason why certain things are kept this small. There is a reason why certain things are clubbed together and certain things are ungrouped together, ungrouped differently. So when you go and work on any product like let's say physical or digital or anything, this principle is going to be ultimately important. In fact, the figuring ground, what I taught you, it's the best. I would say mastering that is very, very equally important to proximity principle. Okay, fine, so let us talk about this grouping by proximity in design. This is the overall name which we can give. But let me give you a small explanation towards it. Okay? See, proximity principle is a core concept. I told you, it's a law of gestalt psychology. Okay? We are, what we are seeing in this entire week till Sunday is going to be the gestalt law of psychology. So who is gestalt? Maybe you guys might be thinking, who is this guy? What is he doing? So, so he's actually a psychologist. So what this guy has did is he understood why people like certain products. This guy came up with why for our eyes, certain products are very, very beautiful. Certain products are not beautiful or certain products looks very ugly. Certain products looks very. I don't like, right? People will say certain mobile app when you use like I don't like, I didn't like these colors. I didn't like this. It looks very local, cheap. Like certain products you used like wow, this is amazing here. Yeah, you build that trust or maybe you build that field. So our eyes and our visuals and our brain processing and then our vibration, the experience of each and every product touches your different, different senses, okay? So we form the perception based on that. So Gestalt law of psychology. What this guy has did is he understood how people are reacting to different, different situations. When a components, when objects is placed together, how people are feeling when the components are placed. Figure and ground backward we saw in the day one, right? So how people are feeling, we gone very deep into figure and ground. We gave some examples and case studies as well. I think people have also did that. Guys, I would request you to switch on your camera if you're there in the zoom call. If you're there in the live call, leave it. No problem. Okay. Just be interactive so that I can also go. Okay, no problem. Yeah. So what happens is, so this guy understood what are the common patterns which people are liking certain products. Why not they are liking certain products. Okay. So he went into this research. What he did is he tried to come up with a concept. He tried to come up with a principle. This is what is making the people say this. Okay? He formulated seven laws totally. That's what we are going to see in this week. The first law, what he found is figure and brown which we saw in the day 50. Okay, if you have not watched, go and watch it in our YouTube live session before that live becomes unlisted. Okay? We are, we are soon removing all the contents. So the reason for the YouTube live is to come live and take an advantage. Okay? So it may disappear soon. So go and watch it at whatever skill you want really fast. Okay, the second law, what I am going to tell you is proximity. So this guy is saying when objects are grouped or placed together, it is perceived by very differently. You can create a meaning out of it. You can create a functionality out of it. Ok, so that is the point he is saying. So in design, proximity establishes a visual relationship and hierarchy. What is hierarchy in visual relationship? Like let us say in this dapa. What? Whatever I could able to show you. Like let's say this is a heading. Okay? For me, the hierarchy is one here. Or maybe the hierarchy is a picture here. That's the hierarchy one. This is hierarchy two. The subheading is hierarchy three. So when you keep this like this, you establish a subconscious hierarchy for the people even without consciously telling them, hey, you look at this first. Hey, you look at the second. Hey, you look at this third. You're not going to consciously tell a user while they're viewing this product, right? But you are designing in a way that users are automatically guided. So this is all about visual hierarchy. So it guides the users focus on making more information accessible, essential for structuring your content. When you're having a lot of content intuitive navigation inside your digital products, it will reduce your cognitive load of the user. What happens if they reduce the cognitive load? They will tend to see the products very easily. That's the whole objective. Okay, I'll give you an example. Can you see this picture? Look at this. This is a group of colors which has been kept. Okay, but there is an orange, there is a yellow, there is another orange here. So it's been little mixed, right? Perceived as one group of element. But this is all perceived as a separate group of element. Why? Because there is only one color, there is only one shape, there is only one spacing. So we have already grouped it. It's not like I'm not creating a separate boundary and then I'm telling this is a separated group. I'm just visually making the color, same spacing, same. That's it. It's been perceived as a group. Okay, that's it. To be very honest, this is what is proximity. But the way in which you consciously apply it's going to be very fun. It's going to be very, very different. Okay, so you can go and read about this in the online also a lot. But I would say just observe the basics behind it, why it has been important. Okay, you can see, see right now it looks very clumsy, right? But this has been perceived as a group. This is called law of proximity. Okay, this is called law of proximity. And next if you go and see this one, like let's say in Gestroll principles there are a lot of concepts available. One could be proximity, another is closure. See, this box is constantly not closed. Means consciously not closed. But it is been given some spaces but still our eyes will perceive this as a box. Are you guys getting it what I am saying? So this is actually called law of closure which we will see some other day. But the reason why I am bringing four of these things together is do not get confused, ok? Common region, like let us say in the same box, in the same color, in the same order it's been put, okay, that's called common region similarity. Orange, blue, orange, blue. Law of similarity. Don't get confused. Proximity is something very different. Okay, Similarity is different, Closure is different. Common region is different. See, theory wise it will all look very easy, simple and all these things. Ok, again one more example to explain you Law of similarity. You can take this one. See this is not called law of proximity. This is not called law of proximity. But this is law of proximity. A certain order and arrangement which has Been placed and grouped together will perceive a different meaning. Okay, yes. Now let's come to the practicality of it. This is most important. So why the skill matters? First of all, when you group a content like that, or when you group a visual poster like that, or when you group your products interface like, let's say even if you're designing this remote interface, or even if you're designing like let's say your mouse interface, anything you need to understand this. Organized principles, hierarchy and organization. Okay? So it enhances your visual organization, proximity help designers to create a clean and structured user interface. Have you seen very decluttered user interfaces? You may be moving some buttons here and there, you may be moving some graphics here and there. And you will still figure out that interface is still not looking good. Why? Because they have not applied consciously. This proximity, figure and ground and all. You need to be very conscious towards it. That's why I'm telling you this is the start of your consciousness in one class. You will not become a master. And I'm sure you have to practice it again and again. You have to try to move and you have to apply the law of proximity consciously. And then you will become a master of it. Okay? And grouped elements make content look organized and approachable. It improves your navigation, of course, why we are doing it, it makes your focus very clear. It enhances very, very complex screen into a simple ui. Okay, People are getting lost. Like let's say if you're designing a dashboard, if you're designing some kind of a very complex data systems for your user, where your user is going to be sitting in, in a cockpit. Okay, airport. In, in a. Sorry, in. In a flight. Let's say if you're, if you're operating a ship. So all these places are very complex. Let's say nuclear power plant. These places are very, very highly complex. User interface. Of course, designers are designing service products and user interfaces for these people to make it look visually easy. Because see, even in a simple mobile interface, we are not able to sometimes take the right one, right? We are clicking the wrong button. Sometimes the payment fails. Sometimes some error happens, right? That is common for us. Imagine in a nuclear power plant where there are hundreds of buttons available. If that is not simplified. What happens if any mistake happens? If they press the wrong button inside the control, what happens? The entire plant bursts. What happens? 500 kilometers, people are gone. So user interface is very, very important at that. Use cases, pilot aircraft, these are like. You can read a book called Design of everyday Things. Don Norman has really talked about this very complex system. And that's why he came up with interaction principles. Okay, but it is Gestalt law of psychology. This principles will make you enable apply this laws very easily. It's a very technical subject. Guys, These concepts will make you enable the interaction very easily for the user. So that your users are very happy to use it. No confusion, error free. Superb. They clearly know this is for this purpose. Are you guys getting it or not? Guys, I wanted to see your faces and are you guys getting it or not? So that is the kind of feedback which I will be getting. Then I can able to proceed further and also if any doubts is there, I can able to understand and clarify. Or else it becomes one more theory. No, I don't want that. So pay close attention here and show your interest. Reduce cognitive load that we have already seen. Essential for responsive design. Very, very important. See, proximity maintains a very very good consistency in website, in tablet, in mobile app. And it provides the same hierarchy across all the devices. Or else what happens, you get confused whether am I using the same product or not. If you use their website, if you use their mobile app, if you use their tablet, it becomes little confusing, right for you. So if all of these things are same available, it becomes so easy. Okay, why it is important? See, proximity affects perceived usability by about 30% as users view visually grouped items as related. Adobe UX trend states that 73% of the user prefers visually organized interfaces with intuitive grouping. See guys, all of the people are already preferring that. That means aesthetic is a part of everything. You need to understand that people look for that. And proximity has been perceived usability about 30%. That's a very huge number. Actually it's by Adobe UX Tense. The reason being these are all like mandatory required. Guys, many UX designers and UI designers don't know this. They just randomly putting some buttons here and there. You will not, you will not be a great designer if you don't. You don't understand these principles. Okay? This is a skill which you have to consciously implement and do it 68 percentage faster task completion rate. Of course, what happens if you clearly organize a visual like that? People would complete the work very, very fast. Right? So important. What are the neuroscience backing of it? Our brains are wired to recognize pattern. Guys. Okay, see, let's do an activity before we get into the. Before we get into the real reality. Let's get into an activity. Okay, guys, please switch on your camera. I wanted you to open in your laptop. I want you to open in your laptop just a Second. Yeah, open your laptop guys. I want you to find out in the Internet or maybe in the nearest product. Where do you think you have seen this law of proximity? In any interfaces. Whatever you feel is. What you call whatever you feel is. Okay, I just need one case. One case. I just need to take a picture and share your screen and. Or maybe you can put it in the zoom chat. One picture. I'll give you three minutes time. Okay. Now the time is 6:17 till 6:20. I'll be watching you. Okay, three minutes time. Find out one example. See practically do it. Whoever is watching in the YouTube live and other people who are doing it, please do make it. Yep. Yes, do it guys. No problem. See you will get only practice. See go to online. Just type out law of proximity. Try to pick a favorite example of whichever you are perceiving. Okay. See, don't show the dots. Whatever I showed you again. Find out something very practically implementable. Or maybe in your user interface, in your mobile app you can show. You can open your mobile and you can show that you can take a screenshot and share it to me. Maybe in your WhatsApp interface you can see that maybe in your HDFC mobile app what you are using you could see some law of proximity. Or maybe in the nearest product, whatever you have, you might have this. But I just need a practical example of it. Guys, do it fast. Do it fast. Another two more minutes is there do can you share it in the chat? Guys, see before I show you a case study first you should understand what is this point. Right? So I just want you to just see what is available in front of you. How are you sensitizing? Even if you're not able to sensitize it, that is okay. Just tell me if you are able to do it or not. Not a problem because we have to move to the next bit. Yes. Subhash, were you able to do it? Pish Anju Bhatmavati Jain and that's great. So punish is able to do it. But I have a doubt it's correct or not. Ah, tell me. I am opening your picture. Wait, no. This is not called proximity. Whatever you send, this is not called proximity. See proximity is grouping. Okay, good that you are making the mistake Punish. Because you will know the right thing. What is there? Okay, I mean is this picture your doubt or you have something else doubt. So what? What the understanding you have actually put a column like let's say I'll show you your example what you took. Okay, hold on. See guys, what this is what punish has shared. Okay, this chessboard law of proximity is actually a grouping. See here nothing is grouping, right? It's not grouped here. It's all placed in a different, different what you call alternate arrangement. The patterns are similar. But like let us say if this blacks are grouped together in one place here, let us assume that. Okay, maybe I can able to a little bit annotate and show you why it is very important. Okay, just give me a second. Okay, like let us say if this blacks are being arranged in one particular format and this white colors are arranged in a particular format, then we can call it as a proximity. See, what is the meaning of proximity? Google, just google it. Now what is mean by proximity? Proximal point they call right? Like grouped together and that is called a proximal point. So the name itself is very simple law of proximity. So when we subconsciously make the user perceive that, hey, this is for this usage. Like let us say if you take any kind of an interaction, say if you go to your mobile app. Let us say if you go to this WhatsApp. Okay, I will take this WhatsApp. There is a three dots available here. Can you guys open your WhatsApp and see what does that mean? See in that three dots people are perceiving that as like let's say one dot pattern is repeated again. So that means there could be multiple bunch of features available inside. See, it's intuitively understood by the people. Nobody is consciously putting any instruction there. Okay, but people can able to perceive it because of the earlier experiences. Whatever I had. Next button is camera. That's a fairly direct button. One option, if you click it will go to camera. Next is scan button scan. But three dots will make you perceive a different meaning, right? Have you seen hamburger icon? Three lines. It means that it's a collection of multiple bunch of items. Okay, I'll show you another example. Wait, I'll show you another example. It's a very simple interface examples I'm showing you. Okay, see, look at here, look at here. This is our level up page. Okay, if you, if you go to our learning management portal, there is an option here which is like a group of icons, right? Can you see a pattern here? All these icons are different. This icons is different. So this makes me feel that there is more here. See, even without clicking it, I know that there is something more here. The moment if I click it, there will be multiple options. Earlier there used to be multiple options, but now there is one option called scheduler. So this means that a law of proximity communicates that there is a grouping available here. Please come and interact. Okay. See, we don't have the flexibility to write these sentences to the user. We will have to communicate it visually. And also we should be making appealing. It's not like one dot is arranged here. One dot is arranged here. And it's randomly placed. It should be in a particular order. Then only it will be perceived like a group. Okay, And I'll show you more examples. Guys, just wait. It's. It's good that you guys are getting confused first. That's very important. Yeah, this example is right, but partially right. I would say very. Not a very strong example. But it's okay. Jayantini shared one picture. What you're trying to say, Jayanandani in this I'm not able to understand. I can see your screenshot. But what does it mean? What does that mean here in this picture? The Internet interconnectivity. Those are grouped under single topics. That's great. That's great. Superb. This is good. But try to find out some kind of very strong. See whatever you have shared. It's okay. 50% strong example. But make it 100% subhash. This example is not exactly correct. This is law. It is not law of proximity because it's been grouped. But the colors are different. Can you see? If. Let's say the top rings are blue in color. If the bottom rings are green in color, then that is called law of proximity. Okay. Olympic ring is a different. Different color. Of course, that's a part of it. Right? So actually this is a very different law. We are coming in the day five. Okay, Let us keep this example there. But this is not exactly. See, this is what I'm telling you. It may seem very easy. But when you really take and consciously apply, you will get hella lot of doubts. I told you in the start of the class itself, right? Because when I started reading about this gestalt law, it was very confusing when I started applying it. So. But it may seem very easy. Wait for it. I'll explain you some more case studies. You will get it. Okay. Just follow the class. So our minds are wired to recognize a pattern and relationship. And proximity significantly aids the process when elements are grouped closely. Look at this word. Have you found out example which is grouply closed grouped closely? We have not it. Right. It's been grouply. I mean grouped closely. But the colors are different, the spacing is different. Or maybe the examples are little, not very strong. So we need to get this. Our brains automatically perceive them as related. You have to trick your brain. That is the whole objective of doing this, being a designer. This is due to a perceptual grouping. The brain processes items as a whole, not individual parts. How many of you don't know this? Our brain always processes information as a whole only. It will not mean if you calculate it with small, small parts, you will forget everything. If you take it as a group, if I explain you a concept with a complete package of information, you will understand it. That is a neuroscience behind our brains. If you understand this for your user, your way in which you design your interface and experience will be completely different. Whatever you do, people like it. Whatever you touch in your screen, people are going to love it. That is what is very important, being a designer. Okay, so effective use of proximity reduces the cognitive load and and increases memory retention. Your product will not be forgotten by the people. Very, very simple. End of the day, that's what we want. Now let's go into the concept of it. See, what is this proximity in design? It shows a suggestion of a relation. It suggests a relationship. While greater distance implies separation. Like let's say if I put the same dot here. Like let's say Play store app, Swiggy app. Okay, okay, that's fine. Here, let's come to that example. Just wait, hold on. Okay, like let's say if I'm taking you an example of ticker. Okay, like let's say I'll take this example. Okay, I am grouping this together and now what I am doing is imagine. So what will you subconsciously perceive when you see like this? What are the. What are the. What are the decision you will take when you do it? See, the colors are same, the patterns are same. The. The spacing is also little bit same. But the arrangement is little different here. So what your brain will communicate is, hey, there is something happening here. There is nothing happening here. There is some group of information which is available here for me. Okay, but here I am not able to understand it. What is happening here? Or maybe some instruction needs to be here, or some text needs to be put here, then people will possibly understand it. Are you guys getting this example or not? I am just taking one small example. Because our brain processes like this. That is why in an interface hierarchy, visual organization and grouping into elements is damn important. If you confuse your user, the user will not follow what you are trying to say. Fine, are you guys getting what I am trying to say? Just type out of the chat. Yes, if you are able to get it. Yes, yes, yes. What about others? What about others? Lot of people are there in this call? Yes. Yes. Yes. Yes. Yes. Yes. Kalai. Yes. Punish. Yes. Subash. Yes. What about others? What about others? What about Anju? What about Padmavati? What about other people? Yes, yes, yes. So yes. The point is you need to get that relationship through your patterns. What you're suggesting? Proximity refers to spacing between elements in design. So that's fine. So what are the key applications in UI UX design? Particularly with UI UX designers? Use space to define distinct section of the content. There is something called content blocks you can use for that. There is something called navigation menu. Right? Practical application for UI UX designers. I'm saying guys, for physical designers also it is very important. But this is more more important for UI UX designers because every day we are interacting with a lot of digital products compared to five years before. Now it's happening like that, right? So group similar navigation items together. For navigation menu forms, place labels close to input fields for readability. Very, very important. If you are creating any kind of forms or survey links for the people to fill, make sure you place the labels close to input field for more readability. Okay, so many places you can apply guys, but I am just taking you few three examples what you can able to do. So what are the techniques for it? Use padding. How many of you know padding? How many of you do not know what is mean by padding? Create visual hierarchy. See, padding is all about creating a consistent spacing. Like let us say there is a space between this. There is a space between this line and the text, right? This is called padding. Like let us say it could be five. Five is a very, very optimal padding which we can keep for any element. If you go beyond five it is good. But if you keep less than five, it is not recommended because the text will go on dash here. All of the interfaces, whatever you have, there is something called padding. You can increase. You can decrease in the right hand side the interface will be available. You can able to very easily do it. Consistent padding and margin values control spacing effectively. You can create law of proximity using that as well. Second, you can create visual hierarchy. The groups related items closely while spacing out unrelated sections. I told you, right? In this you can group whatever is required here. Okay, maybe it got moved a little bit, but yeah, since I'm changing the screen it is moving, but ideally it will not. Okay, yeah. So when you perceive it like this, like let's say group related items closely while spacing out the unrelated sections. Like let's say if I'm telling, if I'm putting an option like let's say if I have to. Something is happening here. Wait, wait, wait, wait, wait, wait, wait. Okay, fine. Now how does it feel? It feels like a different element, right? This phi could be belonging to one section. This is a very different section. Just by changing the space a little, a subtle difference, right? You don't have to even consciously do this. Just small itself is very different. See, look. Now people will perceive it differently. Oh, this is one group. Ah, this is another group. See, you are communicating a different meaning just by changing the size. Okay? Or by just changing the color or by just changing the space. See, you can do anything. This is the mechanics behind it. You can use padding, you can use margins, you can use visual hierarchy. You can leverage the alignment. You can align the group items among the common axis, horizontal, vertical. For easier scanning, you can put it in a vertical order, horizontal order. See, proximity could be achieved in any ways. This is the ways. When you go and sit in a user interface, you will learn it. Okay? Leave white space for clarity. Too much proximity can create clutter. That is very important. You need to understand this fact as well. Okay? What are the common mistakes? See, ignoring proximity in mobile layouts, that are the most, most mistakes many people do. See, when you're designing some interfaces, people never understand this kind of principles. Responsive design should retain intended groups who grouping across devices. Because when you are using the same application in tablet, in mobile app, in web app, it should all have that same consistency. Okay? Overloading elements. This is very common mistake which every designers do. Okay? Too little space between little visual elements and people will not perceive it like law proximity. People will communicate differently. They'll be like, oh no, I don't understand anything. I'm not able to. Hey, I'm not able to do the financial transaction in this app. I'm. I don't understand. I'm little scared, maybe I'll do a mistake. You try to help me. Some of the parents ask you, right? They don't know it because they use the interface. The designer who has designed it has not successfully understood these principles. If they understood it properly, then intuitively you will be guided how to go for the next steps. Okay? That is very, very important. Inconsistent spacing, uneven spacing. This disrupts the whole thing. So these are all the mechanics which is available guys, which you can able to consciously implement it. Let's, let's see some case study. Okay? Google Search bar. How many of you have seen Google Search Bar? Google uses proximity on its results page, grouping titles, descriptions and URLs closely, it adds separately for clarity. How many of you have observed it? How many of you would like to see it now? Okay, see, see, now I am showing you the screen. Sorry, what's happening here? Okay, look at this. Can you see a very, very subtle proximity here? Look at it very carefully. Guys, look, there is a heading here. Okay, There is a small text here. There is a icon here. There is a icon here. There is an icon here. There is an icon here. There is a small text, small text, small text. Hyperlink, hyperlink, hyperlink, hyperlink. So what happens? People will subconsciously feel this is a grouping. This is a separate group. This is a separate grouping, right? You don't have to come in, see how will you communicate a complex information? Of course, Google is a very, very complex application, but they made it very simple. See, they have grouped this separately. This is a law. This is one picture. Earlier, Google used to be very different. Now they have changed it. Okay? And they have put the commonly asked question as one group. So people will perceive it like a group. And here people are using the suggested examples, okay, images and then this group. See how you decide your user wants to go and navigate. You can do that in your interfaces or maybe in the physical product. See, even if you are designing this remote, you can still group it. See, in this thing, if you look closely, there is a round icon here. This is for controlling the, what you call the light intensity and the change of colors. Like let us say if I have to use this. So this reduces the light intensity and this increases the light intensity. Same. This is only for adjusting the depth of what you call volume for different function. And the bottom is all about changing the color. Let us say if I want to change it to yellow, I, I can able to change. So this is in the bottom two color contrast. See, for me, it makes me feel comfortable if I'm seeing this interface like this. What happens if the button is in the top, another button is on bottom. We will not perceive it every time. We'll have to recollect from our memory and consciously use it. I will lose the interest of using this product. Very simple. Okay, so this is very, very important, guys. When you are designing a product like that and you can use this result, this layout improves accessibility. Very, very important. Making search results very easily distinguishable. Trello. Have you used Trello productivity app? This? This uses proximity to group cards into columns by list, helping users visually separate the categories. This is a very, very interesting app, guys, because Trello is a very complex app. If you try to understand this, you will be very easily guided inside that or else you will be getting confused. Okay? The result, this grouping approach enhances task organization and product management efficiency. When I do not have Trello in my laptop, but I can able to show you later. Not a problem. Okay? It takes little time. Like let us say, if I have to give you some examples in logo. How many of you have seen FedEx logo? I am not sure. FedEx E&X form an arrow through negative space. That is called. What you call, that is called figure and ground. But proximity is something close proximity between. Let us emphasize continuity and flow. See, this is a very, very subtle example. Let's not go very deeply, guys. Let's first understand the basic shapes and proximity in that FedEx logo. If you look at it very closely, the spacing and everything, the color and everything, the arrow and everything, what they have created, it will all show a continuity. See, you can do anything using this law of continuity. I mean, law of proximity. You can communicate whatever you want. But first you need to be clear on application of this. Okay? That is very important. Close proximity between letters, emphasis, continuity and flow. And this reinforces the brand focus on fast and reliable service. Because FedEx is a courier, they have to communicate. It's a fast continuity. Reliable continuity means reliable, right? The services needs to be really fast. Unilever logo composed of icon representing Unilever's diverse products like food and beauty. See, they have created deliberately different, different icons. Have you seen Unilever's logo? If you look at Unilever's logo, see, this has been grouped like a U. Can you see how many of you are understanding law of proximity now? It's been grouped like you. Okay, See, this has been grouped like you. Many products are inside. Like, let's say they have this coconut oil, they have this shampoo, they have this toothbrush. Everything they have communicated. This is one group. So people will see this U as a proximity one group. Okay? So understand this. And also icons are close enough to form a U. But distinctively to show product variety, represent the brand, versatility. Simple. I told you this example, NBC. How many of you have seen this logo? A peacock logo? I think I showed you this in the. In the last sessions as well. Okay? Like, let's say the NBC logo. Okay, I think I've typed it wrong. NBC logo. Yes. Look at this. What's happening? Yeah. So NBC's logo is something like here, right? So what does this mean? Each feather is spaced to appear unified. As a peacock, if the spacing is different, what will happen? The communication becomes very different. Right? You will not group it like an animal, you will group it like something else. So the grouping becomes little different. And when you communicate the U, like let's say the peacock symbol everything, it matters a lot and symbolizes the NBC's diversity and range of programming. See how the proximity is being communicated. For logo design, I am taking an example of logo. Okay, you can take Adidas. The three parallel bars forms a mountain shape in logo. Clear spacing creates a cohesive mountain shape signifies a challenge and goals athletes achieve. Because what happens if you are athlete? What happens guys? Not able to see Aridas logo. Okay, yeah, this is a very good example. Law of proximity. Please understand, guys. See figure and ground is very different. Don't get confused with that. Okay? I wanted to stress upon that case studies in digital product design. I told you Spotify interface. I think we have discussed in the last week also. But it controls the play, pause, skip or grouped near the song title. Have you seen in your Spotify app? Open your Spotify app, you will see that it's grouped near the song title and album cover. And what are the application grouping? Place control close to song. Reduces the need for the users to look around many applications. Even in the Apple podcast, even in the Spotify, even in the Apple music. Everything you can able to see this has been grouped one. Because if you keep the volume button up, if you keep the control button down, if you keep the playlist button left and right side, what is the purpose? See, we've been seeing musical apps for a lot of time, so we are feeling it easy. But imagine the guy who has designed it for the first time. Similarly, you will be designing some new products. You need to understand all these things. Okay? It enhances the usability. And you can take iOS example. You can take example of like iOS group notification from the same icon into expandable card. I can keep on explaining you guys, not a problem. But here is the point. I'll show you the very very good example. Okay. Facebook news feed. How many of you have seen this News feed like comment share are all grouped in the same thing. It's all law of proximity. People will perceive it. This is for only like sharing and commenting. Okay. And application. It ensures the access to interaction tools keeping users engaged with the content. What happens if people are seeing this post? Either they like, either they'll comment, either they'll share, right? If I keep like button at the top share in the bottom, they will not understand anything. Okay, so this is what is actually called grouping. Amazon product page. Product information like title, price is grouped together. See guys, go and visualize. These are all like very simple example. I don't have to even show you. I don't have to consciously show you anything. You can take LinkedIn, okay. Parallelly when you go for your home, you can see like let's say some. Some people have posted this information. Like comment, repost, send, group together with the equal spacing with the equal. What you call icons, shape and everything. Right? So that's what I think. Like let's say when you take this particular information, this is. This is a very different ad. You can able to differentiate it, right? They have created a corrosal effect. They have created something else and the ad will be a little different. And this is subhash. Like let's say he has posted an information. Good. So the point here is different meaning communicates a different thing. See, this is a. This is a normal post when some guy has typed it. But whatever others are typing it will appear here. Whatever others are replying, it will go little intended intendation, right? Like let us say Akhil has replied for this. This is called a grouping. So each and everything could be broken down in the interface. Like how law of proximity is applied. You need to understand this thing or else you will not be able to consciously deliver it. Okay, yeah, I can able to go on explaining you, but that's the point. Airbnb search. You can go and search out guys, each property listing includes image description and price within card layout. You can go to Swiggy product app. You can go to any Zomato app or anything. So this will be similarly available. Okay, if you take an example of physical product, you can take remote control, I already told you that. And a car dashboard. Excellent example. If you want to see like let's say the air conditioning and radio and everything is grouped so that you can able to quickly reach see air conditioning. One group Tak tak tak Hot tak tak tak Cold FM plus frequency goes up. Low frequency goes up, volume goes up, goes down. If I keep plus button here, if I keep minus button there, what people will do? Very, very simple. Let's see. These are all like very very subtle applications of it. Kitchen applications. If you take this like let's say it, controls for the related functions are placed near for each of the appliances panels. Like let's say when you take stove. Have you seen the stove? Each of the things, the stove and the burner, it will be grouped together so that they will know this is the respective stove burner. Next. St Next. If I keep one burner here and one button here, you will be sometimes confused which burner to press for which stove. Have you. Have you observed it practically? So that's actually the reality. Okay? And if you take any visual design example, Instagram Stories, Netflix interface, Slack interface, everything is available, guys. It's up to you to find out the example. Okay, now let's come to the real time activity. I wanted you to create a mock UI guys for any productivity app, task notes or anything. And try to find the group whatever you are thinking. Like, let's say you can take this application called Trello. It's very simple and it's little complex. Take the app Slack. Trello and Slack are both productivity app. Okay? Try to take that. Because when you take that complex app, you will find out what are all the proximity which people have designed. Just take a screenshot, mark it down and send it to me. I don't need you to create any new interfaces. Okay? You can use anything like let's say group related items intuitively and ensure each section feels cohesive. You don't have to design guys, maybe I'll marp mark the ui. Okay, Mark whatever you feel like. Let's say the task section, the calendar section, the notes section, reminder, whatever you want. You can mark it, but just mark it whatever. It's a law of proximity, you think? If you feel the law of proximity is not there, go and find out in the other pages. You will definitely find something. Okay, Just mark it down, group it and send it to me as a screenshot. Post it in the group in the WhatsApp group. Or maybe you can post it in your LinkedIn page. Also you can post like I have understood law of proximity today in a more detail. This is how the markings are. You can go for it, use spacing to indicate the grouping and separate function experiment by moving different section. But anyway, this is not required for you. Do not worry about this. First try to understand this law deeply. Then you can able to what you call play around with this. Fine, just do this. These two things. You can able to take a screenshot. Just mark it down and show me how you are able to implement it. Okay, that's enough for me. You can use canva. You can use any basic tool to show me that interface not an issue. So finally, to conclude this entire section, we can do a live activity case. But time is not there now. There are many AI tools to do it. Like let's say Trello. Trello is A very good tool. Practicing Trello's task grouping allows students to explore. This is a very good example. That's why I told you use this Trello, this slack. There is something called Jira cards. Okay, you can try that. These are like very, very superb applications which you can try it out. Okay, what's happening? Okay, fine. And yeah, so figjam enables designers to experiment with proximity collaboratively in wireframing projects. If you're using this Miro and figjam, it will be really good, guys. Like, these are like productivity applications sharing across your team if you're working together. Okay, Canvas template. Use effective proximity, providing students with examples of proper spacing. ChatGPT. Imagine designing a mobile app for event. How would you use proximity to organize that? Okay, details. RSVP Describe spacing. See, I'm just pasting this prompt to you guys. Okay, Use this when you're designing any application. Change your. Change your particular application name and use this prompt automatically. ChatGPT will also suggest you some proximity principles and then you can consciously go and apply it. You don't have to scratch your head. If you are completely numb or blank. Use this prompt so that you will be getting some idea, at least a description. I have designed this prompt for you so you can copy paste that and you can get some ideas. Then go and implement it, then find it out. So if you constantly apply the skill, guys, then and only you will become good at it. Or else it will just remain as a theory. See guys, you need to master this proximity principle. If you are not mastering this, what happens? Your UI will look very, very cluttered. Your physical products will look very, very cluttered. Whatever you are designing. Okay, so learn how to group elements and ability to analyze. See, I told you, right? The consciousness will start growing. Your critical eye towards evaluating will become super high. See, see guys. Many of the people are learning in our program, but you guys are so lucky. You guys have woken up this morning and then you understood this concept. I don't know how much people are going to come back to this live and watch it. But if you guys have understood this, the journey in which you being a UI designer or a UX designer or whatever, okay, for me it's all problem solving. You will create a meaningful impact with the designs, what you make. You're not just sharing some picture. You are creating a super, super, super meaningful product and service which other people are loving to use it. And your designs will stand out for years, for decades, for like even centuries. If you understood this very, very easily. Because this Gestalt law of psychology. This guy is like 19, 25 or 30. He has invented this principles. This is a classical principle. We can't change it. Nobody can go beyond this guy to talk about aesthetics. If you're worried about aesthetics aesthetics visual attend this full week till Sunday. I'll sure. I'm sure that you will get mind blown by the examples and the case studies and the knowledge what we are imparting. Okay, but you need to take an action on that activity then and only you will get the outcome. Okay, so this is a. This is a skill which a student needs to understand and you will be mastering these principles. Yeah, enhancing the user navigation, proximity. All these things are fine, guys. But I would also recommend you one thing coming November 24th, guys, okay, we are having a workshop. You guys can participate in that. Okay, I'll be pasting that link also for you guys. Just a second. I'll be pasting that link and also subscribe to our podcast channel and start listening to it and YouTube channel. We are every day conducting some skill live sessions. You can participate and yeah, you can share for your other friends as well. Maybe you guys are inside the program, but people who wanted to come into our program on the November 24, we are having something very very special webinar and you guys can also come. It's an interesting webinar. Okay, which where we are going to deep dive into one very very important secret which design industry is not talking about. Okay. We have been planning that webinar and what you call. Maybe we'll touch upon this gestalt principles and rasa theories as well. Okay, we'll let you know what is that thing about and I'll share that link for the webinar in this group chat. Guys, just a second. Just forward it to your other friends as well. Okay, just a second, just a second. Okay, just forward this webinar to your other friends as well. And you can also listen to this podcast channel. Okay, guys, go to the podcast channel and start learning the content like crazy. Because podcast is my entire effort of last one year. We are going to record the 299th episode today. Okay, Imagine we have covered everything. Please go and listen to whatever pain point you have put in the Spotify that pain point in the head, in the top of the head search bar. You will get one or two podcast. If you're facing interview problem, if you're facing portfolio problem, if you're facing user research problem, just type out that keyword. You'll find a podcast. I have shared the description to you okay you can watch that and that will be a super useful material which you guys already have okay Sorry guys what happened? Oh my God. Okay and I'm also pasting the link for the people who are watching in the chat yeah Bindi packets. Oh sorry Divya I'm just seeing your chat now Divya Divya said bindi packets organization chart that's great. That's great But Divya do the practical activity See I would be really happy when you show some practical activity and share it with me okay either you can send it in my email you can find the email as well like let's say connectdesignforchange.com you can able to send an email we'll be able to look at it guys for the outer public for the other people do share it in a group let others also learn from this okay great guys can we come to the conclusion now we are ending this call Any doubts is there Guys before we sign up before we.