UI/UX Course | UI/UX Free Course | UI/UX Training | Intellipaat

[Music] almost every person is online right now either on desktop or mobile phones the comfort and accessibility of mobile applications are the main reason why opting for mobile over desktop in 2018 the number of mobile apps downloaded worldwide was 205.4 billion which is expected to reach 258.2 billion by 2022. this shift made ui ux designing an integral part of the any product based company ui ux design is a science that works on improving the user experience and usability of the application almost every company including facebook amazon and google invests heavily in it ui design is the process of transforming wireframes into a polished graphical user interface this both enhances a product's usability and creates a connection between the end user and the product a user experience or ux is therefore made up of many user interfaces which come together in a seamless flow to form a product the difference between user experience and user interface is that ux is about the experience a user has with the product or service while ui refers to the aesthetic elements by which people interact with the product and ux focuses on interaction design wireframes information architect user research and scenarios ui focuses mainly on visual design colors graphic design layouts and typography despite the differences ui and ux are not entirely different both ui and ux are crucial to work closely to determine how a product will function and be visually attractive with each other influencing the other imagine you spend months creating a beautiful website only to get the result that people can't find what they're looking for and struggle to navigate no matter how attractive and aesthetically pleasing the interface is without user experience users will become frustrated because of its lack of usability and will leave your site the role of a user experience designer is to understand the customer's journey that means understanding the target audience interviewing customers defining user flows and conducting user testing a ui designer's job begins where ux designer's job ends and that is at the prototyping stage they take the wireframes and add visual design to make them more usable aesthetically appealing and optimized for different screen sizes the starting salary of ui ux designer in india is 10 lakhs per annum and once you gain experience it will be in the range of 18 to 25 lakhs per annum and similarly in usa the average salary is hundred thousand dollars there are over one lakh jobs available related to ui ux design just in india hello everyone and welcome to today's session on uio x full course by intellipaap the importance of ui ux design can never be overstated the design of any product and service determines the relationship between a user and a business and when it comes to the digital environment the value of the design gets more pronounced most of the content that we consume these days are from our interactions with the screens ui ux designers provides a strong connection between the organization's goals as well as the users expectations in this session you will learn all about the ui ux so let's check the agenda for the session so before we move on to the session please make sure that you're subscribing to our channel and that you hit that bell icon so that you'll get all the latest updates from us in telepath let's understand what is used ux and how it is different from ui okay so user experience design is a process of enhancing user satisfaction with a product by improving the usability accessibility and pleasure provided by the interaction with the product so what the ux designer does it design a product in a way which provide a pleasure satisfaction to the user okay so that's the ux design and to be able to do that he or she applies a well-defined process of of ux of ux design right it is not just like anybody can just start it there is a well-defined process of ux design which we will learn later ux design is not just about making a better ui but your design is more about empowering people to achieve more and better okay so what ux goal is it is not just to make a better interface but it is to empower people to complete their task efficiently quickly and and and you know satisfactorily so that's what is ux design okay so concept of ui and ux design so once again i mean this is the same definition like uh user experience design is a process of design team used to create a product that provide meaningful and relevant experience to the user involved this involved the design of an entire process of acquiring integrating the product which not only include the you know the task flow but it also includes the brand the branding of the product all system because the identification is also very important when we are into the market so all these things are taken care of usability branding and the function like how what kind of function or features we have added into that product application or whatever so that's the about the design now how this concept has come design is arguably the defining human endeavor that separate us from other species so apart from laughing the second thing is designing which separates us from other creature on this planet no other creature on this planet usually can laugh right except human likewise design is also to be done only by human it is it is not a cup of tea of the other other species uh we have started using tool from ages like from the beginning of the so this is the civilization so and that's how the design started actually the history of the design like the known history so far you know it came from when and it is started by roman architect when they were creating those buildings so they first they are not creating just for the for aesthetics they're also uh you know building those building for the user need like they first understood who are their user and what kind of you know building would smooth them so all those things started right there from the from that time now coming back to the computer because we all are learning trying to use this design approach in in the digital world so coming less coming back to this is very important if you will remember like uh way back in 1780s it used to be codes which used to interact which we used to interact with the computer like if you want to have something out from the computer you write a command you know you type a command and then computer give that relevant information to your data to you then game mouse actually and then came the icons or windows and that's when the ux ui uh skill set requirement of usb skill set started from that time earlier it was the only engineer who used to command type command and computer used to respond but on the advent of you know the the graphical interfaces the gui as soon as it came and the mouse came then that's how you know the the uh the event of this uh user experience design came into the picture um like you must have i don't know whether you people have seen this interface uh i have seen when it was a time of dos or then late then then the initial stage of windows when icons came into being the window the frames came into being the mouse started working that that's where you know the computer become the layman uh commodity also like it is the household it has started becoming the household thing it has started becoming the use of the layman instead of the known engineer the engineers who know how to operate so when it is started to be used by the layman that's where the how to how to approach to to perform the task by layman a design uh is required that's how the ux design came into the into the picture you'll also notice that the the originally hci which is the human computer interaction practitioner those were it used to come from the psychology field but now uh it is not only psychology but the content from any other field people are coming with their applied knowledge they are becoming expert and they are doing a very good job also in this field in today's world when we have so many devices different kind of devices not only laptop but we have the we have tablets we have mobile not only devices but we have different technologies also like we have augmented reality we have artificial intelligence we have machine learning all those things have come into the picture the design thinking has become even more important right now okay uh let's move on to it talk by don norman you know who's he's telling that design is not just dealing with one product but thinking before that product and even after the product service is given the whole scenario is you know the better approach to the design there is a term called cx hope many of you must be knowing which is called customer uh experience uh which is which talks about not only about the the better design during the product uses but even before that and even after that when we required to troubleshoot you know all this time okay sorry about that okay let me see yeah okay let's move ahead and talk about okay let's let's learn more about the concept of uxi design let us also understand when we are talking about ux design that it is not just graphic design interface it is about usability it is about psychology and it is also about sociology so this all this thing you know study of all these four things combined together and when we are approaching or designing a product uh that's that's makes it a user experience design rather than just one graphic design or gui design that's not the ux the ux is also about usability ux is also about understanding the psychology of the user and usex is also about understanding the demography of of the related users who are going to use that product so it's a vast subject sometime let me also tell you that you there are so many successful ux designer who even cannot draw a line who do not know how to use photoshop who do not know how to use figma or sketch they have never gone to it they are also successful ux designer because that's a different thing that's what i wanted to explain that it is nothing related with gui or ui design it is about the psychology about the understanding research of the people of the democracy of the demography or or the uh you know testing or uh understanding the usability of the of that product or material or services this whole thing is about ux design right okay let's move on design thinking is the most widely used term right now in ux design okay it is nothing but it is just an approach which will help to create a better product a better commodity a better service a better process for the users right so whatever we are talking about so far ux design we can only achieve with the help of design thinking you know what is design thinking let's talk about it so design thinking is the term which is brought into the market by stanford university first they came up with this term and they are still doing good actually they are still working on in the professional world uh stanford university so so design thinking is the overall process you know through which we right from the problem and ending up giving a solution to that problem is gone through the all these stages of design thinking so we have five stages of design thinking first is empathizing second is define third is id8 fourth is prototype and last is tasks so in in the first phase what we do we try to understand from the stakeholders or the originator or the producer or the financial of the office answer of the product that what exactly they want what is their business goal once we understood from them we go to the user we try to put ourselves into their shoes having the empathize with their problem or pain areas and you know why understanding their demography their education their behavior their needs all this thing we capture in this during this space of empathize empathize right once we have done this we go to define phase where we study where what we do we just go into the market we capture all the competitors we capture our business goals again uh we also you know study any other aspect which is already with the data which is available in the market about this problem or the solution which we are talking about all those things are well defined during this phase then come the id8 phase so once we have have empathized and we have defined the problem on that problem the third phase is ideation where we try to create a solution with the brainstorming or many other method which we will use later on once we have got some ideal solution this we create a prototype and this creation of prototype could be digital where we are creating wireframe or interactive prototype high fidelity prototype or whatever or or if it is a physical product we are creating a you know kind of a mvp product and that product then go into the fifth stage of test and we go to the that user whom we have empathize with and run that product with them and try to understand whether that prototype is solving the problem or not it can happen that we will have to pivot from this stage when we have done the testing i mean like we will have to entirely change the whole product or we will have to just take a feedback and improve this prototype and try to make it a mature product right so that's the five important stages of design thinking which we run through the whole before it goes to the engineer for the development uh the u.s designer exercise all these five steps and create a solution okay it could be a hypothesis the based solution also but we will test it we will further improve it and then we will uh you know then it will go into the production once it is created qa will run over it uh and see whether everything is perfect and quality is checked then it is launched into market right so that's how the design thinking so when you are a ux designer you are the pioneer you are the opener you are the sachin tendulkar right you need to start working on the product you need to give a you know idea or the what feature should be added what should not be added you know all those things will be decided by ux designer once this is done then it will go to the engineer okay and then we go working on a solution area you know so these two are talking about problem these three are talking about solution okay that's how it is let's move on further this is the stanford university design approach but look at the some other organization they have further reformed it like ibm is also you know one of the pioneer in using design thinking actually if you look at their product they they do not call it the laptop they call it thinkpad so the there's their moto their prime word is think actually if you look at it so ibm gives a lot of you know emphasis on design thinking and they further improve their their design thinking process and they give a different term to it like their empathize space is understand they define faces hell their ideal faces explore and prototype and evaluate and they also included two more entities to a sponsor user sponsor user are nothing but those users who are relevant to this problem or this product and playback is actually including the other community like stakeholders or the engineers they also should understand what exactly designers are doing so playback is the process where you know they come on to us one page you know designer stakeholder the business people and the engineer the feasibility so all these three people come together and understand the whole solution for this product right and then come the prototype which is run and evaluate phase with the user that's how it is done in the ibm design thinking if you look at this diagram you will further understand it like empathize is nothing but developed an empathy for your user by understanding people through interviews observation or any form of contextual inquiry so whatever user research are done it is done in the face of empathizing in define phase what you do you do the documentation you create personas you create empathy map you create scenarios you create um you know the market research all those things hill is nothing but defining uh the problem uh the what we need to do that thing declaration of intent what it tell the uh like it tells where to go it does not tell the solution but it just tell where to go we will further understand this thing ideate phase is nothing but we are trying to create a generate idea here and like generating a hypothesis around what would be the to-be scenario that is ideation phase sponsors user are the real user include them into the playback these are the persons whom you are taking interview and you are also using them in the testing so these are the sponsor user okay uh playback is aligning the other team with whatever you are doing like your stakeholder your client your engineers all those things are aligned in this space and test phases when you're running your prototype with these users that's the test phase and you're not only just testing once it could be many stages like you keep on improving on the feedbacks right that's the prototype stage let's move further to understand with an example uh hope you guys must have many of you might have attended the introductory sessions and where we have tried to explain this example of implementing design thinking on a particular problem let's take an example of whatsapp so whatsapp came maybe around two decades back at that time whenever we want to talk about talk to other person what was available was just msn and skype and to use skype and msn you need to register yourself you need to add your friends or circles into it but the problem at that time was that the smartphone were new and their user were laymen they were not very taxable guys they it is very difficult for them to register themselves or maybe add a friend so this was the if you look at this design thinking approach what you will find when you are empathizing this you know persona you'll find that the user or smartphone create a new kind of user who does not possess much expertise in phones it is tricky for them to create account and add friends so this is what we have when we put ourselves into this user of this user we found out that this is the main issue with this kind of user so what is the what is the hell or defined phase so what problem we could define create a chat application of mobile that does not require creating an account or adding user okay so that is the overall problem we could define that we need to create a we need to chat on application without registering without adding user right that's the defined phase similarly the hill is also the same like this person which we have just taken an example of can chat with his friend and his family without creating an account or even without adding friends okay so this is hell now what is the other stage idh in ideate we are trying to find out a solution okay that's what we understood in the previous slides so what we do here in the idf space what we should do when with this guy does not know how to add friend or register what should we do the ideation the idea generated was use sms and phone number instead of account creation use phone number and id or from the directory of the of that cell phone to create a friend that's the ideation okay that's the idea came out uh the sponsor user would validate the solution applicable for them so once it is this ideation is done the sponsor user will validate whether it is good or not so what we do for that we create a prototype a wireframe uh with you know this whatever radiation we have thought of and we go to the user and we say use it and tell us how it is working user will say no i cannot find out then we further improve our prototype and keep on testing until we get the satisfactory result that's the test phase and prototype okay uh and the playback phase comes when we are explaining everything once we have discussed with our user we found that solution is working with the user we came to our development team and offering management and say that this this is the solution for the problem you came to us for and this is how it is working let us know whether it is possible for you to create a solution around it or not because feasibility is very important whether technologically it is feasible or not whether business wise it is viable or not whether it is making sense to put so much money into it or not that we need to align with these people so that's also one of the important phase right once it is done then only remember then only it goes to the development team to work on it why i'm saying remember this is a misunderstanding that any product is produced by engineer no you see so much of hard work done all the slide who did it the ux designer who could be an engineer also but it came to the development team on a very later stage once we have ideated once we have empathize we have defined we have ideated we have aligned we have prototyped we have tested it is ready user are saying yes it is looking good to me then only it goes for the production you see the hard work done by the ux you see the importance of the ux you see their pioneer steps in the whole product life cycle this is the this is where you are fitting in that's why this skill set is so important okay and let's talk about in detail go into the design thinking in detail and talk about these things observe and engage the people for whom you are designing a product so this is the first stage of design thinking when we are empathizing when we are trying to understand our user we are trying to use different way to understand our user one of them is observe and engage so what we do so first there are many approaches when we are trying to empathize our user when we are trying to understand our user there are many approaches one of them is natural environment okay what we do here what we do in empathize stays we try to understand our user who they are who's who's those people are what they're trying to do what are the hindrance they are facing what is the problem they are facing right so this is what we are trying to understand during the empathize phase and how we will understand those things through these approaches different approaches natural environment approach is what we just uh you know we don't call the user in our office and say hey how do you do your work let us know and we'll tell you how you can do better no we don't do that we go there you go out of our office we sit where the user is doing their work and we observe how they are doing and we try to understand where they are frustrated using what is make why they are doing it all those things we are doing in their environment for example when we are creating a an interface for a uh atm kiosk you know you know you need better to be in that environment like a atm interface when it is at a bus stand or a railway station or airport there will be a lot of noise there is an environmental ambiance many factors like light or maybe you don't have a time you're rushing there's a lot of noise there security issues so all those things will only be observed when you are right there that's why we talk about natural environment so there are few applications there are a few products which needs to be uh we need to go out there in the natural environment of the user and try to understand their problem there only that's called the natural environment right now go to the next thing which is observation lab so sometime what happened instead of going to a natural environment we try to observe our user or empathize with our user in the laboratory kind of environment where we artificially create a lab where we make the person say it and we observe before the you know over the glass or maybe mirror which is a two-way mirror or one minute and we observe the people and see how they are working without them noticing that somebody's watching okay so advantage of such thing is that we can comfortably without any hindrance we can see how the users are performing their work or facing problem but the disadvantage is it is very expensive you need to have a lab for that okay and second thing is it is still not natural maybe user might be knowing that somebody is watching me so his or her action might not be the natural reactions right so those are the but it is having advantage also you know in some cases we can use this also the third is day in the life kind of observation what we do like if we are creating a solution for a logistic company maybe we will go there and we right from the beginning when the truck are moving in the loading unloading happening uh people are doing different work we are observing everything there and completing the whole the whole uh life cycle of that thing is uh you know run through us run in front of us actually like loading unloading registering uh driver going there and where whatever everything is observed there so that is day in life kind of observation which we do okay let's move forward so this is about the approaches different kind of approach of empathizing or understanding the user this is the kind of uh format or the template which we can use capturing the data of the user we can have three column in this template in the first column we talk about what exactly this user is doing just a quick info guys test your knowledge on ui ux by answering this simple question which of the following is not an example of a context research method number one field study second dairy study third usability text fourth contextual inquiry comment your answer below and subscribe to intellipart to know the correct answer now let's move on with the session okay like write concrete observation about the person was what is he is doing use descriptive phrases and objective in the first column the second column is about how this person is doing the task where he is facing problem where he is looking frustrated why he is doing certain thing if he's doing certain thing those all these things are captured in this column and the third thing is why he's doing it you know how he's doing it and then the third column is why he's doing it all those things are captured and this will be later used uh for synthesizing or for defining these the problem actually let's move ahead and talk about point of view uh understanding the problem and problem definition and designing the right solution for that okay usually this phase comes after when we have taken the interview of the user first we decide who are our user and then we take interview or observation or whatever exercise we have just explained whenever we have done it we come home with the data and then we synthesize that data analyze that data and then we define the overall problem what exactly is the problem we are trying to address by making this product correct this is a very important thing which is called point of view or we can say understand the problem definition okay so how we will do it immerse ourselves in the data we have gathered about our user synthesize the data organize the sort insight into the theme and flow meet with your people to develop your pov generated pov statement so not only once you have collected all the data while interviewing the user you are asking other people also to join and they also you know have their own thought process on the problem definition and in this phase we defined the problem that this is the problem and this is the product we are going to create the service we are going to create will be around it this problem that is called point of view the problem definition pov point of view that is very important actually this is the first step which we need to define it is critical actually very critical if you are rightly defining your problem later stage or all the activities depend on on this because this is your bulls eye you will keep you will put it on the wall while the whole production is happening right so this is your wool side bullseye which you need to take care of let's move forward and talk about uh different approaches towards the uh you know finding a solution actually this is this topic is related to ideation phase you know whenever we are actually defined a problem that first we have actually understood our user then we have defined the problem then the third stage when we are trying to create a solution there are different approaches of brainstorming and thinking so divergent and convergent thinking is also one or two of the approaches which we apply during the ideation phase now let's understand what is convergent thinking and what is divergent thinking okay convergent thinking let me just let's not go through all this whatever written here i'll just explain in a simple word convergent thinking is whenever there is a problem and we have time tested solution for it okay those are whenever we are thinking about those solutions those are convergent thinking just a state conversion problem to solution if light is not coming need to get power okay that's a straightforward solutions right if the average is not there of the my vehicle maybe you need to go for some other vehicle which is having a better average right that's the direct solution direct convergent thinking right but what is divergent thinking then so divergent thinking is even more complex actually whenever uh whenever we think about a solution which is which does not have a straightforward answer we just think about a hypothesis is actually hypothetical solutions to it and actually sometimes we take a risk also we think about many many different directions and come out with the solution which is best fitted for that problem i'll give you a simple example of uh approach of division thinking and convergent thinking in the case like if you're going to office and you want to save a fuel while using your vehicle or not only are using your vehicle you want to save your fuel what would you do money is not a constant so in the convergent thinking you will buy another vehicle which is very good at fuel consumption okay that's the conversion thinking but when you are talking about divergent thinking you will think about the other solution which is out of the box like i will take a house near my office so there will be no fuel waste is no fuel uses i will hire i'll go with friends okay i will work from home so thinking out of the box thinking a different way of uh you know creating solutions is called divergent thinking which is not a straightforward solution which is a hypothetical risky solution let me give you a very live example of divergent thinking when twitter came before that it was actually twitter was a blog actually they came first as a blog but later they changed it into a mini blog kind of thing and they threw just through this in the market as a blog and people started liking it right what would happen if you know uh twitter might not be like it might happen i mean it happens with the thousand of product which got failed they are thrown into the market they are not successful we never hear about them that's what the divergent thinking is all about you get a success sometime you don't get a success so why to use diversion thinking if it is so risky it is you know most of the time divergent thinking approach is used when you are having no solution in the past you have no experience of having a solution in the past but you are this is the first kind of a problem where you are pointing giving a new solution innovation innovation actually you need to have a divergent thinking in that case that is the diagram thinking okay like you can see in the map like uh divergent thinking when you whenever you have a problem you think upward different direction but when in the case of convergent thinking it is all facts related all actually we already know what are the solution it is fact based which is tried in the past we are just using that as a solution in the convergent way of thinking this is actually used let me tell you hope you are not uh feeling yourself lost uh when we are talking about these kind of thinking approaches this is the ideation phase in design thinking where we are trying to apply these things we will talk later about these things okay so don't worry about it let's move on uh to the next thing which is prototyping so this graph explains you know in the beginning you see that you can go in very many directions there could be many iteration there could be many pivoting happening later it become less more focused then you have a solid one focused path to follow that's what prototype does you know like in the beginning it is quite confusing conversion is lesser than a fixed idea so that's how it is different stages of creating prototype so before the it goes to development stage this is where we we want to achieve this should be achieved right let's goes to the testing stage you know prototype and testing okay so let me just to explain few thing about testing first of all testing which is usability testing actually is a very very critical stage of the product development usability testing should not be confused by the qa check which happened pretty late in the product development don't get confused by that usability testing is different and keyway testing is very different usability testing is done in the beginning of the product development whereas qa testing is done at the last stage of the product development so don't get confused this is these both the stages are critical but this is even more critical usability testing because it is where we are evolving the product the solution right okay so testing is a major component of hypothesis driven innovation which argues that the designer should develop product iteratively in order to reduce risk prevent over building and avoiding overspending okay in order to develop product or service or process iteratively you need to build and test mvp product test your product services process in a structured way will accelerate loving reduce waste okay so hope you have understood that uh once we have created the mvp or the prototype we go to the user and want to see him how they are using it where they are stuck in where they are you know frustrating and where uh what things are very important what they want to see first all those things are being observed and captured and further improved okay uh testing is a big vast subject we will talk about usability testing in later module okay right now to understand testing is good enough like it is just testing our prototype with those user who we have targeted who are our sponsored user that is our usability testing okay so first of all let's understand identifying the problem statement okay so whenever you have a problem uh what you do you go to your you know listed users like these are the user i am going to discuss with them i'll try to find out what are the pain they are facing what thing are working good for them what is not working good for them in current scenario what is hindering to do their job all those things with the questionnaire we will prepare and ask the users so once you have collected all this question you put it them on the whiteboard and once you have put them on whiteboard you try to find out what are the similar information uh the similarity between the information then we group them together okay and once we have grouped them together in different segment we will discuss about this later on the right side graph which is empathy map but i'll talk about it later so once we have grouped them then we try to find out what exactly is the problem and what exactly is the requirement and why this requirement okay so that's the identification and writing problem statement now let's understand what is the whole user research is all about okay so ux research is right from the beginning when we start project requirement from stakeholder we understand the project requirement from our business owners then we'd learn about who are the users and what are their need we gather data in our third step synthesize analyze the you know that that data conducting the interviews collect recollecting the surveys and you know also understanding the available literature or the online stuff or the computer activities we analyze all those stuff once we have done it we ideate a creative solution once the solution is created it is run with the users like we test the whatever solution we have created and then create the final solution so in a nutshell you will see that the user resource is a two-part gathering data and synthesizing the data in order to improve usability at the start of the project design research is focused on learning about project requirement from the stakeholder then learning about the needs and goals of the users then researcher will how they will do it the researchers will do interview collect survey observe all those things all these activities will be done and then iteratively throughout the design process the research focus shift to usability and sentiment researcher may conduct the usability testing interviews users about the process and generally test assumptions whatever we have and improve the design that's the whole activities we perform in our user research the purple thing is taking input from the people and the yellow the orange thing is you know after the creation of a solution we are testing it so giving out so taking in is purple giving out is orange that's how the whole user research can be put into rememberable memorable thing you know we collect the these we understand the requirement from the stakeholders then we we go to the user and understand once we have got the data we synthesize the data create a solutions a prototype solution then we go to the user and and run it and the solution is measured we create the final solution that's how the whole user research exercise is done okay so uh let's talk about the user recess and method of user research okay like uh the center of our whole approach work is are the users so whenever we have a problem we understood things from the stakeholder then we try to find out who are the real user and how many should be selected then we apply these kind of different methods of taking the data from the user one of the method could be interviewing which is a actually you will just ask the users to come at a place and you sit with them you try to understand what kind of problem they are facing how they are performing what are the thing which is not met with this solution which is already running if it is already running just a quick info guys intellipaat provides advanced certification in ui ux design this course is developed and mentored by enict iit goharty the course link of which is given in the description below now let's continue with the session then later work on that this is one way of doing it also please understand that there are two way of user research one is called qualitative user research and the other is called quantitative user research the interviews comes under the segment of qualitative user research we will understand in next slide further in the in the coming slide about qualitative and quantitative later on okay the second way of conducting a user is survey uh let so surveys is nothing but you throw up you create a kind of a format you have questionnaire on that and you you send them to all the users and user will just take that this is this is what is good or what is not good so actually surveys are good for the quantitative research like you want to know how many people are using this shaving cream how many people are using different shaving cream so those kind of quantitative data when you require to collect is our service these are pretty easy and simple way of collecting data in the numbers in percentage you know so whenever we want the quantitative data about the fact we need survey for that but whenever you want to collect the qualitative data like how they work what kind of frustration they are having then it is interview is a better way of doing it the third way of doing it is field research so field research is nothing but you go there into the field you observe how people are working on an application and you question them as why they are doing something and why not doing something else and you collect all those data during those field research okay like there are some examples given here that like in airport for booking application you can observe like how people are working on booking application maybe in hospital you want to see for physiotherapists how they are using the new application those kind of data can be collected through this method of field research there is one more method of field research is called diary study diary study is actually when we take up people tell them note their activity what they do day-to-day basis and give those data intermittently to the ux designer who will collect those data and study how these people are working okay why we are using diary study we usually use dairy study in a very complex processes okay it's kind of a log book maybe if you people have must have seen avatar film you know that hollywood movie avatar you will see that jack city you know you must have seen that jack silly is asked to fill his logbook right whatever he has done in a day he will have to just narrate all those things in a video and those are captured similarly in dairy study we do the same thing like for example if we are creating an application for automobile purchase maybe you you may want to ask the the prospective buyer of the car or other vehicle that they will note down their activity right from their motivation to buy a car to search how they are searching to go to the showroom what kind of experience they have what kind of demo or what experience they had just keep noting down all those activities and once they have done it then we will synthesize as how they are doing it and and this will help us to create a solution for that that is called diary study right let's move further and talk about other kind of user research so online research is another way of doing it it is very very tedious actually what you do here you find out a subject then you go to those blogs and sometimes you find that people have expressed their opinion that this is better or that is better what are the pain area facing in certain solutions so you try to capture by doing online research the other way of doing research is usability testing it is little different for whatever we have discussed so far usually you will see that interviews or surveys or online research they all are done before the solution before the prototype created but usability testing is done once you have created a solution but it is still a way of doing the user research because the the solution or the prototype you have created it is still we are going to the user and testing it so it's still part of the user research right but it is done after the prototype is created so usability testing is a way of user research uh how to do it first you recruit test participant from the so what we do when we are trying to do usability research we try to capture those people who are quite new to this prototype or the solution okay because we want to find out whether uh the kind of navigation we have given is making sense or not if you will give to the people who are already familiar with the navigation then your design will not serve the sort of purpose because those people will somehow find it but the real task would be with the new user who has not seen this application so usually usability testing is done with very fresh new people okay there is one more way of doing usability testing is called ev testing this is a kind of a usability testing only okay some people do not think that do not consider it as a usability testing but i believe that this is also one kind of usability testing only now what is a b testing a b testing is nothing but creating no solution for the same problem you know just to see which one is working better for the user whether a is working for them or b is working for them better or even c or more you know so we create multiple solution multiple prototype for one problem and we run them with the same user and see which one is working better for them that's called a b testing and while we do av testing we always take care that we are not creating the version of the complete solution just one section of the whole solution is created in two options okay not the whole solution otherwise it will confuse so we try to make one or two interfaces in two options and try to run them and see which is working better for them usually it is done with one kind of feature like maybe like looking at the account in bank application uh that one section is you know created in two ways and run it to the user and see which one is working better for them so that's called eb testing okay uh let's move on to card sorting card sorting is usually done especially in the case of when we are trying to create navigational structure and information architect what does it mean like there is a website which is having a complex navigation very deep navigation like amazon website it is super complex right there's so many products lots of blacks of products are there so there are complex navigation like how to reach out to the to one particular product how to segment the different kind of commodities so just to sort the navigation what we do we write uh the name of all the uh you know segments and on the cards we put before the users and tell them to actually segmentize them and group them according to the way they want it okay we do this exercise with many user and understand the pattern and then according to the user we create the navigation not only we ask them to group but we also ask them to name them like for example in a banking site to get in credit card uh what should be the name that segment we are asking the user to name it rather we are giving a name to them why we are doing it because it is better what they understand what is their mental model so we are using the phrase which is making which is understandable by the user rather than because sometimes why i am taking the example of bank sometimes we use such a phrase which are not understood like for me when i get a credit card uh statement it says under billed amount sometime it is pretty confusing what is the unbilled amount it is bill to me all the time why they are saying unbilled amount so the easy language could be these items are not being paid by you guys in this month which will come next month those are unbilled amount so if it is coming from the user that is better so what we do in card sorting we do do we do two exercises first we want them to group the information the way they want it and second thing is they should also name it we are not going to name it they will name give a name to it so this will help to create a user friendly navigation a navigation which is working for the very user there are two kind of card sorting one is called open and the other is called reverse card sorting in the case of first one it is a fresh thing like you are creating a website you call all the user and you kept a table on the card you have noted down uh roughly all the segment all the information are kept in a stack rewired now you are asking your user kindly group them according the way you want to see in a website okay this is called open card sorting what is reverse car sorting then the reverse car sorting nothing but when we already have a navigation defined now we call those user and ask them to alter it according to their way okay please understand already defined navigational structure is presented to them in the form of the card and we ask them to just shuffle it shuffle the way which make more sense to them that is called reverse card what is the use of reverse card sorting it helps to create the navigational structure better which is working for the user that is called card sorting okay let's move further now let's talk about how to recruit those users whom we are going to interview or throw survey or do whatever so for that we need to have a screener survey okay the screener survey is nothing but you you must have heard this term like screening whenever in hollywood they are trying to find out a new talent they screen it they screen the talent and then they see whether it is fitting into the role or not and then they select the those talents likewise in our interviews also or for our user research we have a screener service so screener survey is nothing but to try to find out who are the users we are going to take for our research and who are not skinnier servers are essential tool for qualitative research and while they sound simple they are actually very tricky which is why we have dedicated a whole you know slide to it screener survey or just a screener or a survey people take before participating into the research they are made up of a few questions designed to weed out the folks who are not required who are not intended audience for this uh the whole design thinking exercise okay so what would be inside this screener survey let's understand it okay if you want the right participant the right kind of users into your research you will create this screener questionnaire when you will create this screener questionnaire please take care of these nine point know your goal like what exactly you want from this kind of survey we want that right kind of user should come into it that is your goal to define specific target audience criteria what kind of users you need in the example of medical application you want to define like i want to looking for the real user like elderly people the staff of hospital the children of the elderly people those we need to define screen for behavior and psych psychographic of for over demography you know please understand this also very important you know that the behavior and psycho is more important than demographic of the user right demography of the user could be like only asian or or what kind of people are there no that is lesser priority the priority the the top priority should be the behavior what kind of behavior what kind of education attitude those people are having less patience uh forgetting things those are more important over whether it is hindu muslim or or asian or whatever okay so we need to take care of that also write precise carefully worded questions okay it should be clear and easily understood put your screener question in the right order first thing should come first just a quick info guys test your knowledge on ui ux by answering this simple question what is a disadvantage of vertical navigation number one can accommodate only a small number of categories number two offers no room for growth number three is unfamiliar to users number four requires more space comment your answers below and subscribe to intellipart to know the right answer now let's move on with the session what is your name should we first rather than where do you live correct that way avoid leading or loaded questions it is very important whenever you are asking a question the answer should not be yes or no the answer should be a descriptive sentence is coming back to you right that's called leading question okay include an open end these six and seven are the same actually include an open ended question to screen for articulation right so whenever you are asking a question bruce should be open-ended question what do you mean by open android question the questions where people will have to answer descriptively rather than giving a node like if you will ask a person how is the weather he will say yes good but you will ask like how do you feel in this weather you will find more descriptive replies so you need to have open-ended questions don't reveal too much it is not the real survey still this is a screener okay so don't reveal too much remember to keep it brief it has to be brief you know it is not the main survey it is just a screener we are trying to uh you know shortlist people for our for the real user so this is called screener and this that's how we create a questionnaire and that's how we test check them the second thing is diary study as we have already talked about it that we capture we ask the user to capture the activity into their diary on day to day basis and then once they have done it intermittently we ask those diary pages and then we study those diary pages and see how people are doing certain thing and then on the basis of that we are making our solution while taking diary or diary study we need to take care of few things which are here like uh we should explain them everything what we are exactly going to do and feedback and follow what time should be decided activities should be decided and there should be a mechanism of monitoring whatever they are doing like you are actually able to see their entries intermittently you should be able to reply or to their question whatever they have all those things should be possible see again i i'll tell you that these diaries 3d is not that popular but it is mostly used when we have very complex processes and we need to improve it actually particularly diary study kind of user research is more suitable for process improvement or process solution now come to this identifying and writing problem statement okay in human center is design a problem statement is articulated using a point of view a pov reframes reframe your innovation challenge into an actionable problem statement containing three element the user their requirement and the unique insight that explain why this need is compelling why they need this requirement so these three things are captured user their requirement and why they need it these three things are captured now look at this example on the right side david the he disorganized analyst who is good at the what he does but he really bad about staying organized and following workflow productivity best practices needs to save the time he wasted gathering in finding creating knowledge that already exist because he spent too much of time of the day on activity that's frustrate him and prevent him from making money by looking at more ideas you see that the we are capturing the whole problem into three segment in this example person is need and why that's how we are capturing our problem statement right now let's move forward and talk about qualitative and quantitative research okay let's talk about this what are these two things conducting research is often a stepping stone when you are writing your this your thesis or any kind of user research thesis choosing the correct research methodology can determine the success and overall quality of your report it is hence essential to get the initial stage of your research right in this article we discuss the research method in detail and help you identify which method should we choose for your study so there are two kind of one is quantitative as we discussed they are we are capturing the number and how we capture the number we can capture the number through surveys through experiments through existing data through observations and through content analysis through observation also we can do that okay content analysis also so available content on internet or offline when we analysis we can find out the quantity what qualitative research does usually it confirms the fact or test the current situation that is usually quantitative research does in the other hand the qualitative research is a method used to understand thought concept or experiences of people why i interview focus group case studies uh discourse analysis literature review it is basically survey done together people's thought and their experience right this is what we do when we are doing the qualitative research we are capturing people thought and their experience qualitative research approach example are like this how satisfied you are with your curriculum study okay less satisfied more satisfied what is the problem i am not feeling good about this curriculum this is frustrating i i'm missing something here all those are qualitative data collection what is the positive aspect of study program what are the student feel can be done to improve the study further you see that all these examples are capturing their thought and experience and they are open-ended questions they are not ending into yes and no right so those are qualitative what qualitative research does it understand something it may be a concept or a thought or experience when we are trying to explore the experiences of people in certain situation then qualitative research is required like in the form of interviewing people or field studies those things okay let's move forward uh this important thing like creating personas so when we have interviewed many people we have analyzed our data we have done empathy mapping and then we come to create a persona user persona are typical users whose goals and characteristic represents the need of larger group of the user usually a persona is presented in one or two page document only why because we want to see everything at a glance okay now what we capture into persona we capture behavior of the user their behavior pattern actually their goal what exactly they want in relation to the problem not of their life goal in relation to the problem we are talking their skills their education level their attitude which will capture whether they are patients impatient their behavioral trait all this thing their background information like education their families those actually impact on the creating the solution right so we capture all those things the environment also in which they work this person operate so we capture so we create one or in very last case two pages but most of the time it is one page template we create persona and we capture all this information about that person right whatever we have discussed here now understand why we are doing it a deep understanding of target audience is fundamental for creating additional product if you do not know your user you will not be able to create a good solution so it is very much important that you understand your user well okay that is why we are creating the persona user persona help a product team find the answer to one of their most important question who are we designing for to answer that question personas created by understanding the expectation their concern motivation of target user it is possible to design a product that will satisfy users need therefore be successful once we capture all those things like their goal their frustration their education everything then only we will be able to create a good solution right like in the case of this medical application in our persona which is the elderly person we will definitely capture that their readability their memory is weak when we will capture this trait of their persona we will try to create reminder because memory is the problem so reminder is the solution that's why we need to capture all those i'm giving an example here so that's how we create a persona with all this thing and once we have created persona on the available data we try to create the solution let's talk about affinity map so affinity mapping is putting a bunch of sticky note with ideas on them on a wall and then grouping them based on the similarity of those ideas so what we do we sit in a hall or a meeting hall with all the designer stakeholder user all sitting together and whatever you know ideas are coming we are writing them on a sticky note and putting them on the wall once we have done it when we try to group them we try to create a pattern out of it right that is called affinity mapping why it is important this will you know further uh this will help in extracting the insight and themes to help to build effectively towards the next step like for the ideation this will help these kind of capturing the information right next move forward here we have talked about empathy mapping so an empathy map is a collaborative tool again it is a brainstorming way of doing it we need lot many all the people users stakeholders designers engineers everyone working here so on the uh so what like karate tool team can use to gain a deeper insight into the customer which like like a user persona an empathy map can represent a group of user so it is just again we are not talking about particular one user when we are creating an empty map exercise it is about a group of user such as a customer segment or maybe the empathy map was originally created by this guy i was talking about dave gray and has gained much popularity within the agile community now so what we do with empathy map we whatever data we collect we uh divide that data into four segments like what they say what they feel the users what they thought and what they act you know how they act all those things are captured and on the basis of this this will help us to create persona and further work on the solution this will help us to understand the user better okay let's talk about the scenario scenario is nothing but how the person will act on your solution a scenario situation that capture how user perform tasks on your site or your application scenario describe the user motivation for being on site on your application and a question they need the answer for and suggest possible ways to accomplish these objective okay now understand that user is coming to your website for example a customer is coming on your travel website why he's coming he has a motivation he's traveling so he needs to book a ticket a travel ticket air ticket and he also needs a hotel so the workflow would be that he will first search for the available flights from his desk from his origin to destination he will book the flight he will compare the flight then he will book the flight then he will look for the hotel he will compare the hotel he will book one of the hotel which he likes so this is the overall task flow searching comparing purchasing opting out some option uh booking some seat all those things are part of that whole scenario so when we are capturing the whole scenario of the related task in a website that is called scenario okay why we do that we need to see where and and what places this person is touching our website okay let's move forward this is about journey map i'll just give you a small understanding about journey map why we do it journey map we try to capture like in current scenario uh we try to understand in our business where this user is touching the whole thing like for example if i'm a retailer like i sell shoes on a website i have a shoe website so i will see what this person will do we will try to find out shoes he will search shoes then he will see kind of shoes then he will see price then he will see to purchase it now all those things are captured in a kind of a story you know and then we try to find out in our current business model what are the thing which we can improve to make his experience much better on our website that's why we create the journey map so journey map of two kind one is as a scenario which shows the current situation where where he is touching and once we have seen that and we create to be scenario where we provide a solution to different problem where we have gaps in our business so these are two kinds of journey mapping the benefit of customer journey mapping is helping you see where customers interact with your business focusing the business on particular customer needs in different stages in the buy funnel identifying further in customer journey in a logical order gives an outside perspective on your sales process showing the gap between the desired customer experience and the actually received experience you see that this is the most important aspect of the journey map that it capture what actually he wish and what actually is being received by him highlighting development priorities and allowing you to concentrate effort on expenditure or what matter most to maximize the effectiveness this is why we create the journey map to understand on the where he is touching how we can improve our whole process just make it as simple as that okay so uh i'll give a quick uh recap and intro of uh what design systems are so uh design systems are basically guiding principles or guides that you use uh to design a product so why you use these guides are because you need to keep it consistent with you know cross-functional teams that you know work with so there could be multiple ui designers that you work with and you'll have to create you know keep the design consistent you know you could probably use a different color for buttons uh in a particular screen and the other person might you know try to might think otherwise try to you know actually use a different theme for the application or it could be use of icons uh you could probably use a very complicated icon with color or you know the other person could probably use a very minimal icon so in order to avoid these uh you know multiple you know scenarios where uh you know uh multiple people do different things in it in a product you actually create a system where everyone follows through the system in creating these in using these components for the design that you do so one of the famous or the most used design system is material design so material design is google's uh design system which you see used by a lot of applications like the everyday applications that are used like your gmail your google search your drive uh your photos app and a lot of apps that you you know have pre-installed in your android phone all of those have material design uh followed so all the buttons that you see all the font sizes the fonts the colors all of these are part of this particular guide over here and these are located and used in these applications okay so what all does a design system have okay so a design system has design elements like a layout for the design it has a color it has typography it has sounds it has icons used so just give you a quick sample of what it has say in type you basically have a defined set of type okay so here it's going to give you the font that you actually use you should use and what is the font weight okay should it be a light font should be a bold font uh what is the size of the font and what is the spacing between each letter so all of this is actually predefined for you so all you have to do is you know strictly follow this guide and use these fonts uh as is so the same with you know colors and themings for uh so there is a set of reset colors that you could uh choose from so there will be multiple teams there are multiple teams uh available for you and you could also choose to create your own theme uh based on the colors that are available so you could set a primary color for educator secondary color for it so primary colors are basically used for uh trying to use features that in your app that users use most could you could use primary colors uh the users that use features uh the features that are used very uh not very frequently you could use secondary colors and so on so more details on color and style guide i'll get into later uh but yeah that that's the whole idea of having a system so you have anything uh you know predefined for you so all you have to do is you know pick and place so it's like creating uh using uh legos you just you know have all the lego pieces you know put together like color font and so these are just the design elements uh there is something called a component where you again have all the components defined for you say for example you have the button defined for you and what are the different types of buttons that you would use and other components as well i'll get to each of these companies one by one so the question is so basically it would be like a rule book for ui design okay so all this when creating these designs they would have strictly followed guidelines of uh you know ux principles and so all of these is actually pre-created for you so all you have to do is you know uh pick all these pieces of components to build your ui design so the design system basically uh helps ui design make it easier you don't have to create these components on your own like you know say for example this button component it's just a rectangular uh you know a block with color in it and then there's a text inside it so this can be created with any desired tool that you use but then there are specifications for these like for example you know this you see this curve at these edges right so those curves are designed for you are those curves that are defined for you and then uh the font size design for you this is defined for you and then the space between letters are defined for you so all of these are predefined for you for you so that you can just you know pick and use them in your your design and uh for the question who creates a design system is it could be uh designers or ux designers it could be ui designers uh or both of them in collaboration or multiple ux designers who you know work to create a system so many companies have their own design system okay so which they use to create all the products in their company yeah so uh multiple designers work in collaboration to create a design system so these companies have their own designs for example uh swingy for example has their own design system which they use uh to create their mobile app their up their app for their delivery agents and all of that so all of this uh the design is actually kept consistent uh throughout so that there is no uh uh consistently consistency or accessibility issues that might occur in terms of so this is not only for applications mobile applications or web applications it also holds true for uh graphic design or print design that the teams do so this guide basically helps you know have uh all of those are done uh with just uh strictly following these guys okay so let's quickly get into uh each of these components okay so buttons so in material design there are three types of buttons and they might have different uses okay so this is a contain button so contain button is nothing but a primary button in other terms uh where this button is used for primary actions uh in a particular screen and then there is an outline button uh which is the same button but does not have a fill okay just as an outline and this is otherwise known as the secondary button which could be used for functions that are not very frequently used i mean probably used but not to an extent of a primary button okay and then there is a text button okay uh so text button is used in cases of very rare uh use of uh button or it could be even used as uh something that need not be emphasized so much say for example uh the function delete okay you don't want the user to use deletes the star icon but then it could be any icon it could be like uh say it could be a like button with a thumbs up or it could be a share button with that share icon so it could be anything okay so this is the placement of the icon and then this is the uh font uh the text with it so it's the same case for outlined and also a text pattern okay so usage of the buttons so use the buttons are used in these uh components i'll get to these components as we go through the list uh dialogues model windows forms cards and toolbars so i'll actually explain each of these as we go through uh so this is actually material design that is uh most frequently used uh there is also a material design 3 that is launched recently so that has uh that focuses more on you know the functionality and interaction design the most used design system is this with material.io so all the components that is here are the most used okay so like i told previously this is the emphasis of each of these buttons so the highest emphasis is the contain button which is the primary button and then medium emphasis is the secondary button and then low emphasis is the text button which is otherwise called tertiary secondary medium emphasis dissecting and then plushie okay so that's about the button component so next component this this is what i actually talked about which is the just a quick info guys intellipaat provides advanced certification in ui ux design this course is developed and mentored by en ict iit gohardi the course link of which is given in the description below now let's continue with the session floating action button okay so this is an icon that was first used by google in their gmail so say for example this this is gmail and then they had this add button which you could click to compose a new email so this was first introduced by google and then later it was also changed into an extended button where you know it was an actual button that was floating on top of the screen so it's it's called floating action button stands for fab uh because it floats on top of the screen okay so even when you scroll it's going to stay in the same position it's basically floating on top of the screen so that's why it's called floating action button so there is the new version of the button where it's extended and you could actually have an entire text on top of it plus you could have an icon also okay this is the added to the current uh design that gmail follows the compose button that you have in gmail okay uh so this is just another addition to the button family that google has created and this is its usage okay so this is a primary action and it basically is floating on top of a list of items on a screen and it's used to add a new item that is in case you in case of an email you uh you know click to compose a new email or if it is say it could be an app that allows you to post things post statuses so it could be a button to help you add new posts okay so the next component is cards okay so card is basically a container element okay so a cart could contain multiple uh things inside it uh say for example this is uh a card that has a card title and a secondary text okay so this could be used as this component could be used for used as uh an element in a post say it could be used as a contact element where you have the contact name and then the contact number so this is a company that could be used that could have multiple uses okay uh this is so elevated so this card is called elevated because then you see this elevate elevation that you see around it so there's like a shadow around it which makes it look like an actual card on the screen so that's why it's called elevated but you could simply have an outlined card where it has no shadow but just a plain element so this is an element that you see in the contacts that you see in thing or it could be you know the food food listed in a food delivery app so all of that is in a card okay so the card could have an image also okay uh so let's take the food delivery example itself so this is a image of the food and this is the title of the food and the second text could be the price of it okay and there could be some other supporting text saying you know the ingredients added in that particular dish and then there could be other buttons added to that card so this could be add to cart or you know customize your dish or you know any other actions that that might support this particular product okay so this is an example of use of cards okay so this is actually exactly what we saw there so there is an image there is uh you know a title and then there is a secondary text below it okay so this is basically a photo image sorry photo app which tells you the name of the photo the photograph itself the name of the photo and then what's the you know the size of the photo okay uh moving on to the next component which is check boxes okay uh i'm sure you would have used these components uh in your everyday life uh checkbox is very simple it's just a box uh that basically uh implies an action of being selected okay so there are different types of checkboxes okay so checkbox action is very simple it's either select or not select and and also it is in combination with other options for you with with you which you can uh also select so check boxes when you're using checkboxes you should allow the user to select multiple items in that list okay so these are other elements that are very similar to checkboxes which is radio buttons and switches okay so the function of check boxes is you can actually select multiple items right and uncheck multiple items but in case of radio buttons it's either one or the other okay so you could have five elements but at a time the user is able to select just one okay that is the function of the radio button and then in case of switch it's just on and off which is actually very similar to a checkbox okay uh you basically you know turn it on or off and you could do it with multiple elements as well just like a checkbox okay so moving on so chips are basically uh you know tags of a particular component say for example uh if you type in an email address of some person and it's gonna basically create a tag for you with that person's name and image okay so that's called a chip so chip basically represents a tag of a particular component that you have in ui another example of chips could be filter options that you use okay say for example uh you are in your photo app okay and then you try to sort out all the photos in your application okay so you select portland uh you have pictures you have taken in portland you've taken you've uh selected uh photos you have taken while biking so these are actually added as ships on top with a cancel icon okay uh these would act as filters for the photos that you're sorting okay and uh this is an element that you would have probably seen in most application uh most applications and it has multiple users as well so in this case it's used as a filter but uh in this case it's used as a selection so yeah in this case it's actually used as a selection uh you could actually compare it to a radio button in this case where you are able to select just one so this actually comes into this could actually be this whole section could be replaced by a radio button where each of these have radio buttons uh you know extra soft soft medium hard okay so we're actually buying toothbrush okay and we're trying to select a type of protest and at a time you can actually select just one option so this could actually have radio buttons but then it could also be used uh this could actually be implemented with just chips okay so this is another use for using chips and another option is called input chips and this one is called choice ships so choice is basically you select just one you're able to select just one option at a time okay and then there is a filter chips which is actually very similar to the input chips okay you're actually inputting something in order to you know make a search the same way you basically choose from the ships that already exist choose whatever you need as filter and then you have results based on what you select okay and then uh you also have action chips so action ships are again used in place of buttons so action ships again are used for performing certain actions with just one click or it could trigger a particular action so in this case uh turn on lights if i click on turn on lights it's gonna basically turn on lights so this basically this is a smart home application uh you turn on lights it basically turns on lights it interacts with another app and then set alarm is going to trigger probably another screen where you select a time to set an alarm and then there could be multiple options that you could use these chips the action just for okay so the next component is data tables okay so data table is basically a component just just that just has uh data elements with attributes on top so it's just a very simple table component that you could uh leverage in any of your design okay so it's just a very simple component so if you see in this example here it could be used in multiple places where in this example there is a table that has multiple checkbox selections and then there is a page nation at the bottom where you could go to multiple pages or if you put you know select multiple pages uh multiple rows to be displayed for you so these are some places that you could uh use this component but what is important right now is that you understand just these components uh i'll get into use of these components as we you know go through the wireframing part so next component is the date picker so this is a component that you would have probably seen in multiple applications in google or even in other applications that would have used uh mostly web applications so uh date picker is just a date selection component where it allows you to you know select your year your month and your date okay it's just a simple selection so there are multiple elements to it so here on top you have a edit icon that you see on so that basically you click to uh you know edit it manually like you could just simply type in you know the date manually or you could uh you know go below and select from this drop down that says now but 2018 so you could basically select the year and month from there uh or you could use these arrows on the side to you know navigate to different months in the same year okay or and once you've reached your ideal year and month you could simply select on the date that you prefer and then click okay okay and this selector picker also comes in selecting a range of data say for example you are booking a hotel and you are basically you basically want to select the dates that you want to stay in the hotel so in that case you select a starting name and end it so it basically selects a range for you so this is a component that is used in that scenario as well okay so these are the components are actually explained for you uh and this is a date range picker that i just uh talked about okay and then this is your uh input sticker so this is also a very similar component where you could either try to use so when you click on this calendar icon that you see so it basically takes you to the calendar view that you actually see on top here okay you could either have that or you could just simply have a text box where you could uh type in the date manually uh without having to you know select each one individually so this is the uh date picker component and then next is dialogues okay so dialogues are actually very simple components so they are actually very similar to cards that we saw but then dialogues are overlay components okay so unlike cards who are which are in the main screen dialogs are components that are placed on top of a content on a screen okay say for example if you are deleting something a photo from your phone okay say you go to google photos you try to delete a photo from there it basically asks you a confirmation saying you know you know doing this would permanently delete your photo or movie doing this would probably you know send your recycle bin or uh whatever that prompt might be right so what this dialog is used for is giving prompts for users for the actions that they have performed so that is actually one example and uh there are multiple uses for this uh dialogue okay so this is the uh the example that i actually talked about right when you're actually trying to just delete or discard something uh it gives you a prompt uh saying you know there's a component overlay on top of a screen so this is not an individual card uh like the other example that we saw but it is actually uh overlay on top of screen and this is one scenario where uh you know it basically gives a prompt for the action that you have performed so you try to discard the draft that you created uh it basically gives a second uh prompt i mean you've already clicked on discard i mean you've probably you know already just click on delete or discard it gives you a second level of confirmation so that you know you might have not done it by mistake so you would have probably you know deleted some mistake so by use of these dialogues you have another chance to you know just a quick info guys test your knowledge on ui ux by answering this simple question which of the following is not an example of a context research method number one field study second dairy study third usability text fourth contextual inquiry comment your answer below and subscribe to intellipart to know the correct answer now let's move on with the session retrieve that or you know get away from you know having to perform that action uh so this is one way of using it i mean that is prompt for actions and then there is an alert dialogue where uh you know it just simply has a dialogue with some information or details or actions for the user perform so in this case in this example it is the setup account so in most apps that you download it basically asks to sign up with an email uh in more scenarios so in that case you have a similar dialogue where it asks you to select uh your email address so in that that's an alert dialog that pops up for you so this is a case uh even for desktop applications not just mobile even in desktop applications you have different types of dialogues that pops up for you and that holds different actions or prompts based on the actions performed on screen okay so this is another example of diagon it could also have a list of items in it so in this case you are basically trying to select a ringtone to set for your phone so there is a huge list of all the tunes you could so in this case there are two sets of uh you know interaction that this holds uh so there is a radio button so which allows you to select just select one at a time and then it also plays the sound for you all right it's it's going to play the sound for you uh and uh see if it you know you see if you like it and then you set that so this this is another use of uh dialogue and then uh there is a full page dialog you might confuse this for just you know any other form or form page but this is also a dialogue uh how you find that find whether this is a dialogue or not is you know you see this cancel button on top okay so a cancel action is always put only on the dialog okay in other screens there is always a go back button or a back button that is always there but if there is a cancel it is always a dialogue okay so here there's just two actions that you can perform in this you can either save or you can cancel that is the same action that you could perform here also so there is a cancel and then this okay right so that's how you basically identify a dialog okay this is an example of a full screen uh dialog okay uh so the next one is uh dividers so dividers are just you know lines that basically help divide two sections so if in these if you see in this section you basically see this small thin line that you that differentiates uh you know one section with the other right so there's a section that says bunch branch this weekend it's actually a message message component and then there's a thin line that distinguished between you know two different messages so that's just a simple divider that is used in these yeah so there's nothing much on this so there's just two different uh types of dividers so this is a full bleed divider which basically runs from one end to the other and then there is also a inset divider that basically runs just from where the content starts so it could be used in multiple places also so this is a middle divider where now there is some space on both the ends so there's another type of divider which uh a sub header also say for example it could probably you know cover the title of what's displayed on the page say probably the first section it's so so and then the section second section could probably have a small heading of what's actually below it i mean these components are very rarely used but uh most used is the ones short it's the most used is actually the full length divider okay moving to the next is the image list okay so this again is also very uh very simple component so basically it's just list of image layouts that you could use uh so basically this is how the uh you know google photos uh image uh list is actually made uh using this layout so the image could have other elements to it like a title or an action okay so in this case there is a favorite you know action where you can probably favorite that particular image uh and save it uh otherwise it's pretty straightforward it's just you know a collage of images it is just great for you okay so the next component is very important okay so a list component is important because uh when we talk about accessibility and consistency across multiple screens or applications under the same umbrella then our list component is actually very important so this is a one line list and then there is also a two line list that is there so this list component could be used for multiple sections like we saw examples of this in the previous screens like it could be contacts it could be messages uh you know message list and all of that where it has a title and second text so in all those scenarios list component would be an important tool it might seem like a very simple component but it's important because uh you know what needs to be paid attention to is the space between each of these list elements that's given so those are some things that need to be followed uh as we design so these are some different types of lists so this is a one line item two line item and then items so this is again a single line list that we see in contacts and uh two line lists that we see in you could see it in contacts or you could see in call logs and other things where now there's a contact name there's a number things like that so those are lists component okay and then there is a menu component so menu is also very similar to a list component but this actually has an action that's attached to it uh i mean even even lists have actions attached to it but then a menu uh is more like a drawer that pops up only after you click on a particular action so to give you an example of that uh okay so this is a drop down menu uh basically it drops down from a text box where in order to select a particular item so the how this uh functions as component is you are able to just select one item from it and then that is actually selected for you once you click on it so once you click on that component this all these options drop down for you and then you select one component and then select it for you so very similar to this so this is an exposed drop down menu where you can actually see here that you have a text box and you click on this small arrow on the right and then basically drops down actions for you so you select a particular item and then that is selected okay and then just like menus there is a navigation drawer as well so menus and okay menus are for selection uh dropdown method is a fraction and navigation drawers are basically drawers that help you navigate through the application okay this again uh in an example of say the gmail or outlook application so there is a three dotted i mean a three line icon on the top which is called a hamburger menu okay yeah so if you see here there is this three lines icon that you see so that basically holds a navigation drawer for you so it basically pops out a huge menu that has all the options that helps you navigate through the application so basically it's called a navigation drawer because all the options that you see inside of it installed inside of this menu is used for navigation through the application so there is no other function for this so the good example would be a gmail application where you have you know the inbox uh you know outbox uh sent item trash all of these options are navigational items where you click on each of these items it basically takes you to a page that's relevant to that option selected okay so uh there are different types of navigations that are available that that slide okay so this is a fixed uh drawer so it basically does not draw from a particular menu icon it's always there for the user to see okay it's visible to the user always and that's a standard drawer and then this is a model drawer or otherwise known as a hidden drawer like the example of a gmail menu navigation bar so it basically appears on click of nikon and you can select where you want to navigate to and then it takes you to that page okay and then there is a slide from bottom drawer okay so uh i think uh there are a bunch of applications that we use that has so this actually performs a very similar action okay it just draws from the bottom rather than from the side that's the only difference otherwise all the functions that are part of this menu is the same uh so that is navigation drawers okay then we have navigation rails so navigation rails are very similar to navigation drawers but in case of navigation rails you have a floating action button okay uh that is attached to the navigation and you have a bunch of options uh here so this you can actually compare it to the uh desktop gmail application where you have uh all the options that is inbox uh sent and uh no trash all of that along with a floating action button on top which is compose uh so that that's a good example of a navigation trail okay next is tabs so tabs are basically again used for navigation purposes between two screens between two sections okay so here i have tab one and tap two which i can actually click and change so i click on each of these tabs i can actually change and uh this is one this is called a fixed tab okay so they basically uh click on each of these tabs basically gives me two different information on the application so this is a scrollable tab so in case i have multiple options okay so i can actually scroll through the options that i have so this basically has like 10 tabs okay so i can actually horizontally scroll through the options that i have and i can you know go through each of these sections uh so a good example of this would be so this is basically your flight booking app okay so here you have an explore option uh explorer tab and then you have a flights tab and then trips tab okay so these are three different tabs so if you navigate through each of these tabs it's going to give you different information different information for you uh so this is a use of a tab and then this is another example of so this is basically a photos application where you actually navigate uh between multiple options like for example cats you get images of cats and then you navigate to other options like dogs and birds okay so this is the placement of you know tabs and use of tabs so there are multiple places that you can actually use these tabs so in case of you could also use it in in case of you know your contacts uh where you can actually navigate through you know recent contacts favorites or probably nearby contacts or yeah so these are multiple uses of apps you can either use it on top of a screen or you can use it below a screen so you could use it at any place but the purpose of this is to give you different screens for different tabs that you select okay so this you could actually call it very similar to uh the navigation drawer that i showed uh but in case of a drawer it's actually uh you know they're fixed for you on the right and it's mostly used uh so a fixed drawer cannot be used in a mobile application because the mobile space is very small so in a mobile case you will actually have this tree dot just like in this screen that i'm showing you see that three dotted icon on top right so basically i click on that it basically opens a navigation drawer form so i can actually scroll and you know select what i need and navigate to that particular screen okay but in case of tabs it performs the same function but it's always reveal for the user and i can actually you know juggle between uh all of these tabs so that is tab and then the last component that i wanted you guys to show you guys today was the uh text fields okay so this is a very important component and this is probably used the most the most used component in most applications okay so you can't actually find applications without you know a text field uh so text field is very simple basically it's an input field where it's you just click to enter anything into the thing it could be a name email id or any other information that you want the user to enter you could use this component okay so this is a simple field label this is an outlined label where this is a simple box and then you know you click on it the label basically goes to the top allows you to type whatever you need and this is a filled label this is just another type of table and the type of text field they could use so there is no particular role of you know you have to use this for something or you have to use this for other it is entirely depends on relevance for the app so there are other elements to the text field okay so there is a character counter okay so this could actually have an iphone uh next to it in order to indicate what you have to type like for example you want the user to type in their email id it could have a small icon of a letter that indicates email so that they could they know what they need to type even i mean even though the label will spell out email address it's just an extra visual representation to you know make them even more clear that it's their email letters so sometimes people just you know visually see something and enter it rather than read it so that's a small addition that you can have in the text field and then there is a another icon at the end of the thing that you could use so in this scenario it's a you know eye icon which basically uh you know shows and hides it hides a password so this is a feature that you would have probably used in uh most uh you know applications by logging in where you could you know click on this icon to simply see what you have typed what password you write so that's another function and uh and there is another small element on the at the bottom that basically indicates uh what needs to be done well so indicates uh limits to the action that you're doing say for example here it says 0 out of 20 so that basically indicates how many characters this text field holds okay so this information could be useful for the user when they're actually typing in their username say for example they're setting a username or a password for a particular application they know that this is the character limit like it can't exceed 20 right so this is a small indication for the use to keep the user informed about profit so it'll be the same case for an outlined text field as well okay so if you see uses of text field in most scenarios so this is the use of the text field so these are simple text fields okay so a text field could be just uh entering uh plain text it will just you click on it it pops up a keyboard you can enter it or it could be a drop down like in this case you see the area selection so it's like a drop down text field you select and then you saw that menu drop right drop down menu that we saw earlier so that could be implemented in this area in this case uh where you you know simply click on that arrow and then you select from the list that's given for you the same with the state also okay and then if you go below you see this birthday with a small icon that is used at the end which is the calendar icon which again pops up the uh your date picker component okay so this this could be one uh some ways for it for use of this so this is the fill text field and then this is the outline text field so both have same functions it's just you know you could use either of these uh based on the theme that you select for yours so here's an example uh that i actually told right so uh i actually mentioned about this email icon to be displayed on the field so here there is a location icon that's being displayed so that people know that this is location and then there is here there is a calendar icon which indicates the data okay so here is another example uh for uh that helper text or assistive elements that we actually saw earlier so you saw that 0 by 20 on top so that's actually a helper text basically helps you helps the user understand how many how many characters should be put in a username or password so here in this case the helper text is actually put below the text box so that's uh basically indicating that it is wrong to be used say for example you have uh inputted a wrong email address like it's not in the email address format then it's going to give you an error message below it's saying you know this is not a valid email and then it's going to give you an icon a warning icon on the site uh to indicate that you know this is not accepted uh in the text field and you'll you'll have to retype it again okay so this is just another scenario for use of the helper text and the icon on the side so in the previous case that we saw we actually saw the i icon to reveal the password and hide the password here it's just an indicative icon to show that you know this is wrong and you can't do this okay so uh these are the components that are most used in creating uh ui design so these are components that you should be aware of because these are important when you're actually trying to you know sketch a concept or sketch an idea or anything that you might do in the ideation phase okay so uh without actually knowing that these components exist it's impossible to actually sketch out ideas so figma is actually very similar to all the design tools that are out there and this is the most famous design tool that's used by designers designers now okay so to get get started with this tool you simply have to click on new design file okay click on new design file it basically opens tab view okay it brings about a panel of the sort just a plain panel so you have a left navigation and then there's a right controls memo okay so here on top you have uh naming so you just click on untitled you can actually name your file here okay so you can actually name your file this basically indicates where it's stored okay so right now it's in drafts but you can actually create a team name for yourself and then you can move it there but you don't have to worry too much about this now just you could probably rename it using this just click and then you can type to rename it okay so i'll talk about the other features in this thing so like i told you this is a left panel uh where you have layers and assets i'll get to these reviews and then your right you have the controls for what you perform on this screen okay so on the middle you see this is your uh work area okay it's called different things in different tools uh i'm i'm not entirely sure of what's called but this is your work area where you create uh all the designs in this middle panel okay so the middle panel can be zoomed in zoomed out you can actually see it right now but when i create something you will be able to see it okay so getting to uh the features on this this is actually very quite quite simple it has very few minimal options available for you so it's very very easy to understand okay so here the figma icon is your main menu where you can have you have uh options to create a new design file a new exam file so basically whatever options were available in the home page right all that is available for you for you here also so uh there is uh the things that you want to view so right now it's actually viewing a pixel grid for you okay if i uncheck that okay so these are some uh view options that you can have so i'll actually get to the view options later as i uh you know show you that uh so there are other couple of bunch of options which i'll actually get to as we you know start with this tool so there is this like this arrow i can the cursor i can that you see so this has two functions okay there is a move and a scale function so move function is the default uh you know icos that you see in the app so you see this cursor on the screen right so that is basically a move so you can use this to move a particular object uh here and there and then here you have a frame okay frame and a slice so i'll explain frame first slice i'll get to later so frame is basically uh you trying to create a frame uh to design it okay so when as soon as you click on the frame icon you have in the controls panel you basically have a menu that pops up okay it opens your default uh options like it opens a desktop and shows you you know different options for you to design for so this frame is basically uh you trying to design for the device that you want to use okay so here you have a desktop that has macbook 14-inch 16-inch and then this is a normal desktop resolution and then there's an imac that you can design for and then in phones you have all the iphones and then there are two sizes for android android small large okay and then the same for uh tablets uh some tablet options and in case you are creating a presentation you could use the same tool to do that you know you use 16 measure nice slide or force two three slide or if you're designing for a smart watch you could use these and yeah and so on you have paper social media like if you're creating instagram post you have the size for that and all of that so frame is basically the size for each of these devices and so i'm say for example i am going to design for iphone 13 max bromax okay so i click on it basically creates a frame form in the size of iphone 13 okay so this is basically the screen size that you're seeing on iphone 13 and whatever you put in is what you're designing for that phone okay so here i actually told talked about this move tool right so what this move tool does is you can click on that whatever you have it could be an object it could be a frame whatever so in this case i have a frame okay so i can click on the frame i can move it around wherever i want i click hold and i move okay i can do that and so this frame has couple of controls here okay so right now the frame size is actually 428 by 926 okay so this is actually in a pixel unit so pixel is basically so there are 428 pixels in uh you know the width of it i mean pixels are basically small dots that you see on the screen okay that's what brings about an image on the screen so there are 428 dots in this line and on the horizontal line and then personal side so that's what this size represents okay so you can uh change the sizes uh if you need from here you just simply click on it and then you could change it okay so yeah that's about my move okay i can do that and so this frame has couple of controls here okay so right now the frame size is actually 428 by 926 okay so this is actually in a pixel unit so pixel is basically so there are 428 pixels in uh you know the width of it i mean pixels are basically small dots that you see on the screen okay that's what brings about an image on the screen so there are 428 dots in this line and on the horizontal line and then personal side so that's what this size represents okay so you can uh change the sizes uh if you need from here you just simply click on it and then you could change it okay so yeah that's about the frame so i'll get to the other details as i you know create screen so once i've actually added a frame here right it basically clear creates a layer for me so in this layer i have this frame selected here so let's get to the other tools available so there is something called a shape tool over here next to the frame so shape tools allows you to create particular shapes like you create a rectangle line arrow ellipse polygon star or i could place an image okay image that i have in my desktop i could you know select this and place an image say i'm creating a rectangle i select i get an icon a cursor changes to a plus second so what i have to do is just click and drag to form a rectangle so a rectangle tool can you know i can actually i can keep holding it and then try to you know size it however i want or i could simply select it and i can change a particular size that i need say this is the size that i want i want 250 by 50 as height s250 height as 50 like create a particular size and then i could place it wherever i want okay so here when i select a particular so i've actually added a component here i have actually added a rectangle here so on the layer it's it shows that it's you know i have a frame and then i have a rectangle added under that frame so you see the small arrow here right i can actually click on it and then it basically collapses i can click on it again it basically expands and show me shows me what's inside that frame okay so layers are important because you will know what all components you have added and you could even choose to name them say for example i name this as a button so i have this button under this frame okay and i have other things also like i have a line i have an arrow ellipse ellipse will be the same thing like i could create a circle here so if you want to create a see right now i try to you know click and drag i'm not actually getting a perfect circle right so in order to get a perfect circle all you have to do is you know select eclipse i click okay i hold shift then i drag gives me a perfect circle okay the same with other things say i want a polygon i could you know create a polygon of the shape but when i hold shift it gives me a perfect and as for the polygon i can actually uh so polygon is basically poly means multiple so it might have multiple sites so by default i get a triangle okay but you can add more sites to it in the control panel i click on this volume and you see this icon right over here so i can actually set the number of sides it needs to have say suppose i wanted to have five sides i type five it gives me five sides okay so i want you to have ten sides to give me a ten sided volume okay so these are some controls i can have over the elements that i create so next tool is the pen tool okay so pen tool is basically uh for free hand drawing of elements okay there could be multiple uses for this you would have seen a similar tool in photoshop illustrator or xt you know every other tool has suspend tool that you could use so it's that this sigma also has a very similar tool so pen tool is basically for your freehand drawing uh so you could you simply click and then here's a nodal point and then you could click elsewhere anywhere you want and then it connects that okay and i could create a shape like this okay it's created a shape for me and once i'm done i just click on done and then that shape is created for me so what i can do is i can click on that shape i could add a fill for it so under stroke i can actually you know try to change the color of the stroke here and then i have a shape okay so what else i can do with the pen tool is i can say for example i click i click a line i get a straight line right say i click i hold it and i try to move around it gives me a curve okay and i can actually fiddle with these modal points to you know adjust the curve that i want i can click here adjust the curve okay so once i've actually created a curve i have to click on that nodal point again in order to connect that say i go here and then i connect so i'll change this little bit so i get a shape like this okay so you could use the pen tool for creating custom shapes if you need it okay so next we have the text tool okay so text you click on text tool is you basically get the same kind of cursor for you all you have to do is click and drag it creates a text box for you okay so here it gives me text area i can type in whatever i want in this text area okay and i could simply select the text area so i select that text it gives me the text here i could edit it it could even shrink text area that i want okay so yeah that's how the text area works so basically i just simply click to create to create text okay and i can you know double click to select all the text i just click double click or i can just drag and select all the text or simply just select the text box and i have options here to change the font and change the weight of the font and change the size of the font say size 50 and uh also other alignments like you know line height uh letter spacing spacing between the letters right now it's at zero percent like i put it as 20 there's more space between letters and uh then there is paragraph spacing uh that i can add to it and also the alignment so right now you see all of this is left aligned i could center align it i could left an island so yeah i can perform all these controls on the text over here uh i'll get to the controls of the other elements soon okay so this is the other tool that you could use and then there is a hand tool okay so hand the use of hand tool is very simple it's just for you to click and move around your board okay which is easy for you to move on so the other way to move around is if you're using a macbook it's your two fingers move i think that's the case even with the windows i'm not very sure so you put two fingers on your cursor board and then you basically move it move around it's the same function with the hand tool okay you click on the hand tool and then you click and then you can move around the board okay so this is the hand tool and then there is a comment tool so this is available only in sigma so common tool is basically used for collaboration so in case you're working with another designer or you're working with your manager and you want to share this design with them so you simply share it i'll show you how to share it but then once you've shared your managed could probably you know add comments to it i just click i could probably say you know the manager can comment on it and uh you know add that comment okay so i could click anywhere on the screen and add comments so that's just a comment tool here so once i click again on the common tool basically so uh so those are the options available for you here and there are multiple op controls that you can do for each of these so let me get to the controls so i have this rectangle shape here right so you already know i could use the nodal points to you know reshape it move around and do whatever shape i need and i can also control the width and height of height of it over here okay so if you're wondering what x and y is is x and y is basically the position x and y position of this particular object in this entire board okay so i just change it to 75 just a quick info guys intellipaat provides advanced certification in ui ux design this course is developed and mentored by en ict iit gohardi the course link of which is given in the description below now let's continue with the session okay before that i would also want to you know talk about whenever we are trying to understand a problem for the solution of it let's not behave as an expert of giving solution let's start adapting a beginner's mindset like it's a medical fraternity we are trying to understand the problems our ears are bigger and we are trying to understand everything as a beginner in the hospital or the medical uh situation medical hospital situation look for need around you so you need to you know also look for all the requirement what the user might require describe an innovation challenge three part who what is the need and why here from companies professional who have adapted the design practices you know this will also be part of when we are identifying a problem we are trying to go to other people who are doing the same thing in the case of chro the hr issues maybe we are trying to find out like the problem is with a company maybe just think about ibm if they have a problem we'll try to find out similar companies draft a user journey once we have understood all this thing we will draft the user's journey the id as its journey and then later when we have worked on the solution we will create a 2b journey you know with the solution schedule observation and interview so this is all we required to do in the identification problem of the problem phase this is the you know kind of a journey of the user like identifying the user's journey like this was a crude example of finding out a movie and in the full time and then you know watch it and give it back like they used to drive to a video parlor or the movie party so go to video parlor you know pay bring the cassette home watch on movie go back return pay the lead fish if it is any and then come back home so this was the process and how it's to resolve so what i'm giving here is an example of the user journey how currently the whole task is done by the user so later we'll try to find out where the problems are and how those problem can be mitigated right so this is a an example of user journey now like whenever we are trying to identify a problem this is how we can identify these are those examples of finding out a problem identifying a problem whenever we are trying to define a problem this is the step even before that like how we can help employee in our company feel more comfortable how much we help analysis in our company more productive during this strategic and planning phase how we might be reduce the stress of computer commuters all kind of problems so this is the example of the problem so we can pick up any problem put into that three you know segment is and then define the solution okay determine point of view the need the because the who all part of the pov we call it pov the point of view actually this is the definition of the problem okay and we put our problem into this format like who is the user what is the requirement and why for this statement okay fine now come to the second chapter once we have defined our problem we start ideating okay how do we do that the ideation phase what we are going to do we generate idea meet with our team to perform and document brainstorms inject inside from a broader group the bigger group as we just talked like we will go to other people how they are doing it all this thing will take information from there also and select idea to pursue further right that is our whole process okay now what is brainstorming it is just like four or five related people gathering in a at a common place and they discuss why they are discussing they are trying to ideate a solution you know it's a idea generation session actually where we are trying to generate an idea actually there could be wild ideas also there could be you know any kind of idea so it's a idea generation platform and it is very creative and it is very useful in working and there is a norm of idea generation what are the norms that we need to have a facilitator first a person who is not the active participant but he is conducting the whole show right and why we need to have this person because somebody is required to conduct the whole thing going into the right direction so we need a facilitator so the responsibility of the facilitator is to make sure that everyone is participating that the energy level is high all the time just a quick info guys test your knowledge on ui ux by answering this simple question what is a disadvantage of vertical navigation number one can accommodate only a small number of categories number two offers no room for growth number 3 is unfamiliar to users number 4 requires more space comment your answers below and subscribe to intellipart to know the right answer now let's move on with the session that is also the responsibility of the facilitator that nobody is judgmental here okay please remember this is very important actually whenever we are doing a brainstorming nobody would say that no your idea is bad no idea is bad at this stage all ideas are welcome okay also we are looking for quantity here in windstorming we are asking everyone and facilitator is also taking care that it should not become a you know kind of a like chaotic like everyone is speaking no the facilitator will make sure like you might become a facilitator in the brainstorming session please remember that everyone will speak you will give an opportunity to everyone but nobody should speak together right nobody should be you know many people are not speaking at the same time so we need to make sure that you know that happens the facilitator need to make sure that one speak at a time so that we can listen now the one more thing which is very important that any side concern like anything which is not really related to the subject should be you know paste it somewhere you know on the wall and we will talk later about that because here we are doing a very focused work and i have seen in brainstorming many a time that people have a lot many other things related and they want to bring up you know those things so maybe you know for that we can tell them that we will give a separate time and definitely we have to give a separate time to that that discussion will happen later so maybe we can just uh listen you can ask the all the people to if you have any other concern you can just note it down on the wall somewhere and we can take it later on okay high energies should be maintained that is also what that's what i was talking about now so this is the brainstorming thing which i was trying to explain that we are trying to generate idea around the problem and some facilitator will play a role of as a resolutions of this the whole meeting and he will follow all these things so this is the brainstorming which where we you know come out with solution now let's talk about the types of brainstorming okay the types of brainstorms are three types one is a crazy idea brainstorming you know a crazy idea of brainstorming is where we are not looking for anticipated ideas we are also welcoming you know unpredicted ideas you know which are not in this world actually out of the world ideas right and why we are doing so because we are in the beginning of an innovation you know maybe sometime what happens that there is no solution available in the world and maybe this crazy idea further refined later can come out with a brilliant you know turn into a billion idea so we never say no to the crazy ideas also let me tell you what is crazy idea like if we are trying to solve a problem of a for example there is a score like scout in jungle and he is actually looking for a hidden treasure a kind of a game and the the clue for the hidden treasure maybe some you know there could be some way of sending him the clue and on the basis of those clues you will reach to that destination the normal idea could be like we can just uh you know on walkie-talkie we can talk to him and say that this is how you can reach to that place or maybe you can have a sign board on the path the way the person can go these are the normal ideas but what could be crazy the crazy idea could be like you are having a kind of a invisible paint on the trees where he is going and those invisible paint on those trees can only be seen by some kind of a glasses you know and that way no other person will be able to see those things only that person will be able to see so this is you know kind of a crazy idea uh brainstorming will also help you know try to find out an innovative way these can be further refined like i will give you an example here when we are talking about this crazy idea of painting invisible paint on the trees and looking through a special glasses maybe google glasses can come handy and find out those paint and find out the ways like maybe some hidden encrypted language is also written on those trees with that color and when you wear those google classes like which is worldly thing you can find out the ways so this is how you welcome the crazy ideas okay so that's the uh crazy idea also you know i just forgot one more thing when we are brainstorming we are looking for quantity right we are asking everyone to throw as many ideas as possible they're bad they're good they're crazy they are whatever but we want more ideas why we want more ideas if you look at the old story like we kiss to find out a prince is old forever that if you're trying to find out a prince in a frog you need to chris as many frog as possible right so that's the idea behind it that you need to have the as many ideas written on the board as possible you know to find out the right idea so in encourage that when you are a facilitator in a design thinking workshop that you ask the people to bring as many ideas possible do not look for bad or good idea okay do not be judgmental at this stage that we will filter later on so that's called the crazy type of brainstorming now the second type of brainstorming is called sabotage brainstorming substance brainstorming is negative you know thought about a solution you know the sabotage idea could be let me broadcast the whole path to everyone and this person will find out his way but this will kill the whole purpose of the game you know so this is called sabotage way and why we do that to make our solution feel foolproof you know we will just put our mind on those ideas also which can flop the show why we are doing it so that we can refrain from them later on so that is also one way of doing the brainstorming now comes the third one which is actually very important the third one is called constrained brainstorming okay like whenever you are approaching to a problem it should be simple in the starting right i am giving simple example like an application created to deliver food at your home right now you can work on that solution like maybe there are listing of restaurant and there is a food dishes available and you can choose and you can order and you can get the food but now in this contest of constant brainstorming we put constraint on those on the user or maybe on the con or the situation the constraint could be for example like it is for the very old people now this food application is for old people so what you did you put a condition here you know like for the old people what you will do because old people they are not tax heavy they cannot see things you know these smaller things so those are the constant ah they might uh be looking for specific healthy things those could be the constant so this is the next level of brainstorming when we have done the first level of brainstorming the simple brainstorming we put constraint on the brainstorming put a condition on it and then further brainstorm to bring result in his certain situations maybe for blind people maybe for elderly people you know maybe in any difficult situation we just put on it and try to brainstorm again right so that's called the constant brainstorm so we talked about crazy brainstorming we talked about the sabotage brainstorming and we talked about the constrained brainstorming let's talk about the fourth one also which is very practical actually the fourth one is called the analog brainstorming like whenever you have a problem and you see that there is a similar situation is somewhere else and the situation is solved by some other thing that the same solution you put here and try to create a solution in this situation so that's called the analog brainstorming cases okay a little bit more about brainstorming that you built up on the ideas of others also the beauty of brainstorming with multiple people is this that you know uh we built up on the ideas of other person like for example if somebody has thrown up a crazy idea like uh invisible paint on tree maybe some other person say yes this is a good idea because you can look through the google uh glasses so that's how you build up a solution during the brainstorming so that's also a very good thing okay so this is about the brainstorming okay after solution ideation is creating user stories what is user story and why we create those user stories once we have defined the problem of brainstorm and we have understood this uh user well we tried to define his path of of the part of his life of doing related to this problem so that's what the user's through is your story are a simple tool to articulate the user's perspective they are not long they are not worthy they are actually you know a short single sentences things they are particularly important in agile environment where they facilitate the functionality of a system but can be used in any environment to ensure that design and development are focused on user need right so we are creating those blocks around which the whole you know functions are being created first design and then then uh implemented they deliver the who what and why the same thing which we have discussed earlier so the user story is actually created to when we have understood the problem and how currently the person is doing his work we just create the whole path from where to where and what do we done that's called the user stories okay let's understand more about the user story okay let's understand also what's the difference between use cases and use user story so the user story was first described in 98 it was mentioned that the user story would be used to define scope of a development right so what we understood out of it that user stories are defined for the team who is working on that solution right from the designer to developer and the tester designer will understand what is need to be the solution needs to be created the developer will create code or you know implement the whole the function live on the basis of that user story and the tester will test on the basis of that user story only use cases are virtual description of action taken by a user which are usually recorded in universal markup language it is commonly agreed today that use case and use areas serve different purpose use cases address how a requirement will be handled whereas user story simply captured the requirement right use cases is the description of the requirement whereas user story is for the mainly for developer as to capture what is required to be done here in that piece okay let's talk about the benefit they are simple and quick to understand they allow programmer to quickly implement customers user and value they don't need very much maintenance and you can write in word of only they allowed to be chunked into a smaller milestone you will see that in your product development all the pms they first talk about all those things user stories and they give the you know the assignment according to user stores because this help them to create the milestone in during the sprint they make it easier to estimate cost on a project for the development right on the basis of user story you give the t-shirt sizing right that for how much time a designer will take how much time a developer will take on that particular user story how much that still do they facilitate cooperative working with the client and users right this can be shared with the client and you know mm team also like designer and developer and tester on the basis of user story they can have a better communication between each other okay user story can be very useful to articulate the users and clients requirement for a system in a simple one liner or for each requirement they fit neatly into agile development method and ensure clear understanding of what's needed from each sprint right that's what we created registry user story you can associate it with their development actually you know most of the time right let me give an example of user stories they are listed like this this is uh could be a you know user story for a recruitment website like these are defined like just like general user tasks browsing job post resume receive job alert post vacancy amend vacancy cancel vacancy this is for the prospective employee or the candidate this could be use case user story for other kind of user opt in a list of system events search job with basic criteria upload resume in pdf uh subscribe job alert uh no this is again for the employee the other one is hourly backup for system data build a resume with resume builder again this is all for the user actually employee employees so what i'm telling here that these are the example of user stories you divide them into chunk you go to the sprint somewhere your pm will talk on this basis on this building block they will estimate your work in it according to this particular user story give the work to the developer or the designer or the tester you will understand how much time each one of them will take all this thing happen on the basis of this so this makes the communication easier you know among the team okay let's move on to wire framing low in high fidelity something which is very much related to us uh so what we are doing here we are leaving our shirt of ux designer and wearing putting on the shirt of ui designer now but i think this stage is for both as a ux designer also sometime you work on it and most of the time you work on wire framing also it came from very old well step list other kind of designing skill that is architecture or you know cad so they create wireframe which is a kind of easy solution which can be iterated very quickly because you have not put a other thing on it like colors like shield like lighting like uh you know or other thing you are just creating the wireframe and giving an a you know initial concept of the whole solution so that's the wireframing let me just explain what is low fertility wireframe and why we do it see i'll tell you what happened whenever we are working on a problem we create a prototype okay and in the initial stage of any solution it might be wrong you know 90 or 1985 it could be wrong or partially wrong right so you do not create something with a lot of work or you know hard work on edge because you are ready for the iteration so at this stage you are creating something which is highly iterative very easy to create and highly iterative that's why we do not put colors we do not put a particular font we do not put even pictures here and we create something which is looking like a solution but does not have the detail into it the advantage is in initial phase with the iteration is high we are giving a concept we give an idea we take up to the stakeholders and we discuss with them because this hypothesis is still right it is not the right solution this is on the basis of the assumptions or the values the solution going to give so this is a a very fragile or you know hypothetical asymptotic approach we are expecting people to come up with their comment on it and according to their experience and then we'll change it so this is the low fidelity wireframing which is done in the initial phase of the concept creation and we share with the people so what is high fidelity wireframing or midi fidelity wireframing okay when this is created especially when we are in the we have crossed some level of iteration these two a solution which people think we will start trusting that this will work then we create this high fidelity where we put the colors because sometimes colors are also important we put a you know specific font to make it look more authentic we still are not putting the images that's at least needed because they're decorative so of course they are informative also sometime but at least at this stage we can still work without them okay so low fidelity we do in the initial phase high fidelity we do in the final stage of concept let me tell you a very bad thing you know usually what happen whenever you are putting lots of colors and making it impressive you know it gains trust with your users or stakeholder they think yes yeah this is fine because this is looking so nice aesthetic appeal is there they are happy and actually as a true designer we don't want that people should be look at it and looking at one aspect and become happy we want to look at the real you know solution whether it is working for them or not so people we don't want their their mind to divert to some other thing aesthetic or other thing we want them to look at the real thing first right so that's why try to avoid the uh you know creating the high fidelity in the beginning stage two just to impress people sometime we do it i have also done it you know just to impress the client we have created the high fidelity and given to them and they are happy and and later we found so many problem so it should not ideally be done actually in the beginning stage we can do it later right okay let's move further site map site map is a list of pages of the website within a domain so it's a list of pages but not just as other list it is kept in a certain order you know certain hierarchy so that's how it is called site map like it shows the relation with other pages on the whole map of the website and why it is important um it might be for a designer it is good to know the whole ecosystem of all the pages but especially once you have your website or application running it help in seo also in search engine also to locate the correct place to go to your website so that's this much i will talk on the point of view of the designer for developer there could be more thing you know which should be learned so far site map is concerned like xml and all those things which will help too again in seo and google search so sitemap as i just told that it is just a interaction map of the whole website which we create once we have the whole solution wireframe accepted majorly this sitemap is the work of information architect who are trying to put the which thing should come first and what should come later those people are also the creative site map okay let me move further let's talk about clicking through wireframe prototype okay so what i'm trying to show you here is quick prototyping so this is my real life uh actually problem and solution okay what is the problem the problem was that a tester when they are trying to they are testing the day-to-day life they are testing the product once it is developed they found lot many ui related bugs the design related bugs like whatever designer has designed it is not 100 mapped by the engineers or the development team and not many bugs come on the stage for that tester so how to mitigate that problem of you know ui bugs coming lesser or how to smartly checking them the whole solution after first of all interviewing brainstorming ideating and then coming up to a solution then i wish to this process improvement solution here so this process actually earlier whatever's process was there of the product development life cycle i just tweaked it or added few step make it a solution for the tester where the ui bugs are reduced or they are tested quickly or smartly that's the solution which is depicted through this process diagram now let's see what we are doing here okay so what you do like sigma has this three thing here you look at here like there is a design phase of the whole solution there is a prototype phase and then inspect phase design phase is the first phase where we all designer design the whole solution the whole pages of the application or the website once it is designed we go here especially when we try to create a prototype what we do we connect each page with each other in a logical manner as how it should work like in my case like i this is the first splash page and i just explained the new improved process where it's a click here to proceed i see what solution is there when you want that user when you click it goes to next page what do you do in figma that you just simply you know arrow will come up automatically and this arrow will connect to the next piece simply it is done now you are connected whenever you will click on this button you will go to this page we'll show you later now you have more attribute to add here where you want to show this click happen should it be a push horizontally or pull horizontally or pull vertically horizontally that is also you can define right so this button is connected to this page now in this page we have the second step which is the designer consult with the developer to check the feasibility now this is a designer this is his design he's explaining to engineer engineers will tell that whether he can work according to the current skill of technology whether it is possible or not that discussion is happening here so if the user of this prototype want to go back he will click here and he will put this arrow to back button but if the user want to go ahead from this stage you can just go to the next page like this right on next page what is happening designer work on the design now what happened like out of this if the developer is saying that no this is not as feasible then the designer will work on that part and then once again he will once he has worked he will go to the next stage where they will share with the whole team of developer tester and designer all sitting together and what they are doing there are two conditions here some changes suggested by the team are out of this meeting if this is the condition then where this user will see the next thing he will see he will go the designer should rework on those changes if not no changes are required then what will happen you can go to next page like this you see that this hotspot created and this arrow is telling that this page will come when you will click here on this right and once you are here the next step is what is happening here the designer after completing the design is sharing the design guideline to the developer and tester and is also sharing this figma file on which this application is created with the developer and tester if the user of this prototype want to move forward he can go here if the user of this prototype or the viewer of this prototype want to go back if you still want to study what is there in this step they can go back so this is the way of creating prototype let's see how this is running now it is getting created this is the home page this is the first page row one you can put it anywhere that is how the ideally prototype should start from okay i come here on this next second step i go to next step i go to next step i can go to some changes step then go to next step again so that's how the whole prototyping can be done right just a quick info guys test your knowledge on ui ux by answering this simple question which of the following is not an example of a context research method number one field study second dairy study third usability text fourth contextual inquiry comment your answer below and subscribe to intellipart to know the correct answer now let's move on with the session welcome to the wonderful profession of ux and ui design if you are going to select this career you are going to make a decision to select one of the career which is right now very hot i think this is the one of the top hottest or sought after uh you know career path right now in iit industry and non-it also let's start and understand what exactly is this ux and ui design is and why it is so popular okay so let's understand what exactly is ux design first so so the user experience design is a process of enhancing user satisfaction with a product by improving the usability accessibility and pleasure providing in the interaction with the product so what a user experience designer does he actually designs the the whole experience it is not just designing a screen but the whole experience like how the different tasks are important which are the different tasks are important for these targeted user and how he will be performing his task and how quickly he can do that so that is what a ux designer does ux design is little different than ui in a way that ui speaks about just the you know the visual interface designing but whereas ux is dealing with the not only ux interface designing which is also part of it but it is also dealing with the psychology of the user their requirement according to their behavior their education their requirement their environment all those things he considered and on the basis of that he does research and then he you know create the whole uh the task flow is how the whole the task so whatever task a user can perform on one product can be performed in a best way so that's the difference between the two thing now let us understand more elaborately about the difference between the two thing which is ui and ux so on the left side you will see that ui is actually just interface design or visual design so it is the user interface that is ui but it is it is not ux if you look at the us on the right side you will see that ux involves in ux design involves like field research you are not creating product nowadays sitting in your office but you go out you try to understand your user you interview them you create persona when when you come back and get out get all the data with you and on the basis of that data when we analyze we create persona we create the interactive design like how the interaction should follow the whole flow uh like information architect that is also the same thing usability like how is this product should be useful prototyping interface design and visual design the the left side thing also comes under it so the whole you know basket is ux design whereas ui is just we are talking about interface design or visual design let's understand the ui and ux difference in a today's like day-to-day life situation you know on the left side if you look at this is the ui these are the user interface like a couple and and a saucer a table a chair these all are the user interface but you look at the right side you will see that this is the whole environment which a user is experiencing right from the the you know ambience the ac the air conditioning the furniture the waiter the way they are treating the customer the way the product is you know like the coffee or tea is coming and how they are tasting and the maintenance of that taste and uh and sitting there and doing their work feeling relaxed everything included is the user experience so that's the major difference between the two when we talk about ui we are talking about the objects creation but when we talk about the ux we are talking about the whole experience actually let's understand in the context of the software development if you look at the left side there are you will see that there are digitally designed you know way to work with like elements like sliders the buttons uh or or it could be input boxes or it could be drop down or any other things so these all these things are ui but if you look at the right side you will see the whole task flow and all the thing whatever use user does everything is available for this user and is comfortably working on that the whole whole product comfortably and performing his task that's the ux that's the user experience design now uh what the the most known designers are talking or telling what is u.s design okay so one is jess james jesse james jared he's a californian based designer he says that the value or the experience is not just experience itself it's it's what the experience helped us to accomplish okay so ux focuses on how the experience help us to accomplish certain tasks not only just the experience that is the us design let's talk about a very you know known or popular phrase called design thinking without design thinking working on ux is difficult so let's understand this thumb design thinking refers to creating strategies designers utilizes during the process of designing okay so it is just about it is about a creative strategies like whenever we have user uh we just work around him like what kind of user he is or she is what kind of thing of the pain areas he is facing and how we can uh solve those pains by creating the design around him according to his requirement according to his ability according to his ambiance or jio or or you know the geography all those things are considered by the ux designer let's understand the design thinking this comes which is first you know produced by stanford university and they divide the whole design thinking process into five step which are empathize define ideate prototype and test so let's understand uh what are these five steps uh of these five steps like empathize what we do we try to understand our user what they are doing what their need what is their pain areas in the second phase of define we try to understand uh like what are the competitor and what are the business goals and what are whatever we have understood on empathy phase with the users all those things combined together then we form a problem statement we define a problem statement once this is defined we go to ideate state where we try to create a solution we try to brainstorm or generate a solution around those problem that's the idea phase once we have generated a solution we go to the next phase which is called prototype phase and to those generated idea here in this step we try to give a tangible you know look to that by creating a wireframe or a prototype a working prototype or which is quickly created and then what we do when we have created this prototype we again go to the user and test it just to check whether this whatever solution we have created the prototype we have created if it is working properly for these kind of users or not once we have tested we have just checked with the validated with those users and according to the feedback we further improve it and that's how the whole five step of design thinking used to come one by one other big organizations like ibm or salesforce they have also come with their own design thinking approaches and it is nothing just they have just customized the stand for design thinking approach into the way they they think would be much better for their practices so they have actually their empathize faces understand where they put hill on it which is a defined thing where we are defining the situation the problem uh and then we go to explore we try to ideate the idea and which is around the sponsor user and once we have ideated generated an idea we created a prototype where the prototype is once evaluated with the uh those users then it it is taken back to the rest of the team and we see that whether it is working properly or not so this is how the design thinking exercise little more improved or customized by ibm over the stanford design thinking exercise more detail around it no need to go through right now let's understand uh the design thinking being implemented uh on on on an example and this example is about uh creating a chatting solution way back uh way back in 2000 where we only saw skype or msn were there to chat between the two people and smartphone just came into the picture and uh the people who are using a smartphone they are not tax service so for them to keep registering themselves and adding friends were very difficult that was the pain area right now in that situation with whatsapp when it came in so the in empathize phase we understood that the user uh people like ramesh they were not tax saving so um how they have understood this problem that the person whosoever he is using a mobile phone should be able to use it without creating account or adding friend that is difficult for him so the define definition of the problem is create a chat application for mobile that does not require creating an account and adding users that is the definition the defined phase of the problem now look at the uh the next phase which is id8 phase where we will find out a solution for the defined problem and the solution at that time which they generated was using sms and phone numbers instead of account creation use phone number as id and phone contacts the the the phone contacts whatever we have in our phone as the participant or the friends who can check together so no need to create an account no need to add people it's automatically taken in this two form like using your number as registration instead of registration and using phone contacts as adding friends so that's how the idea was generated and once this idea was generated the prototype is created it is taken back to the user and it is just run before them and they further improved it that's how prototyping testing sometimes goes uh you know in in in a pool like in a kind of a you know loop like for once this is done then we go we take this newly created prototype to the rest of the team when we're talking the rest of the team those could be engineers this those could be offering management and we explain the whole prototype to them and once this is explained and all the teams are on the same page the real development of that product starts so here you can understand how important the position of a designer the designer is the spear head they are the pioneer in the creation of any product they need to work first they need to do all the pain everything and once that product is finalized and satisfied the prototype is set is is tested with the user and user satisfied only then the full-fledged engineering work is start testing work starts other work starts okay so now this is about the ux and its ux design and its practices now let's talk about uh what are the responsibility when you will become a designer or a ui designer or ux designer so the responsibility are actually including like creating user centered design by understanding business requirement and user feedback number two creating user flow wireframe prototype and mockup i'm sure you must have heard about all those terms like wireframe like prototype and mockups actually uh wireframe are nothing but j they are the very low uh you know sketched or worked upon uh version of the whole solution which initially created right then we come to prototype stage where the wireframe are put into uh live working um you know version of the product and then mockup is the last stage where we creating the high fidelity designed pages number three is translating requirements uh into style guide okay this is also very important work of the us designer that he's not only working on the creating a solution or creating the wireframe or prototype but is once it is created and finalized it is his responsibility that he also works on creating this style guide because the whole style guide is to be followed by the development team or the testing team design system is also very important nowadays every company is having their own design system and then design pattern and and also they are responsible in creating the attractive user interfaces number four designing ui element such as input controls navigational components informational component all those things are the responsibility of the ux designer when we are talking about ui elements we are talking about like how the header should look like how the buttons should look like how should the left navigation would be the style and color of input boxes drop downs radio buttons all those things are to be created by the designer only creating original graphic design this is always graphic design what i just said like top band uh the navigational band the left navigation the layouting of each page and creating all the elements all those are original graphic design likes to be done by this person ux designer identifying and troubleshooting ux problem yeah whenever we have a problem in our product whenever we once the product is created or even before creation of course we work but once the product is created and still users are facing some problem this is the guy who will go and understand the users issues and recreate or modify the design further collaborating effectively with product in products engineering and management teams there is also his work because the designer cannot work in silo he needs to explain everything to the development team and also the governance team like project management should understand whatever designer has done so this is his responsibility that he communicate properly to everyone as what is required by them to be done incorporating customer feedback usage metrics usability finding into the design in order to enhance user experience so once so whenever a product is created it does not mean the work of a designer is finished he still needs to work on further improving the product because pain area will keep on coming i need to just go to the user and try to understand those things and and try to create uh modify the solution and once again engineers will work on it and create a better product more mature product that loop keeps continuing you know keep growing that is why you will see that there are so many version of each product right from iphones so ios like it is always improving or it is the photoshop or illustrator they always keep on improving last 20 years they have changed the photoshop or or illustrator a lot actually they are more mature right now okay let's move uh forward to our question sessions if anyone has any question they can ask they can just type in maybe our course facilitator or this meeting facilitator will try to reply in in a set way to them so you have any question you can type in here if you have any question you can just type in here i'll try to reply those okay let's move forward and talk about how to make a carrier in ux ui and ux design how can you make a carrier in this field start reading up on ux very clear and very obvious that you need to understand ux you need to read write read a lot of stuff which is available in the market right maybe like some of them like uh nelson norman's uh is very famous like in this field so maybe you might want to go to that website and try to understand what exactly is ux design you can also go you can come to intellipaat they have i'm sure they might be preparing working on creating the online stuff which people can understand and read and understand the us design learn about the key ux design methods and processes that is also a good thing like how would be your approach to design something we need to learn those methods and processes i i just discussed about one process which is design thinking structure you're learning with a credit credible ux course and of course entirely pat is doing very good in this field and maybe you may want to just look at what they are offering right now in this field apply what you are learning to real-world projects that you can keep on doing even if you are not working you can still nobody can stop you to work on these themes uh learn the tool of the trade there are so many smart design tools have come into the market maybe you may want to start looking at them try to have a feel of them and try to understand how they work how the how the the whole design can be created out of it and those tools are like sketch or figma or adobe xt these are the tools which are right now are in the market build your ux portfolio whenever you are doing such a nice work so may not so much of work maybe some some of the work you think that should be showcased to the to the world maybe you may want to keep in at one place and create your own portfolio which you can show to your prospective employee employers okay how you can start seven thing which you should do understand all the design directions okay when we are talking about the design directions uh we are talking about the ux design ui design visual design their principle all those things study the tool for the work okay as i just discussed like you can study start looking at figma sketch or xd adobe xt all these things start paying attention to design this is the best actually this is my most favorite like if you want to become a designer just look at everything whatever comes on your way maybe on the road when you're walking you can look at the car how they designed it how the how the the roads are designed how the lights are shown there how the billboards are designed why they design like that you should have those questions maybe you know the normal lehman is looking at something but only only for the usability of it but as a designer we have a question in our mind like if this is designed like this why it is designed like this that question should be there whenever you're observing any design and everything is designed around us so look at everything with that angle like why it is designed like that watch and copy others no harm in it like initially you might want to watch and copy other if you do it a lot you will be seasoned you will set a mood for yourself and you will start creating your own design later find mentors and become mentor find a good senior guy who is well seasoned experienced in this field understand wherever you are stuck maybe he can help you in that situation that's how you will go forward after that and you can become a mentor take up a course uh like promising course like right now you are you are in association with intellipack you're beginning uh so maybe you might want to have a further discussion with them to start a course that is all from my site and thank you very much for giving time folks i am handing over to the course advisor from here um and and i hope that you would uh you would look forward to come into this very promising and very hot uh career path ux and ui design thank you so much over to course advisor uh thank you sir for providing this valuable session and now our course advisor will be taking over it okay sir yeah thank you i am just uh stop sharing no yeah thank you thanks yeah thank you sir thank you okay bye hello everyone this is rudrani desai from intellipath i am the senior course advisor here and i will be telling you about the program that we provide in ui and ux give me one second so this is how you basically find the course on intellipack uh you can go to interior paths website you can just type in ui space ux in the search bar here and this is the one we are going to be talking about now uh this particular program in user interface and user experience design is going to be provided in partnership with electronics and ict academy of iit guwahati so there are three things that are going to be coming out of that firstly the entire course curriculum is designed and developed by an ict in partnership with intellipact keeping it at par with the international standards of what you need to know in ui and ux secondly it would be two instructors in total who would be teaching you the program one is going to be a senior professor from iit guahati and is going to be an industry expert so i will also give you the details of uh both of them so first we have dr ku suratiya who is an associate professor at iit guwahati holding a phd and has 35 publications under his name and basically you can go on to his linkedin and verify on to his background details as well if in case you are interested in joining this program so that will give you a background as to who is going to be delivering the program for you so he's an associate professor at the department of design in iit guwahati i'm the founder of ei labs and basically his research focuses on designing interaction techniques for vr interfaces and his interest is in using advanced digital technologies to resolve the challenges of sdgs especially in health and education and then we have mr rajendra chandel who is the ux design lead at x hcl technologies with 18 plus years of experience as a digital strategist a design leader a ux specialist an artist he is an hfi trained professional and basically he's the ux design leader at hcl also previously worked with reputed firms like ibm the third thing that you would be getting is going to be an advanced certification in uh ui and ux design strategy from el ict academy of iit guahati and intellipack now this certification is going to be valid for a duration of lifetime it is valid through all top organizations in india and abroad and this is going to be recognized as a professional certificate throughout now this is going to be a very very strong accreditation on to your portfolio why is because iit guwahati is one of the oldest iits of india which is also why it is so reputed and well known in the industry it holds a very good nrif ranking making it on top of all premium institutes and other iits and holds a very good international ranking as well because of which your accreditation in ui and ux is going to be globally recognized now the best part about also this accreditation is that iit kuwahati is specifically famous in the industry it is specifically known in the industry for the content that it provides in ui ux which is also why this drop accreditation is going to be something which is always going to be highlighted on to your portfolio and is going to help you with you know building your career in this domain or if in case you are looking out for a transition or if in case you are looking out for an organizational shift as well so now before i move ahead to anything further i would first like to tell you about the services you are getting offered as a part of this program so this is going to be entirely live interactive sessions with these two instructors over a period of seven months all of these live sessions are going to be recorded and put in your learning management system the access to which you will have for a duration of life you will be learning from industry practitioner channel of course the iit guahati faculty a very very good practical exposure will be given to you throughout the program through 20 plus industry specific real-time projects and case studies that you would be taking up throughout the program all of which will be making sure that whatever knowledge we are delivering you can put it into a real-time application and also at the same time when all of these projects that you work upon you put it on to your portfolio it is going to be equivalent to an industry experience throughout the program we are going to be giving you one-on-one with industry mentors so the one-on-one sessions would be regular regularly conducted by the industry mentors with you which is going to promise you the personal attention that you require while learning a new technology or throughout the learning part one of the most important services that we provide is a job assistance so if in case again if you are looking to start your career in ui and qx or you are looking for a transition into this domain or you are looking to change uh your current organization we will be completely 110 percent helping you out with that so basically it is a five-step process that we follow the first step is as soon as you reach 70 of the completion of the program we assign you a professional team who expertises in portfolio building now this team is entirely going to be working on your cv your resume your linkedin profile as to make it very very noticeable to the recruiters and the professional community by making it according to industry standards making it look heavy on ui and ux and have all the right keywords and points of lines and statements to pass the applicant tracking software that most mncs have that is the first step the second step is we will be connecting you with the team of training and placement officers would be entirely responsible in communicating with you that if you are going ahead with the placements what are your expectations and requirements out of it so is that a particular location that you are looking at is that a particular firm is that a particular sector what is the current cpc you're holding if you're already a working professional because we always care for the career growth in your chart and with a strong accreditation like that you can easily expect a minimum salary hike in the range of 55 to 60 on your current salaries and higher levels of positions in the hierarchy as well so all of this is going to be maintained from our end basically thirdly we start with a recruitment drive so regarding the recruitments we have partnerships and collaborations with around 500 plus reputed multinational companies and tech childs all around the world and throughout india and as a part of that we actively give you placements all of which are inclusively conducted by intelligent students so for intellipath students so you do not have to go ahead and compete with the entire crowd out there so if i give you a generic example as to what are the kind of companies that come to hire with us that would be companies like microsoft oracle ibm cisco nasdaq sony ericsson dell wells fargo jp morgan johnson and johnson mckenzie shell so we also maintain the quality of placements from our end apart from that we will be giving you a guaranteed of minimum three interviews with top multinational companies that hire for ui and ux designers this only starts when you are at the eighty percent of the course completion okay so three is of course uh basically we are going ahead and telling you minimum threes because normally what our students expect out of the interviews they get it delivered in the very first three itself of course the fourth fifth sixth and the seventh would be conducted for you apart from that we will also be giving you a job portal here throughout a duration of lifetime you will be able to see all the vacancies as and when they come with our partner companies and even you can apply from your end by showing you julie pat certification as a verification post which direct interviews would be scheduled for you lastly for all the interviews that you sit for we would be into and be training you for the same through various mock interviews set of questions salary negotiation skills soft skills training and all of that we will be giving you a one-on-one career mentoring session on ninety percent of the completion of the program where you will be attending one-on-one sessions with career mentors career coaches on how to develop the required skills to get the dream job in ui and ux that you are going to be looking forward to and it would be particularly based on your educational background the past experience that you hold and what future are you looking for yourself career oriented sessions are something we are going to be providing you throughout the program as well where over 20 plus live interactive sessions are going to be conducted with industry experts to gain knowledge and experience on how to build skills that are expected by hiring managers so all of this we basically help you out with the career assistance that we provide which will help you get jobs very very easily in this domain the other service that we provide is a 24 7 technical support and access for a duration of lifetime so anytime that you have doubts or you are stuck at any particular part of the course you can directly connect with this team any time of the day or the night that you want because they are available 24 7 around the clock and this particular facility also extends for a duration of lifetime meaning even post the completion of the program you would be able to go ahead and ask them any doubts that you have and it will always be a one-on-one doubt resolution session for you so either you can call them with your doubts or you can email them the screenshot to your doubts or you can even conduct a google meeting or a zoom meeting with them you can share your screen and discuss your doubts with them now this particular program is designed for working professionals as well as specials what we need to say by this is that the entire curriculum is made in such a manner that we will be taking you from the p6 to the advanced level concepts so we don't expect you to have any knowledge prior to taking this program because everything will be covered from scratch lastly we are going to be giving you a two-day campus immersion at iit guwahati this is not going to be a compulsion on you but you can always take an advantage of this service so you will be going to iit guwahati's campus for two days when you would be meeting all of the students who have in totality uh you know enrolled for this program that is going to because see we have a very vast community of learners with students from all different domains and positions in hierarchy at the same time you will be meeting the alumni of iit guwahati and the instructors in person that is for you uh to build connections in the industry in this domain and also help you in terms of networking in the industry and job referrals and all of that okay so this is basically to help you get a little bit of background on iit guahati so you can check the nrif ranking here if you go and click on this link basically you will get uh you know the publications from the times of india where uh rankings are mentioned about the global uh rankings you can go to economic times as well okay so that is going to give you a background as to who we are collaborated with now um who can apply for this program anyone with a bachelor's degree can apply for this program anyone in their last year of their bachelor's program can also apply for this program i.t professionals of course with a bachelor's degree can apply freshers who are just fresh out of graduation willing to pursue advanced training in this domain in fact anyone aspiring to pursue ui ux can go ahead with this program all right what roles would you be playing of course as a ux designer ui designer product designer ux manager ux researcher visual designer these are some of the job rules you will be getting also as a part of our recruitment what are the skills you are going to master of course the user interface design parallel testing animation bio flow wire framing red routes iconography and prototyping the tools that you are going to be mastering as a part of this curriculum is going to be sketch figma and adobe xd adobe xd now coming to the curriculum uh as i said the entire curriculum would be laid out in such a manner that we will be taking you from the very basics to the advanced level concepts so we will be starting with uh preparing you with html and css a lot of places this would be required a lot of pieces this might not even be required but it's always good to have an additional knowledge on your plate before you are applying anywhere so html and series is knowledge is given fundamentals of graphic design principles of visual design is something that is given as a part of the preparatory sessions then we move to module 2 which is user-centric design process when we give you an overview of ui ux and what is the difference between them one of the most important aspects of ui ux is user research with target audience how how good is your user research is how good your product turns out to be so basically all of this is different methods of how you are going to be conducting user research and how you are going to be mapping them then we come to designing interactions uh so here a buyer frame design which is the 2d representation of uh your design of the product is going to be their information architecture whatever knowledge you get from the user research you will be brainstorming different solutions for the same and choosing the best one out of them by testing and prototyping is what is covered in module four module five is fundamentals of ui heuristics and interaction design pairing we will be teaching you the material design according to google just a quick info guys test your knowledge on ui ux by answering this simple question what is a disadvantage of vertical navigation number one can accommodate only a small number of categories number two offers no room for growth number three is unfamiliar to users number four requires more space comment your answers below and subscribe to intellipart to know the right answer now let's move on with the session and human interface design according to apple guidelines and uh you know uh 5.7 is a very very important sub module because we are going to be covering the design solutions for e-commerce something like amazon flipkart social media something like instagram facebook messages like telegram whatsapp data and dashboard designs okay so we will be giving you an overall knowledge into all of these domains so if you have any opportunities from any of these domains you would be able to go ahead and you know take it up uh sketching is very important so module 6 would entirely be about elementary sketching and wire framing uh different tools will be taught to you in this model which is sketch figma and adobe x then we have low high fidelity designs uh wherein interaction patterns building high fidelity mock-ups designing animations and interactions are going to be done understanding style guides elements prototyping very very important so style guides color palettes fonts grades iconography ui and defense photography imagery illustrations and all of that we will be teaching you then usability evaluation is going to be there so ux practices in the corporate world uh conduct usability text explicit uh thinking allowed introductions and advantages to another listing a b testing unmoderated remote usability testing card testing session recording all of this will be taught to you as a part of this program then you are going to be handing off your designs to the development team so entirely module 10 would be covering that where you understand how to collaborate and communicate with developers receiving and giving feedbacks and how to effectively present your ideas to the organization and preparing for understanding of designs then module 11 again a very very important module because we will be helping you out again and information about the different types of products and solutions and design psychology for e-commerce sites specifically and the design life cycle so this is the entire learning path that you would be following as live sessions with the instructors as we are promising you you will be working on a lot of industry specific real-time projects throughout the program here is just to give you an idea of what are the kind of projects that you are going to be dealing with so as in when we move ahead in the level of difficulty uh the projects will also be going ahead in the level of difficulty which is why we have beginner level projects you first start with a beginner level project then in a very slow and at least manner move to the advanced level projects so if you see in the advanced level projects you would be working on projects like uh e-commerce website a sas website creating mobile app designs from scratch designing a user experience to invite more viewers this intermediate design recreating an existing app or website landing page for lead generation and then beginner level would be covering designing web applications and creating a wireframe model and a prototype of ui ux identifying and addressing a consumer issue now peer learning coming to the peer learning application this is an application only specifically created for intellipath students here you will be added along with the intellect team and all of your peer members into one group so that is to help you with a collaborative learning because you can go ahead and talk to your peer members here group projects are going to be given to you here so that is for you to have a collaborative learning and a classroom like experience the major announcements will be made here regarding all of the uh you know recruitments or referrals or anything that be about the project career services of course see if you can go ahead we are going to be posting about job alerts as well here so you are always updated on your device on your phone hackathons of course are going to be there and definitely all the class notifications are going to be there so it's always to help you be updated about the classes now coming to when are the classes going to be conducted the classes are only going to be conducted on saturdays and sundays from 8 p.m to 11 p.m in the evening all of these live sessions are going to be recorded and put into a learning management system the access to which you will have for a duration of lifetime all right now um the program induction starts on the 22nd of january but that is when the next cohort is and the regular classes uh are also going to be starting on 22nd of january all right now coming to the course 3 the total admission fee for this program is 60 021. there is 18 percent of gst on top of that which makes the course to 7 000 thousand eight hundred and twenty four okay so seventy thousand eight hundred and twenty four is going to be the entire course fee we also help you out with discounts if in case uh you know depending on when you enroll and how you know willing are you to join this program now um i am going to be sharing with you for the ui and ux program so if in case you are someone who is willing to join for this program i am going to be putting down my contact details right away onto the chat box as well as on the notepad here and uh you can contact me directly on your email ids just give me one second so basically this is going to be my contact details my name is advisor again and uh here is rudrani and intellipaat.com where you can directly mail me i'll get back to you right away or you can directly whatsapp me over my whatsapp number which is eight zero four seven one eight five nine eight now we would be open to questions if anyone has any questions they can put it down in the question box or the chat box below all right uh thank you all for joining i hope you have a great evening and if in case you are interested to enroll for the program kindly uh connect with me right away thank you now that we've come to the end of our session if you guys have any queries put it down on the comment box and subscribe to our youtube channel thank you just a quick info guys intellipaat provides advanced certification in ui ux design this course is developed and mentored by en ict iit gohardi the course link of which is given in the description below you

Channel: Intellipaat

Views: 473,477

Keywords: ui/ux course, ui/ux free course, ui/ux training, ui/ux tutorial, ux design tutorial, ux design course, learn ui/ux, ux course, ui course, ui ux course, ui ux training, ui ux design course, ui ux free tutorial, ui ux tutorial for beginners, ux ui course, free ux course, ux design tutorial for beginners, ux design courses, ux course for beginners, best ui ux course, free ui course, online ui ux course, ux design for beginners, ui ux intellipaat, intellipaat

Id: spGDKJNq-EE

Length: 214min 54sec (12894 seconds)

Published: Sun May 01 2022