User Experience Design from A-Z: Adobe XD UI/UX Design

1. UX/UI Course Overview: In this video, we're going to go over the learn UX UI from a to Z course overview. We're going to walk through all of the different core sections. I'm going to give you an overview of each section, what you can expect before we jump into the course sections, I want to quickly introduce myself. So my name is Juan, I'm one of your instructors in this course. I've been an entrepreneur since grade school. My background is in the tech space, from digital marketing, e-commerce, design, to programming. I believe in continuous education with the best of a university degree, without all the downsides of Buddhism costs and inefficient methods. I look forward to helping you expand your skill set. Arthur is the other instructor in this course. He's been a graphic designer since 2002 and currently works as a UX UI freelancer, working with many companies all across the world. And he's looking forward to helping you expand your skill set and the UX UI design. Let's go ahead and jump in here. Okay, so the very first section is going to be the course introduction. This is where we're going to go over UX UI. What exactly is the difference is between the user experience and user interface and what exactly those are. And then we're going to go over the current designer marketplace as far as where it stands currently today, as far as the average salary, the number of positions opened, the opportunities, the growth potential for the UX and UI field, right? So we're gonna go over that. So we're gonna go over different types of UX roles in different organizations, from small organizations to medium organizations, all the way up to large enterprise organizations as well. And then section two, we're going to go into the introduction to the web industry. And this is where we're going to go into the different phases of web development. It's important for you to have a foundational understanding of how the web development works, everything that's involved as far as the different design stages, you want to understand the agile approach. We're going to walk through that in great detail. We're going to give you an overview versus the linear model versus the Agile approach. And then also go over the Scrum project framework that you're typically going to be working with them. Then we have Section three. This is where we start to do some of the Adobe XD lessons as well. Where you're going to be doing a little bit of hands-on over the shoulder. And then we're going to be discussing the psychology of color. We're going to go into different color schemes, color wheels, and really give you an overview of the foundations of graphic design, right? Because you need to understand how color works, different color schemes, how to work with different fonts, how to work with different icons, and really understanding color theory, how color theory works, how colors work, how to use the right type of colors and unique situations. How colors evoke emotion, and the type of colors that you want to be using, depending on the type of design that you're looking to create. So very exciting section there as well. And then we have Section four. This is where we go into UX design. This is where we do some additional Adobe XD lessons as well, where we're going to be doing competitive analysis. We're going to be going over what a customer journey is. What is it? Sales funnel, the different types of sales funnels, different sales funnel stages. A whole lot more. That's probably going to be the biggest section in this course. And it's very much so in-depth. And so I'm excited for you to get started on that as well. And then Section five, this is where we're going to be going over UI design. We're going to be going over the UI design process. We're going to be going over different landing pages, different UI components in several different Adobe XD lessons as well, where you're going to be creating different types of designs, creating different types of headers, working with micro-interactions and a bunch of other UI design interface type of stuff. So very, very much so excited for you to get started on that as well. And then we have Section six, which is going to be the optimization. This is where we're going to be going over the above the fold rule. We're going to be going over how to use analytics for optimization, how to use heatmaps. And then we have a couple Adobe XD less thans on there as well. Then finally we have Section seven. This is where you're going to be starting your career in the UX UI design space. And we're going to be going over freelancing a client consulting, personal branding, how to set up a website. And we're going to be going over some of the do's and don'ts of networking. How to network properly so that you're able to put yourself in position, get new positions, new jobs, maybe new clients, right? And then going over some of the top freelance websites. And then also, I'm going to walk you through a tool that you're going to be using as your hub where you can essentially have all your clients projects, all your to-dos, all your tasks. And it's a template that I've created and you're going to be able to get access to. And then finally, you're going to find the different places to find UX and UI job. So I'm excited for you to get started in this course and we'll see you on the next one. 2. UX/UI Section Overview: In this video, we're going to go over the learn UX UI section overview. So in the previous video, we went over the entire course overview. We went over the different sections, what you're going to expect from each particular topic, each particular area. And then In this video, we're going to go over what's going to be included in this particular section itself. Okay, so let's go ahead and jump in here to the section overview. So what we're going to be covering in this section is the UX versus UI. I want to give you a fundamental big picture overview of what UX is, what it actually means, and how it actually works in the real world. Same thing for the UI. And then being able to contrast UI versus UX because you want to be able to understand the differences, how they work and how they work together. Okay, so then we're going to be going into the UX UI designer marketplace. We're going to look at some salary potentials, the job market, the growth potential, and really give you an overview of where this industry is going and how much growth potential really has for you if you're looking to really dive deep into this particular industry. Because the future is very promising for the UX UI designer marketplace. And I want to show you some numbers that's going to back that up as far as what you can expect to make just starting out and what you can expect to make as you progress in your career. And then we're going to be going over, as I mentioned, the average salary for the UX and UI, the growth potential. We're gonna go over how to learn the skills properly, the best way to learn these skills. And I have a lecture that goes over that specifically. And then the importance of being a well-rounded designer. Because one of the things that you'll notice when you first start applying for different jobs. Or maybe if you get a job in a small organization, medium-sized organization, they're going to have you do a lot of different things and wear multiple hats and maybe write copy, maybe write content, and maybe, you know, work on a sales funnel or anything along the lines of the marketing department, right? So and that's where you're going to be able to be a well-rounded designer when you know all of these different elements and especially behavioral psychology and understanding why we make decisions, what drives us to make the decisions at different influence triggers, different persuasion element and how to use persuasion and influence and your messaging with different colors, right? And so in this course you're going to learn how to do just that. You're going to learn how to develop sales funnels, different sales funnel stages, how to create landing pages for different types of elements that are involved in the color schemes. So you can be a well-rounded designer, right? And then we're going to go over the different UX and UI roles. Because what we want you to do is come away from this course being a very well-rounded designer. So that if you're going into more of the graphic design stage where you want to build logos. You wanna create logos and different designs. You'll be able to do that at a very high level because you'll understand different design elements, color psychology, color theory, unique color designs and schemes, right? And so you're going to know how to do so many different things other than the typical UX and UI designer, you're going to have an array of skills and you're going to be extremely valuable to an organization after you're done with this course. And so I'm excited for you to get started and we'll see you on the next one. 3. UX vs UI: In this video, we're going to go over the differences between UX and UI. This is a very important lesson here because I want to give you a real foundational understanding of what UX is, how it works, how a functions, the different factors would then UX and be able to contrast that with UI so you can get a full scope of what you are is what UX is, and be able to understand what are the different elements, components, and factors that each one of these is comprised of. So let's go ahead and jump into the UX design. Ux design involves interactions between a potential or active customer and accompany and relies on visual design, behavioral psychology, and consumer research. Now, one of the biggest things here you want to keep in mind is the behavioral psychology and consumer research. That's what you're also learning in this course, which is very much so important to your UX and UI career. If you don't really understand behavioral psychology, influence triggers persuasion, being able to understand what makes humans tick and what actually gets him to make a decision and how to evoke certain emotions, then you're really going to have a hard time with the user design and user experience. Okay, so that's going to be a big element for the UX. And then the user experience part refers to the interaction between the user and the product or service. So how the user is interacting with that particular product, that website, it's essentially considering all the different elements and how they interact with each other to shape this experience. Okay, so this is what the user experience is. It's any type of experience that a user is going through to interact with the business, the business website, the application, whatever that may be, that's what you really want to take away from the user experience. So user interface, this is the actual design and look and feel of the presentation or the interactivity of a product, right? Think about a web application, a software as a service application that somebody uses on their phone to actually maybe play a game or to be able to build the product or whatever that may be, right? Every type of UI is going to have a unique interface that is able to have the individual, the customer, or the end user be able to use the software, the actual application, the web site, and be able to use that product and have a pleasurable experience using it, right? And then we have the user interface is the point of interaction between the user and a digital device or products, right? So think about like a touch screen on your smartphone thing about Facebook, I'm sure you have Facebook on your phone. Think about how that user interfaces set-up where they make it so that you are constantly on your phone. You're checking your news feed, you're looking at what other people are talking about, right? So that's essentially the user interface of an application. And they designed it in a way to get you to always want to go in Beyond the application, right? And with websites and different applications, UI design considers the look and feel and the interactivity of the product. And so ultimately what the UI design always think about it from that perspective. This is the interface I'm actually interacting with. This is what I am saying. This is how I'm actually using this platform, how I'm using, let's say LinkedIn or Facebook or any of these other type of websites or applications, right? It's how you're interacting with them and that's what you really want to understand and know about as far as the user interface, UI design. Okay, so that's going to be here for this one, and we'll see you on the next one. 4. UX/UI Designer Marketplace: In this video, we're going to go over the UX UI designer marketplace. So this is going to give you an introductory into the marketplace as a starting salary. What are some of the things that recruiters are looking for? And some of the challenges that recruiters are actually facing to be able to find top UX UI design talent. Because you're taking this course and you're going through this program, you're going to be somebody that actually is able to fill those positions because you're going to get the necessary and required training that is going to be expected of for a UX and UI designer. So let's go ahead and jump into the UX UI designer marketplace and how much growth potential is actually has here. So one of the first things to note here is that LinkedIn sided UX design as one of the top skills to learn and 20-20 and beyond. And it makes sense, right? Because you think about different businesses looking to make more of an impact online and looking to find out more ways that they can engage their users. They can provide a better customer journey, customer experience, and be able to provide them with an amazing experience with the brand, with the company, with the employees, right? And so the UX design Marketplace has been exploding in, will continue to have significant amount of growth from now and beyond. So recruiters are often struggling to fill UX roles because of the knowledge gap. Now, just like I mentioned, you going through this course, you go into this program. You're going to have those necessary skills, the understanding of what is required of a UX UI designer. And so you're going to be able to fill these roles very easily, especially since you are learning a lot more other than the UX and UI traditional information and knowledge, right? Because the traditional UX UI, that's going to be more around the obviously user experience, graphic design and many other areas, however, where this really gets into a difference maker is the behavioral psychology, the understanding of influence persuasion, and really understanding human psychology as a whole so that products can be created that are actually being able to be taken action on by the individuals because you understand how the actually operates, what drives decision-making, how actually Emotion, the biggest factor when individuals make decisions, and they tend to justify logically. So understanding not only the UX UI roles in having that skill set, but also understanding the influence and persuasion is going to go a long way. And so the average salary for a UX and UI designer, and I believe this is in the US. So by 85 thousand a year, you can see here it's a pretty decent amount of salary because you're doing so much for the business, right? You have tremendous value. You're responsible for providing the actual experience at the customer, the end-user, as having what that end product. And so this is a very important position. And if you ask most people that are in the UX UI feel, they'll tell you that it's a meaningful career because they have real genuine interest in curiosity into the work that they actually do every single day. Because remember, the UX professionals are oftentimes very much so interested in how people operate. How does the human mind work? How does the human psyche work? What drives us to actually take action to make certain decisions? And so what they all have in common here is that they're motivated to understand their users and to improve the overall experience, right? And that all goes into the behavioral psychology. So ultimately the UX and UI designer marketplace is massive. It's growing at a very high rate in there's a lot of opportunity for you to be able to get started in this particular industry, especially since you're going through this program, you're getting all the skills. You're understanding, color psychology, or as far as graphic design, color theory, different color schemes, you understanding how to create different mock-ups. You're essentially going through a bootcamp, an entire program that is going to get you ready to be able to get an entry level position, a UI UX designer, or you can start doing freelancing. You can start doing some gigs and get you a profile, and then get a portfolio built up and then be able to go out and get different positions as a UX UI designer. It's up to you. And so it's really about what you want to do and how you want to go about it. However, the information is here for you to be able to take advantage of and be able to leverage and to your UX and you are career. And so that's going to be here for the UX and UI designer marketplace. And we'll see you on the next one. 5. Overview of UX Roles: In this video, we're going to go over the UX and UI roles. So these are the, some of the different roles and you're going to see within an organization. And this can differ quite a bit depending on the size of the organization. If you have maybe a smaller organization that you're working with or medium-sized organization, you're going to find that a lot of times one individual person is wearing a lot of different hats and are doing a lot of this work by themselves. So a individual, let's say at a startup or at a smaller company, may be doing UX and UI by themselves altogether. Versus with large organizations, you may have somebody just handles a UX, somebody just handles a UI. Somebody just does the actual research, right? And would smaller organizations medium-size, you're typically going to find one person that handles both these and does all the research and all the different background information and requirements that are needed as well. So let's go ahead and jump into the different types of UI and UX role. So the first one here is going to be a visual designer. And this also can be known as a graphic designer. And what they're doing is essentially focusing in on the big picture, the concept, the tax of graphics, the topography, the icons at different color schemes, the look and feel of how the design or the application the website is going to look. And then we have the UX designer, right? This is the individual that handles the customer journey. They're handling the customer experience, making sure that the end user is having a pleasurable and a satisfying experience with the brand, with the website, with the application, and that the project has a logical flow so the user can move from step to step without getting lost, right? Just think about a sales funnel. If you're unfamiliar, we're going to be walking through that in this course in the UX design section, where you're going to learn about sales funnels, that different steps along the process. How people go and actually purchase items in a different micro steps that are involved in that you're gonna learn all about that. However, just wanted to give you a quick overview that the UX designer has everything to do with how he users interacting with the brand and how they go from a complete stranger to actually becoming a paying customer. And then the UI designer, this is the individual that is concerned with the graphic design elements of an interface, right? Just think about an application. Think about any kind of mobile app, any kind of online product, like a SaaS product, right? That has you in there. You get a login and you got to interact with the different types of features and functionalities, right? That's what a UI designer focuses on, making sure that once the user is already there and they're interacting with the actual product, that it's a very pleasurable experience for them to actually interact with that particular application, websites or whatever that may be, right? And then we have a interaction designer. This is typically going to be larger organizations where you have a really big project, right? And so you need somebody to come in here and understand how a user interacts with an application and build up different interactions and animations into the design so that there's a lot more interactivity. And like I said, this is typically going to be at a larger organization where the projects get quite complex and you need these different individuals to work with like different media, to work with different types of videos. And then the next one is the information architect. This is going to be similarly at a large organization. And so these individuals are dealing with the structure of a website, an application, making sure that everything is in a structured manner so that, you know, the different areas are covered, the different sections are covered, and everything has a nice structure to the information and it's easily accessible, right? And then we have the content strategist. This is the individual that has actually in charge of writing the content. So just think about if they're embarking on a huge website that they're building, maybe from scratch, then the content strategist, This is the one that is actually developing or gathering or writing the copy, right? For the entire website, right. It's putting together all the different pages, the About Us, the Contact Us. All of those are essentially handled by the content strategists. And remember, at smaller organizations, you're typically going to have one person doing all of these, right, doing all of this. And so that's why it's really important to get experience. Not only as a UX UI designer, understand graphic design, understand the differences between UX and UI, but also be able to understand human psychology, understand how to structure information properly, how to write different copy, how to write different blog posts. Because for the most part, at a smaller, medium-sized business, you're going to be doing all of these yourself. That's why you want to be well-versed and understand what each of these different roles do in being able to understand the implications of these roles in an organization. And so when you're looking at different positions, when you're looking at different things that are required as far as in a particular job description. You want to be able to look at what all of these individuals do and what is required. And then be able to see where you can add the most value and learn these different roles and understand these different roles at a foundational fundamental level so that you can speak on them. You know what they do, how they interact with the actual team and the overall goal of the project. So, and so that's going to be here for the different roles within the UX and UI type of project. And like I said, make sure that you're understanding what each one of these individuals do so that when you are looking to apply for a certain position or you're looking to bid on a certain job, you know what these guys do, and you can be able to cater your particular offer or your bid or your resume to these particular requirements, right? So that's going to be here for this one, and we'll see you on the next one. 6. Web Industry Section Overview: Welcome to the Introduction to Web industry section of this course. In this course, we're going to talk about the web industry from a big picture overview so you can get an idea of what you're going to expect when you jump into a team environment and what are going to be your specific roles within that team environment? And what are going to be everybody else's roles within that environment as well. And so let's go right ahead and jumping here. So the very first thing that we're going to cover is the stages of web development. Now, this is really important here for you to understand as the stages of web development are going to be the foundational pillars any designer uses when they're developing a new product, right? It's important to understand what these are and how to leverage them and use them in your designs and in your work, right? And if you're working in a team setting to really understand how each and every one of you that's involved in team are going to go through these different stages to develop that particular product, that website, that app, whatever that may be, right? Then after that, we're going to go into the working in a team and designer responsibilities. We wanna make sure that you have a foundational understanding of what is everybody's role going to be within that team? What is going to be your role? What is everybody's responsibilities rank though different roles have different descriptions so that you know what to expect if you're going to go work for a startup, if you're going to work for small to medium size business, or even if you're going to work for a large enterprise, right? And then we're going to go over the agile approach to project management. This is something that's very important for you to understand as there are several different types of project management. However, the age out, the Agile approach is going to be the most commonly one that's used unless you're using linear approach as well. But this is going to be the most common one that you see in the UX and UI field. And then after this one, we're going to go into the Scrum, understanding the framework behind this particular project management system and how this works as far as being able to complete various tasks known as Sprints. And we're going to go into that in detail. I just want to give you an overview of what this scrum is. It's a really flexible framework that allows different individuals within a project through the maximize the skills and the output. And then we're going to go over Trello, others is going to be an easy to learn Kanban app. Kind of give you an overview of what a Kanban kind of user interface looks like, why it's important and what to expect when working with the Kanban user interface. And then finally, we're going to go over other project management systems and other different types of team apps and really give you an overview of the different ones in the marketplace. And kinda give you an overview of what you can expect to use starting out if you're just going to be a freelancer or if you're looking to join a team, what are some of the most popular and then some of the pros and cons of each. So that's gonna be here for this lesson, and we'll see you on the next one. 7. The Phases of Web Development: In this video, you're going to learn the stages of web development. So this is something that's very important as a UX UI designer to understand, as far as being able to take a product from the very beginning to completely finishing it and having a total, complete finished product. And so I want you to understand kind of at a very high level here, what the stages are and how they function, and what to expect at each particular stage. So let's go ahead and jump right in here. So as you can see here, we have the three different stages, which is number one design. Number two is going to be the coating. Number three is going to be the development. And so as you can see here, it's a quite straightforward process. First, you outline the design. You look at. What exactly is the end goal of the clients, or what exactly is the end goal of the particular project, right? How do you want it to look like as far as a finished product? And then once you design and look at, okay, this is how I want it to look. This is how I wanted to feel the color schemes that design. And then we have the coating stage. And this is where you typically are working with HTML or CSS to really lay out exactly how you want it to look and feel. And then we go into development. This is a final phase where you're pretty much laying out the functionality. The front-end designers have done all the work, everything now is on the backend. We're gonna walk through each one of these in detail. So let's go ahead and jump in here to the design stage. So when it comes to the design stage, this is where the graphic and the logical concept is being developed. So everyone on the team, if you're working in a team environment, knows how the website will function, how the apple function, how whatever product it is that you're designing is going to function, right? And this is the most important part out of these three stages because the design part of the web development process allows you to really get a big picture overview of what the audience is going to be seeing, how they're going to be experiencing the product or the particular app or website, whatever that may be, right? And so this is where you want to develop the end product as far as wireframing, as far as understanding where the buttons are going to go, where the different items within a website are going to go. In. All of that understanding is going to help you get a better idea of what the end project is going to look like, right? Because you can't build something if you don't know what you're building, right? So first you gotta get that direction. You gotta get that big picture design overview of this is how I want the website to look like. This is how I want it to function. This is where I want all the different components that controls all of the different features and functionalities to go. And then we can move on to the development stage. And so what you want to understand about the design stage is that this is where it all begins. This is where you're able to craft out different ideas, create different wireframes. And really lay out exactly how you want the users to be interfacing with the actual product. Okay, let's go ahead and go through an example here. So let's say that we're developing a landing page where we're providing a free resource or the clients providing some sort of free resource in exchange for an email address. And this is quite common where you have a particular page that is here just to exchange information with that particular user. So let's say that we are developing a landing page and our ultimate goal is to gather in email address, right? Collect email address. So when we're developing the landing page, these are four things that we must answer prior to actually Lenaro out in developing all the contents and everything. So number one, what are the goals of the page? So the goals of the page is to get downloads, educate the user on the download, right? Let's say we have some sort of PDF or some sort of ebook or cheat G that shows people how to do a certain thing and less time, right? How to save time doing X, or how to save time doing why write whatever that may be. It's important to educate the user and let them know what exactly they're getting and why they should take action. And so number two, we want to look at the user's goals for the page. So for them, they want to get something for free and they want to figure out what it is. So answering these questions and asking ourselves these questions is really going to allow us to create a landing page that has the right proper messaging, the right proper layout. And it's going to be easy for that user to accomplish these things, right? And then number three, what are the questions that the user needs to answer in order to accomplish the goal. So what do they get? Why do they need this? What happens next? What happens after they download the particular ebook or chichi? Are they going to actually buy a product or are they going to buy something else? What is the next step right? Then next step involves some sort of nurturing, some sort of sales funnel process where you put them into a separate bucket, into an actual audience that has already engaged with the product and service. And we're getting to sales funnels and customer journey. And in later lectures, I just want to give you an overview here of the design as far as a landing page that is designing something for a free resource, right? So the fourth question that they need to be asking, and you should be asking yourself, right? Is the emotions that you want to invoke. You want to invoke the assurance, the relief, and the confidence, right? What you want to do is whenever you are designing a landing page for any particular situation, either the questions that you want to ask yourself. These questions here isn't just for designing landing page. You can take this into product design. You can take this into, you know, app design, whatever that may be, right? Because the questions here are going to be relevant regardless of what it is that you're designing. Remember, you want to be able to help people understand what are they getting, why it's important to them, how do you want them to feel and have you and your team understand what is the ultimate goal for that particular product or whatever type of app that you're working on, whatever that may be. So. Okay, so now let's look at the wireframing. This is the portion of the design that's really important here as well. This is where you're going to be able to look at, let's say, a wireframe of a website and look at where all the different components are going to be, where the different tabs, as far as the menu, let's say you have a menu in a specific area, maybe specific design, specific layout. Where are you going to have your different texts pieces, content pieces, right? And so the wireframing consists of that initial sketch that really lays out where everything is going to be. It also shows you the different color schemes going to be used in this particular project. And if you look at the image here to the right, it really gives you a good big picture of what a wireframe is going to look like, where all the different pieces of the actual website, the product, whatever that may be, where they're going to be positioned, right? And a tool that we're going to be using throughout this course is Adobe XD. And this is a powerful wireframing tool that is commonly used by UX and UI designers with dx, dy, you can quickly mock up wireframe layouts, Create UI elements, defined different user flowcharts, different navigational structures. And it's really, really a nice tool for us to be able to mock something up very quickly, very easily. And it's going to be something that we're going to be using throughout this course. So I'm excited for you to get started with that. And let's go ahead and jump into the next stage, which is going to be the coating. So once we have the design laid out as far as how we want everything to look like. It's time now to start creating it using several different types of coding languages. So when it comes to coding here, what we're going to be doing is typically using three different languages. So once we're done with the design and we know exactly how we want everything to look like. We know the color schemes, we know the layout, we wireframe that everything. Then we're going to transfer the files over to the front encoders so they can start creating. This is going to look like, and so they're typically going to be using HTML, CSS, and JavaScript. Now, if we look at the three different languages here, HTML stands for hypertext markup language, and this allows you to create structured text within webpages or applications. There's nothing super special about it or anything like that. It's just a very simple language that allows us to use text. And then we have the CSS. This is where the magic happens here, where we actually are able to input a lot of the different style elements into the HTML. And ultimately what it does is it separates the content from the visual representation of the sites. This is where the color schemes come in. This is where the design features come in, right, in the CSS file, the frontend developers or the coders, lists all the styles that your project has. For example, the font styles, the buttons, the corners, the shadows, the colors, right? So we're really brings to life that particular webpage or that application because we're just having text there, right? It's not going to be very pretty so it adds the ability to bring a webpage or an application to life, so to speak. And then we have JavaScript. This is where you're able to take static web elements and make them interactive. And so for example. Let's say that you have some sort of button that says by now or Add to cart. I'm sure you've seen those on different e-commerce websites, maybe when you're going to buy a product or whatever that may be online, you can make those different buttons be interactive. You can make them bounce around. You can make them do all different sorts of different things with JavaScript, right? It's that interactive in essence, you're able to do versus just having those elements be static and now being able to have any interactivity. So that's going to be the different coding languages that are going to be used. Typically when the coders are actually coding up to site, they're using HTML to actually write out the text. They're using CSS for the actual design elements and to bring in the color and all the different design schemes. And then JavaScript is what is allowing the webpage or application to make different static elements become interactive. So very, very powerful. Okay, so let's jump into the third and final stage here, which is development. This is the back-end coding now, so we've done the design. We know exactly how we want everything to look like. We've wireframe that we know where all the elements are going. Don't we sent those files over to the coders. They've actually set everything up, built everything up with the HTML, CSS, and the JavaScript. And now it's time for us to go to the Development stage here where we're actually developing everything on the backend. So let's go ahead and jump into the development. So when it comes to the backend development, this is what really makes it available for the website to be live on the internet. And this is where all the data is stored. The backend of the website consists of a server, the application, and the database. Because if you really break down what exactly website is in his technical terms, it's really just a bunch of files, a bunch of coding, and a database, right? And so there are different applications on that database. You have a server, sometimes it can be shared, sometimes it can be self hosted, whatever that may be, right? But a back-end developer actually built out and maintains a technology that powers all those components which worked together in the enable and allow the user facing side of the website to even exist in the first place. Websites are literally just like I mentioned, all the AR is a bunch of coding, a bunch of applications in a server rain. And when we go on to whatever website and we see all the different color schemes, all the texts or the JavaScript That's all being hosted on the backend in a particular database on the server. So these are the three different stages of web development. You have the design stage where we're building everything out. We're building out how everything is going to function, how everything's going to look. Didn't we're sending everything over to the coders. They're building it up using HTML, using CSS and JavaScript. And then finally, the developers actually going to host the website, get the database setup and the applications so that we can post that live. So individuals can actually use it via the internet. So that's going to be here for this lesson and we'll see you on the next one. 8. Designer Responsibilities (working in a team): In this video, we're going to go over the different Designer responsibilities within a team. So this is going to give you an overview of what to expect as far as a different responsibilities within a team environment. What you can expect as a UI UX designer yourself. And, but they give you that big picture overview of what you can really expect to see within a team environment. Or if you're going to be working within a smaller organization or large organization. So let's take a look at some of the UX designer responsibilities. Some of the things that you can expect to be doing, especially if you're working within a smaller organization where you may be having to wear multiple different hats. You may be the UX UI designer and you may be the person doing the research. You may be the person that's developing the contents, right? And that's why as a UX designer, UX UI designer, it's important to be multifaceted because in especially now where there's unfortunately a significant amount of layoffs going on in the marketplace, even though there's still a lot of growth and a lot of opportunity and it's important to be multifaceted. Didn't have a lot of skills within the UX UI and online marketing space. So you're going to be responsible for the user research oftentimes to gather the information to evaluate different user requirements, to work with the managers, developers, and also the end clients. And you're also going to be responsible for illustrating your ideas using storyboards, user flows, a mood boards and sitemaps. And you're also going to be involved with the graphic design using different interface elements. You're going to be responsible for developing different mock-ups, different prototypes that illustrate how the site functions and looks like in that beginning design stage. And this is where you're going to be using Adobe XD truly wireframe that up to mock that up. And you're going to be doing that. You're going to learn how to use Adobe XD, how within this course. And you're also going to be responsible for identifying and resolving different UX problems and understanding Canada user experience flow, right? Because with user experience you have the customer journey where people are coming in, different users are coming in at different stages. But also understanding what a sales funnel is, how a sales point a works and the different types of sales funnels. Because that's all going to be part of the user experience, right? How they're going to be interacting with the product, with the brand. And then you're also going to be adjusting mockups based on user feedback. You're going to be doing like MVP, minimum viable products, where you can push that out to the client or to the user and be able to come back modifying, adjust based on the information and the feedback that you get back. And then you're going to be responsible for developing and following the standards and font, colors and elements, OK, this is what you can expect. Typically in the UX UI field, I know this is more of the UX. However, UX and UI are quite interconnected and related. You're only going to find typically in larger organizations where UX and UI are individualized, where you may have somebody just working on the user experience phase. However. For most mod a medium-sized businesses, especially startups, which is going to be a great area for you to get started working for a company, right? Because you're going to be able to come in and help this company grow, helped them develop a product and app, whatever they may be, and also be potentially involved with the equity stake because you'll be a founding member. And what these have to have organizations, you're going to be doing a lot of the different things within UX and UI and they're going to get kind of merged. And so you won't really notice a difference, right? And that's why I also mentioned that if you have the user experience, not only with the understanding of the different user flows to different customer journeys, but also with sales funnels, understanding how to develop a landing pages, landing page elements, how to develop copy all those different factors that will make you a multifaceted UX UI individual. You're going to have a lot more value to these organizations, to these companies. And they're going to want to hire you and keep you around. Because it's oftentimes those that are the least valuable are typically going to be the ones that, you know, leave first or get laid off, right? Because if somebody just has UI experience or UX experience versus somebody who has both UX UI, little bit of marketing experience, understanding sales persuasion. You know, sales funnels, how to develop a landing pages, how to write copy, which you're going to learn. A lot of those in this course, then you're going to be extremely valuable to that organization or to whatever client that you decide to work with. The pre going to be calling the freelancing or client consulting, ok. And so some other things that you can expect to be doing in your role is analyzing statistical data. Typically using like Google Analytics or any other type of analytic software to look at different information as far as where users are coming from, where's traffic coming from, if it's coming from one particular source versus another. And why that is looking at also the user demographics, the age, whether it's male or female, right? Different areas of the world at the traffic's coming from, right? Doing competitive analysis and also writing questionnaire, some kind of survey to be able to give feedback in order to improve the current products or app or website, whatever that may be. A great way to also do this is to be able to just interview the actual target audience. Maybe get him on a phone call, maybe have them fill out some sort of survey like I mentioned. But really understand that the UX and UI role is really going to be multifaceted if you want to be someone that has a tremendous amount of value to an organization, you want to be someone that has all the skills that you're going to learn in this course. You want to have more than just UI or UX skills. Like I said, you want to be multifaceted. You want to know both of those. You want to know sales pages, you want to know sales funnels, and you're going to learn all of those in this course so that when you do decide to go out there and look for a job, you're going to have a multitude of different skills that you're going to be able to bring to the table. We're going to be extremely valuable and it's going to be easier for you to land a job or be able to work with the client because you're not just a one dimensional UI or UX designer. You're multifaceted and you have a lot more skill sets, right? So in some of the other things that you're going to be asked to do is define different personas of a project, right? This is understanding the different customer journeys that each individuals are going to go through. And also understanding that individual persona like who is that target individual that is going to be buying this particular product using this particular app, using this particular website. What is that persona look like? Rama demographics point of view, and also creating a Sitemap For like a website. And then also being able to design user story in user flow. And this is really important for you to be able to be a good UX designer is understanding kind of that flow bet somebody's going to go through when they are using a particular app, when you're using a website and they're using some sort of product, right? What does that look like from beginning to end, right? And being able to understand how to lay that out. And that's exactly what you're going to learn in this course. You're also going to be expected to create a low fidelity prototype. Transitional screens. Typically you're going to be able to use Adobe XD to create this. So you should be able to create those. No problem in this course because you're going to be learning how to do all of these in this program so that when you decide to go out there in the marketplace and actually look for a job or, you know, actually do some client consulting or freelancing. You're going to be equipped with a lot more skills than just a typical UX or UI designer. So that's going to be here for this one, and we'll see you on the next one. 9. Roles & Descriptions (working in a team): In this video, you're going to learn about the different roles and descriptions that you're typically going to find when you're working within a team environment. Now this is going to be for typically a small to medium size business, could be maybe a mid to your business as well. However, you will find that large organizations enterprise level, and you're going to have a lot more specific roles within the actual creative department. However, for this particular example, this is going to be for a small to medium mature businesses. And so let's go ahead and jump into what the different roles are going to be and what you should expect. So the first role is a project manager. Now, this is the individual that gathers a project requirements, estimate the actual cost. They plan everything out that control the time management of the work being done there essentially heading the entire operation there, making sure that everything is getting done on time or making sure that everybody is taking action and being responsible for their side of the project. And so they're the one that's really in control at a very high level. And then we have the content manager. This is the individual that is responsible for essentially updating the content section of a particular website in this context, let's think about it, a website project standpoint. There are going to be writing different texts. Maybe the About section, maybe the Contact Us, perhaps, maybe like a blog post, whatever that may be as far as a project scope, they're going to be responsible for writing the specific content until, let's say they're working within a content management system such as WordPress. They're going to be logged in and working on the backend of the website, logging in and writing all the different maybe blog post, adding all the different images all through the backend of the website. And then we have the front encoder. This is a programmer that codes and actually creates the visual front and elements of an application of a website using those three different programming languages we talked about earlier, which is the HTML for the text to CSS for the actual visual design, the color schemes, and then the JavaScript for the different interactive elements that are going to be involved in that particular website. And then we have a programmer, this is the backend developer. There are essentially working with the front end developer that's actually building the layout, the look of the website so that they're able to host the website on a particular server. They're able to create a certain database, have different applications, whatever that may be, as far as making sure that the backend of the website is set up to actually host the website. Ultimately, the backend developer is what really allows the website, the app, whatever that may be, to be hosted so that it can be accessible through the Internet for anybody to be able to either download or interface with VHS, you know, typing in the URL, right? So making sure that it's actually hosted to be able to be accessed via online. And then we have the tester, This is the individual that is going to be actually going through the application, actually going to the website, making sure everything's in a very precise logical manner. The user flow is good, that design is good, the content is all making sense, and all the technicalities are laid out and just making sure that everything is running smooth from a user perspective. I'm wanna put myself into the customer or the users and mindset and go through this app or this website as if I were the actual customer or end user. And so they're going to be working with the entire team and letting everybody know if there's any technical issues or the content doesn't make sense. If there's any misspellings, if the design is off, right? And so they're going to report that back to the other team members to make sure that everything is running smoothly so that they can have a great final product. Okay, so that's going to be this lesson here. Just wanted to give you an overview of what you can expect within typically a small to medium size business when you're going to be coming in as a UX designer, UI designer, right? You're going to have these different individuals within the team. And once again, like I mentioned previously, if you have a lot more skills than just a UX UI designer, you understand landing pages, you understand sales funnels, you understand and influence behavioral psychology, which you're going to learn in this course. You're going to be so much more valuable to your team. That's going to be here for this one. And we'll see you on the next one. 10. Agile Approach To Project Management: In this video, we're going to go over the agile approach to project management. Now, this is going to be one of the most common types of project management styles that you use in the actual business world. If you're working on a particular project within an organization, or if you're working for yourself as a freelancer, or maybe you have your own company and doing kind consulting. This is going to be the most widely used project management system that you're going to be using. So let's go ahead and jump into what exactly is the agile approach to project management. Okay, so one of the first things that I want to share with you is a comparison here between the traditional approach versus the Agile approach. As I mentioned, the Agile approach is going to be the most common, widely used. And in the bigger companies, larger enterprise types of companies, they still do use the traditional approach, which is the waterfall or linear model. And as we go through this lesson here, you're going to realize just how much more powerful the agile approach to project management is versus the traditional approach. Because with the traditional approach, as you can see here, everything's in a sequential, linear fashion, where you have the requirement analysis, you have the system design, you have the implementation, and you have the testing, deployment, and maintenance. This is assuming that everything is working just fine. Everything is going just as planned. Well, that rarely happens in any type of project. There's always going to be bugs. There's always going to be ancient problems, things that you need to adjust and modifying fixed along the way. And so oftentimes this model is going to fall short. However, you know, the larger enterprises still uses and they still feel that it's important, right? And oftentimes what you'll find in these large organizations is you'll find different individuals handled in just one area of the actual project. So you may have somebody doing just the UI, you may have somebody just doing the market research, the analysis, right? And so you get to understand these large organizations have larger budgets and so they're able to allocate more resources to these individual. So the agile approach is something that is very, very unique and precise, that allows you to collect data and feedback very quickly so that you can modify and adjust without having to go further down the line. Because if you're developing, let's say, a website or some sort of app, you want to get feedback as quickly as possible so that you can find out what are the bottlenecks, what are the issues, what are the problems? Fix those right away. And another thing to keep note of here is that the waterfall or linear model is typically used in the software engineering space. So not very much used in the UX UI space. However, some larger organizations still use the waterfall or linear model. The typical agile web development process is composed of a series of sprints or cycles that involve the initial discovery phase, that design phase, that development, and then the testing. So essentially what happens is every sprint results in a tangible product and new information to guide the next sprint. And so you can have little mini sprints within each stage. And then you're essentially being able to plan, design, develop, and test at each particular stage. And you're able to get that quick feedback. You're able to get that testing done right away. And so you're not having to wait, you know, as far as the waterfall model, having to wait at the last stages to actually get back that information where you're testing and you're seeing if things are actually working properly, if there's any bugs whose any issues, you're doing that consistently. Every single step of the way here, right? At the planning and designing, at the developing, at the deploying. And so everything is synergistic. You're getting feedback very quickly and you're able to modify and adjust without having to use very many resources. One of the things that I love about this agile approach to project management framework here is that it takes on the NVP model, the minimum viable product. And this is the term that was developed in the Silicon Valley area where you are constantly putting out a product that isn't very good, that, you know, has some bugs, you know, has some issues, has some problems. But you're wanting to get that feedback the users to let you know, hey, this is what I'm experiencing, what the product, this is the problem that I'm seeing here. This is what I believe can be fixed, can be adjusted, can be modified for it to be actually functioning properly. So you're getting that constant feedback because you're putting out products that you know are not completely finished, but you're doing so with the whole intent to get back that user feedback, user_data immediately. So then you can constantly modifying, adjust. And then as you're moving towards the finished product, you've gone through so many iterations because you've gotten that feedback from the marketplace, because you've gone that data. And so you have a finished product. You know that the marketplace wants because they were the ones giving you back the feedback. And as I mentioned previously, the waterfall method is still used in some organizations. And so that's why it's important as a UX UI designer to be able to remain adaptive and to be able to adjust and modify to whatever type of approaches being used in your particular workspace. Or if you're working for yourself, you're a freelancer. You're most likely going to be using this agile approach. And just to reiterate here, the core difference with the Agile approach is that it helps permanently improve the product based on the feedback from the users. Whereas the linear models goal is to set projects and production and then with the maintenance. And so you gotta think about it with the linear process, that linear approach. You have the maintenance stage, which is at the very end where they're constantly modifying and adjusting versus here with this agile approach or modifying an adjusting continuously at each stage. Okay, so let's take a look at some of the different components within the agile approach to project management. So you're going to have a product backlog, and this is typically like a spreadsheet, a charter simply something on the wall that you're going to use, maybe index cards or maybe sticky notes. This is really giving you the backlog. In a visual representation of the team's progress. And then you have the sprint backlog. This is the list of tasks that you need to accomplish during a sprint and before a sprint and started, the team chooses items from the product backlog and determines the tasks that are necessary to meet the user's needs. And then we have the scrum meetings. These are daily meetings to check in and set the course for the workday. And then we have the Scrum Master. This is the actual facilitator will meetings and the communication between all of the team members. And then we have the shippable increments. This is the tangible function in applications that showcase a feature or the final product. So each sprint should result in a shippable increments. The reason why you're working a different sprint is because you want to have something tangible, physical, typically at the end of that spring because this allows you to have that progress after each sprint to be able to have something tangible, to actually say, hey, this is what we did, this is what we came across and this is the information that we gathered and what we put together based off of this previous sprint. So this is what you should expect when working in an Agile project management system. And so now let's take a look at some of the benefits working in an Agile project type of framework. So some of the benefits here is the faster feedback keeping up with any changes, higher productivity. And then the focus on the users versus the linear model where you're having the maintenance at the very end. And then you're modifying an adjusting after you've actually completed the project. Versus here, in the Agile approach, you're able to get feedback on the users very quickly, very easily, and be able to modify and adjust as you go. And then we have transparency and accountability earlier, unpredictable delivery and then very predictable cost and schedule. So, and so let's take a look at some of the benefits for the UX designer. Change design and logic in accordance with the actual user feedback. Remember, every single thing that we're doing in this approach here is centered around getting that user feedback. So we'd know exactly what that user wants to experience, what that project with that particular website app, with that particular application, whatever that may be, right, that user feedback is critically important in the early stages so that they are taking part in the building of this application so that we know ultimately this is what they're going to want in the marketplace. Another benefit here for the UX designer is having opportunity to test new ideas using AB testing be part of the project throughout its lifetime. And here are five questions that you want to ask when you're presented with new ideas within your team. Because a lot of times people are going to have different ideas, are going to have different questions, different frames, the thoughts. And you really want to ask yourself when they're coming up with different ideas, will this ultimately help us achieve our goals for this project? Is it consistent with our brand or with the brand that you're working with, that you're looking to develop that product, website or application, whatever it may be, is there a better solution that already exists, right? If somebody has a great idea already and somebody has another idea, which idea is better or which ideas already working right now? Is it going to be better than what we already have existing and what is the worst that can happen if we tried it? This is probably the best question here because it's always about understanding that, hey, we want to gather as much feedback and data as possible so we know ultimately what the market is going to want, what does the users are actually going to get excited about. And so it doesn't hurt to try different things. However, if it's taken away time from the project, if it's non-related, right? You gotta look at it as something that's going to add value to the project. And then finally here, how will we evaluate whether or not the idea was effective? So you've gotta have something to measure. Their will gets measured, gets accomplished. And so if you don't measure the output, the data, and be able to look at, did this actually work? Then it's going to not being very effective as far as just taking on different thoughts, just taken on different ideas, different questions. And so these are five very important questions to ask whenever someone throws out some kind of idea or just something out of left field, right? This is something that's going to allow you and your team to be held accountable to each other, where you're not just going in and just thrown out things left and right. You want to see if it's going to add value to your existing project or what you have already established. Okay, so that's gonna be here for the agile approach to project management. And we'll see you on the next one. 11. Scrum - Flexible Framework: In this video, we're going to go over the Scrum flexible framework. Now, this is a framework that is used in conjunction with the agile development projects to make things a lot more easier, to streamline a lot of the different tasks and to really define the roles of each individual team member within the actual project. So let's go ahead and jump in here to what exactly is Scrum flexible framework. Now, just like I mentioned, the Scrum is a framework use with agile development projects that helps teams work together. And so ultimately what it does is it aims to make projects more effective, more efficient by defining the roles each team members, and by providing a specific way, organizing the workload over a series of short development cycles or sprint. So if you look at the image over here on the right, the Kanban system, this is typically how that looks as far as Scrum framework. You have your to-dos, you have things that are in progress. You have things that are ready to deploy. And then you have the approving stage and then the final stage of w1. And within each of these different stages, you're going to have different sprints, right? Let's take a look at some of the elements of Scrum. So we have the sprints, which is the work cycles, and then we have the stories just away that projects are divvied up into small, consumable pieces. So when we look at the stories, the small task over here is going to be taken care of by this individual. Small little piece of a project is going to be handled by this person over there. So it breaks things down into smaller pieces to be able to easily be consumed, so to speak. So each story is assigned to a team member and moves through the series of columns in a Scrum board. Just like I mentioned, you have the do you have the in-progress team review, Owner Review, and done, and then the stand-up. These are just standup meetings that drive a sprint. You're going to have these typically anywhere between five to ten minutes. Just a quick little meeting that really tells you what to expect, what's going to be accomplished through that sprint, right? And this is all going to be with you working within a team environment. Obviously you're not going to have a standard put yourself. So this is all from the perspective of you working within a team. And then we have the rows. So this is where everyone on the Scrum Team is going to be a team member, right? Except the Scrum Master. This is the individual that actually runs the Scrum board. So you can essentially call them the Project Manager, so to speak. And then we have the backlog meetings. So this is where you're prioritizing all stories and you're preparing them for the upcoming sprint, right? So notice how this is all in a sequential manner. You're doing it so that everybody can be all on the same page. You guys know where everything is at, and you have one person at the top, which is that scrum master, right? That is really directing and guiding everybody to make sure they're all in the right place and they're taking care of the right type of sprints, right? The right type of actions to ultimately get them to the final destination. Then we have the planning meeting. This is where the team chooses which stories to take on and who to assign them to. And again, this is where the Scrum Master's typically going to be directing and guiding everybody to make sure they're all in the right place. So let's take a look at some advantages of the Scrum flexible framework. So Scrum's main advantage is the way that it facilitates adaption to changing customer requirements. Because we're using sprints, right? And you are gaining feedback very quickly from the actual what customer, from the user's. It really allows for the facilitation to adapt different things along the way. If something should be changed or modified, if something needs to be shortened, whatever that may be, right, the constant user feedback and the requirements that are coming back allows the individuals to really make changes on the fly and be able to ultimately come out at the end with a finished product, that finished solution that is going to be exactly what the users want, right? So the system of sprints encourages regular feedback, right? Just like I mentioned, every little Sprint is going to give feedback. It's going to give interaction back from the user's letting us know what exactly is there to be done, to be modified as far as adjustments, as far as modifications, and be able to look at different things to improve for the next iteration. And then also by defining roles for team members and clients. It promotes collaboration and clear and open communication between all parties. Some additional benefits here, we have the ability to adapt to different cycles. Faster implementation. Tasks are grouped into sprints, easy to track progress using the combined flow. And this is going to be the main type of framework that you use when you're working in the UX UI field. Again, if you're working for yourself, you're a freelancer. You're doing client consulting. This is something that you're going to be implementing for yourself. However, it's important to also understand that when you're working in a team environment, this is what you guys are going to be using. Everybody's going to have their defined roles. And you guys are going to be working within those sprints to be able to gather feedback very quickly, very easily, and ultimately finish the project and be able to have it ready to go to market. Because you've been able to get that user feedback. That's going to be here for this one and we'll see you on the next one. 12. Project Management Apps: In this video, we're going to go over the different project management tools that you can use in your UX UI projects. So let's go ahead and jump in here. So the first project management tool that I highly recommend that you use because it's free, is Trello. And this is a very nice and easy application here to use either on your phone or on your desktop. And allows you to lay out that Kanban flow very smoothly so that you can look at all the different sections, right? The resources to do the doing, the done. And we're going to walk through how to create a simple Kanban flow board here in a moment, but just wanted to walk you through here as far as some of the features and functionalities. It's very easy and simple to setup. You've got great visualization and color coding. You can change the background, you can change a different color schemes. You can have different images on the tasks. This allows for easy team collaboration. You can add team members and you can do a lot with the different backgrounds. So let's go ahead and go to my computer and we'll do a quick walk-through of the Kanban flow set up there through Trello. And I'll show you how to create a Trello board. Okay, so here we are at my computer and we have a Trello board here. Very easy, very simple for us to set up. All you need to do is add a list here, right? Lets say we want to add in the resources, just like we went through on the slide deck there. And then we want to do the to-do. And then we want to go ahead and add this one and then we want to do the doing. Then we'll add in the Dunn. Okay, so we have these different boards here as far as the lists. And let's say we have a todo here. Let's say build a wireframe, right? For websites application, right? Nice and simple. And you can see how easy this is here. And once you set up one of these tasks here, you click on it and you have a lot of different features here. You can add different members and you can invite people to collaborate on this here you can put a little bit better description here, like hey, this is for XYZ project, right? And like I said, this is going to be something for you typically to work on. If you're doing freelancing, if you're doing client consulting, because Trello is free and you have so many different features and functionalities here for you to be able to manage your project. We go save there. You can put a label on here as far as a color. Let's say we want to put green there, right? You can put a to-do date in here. Let's aids due tomorrow and let's say we have any kind of attachment here. You can add in from your computer, from a drive, and then maybe you want to have a cover here. Let's say you, let's add in this one right there, OK. And so now we can change this around and we can have this cover there right on the actual task. So very nice-looking, very beautiful here that we can add as far as for the tasks, for the to do's. And same thing over here, we're going to add a task. We can go through the same process and then we just move things to the next stage. When something's actually being done, we're going to move that to the doing. And then if we want to invite different individuals, different team members. Go to create team, put in the name John Smith. Ok. And choosing or whatever department created team there, right. And then you'll send them in actual invite to this particular board here. And so this is just a fantastic tool here that you're going to be able to use if you're just starting out and the UX UI space. And let's say you have Nino current clients that you're going to be working with. And let's say that you want to step into the freelancing. Do you want to segments a client consulting? This is going to be one of the easiest, most efficient ways for you to manage your different projects. We've been managed different client. Understand that when you go into an organization, you're going to have different tools, different project management applications that you're going to be using. But I wanted to just give you a quick overview and walk through of Trello because it is going to be one of your best bets when you're just starting out because it's free and it's very easy to you. So let's go ahead and jump into, back to the slides and we're going to look through the other project management tools. And I'll give you an overview of those as well. Okay, so we're back at the presentation here, and we can see here there's several other different project management tools. You have base camp, fried camp, slack, Asana, and notion. This first one here, this is slack. This is more of a communication type of tool. You do have project management capabilities and functionalities. However, it's mostly used as a communication tool. I use this every day. It's very, very powerful. And then you have a sauna here, which is mostly a project management tool. And I believe this one right here is space camp. So let's go back to my computer and it's go walk through these different tools so you can get an overview of how they work, the pricing, and which one's going to be most likely the best for you. And what are the pros and cons of each? Let's go ahead and go back to my computer now. Okay, so let's take a look at base camp here. Base camp is a great, great tool, very powerful. A lot of companies use this and I used to use this before as well. However, one of the things that you need to keep in mind is that this is something for a lot of times larger organizations because the pricing is quite high. And when you look in at $99 a month flat, I mean, that's quite a bit. If you're just a startup, if you're just getting started in the space, you don't want to have that kind of costs incurred every month, right? You want to be as lean as possible. So this is something that I've seen where larger organizations have because there's a ton of features, attentive functionalities, you can bring your clients onboard to be able to collaborate within the project and have them give different user feedback. So a lot of different tools that you're going to have access to within base camp. And you may run into this at a more larger creative agency. If you're going to work in a team setting, they may be working with in base camp. However, just starting out, I would not recommend it. So then the next one here is free to camp. This is similar to base camp, and this is one that I would actually recommend that. Actually sign up for as well and give it a test run. This is something that I've used as well in the past, and it's very inexpensive. And it does a lot of the same things that the Base Camp des. However, at a lower cost, you have your task list here, compound board, Jaeger, different subtasks. You can get a bird's eye view what the Gantt chart. And I believe it's very inexpensive. It's like, I think five or $10 a month. That's going down to the pricing. And let's go. Okay, so you can sign up for free. And then if you want to have one user which should be, you know, just in our for you 149 permanent. I mean, this is nothing even if you use the business version here, which is the $7.49 plant, I mean, this is super inexpensive and this is well worth it because a has a lot of the different functionalities and tools that base camp has. Its just a slightly different user interface. Okay, and so that's something to take note of if you're going to want to use something similar to base camp, all the features, all the functionalities, slightly different user interface than I highly recommend with freedom can't because with a Trello board, you're going to be able to use that very easily, very effectively, and it's not going to cost you anything. However, it's missing a lot of the features and functionalities that you're going to have here within fried camp, which this is going to give you that all in one. So now let's look at the SLAC here. As I mentioned, slack is more of a communication tool between you and team members. And this is also going to be free. I believe it's free up to a certain amount, but you shouldn't be able to just download this, set it up as far as for a channel. And you should have, you know, thousands of messages that you're able to send within a team. And then they have larger different packages that you can pick up if you're looking to have multiple different team members. And they do have other packages that you can pick up once you're using the actual tool. However, I don't recommend that because this is going to be something more for like a enterprise level organization, but for you if you have one, maybe two to 345 team members, this free version of slack should be just fine. And so let's go up here to the pricing and we can look at some of the different features and functionalities that are involved in the free version versus the standard. And so we have the free version here. You have access to 10 thousand and your teams most recent messages. This is something where if you guys are sending a lot of messages back and forth, you're not going to have the full history, only the latest 10 thousand messages. And you have different integrations here, voice and video calls. This is something that can be pretty big here if you look into Keep records, right. So that's a big deal. And then 667 a month here for being able to essentially have all these additional features and functionalities. Same thing here with the 1250. You have a lot more features and functionalities, but typically, you should be fine going free if you're just starting out. Obviously, if you want to use the standard and you want to use a lot of the different functions, a lot of the different features and a lot of the different features that are available, you can sign up for this as well. But mostly this is going to be for a communication tool between you and other team member. And then we have a sauna here. Asana is one of the biggest in the marketplace as well. And they have different views as far as the common bond, as far as a list, I'll go down here. We look at how you can look at different user flows, timelines, and it's ultimately a very nice tool. And as far as the competitiveness and pricing, they are fairly competitive. They have a really nice user interface. I have to say that definitely recommend that base off of what I've seen in how I've used it previously and different team environments. And then also, let's look at the pricing here. The pricing is quite competitive as well. 1099 for each user. You can use this for free as well and kind of test it out. However, you are going to have some limitations here, but if you want to try out the sauna for free, right, see how works you, how looks you can go ahead and give it a shot. It's 1099. The biggest thing here that I want you to take note of is at when you go and look at fried camp, right? You have 149749, slightly different user interface. However, you're going to have a lot of the features and functionalities that Asana will have except for a different user interface. So it's up to you, but these are going to be great for you to come in here, get a free trial, try them out, see how it works and ultimately look at which one works the best for you. Now the final one here is going to be notion, this is one the brand new here. This is actually what I use for the majority of my work. I have everything in different projects. I love the different features they have here, the notes, the docs, and this one is a little bit more complex. However, the pricing is very, very low. There's a lot more things that you can do it this, and there's lot more customizations. However, it does take a little bit of a learning curve and so I definitely recommend you check this out if this is also something you want to look at. I believe the pricing is very inexpensive as well. You can get started for free. Just understand that this is a lot more features and functionalities and all of the other tools and a lot more customizable. And it does come, like I said, with the larger learning curve, but I believe it's one of the top, if not the top in the marketplace currently. Okay, so just wanted to give you a quick overview here of the different project management tools. I highly recommend that you check all these out, do some free trials, figure out which one's going to work best for you if you're just starting now, use a Trello, get familiar with that. And if you want to try all these other ones, go ahead and do that. It's going to be worth the try to be able to ultimately find which one works best for you and your situation. Okay? So that's going to be here for this one and we'll see you on the next one. 13. XD Lesson - Introduction: Hi everyone, welcome to our first Adobe XD lesson. And first of all, let's make sure you have XD installed on your computer. For those who don't have this app yet, please visit Adobe.com slash XD and download the app. There are two plans for XD, paid and free. You see that for starting, you may use a free plan which has only one shirt, Active document. To document editors, one active shirt link and cloud storage of two gigabytes. Of course, when you will grow as a UX UI designer, you will need to expand your plan. But for now it's not necessary to pay for the app. Once you install the XD may open it. And home screen of this app looks pretty much like this. If there will be a difference in versions, the main things are the same. Here you have four precedence. To create different types of projects. There is a mobile app or Twitter posts, social posts, sorry. Social posts and custom size. Please note there is a small job down which allows you to select different precedence different devices. You may also create NO ONE, one like custom size, type the necessary dimension. And let's go. The learn section has small lessons of three minutes of very useful things about about XD. Cloud documents is the section where you see your cloud documents and respectively the shirt document with you are also a section for shared document with you. Don't have any managed links will take you to the to the website, to the webpage where you can manage your shared links and so on. These are deleted. Deleted projects. Very helpful thing. Deleted section allows you to restore your documents and view it online. Also, you may deleted permanently. So this is pretty much all for the welcome screen of x D. Now we can continue to explore the UI of this app. Okay, it's time to dive in user interface of the Adobe XD. And on the main level, on a general level, you may see the design prototype and share tabs, as well as tools aligned vertically and the asset panel. So for the tools who will work with Photoshop or some other. Software from Adobe, it's very common and natural that don't think that they find anything extra here. But for those who are new to the Adobe family and XD precisely, I will give a small I quick introduction to each of these tools. So pointer allows us to move around elements, rectangle, many creates rectangles and also cursor or may use, may move the sides, the object itself. The LX creates LMS. Please know that holding Shift button helps you to create, helps you to create the shape. And the rectangle. Line. And BC two, or it's a pan, but works as a busier too as well. So Text Tool and knew our boards tool. You see that on the right-hand side, there are some options for types of outwards. You may press, and it creates the iPad and Nexus nine, odd bought automatically. Let's figure out what these three tabs are responsible for. So if you notice, we are in the design section at the moment. So it allows us to create different shapes. So the actual design, yeah, don't pay much attention on my drawings as they're too bad. So prototype section is responsible for connections between our boards and their transitions. You see that the sidebar also changes to two other functionality, to other options, which are related to prototyping and interaction between elements and screens. Okay, we will get into more details later on when we do some design and make the prototype from that one. But now let's just focus on the general things and go to share. Sure. Helps you to actually shared the project. And you see that there are a couple of things to note. So first of all, goes a view setting. You may share it as a design review for development, presentation, user testing and cost. Custom means that you may select a specific options for your project sharing and include design specs, show hotspot hints opened in full screen in allo comments. Just to clarify that. Design specs is the option that usually selected for web developers so they can cut the your mockup to HTML CSS link access is also can be modified a bit, so only invited people anyway. And when passport, you may create a passport for your project if you wish there. You may also create a custom title. Here, custom custom title. And your link will appear here. So once the project is uploaded, link appears here and you may copy your link and share it among team or stakeholders. So it was sort of a quick overview of x Dui. But let's dive into the details of design section as this is the one we are interested in, OK, because most of the time we will use design section and it has to be analyzed a bit more accurately. So we'll add start. And we'll create an element, an object. Once I've created an object, it the options appear on the right-hand side. And you can modify your object to your liking, to what you need in your project. Let's fill this. Okay? So let's start from the top. On the top we see alignment options. So one interesting thing is that when you don't have two or three elements to align to, the alignment will be applied according to the odd board. So see, once I press these buttons, these icons object is aligned coding to the outboard. Once we have two elements on a different in different positions, they will be aligned according to each other. Okay? Same for the left and right alignment and center of course, the distributed function helps you to, to have an equal spacing between objects. You see. Repeat grid creates partisan that could be expanded vertically and horizontally. Okay? Now it seems a useless, but you will see how useful and applicable could be in your web design. Let's see the other options. The width and height could be modified. Here. It may lock the proportions so it won't be squeezed or shifted. Okay? Once I selected this one, it will be like this. So this is a difference. You may type your costume with or hate. If necessary. K, x, and y are responsible for positioning the element. Points I select. Ok. See this two icons. Flip the object or component or group of objects, horizontally and vertically. The scroll helps you to create a horizontal scroll and vertical scroll. Right now, just live it. Because there will be a specific lesson where we discuss. These two are the main or these three options in a greater detail. And I will show how the could be applied in different areas of the project. Fixed position when scrolling. Let's create an sample here, okay? So you see the one has a scroll and it also has a fixed position. Okay? Again, we just glancing on the functions on this abstract project. So just to familiarize with the tools and possibilities of x d k. If the responsive resizes disabled, the scaling of the objects will look like this. So they will be free transformed according to your needs. Okay? Once you select the responsive resize, they will be moved. This is for web development. If you're trying to move things around in your website or mobile app, it's better to use responsive resize. So they want change their size and will be distributed properly between each other. 14. Graphic Design Section Overview: In this video, we're going to go over the foundations of graphic design section overview. We're going to walk through what exactly we're going to cover in this particular section. And really giving you a big picture overview of what's to come in this particular section. So let's go ahead and jump right in here. Okay, so what we're going to be going over in this section is how color works. We're going to get a fundamental understanding of the psychology of color, how it plays a factor in design. We're going to go over color theory, how to understand the different factors, different components that all come into play utilizing the proper color schemes. And then we're going to go over the two different types of color schemes here. As far as the RGB and CMYK, we're going to go over those in detail. And then we're going to go over the color wheel and color schemes specifically. This is very important here for you to understand because as a designer, you want to have a fundamental understanding of why it is that we're using various colors, make sense together with others. And why we want to stay away from certain colors, depending on the look and feel that we're looking to get from the actual end user, right? We want them to be able to feel a certain way, to have a certain affinity or a certain feeling about a particular brand or a particular product. And this color scheme is really, and the color schemes are really going to play a factor in that. And then we're going to go over working with fonts, different types of fonts that are going to be recommended for certain situations. How to make sure that you're using the fonts in the right places, that you are mixing different types of fonts. So DOE has a nice look and feel to it. And then finally, we're going to go over icons. Icons are very, very powerful to have on a website or a particular web application. They add a lot of uniqueness, a lot of fun and excitement to the application or the website. And it really adds a little bit of un-fun flair to the design. So really excited for you to get started in the section, and we'll see you on the next one. 15. The Psychology of Color: In this video, we're going to go over the psychology of color. This is going to be something where we go into the psychology, the color theory behind how to use colour properly, how we look at color from different perspectives, and how we're able to combine different types of color, themes and color combinations to ultimately come up with amazingly beautiful design. So let's go ahead and jump into the psychology of color. This is something that as a UX UI designer, you need to have a foundational understanding of this is where you're going to be able to understand why it's important to have different color schemes. What makes the most sense as far as having a particular color and making people feel a certain way. And why some colors are going to make more sense versus others, right? Depending on the unique situation. And so having that color Foundation is really important for you as a UX UI designer. And I'm excited to get started here. So let's go ahead and jump right in here. When we think about color, right? How does it actually work? If you look at the right-hand side here, you look at the different color schemes. You look at the blues, you look at the light blues, the navy blue. Notice how everything here has the perfect combination. You look at the purple, you look at the light pink. You look at the y, had all that really compliment each other, right? You look at the green down there, how you have dark green, light green and the white. Everything is in perfect order because it's complementing each other. And so that's what you're going to learn in this particular lesson here. Why it's important to use different colors. How to use every color schemes at different designs when you look at different websites, different logos, different brands, This is where you're going to get hit a certain emotional experience when you're looking at a brand that has a color blue, you're going to feel a certain way when you have a brand or a particular website that you're looking at and it has the green colors, you're going to feel another way. And so that's really what color does it gives you that emotional experience to the end user. And choosing the right color means your audience who will be able to instantly know who you are, you know what the product is about, what you do, and what you're about. And so if you don't have the right color schemes for your particular product in how you're looking to present that and to the marketplace, then you're going to have a hard time selling the products, right? And having the right type of users actually using the product. Each color speaks to a different aspect of the consumer. Gets your mind into the consumer mind and think about how these different colors make you feel. And each particular color speaks to a different aspect of the consumer. When you look at the bottom colors of green, this elicits peace and well-being. Think about meditation app. This would be a good color scheme for having a meditation app where you're able to relax, you're able to feel good, you're able to have that overall well-being feeling. And then you have pink in the middle here where this is more of a feminine. Type of color obviously, right? And then you have a touch of purple, which is a little bit of luxury feeling. So you have the feminine type of color scheme as well as the luxury type of field as well with the purple. And then blue provides emotion such as trust, safety, and relaxation. Just think about Facebook. I'm sure you've used Facebook or you're on Facebook. Facebook has the blue color scheme and it has pretty much the color scheme at the very top here. Because every time you login to Facebook and wants you to feel a sense of trust, safety, and connection with the actual platform because you have your friends and family on there. You have different people that you're communicating with. And so understand that these different color schemes are going to make people feel a certain way. So now let's talk about real color psychology here and how our minds automatically react to colors without us knowing that you look at the picture over here to the right. And to get a little bit technical here, I want to give you really the understanding of how this actually works from a technical perspective. The moments our eyes perceive color, they connect with the brain, which gives signals to the endocrine system, releasing hormones responsible for the shifts in mood and emotions. If you look at the picture over here to the right, looking at different colors, you'll notice how they're making you feel. And if you read the description there right, where you have cheerfulness with yellow and orange, M6 where you have comfort with light green and then happiness here with blue and green, right? Optimism down there with blue, you'll realize all the different times that you have come across these colors and how they made you feel. Now you have an understanding of what different colors schemes are going to do for you when you come across them. This is something that is embedded in our DNA and this is something that is automatic. Every single human that looks at these particular colors, It's going to feel these types of emotions. It's automatic. When you are looking at certain colors, you're going to feel a certain way. And so think about in your designs how you want people to feel, how you want people to think about the product, the brand, whatever it is that you're building as UX UI designer and the properly selected colors helps put users in the frame of mind that compels him to take acts just like I mentioned, if you want somebody to feel secure, feel safety, you wanna go with blue. If you want somebody to feel relaxed, calm, and you want them to sign up for, let's say, a meditation app. You want to go with that green, right? So understand that you have tremendous power here. Understanding how these different colors work, how they are able to affect people, to feel a certain way and to take certain action. And here's one of the biggest things that keep in mind is app. It takes only about 90 seconds for people to make a subconscious judgment about a product. And between 6290% of that is assessed based on color alone. So just think about this. This is all happening unconsciously. You are looking at a particular color scheme and your mind is already interpreting how you're feeling. You're feeling a certain way. And a lot of times is just unknowingly happening. You just feel a certain way and you don't really know why. And I'm sure you can think about multiple different situations where you've seen a new product, you've seen a different color scheme on a particular website or whatever that may be, and it's made you feel a certain way. Or now what you can do is go to different websites, look at different apps and see how their color schemes are set up in what they're trying to tell you, how they want to make you feel, how they're getting you to sign up. It's all based on the different color schemes that are getting you to feel a certain way. And if people are making decisions within 90 seconds at a subconscious level, then this is huge because it's all automatic and it's happening without us even being aware of it. So very powerful to understand the power of color and color psychology. So now let's take a look at the different colors in what these actually mean, what these convey, and how you want to be able to use them effectively. So as far as read Here, we have confidence, Youth, Empower. Then we have orange. This is going to be friendly, warm and energetic than we have yellow, happiness, optimism and warmth. And think about this for a moment. Every time that you've seen these colors, think about how they've made you feel. You just think about yellow. Yellow is like the sun every time that you're outside and you're getting some sun, you're feeling good, right? You're getting that energy from the sun. You're feeling warm, there's a happiness. And then we have green piece growth and help. Just think about green. A lot of times this is used in products that are from the environment that are environmentally friendly. And then we have blue, which is trust, security and stability than about with Facebook, how we mentioned that it wants you to feel safe and secure and wants you to feel like it's a trusted website. And then we have purple, luxurious, creative and wise. And then we have black, which is reliable, sophisticated, and experienced. And then we have whites, which is simple, calm, and clean. And these are typically going to be the direct colors. They're not going to be where you have a little bit of red or orange mixed together, where you have maybe a little bit of yellow and green. This is the exact color, red, color orange. There's no mixing of colors. It's just the color yellow. This is how it typically makes you feel green. And so this is what these colors convey. And this is very important to understand as a UX UI designer so that you can use these colors effectively in your designs. Now we're going to go over the color theory here, which is the RGB, red, green, blue. And this is used mostly for digital graphic design projects such as design, online advertisements, and everything that has to do with digital only files. Okay? And so ultimately, what color theory explains is how humans perceive color and the visual effects of how colors mix, match or contrast with each other. And that's what we're essentially going over in this entire lesson. But different colors mean how they make you feel, had a mix and match and contrast each different color. And to get a certain feel good, a certain emotion from that particular user, right? Because each one of these colors, just like we went through in the previous slide. Communicates a certain message, a certain feeling, a certain emotion. So that's an important to understand. And another important factor here in terms of colour theory, is to understand that colors are organized on a colour wheel and grouped together into three different categories. You have your primary colors, secondary colors, and tertiary colors. Okay, so this is an overview here of the additive color mixing model. Now let's go over the subtractive color mixing model. And the reason why these are called additive and subtractive Is that what the additive you're going to be adding different colors would do subtractive. You're going to be obviously subtracting different colors. And so the CMYK stands for cyan, magenta, yellow, and black. And so these are four different colors in the subtractive colors are created by completely or partially absorbing or subtracting some light wavelengths and then reflecting the other. So notice how in this one here, you're beginning with the color white. And as you add different filters with white light such as Inc., than this white light takes on an appearance of color. And this is what is used in different magazines, different print material, anything that's going to be tangible or physical in the real world, when you're working with digital type of document or digital type of media, you're going to be using RGB when you're using anything that's going to be printed that requires a physical type of product, then you want to be using the CMYK. Okay, so now let's take a look at some key factors when working with color, customer expectations. When it comes to customer expectations, you need to understand which shades are going to be the most appropriate based on that particular brand history and a personality. And then when it comes to customer preferences, are you choosing the right color scheme or the right colors that evoke trust and the users. And then when it comes to a brand message, what kind of emotions and characteristics is the brand trying to portray? Sometimes you'll have brands at wanna do complete revamping of their brand. They want to have all different color schemes. They want to represent, you know, different things with their logo, with their brand, with their app, whatever that may be ranked two often come to these unique scenarios where people, where businesses want to completely revamp everything. And so you really want to ask the client how they want their users to feel. What do they want their brand to represent? What do they want people to say about the brain as far as how it's going to make them feel. What kind of emotions and characteristics is the brand trying to portray and the marketplace. And then also looking at the competitor's, looking at what is working for the competition and using it as a reference. Oftentimes we don't put enough emphasis into looking at the competition. Especially as, you know, as a creative individual, you like to create something from scratch that's never been done before. But oftentimes, it's a lot easier to look at what the competition has already done and be able to modify and adjust and take ideas from that, right? And then be able to create a unique design based off of that. And so that's going to be here for the psychology of color and the color theory. And we'll see you on the next one. 16. Color Wheel & Color Schemes: In this video, we're going to go over the color wheel and color schemes. Now this is going to be a very important lesson here, so that you can understand how the color schemes work and how they compliment each other, that different variations of color schemes and how you can use them as a model to be able to, using your designs in all your different graphics frame, enable to understand how to use the different color schemes and color wheel is going to make your designs stand out more and have more of a colour flow in combination that is going to compliment each other with the overall color scheme and design of the product. So let's go ahead and jump in here. So the color wheel shows the relationship between colors. And if you remember from the previous slides, you remember that's a lot of these colors here that we have next to each other. We're the ones that were complementing each other. You have the yellow and the kind of yellow, orange, the orange and the kind of darker orange. And then at the bottom we have the pink and the purple, the dark blue. And then we have the blue in the light blue. So all of these are complementing each other. And within the color wheel there are 12 main colors that we need to make note of. And the RGB color wheel, these hues are red, orange, yellow, true screen, I believe it's how you pronounce it. Green, spring, green, cyan, assure, blue, violet, agenda, and rose. And you can see those all here in the color wheel. And then the color wheel can be divided into primary, secondary, and tertiary colors, okay, three different groups. The primary colors, red, yellow, blue, and the three secondary colors. These are the colors that are created when the primary colors are mixed together, green, orange, and purple, and then the six tertiary colours. These colors are made from the primary and secondary colors together, such as blue, green, and red violin. And so understanding how the color wheel works and how you can use it to your advantage is going to be critically important. As a UX and UI designer, you want to be able to not only understand how color works as far as how it makes people feel and the message that it conveys, but how we can use these effectively in the designs, right? And so it really helps to create different color schemes that are going to match up together, that are going to look very nice, that are going to look amazingly beautiful and stand out. And it really adds consistency in the UI, the user interface. And so now let's take a look at the different color schemes and combinations. The first one that we have here is the complimentary, which is the purple and the yellow, right? You can see how those both complementing each other very well. And then we have the triadic, which is the yellow, the orange, and the blue. And then we have the split complimentary, which is the yellow, the pink, and the blue, and then the square. You have the actual assembles, right? The square in here, you have the yellow, the orange, the purple, and the blue. And then the rectangle, you have the green, the yellow, the pink, and the blue. And so you're going to be able to use these in your particular designs so that they can compliment each other. And you have amazingly beautiful designs where the beautiful colors. Now let's take a look at the warm and cool colors. Obviously, if you look at the top one there, you have cool, which is blue. Obviously him, you'd think about warm. You're going to think about the sun. You're going to think about yellow, orange. When you think about cool, you're going to be thinking about more blue, green, maybe a little bit of that purple. And so the color wheels divided into the warm and cool colors, also known as a colour temperature. Different color temperatures evoke different feelings. Remember how we went through in the earlier lessons where we have different colours that are making you feel a certain way, such as safety, security assurance. And a good example here with the warm colors is it is said to bring to mind coziness and energy. And while you think about the cool colors, those are going to be associated with serenity and isolation thing about the green, right? The green is going to be typically what's used for like a meditation app for like isolation. And so understanding the difference between the warm colors and the cool colors and how these play a factor in how they make people feel right in the kind of message that is wanting to be conveyed by the client. So now let's take a look at some designs here where you can obviously take a look at OK, I see that they're using a certain color. This is why they're using certain color schemes, right? Because they are trying to get a message across from the color scheme alone, right? The colors that they're using. These are the top meditation apps by downloads in the US for 2018. Number one, you have the calm headspace, Insight Timer, 10% happy, 10% happier, aura. And you look at all of these heuristic, you can tell that they're looking to convey a message of calmness. You have the warm colors here with yellow and orange, right? Which is, Let's bring to mind warm like the sun. You have some blue in here, bringing coolness in, warmed like water. And then you have one at the top that screen. So these all are conveying certain messages with the color schemes. And that's why it's important to understand what these different color schemes with these different colors represent, how they make people feel, and how you can use different color combinations using the color wheel to be able to bring out the design and the look and the feel of what that paran dot product the application wants to convey to its user. So that's going to be here for the color wheel and color schemes. And we'll see you on the next one. 17. Working with Fonts: In this video, we're going to go over working with fonts. We've gone over the color psychology, that color theory, understanding the different color schemes using your designs and you know how to mix and match different colors to bring out a certain feel, certain emotion in the actual end-user. And so now what we're going to go over is how to mix and match different types of fonts so that we're able to have users feel a certain way based off of just using different specific fonts. So let's go ahead and jump in here. Okay, so here's the thing. When we're working with fonts, there is a certain font psychology here that we need to be aware of. Font say something about you, your business or whatever kind of product or service or application website that you're designing for your end clients, right? Perhaps even for yourself. If you're developing your own business website, you're going to be doing, let's say client consulting, right? You want to understand how font psychology works so that you can use it to your advantage in your particular designs, in your particular applications and whatever it is that you're designing and building, right? So people have certain feelings, emotions, and associations when they see certain colors and they have the same type of response to different font. If you look at the image over here to the right, you can look at the different feelings that are going to be associated with various fonts. And then if you want people to see business as stable or modern, you should lean towards a san serif type face. And looking at these over here to the right, you can look at a traditional, stable and a little bit of elegance there with the cursive. And then we have the modern with strong type of font. So ultimately what you can do is really use this particular image here. And to help you get a better understanding of when is the right time to use what type of font. As you can see here, from all of these, they're all given away. Different emotions, different feelings just from the look of the font, because you can just have the font with no color, nothing else in and of itself will give off a certain feeling, certain emotion, and will convey quite a bit just from that text, right? Because you want to look at what is the meaning behind the actual text, the style. And so when we look at different fonts, we want to look at the different categories. So we have the serif, This is the trust respect authority for malady, just like we saw on the previous slide. We have the san serif. This is the straightforward modern trusts and sophisticated kind of tech focused cutting edge. Then we have the handwritten, We have the display, the monospace, and there are thousands of different types of fonts. But you really want to get the foundational understanding of the different types of fonts and what they're actually meaning and conveying. Because you want to be able to have the right type of fonts as a heading and have the right type of font in the paragraph. And sometimes it makes sense to have the same type of font and other times it makes sense to have two different. So, and if you look at the middle here, you look at the, oops, and you have the very long letters, right? And as far as the font, and then you go down, you look at the actual paragraph text. It's completely different. Sometimes it may make sense to have the same type of font in the heading and then the same type of font also in the paragraph. However, for More often than not, it's going to be best for you to have a specific type of fonts for the heading and another type of font for the actual paragraphs. So they both can compliment each other and it's going to be easier to read. And like I said, you wanna make sure that it's going to be easy enough for you to read and for anybody else to read. And sometimes it may make sense to use the same type of font at the very top as far as the heading, as well as the paragraph. And sometimes it's not more often than not, it's not going to make sense. You want to have one specific form for the heading and another type of font for the paragraph so that they're both being able to be read easily. Here are some helpful resources. You can look at fonts dot google.com, font paradox, font, joy.com. You can actually purchase a different types of fonts as well. And you can purchase some of your own fonts if you don't want to use the standard ones that come with all the different tools as far as like Microsoft Office or Microsoft suite. Just remember an understanding here that when you're pairing fonts, you want it to be where the heading is always easy to read and very nice and clear as well as a paragraph so they're not jumbled up together and it's difficult to read. Okay, so now let's take a look at the typographic hierarchy. This is essentially a system for organizing font that establishes in order of importance, allowing the reader to easily navigate the content. Typographic hierarchy shows the reader which information to focus on and which is the most important and which is simply supported the main points. If you look at the first example here you have heading one and then you have the different texts under there as far as the paragraph text, and that's going to be in H1. And then you have on the bottom there H2, which is a little bit smaller. And then you have the paragraph text and then you have the button there. Now, in this particular situation, depending on the look and feel and design you may want to have in H 1 first. And this is really prevalent in blog posts when you look at different headings, different subheadings, you're always going to find each one of the very top. And then after a few paragraphs of that particular H1, that heading one is covered, then you're going to go into H2 and it's going to go smaller in size as far as the size of the text. But this is typically what you're going to see in a blog post where you have H1, H2, H3, H4 typically. And it's typically going to where the size of the actual text as you go higher in the headings. And so if you want to see an example of this, I recommend just pull up any kind of blog or, you know, a blog website out there has a lot of articles, news articles, and you'll notice that you'll have the H1, which is kind of the main topic of the blog and what it's about. And then all the other headings are the subtopic. And so some of the key factors to keep in mind with the typographic hierarchy is the time phase, the size, the weight, the line height, the letter spacing, the color schemes, if you have anything in there, the letter case. Because if you're going down to h3, h4, h5, then that means that the heading texts is going to get smaller. However, you don't wanna make it too small. We're, it's mixing in with the paragraph text, right? So make sure you're aware of that. You'd just some key factors to keep in mind when you're using the typographic hierarchy. And so ultimately, what are the benefits of the typographic hierarchy? Easier orientation in the information helps quarters, so applied different styles, right? If you're following this particular hierarchy, is really easy to scale. It speeds up the design process. And then here are some different resources and you can use as well archetype att.com, design systems.com and Material dot o. Remember this is something that you're going to see typically either on a website or for the most part, you're going to see this in blog posts that, you know, several different subtopics, you know, with one main topic. And you're going to see it with several thousands of words within that blog post. So let's go into the Web fonts and it's look at what exactly a Web Font is. So there's the web safe fonts and then the system font. And in terms of the system fonts think Arial Times New Roman for Donna or Georgia as the prime examples of the web safe fonts. These are the ones that are default fonts that are found across the majority of different operating systems and devices. So just think about you pulling up a Excel document or a Word document. These are the ones that are going to come custom in that particular software suite, right, in that Microsoft Office Suite. And these are going to be found across the majority of the different operating systems and devices, right, as standard. And then we have the Web Fonts which are found is part of the default fonts available on various devices, operating systems, and are specifically designed in license for use on website. So think about Open Sans and rubato. These are going to be specialized fonts that typically are going to be needing to be licensed. And so it's important to understand the system fonts versus the Web fonts, so that you're using the right type of fonts for your particular situation. So now let's look at the benefits of having the different web fonts, the customization easy for front-end implementation supported by most browsers, right? Okay, so now let's take a look at converting fonts to curves. Now, this is going to be used and like different logo designs, different types of designs in general, maybe some applications may be a website, right? But mostly for like branding or customizing existing fonts. And so this is a good example here with the country grill and tavern. Again, this is something that is going to be used and unique situations where you're going to be able to do that in the Adobe XD. And we're going to have some walk through lessons for you to be able to walk through and actually look over the shoulder had to do this so that you can create these unique type of designs as well. So that's gonna be here for working with fonts. And we'll see you on the next one. 18. Working With Icons: In this video, we're going to go over working with icons. Now, icons are one of the most powerful things that you can add to a particular web application, a website, or whatever that may be as far as your project that you're working on because it allows for users and navigates the particular website, the application easier and also provides a very nice-looking user-interface. So Let's go ahead and jump in here to working with icons. So when it comes to icons, what exactly is the role of them? Well, icons represent a large portion of how users navigate around software, websites, applications. And research has shown that icons, when used correctly, can enhance the usability, be easily remembered, and improve the design of the webpages and software's being used. And one of the most important things here to keep in mind is that the icon should always have a text label unless you have the icon that is universally understood or known, you'd been, you'd typically not going to need text along with the actual icon. However, here's the thing you can have. Like let's say for example, this one here, this light bulb, this can mean a lot of different things in different contexts, right? So that's why it makes sense that for the most part, you use the icons followed by some text so you can give some context behind what you're trying to say there. What's your meaning, right? And so now let's take a look at three different icons here that I pulled from my website where you can look at the light bulb there. The light bulb is representing a marketing strategy and then the presentation there with people. And you can see there in number two, this is representing lead generation and then number three, sales support. So as you can see, oftentimes these icons by themselves can leave a little bit of confusion unless it's already a given as to what that particular icon means. People are going to need some sort of texts there to really give them some context behind what you want the actual icon to represent and mean. Ok, so now let's take a look at some resources here. We have the feather icons.com. There's a free collection of icons and then the flatted con.com, 2.5 million customizable icons, free and paid, and then Icon finder.com, over 4 million SVG icons. And they're going to be free and paid. And so here's just an example of a different style of icons. You have the typical outline and you have the field, and then you have the multi-color. And so now what I wanna do is I want to go over to my computer and show you a website that doesn't really good job with the icons in how they're using them in the overall look and feel of the website. Okay, so we're back here at my computer. And as you can see here, this website is dashed clicks.com and they used the icons and very well here. So you can see here icon right here. And you'll notice that each one of these has text with that because it's going to be hard to understand what this means. Everybody understands what a cart here means. This can mean a lot of different things depending on the context. Let's look at some different ones here. This is more of some graphics here we go down here. Let's go back up to the top. Here we look at the menu, the Facebook ads, right? All these different icons here. Here's like a credit card. Here's directory content marketing, right here for the agency, website, insights and some reports slip at the sea tools education. They don't have them here, but they do a really good job here with the icons. And like I said, it's important to have text more often than not when you're using an icon, because the majority of the time people are not going to know what it means and it can be open for interpretation, right? So that's why it's important to have the text there. And so that's going to be here for working with icons. And we'll see you on the next one. 19. XD Lesson - Tools, Object Manipulation and Components: When you select a manual option for responsive resize, you may see the ways to scale your object or group of objects and select whether you want to have a fixed Haidt or fixed width. Select both of them. Nothing will change. You may just make it smaller. If we take out fixed hate, we may resize the hate k, c. So you may play with it a bit if you wish to. Sometimes it may be useful to know this feature, to use it. Right now, as I said, we just exploring the user interface so you will know, you will know where to find this function and what is this function is four, okay. Next goes the blending mode. You may select. Some of them are also available in Photoshop. So for those who work in Photoshop, that would be quite easy to, to understand what is that for? But right now, in terms of web design, I don't use it. It's only applicable when you want to modify an image, a photo. But when it comes to user interface, I don't think it's necessary, but who knows? Next goes the round corners or different radios of corners. So you may, and you may change it simultaneously on, for all four sides of four section, four corners. You may select the costume or different radios for each side and have it different. Okay. Cool thing that is highlighted here. When you, when you focus on the input, it shows you for which corner this section is responsible for. And feel and border. You may select color. There are hacks, RGB and HSB color modals. You may use all of them. Once you selected the color that you would like to use all over your project, you may add it by pressing the plus button. For picking the color from the project. You may use the eyedropper icon, has zoom, and you may clone the color to your current object. This pro is responsible for the opacity of the object. And you may own type the precise capacity. In this field. The shadow option has several settings, very useful. Let's see, it has a color. So you may create the shadow for not only of a black or gray color, but you may create different colors, whatever you like. Here. You create, you select the colour. There is a hue and the capacity of the, of the shadow itself as the field section x, y, and b. B is actually four bluer. So six as usual, the default setting, but let's have 25. For instance, you see it's bluebird, it's very soft. X and y responsible for shifting the shadow according to access. Left, right, down and up. This wasn't available in Photoshop. As far as I remember right now, developers are very happy that we can use precise ratings for shadows. And they can copy that into CSS with no problem them into CSS easily. The background bluer option is used not very often, unfortunately, because it's not supported by all browsers. We show you how it looks like. See, there is a scroll bar for the amount, brightness, and capacity. So as I said, it's very fancy, but unfortunately not support it by some of popular browsers. Hopefully with some updates will get these fact in all browsers and marking for export, checking this checkbox led the XD. Note that this element should be exported to your project and can be downloaded as a PNG, as VG or wherever, depends on the format of the object you using. So it's a your exported the PNG, PNG image here. And developer can't download it. Just see the settings of these precise image, but he or she can't download the image until you mark the image for export. But again, we'll get to this later on on our class project maybe right now it's just. To know that for development team, you have to mark for export custom elements that you import into your project. For the text objects, it's almost the same. Except for phoned. Its size, style, letter spacing, line spacing, paragraph spacing, alignment to the right side, central lined and right align. This two things are new even for Photoshop users. It creates a paragraph or a single text element. So this the point text selected by default. So you see that we can change, we can resize the text and dragging this pin. Once we create a text area, have a box that can contain several lines, line to line three. And you may adjust the width and height if needed. With width, height, you will adjust the size of the box of the text area. It's necessary when you have the precise size of a text area. The adjustment of a text area is usually applied when you have columns that are equal and you have to preserve the same size for each of the text area. Another thing that we have for text is the uppercase, lowercase title k, superscript, subscript underline strikethrough. There's a superscript. Now, it's subscript says underlined and this strikethrough, nothing complex. And you may notice that our assets section is empty right now because we don't have any, let us create an asset. I will create a button. Let's see. Let's pick a color. We have a submit button. And I will add, I will create a competent from this button. And you'll see we have a component here. Bottom or the other thing is the colors here. It is peak some colors. And by pressing the right-click, who may add these colors to your assets? Here they go. See. Today will be here on time that you will work in this document. Until you delete them. See, let me delete them. You may edit highlights on the canvas, rename apply the field, but it will be available when you apply the multiple objects. Copy rename my name, are useful when you have a brand guide. So you may add these colors initially run right from the start. The next is the component. Yeah, let's get back to our component. So this is a parental component that we created. And let's ask copy it somewhere. See when I change the title in my parental component, it change this title in each of the child elements. But when we change the child element, such meat, no elements are affected. Okay. Let's imagine that we have two screens. This one, this one, and lots of them. And it's very time-consuming to change this button everywhere. I can change it here. Only. Say We decided to go with other color. See what happens. It changed its color everywhere due to this element is already adjusted. It won't be changed, won't be affected by changes of the parental engagement. 20. XD Lesson - Font Styles and Artboard Settings: Next it goes the character styles. Let's delete this to clean up these art board and heading. Now we have heading. We have our graph style, tagline and sub title. So let us create a bolt phoned for heading and make it uppercase. I like to use different color. Heading. Paragraph will code with T's and subtitle, but would like it to have italic. So we have a heading paragraph tag line and subtitle partner for 2p should be much smaller. Again, it's example. Not sure how it would look in the actual product, so no judgment. Here. Let's remove this. Now. Be careful with it, with the size of the font. I'm suggests you to stick to an equal numbers like 80 or 75. So you want mass with the with sizes in your document. First of all. Secondly, front-end developers love when you have everything accurate, but if the project requires to have 61, for instance, no worries. You may use it. And just tried to preserve the accuracy incising, the spacing and so on, who look more mathematically correct. So I finished this tiling of text in our imaginary project. And let's add these two. Were acids at character to style. That character style to acids. Here we go. Now we're heading same for detect line and four paragraph to seize the PI for shorter name. And yeah, so we have. Everything here, we may delete it or move somewhere. Let's copy some text to show how the assets work. I copy the text T futures, and it automatically applies d last phoned that used by dt. We have to create a beautiful thing, much beautiful than this one. And I select the heading, the tagline. And we have something like this. For mobile version, you probably may create another style and put it as well in the character styles. You may apply it later on. So you may add custom icon, legis feeder icons. You may use feeder icons.com for very nice. I can just drag it into your project. C Here we have I can, we can make a competent and edit to compounds as well. Okay. Again, once the parental element is changed and it main competent, you see the other one will change as well. If we select the cardboard pressing the name, see that there are some settings here. So it's a portrait and landscape orientation. It has a responsive resize, scrolling vertical nom. Viewport. What is c? One, the preview background. You may make it transparent. And Layout Create is we're better alignment. And again, for better and faster web development of the mockup. You may use default and make default. If you wish to. Is a square grid is useful. Graphical objects. Illustrations, probably posters, banners. But the other one. Layout crit, is more for web and mobile. Design. May just the gutter size data with the number of columns, the column width, and margins. So I think it's enough for introduction right now. You'd see you on our next x lesson and try to explore the features if you haven't done it yet. Thank you very much. See you in our next lesson. 21. Graphic Design Software Tools: Okay, so in this video, we're going to go over the different types of graphic design software that you're typically going to be using in the UX UI feel. The first one here is Photoshop. Now photoshop is typically going to be used mostly with images. We can do a lot of different editing would specific images. You can do a lot of customization. You can add indifferent elements. Now, one thing to keep in mind here is that when you're using Photoshop, it's typically going to be photo-based and you're using pixels, right? And so what that means is that let's say that you were to zoom into an image, right? And you were to zoom in 1000%. You're going to be seeing individual pixels that are making up the image. And you can, oftentimes lose quality and clarity of that image depending on the size and the pixelation of that image. So for example, let's say we have this image here, right? And we were to zoom in on here. You could eventually see the different pixels within this image here, right? You see the different colors, but you'd see the pixels if we were to go deep enough. And so when you think about Photoshop, it's mostly going to be used for designing an editing autos or raster base R. Okay? And then when we're looking at the other tool here, as far as the Adobe Illustrator, This is going to be a different tool that is working off a vectors, okay? And what illustrator, what you're using a specific points. Okay? And that's something to keep in mind here because if we were to take a particular vector and be able to zoom in 10 thousand or a 100% thousand. We would never lose any of that quality because it's just points that are connecting to each other, right? And so if we look at a particular vector image over here, let me bring that over here. If we were to zoom in a 100% thousand or whatever rank, we're never going to lose the quality. So that's one of the biggest difference there as far as for Photoshop. Obviously, it has the name photo right in there. As far as Photoshop and Adobe Illustrator, this is a tool that you're using to create a lot more of the illustrations, the graphics, the design, the different graphic design that different graphics and often using vectors. Okay, so these are the two main tools that you're going to be using for graphic design. Adobe XD is what we're also going to be using within this course. But that's going to be more for user interface and user design. Okay, so just wanted to give you a quick overview here of Adobe Illustrator and Adobe Photoshop, and we'll see you on the next one. 22. Adobe XD lesson 4 - Icons & Vector Graphics: Hi there and welcome back to our XD practice lessons. Today, we're going to review the vector graphics and how to work and manage and edit the icons for our perspective app, let's start with the pen tool. And to see how the shape could be created within this tool, you see I just created a random shape. And you see there are some points here. These points, our work according to busier formula, which is very common among vector graphics. And by double-click you may, you may turn off the angle and you see that you have a controls over these angle. So double-click enables or disables the curved lines. Next, you see that there are some settings for the line. We also may turn off the fill, so we have a bold object. Right now let's focus just on the outline. So first off, to create icons for your project is very useful to have your concrete turn on. Let's create. And to show the square grid, you need to select the art board by pressing the, the title of the our board. Check the checkbox with greed and select square. And usually 40 pixels is enough or an icon. And now we're able to drill consistent size for our icons. Ok, so in terms of our application, we may have some icons for categories of the meditations we have within the app. Let's see, we have sleep meditation, tress, real live, progress and home. Okay, let's rearrange it a bit. Home, sleep, stress relief and excites our progress. And home will represent set of meditations that will be offered by default for user. Now when we define the icons we need when we start drawing, I can or could be created in various ways. You may use a combination of geometrical shapes that are already existing toolbar, let's say triangle. You may also have. You may also use brick tangle if you need to end. The last is the shape or pen tool. We can use this one for more customization of our shape. Let's go. So let's start with the simplest icon, which is Home icon. And you probably guessed. Can be a fusion of two icons. Just need to be very carefully align here. Okay? We have a shape of a house. Now, we need to create a boat. I don't want them to be filled. Let's make angles a little bit rounded to here. And now it's time to connect this to shape with this botton. So we have a sort of omicron. Let's add a door. It won't be more alike. House. We don't need the bottom to be surrounded by double-click. You have the access to the separate elements. You may modify your icon wherever you like. And let's group this symbol e to one element. And let's make the sides of the border two pixels. I want to cut out a piece of our door element, as it seems that it doesn't look well. So to cut one object from another, you may use Subtract function. So I've deleted the bottom part. Now it seems like our icon looks like our home. Let's try to change the radius. Looks like a home. So now I can change the color of the icon, has a whole element because it's grouped and I can access the separator element inside this icon by double-click ended, can modify it if needed. Okay, that's more or less simple icon. Let's try to create something custom. And next, we have slipped meditation. I think the symbol of moon is quite appropriate here. Again, we need to follow the same styling and this icon as well as so they are all consistent means that we have to increase our worship sides of the border, change the color and disable the Phil. I think we can exclude and have the, But you see, if we compare these two icons, This one is more sharp and doesn't fit well with the first icon. So we need to change this corner. Like I said in all previous icon, we can access the other element by double-click and we need to modify it a bit manually. So our moon will be rounded as the, as our home is. So to create a new point, you need to press one-click. If your icon set requires to be rounded, to have rounded corners, that you have to do your best to create icons that look consistent. Otherwise he won't low professional on your interface. Please avoid when this control goes in the other direction. The best way to create a smooth corners is to have a straight line here. I will just realize that we can do it do it other way round without using any additional additional shapes. I think this is pretty much close to what we're aiming for. Maybe I need to add some supporting points. Okay? Yeah, here we go. We have two icons from this same set. Its next is stress relief and exciting. Well, of course, to create an icon, you need to have an idea of what it should look like. The other thing is to create the icon itself. I think it's some sort of flash or would be appropriate for stress relief. Again, have to use the same styling for each of our icon. Some of your icons could be taller or wider than the others in your set, because it depends on the shape and object you are trying to illustrate. If you want to have rounded corners, you may add the manually, although anxieties, aggressive thing still need to have a beautiful icon. I want to live it a bit rotated Qing society. Then we have a progress. What could communicate a progress? Well, we can create a flag. So to create a flag icon, we need to create a rectangle at the corner radius prior to our manipulation. Because when you start to customize the shape, it won't have the rounded corner futures anymore once you've created at least 1 from your own, okay? And I will use a simple line tool which is accessible by pressing L as a show key. So now we have four icons for our app, which are home, sleep, anxiety, and progress. Perhaps it's not the best way to categorize the app in that way. But this lesson is just to show how you may create your own custom icons if needed, in case if you want to save some time and you don't feel confident in terms of drawing icons, you may visit websites like Peter icons.com, fled ICANN.com. I can find r.com and grab icons from these websites. Their professional there are feeder icon is free, the other recovery and premium icons within, so you may choose it according to your preferences. You may choose who one of the several styles which are available for icons, there are more, but I will list the main three. So this one is outline exactly as we designed for our app. This one is with a solid background. So the same shape but with the background. And this one is flat multicolor icon. She has more details in it looks richer than the previous two tokens. Okay? Most designers that going with the outline because it's trendy, it's flexible, it's easy to re-create other element and icons collections I can sets, they are richer in terms of outline or bold icons rather than full colored, more or less realistic, I can style. So we are back to our app icons and let's put icons on their places. Remember we have the f2 t, We have 40 pixels square area for our icons. It's, it's called container. So I can may be smaller, but the container has 40 pixels. I think we may remove the door here. Has, doesn't feel like the same style. Now we're aligning our icons to a horizontal line. That's good that we have for column greet helps us to align our icons properly to the general layout. Once I'm on the home screen, we may highlight this somehow. This one option. The other option is to make it talker. Please don't forget to create different conditions for your icons as this may be a problem while the development and showcasing to stakeholders. Here we may add sort of tab mind, very common these days. To now I'm home screen or no, it's better to have it on the bottom. You might do it like this. You decrease the, decrease the capacity for these icons if you feel that it is appropriate to your user experience when we decrease the capacity for this icon because it's not quite likeable. That would go with the previous version where this button is already pressed. I think that should have more contrast. So, so now this is how a Moroccans Luke on bottom bar. You now know how to create icons in the outline manner. And the last thing I would like to point out is that you need to mark icons for export. Each time you do Custom Icon, please mark it for expert. Because your developers won't be able to download the SVG file and implement it in the HTML. Okay, so thank you very much for your attention. I hope that lesson was useful. Maybe you have other ideas on how to represent these sections. Please go on and try it yourself. Thank you very much and see you next time. 23. UX Design Section Overview: In this video, we're going to go over the UX design section overview. So this is the biggest section in this entire course. This is going to cover a lot of different areas, such as user experience, such as the UX design process, that different user profiles and really showing you what exactly UX design is about. This particular lesson here is going to give you a big picture overview of what's to come in this particular section. There's a lot to cover here, and I'm excited for you to get started. So let's go ahead and jump into the section overview. So what we're going to cover first is what exactly UX design? What does it mean? How does it work in the actual UX design process? And then the analysis process, which is very important for you to understand as well as a UX Designer. And then we're going to go into a user profiles, user pain points, developing a persona, an avatar. This is essentially where it's going to allow us to really understand who the end user is so we can craft the right type of product that's going to be able to get them to actually want to purchase because we're making it specifically for them, right? And then we're going to be going over the customer journey and then the customer journey versus a sales funnel. Very important for you to know a UX designer, especially when you're trying to come on to an organization and be able to be extremely valuable if you have additional skill sets and knowledge, such as understanding sale psychology, behavioral psychology, sales funnels, persuasion factors, right? You're going to be a lot more valuable to that particular organization. And we're going to be going over the three phases of a sales funnel, the four stages of a sales funnel, and then macro and micro conversions. We're going to go over to different funnels in this particular lesson. And we're going to go over a lead generation funnel and then a digital product sales funnel as well. And then one of the biggest things that you're going to want to understand is the market sophistication. And we're going to go into this in a lot more detail in the lessons. However, market sophistication is really giving you an understanding of where the user is in the actual journey, right, along the way it's actually purchased a product, whether or not they are aware of a problem of a pain point that they may have and where exactly they are in the Holbein process. So the next thing that we're going to be covering is the seven principles of influence. We're going to be going over user flow. We're going to be going over storyboards, mood boards, the low and the high fidelity wireframes, and then developing prototypes. Then we have the testing and evaluating and then the UX deliverables. So this is, like I said, a very large section here. It's a lot of information, but it's going to make you a well-rounded UX designer because oftentimes when you step into an organization, they're typically going to have one person handling one area. But if you're going into, let's say, a small to medium size business, or perhaps even like a startup, you knowing all the different factors here as far as a sales funnel, the difference between the customer journey versus a sales funnel and the different types of sales funnel. And especially with the influence and persuasion, once you're able to have these additional skills added to your repertoire, so to speak, right? And you're going to be an extremely valuable asset to any organization, right? Because most people that are UX UI designers typically are well-versed in one area. But if you have a lot of different skills within the marketing spectrum, then you're going to be extremely valuable. So that's gonna be here for this one, and we'll see you on the next one. 24. What is User Experience Design? (UX): And welcome everyone. You're on user experience design section. And in this video, I will explain the main concepts and methodologies of UX. Please try to see the whole picture, but not the deliverables and activities in a separate way. This is all part of one. You only think I would like to point out before I continue them as that I will explain many, many types of things that are that could be included in the UX process. However, your project may not require or you can't do these activity, this deliverable, this type of research because of timeframe, where because of a tight budget. According to Don Norman, there are four main principles that you have to follow doing user-centered design. Okay? So the first one is understand and address the core problems when you doing the, the product design that you have to try to understand what pains, What frustrations people experience with a similar types of product. And also try to solve them, but not on low level but on the higher, on a general level. Like I would like to add multiple products in my shopping cart in some online store k, And I would like to do it, but the system hasn't disability at the moment. So you offer are you introduce multiple orders, multiple products in your cart system on the father's steps can't handle the multiple orders and means that you reduce the solution on one level, but you haven't thought about what will be the next stage, how these two things will interact, how they will connect and synchronize. So this requires, of course, close work with the Developer or development team. I depends on the project. Tried to see the whole picture, not just one thing, because probably when you solve this one thing, you will change one thing at one place. This will have an impact on a father, father modules and Father experience of your user. Solve the fundamental underlying issues, not the symptoms. Ask why it each issue, when the answer is human error, keep going by the error, cure what could have prevented it. And the next core principle, according to Don Norman, is B people Sander. Well, this means that you have to design your product or system, starting with the needs and abilities of a user that will use your product. It's simple because much of today's system procedures and devices are technology sander. They designed around the capabilities of the technology, with people being asked to fill in the parts that technology cannot do. People centered means changing days, starting with the needs and abilities of people. So it means that if you have some requirements already that are technical and you're trying to build the user experience over the technical requirements of your system. That won't be user centered design. Okay? This user-centered design places the user in the absolute center of your product. And system requirements and functionality grows around this core center. Okay, we'll try to give another example. Let's take a car, for instance. It has to have four wheels, and this is a requirement for most of vehicles. But still, when you want to be when you want the vehicle to take less place, that you want to the vehicle to pass through the, you know, road traffic. You probably will design the motorcycle or scooter. Okay. So ms. That yeah, I would like to move around the city, but I would like also to to spend less petrol, to spend less time in traffic. I don't want to have a passenger seats. I am travelling alone. And that's why you probably come up with the motorcycle. And this is a broad example, but it really demonstrates the user centered, I mean, people centred approach, okay, use an activity centered system approach. This is quite interesting thing because once I've started my UX career, I didn't consider this one many times. But now I will try to explain you in simple words so you can apply this in your work and your UX career. So design must focus upon the entire activity under consideration, not just isolated components. For instance, let's say we are on online store, website and we try to find some devices, okay. And we add it to card. A smart phone for instance, we added and would like to add one more. This website doesn't have this feature. I can put in the cart only one. So u, being UX designer, will introduce a multiple order. The card will be able to handle multiple products within. Next, when a person tries to confirm the order, it appears that the system doesn't have this feature. You didn't planet. So you left without consideration. Father, steps that are affected by your solution. K that you changed one thing in one component. You haven't considered the other one that goes further, you have to try to see the whole picture when you're doing your user, user experience design. Use rapid iterations of prototyping and testing. Again, here's the interesting part of principles of Don Norman. Because I love prototyping and I do it with a pleasure with the love. And when I receive feedback from team user, I really love to introduce, to solve the issue, to change my prototype according to feed back, according to suggestions. Whether it's a stakeholder or the end-user, it's hard to design a perfect solution from the first trial. I strongly believe that and I encourage you to trust me. There is nothing wrong with the for-free iterations of prototypes. With each iteration, the prototype becomes more refined. In usable. Indiana days, you will get so much satisfaction when your users will love your prototype. And we'll dont have any comments. They will love. Your product. Tail will congratulate you for, you know, for doing these very smart, very comfortable experience for them because you solve their problems, resolve their issues, you consider their frustrations, values, and so on and so forth. In other words, everything that is made with user-centered design is made for users. We consider their age, social status, habits, workplaces in schools, problems believes paints a level of income, and so on. Here, user is placed in the absolute center of service or product that you're designing. That is why it's called user centered design. And I have the quote from Don Norman, which reads, user-centered design means working with your users all throughout the project. Thank you very much and see you next time. 25. UX Design Process: Okay, and let's talk about the process of UX design in this video. Usually I divide it into discovery, prototyping, testing, and improving. It's the same thing as a general approach to a project management. So one cycle of these four stages is one around or one iteration. Deliverables are audit reports, persona, storyboards, user customer journey maps, user flows, mood boards, information architecture, sitemaps, wireframes, interactive prototypes and test reports. Don't worry if you don't understand some of them, we will get back to the description and exploring the each deliverable in greater detail. Now let's focus on four stages, and let's explore the discovery stage more in depth. Well, being the first stage in your UX design, it requires the most deliverables and the most work, and it's the most complex and hard work. Comparing to other stages, you will have analysis of a current product competitive analysis, user profiles and persona, user needs and pain points, storyboards, user customer journey, map, user flows, mood boards, wireframes all within one, stage k. But again, I want to reiterate that your project may not require Some of them doesn't have to be so expanded. This is the perfect model at the best-case scenario in my discovery, I use double diamond design model. When we have research, analyze, and synthesize, we expand possibilities, we expand our findings. And we have lots of information on hands than we group it, sorted, filter that and we select what it's necessary, select what it's not, select where it is important, that is less important that could be implemented at the moment and that can't be implemented. Then we shrink our findings. We are defining them, and then come to a next diamond in which we develop and deliver. And develop and deliver means that you prototype, test, and refine then, and only then we got the outcome. So there are two things to remember. You'll have lots of information, lots of variations, lots of examples on your hands, but you have to be careful with all of them. You can't introduce all of them in one place. You have to group it sorted using the most user-friendly way. Okay? Trying to understand the similarity between the things that you find and then you convert them to prototype, which also can have lots of revisions, then goes test, and only then you may refine the design and have outcome. 26. Customer Journey vs Sales Funnel: In this video, we're going to go over the differences between a customer journey and a sales funnel. So I'm excited for this one. Let's go ahead and jump right in here. We went over the customer journey in another video previously, however, I want to give you a quick overview again of what this is really about. This is really about having a detailed outline. Every single step along the way that a lead takes, a potential customer or client takes as far as then becoming a paying customer. And they can come in at any stage here. It can come in maybe by listening to some sort of radio ad or maybe reading an online blogger, maybe some kind of website that has a banner ad on it with our promotion, maybe an advertisement on Facebook or LinkedIn, Google, whatever that may be, right? This is the ultimate process that a customer goes through to become an actual pain customer. The difference here with an actual sales funnel is that the sales funnel is a model that is used to actually market appropriately to these individual leads at different stages of the buying cycle. And so if you look at this image over here to the right, you see at the very top of the funnel theres prospects, contacts, leads, finalists, and then sales. And so that's really the biggest difference here, is that a sales funnel can be used as a tool within each particular stage, right? Let's say somebody comes in through the website and they fill out the form there, right? To actually learn more about the business, about the product. So then after that, they're going to get put into a sales funnel that's going to have several different steps that allows him to submit their information. Maybe download some sort of PDF for free information, or even maybe buy something at a low cost so they can get familiar with the brand. And so you can really think about the customer journey as a 50 thousand foot view. That is a real detailed outline of every step that I lead takes to actually become that customer. A sales funnel works within the actual customer journey because a sales funnel get, have a lot of different moving pieces. For example, let's say somebody comes in and the download. And we're gonna go into this in the additional lectures in this particular section. But let's say somebody were to come in through the website and they submit their information, then they get put into a separate bucket, and they get put into a different sales funnel that let's say shoots them off email messages once a week or twice a week. And then if they respond to one of the emails and they download a PDF for free cheat sheet or new book, whatever that may be, then they're going into the next stage. Perhaps, maybe the next stage is to get them to buy something low cost. And then after they buy something at a low cost, then they're moving to the next stage of the funnel, which is getting them to buy something at a higher cost. So you're getting the picture here that the sales funnel is typically going to have a lot of different moving pieces, a lot of different stages. And it's going to have different upsells down cells, different times. That is giving information away free to the user. But it's always going to be within the actual customer journey. In the next lectures, we're going to go over different types of sales funnels. And we're going to go over the different phases of sales funnels. And so that's going to be here for the differences between customer journey and the sales funnel. And we'll see you on the next one. 27. 3 Phases of a Sales Funnel: In this video, we're going to cover the three phases of a sales funnel. So this is something that you are going to want to become aware of as you're working in the marketing space, at digital marketing space, especially if you're just starting out your UX career, you're going to want to join typically, if you're looking for a job, a smaller organizations, so you can get some experience. And typically these individuals are going to want you to have a different skillset in different areas. And so when you can really know a lot about marketing, and by UX UI, you're going to be a lot more valuable to these organizations. So let's go ahead and jump into the three phases. A funnel. So the three different salesman or phases can be broken down into tough MAF and Bob, I know it sounds kinda weird, but it's just what is used to represent these different phases within a sales model. So the top of the funnel is all about education. It's providing the user with relevant, meaningful information about a product or service. Or maybe just even in branding. Just think about if you are seeing a Facebook ad and all the Facebook ad says is, hey, we do X, Y, and Z or, you know, we're about x and y. It doesn't really sell you anything. It's just giving you that brand awareness so that you're able to know that they exist, right? And that's typically what you see at the top of the funnel and very light promotions. Okay. And then we have the middle of the funnel and this is the consideration phase. Now understand that conversions can happen at anytime throughout the funnel. However, this is where you start targeting the traffic that's already warm and it's already been interested. So for example, on Facebook, what you can do is retargeted those people who have already engaged and senior brand previously. The top of the funnel, right? A lot of the ads is very light, very nonchalant, very non salesy. Just giving you some branding and letting you know, hey, my brand, my product is here. This is what we do. And if people interact and engage with that particular ad, then you can put those into a separate bucket now and move those into the middle of the funnel. Because you already know that there's some interests there. Maybe they watched a video, maybe they watched a video, you know, 30 seconds through. And that's giving you a good indication that there's interest there. So you want to put those into a separate bucket, move those to the middle of the funnel. And this is where you start seeing some conversions because it's people that have already seen your brand. And then at the bottom of the funnel. And this is where you retargeting highly interested audiences who did not convert to become leads or customers earlier in the middle of the funnel. So you can see here, the audience is moving down further. And to each stage, the middle of the funnel is people who have seen you at the top and then the bottom of the funnel are people that are highly targeted because they've seen you at the top, the senior branding, the senior ads that are very much so, you know, not trying to sell a product or service, but more of branding. And then they've seen perhaps your light call to action. At the middle of the funnel. And for whatever reason, if they're even buyer fitting convert, then you move them into another bucket, which is the bottom of the funnel. And this is where you're going to find a lot of convergence. Because oftentimes, especially if a product or brand, is brand new, people need to see the product Medici the brand multiple times to become comfortable, to have that trust in their right. And so that's why a lot of the conversions will happen at the bottom of the funnel because they've seen the brand multiple times and they've actually interacted with the brand and with the ads. And so now they see that particular product or brand as trustworthy, and then they'll pull the trigger. Okay, so let's look at some of the different things that you would be offering at each stage of the funnel. So at the top of the funnel here we have, let's say a chichi, some kind of educational content, a pain problem awareness, opportunity loss awareness, or just any type of awareness like hey, we help dogs do X or we have a meditation app, we exist, right? Something super simple. You can also provide a great downloadable ebook that allows him to solve a particular problem, particular pain point. Very much so on the non salesy side of things, okay. And then the middle funnel here, this is where you're able to have some sort of value proposition, maybe some kind of buyers guide, get them to see some case studies, some testimonials, some metrics as to why your product, you don't make sense for that particular marketplace, why it would be in their best interest by, and so this is where you start seeing some conversions, right? And then at the bottom of the funnel, this is where you're also going to see a lot more reviews, testimonials. You're going to see a lot of the pricing that's maybe laid out their demos. And really where you're going to see the people that are ready to purchase, right? And so notice how at each stage that we'd go down in the absolute funnel here, it gets a lot more clear as far as what we're looking to do and the offer gets a lot more specific right? At the very top were just educating IK, we're here, we're in the marketplace. Hey, we want to solve your problem by giving you a free ebook or maybe a link to a blog post on the website medulla funnel. Hey, we have this guide here that can help you accomplish XY and Z. Hey, look at some of our previous case studies that we've been able to accomplish. And then finally, you really want to, at the very bottom of the funnel, hammering on the social proof that reviews testimonials, leveraging what other people had experienced, providing the actual pricing, any kinda demos and where you'll find that people are mostly going to be ready to pull the trigger. Okay? So this is the three funnel stages and you should become aware of this is at a very high level, because at each particular level here, you can have a sales funnel within that particular phase. So for example, medulla funnel may consist of several different funnels in that stage. Same thing at the bottom of the funnel. Let's say that the, you know, click on the ad and they are interested in buying, right? It may take them to a certain funnel depending on their previous actions, right? And so it all depends upon the information in the data that's collected. Facebook is one of the best platforms to be able to use advertising to collect data and be able to look at what the user's doing, how they're interacting with that adds to the elect a messaging. Do they like what they're seeing, right? And then being able to take them into different directions based on their previous action. So it's going to be here for the three sales funnel phases. And we'll see you on the next one. 28. 4 Stages of a Sales Funnel: In this video, we're going to go over the four sales funnel stages. Now, this is going to be the most common type of sales funnel that you see as far as the different stages. And also understand that this is going to be a framework that you can use when you're writing copy, if you ever get the task of writing copy because let's say you take on a job at a start-up and they need you to wear different hats. You being able to understand the four sales funnel stages and then the copywriting framework that goes in conjunction with this will be extremely valuable for you and then organizations. So let's go ahead and jump in here. So the four sales funnel stages is number one, the awareness stage. Number two is the interest. This is where you're giving them the reason to hold their attention because at the very first stage you want to do is create that awareness, right? Letting people know, hey, we exist, I exist, you know, we are here in the marketplace with the interests you're giving them a reason to hold their attention to. Maybe let's say stop what they're doing. Typically like on a smartphone, you want them to stop scrolling on Facebook, Instagram, or whatever platform that may be and you want to get their attention. And then the next stage is the decision that desire. So a prospect, exactly how the particular offering in solve a particular problem, right? And ultimately the audience should be able to see how you are offering can make their lives better. And then the final stage is the action when she'd been able to create the brand awareness, so the interests, and then actually create the desire. The next step is to persuade the prospect that they should take the immediate action now, right? And actually purchased a product or move on to the next stage of the funnel. And so let's go ahead and dissect this a little bit deeper. So the awareness stage. So this is where the user becomes aware of a product or a brand through advertising such as social media or word of mouth or any kind of referral, right? It's that awareness that is created. Number two, the interest age. This is where the consumer becomes interested and engaged by learning about your existing solution, product or service. Like, let's say they see, for example, an ad that says, did you know that you can do or did you, are you aware of that? You can accomplish XY and Z by only doing y, right? Something like that where you're really engaging their interests. You're getting them to stop and you're getting their eyeballs right? And then the next stage here with decision, this is where you really show the prospects exactly how you can solve their problem. And you're getting them to make a decision to commit and take the action, right? This is where we want them to take immediate action. And we want to make sure that it's spelled out. Oftentimes, a lot of advertisements fall short because they don't tell people what to do. There's a reason why a lot of the buttons. For making a purchase, say by now or add to cart. Because you need to be providing some sort of experience, right? Where you're driving people through the sales funnel here and you're taking them through each step and you're making it super simple and easy for them to buy the products with little friction. Because one of the key things that you have to understand about psychology, social psychology, marketing, behavioural psychology is that we make buying decisions based on emotion and we justify them logically, okay? So whenever we see something and we want to purchase it, It's typically going to be the emotion that makes us want to buy it or is wanting to get us the Byatt's, right? And then we would justify that purchase after logically, right, as to why we did it, but it's the emotion that is really creating that purchasing power. So now let's take a look at an example add here, where we're using this framework to actually write the copy and the ad itself. Okay? So we see here with this particular offer here on Facebook, we have the Ada framework and we are essentially promoting a $1000 dental implant offer here. And as you can see here, we have at the first stage, attention. Grab the audience attention by addressing a pain point, challenge or call out a specific audience itself, right? Where the very top is his attention can and de web. That's where you're calling out the specific audience, right? So that they can know that you're talking to them. And then the interest. This is where you're describing the benefits of the offer, right? We're saying, Hey, there's an in-plant for just 999, that is the actual benefit. You're getting something for a deep discount. And then the next stage, a desire or decision. You want to provide a reason for them to take action now. And for that, we have for a limited time, we're offering ten first-time visitors. So we're showing that it's a limited right. And so that's a reason for them to make a decision now. And then we have the action. So this is telling them, hey, click here, download now or book now, right? Whatever that may be. It's always gotta be something where you're telling them exactly what to do so that there's little to no friction along this entire ad here. Because remember, it's all about the emotions, getting people excited, getting people to just take action based off their emotions, without having them to really use the brainpower to really think everything through logically, right? Because then those are questioning their decision to start him in and Han and wondering whether or not they should actually pursue it. And they get, you know, the paradox of choice versus just saying, hey, this is what I want you to do. This is why you should do is press your click here to go to the next step, right? So that's going to be here for the four funnel stages. And we'll see you on the next one. 29. Macro/Micro Conversions: In this video, we're going to go over macro and micro conversion. This is something that you're typically going to see on the online e-commerce space where you have like an e-commerce store that has some kind of product that they're selling. And when users are interacting with that particular website, that e-commerce store, there's several different macro and micro conversions that are happening all through that whole buying process that that user goes through to actually go on the website and actually buy a product. So we're going to walk through with the macro and micro conversions are in this particular lesson. So let's go ahead and jump in here. Okay, so let's look at the macro and micro conversions. The macro conversions are the actions that a user can take that represent the primary objective of a website. And so just think about it. A website that has any kind of product for sale. The ultimate goal is to get that user to buy the product. And so that's the ultimate macro conversion. And along that process, there's different micro conversions that come in there along the way. So the micro conversions are actions that a user takes that are critical on the path towards reaching a macro conversion. Like what are the steps that an individual is taking user to actually complete the buying process and actually make a purchase. And like we just discussed with an e-commerce website, this is going to be where, let's say somebody's on an e-commerce website, they are going to different pages that say, for example, somebody heads on over to the product page. You can see here on the first image there on the product page. And as you can see there at the very bottom of that page, there's the quantity, there's a price, there's a number of boxes, and then the have the ability there to Add to Cart. So when they press that button there, add to cart, that is a micro conversion. It's leading them to the next step of the process. And as you can see here on the second page, you can see at the very top one in their cart. So they've added a product to the cart. And then the final one there at the very bottom, That's where they're at, the checkout page. And you're going to see this in a lot of different areas, however, where it's mostly seen where you really see the actual different buckets of audiences that are created from each one of these different interactions is within Facebook. Because what you can do is you set up a tracking pixel with the Facebook platform. And then you'll be able to put in a code on each individual page that lets you know how many people have added the product to cart, how many people have added it to a wishlist? How many people have actually gone to the checkout page. And then you'll be able to show those individuals the specific type of ads. Lets him know, hey, I noticed that you added XYZ products, carts, but you didn't finish. Here's an additional 10% off to complete your purchase. This is very powerful here because it allows you to create these different buckets of audiences and see where people are falling off in the sales funnel, where they're falling off and making the purchase. If you're seeing a lot of people that are adding to cart but not completing, then that means that there's something there that needs to be fixed as far as helping them through that whole process of actually completing the purchase, right? Because you want to make this as easy, as smooth and frictionless for the user to actually go through the whole process of buying the product. But it's still great that you can retargeted people that have had those micro conversions and have just landed on the checkout page and that incomplete the older those that have added the product to car. And there's a lot of different things that you can actually create as far as the micro conversion criteria that you can add to this as well. But this is going to be quite common here for an e-commerce store, somebody lands on the product page. That's going to be one bucket of audience. Somebody adds a product to cart another bucket of audience there. And then those that are on the checkout page and for whatever reason, distracted that in putting their credit card information, that's going to be the hottest actual audience there because you get to re-target them, letting them know that they didn't finish their purchase. And you can incentivize them by giving them a certain promotion, you know, 10% discount. So ultimately, understand that the macro conversion is the purchase, right? We want to get the actual will purchase completed. That is an actual macro conversion. And then the micro convergence are the steps that are taken to actually complete that macro conversion. So that's going to be here for macro and micro conversions. And we'll see you on the next one. 30. Stages of Market Sophistication: In this video, we're going to go over the stages of market sophistication. It's really important for you as a UX UI designer to understand where the different users are in the actual buying process. We talked about the customer journey, we talked about the sales funnels and with the stages of market sophistication, This is what's going to help you understand how to write the right type of copy if that's something that you're also going to be handling. But it's also good for you to get an understanding of this so that you know where the individuals are as far as the users, as far as awareness of that particular product, you want to have an understanding of where the user is mentally. Have they seen different products as far as them seeing other products in the marketplace that are similar, that have similar characteristics, that have similar different features and functionality. So it's important for you to understand the different stages of market sophistication and what market sophistication ultimately mean. So let's go ahead and jump right in here. So market sophistication is a term used to describe the level of awareness of the marketplace, okay? Whatever marketplace that you're getting into, let's say that you are looking to design an app or you're working with the company that is designing an app for meditation. You want to be able to understand how many different meditation apps are out there. What are they doing? How much are their marketing? Are they presenting as far as their messaging ranked? So we're going to get into the different stages here in a moment, but I want to give you really that big picture overview of what market sophistication is about. And this was a term that was first coined by a copywriting heavyweight, One of the best to ever live and do it using Schwartz in his groundbreaking book, breakthrough advertising, which I recommend that you check out if you want to also get an understanding of copyrighting principles. And then the key question to ask here is, how many similar products or services has your market been told about before? I mentioned the meditation app. So you want to look at how many other meditation apps are out there. What is their messaging? How are they being presented? What's the marketplace saturation? Is there a lot of products kinda doing and saying the same thing? How are the differentiating themselves? So that's what you really want to know as far as the market sophistication. And then, now let's go ahead and jump into the different stages. So there's five different stages of market sophistication. The very first stage is where the market is completely unaware. They have no knowledge of a particular product, right? Let's say, as far as for meditation apps, I don't know which one was the first one to come out. However, when that first meditation came out, this was something that was fairly easy to sell because it was brand new and the marketplace will just completely unaware that these types of things existed. So it was fairly easy to sell that to the marketplace. And then number two, as far as the stages of market sophistication, This is where prospect senses that they have a problem, but they don't know that there's a solution, right? So they want maybe some kind of guided meditation service out there that is able to get them into a deep meditation state. Rain. And there isn't anything out there in the marketplace. That is until I believe headspace came in and they really dominated the market as far as the guided meditation. So number two, this is where they know they have a problem, but they don't really know that there's a solution out there. And then number three, this is where their solution aware. So the prospect knows exactly what they want. However, they don't know that, you know, your product is able to provide that for them so they know exactly what they're looking for. They just don't know about XYZ meditation app. And then there's stage number four. This is where the user knows that there's a product out there, but they don't know if your product the right one for them. And so there needs to be some differentiation there. There needs to be some convincing, some persuading as to what your product does different than the rest of the competition. And so it's easy to sell, right? Hey, we have a meditation app, stage two. They understand that they have this problem. And so you can get away with just stating, hey, this is the problem that you have and this is how we can solve it. Number three, you really need to be able to differentiate yourself and provide a unique solution. And then number four, this is where you need to really differentiate your product and let people know that, hey, listen, I exist. This is why we're better. This is how we do things different. This is why our app is better than the rest of the competition, right? So you notice that at each stage, the buyer becomes more sophisticated. They become more understanding and knowing of the different options they have in the marketplace, right? And then states five, This is where they're most aware, the user, the prospect, they don't need to be sold on all these different crazy unique things like, hey, my app does this by app does that. They just want to know the ultimate deal. They just want to know, hey, what's the bottom line here, right? So as you go down the different stages, the actual buyer, the user, gets more sophisticated. So the messaging has to change and you have to look at what is the competition currently out there saying and doing, and it's getting them to users. And so then you'll be able to see what stage of the market as far as market sophistication that, that user base is at, at the beginning stages, stages 12, you can get away with just saying, hey, we have a new meditation app. Hair meditation app helps you meditate better. Something that is very simple because it's going to be new in the marketplace. Number three, when you realize that the market has been sophisticated enough to the point where you have to come with a solution that is unique, that is different. This is at the stage that requires a unique mechanism. You need to let people know this is why this app is unique and different. This is the unique way that it works. This is a unique way that it actually functions and why it's different from the competition. So this is going to be here for the market sophistication. I definitely recommend that you do a little bit more research on this if you want to find out more and really understand that market sophistication is going to play a vital role when you're creating your designs. Because you want to understand what level of sophistication that marketplace is. Ads, right? So that's gonna be here for this one, and we'll see you on the next one. 31. Lead Generation Funnel: In this video, we're going to go over the Lead Generation funnel. This is a funnel that is very commonly used in the digital marketing space to generate leads and really any kind of business setting when you are a business that is doing lead generation online, that is doing advertising online, you're typically going to have a lead generation funnel at any given stage of your customer journey because you want to be able to generate leads at a very low cost and then be able to nurture those leads and get them through to actually becoming a paying customer, right? Because oftentimes you can generate a lead just by being able to give something away for free and then lead them down that experience. The next steps in the funnel and be able to get them to actually become a pain customer at a low amount. Let's say something like a trip wire on that is something is very, very small and then be able to get them to eventually by something that is going to be at a higher price, a little bit more high ticket. So let's go ahead and jump into the Lead Generation funnel. And so at a very high level, the Lead Generation funnel is essentially a systematic approach to generating leads for a specific product or service. The whole intent here is to funnel the target audience through several different stages until they decide to input their information. This is where we're going to have the Ada formula here, the framework of awareness, interests, decision, and action. We want to be able to get people in at the very top of the funnel to get them to become aware, to get them to become interested, make a decision, and take an action. And typically the lead generation funnel has three different steps. You have an advertisement, let's say on Facebook or Google, and it has some kind of offer or maybe some kinda cheat, cheat or ebook, or some sort of free resource that is valuable to that individual user, right? And then they go in there to the actual landing page and they submit their information. And then there's a thank you page that lets them know, hey, your information is being sent to you via email or you can download a here. And then very important here that thank you page has the next steps. What are the next steps for them to do? You can invite them, let's say to your website to read some blog posts to maybe like you on Facebook or whatever that may be. The thank you page really allows you to get them to take the next step in your process. You obviously should automatically had them set up in a different funnel after they land on the thank you page because that should trigger another automation that lets you know, Hey, this person has already downloaded this offer here. They are warm prospect and so they go into the next stage. And so let's pick down these three funnel steps a bit further. So the first step here is going to be an ad, right? This is where they're going to see a Facebook ad, maybe a Google ad or whatever platform that you're using. You want to give some sort of advertisement that is letting them know what the offer is about, maybe letting them know, hey, you can download this. All you gotta do is put in your information or just something super simple, right? Also you can have like a discount offer at low rates, maybe, maybe 75% off whatever, then they'd be right, this is where it's the first of contact and you want them to become aware that you have something for them to receive, right? And it needs to be very high perceived value. If there's no perceived value there, then it's going to be difficult for you to get those users to input their information because that is what you're ultimately after their name, their email address in any other contact information. And then the second part of the regeneration funnel is the landing page and this is where you qualify the prospect. You tell them exactly what they're going to get. It explains the offer. It lets them know that, hey, you're going to get x, y, and z. All you need to do is put in your name and email or whatever other information there. And they will be able to download it and get it right there. And then and then the final stage here is the thank you page. This is where like I mentioned, you're telling them what the next steps are. In a lot of times this is used in brick and mortar businesses where dentist chiropractor, just to give you some examples here. But this can be used in any type of industry. But a lot of times this is used like I said, and the brick and mortar space where the individual lands on a thank you page, and they can call in to book an appointment or they can schedule an appointment right there and then on the thank-you page. So this is a quick overview here of a three-step lead generation funnel. So now let's take a look at a real three-step funnel here. This funnel here is for a dental implant. You can see here that we have a Facebook ad that is talking to that particular market. Once they click on the ad, it's going to take them to a landing page, and then that landing page qualifies that individual. Let's him know what they're getting and allows them to input their information and book the appointment. And then finally here we have the Thank you page that lets him know, hey, congratulations, your information has been received. You can have a couple options here to work with. You can either call in or you can use the code and schedule online, right? So this is how it looks at a very high level here. You're always going to have three steps for the most part, unless you're doing some sort of unique offer or unique type of situation, right? It's always going to be where there's an ad, there's a landing page, and then there's a thank you page. Okay, so that's going to be here for the regeneration funnel, and we'll see you on the next one. 32. Digital Product Sales Funnel: In this video, we're going to go over a digital product sales funnel. Now this is going to be a whole lot different than the actual regeneration funnel because this is obviously where we have a product and we're, we're looking for people to actually buy something. And there's a few different variations here. This is going to be ultimately where we want somebody to make a purchase. And oftentimes is going to be a low cost purchase because we want to get them as a buyer and we can give them like a no brainer offer, something typically between twenty-seven, two hundred fifty dollars so that we can upsell them to additional higher cost products down the road. Okay, so Let's go ahead and jump into the digital product sales funnel. So I mentioned that there's different variations here. And this can be something where it can be direct to a product offer or a legion offer with a one time offer, upsell. So you'll have different variations. You'll be able to generate a lead right, with getting the customer information. But then also have a onetime offer that is like, Hey, you're never going to see this offer again. You get this offer for a onetime low price of 90% discount, you know, 997. Something super unique and had to be onetime offer that they're not ever going to be able to get again, right? It adds to the exclusivity after they have input their information right through the funnel there. And this particular funnel has four different steps. Number one has the advertisement, and then number two, it has the landing page slash sales page. So it could either be a landing page that is just telling people, hey, putting your information here and then after they put in their information, they'll get taken to a onetime offer page that has something that they can buy at a very low cost typically. And it's going to be there only for them to purchase right there and then they can't purchase it at a later time. And then the other variation of that is where you just have a sales page and they're able to just buy the product right there. And then, and then the number three, right, like I mentioned, onetime offer or a lead capture page, and then you have the Thank you page on the stage for there. So let's go ahead and walk through the steps in a little more detail. So first step here, we have the ad that is showing the particular offer, that is showing the cheat cheat, that is showing the PDF download the valuable resource that they're going to get. And more often than not, it's going to be like a discount offer or it's going to be something where they're offering something for free and then doing a one time offer that's going to be for sale. And so the next stage, we have the landing page or the sales page. This is going to qualify the prospect. If it's a landing page, this is going to actually sell the offer explained the offer if it's a sales page to get them to actually purchase. And we're going to walk through an example, digital products sales funnel here in a moment. And then onstage three, you can have typically like a onetime offer here, if you have a landing page where your intent is just to capture the information, or if you have a sales page, then you won't need the onetime offer because the sales page is there to actually get at purchase made right by the actual user. And then we have the Thank you page. This is where you're telling the prospect and next steps, telling them how they can learn more about your other products and services, right? And so now let's look at a example digital products sales funnel here. So you have the Facebook ad right here, and then they click on that Facebook ad and it takes him to a landing page. Will really, this is a sales page and it shows them exactly what they're going to get. And then they have a Buy Now button right there for $27. Remember this is something that is going to be typically at a very low cost because there's no human interaction here, it needs to be under $50. So this is where you can get people to buy things that are going to be no-brainers, right? Kind of offers that you don't have to have any interaction with people. It's just, Hey, this is the offer. Here's a sales page and you can purchase it right there. And then, and then the next stage, what it does is it captures the lead information. This is a double whammy here, so that putting in their information, and then after this, they go to step two. And then this is where they actually put in their credit card information. And then they have a onetime offer. You can see there on the last slide. You can see there on the last image, they have a onetime offer. They're highlighted in yellow and it's an additional $7. That's how you're able to add those onetime offers at the actual checkout page where you make it very simple, very easy for the actual user to actually purchase a onetime offer. So like I mentioned, there's different variations. You can do a lead generation sales funnel with the onetime offer, or you can do a digital product sales went over here where you have an exact offer that you're pitching, that you're promoting, and then take them to the sales page to actually buy the product. And you're able to collect their email and their credit card information after they've actually cited to make the purchase. So it's going to be here for the digital product sales funnel. And we'll see you on the next one. 33. 7 Principles of Influence: In this video, we're going to go over the seven principles of influence. Now this is something that you really want to understand as a UX designer. Because when you are designing different products, different applications, different websites, you want to have a fundamental understanding of behavioral psychology. And this is what really influenced is about because you need to understand the different happens, the different factors that come into play when individuals are looking to make a decision, to make a purchase or to move along into the next step of the sales funnel, right? And fundamentally understand the different things that you can do to get people to eat or buy a product or to move along into the next stage, right? So let's go ahead and jump into the seven principles of influence. So here's the thing. When making a decision, you know, as far as for buying a product, buying a service, whatever that may be, right? It would be nice to think that people consider all of the available information. We go through this logical process, we make sure that we look at multiple variances of the product. We look at the competitors. Well, here's the thing that, that rarely ever happens. We typically rely on shortcuts within our mind that govern the way that we make decisions, right, in our decision-making capabilities. And so these seven principles of influence really allow people to make decisions based on certain information and criteria rather than actually using their own logical mind. Because thinking and using your own logical mind requires work. And so we want something that can shortcut us into making a decision. And so we don't have to think so much. So it's a nice and simple and easy transition into putting her name and to a particular landing page or actually buying a product, whatever that may be, where there is no friction because we have been influenced by one of these seven different principle. Advertising is set up to get you to feel a certain way about yourself and about the product or the service and brand as well. And I believe I mentioned this in one of the other lessons. That's all buying decisions are made emotionally in justified logically. We are going to sit there and we're going to convince ourselves or even try to convince others that we went through a logical process. We followed the step-by-step formula to make sure that we're making the best overall decision the majority of the time. We're making decisions based off of a motion and what do we like to admit it or even know it, right? So our emotions are guiding us. They are allowing us to make certain purchases, to take certain actions. And then after those are made, then we go back and we justify logically with ourselves and with others as to why it made the most sense for us to take that action to buy that product. So let's go ahead and jump into the actual Seven principle. So the number one principle here is social proof. So these are testimonials. These are essentially some sort of case study, anything that let others know that somebody else or other people have had success or have used as product, disservice, whatever it may be, and they'd been able to get a good result from it. And this is one of those shortcuts, right? So. Good example of this is let's say you're out there around the town, you're looking for a new restaurant. Well, if you go and you look at a restaurant that has a lot of people versus another restaurant that is quite empty. Your more often than not going to go to the restaurant that has allowed more people because that is giving you social proof that other people liked this restaurant and that it's popular. And since other people like this restaurant and it's popping, then I'm going to also like it as well. Versus when the restaurant on the other side is empty, that's going to be an indication of it not being so good, not being very popular. Because if it were popular were very good, then there will be other people there as well. Same thing when you go to like a sales page and you look in to buy a product, you look in a by, you know, whatever it may be. Those particular sales pages are always going to have testimonials of other people telling their story or talking about the results that they were able to achieve as well. And so that gives you a great indication that hey, this product work for somebody else. It's bound to work for myself as well. And then number two, we have the liking principle. And to understand this principle here, to very simple people buy from those that they like, that they know, that they trust. And even though the quality may not be so great, you think about somebody who's like an influencer or somebody who is well-known in their particular marketplace. They can give some kind of promotion or advertisement for a product and eaten though of that product may not be so great. There's still going to get people buying from them because they have the liking factor. They have an audience of trusted fans that lookup to them, that like them, right? And so essentially whatever they're recommending, more often they're not regardless of the actual quality of the product people are going to buy because they liked that individual. And then the number three principle is authority. Just think about if you're on the side of the road or if you're driving down a busy all right. And you have like a 4-way stop or you have a bunch of traffic and you have somebody that just jumps out of the car or jumps out from the side of the road or whatever rate, they just come into the scene and the put on a construction vests and they have a sign that says slow and stop and they start directing traffic more after the novel, what's going to happen there is that people are going to start following what that individual is doing and is saying, if he's guiding people in a certain way and he's directing him and he has a vest on and he has the sign and everything that automatically puts them into an authoritative position, right? Because they have the makings, the lookings of somebody who would actually be directing traffic, even though they could be somebody from just across the street or somebody from anywhere. And just think about policemen as well. When police officers have the uniform on rain, there are playing this part that they are the law and when they are now where in that then they're just regular, normal person. So authority is something that is assumed, right? You assume authority. And when you can assume authority in your advertisements, in your copy, in your messaging, that hey, we are the best. We are the top and that's going to play a big factor. And you're positioning yourself as you being the top or you being the number one in your market, right? Because authority is assumed and you assume it by how you position yourself, how you present yourself that different messaging that you have all around the brand. And then principle number four is reciprocity. Now, this is something that is extremely valuable here. Just think about if you're in the US and you go into like a Costco store and you go in there and every corner pretty much you're going to see different stands that are giving you food away for free. They have different samples. They have different things that you can taste that you can try out before you buy. And so oftentimes what happens is when you go in there and you're getting these free samples, you're going to feel some sort of an obligation to actually purchase the product because you're getting something for free, right? And so this is something that is innate, that is behavioral psychology sq, where it's ingrained in us, right? We're always feeling like we want to give back because we got something for free. We automatically are going to feel obligated to reciprocate back. That's why a lot of time you have the free ebook or free cheat sheet or something that's for free that you're getting on a particular download, the other person is going to feel obligated to want to have something in return and give something back to you because they've been able to get something for free, right? So reciprocity and extremely powerful principle as well. And then number five, we have consistency. This is a great one here for sales funnel. So when you are walking people through different steps and we walked through one of the various sales funnels for digital products in the, one of the other lessons. And as you remember, we went through where they had the advertisement, they clicked on that the next page took them to the landing page with a sales page. So then they clicked on the button there and then they got taken to another page to fill out their information. And then they got taken to another page to actually fill out their credit card information and make the purchase. Those all little micro conversions in micro steps. And it's the consistency factor. Having them take a bunch of small steps, it's going to lead to them making a big purchase or take a big action down the road because you're guiding them and it's almost like a game. They have a bunch of different small steps that they're taking. And it doesn't seem like it's something huge or something massive are big because just think about if they had all of that, all on one page where they had the sales page. On the sales page, you needed to put in your information, that you need to put in your credit card information, and then you needed to select a particular option. All of that would be too much and so much on, on one page. And it would seem like a whole lot of stuff for the user. That's why you break it down into those small steps so that you have the consistency factor. And it looks like they're just taking small little steps, write small little actions, and then they're eventually going to get to the promised land. Then we have the number six principle here, which is scarcity is also extremely powerful here. This is where you're able to have like for example, a limited spots available on, let's say a particular beta launch or a particular product, whatever that may be. A lot of times, this is used very well and like the brick and mortar business, where you have a specific discount for the first ten people to come in and get a specific procedure done. And even for e-commerce stores where you have like for the next 30 days, get 20% off everything right for 30 days, being able to have that scarcity, letting people know that there's limited quantity, limited availability, the pricing is going to change and go up and next time if you don't take action now, so scarcity, extremely powerful. And then finally here, number seven, we have curiosity. This is also something that will get people to really want to learn more about. You, learn more about the product, the brand, whatever that may be it is that you're promoting or trying to get in front of people. The curiosity factor of not being able to give them the entire information, right? All of the information upfront and breaking it down into bits and pieces allows them to keep the curiosity going and it doesn't allow them to get bored. Just think about this from a relationship contexts where if you, you know, on the very first day, tell the other person that you know everything about you, your entire life story, everything about you as far as your personal life, your work life, your family, everything right? There's no more excitement there because what is there to look forward to first is if you just give bits and pieces and remain a little bit as far as mysterious and be able to have that curiosity in that other person right then is going to be a lot more synergy, alot, more chemistry, and it's going to be a lot more exciting for that other person And for yourself as well, because you have something to look forward to and you're not just giving everything all at once. So that's going to be here for the seven principles of influence. And we'll see you on the next one. 34. Age Based Influence Triggers: In this video, we're going to go over the age based influence triggers. And so this is something that is important for us to understand because when we're creating user personas, user pain points in all the different persona avatars. We want to be able to understand the different age factors and the different interests and different values and incomes that are all going to come into play when we're developing a particular product, website, apps, whatever that may be, right? So having an understanding of how to use HBase influence triggers properly is going to allow us to have a tremendous amount of success with the products because we know how to be able to get the right type of messaging, branding and influence and fun of the right market. So let's go ahead and jump into the age based influenced triggers. So here's the thing. When we're marketing to different age groups. Different age groups are going to have different interests, different values, different incomes, and different buying patterns, right? Some are going to be on Facebook lot, some are going to be perhaps, maybe on LinkedIn. And so in terms of the generations, we have the baby boomers which are born between 19461964. Then we have the generation exercise, which are born between 19651980. And then we have the millennials, which are the individuals that are born between 19812001. And so it's important to understand these different demographics, write these different age groups so that we can have the right type of messaging branding, and we're putting it in front of that particular group. Let's go into each one of these and a lot more detail. So when remarketing to Gen Xers, This is something that we need to understand as far as their love for tech. And the next big thing with the Gen Xers, they're typically going to be more concerned with providing comfort for their family, family security, family safety versus them keeping up with the Joneses and having the latest shiny object. They want to make sure that their family is going to be secure, to have comfort, they have safety. And so with these guys, you want to understand that they don't like being told what to do. They want to be able to make their own decisions. They want to be the ones that are actually making all of the determinations on whether or not they buy something. They don't want to get pushed into a sale. They don't want to get somebody who's just being salesy or persuading them in a very ineffective manner, right? They want to feel like, Hey, I'm making this decision and it's my decision alone, right? I'm not being forced into anything. Okay, so now let's talk about marketing to the baby boomers. So this is going to be the older generation. These are typically going to be individuals. That's our loyalty different brands because it had been with him for awhile and they're loyal as long as those brands are meeting their needs. That's something that you need to understand as well as app, as long as the needs are being met for these individuals, they're going to have that brand loyalty. Unless if they dropped the ball, then there's going to be some issues there and where that baby boomer may be wanting to look an alternative option. Because ultimately, what these guys are looking for is they want to feel like they have the highest quality product from you. They're getting the best customer service, the best overall service. That's really what is important to them. And so when you can hammer that down and be able to let them know that, hey, listen, we not only have a great product, but we have great service, customer service on the backend, then you're going to be able to win these guys over. And they're typically on social media just to keep up with their family, with their grandchildren and their children, right? So they're still on there. You just got to have your messaging be more on the hay. The product is the highest quality, but also the service is going to be top-notch as well. And then finally, we have the Millennials. These are going to play the biggest factor here because this is the majority of the population. And these guys are the ones that have the highest amount of engagement on social media. So just like I mentioned, these guys are going to be a lot on social media and they tend to prefer very organic marketing, rather than trying to sell him on a hard sale or trying to push a product or a service in front of them, right? You want to make them also feel like it's their decision. And one of the biggest things here is that since the millennials are on the internet quite a bit, on social media quite a bit. And they are posing with their friends and family and they're posting different news feed material, different content, different material on other different platforms, any given time, if there is some kind of small issue or small problem, these guys are going to go to social media and actually let people know. That thing is that if you have a great brand, great product and you're doing everything right, then you're going to have a good reputation. However, something super small could really set somebody off, right? And they could start a post and it could go viral, and it could not have a positive outcome. So very important to understand that they are typically going to be concerned with the social and environmental impact of that particular product and service. That is something also to take into consideration. And they also equate the shopping experience with entertainment because that's why a lot of times when you're on Facebook, for example, you're not on Facebook to make a purchase, you know, on Facebook to buy stuff, right? However, you're on there, you see different ads, you get different engagement interaction. You have different videos that you could watch that typically lead to an actual product being sold, right? But it's something where they have a unique experience. And so that's something to also take into consideration. However, the Millennials, These guys are going to be the biggest target because of their extensive use of social media. That's going to be here for the age influence triggers. And we'll see you on the next one. 35. Gender Influence Triggers: In this video, we're going to go over the gender based influence triggers. Now this is something also to be really aware of here as far as when you're marketing to different individuals or When you're creating a product that you want to either be for male or female, it's important to understand that different triggers that are going to be involved with how they make their buying decision. The influence triggers that make them want to actually go and purchase in terms of a male or female, right? Because the male is going to have a certain set of criteria, certain type of triggers that are going to influence them to want to buy. Same thing for the female. They're going to have a certain set of criteria. They want to feel a certain way. And when you're able to communicate your messaging, your branding to these individuals, whether male or female, in the right way that they like to be communicated in, right? Then it's going to lead to higher probability of actual more purchases, right? So let's go ahead and jump into the gender influence triggers. So the first thing that you want to keep in mind here is that there are a lot of stereotypes out there. And here's the thing. These stereotypes are more often than not true. Sometimes people get offended. Some people like to say, Well, hey, and always the case, and it's not always the case, right? However, more often than not, you know, men, boys are going to like, you know, cars, sports, while women are going to like shopping, reality TV, you know, color pink, right? Things of that nature that are feminine. And so this is something that is permeated within the collective consciousness and it gets spread out to everybody and it gets mirrored on the actual media advertising and the products we consume. And so not only is it ingrained and aspire parents, we also see this in the media and all of the different external resources that were using social media for social platforms when we're buying something online, it's all going to essentially show us these types of stereotypes when the majority of time they're going to be true. Obviously, there's going to be some unique cases, but for the most part, are the stereotypes are going to be true for the male and female. So let's take a look at the marketing to males, influence triggers. Men are motivated when they feel needed. Just think about if you're married or if you're in a relationship, or if you are single, whatever that may be, right, you feel very much so valued when you are needed and when you are there to help people and help them solve a problem. A lot of times in communications, the other side, as far as the female likes the communicates, they like to talk to them, talk about their feelings. And there's obviously nothing wrong with that. You just have to understand that that's where they're coming from under dynamic. And you, as a male listening to this, you need to understand that you're always look into Comb at the situation with a solution to that particular problem where females are more likely going to be just wanting to be heard. They're not necessarily looking for a solution because that's not really what drives them. It's not really important to them. They just want to feel heard and actually listen to. Men were looking to feel like we're actually solving a problem. We like to feel needed. And that product that is being marketed to us needs to have the same type of feel and look, there is a problem that's needing to be solved and the product is able to solve one of those problems. A lot of great how-to videos on a lot of things that show how to do x, how to do y for an examples of in the actual real-world, how it's being accomplished, how it's being done. And so that's going to be something very important when marketing Tamils. And it must be concise straight to the point, using a latter power words and really proving it with facts. And a lot of times when you're able to, like I mentioned, showed actually in the action, show, somebody actually doing it right. So that's going to be one of the most important things here. If you think about a lot of the infomercials, DAG is shown to men on different men products, different men tools. It always shows them actually using the product in real time and actually how it works from a functional standpoint, all the different features and then also with the use of different power words and actually having some data to backup claim. So that's really what you want to think about in terms of marketing to males. Now let's look at marketing to females. Now, when selling to female audiences here, you want to lean towards being descriptive and very detailed. This is something that is innate in the female mind and with females in general. And obviously there's nothing wrong with this or just differences, right? Females tend to be a lot more descriptive. They tend to use auditory. They tend to use all the different senses when they're describing their experiences that tend to get very much into detail. So you also want to follow that so that you can be very descriptive and very detailed in the marketing efforts. And then with the females you want to use software words and most importantly, your message must end in such a way that gives him the feeling that you understand them and that you will support them. Remember, with the males, they want to be able to solve problems. They're looking to be that solution or find a solution to that problem where females are looking to be understood, to be heard and acknowledged and supported. Very important there to understand the differences between the two. And then always provide women with the ability to connect and converse. So it's easier for them to be able to make a purchase, right? They want that connection, that social interaction. And so that's what you need to look out for in terms of marketing to females, marketing to males, the different things you should be aware of as far as the gender influence trigger. So that's gonna be here for this one, and we'll see you on the next one. 36. Interest Based Marketing: In this video, we're going to talk about interest-based marketing. This is one of the most powerful different types of marketing that you can do because it's really targeted, its hyper targeted, hyper specific to a group of individuals. And we're going to walk through power of the interest-based marketing. I'm going to walk through a couple of tools that I recommend and then give you an overview of how you can use this here advantage and how you can do initial research for whatever type of product or website or application that you're developing. So let's go ahead and jump into the interest-based marketing. Interest-based targeting, like I mentioned, is a great way to get in front of your target audience Because It's precise targeting. You get to target people that like a certain page, that like a certain products that have some sort of affiliation would a certain brand. And so you know that if somebody likes a certain page or has similar interests to that of your product, and then they're most likely going to be a great candidate for your product as well, if they like a particular bodybuilding brand, for example. And you have a bodybuilding product, supplements or application, whatever that may be, right, then they're most likely going to be interested in your product as well. And then social media platforms gather so much data from the users that they tend to already know what people are interested in, right? The whole AI algorithm would like Facebook, where it can look at when you're stopping to look at different videos. When you're stopping to look at different images, when you're liking different pages, when you have different interests or different likes on your actual profile. And so it was able to look at all of that, all your different interactions videos, how long you watched the videos would type of videos until it's all learning the type of content that you like, the type of things that you are interested in and are familiar with. And it's going to keep showing you the same type of products and services, right? As far as the ad. So that's why interests based marketing is so powerful. And Facebook and Instagram are actually the two biggest in the marketplace because Facebook has that machine-learning AI where just like I mentioned, they're going to be able to look at what site you're going to from Facebook would say you're coming from to actually lead you to Facebook. It has so much information and so much data. So it allows you to be able to go and use a specific tool that I'm going to show you now and be able to create different audiences, different buckets of audiences, of people that are going to be your ideal customers. Okay, so let's look at now the Facebook audience insights. Now, this is a great tool whether you're doing Facebook marketing or not. This is a great tool to look at and to build up different audience targets and demographics, right? Because this is going to show you the different age groups of people that like a certain page, that like a certain rights, that like a certain brand. And then you'll be able to see what is the typical age of these individuals. Are the male or the female? Are they using a mobile device? Which mobile device? Are they using? An Apple phone, right? Are they using an Android phone? And what is their location? How often do they buy? What other pages do they like, right? And so you can really build up a real solid audience here, base off of the people that you're looking to get in front of when you're building your customer persona, when you're building your customer, your customer avatar, This is a great place to come in here and also look at what is the age groups, what is the different interests of demographics or the married? What does education level rank? All of this information is readily available on the Facebook Insights tool. So interest-based marketing is probably the most powerful marketing method and marketing strategy to utilize in today's day in age, because you get to place hyper targeted contents, material, ads in front of laser targeted audiences, right? So that's gonna be here for the interest-based marketing. And we'll see you on the next one. 37. Understanding User Flow: Hi there. Now will talk about user flow. When we talked about user journey map storyboards, this discovery was focused around environment that surrounds product and user at that moment. User flow, however, its inner path that user should undergo to achieve his goal. User flow. It's an inner path over user. From point a to point B. User flow can be of a high or low fidelity. There are no specific requirements, just tried to preserve the same level of detail. Screen. User four also describes the interaction. It shows connection between screens, Modules, elements, and so on. You may use lines, pointers, some other shapes that shows these connections. User flow shows user path through a product. So you may discover that you missing some screens in your mental model about the product. You think that the registration process requires one screen, but in the end of the day is you discover that there are two screens or there was information that couldn't be included or better to beat separated. Here you see the example of a user flow for meditation app. It's done on lowest fidelity. One thing is illustrated is the logic and arrows showing the direction of the user. So you see the splash screen and loading, then a person should select whether he is existing user or not. And if he not existing user, he goes to registration and then again to login, goes to main screen. Then we have some tabs that represents categories. And there are two types of sections, It's categories and progress. And after selecting one of them, the user is addressed to the inner screen. Like here is a list of meditation's. Then he can select the meditation and go to preview or to listen actually the meditation, complete meditation. Then he receives a success screen. Then he goes the the success screen or pop-up and users is taken to a Progress screen, the list of completed meditations. There are other interactions as well as for the plane meditation we can stop meditation, go back to listen to the similar meditation's. This is the example of user flow of low fidelity. It shows on a general level, the whole path of a user. We don't have any additional things, but we can add them on in our next iterations. You have to keep in mind that there is nothing final in user experience design. So whether you're doing some iterations, you are getting some screen, so you're excluding some. You may change your user flow over time. Okay, it's fine. So we now know how many screens we have to integrate in our product. That's the first thing. The other thing, that doing the wireframes or doing the visual design, you may discover that some screens may be separate to several screens. Some scripts can be combined to one. Perhaps things can happen that way as well. Now you see the logic that you have to do, the connection between screens. You may exclude some of them and try to shorten your user flow if necessary. Some of helpful resources, maybe overflow dot io. We'll see the chart that come and wire flow dot co. These resources that show the for creating, for designing user flows. You may use those to ease the process. They are fancy. You may test it yourself and maybe there will be much useful than Adobe XD, who knows? Okay. And for those of you who are not familiar with fidelity levels, this slide demonstrates three of them are low, middle and high and low level. We see quite abstract section which has only geometrical shapes without any definition, the middle fidelity level has image. Inside the container, has text and button no more shaped. The high level of fidelity is visual design actually, and it has all styles. So high is synonym for final. You probably have the question, how should I build the user flow? What should be the starting point of user flow? And how to create smooth user experience. Honestly, among the resources that I've studied about user flow. No one told me how should I build those. K. I will tell you the several steps they you may take to create a user flow that would be most likely the best starting point, then you will test it and improve it on the next iteration. So first of all, please consider the analysis of a current product and analysis of a competitors. Because they are, you may extract already familiar user experience for your user flow. To you'll take the existing user flow and improve it. If you create something from scratch, you have chance that won't be clear for user because he expects something else. There are many relevant apps. And that's why as user, I'm expecting something with a similar user experience. You may invent a bicycle, but I don't recommend you to do that. The first example of your user flow would be a, probably a copy of what's already exist. Then you will work on improving this user flow whenever it's possible. Here, I am considering this to people that they will be familiar and quite okay with the user flow. It's quite simple, you say. And still we may exclude or include some section shrink, some of them. So my advice is, as you begin your UX career, you have a question how to create a user flow spirit to start from the existing user experience and try to improve that one. And then your next, next trials, next projects, you will see the clear picture, you will feel that and you will have more ideas on what will be the starting point for your user flow. After a while, you will replace this abstract sections with your wireframes and Dan with parallel types, capacity to developers team. And they will start shape logic of your product. 38. XD Lesson 6 Class Project: Userflow - Your first UX deliverable: Okay, I just put down the user flow of the over its foot, Panda and Strauss M D over its, we discovered that there is a stage for entering a phone number, receiving SMS code, then to radiation, which requires you to enter email password, and then it allows you to pick the address. And the father area is discovered by us. Yet in terms of food panda, we have reauthorization prop, prop, probably we will set up a profile. It also isn't discovered yet because it's not supported in my area. But what we seen from the video, which demonstrates user flow, we are able to select the address and select the type of food or restaurant select product than if it's applicable, the reserved variation of product. And then we and to address and contact details. And then we have the OTA confirmation. Well, roughly it looks like this for Strauss him the user flow looks almost the same as in case with the food Panda, but except for the optimization is placed on the last stage. Ok. This is the rough demonstration of user flow of these three apps I didn't take take away into account considering that doesn't work in my area. But these three are enough to clarify, which is the best user flow for our prospective app. So you see that I marked the sequence that is similar and it's also very comfortable for me personally. So I think this election addressed selecting food or type of food or restaurant and actually the product, then we can adjust the number of ordering items. And order confirmation goes further with the entering phone number and receiving SMS code. So here I feel that we will implement or we will use this user flow can containing three steps or stages in our perspective app. So let's try to create our own user flow for our food delivery app, which will be in our app, TEA authorizations, type, our food food deliver agree? I think that authorization will be on the first place. It's okay. Theorization via Google, Facebook, Twitter account, maybe, well, maybe some others. Sure, but you also have to identify which is the best way to authorize your users according to persona's. Okay. John, I think we need to select a dress at the first place. Let's rearrange it a bit and see what we get. Of course, if you are planning to create international apps better to place the trellis section and after authorization, perhaps it will be more efficient because some partners, some restaurants, won't be able to deliver at your precise location. But I'm thinking about the local app, which will work only in my city. So the address will go on the last stage alongside with the order details. Ok, so we have the authorization, we have a list of restaurants. We can select the product from the, from the restaurant, and then we modify our order. This is the user flow for a single book delivery. It can be non-linear. So user may come back and select the other product and so on and so forth. Modifying order and then order details to see what we actually ordering and then holder conformation. And the last thing will be the selecting address. Again, you may do the user flowing whatever software you prefer. I am using x D For most of cases because I'm used to it. I just realized that we can at our address alongside with the order details. So Delivery address will P here. So we skip 11 screen, which has the another efforts for user K. Now authorization, selecting food type of food or restaurant. Then we select product from the B category or from the precise restaurant, from particular restaurant, we can modify our order, which would be the quantity variation of product. Several screens we combined to one. And here we also fused odor details and deliberate tress into one screen. Then goes order confirmation and success screen. Okay. If a person would like to get more product, he or she can go here. And two, don't pay much attention to this. To my drawing. It's just to show you the relationship between screens. India. Okay? So and the cycle goes again one more time. So we designed the outline, the role draft for our user flow over low fidelity, we have some stages. They are not yet screens themselves, but there are some stages which we need to undergo prior to make an order. 39. XD Lesson 7 Class Project: Crafting a Story board: So we designed the outline, the role draft for our user flow will have a low fidelity. We have some stages. They are not yet screens themselves, but there are some stages which we need to undergo prior to make an order. And our log that I found a description of target audience for food delivery apps on heavy.com. And they are all three persona's that may be useful in our case, the time crunched executive. This customer doesn't have the luxury of eating out at restaurant during the lunch hour or even waiting in line, auditing it to go. Busy executives with a TE, fool of meetings often only have enough time to actually eat and we will turn to an app to take care of the rest, reach these customers by promoting feeling lunchtime specials that provide that energy boost needed to get through the afternoon. The second persona is the on the go parent. For many working parents of those children who are busy with sports and other activities during the week, preparing dinner at a decent hour can be difficult when there is only 20 minutes to get a balanced dinner on the table for the family. This customer will pay a premium for the convenience afforded by a delivery app appeal to this customer by offering family style value meals to serve a group. The third one is the air early Dec. adapter. We all have that one friend or coworker who is the first to adopt the latest gadget and using a food delivery app is no exception. This customer was one of the verse to use our right sharpening app like Uber, takes advantage of grocery apps for extra savings in most likely has the latest iPhone or Android phone, track the early adopter by offering them VIP access to special deals and other Burke's. Okay. There are questions to ask yourself. What strategy makes sense for my business? Which apps fetal brand promise, should mom my menu change? How can I utilize these new communication channel? Utilizing food delivery app can be a great source of revenue for restaurants, even though this customer, customer base isn't a visible as others, it should be far from an object through for smart marketers. So considering our target audience, which will be both parents and business people, I've created a first storyboard which shows the sequence of activities that will, that a person will take prior to use our app. So James comes home, See, he admits his daughter, his wife, and next thing, he opens the fridge. His wife, she was taking care of children and she couldn't dedicate time for dinner preparation. So there is nothing interesting for James in the fridge or on a table. So right now we see that we can make a few notes here. First off, this photo doesn't demonstrate the actual environment because it's usually evening. So let's say it's evening, then it's a fridge and so forth, or coach our share. So I've structured the table so the data format is more reliable. These photos may be replaced with your pen drawing. And the most important thing about the storyboards is that they are easy and fast, you elaborate. So the style of the storyboard is not that important unless the information inside this deliverable is clear. Ok, so I've breakdown our table two stages, environment, equipment, thinking, saying which is the most common way to structure the table for storyboards. Some of your projects may require other type of data about user. Okay, so we have stages, which is James comes home, open free chop and delivery app and waiting for delivery. It's not changed. His wife, James is a busy man. He comes home again. He says, it was a long day, my idea. And then he thinks I'm hungry and open the fridge. And when he uses the app, he asked himself, what do I want to eat and ask his family members, are everyone okay with pasta today, the trend of family is the other persona and perhaps the other storyboard. We have two family members on the car and one of them uses the upper food delivery. So they ended their workday and they want to order their dinner. So the order will be in the process while they are on their way to their home. So if they make an order, they are in the car, they think and what we will eat this if and the saying, let's decide what we want to eat when we come home next day, coming home, they are at home and they think, finally we've got home. And they decide to spend some time together. Their thoughts on the third stage, when were they read books with their kids? Maybe playing, watching TV or something else. That thoughts are things that time with children is priceless. Okay? And finally, they got the order and they think that they are very hungry. And they say, Thanks for delivery to the person who delivered the Yehud. List of paths towards this will show what we already eight, where we already ordered in the past. So person 1.5 doubts about what we're gonna eat today because he doesn't know. He feels that pastor is okay. But he will be very thankful if you showed him what he already ordered and perhaps make a recommendation, recommend Dacian based on previous cell's food types guy who does, Hey, K. So insights for trained family would be like, let's take a look on this third stage where people are reading book with their kid. And I think they offer an activity where kids while waiting for delivery. Okay. This is a good one. I think we can at some stories, puzzle games, slight version of some games that could be implemented in the app. We're even partner with other applications to have a good time while waiting for the food. So based on the time for order to be delivered, we may advise different activities for parents to spend time with their kids while they wait for the full day, could be at development activities, books, games were some puzzles or maybe some quests. This all depends on the, what we will be able to develop. 40. Working with Moodboards: Hybrid one, and let's explore mood boards now. Mood boards, pieces of design samples for inspirations that contains colors, typography, interactions, images and photography, futures, icons, and UI elements. So when you surf over Internet, you may find a design that illustrates that the idea that you have in mind, you may borrow and sound elements or sections from your competitors. That's okay. You don't have to mimic the UI or the style. The mood board helps to build a vision Tweedledee styling that your perspective product will have. It's also helpful to show two stakeholders, clients, what do you have in your mind? How do you see the project in this separate pieces of design examples. And you may include topography, you may not, you may find only one button. You may find 10 thousand buttons for your project. You may include all of them in your mood board, but will it be useful for you or not? That's the question. Tried to include the important things because you may end up with a, with a tons of solutions. You will waste too much time on placing and testing all of them. This is an example of my mood board done for meditation app. I would like to introduce some nature images. I grabbed some colors. I also like the designs of these screens, very light and soft UI. And the dark version may be something like this. These color scheme and gradient. There's very lovely. The example of how the forums may look on dark mole is also cool. I really would like to have something like this in my app, three icons and bottom toolbar. Very efficient. Next, okay, images. So these are several things that I would like to keep for, for my app. I took this from triple and Behance. I will consider the style of this and how the colors work together. Very cool fact. And here the color scheme is also very nice. I have to try to build something like this. I like the layout of the screens. They are quite light. I think that they should be user-friendly. Okay. If you notice, I don't have typography. I don't have many things that are listed at, don't have interactions. But for me, at this point, it's enough to show to my client whether he agrees you take this direction or not. You may add additional pieces to your mood board later on and brainstorm. Again with the team or client. It really useful because when you start to do visual and design, it will be very helpful because you won't use wrong colors. That won't be expected by client. Even though the you're doing the user experience design, you focus on your user, on your end user. The approval of your work is up on the client. And mood board is very nice thing to have this assurance, this middle point with transition between the wireframes and visual design. So again, the whole list of things that you can include to your mood board can be colors, typography, interactions, images in photography, features, icons and UI elements. You may not include some of them. You may create your own mood board without any restrictions. There are no rules, but the result should help you and stakeholders to understand the direction that you are about to take with the visual design. 41. XD Lesson 8 Class Project: Creating Moodboard: Hi everyone and welcome again to our practice UX lessons alongside with XD. And today we will explore the mood board, which is introduced not only in UX process, but also in visual design because it really helps you to understand the client's view on the project preferences, ideas, and expectations. But also you are able to express your feelings about how this project may look like. So there could be two parts combined. You may use references that your client or sent you and combine them with ones that you feel that are suitable for this project. And let's imagine we've got five links to some projects. You remember, we are working on food delivery up. So we have five references that our imaginary client thinks that they are okay to consider. He likes the style and would like us to follow this concepts. Okay, let's have a quick look through the UI. Very spacious light, very soft, I should say. And the icons are also drawn very nice. We are interested only in the, the layout and the UI. This point, you see that there is nothing heavy here and everything what is placed on the screen is organized by grouping. Secondary colour is the blue. First one looks like it's orange, but let's see. Yeah, orange, black, gray, and light pink. Let's review the app or it has a dark mode. This is very nice because we are also looking for a dark mode. And I really think that the dark mode for our app will be more suitable than the light mode. So even if we developed a lite mode, they won't be by default. So by default I wish to set the dark mode to be active. Okay, let's take a look on the, another up in our list. It's Cast station, flat red color with a sunshade. Nice styling for the case. C read as Main color. Sure, well we can extract from this where I think the highlights of this app is that it works only on two colors, mainly one which is bread. And the UIs, well structured and organized using only white, black, red, and gray color. But I don't think in our application this could be plied somehow. Not sure. A world grabbed several screenshots. We'll try to incorporate the elements or something else from these up. But right now it's really hard to say what is the cool thing we can use? This onboarding process looks good, okay, let's take a look and take the another example. And now our references, snake shoes, okay, shoes. Yeah, you see cards are organized very nice here and sort by filter that could be applied in our app as well. And love the style of the icons. As I said, the list of the cards looks quite cosy here. Item or the inner screen structure could be used in our app too. In my bag is at my cart. I see the Checkout button here. Main step, we having a deal with the order K filters slideUp type window. I think that filter will be also incorporate it in the same manner in our app because there will be many settings that would like to have on board, which means the time to deliver the type of food we are looking for. Maybe there will be a checkbox for vegan food or something else. Let's see, but I think that's the most appropriate way to have a filter. This is the list. She's nice. Let's go to our next example of this. The icon's very beautiful. So our client will be very happy if we could use similar icons in our app. Right now we have one more application left. Let me open it for you. And here's your law and other up looks like shoe store that we had. This layout reminds me the Instagram. Next goes, yeah, really coaster Instagram. Here we have a categories. So nice background based design. The main color here is this vibrant blue. Icons are based on different shades of gray, of different shades of gray and small accent of blue color is a soft, soft shadow, which is very common these days. Here we have a map and sort of filter by months. Really hard for me to understand what this app is for doubt using one. But I'm sure that our client liked the visual part, not the UX. So now we have five samples to consider in terms of visual design. And let's grab them and decide which part we will borrow and we will take down. I just finished making screenshots from the references that we explored and organized the way it will be more or less understandable for us and for our stakeholders. Again, you may create a very nice looking mood board and as well as your usability of reports or zone and any other type of deliverable, please concentrate on the value that you are deliver. And the next thing is. Styling, making a pretty year. So let's get back to our mood bar. Here we have futures, images, color, elements, icons, phoned, interactions, and layout. Or futures, I've picked the guest state issue now with the onboarding process, I really appreciate when there is something prior to use the op delivery timer. I think that we can introduce delivery timer. They think it's very fancy thing to have a delivery timer. Again, everything here is for consideration, for discussing with stakeholders, with your team and deciding whether in features that you offer you suggest are acceptable or not because there may be a huge amount of time needed to spend on developing such thing as Timer pack. Content team may not have the content for onboarding process. And so one, so this is just another stage closer to our final product. Ok, let's get back to our mood board. Filter. I strongly believe we can implement filter that will open in a separate window. We're slides up or slides down because first of all, it allows us to create a scalable system. The other thing is callers. I filled that black or dark gray would be the main background color. Icons. There you remember these beautiful icons. This is the example of what client wants us to create elements. This button is very nice. The rest is pretty much standard. In terms of interactions. I think we can borrow this chronological approach like linear path into our past orders section, where people may see the dishes they ordered before. So there will be a calendar, photos and perhaps name of the restaurant, the price button to reorder, or maybe a rating and stars and so on. Here, it's proposed layout for our main dashboard. There will be a top section, of course, put a logo with the dropdown menu or bulgur menu. We will have some functionality tabs alongside with the search bar. Maybe we can do the feed from friends that have photos of their food and so on. The other thing is the font, which I would like to using the app I picked just, just to have something different from this Montserrat trend because I think this font is very overused. And this makes every app similar to another one because they have the same font in their designs. And let's test now how the paragraph will look using this font. First, you will do it prior to send the mood par to client or to demonstrate it among your team members. Kay, let's move on to our imagers that will represent the philosopher, the image of our, our product. I feel that family sitting and eating dinner will be nice. And here is family members. Outside, quite cozy air, three kids in past tense, Something else? I like the environment, the lighting. So when we will do, the visual design and content team will write articles. They will be able to choose from images with the same emotions, the same tone, in other words, with the same characteristics which are important to our app. Okay? Okay. So I think I'll clear with a mood board, the design of foodborne was already explained. I told you that it's not that important how your mood board looks like because the main thing is the information it contains. So you may get some styling if you wish. And we rearrange it if you don't like my way. But 90% of my project have the same type of mood boards. Minimalistic, clear, without any white noise on them. Thank you very much for your attention for a time, tried to create your own board. Maybe you have some other suggestions and good luck. See you on our next lesson. 42. Sitemap & Information Architecture: Congratulations, you've got to information architecture. Now we'll talk about this type of UX design activity. Information architecture is organizing content and the most logical and efficient way to increase is discoverability. It's combination of organisation, naming, navigation, and search systems implemented in the information system. At the level of a whole website or application information architecture determines what data should be placed on each page and how to link the pages between each other. In order to create a user-friendly Information Architecture unit to consider previous findings from your analysis, from the customer journey and the other things that you've done so far. Analysis will help you to understand where you are, to define rules of conduct and familiar user patterns, user profile and persona will help you to understand the futures of its perception behavior patterns again, and consumption and pain points. Customer journey helps you to define entry points, exit points, and decision points. Quite a few search results takes user to homepage. So be careful and organize your information architecture. And the way that will shorten and ease the decision-making process for user. Grouping according to user expectations means that if you have multiple persona's in your project, you have to consider all of them. And probably that will have an impact on the content, on the structure, categories and so on and so forth. So you need to meet different user groups and their interests. You have to keep in mind the product functionality by listing all functions and tried to assist the user in using them when needed. If you take into account storyboards and scenarios, they will help you to build a better relationship between content and its functionality. So the architecture could be user oriented. So if your user journey shows that person usually comes from search and gene or social media in half the link on the specific page that you have to improve. This page, that page probably will be decision-making page. You'd be surprised, but the homepage is not the most popular page on most projects. That was surprise for me as well. Long time ago, I designed very beautiful, very content heavy homepages. But in the end of the day, user makes decision on the inner pages and you have to focus on them and help your user to make a decision according to a business model of the project. In information architecture, you will determine the relationship between content and functionality. Let's say we put owed it under case study level in this example. We'll be unfamiliar to us or unexpected by Euler or we press contact button and it takes us to a Facebook or Linkedin page. I expect to visit a page that will showcase the phone number, email or contact form, or other way to, to contact the company or person. So this is also means that relationship between the content and functionality should be clear. Whether you pressing homepage, it takes you to another page that will be wrong, that will be unexpected. So if we have some services that company offers, we have to prove it properly. So Analysis, risk management, financial load, it will go on the services project alpha, deta goes under case study level and contact us page where we can find information that will help us to reach this company. As well as other deliverables from your UX design process. Information architecture helps to be on the same page with the stakeholders and team. Developer team will consider information architecture and alongside the old development process, as well as your user flow. And also shows areas of stakeholders input, maybe that's a content or other media. So you discovered that we have to include video section, but you don't have videos on hand. If we need an exploration video, someone has to produce it. If you know that user is 18 years old, probably won't understand some language that you want to use. And you need to adopt this language to a user group. So here we have Project beta, financial loaded all this. It's to names for our sections. You may consider to name this in other way round like portfolio or our work, our project, past projects, what we do, and so on. So this is a user language that you have to keep in mind while doing information architecture. And do your information architecture. And that way that could be easily editable, scalable. There are lots of software online. You may do it with the xor, with Adobe XD, you may use Balsamic if you wish. They are all simple, simple software in terms of creating information architecture and sharing it among the team. 43. XD Lesson - Class Project: App Architecture: Hi there. Welcome again to our XD lessons alongside with the UX practice. And what we're gonna do in this lesson is going to define the structure of our perspective food delivery app. By the way, the things we already done, we already collected till screens from our competitors. We defined the user flows of several applications and proposed one for our app, we have descriptions of persona, very light overview, but still it's enough to create a storyboard and other UX things. Our goal is to offer dinners for busy people and parents who want to dedicate more time today children. So let's start from the blog overview of our architecture, which will be inside our app. First of all, we will list all features, all blocks, all modules or element, perhaps elements that will be important in our list here. And then we will group this blocks intersections so there will be easily discoverable and intuitive. Gaillard Start from the very beginning, it's our logging or splash screen. Splash screen will be followed with a login, then registration, then main screen. And other is the restaurant meal, bust order history. Account Settings, say feedback. Family. We have the recommended meals section. So the general idea is already here, but next we need to arrange this splash screen registration search would be on the next level in priorities after categories K, we have defined home screen, and now it's time to define the account settings. You see what's the challenging part here is to organize this several separate elements into group give. We have everything here. Let's try to create in flow of this information architecture. Oregano splash screen is the first thing we see. Pledge screen takes us to home screen host Green has categories, has Search as recommended meals. And I still have doubt about placing list of restaurants here on the same level with the category search and recommended meals. But I will do that because I don't have any other idea yet. Once I decide or find another more appropriate place for the list of restaurants, I will take it out from here. Ok, next. Categories at eatery food, Khomeini, okay, then search takes us to search result than recommended meals. So order history, something separate from this, as well as settings, recommended meals. So you know that information architecture is made for easy navigation and discoverability of the content. But since secant place, it also serves another function, which is for us, for builders of the app, we are able to blend in five steps ahead, how the interface and how to user experience will look like k. So let's see what with what is left here. Okay, we forgot to adress care. We will put all the history in two places, after awhile, will be able to track and to analyze whether one placement is better than another. And you arrange these elements according to our statistics. So my profile will have trust, trust, personal information. We are dealing with a food delivery up. So the address is more important and should be easy accessible. Let me just put it all down and we will define whether dress have a better place here. Variation will go here. I think older history won't have any dropdowns. Will, will be the menu itself. With long scrawl. Maybe there should be an order ID or something. So now I want to play some we're family games so they are accessible not only during the time of delivery, would like them to be accessible and tiny time. So I'm just have hard time to define the placement of this as well as the about the app information in real situation probably will share among team members, we will decide on how to create a better information architecture, having all this. So let us just skip this too for a while. And right now you see we have information architecture for our app. This is the low fidelity level. We have a home screen, older history and my profile. That's how I decided to separate the elements inside the app. Home screen, we'll have categories, search function, recommended meals, and list of restaurants. Then we have the categories will be different. It's just a place holder for us to have an idea of what we will have under categories. Let's have been other things, categories. This price. And we are interested not in the distance and itself, but the time of delivery of our food. So please be careful when you're talking to a user like a machine. Great skill for people who are doing user experience design is to pick up user language and mimic it so people will be able to understand exactly what you meaning, for instance, but I understand that each delivery requires time and this time is calculated through distance. But the customer or the end customer, be interested in how many minutes or many hours he and his family should wait for his dinner to be delivered. Again, I think the search could be somehow combined with filter, with the same filter. Let me start with wireframing and we'll, we'll try to connect and disconnect this two elements between each other. And we have variation on the bottom. Ok, I think that's enough for now for our information architecture. We divided our home up into three main sections, which would be home screen older history in my profile, which is responsible for some personal data for dress. And maybe a person would like to give a feedback heart about the AP. This isn't a final version. This could be changed of time. After discussions, after doing wireframes, you've realized that this doesn't work or this looks bad, and so on and so forth. It shouldn't be the final design of your information architecture. At least don't take it that way that is rigid and couldn't be changed. Kay? User experience is user in the first place. So we have to do our best in order to create a smooth and user-friendly flow. Changing is okay here. Well, thank you very much for your time for making this today. Have a good rest. Assume next lesson. Bye. 44. XD Lesson - Class Project: Login Screen Wireframe Using Material Design: Hi everyone, welcome back to our XD lessons. In this lesson, we're going to transform our information architecture to medium fidelity wireframes. Let's start with the simplest login screen. Okay, I need to draw an outboard. Let's select Samsung Galaxy as ten for instance. You remember, the top section usually is used for system notification, system information like better level signal, WiFi time and so on. We may put this one here as well. So the top two bars, usually 24 pixels, four dimensions of the phones as Samsung as ten. However, you should be careful and read the instructions for the precise model of found or other device that you're working on. Because this might change depending on the model and then make, okay, so I've picked this one already, premade as you see, one that was downloaded from material library. So you may visit material that io slash resources and we'll see many useful pieces of designs, premade things, Templates, Components, lots of things that will save time and help you to build your interface. So material that i slash resources, you'll see that there is a Icon Library, tools, fonts, colors, type, scale, generator, designs, baseline design kit for Fichman design kits, and so on. Lots of interesting things that may help you to build your interface K. So let's go back to our design. I will move it here. So what we need here, we already took the top toolbar and we need to create two fields for the input. I think, omit this one. And as our theme will be dark, we may borrow, they've colored in dark screens, dark modes. We are able to change the color of our toolbar. So let's do it. I think that's all. We may also want to add some capacity to our toolbar and it is possible to hide it indeed. So if you need to hide it, you may go on into it. We are doing the login screen, okay? This is the grid which is default for x d, four columns. Here we will see the username password. Next, what we need is a button for us to log in. Let's find buttons here. We did this one member, we have to make sure that person can register here k. So choose ration would just building to grow prototype of our app. And don't pay much attention to the style of one. Although my seem that it's already inherited some stats from material design, but I will change the color to wide so it doesn't feel like it's already the visual design login. Remember if you need to have the uppercase for each of your ladder, you may use this function uppercase as well as others. Also useful, we need to have some logo. Lets make this section for logo. Okay, we have login, we have registration for people who are new to the app. Perhaps we want to have some small tagline for them in order to trigger them to register and as well as guide them a bit on the screen. So new to cloud our app, register, username, password, login. Seems like login wants to be of the other color, doesn't feel like it. Secondary Barton. And we'll make it a bit darker because we actually want people to register to our Apple wants to give a user a chance to login, though with a Google account than Facebook account. John went to repeat the word account each time. So remember, pleased to differentiate these three sections because the top is the place for a person will type the data and press log in. The other part will be the counts with which a person may login without typing the info here. And the third part will be the Registration session. So pressing these bots and will transfer user to a registration screen. So these are three different parts. Please try to differentiate them, whether it's a color, some spacer and line or something else. But be careful because now it seems like a three different parts of their votes, not that user friendly yet. But still you see that there are three groups of elements and they are responsible for different functions. Login. Here we are will work only in colors I want use any other graphic elements on the, the shades. This button is not easy to press. If you remember the heatmap, it's when we get to a heatmap, you will see that this area is not easy, preferable. So we may want to take it up a bit. Okay, we're shrinking our logo as possible. Okay. Now it seems more or less the login screen will use spacer to separate two sections. Login with social accounts and login with the password in email. Okay, we've got the first screen. It's medium fidelity wireframes, so to speak. We don't have colors. We all have phones here. We don't have the final styling for our buttons. We don't have logo and lots of many things. Don't have pictures here yet. But we'll get to that bit later. Okay. So we see you may be confused to be with a space here below the registering Account button. I also find it quite weird, but first of all, remember that there are different hates of devices. So it will be a safe area for, for cases with the smallest screen. The other thing is that it's not very easy to press the bottom side, a holding the phone with one hand. If you take a look at the heatmaps, you will realize that the most compressible earlier is somewhere here. So starting from the corner of the register Account button to the left corner of the Login button. So this is something diagonal and it's better to arrange elements when your u i, so there are easily accessible if you want them to be accessed. Okay, so I think that's all for login screen. 45. Working with Prototypes: Hi there. In this video we'll talk about prototypes. And the prototypes are the fusion of wireframes and interaction. Why we need this to identify design gaps. So you will discover that you have wrong navigation. You missed the responsiveness. You may some interaction didn't include feedback after some task. You may improve the UI design like positioning, styling, size of elements, and typography. It's the best thing to test among the perspective users for your target audience and consider their feedback for further improvement for the fathers stage. You may introduce the micro iterations here, like pop-ups, alerts and animation. Of course, as every thing and UX and you have to brainstorm with the team, with your client to hear their feedback on the prototype. So here I would like to point out that the most prototypes I make in Adobe XD, I find that the most efficient way. It's a light, easy to use software and it has very user friendly insofar as, and since it's Adobe family, lots of features, lots of tools and short keys are the same as in Photoshop, which I used several years ago for the app design. There are several alternatives for Adobe XD, like FISMA and sketch if you're a Mac user. But in this course we will focus on Adobe XD. I will show you how to organize your prototype, How to Create From what to start, and which functions you have to keep in mind. Some may call wireframes prototypes, some may call prototype's wireframes, but I would stick to prototypes as something that has interactivity, that has ability to be tested, something that has feedback for user, something that can be analyzed. It's closer to the final product rather than wireframe. So you may have a clickable wireframes and someone call it prototype. That's okay. The importance here is to get closer to the best results that is possible. And your prototypes as other things that you done. They also have versions, revisions, and room for improvement. But put h stage, they will be more refined and usable. On prototype stage who are able to see which things do you miss? Your wireframes may be you haven't included some pop-ups that will show user that this operation was successful. Or maybe there's some wrong data in input field. You have to highlight it somehow, give user feedback. So these small things that are really important for end-user are included in your prototypes. And try to glean through this prototypes by yourself several times and implement as much interactivity as possible to be closer to the final product that will be used by end users. 46. XD Lesson - Class Project: Home Screen Wireframe and Linking: Next let's do the registration. Registration will be like this one. Already have an account. So this is the trigger for people who already have the account. So vice versa, we are linking this, we will link this screen to this one. And you see I'm going to prototype sanction and press this login button and grab the arrow to this screen. Here we have transition overlay, scroll to previous art boot audio playback, speech playback, and so on. The trigger could be tapped. Drug case, gamepad. Voice. And animation could be slide left, slide rights like down. You may play with it a bit, but I will explain you the essential. So if we need to go from one screen to another by pressing means that we have to tap the button. So transition is actually what we need. But I think that auto animation or would be better, let me add a link to this screen from the login screen. Let's try. It says auto animation is better used. Want to animate small things. Right now it looks a bit weird because don't have these feeling of different screens. So let's animate to transition and see how it works. A bit better. K for registration, we need more fields to fill in. Perhaps that's a username, it's email. What else? Phone number, password, and repeat passport here let's put the registration. Not sure how I will logo will look like, but this is the structure of our app. Usually for UI designers, if you working on the anew acts, you have to indicate the contrast, the placement, perhaps the area that is taken by the element or object of group of objects. Of course, there should be a text Britain. So a person who works after you will understand whether this section is for tried to use the real place holders and let me distribute this a bit. Okay, so we have two screens. Let's mark this too, has made, let's preserve the flow and we will go with the home screen. The home screen we have Filter Search, recommended meals and list of restaurants. Let's find the Filter icon on the fielder icons. Just download it if either icon. So it's a filter. We need search icon to. I encourage you not to spend too much time on designing icons on your wireframe stage, since it's just a wireframe, That's why I usually pick icons from the open sources. So we have search, we have filter, we will have feet. Recommended meals and risks of restaurants, recommended meals. The active tab where we are. Then I think we need to expand search bar. And somehow to make sure these two elements are linked together, looks like recommended meals and just restaurants, maybe your feed. And now let's go back to our UI Kit and grab the card, something like this. Let's try this one and see whether it's suitable for our app. Too much space. First of all, I think we may change the background. Let's name this Fried Chicken. Here we will have the logo of the restaurant. Can hear description and don't be afraid of the large image because the food is being sold on the, using this approach when we have applications, when we have websites or rather promotion which can't transfer smell, I feel that we will be able to have some scrawl here like this. Okay, let me explain you. We are able to create three types of scrolls, which is Pan, horizontal, and vertical. Here we will use the vertical scroll. For this one, you have to select element, expand the borders. So I have a group, I grouped it, and now you see we're able to scroll. Easy. So the next thing we're gonna do is to have some buttons here, of course, action one. And there is an action to we will have order or read more. Oh, you see these cars, DR. dynamic and we go and now we have search function. It still want to get freed of this pure fee title. So we have a home screen which we will link to our login. Yeah, we forgot about some settings. My profile in order history. So I've picked three icons for ordered list and user profile. Not sure that it's the best option for order history. I would put sand clock too much time spent on placement. I know that it's me who will do the visual designs and trying to go a step further and think about how they will be arranged. So besides home screen, we need to filter that will have categories and so on. When it search that we have search results, we need recommended meals and list of restaurants. Here it's better to use auto animation because we will see this light movement. And again, we are moving to a prototype's section to link screens. I'll put OTO animate when you see they are moving. So we have two sections already designed. 47. XD Lesson - Class Project: Adding Interaction to Wireframes: Next, let us create the screen for meal. Perhaps we want to help users go back from this page, then we don't need search bar and tap anymore. So here we would need to indicate the name of Neil. I found very nice foot name and photo. We need restaurants where it's being cooked. Descriptions also matters, but still not as photograph. So I will don't like lorem ipsum. Yeah, we don't have anything else. So if we have a variety, we need other element called radio button, vehicle, fish, Turkey. We have a rho prototype of the page. Now we need that the button for it's better for us to rearrange our layout to this grid so opium consistent. Not sure if the card is appropriate name here, but let's leave it for now. And now we need to adjust the number of food we are ordering. And thus, you may create your own set of predesigned elements like this. So now we have the meal is see we have a hidden scrawl or description which allows us to have a fixed set area on the bottom. And we have a variation, vegan fish, turkey, and there will be plus minus. Now let's connect our screens again. So the mail list will be connected to a meal page. We all have to remember the Back button, which will address us to the previous screen. Let's try our app. Variation wasn't the screen, so we will take it down much easier without additional pop-up or transitional window all on one screen. Think now we can do the order history, order itself. When you wants to duplicate elements horizontally or vertically, you may use repeat greed. So once you've grouped and press repeat greed, can we take it down or right, left. You see it's easy to create tables, things that repeat and change simultaneously. Pastor southern peas and its cost. Let's put it here. Total time of delivery probably is not the best to indicate here because we still want to know where to deliver this food. Let's create take away and four, takeaway or delivery. We will have two tabs. Very convenient. Perhaps. Our family has a specific route and the restaurant is nearby, so we're able to give them another option, which is takeaway. And for a restaurant, it's some savings in terms of delivery. Now, let's define which sections we need more trust city, block. It will be already predefined in the phone. And the address will be borrowed from the my profiles data. Although we will be able to change your K Once we press on the inputs on data already typed text, we may change it if necessary. That's the idea. Once we selected delivery, then we enter contact information and address. Then we will be taken to a confirmation screen that will show us how many minutes or hours per should wait. So it shows total coast, it shows delivery time, it shows their dress and but unconfirmed, but I will also add another button edit order. Because once a user or change his or her mind, they should be able to get back to the previous screen. Even though we have this arrow still not that clear that we can edit ordered. So then we have to create success screen. Congratulations. Your food is on its way to your home, order id and sort of timer here. Let's add the links. We're login. We have our feed of meals. Press the pastor with salmonella and peas. We can scroll description. Please remember the vertical and horizontal scroll. We can select the Edit card confirmed and the timer goes on. It's all for now for part of a medium fidelity prototyping. Thank your understand how the screens should be organized. You may select other UI kit if you wish to. There are lots of them here. Get UI kit material, Microsoft wireframes, more. You are kids, you may crop some year. This is not important. On the stage of wireframing. You don't have to think much about the styling of your u. I try to test the flow to find some design gaps, flow gaps, UX gaps and so on, as well as feedback gaps. The time on designing Girl by frame should evict very accurately. Because the wireframe is middle point between the research that you've done before and the visual design that has to save your time on visual design. So don't overdo it by trying to make things perfect on this stage. Okay? So thank you very much for your airport and all its long lesson. It's hard. It's boring sometimes, but you know, in the end of days, you've got these screens, you can press, you can experience the design didn't there? You made a very, very nice feeling when you can share your prototype to your friends, to your mates and stakeholders than they will give you a feedback. Hopefully I good feedback. And next lesson we will try to define and make it perfect. Thank you again and have a nice time. See you on our next lesson. 48. Testing and Evaluating: Once you've completed your prototypes, you may start testing. And testing is the subject of this video, okay, this is the conclusion of your work done so far. And there are several ways to do user testing. First of all, goes face-to-face interviews, and there are third party services and then follow-up questionnaires. The most efficient way, of course, is face to face thing to use. You need to find your target audience, the representative of your users. Ask them questions, ask them to perform a task. You need to take notes, try to help users to think aloud, and you will be able to put down notes about what they think. You may use special equipment like I or finger tracking cameras. Then you prepare your reports and extract the necessary points for changes in the next iteration. Another way to do user testing is to use third party services. There are lots of them like user testing, plug-in for XD, surgeries, pyro type form, Survey, Monkey, user report gets satisfaction, huge response. Customers sure, ask nicely. There are many, many, many others the you may use for your user testing. And they have integrated reports. Some of them have free trials limited to versions. Of course they are paid features. You may choose the service according to the requirements of your test. The features that are necessary for test. Probably price also will be considered. And the other thing is to have follow-up questionnaires. You also can do it remote or in person. You may use Google Forms to craft your question years were you state the tasks and ask follow-up questions in the person after using prototype will reply you. We'll fill the questionnaire and you will be able to analyze once the test is finished. E-mail, of course, it's the traditional way to get some feedback from users depends on the type of questions that type of user testing you are doing. There are multiple. To work with a large audience, probably you need to select something that is offered by third party services. Like I said before, yes, they are paid, but they have this audience and you may specify the needed criteria to filter out people that are not your target audience. So let's, let's take a look at the types of testing. First. It can be in-lab or in-field, UMass Carson, to come to your office or lap and conduct interview there. Or you may do it in a field like outside and coffee in the natural environment for the product. Can be moderated. On moderated, when you sit near person and you monitor everything, did he or she doing ie put down notes as questions. That's moderated test. You may do unmoderated test. Ask person to use the website or app and wait for a reply. Can be in-person or remote. Okay. Your report should include background summary. It's the environment, the tools, day, time, maybe whether using these mobile phones, please put down this as well, because it's important for a mobile app design methodology that you use the list of scenarios and tasks and description of participants. Because you have scenarios, you ask user to perform some task that has to be in your report. So I will give you an example of user testing report later on. So next goes test results. You have to include it. It's a user feedback. It's a number of successfully versus on successfully accomplish tasks. Number of participants, time taken to accomplish each scenario. And your findings and recommendations like pros and cons and conclusion. So you'll find something interesting in your test. Of course you have to put it down. That's the purpose of this test to find interesting things, to get these insights, to avoid frustrations to improve, to define the Product_Type later on. Typical user test report or usability report includes a grand summary, methodology, test results, and insights. Background summary. It's the environment of the test where it's taking, what was the space, the equipment, if it's specific for modal, you should put it down as well. Also time and date should be indicated in your background. Summer. Methodology means that you include in your report lists of scenarios and tasks, and description of participants. So you have some specific tasks that you're a participant has to perform. Please include it. Because otherwise you won't be able to analyze the situation after user testing. Okay, next goes test results. Of course, without test results, you can go anywhere. And test results include user feedback. So you ask your participants to think aloud if he fills bit confused with navigation. Okay, you put down, tried to get as much as possible information from the user. And it's nice to have the number of participants because you will be able to compare results and to see the whole picture indicate time taken to accomplish each scenario in your user report. Of course, insights are important in report as well. You may find that there are some pros and cons. Maybe a participant will give you some ideas. Who knows? Well conducting the interview, try to ask the participant for a conclusion. What He or she felt well performing these tasks. And also write your own conclusion on the test. Considering all information that you have on hands, whether it's a high success rate or its low success rate, whether people were suffering with searching the specific item or was easy to find. One. Whether it's easy to navigate on app or it's hard to do that. You may test a specific module or new feature or a new service that's been introduced when current project or you may test all project. So here you may expand or shrink your user testing if needed. Once you've finished user testing, you are able to analyze the results. And it could be useful to group the findings into design and non design issues and start to implement those in your wireframes and your information architecture. Probably there are some other findings that requires changes in other stages of UX Design. Here's the example of user test report form. And you will see that there is you'll see that there is a description of a person that was questioned to perform to perform an action. And the table and the conclusion, you may ask for a conclusion, you may not. It depends on the on your on your test format. Okay. So here we have date seven August place, office equipment, Samsung, a seven, tools, lodge deck, webcam, scenario sign-up, success right from 0 to five, insides, pros, cons, and time taking to perform the action. I listed if three scenarios that user had to perform. These are sign-up, which user marked four out of five. So it's success rate. We discover that we need to add Vimeo account for authentication and time required for this action was 35 seconds. The other activity we asked is to find them annotation for stress relief. And it received five stars. But we have to limit the number of meditations to five in each category. Because having many meditations, bit confusing, sometimes grew time that require, that needed to perform this action was one minute and 14 seconds. Then we ask user to feel the profile information. It received three stars out of five because there are many types of data for a user to fill in. And we decided to split the personal data and psychological portrait to two sections or two steps. A2, user, two minutes and two seconds to fill all information and the participants conclusion is the following. I felt very savvy using this app, it's easy to sign up and start meditation. However, I would prefer to have email account for authorization and profile questioner seemed a bit long. Okay. So you collect this type of information from each of your participants and you may have other, the general report form where you include the highlights of your tests. 49. UI Design Section Overview: In this video, we're going to go over the UI design section, overview user interface, right? This is giving you an overview of different interfaces on different platforms, different websites, really giving you the other side of the UX, where UX is typically going to be more focused on the user experience. Sales funnels, customer journeys where the user interface is the actual interface that users interacting with, right? Layout, the outline of the website, the interaction, the interactiveness that they're going to be having as far as using a particular website, using a particular app, right, so let's go ahead and go over the U-I section overview. So in this section we're going to go over the UI overview. We're going to go over what you are, is how works. You can see here obviously from the image on the right, this is going to be the user interface that we're going to be working with in this particular section. It's about really understanding the interactivity of the users, how they're using the product, how it's laid out, how easy it is for them to navigate through using your product, the ease of use, and any kind of hiccups or roadblocks along the way. And then we're going to go over the common types of interfaces. We're going to go over several different types of websites, different platforms, and kind of give you an overview of the different types of interfaces out there in the marketplace. And then we're going to go over the landing pages overview. We're going to go over different types of landing pages, how they're laid out, the purpose of them, as far as what you want them to ultimately be used for, how you want to lay them out. So that it's very easy and simple for the user to come in and take whatever action that you're looking for them to take. And then the UI components, elements. And then finally the UI controls, right? So I'm excited for you to get started here on this U-I section. This section also includes a ton of different lessons in Adobe XD, we're going to be going over different header designs, common layouts, mobile and desktop. Footer design button design, input design, drop-down design, and all different types of designed for mobile and desktop functions. So we have quite a bit hands-on lessons in Adobe extreme in this particular section as well as the others. And I'm excited for you to get started and we'll see you on the next one. 50. UI Design Overview: In this video, we're going to go over UI design. So we've gone through UX design and all the different other lessons in the UX section. And UI design is really going to be about the user interface of the actual products, right? How the users using it, how they're navigating through it. And then being able to have something that is nice and easy for them to accomplish whatever task that they're looking to accomplish with the user interface, right? Because ultimately, that is what's most important, right? You'd think about a user interface for like Facebook. Facebook wants you to have a great experience. Facebook wants it to make it easy for you to be able to connect with your friends and family, be able to watch videos, be able to post different things on your news feed. And so that interface is making it. So it's a very easy and simple for someone to do so, right? So that's what we're going to be talking about here in the UI design. We're going to be talking about what it is, how it works. And we'll get into some very specific details. And then we'll look at UX versus UI. So let's go ahead and jump in here. So with UI design, UI interface, this is the process that designers use to build interfaces and software or any type of devices focusing on look, feel, and style. And like I previously mentioned, the designers are looking to create interfaces which the users find easy in pleasurable. They want to be able to come back to the platform, right? So just think about Facebook again. When you are on Facebook, it's a pleasurable experience. It's very easy to navigate. Yeah, they have quite a bit of updates, but for the most part, those updates are enhancing the platform, enhancing the experience, right? That's why they have billions of users. And so ultimately with UI design, it's all about the user and how they can easily navigate the interface. We want to make it super simple, super easy. Have a nice experience, right, for all of the users. And when we look at UX versus UI, UX designers are asking how questions, how can the user flow be alot more streamlined? How it can be a lot more structured? How can it be an easier process for the actual user? And then the UI designers asking the what questions. When you think about UX design, think about psychology, behavior and prediction, right? In that section, we went through quite a bit of behavioral psychology. The psychology triggers a lot of different influence metrics, a lot of different influence triggers. And we are looking to get people to take action, right? Find out what is the process, what is the flow. That's easiest for them to actually become a customer versus the UI is we want people to be able to read the information, to access it, to be able to work in it and use it and have it be very pleasurable experience for the end user. And the next lessons we're going to go over different types of interfaces. And we're going to also go over some landing page design. So that's going to be here for the difference between UX and UI designers. And we'll see you on the next one. 51. UI Design Types: In this video, we're going to go over the different types of user interface design types. So let's go ahead and jump in here. There's a ton of different user interface design types. And so what I'm going to walk you through here today is just some of the different types of interfaces you'll be experiencing that you'll be seeing in the marketplace. So let's go ahead and jump in here. So the first type of interface is going to be a corporate website. Corporate websites are going to be a big part in this because this is one of the first areas that somebody's able to look at a brand or a business, right? Or maybe even a product. When they go on to the website, they're able to see how that business is representing themselves right in the marketplace. So very important. And then sales in landing pages. And we're gonna go over some examples of those as well. And obviously, you know what the sales and landing pages are. We have the sales page that is driving actual traffic to make a purchase. And the landing page is typically there to drive traffic and actually connect information, right, collect that lead. And then we have different promo pages where there's some kind of discount offer or a promotion that's telling people, hey, 20% or 30% off. And it's very much so for specific types of sales. And then we have e-commerce. E-commerce types of websites are very unique and customers well, big player in the game, a Shopify, however, a lot of websites are also custom-built as well and they're designed with the user interface in mine, right? Understanding that the low of the user, how they're using the website and the ease of use is going to be very, very important. So e-commerce, you're also going to see that quite a bit. Also in the SAS based software as a service, you're going to see this interface quite a bit. You look at different software companies coming out of Silicon Valley, the Seattle area as well. And then really any kind of software company in general, there are going to have typically a very unique user interface. And then we have mobile websites. When you're looking at particular websites on your phone, it's typically going to have a different interface than if you're doing it online right through your desktop to a tablet. So, so it's really important that especially on the mobile websites, you're able to make it super simple, super easy for the user, because if you have too much stuff all in one place or it's all jumbled up, then it's going to make it so that they don't want to interact with the business or the website using their phone when the phone is pretty much used the majority of the time now, right? The majority of traffic is coming from mobile direct. So very important to understand mobile websites, the user interface of that, and how to make sure that it's easy to use for the end user. Okay, so let's take a look at some of the different user interfaces here. So we have portals and social media. So as you can see here, the content hierarchy in the layout here is very straightforward, very minimal design here, very content heavy. This is optimized. You have different languages, you have typically like a search feature. So you can find different articles, different videos. This is typically going to be the same for like Facebook, also for like Pinterest or any of those social media platforms as well. And then we have the corporate websites. And this is going to be very custom here. However, it's going to be consistent with the branding, the color schemes, right? And then a very powerful above the fold. And we're gonna go into that in another lesson exactly what that is in the power of that. And then represents areas of expertise, right? You have to like hear about section. You have your services. And this can also just be one-page. You can have all of your services, your about us, your contact information all on one page. However, larger organizations are just where I would say even just modern organizations and businesses in general are going to have multi-page websites, right? As you can see there with Honda, they have a very easy user interface here. They have the search on the very top right, then they have the menu on the left. And also Sony has a very nice user interface as well. To very easy get the logo at the top. You have the menu at top right as well. And it's just super easy to navigate. You gotta video there. So when you look at different corporate websites now, what you're going to notice is a big picture or a video in the very beginning, right? And then below that you're going to have the different content. And so that's typically what you can expect with corporate websites. And then we have the sales in landing pages. Sales and landing pages are going to be typically, you know, making sure that you navigate through the page with ease. There is a nice flow to it and there's consistency with the branding action focus getting you to take an action either to buy or to put in your information and is typically going to be one page would scrolls right? You're going to be scrolling up and down that page. Typically heavy on contents for a sales page because there needs to be a lot of convincing for you to take action or to buy, right? So there's a lot of engagement elements. And especially if you have a sales page, you want to have the safety and security there where you see over here on red facts.com. They have Norton secured. They have the warranty or guarantee. They have authorized.net because they want you to feel secure making a purchase through their platform, right? And then the next one that we have is the promo pages. This is going to be typically for new product, for any kind of special promotion. They're typically going to be a lot of different animations, graphic heavy, cutting edge web technologies usually. And it's really going to give you a memorable experience, right? You're going to come to this page. It's going to pop out that Jim, it's going to get you to remember it so that if you don't take an action when you land on that page or you don't buy or whatever it is that that page is wanting you to do, right? It's going to be remembered, you're going to remember it, it's going to be in the back of your mind because of the unique design and how it's laid out. And then we have the different e-commerce websites use. You're going to be very product-focused, would like a search query with very little text, right? Because you're not trying to have a blog on here or anything like that where you can. And the thing is that we're not really trying to have a lot of text on here because your main intention here. To sell a product, right? It's a good product out the door and you want people to come here and buy. And so this is very much so going to be full of different products. It's going to be easy for people to be able to buy the product at the cards and go through those different micro conversions, right? To ultimately making the macro conversion, which is a purchase, right? And then we have the SaaS, which is the software as a service. This is going to be a little bit more unique and complex. However, it's going to make it so that it's very easy and simple for the user. They have a lot of simplicity in our navigation. A lot of different colors schemes based on the branding. And it's going to be mobile friendly and the majority is going to be above the fold, right? And just keep in mind, these are going to be typically a lot more sophisticated, a lot more complex architecture. However, the interface is going to be very important here because people are going to be typically paying for like a monthly fee or maybe paying on an annual basis or maybe you onetime purchase, but typically a monthly fee to be able to use the software. There's going to be hundreds of thousands, if not millions of people using the software depending on what it is. And it's going to be important that it's easy to use and it has a nice color schemes, what the branding and it's ultimately a pleasurable experience, work within the interface. And then we have mobile websites, right? This is something where you need to be very, very aware when you're building a site or if you've done any kind of web development, you want to make sure that you have the ability to look at how the site is going to look at in a mobile version. Because a lot of times websites will get built and, you know, landing pages will get built, you know, sales pages. We'll get Bill and then you look at them on the mobile phone and they're completely off. So you need to look at and make sure that the size of the margins of the elements are all correct, that everything fits on the phone, fits on the screen. We want to look at the font size, different orientations, that differences in device, right? If you have a Android phone versus a mobile phone, do you have a tablet, right? How those Rog warranted look on those devices is crucial because you want to be able to make it so that there's very little difference between them going to the desktop or the actual phone is just, the phone's going to be a little bit more of a condensed type of view, right? Type of interface. So very important to keep that in the back your mind. And a couple other things to be wary about as far as the mobile features. You want to look at the swipe functions, the additional different multi-touch functions, and also the touch and hold right? A lot of different apps, a lot of different software programs out there. Different websites are now having these features already set up within them, or they're being created with these functions and features in mind. So that's just something to be aware of, especially on the mobile devices. So that's going to be here for the UI design, design types. And we'll see you on the next one. 52. Landing Pages Overview: In this video, we're going to go over the different types of landing pages and the different types of user interfaces that all of these different landing pages have. So this is going to be something where we're going to walk through several different landing page designs. I'm going to show you how they're set up and why they're set up a certain way. And the different user interface factors that come into play with each type of landing page. So let's go ahead and jump into the lesson. So the most common types of landing pages are these right here. You have your squeeze page, which is a lead generation type of page. And then you have your lead capture page, which is obviously there to collect information and leads, and then your sales page there to sell a product or service, whatever that may be. And then the thank you page to let you know that you have successfully ordered the product or the information that you who requested has been sent to your email or you can download the product or whatever that may be. Write a thank you page. Oftentimes is great for being able to direct the audience to the next step in your funnel. And then the 404 error landing page. This is a page where if somebody's going to one of the pages on your site and it no longer exists. You want to have a 404 landing page there. And you want to have some specific content to be able to use it to your advantage. And then we have finally here the webinar registration page, especially now where a lot of the training and a lot of the meetings are being held online. The webinar registration is going to be something that a lot of different businesses are going to start implementing quite a bit. So let's go through each one of these individually. So squeeze pages. These are often shorter, simpler and contain very little text and very little images, just something short, sweet to the point. And oftentimes these are going to be pop-ups where you go to a website, maybe you're reading a blog or whatever, or you land on the homepage, you'll see a pop-up that will show up on the actual page. And it'll give you the option there with little great x. You can see by the weight text, this one here is telling you to wait to don't leave because it's noticing that you're trying to leave the website. And so it's telling you, hey, wait, you're going to get this here for free. All you have to do is putting information. So these are the squeeze pages typically going to be very short and sweet. Oftentimes it doesn't even have this much text is just hey, get your copy of this or Hey, get this particular ebook or download or whatever that may be. And it's going to be typically in a pop-up. Okay, so let's go over the lead capture page now. Lead capture pages are the most widely used throughout the marketing funnel because they are a bit longer than a squeeze page because they show you and tell you what you're going to be getting, right? What you're going to be getting as far as an ebook download. The benefit of that, maybe other people that have benefited from the actual ebook or the products, right? But they're not Islam as a sales page where you got to have a bunch of different sales copy, a lot of testimonials, social proof frame. And so with a lead capture page. It's really important to have a good balance between the ask and the reward on the page you're asked is just going to be firstName, lastName, and then an email a lot of different times depending on the type of landing pages you're building up. As far as the lead capture page, you may want to collect some information about the user as far as their phone number, maybe their address, right? Just think about for like real estate, you may want to try to get their credit score, things of that nature that's going to be relevant to that specific market. And so you can see on this particular page here, they're doing a little bit of selling as far as why you should download this ebook, why you should now know this checklist here, right? They're telling you that you're going to get this. This is why it's important. This is why you should download it. And they're giving you a little spiel there, right? So then let's look at a sales page now. Now this is going to be the one that's actually driving the sales, the purchases, right? The one that's going to require a lot of copy, going to be typically very long or depending on how long you want to make it. But it's definitely going to have a lot of different elements such as social proof, right? The testimonials, you're going to have a lot of copy. You're going to have a lot of different bullet points. You're going to really sell the product, right? Because this is where you really want to let people know what exactly they're getting, right. And on a sales page you can have a video and it all depends on the size of the offer, right? So you can sell a product for up to $50 with a nice and simple sales page, right? But if you're trying to sell a product for over $1000, right, then you're going to need to do some sort of Webinar or virtual sales letter where you have a video that shows them what they're going to get. And then you take them to another page, which is the final sales page for them to actually pull the trigger. But for the most part you're going to see a sales page that is going to be persuading you to buy the product and it needs to convince you, write all through the words, write the copy. Why you should buy the product, why it's in your best interests and why your life will be better after you buy the product, right? And so the length is typically going to vary, right? You can have some that are short, you can have some there are several different pages, and it's all typically based upon the amount of information that you need to be able to explain the value to the end user on just like I said, right on why it makes sense for them to buy, why their life is going to improve by having your product, right. Okay. So let's go over the thing. Q confirmation pages. So thank you. Confirmation pages are going to be great because they allow the user to download the product, to get whatever it is that they actually opted in for and put in their information. But then also it allows you to tell them, hey, go here, check this out, go to my website and look at this particular article, or go check out this link, this video, right? Whatever that may be, you can easily direct him to another source of information from your website, maybe another product, whatever that may be, right. Once you get them to arrive at the thank-you page, you know that they have either bought something or they've downloaded a product or the downloaded. Sort of chichi guide or ebook. And so there are hot lead. Okay, so let's go over to the 404 error pages now. These are also extremely powerful here. Obviously, you don't really want to have a lot of these, but, but oftentimes you'll have a particular link or you have a particular article or a page, whatever that may be on your website and it's no longer there. However, when you have people land on these pages, you want them to be able to be working for you and not against you, right? You want to have some sort of humor in there. You want to let them know, hey, listen, this page is no longer here, or for some reason they got lost in cyberspace. But I know you're still interested in doing X, Y, and Z. Hey, check out this resource over here, or check out this resource over there, right? So you want to be able to acknowledge the, hey, this page is no longer here, but hey, here's another page that you may find interesting, right? So it's a great way to make it so that you understand that this page is no longer here, but here's an alternative that you may find useful as well. And then finally here we have the webinar registration pages. Now, these are becoming a lot more popular in the marketplace because a lot of training has been done on line now as far as even with teams, a lot of different products and services are being sold online, all through online zoom presentations and videos, right? So these are typically going to be pages that have a users sign up for a free training, typically 45 to 90 minutes long. And in that training, the users or walk through a process, a story, a type of scenario that shows him, hey, you can do this too, right? And so it goes into the backstory of the individual. Maybe it's the company, it shows them what they can do and is essentially providing value up front for 45 to 90 minutes, right? If you remember the Reciprocity principle, right? You're getting all this free knowledge, all this three value for an hour and a half, you're going to feel obligated to do something in return because you got the free information at no cost, right? And these are going to be best for digital products or services ranging anywhere between 497 or 1997. And at the end of the presentation, they typically have a order checkout page where you can actually make the purchase. However, for different products that are high ticket, I would say over $2 thousand. Then this is where you have this presentation here. And then at the end of the presentation, you have a ability to be able to book a calendar, booking slots, to talk to one of the sales reps. And then they'll typically gets you on the call and look to have you and invest into something typically over $2 thousand, which is going to be like a one-on-one or a group coaching type of program, right. Where they walk you through everything step-by-step and they hold your hand. So that's why those are typically priced at a higher price. And so these are going to be some of the most important types of landing pages that you run across in your career. And like I said, the webinar registration page is one of the most up and coming and popular ones in the marketplace today. So that's gonna be here for the landing pages and we'll see you on the next one. 53. XD Lesson - Using Grids in XD: Hi there, arteries here. And today we're gonna talk about grids. Grids are very important. They are important for desktop and mobile design in more welds and we have two options. The first option is my choice. So it's 124 column grid. For mobile and for desktop usually use 12-column grid. So let's discuss the mobile layout. First of all, here we have two options, as I said, and one on the left, which is 12-column als us line to adjust elements more carefully than in the fourth column grid, which is more rigid so to speak. And you see most sizes are quite ok here though. It's one for two seconds, 1 third, and so on. You may use both 1214 agreed upon U, I usually use 12-column grid because it's easier for me to arrange elements inside small areas. We have just this area in like to align several elements, like icons, for instance, see, you may have more options to attach these two. Greed. Although here, the fourth cone greed, you also have this chance, but you will have more difficulties. Here you see, you may discuss the first mature front-end developer with your stakeholder, which greed will be better for these design. But most cases designers are those. We're deciding which greed will be used in this and that project K. So what is the grid for? First off, it's to align elements properly. Let's say we have contact form. Let me grab when, say we have several sections which we would like to have on our screen, the dashboard. You see we have option to make the capacity more. And if we want, have the create, we can arrange modules. And the way we will like to, but that won't be correct. So you see the greed allows us to create correct mockup. So it's easier to read a C here. We won't have agreed. We will be able to arrange our blocks are randomly. Right now when we using creed, we can have the same spacing, same margins between the objects horizontal and vertical. So what is the grid for? Again, the purpose of greed is to create a correct mock-up, correct, in terms of positioning, alignment, distribution. So here you see we shifted a bit baser here, spacer there. And we have the sidebar, which. Close to two columns. Each block takes three columns and the spacing is equal between them. So it allows us to find the proper object, to read the title, and to start to interact with the module, we need to see liquid till it, this one. And it's easier for front end developers when you have grid and you work with the great correctly. So your elements are aligned properly, straight to the line. Again, in terms of mobile design, as I said before, you may choose between these two options, although the offers for column grid as default, I'm not sure it's the right way. I didn't used to 12-column grid. And I'm trying to work within the 12 columns on the mobile layout as well. Ok, let's turn to the adjustments of the creed in x D. So you see you may have the square or lay out square shows you just pixel grid. You may adjust the pixel square size. So one square takes 15. Okay, let's go back to the art creed. You may select the color of your agreed and the capacity. It's very useful when you don't want this to be interfering with your design fit. Take down the capacity to 0. You see they're only guides, shown very useful feature. And next adjustments are the number of columns, gutter width column with and the margins. So gutter will the spacing between columns, column with it's the size of the column. The margins are those whitespace on the left and right respectively. Again, you may adjust your grid to your project right on the go, but be careful, do not change it once you started other pages because you are not allowed to have different layouts on the pages. So you may create different with your content area. Few wish to say you have some content text-heavy website like medium. You want this section to be on the center of the screen. Let's say you want to have more spacing between elements when you are working on a complex dashboard or its artful website. So you may adjust these to your needs. So no worries if you change the default values here. K, again, try to do your best to adjust the, we're just showing the colors so it's easier for you to see. Try to avoid such placement when nothing attached to agree. So the, your block goes out of the column, tried to shrink the element. And inner elements also could be aligned to the Read Me. Now you see we have more organized UI and when you want to create another which will have other data here. Other data here, maybe different purpose. But you will already have the measures that will help you to create a consistent design, exactly as in the other blocks like here, here, here. Okay? Try to put more attention to the alignment because it's really hard for front-end coders to guess what you exactly meant, whether its mistake or it's by design. So try to keep your mockup attached to your columns, to your greed. Thank you very much for your attention. See you on our next lesson. Bye. 54. XD Lesson - Single Card design: Hi there. Today we are going to work on the card design. So for car design, we need to know several things that are necessary for the card. It's the card specification. So if you work with the e-commerce, if you work with it for delivery, flower delivery, any other catalog based design or project, you may request. We're already received specifications about the cards from your client. We have photo or image description, price, Add to Cart button, special label. And this is all for food delivery. So you understand, okay, I already found a very tasty pizza with salami and salsa here. First of all, let's decide which space we'll take our cart on, our lay out and we have greed. First, let's decide which space we'll take our cars, k, how big or small with the card. So let's start. The starting point here will be the image as you already guessed, K. So the products, the items that are sold via internet, you will decide upon the the size of the image of the photo because sometimes there are small things that you have to luke four to zoom were the small photo is enough for specific object? Let's say we want use the small photo of pizza because we won't be able to see what it's like. It's not tasty For us, in other words, okay. So I will start from three columns here, but you see there will be a wide huge cards if we will make it like this. Ok. So now you see that one card with such a huge photo, almost 400 pixels. Be very nice-looking and sums of image and ability to see the exact contents stopped the pizza. So let's try to shrink a bit our cards and to see whether we can use to columns and see. Not that good as I would suggest to have. Perhaps I will decrease it like this. I think three rows is enough for us like this. Let's see which greatest more appropriate here. Maybe we can adjust the Creed so it fits our o to k. Our photo is to 324 pixels. And let's try to adjust the rate. I adjusted the grid so it's closer to what we need. The parameters are the following, so it still has. 12-column grid, column width is 73186, margins from the left and right. And now we can delete the breast of the photos. You see the distance between the columns is almost the same then the column itself. So we have very nice spacing and differentiation between the blocks between the cards that we are about to design. Okay, so now let's go to description or we forgot the title, heading, titled, name, name. Let me delete the numbers. Sometimes the quantity in stock is also indicated. That makes the process of design these card more challenging. Because more elements, it's more, more questions, more troubles, and so on. But I will show you a couple of tricks that you will be able to apply in the simple cart design. And then they're very helpful for you in your other challenges that you will undertake and your UX per year. So the name, let's write the name salami description. Depending on the type of the product you may add or may not add. The description sometimes depends on the type of product you're selling. You're showing k. Here. I feel that it's quite appropriate to have. What else we have named description price at Cart button on special labeled. Let's make a bro prototype. Try to avoid such values like 218. So this is the card button and simple. So let's talk about the layout a bit. First of all, why I put these elements in that way. We're not the other way like this or like this or any other way. So happens for me organically like automatic. So because I already stocked and faced the troubles that occur when contents is made may change your cart and you facing lots of troubles. First of all, the space for your name has to contain please two lines because your content may change. Okay? So, and here you have the alignment. Once your name changes to one line, single line, that will be perfect for you because it's very well designed, balanced, okay, the price may increase, say we have 9099 and it goes closer to the center. Okay. So whether you have 5, $0.05 euros, five dollars, it has these space to expand. So it has these area for expansion c, this one, the name, it has the expansion to this place. And try to not interfered These two, let me change it to this one because it's not necessarily. So let's reduce the section of price a bit k. So you may see the prices here, titles here, and the rest will be transferred to the next line. Of course, you can't predict any case, any scenario. But here you may add two or three lines for a sample of description and put here and add one line for any case to see how the cart will look like. When descriptions longer, Gary, just add a safe area that will allow you to kill another line in your description. Although most descriptions have two lines, please be careful and tried to predict some outstanding scenarios and add a small space for another additional line. In the cases where the description is much longer than this one, you may use hover effects. So the hover effect will help you to expand your description if necessary. Please remember that, just keep in mind, it's simple. Let's try another content. Second card. Let's say it's o Salomon and of a cat or pizza. You need to show different states of your car, any content and general. K. The price. If it goes to the left. Same here. Whether you want will opt the button when the content has missing, I'm in when there is two lines of the description, See there is dynamic and also please remember about 0 state or 0 case. Because sometimes there is no description here, may predict this scenario to and create the design for the product which doesn't have the description. Because sometimes looks very blue, looks like. This, it really disturbs my eyes. And let's go back to our specification. Photo image name, description, price, Add to Cart button special label. We need to create a special label. So here you may use some sort of tracking. Diagonal. Tracking diagonal will help you to find a better place for the labels. Labels will be some sort of checkpoints for user i to bring it to. First of all, to the price next to the bottom, adding to cart. Right now I see that this place is more appropriate than this, this corner because the traction will be quite tray here by diagonal. Let's place sale. Maybe sailed made me knew, maybe bestseller, it may be out of stock, need be fresh and eco friendly, so on and so forth. Until it. This is a medium fidelity prototype with, you already know that all this things will be defined. You will change the font here. You will add some box around the exterior, connect the text area with photo. So it looks like the one whole thing. Sale. Please create several labels like best, best seller. So in perfect case scenario, you will have the default card, the card with the label, and the cart with a label without description. Okay? Please consider these different states, different cases. The content is flexible, the candidates dynamic. Please prepare your mock-ups design elements for these cases. Because sometimes when you already pushed your design to production, you will see these gaps. They will occur on the stage of content management when people will add the actual content that we'll see these gaps and you will be able the one who will be responsible for fixing this mistakes. Okay, so we were careful. Please keep in mind is that the concept is dynamic and try to test the different length of your title, different length of descriptions, images could be offer different scale, different proportions, but just try to consider a very case that can happen and be prepared for this because it will be a less painful to do it on this stage rather than doing it on the stage of visual design and when decoding spreading. Okay, thank you very much and see you on our next lesson. Bye. 55. UI Navigational Components: In this video, we're going to go over the different types of navigational components. Now this is something that you are typically going to be seeing at the top of a websites or top of application where you have, let's say, different search bar components, different types of menu bars, right? So let's go ahead and jump into the navigational components. Ok, so the most common different types of navigational components that you're going to see either on a website or application or any kind of software that you're using is going to be the search bar. You have breadcrumbs, pagination tags, slider, different icons and the carousel. So let's go ahead and dive into these a bit further. So the first one here is the search bar, right? And this is typically where you have the ability to search on anything on the website there if you want to find, let's say an individual, if you want to find a certain article, certain blog post, or a certain piece of information. This is where you're going to be able to use the search bar here. And it provides a ton of value for the end user because they're able to find something very quickly, right? If they're on, let's say YouTube, right? They want to be able to find a specific video by going on there and typing in certain keywords, certain names right? In. It's going to be oftentimes very simple and easy for them to find what they're looking for. The next one that we're going to cover here is the breadcrumbs. This is essentially some kind of line that is showing the current path to the actual location. So you'll see here, we have the home, then we have a forward slash About Us. And the forward slash is really the breadcrumb because it's showing you the hierarchy, right? You have at the very top, you have home, and then you have about us under that. And then under About Us, you have history, right? And it's showing all of the different levels within that particular section. And then the pagination here. This is where you can look at the very bottom, let's say, of a blog or particular news publication type of website where you can look at all the different pages and even current pages that the website has content on, right? So this is a very simple type of navigation to create and set up. It's just looking at the previous post and then being able to get up to date to the most recent post, right? And then we have the tags here. And this is typically going to be the lowest level of hierarchy to finding precise content. Because you can easily just go to the search bar, typing what you're looking for there. You can type in like different tags like UX design, branding, whatever. However, for the most part, the easiest way and what people are going to be typically and commonly using is just the search bar and also the header navigation in the menu to be able to look up exactly what they're looking for. And then we have the slider. And this is used to set value of arrange or values and in particular given set. So it's typically going to show you like, hey, this is the target audience between, you know, 25 to 45, or it's showing you, you know, what you prefer. Or here at the very top, it's telling you to set your pets weight. Twenty-five, up to, let's say a couple of a 100 pounds or whatever. Or if you're in kilograms, obviously that's going to be different. But this is typically going to be something that is shown horizontally. Because if you do it vertically, it's going to take up a lot of space and it's not going to look very well. So this is best laid out on a horizontal type of layout. And then we have the icons here. Icons or one of my most favorite here because they really give you an indication of what is that particular area about, right? Like if you look at the very bottom there, you have an e-commerce, legal and compliance. You have a nice little icons there with the texts under those. And they really give you a great indication of what that section is about. So I like these a whole lot. There's obviously a bone to different types of icons and different layouts. And the great thing about these also is that you can lay these out in a vertical manner or horizontal as well. And they're both going to look fantastic. Obviously what the vertical, you want to have smaller icons so that you're not taking up too much space, too much room. However, what the horizontal ones, you can make them a lot bigger, just like we have here at the very bottom with the e-comm, legal and compliance, and then the finance and banking. But they work fantastic. They look great as well. And then we have the carousel. This is typically where you're going to see a portfolio where you have a lot of different projects that you've done in the past. Maybe different artwork, different photography. That's going to be best for. That's where you can make it. So that's clickable. And let's say somebody's on your website and they're looking for your portfolio. You can have a carousel there that allows him to see different images if I'm projects that you worked on and then they can click on those specifically and get taken to a specific page that gives them some more information about that particular project. Okay, so let's take a look at some of the different factors when it comes to the mobile specs here. Okay, so remember, when you're designing a web application, it's important for you to understand the differences with different fonts, different elements, and the size that is going to be required on a desktop versus a mobile, right? Because it's going to be obviously completely different type of layout, user interface for a mobile phone. And you need to be able to be aware of the difference there. So that if you have a very nice-looking application that works well on desktop, but it may be falling short on the design on the mobile specs. You need to keep that in mind at all times. And some of the key factors that you want to keep in mind here obviously is the font size, different elements, different forms. If you have like people filling out applications and overall the layout and design as well so that you're able to maximize the amount of space that you have and you're not carrying it all jumbled up. So it's easy for the person to navigate. Because remember, mobile phones are essentially the leaders right now in traffic sources. And so that's where the majority of traffic is going to come for websites applications. And so we want to make it as easy and as simple and as smooth as possible for these individuals to be navigating the application, that website, whatever that may be right through their mobile phones. Let's take a look at the mobile specs a bit deeper. So what the font size here? We want to make sure we have at least 16 pixels and then also increase line spacing. You can see here on this image to the right, this is a fantastic type of user interface. They're nice, design, nice and simple. You don't have too much, they're going on. And then also the size of an elements, at least 44 by 44, so that it's not too big, not too small, but it's very easy to look at and to navigate through. And then the heatmap, This is where you're obviously going to be looking at where people are clicking, where people are actually spending their time, if they're spinning at a time on, let's say, reading articles versus on a particular page, you want to be able to look at what are these individuals doing on their mobile phone when they're using my application, when they're on my website, right? So very important there. And then the forums, right? If you're having some sort of application that has people fill out their information, you're gathering or you're having people sign up as a user, right? Creating a username, having a password there. You want to also consider having a heatmap on here and make it so that it's nice and simple, right? This is where they have the entire page essentially as the actual form that that's all that there actually focusing on, right? Because just think about having a form on a particular website, landing page or whatever, right? And you have that form that is just on a small piece of that particular website on that layout for the mobile phone, right? It's going to be very distracting for the user. So you want them to click a button and take them to actually register so that that's all they have in front of them so that they can focus on just doing that and actually sign up, right? Less distractions. And then let's take a look at some layout grids here. You want to preserve readability. You want to have more air in space, right? You don't want to have things jumbled up. You want to have three textbooks for a column, five items per row. Consider having a framework that's specific and custom to what you're looking to accomplish here. But this one right here, you can see from this mobile phone here is great because there's not too much stuff going on there. It's very easy to look at what is going on there and what you can choose, what you can select. So really think about the different layout grids and the specs on that. Okay, so let's take a look at the mobile specs here for an Android phone, right? Because they're going to be a bit different than like a IOS, Apple phone and various other phone makers out there. So for mobile portrait, these are the different specs you want to keep in mind. Same thing for mobile landscape, a portrait for tablets, and then a landscape for a tablet as well. So when you're designing different elements, different components, right? You want to keep these in mind for the Android. And then here it is for the iPhone, you wanna make sure you have the column and 16 margin. And then for the iPad, you want to have a column and 16 margin as well. And then obviously you're going to have a different orientation for the iPad landscape and then also for the desktop layout. So make sure that you have a understanding of the different layouts, the specs, right? When you're creating different applications, because for the majority of the time, when you're designing or creating different applications that are going to be used pretty much exclusively on the phone or on portable devices. So you want to make sure you have the right specs, the right types of columns by types of margin, so that they show up nicely on the proper devices. And here are some specs for the Bootstrap. You want to look at phones at our 768 pixels or the tablets. You want to look at 768 pixels, 15 pixels on each side of the column. Again, this is something that you want to be able to look at and use and navigate on your own. I'm just giving you here some different specs that you should keep in mind. And what you can do. A lot of times it's just go on different applications, different websites, and look at what are the current trends, right? Look at the different reports and essentially be able to emulate how these guys have laid out their current designs and be able to look at, okay, what are some things I'm ideas, some different frameworks that I can take away from these individual, from these different applications, these different designs. And then I can use in my own designs as well. And then finally here we have the user guidance. And this is great for new users introducing a new feature updates in a user interface. And so this is typically what you're going to see when you have somebody come into a website that has different contents, different types of information where you want people to sign up, right? Or it's perhaps a service that is for free or maybe paid, or maybe they have a free version and then you can upgrade. You wanna make it nice and simple and easy for them to sign up, input their information, and be able to sign up as a user and be part of that particular website or software application. And so that's going to be here for the UI navigational components. And we'll see you on the next one. 56. UI Controls: In this video, we're going to go over the different types of user interface controls. So these are going to be different things, such as the drop-down field at the top of the header navigation, things like different buttons, different checkboxes, different toggles, and a bunch of other different types of control. So let's go ahead and jump right into this here. So the most common types of UI controls are going to be the text fields, the drop-down, perhaps a radio button if it includes that as well. Different buttons in general, a checkbox toggle and then the day in time picker. So you can take a look at this here on the right-hand side, kinda get an idea as far as how this would look. This is typically going to be with different software or different types of programs. Where, let's say for example, you have like a audio recording software or program. This is typically where you're going to see a lot of these different buttons on there, like the radio, maybe lack the power on or power off. So this is what you can expect a lot of times in the different types of program applications. If you're interested in taking a look at perhaps a really nice user interface for an audio creation application, then I highly recommend that you check out Fruity Loops. It's actually a program. You can make beads, you can make music, and it has a really nice user interface. And do they give you a good idea as far as what I'm referring to here, as far as the control. So the next thing you should keep in mind here is the text field. And this is going to be nice and simple for just having your text there and is often just going to have a place holder. So nice and simple here for the text field. And then the dropdown. Lets say when you are on a website and you see at the menu up there at the very top you can see portfolio for example. Under that, you're going to see the dropdown and you're going to see that, say, a portfolio of photography, portfolio of web design, portfolio of different applications, right? That's how you can think about the job down. It's going to be where you have like a header navigation. You have a particular subject. They're like let's say services, right? And then you're going to have under there different types of services within that particular label. The next one that we're going to be looking at is the radio button. And this is typically going to be on a software application where you're working on it and you're creating different digital type of products, different digital type of media, such as videos, such as audio. And this is where you're going to have the ability that just click on the little button there. And it's going to be able to be turned on, checked on, or disabled. And let's take a look at some of the most common ones, which is the buttons that you typically are going to see on the majority of websites, the majority of different applications. We're more often than not, the buttons are going to have some sort of call to action where they're telling you to buy here, Add to Cart, learn more, Get a quote, right? And within the buttons you can sometimes have like an emoji. You can sometimes have like a icon that will really bring out the button, as well as having some JavaScript on the button as well, making it stand out more by also being able to have an interactive, have different color schemes at some shadow 2-way array. There's a lot of different things you can do with buttons. And I love working with buttons because it's really what allows the user to take the next step in your landing page or your sales page, right? Because when they're on that particular sales page, for example, they're looking to buy your product and you want to have that button there. That's super easy, super simple for them to click on, right? And it stands out. And it's really letting them know that they need to click on this button. And it's really capturing their attention right? Here's some additional type of controls as well. We have the checkboxes here. These are typically going to be in different user interfaces as well. You're typically going to see these like in some sort of questionnaire, maybe like some sort of survey type of software. One of the softwares I can think of up top my head is like the Survey Monkey, where you can essentially gather feedback from your customers or where companies can actually send out surveys to their actual customers and get that feedback. Oftentimes you're going to see this in those types of questions where it's multiple choice or really just anytime that there's some sort of questionnaire, okay? And these are always going to be best laid out vertically. You don't want to have these horizontally, right? Because it just does not look good. And so make sure that when you are adding these, you have them laid out in a vertical manner, okay? Then we have the other ones here which is the toggle. These are also going to be fantastic for leg on and off. This is where you're mostly going to see this. Again, this is going to be like in the music production type of software applications. A lot where you're turning something on, turning something off, maybe like an online radio as well. That's where you're typically going to be seeing this. And then the UI controls as far as the Date and Time Picker as well. This is a nice layout here. You can see there's oftentimes on different blogs. You can have this on, you know, particular websites. However, this is mostly going to be seen in like different project management applications, right? Because you're able to have a bird's-eye view of the actual month or even the actual year in it's typically going to be like a drop-down. However, just like I mentioned, this is where you're really going to see this is in the project management application space. Another thing to keep in mind here when it comes to UI controls is really understanding the grids because this is going to give you a really good idea as far as the readability and the accessibility of a particular application or website, right? You want to think in terms of the grid so that you have the content laid out in a precise manner that's following these grids. So it's easier to digest, easier to consume, and it's a pleasurable experience where things are not all over the place, are not, you know, jumbled up. It's all in a very precise manner that leads it. So the users are able to consume the information in a pleasurable manner and have a great experience. So that's going to be here for the UI controls, and we'll see you on the next one. 57. XD Lesson - Mobile & Desktop: Header Design: And this lesson will explore the component of the most UIs where user interfaces that scold header and we will discuss types of layouts, also will explore a bit the mobile version for header. Okay, let's start. First of all, why the header is important? It's importance is due to the it's a fixed position elements which will present on each of your pages, screens, or other types of windows and user will see it all the time. So that's why the properly factored header is very useful to the user experience and user interface design. K, with the help of header, we are able to guide user. So we'll serve a purpose of navigation, like sort of top navigation. And we also may guide a person to his or her personal account, to the cart, showcase the phone number for instance, or highlight some specific cultural actions or other elements that are important and will be important during all the session of visiting the website or mobile app. Okay, so let's describe of types of navigation. So let's imagine this is the logo. Usually logo is placed here or in the center, in the middle, depending on layout you choose. But let's start from more traditional way. And logo is usually here. So it all came from newspapers there, where people read the newspaper from top-left corner. These rules are came from newspaper printing cell this why we usually use logo on the left side. It's more traditional approach, but sometimes we may see centred logo for header. Okay, let's create a notification. The About Us Services and contacts. Ok. So in this case, the header will serve the function of navigation and grinding, okay, or the orientation. So sometimes the responsive mobile first approach makes devices look this way. It's a burger menu. Placed usually here. There is a mentor. It conveys a dropdown menu which serves the same navigation function. That is, hide it behind the icon. In my view, if you have the space for placing your menu, in this case to help user to find his or her way easily. Ok. So this requires additional effort like click on searching for a specific item Category and then going there. So it's much easier to just click here, and that's all. So for Mobile, I would suggest you of course, to use something like this. It's the traditional way. Nothing fancy. Because we don't have much space as we have on desktop for placing various elements. So usually we may break these section to four parts. And when it comes to four or more 56, it becomes very hard for people to read. So I suggest you to stick to three maximum for groups of elements. It can be a logo that's also grouped. Burger menu and Account section could be placed here alongside with the cart. So they are a little closer to each other rather than menu logo. Okay, let's try to add two sections for count and for card. Let us see how these pages, these links could be implemented in such a small screen. Okay, I'm drawing a row design. Usually we have a contrast here, we adding contrast by we, I mean designers. These elements are there, It's Kerala categories or webpages. A go here. Please be careful size of the font using on small devices. So if you have only three, you may add round seven items in 27 pixels Font. Okay? So this is just for you to predict some scenario if new pages will occur, how will you manage how the system will manage this update? Right now you may have three placing on the centered top, lower bit may do like this. Just shorting the menu. Let's try and see how our prototype will look with drop-down menu. Char. C, quite easy. And in others asked to add more items if necessary, because usually websites, apps, the changing and you have to be ready for this. Okay, let's go back to our groups. So we have three groups here. One serving the navigation function, logo, it's the branding. And here we have also functionality, a group, these two together because it's more or less balanced composition, just the color a bit and the size. And perfect looking header. Besides the menu, the navigation, the account settings, the cart or other settings or other sections. There also may be a search function. A search function also may be hide it behind the icon. Once you pressed on search icon, the input port is expanded and then you are able to type your search query. Sometimes the search bar is already here. So you may design a search bar like this. Here you may consider the work is done for search bar because once a person will click on the search field, decay Bard will expand to Android or IOS system, will show that the letters alongside with the Enter button. So here we don't need any other elements. And more than that, we replace one element here, like Go or button like or arrow that shows some father process to proceed. The information means that we will make reactions, which is first of all, we are clicking on the search bar. Then we type the choir here somewhere on the keyboard, and then go back and press this button. This transition is not that hard, but still we may avoid this additional action by implementing bashful button for Android or iPhone. Okay, let me, here we go. Now you see this button that I talked about. These days, people are usually starting from mobile design mumbles layout because more people using mobile phones to serve internet. And that is why Mobile-First approach is very important and very actual on-demand. These days, it's easier when you have smaller area for design, transfer it to a wider area and you won't find problems with space once you found the space on a smaller dimension screen again, here, I would also suggest to stick to a lower number of groups, but still we may integrate additional thing like number. For instance, cute like this. Don't take me wrong. It's a prototype, it's the wireframe just showing you the structure of the header, okay? And you see on this screen this is more or less reliable than if we, for instance, put this number here. Looks kind of readable. But again, it's not the perfect approach. If you place your phone number, please try to find more aesthetic ways to do that rather than doing like I showed on the sample. Okay, another thing which is interesting in the heading, there could be an additional level of navigation or other information. Could be phone, could be legal terms. So use full information. Yeah, useful information. Thank you very much for your attention. I hope this lesson is useful. 58. XD Lesson - Mobile & Desktop: Dropdown Design: In this video, we will learn how to create a drop-down. For dropdown, we have to create two states. First is default and the R1, which is already expanded menu or something. So let's chart I will create an abstract menu. This is our default state. We now need to make a component from this group of elements. So using control k, now we have the ability to add additional states to our element, and it's a hover state. So we see this default state and hover state in the hover state, we are designing the visual of our dropdown. Lets try. Ok, we forgot to change triangle. See. You may also use onclick event, but for this, you have to create another art board and takes more time. But in some cases is inevitable because the interaction works on the onclick. So the expansion of your job down will be available only after you click on the element. For this purpose, you need to create additional onboard and connect these art boards between each other. I will show you an example how it looks. I have deleted the hover state, so one interfere with our prototype. So once I've clicked, I see additional element. You may integrate hover effect for each of these that's necessary because your user have to understand which element here she's about to select. So it would be nice if you could add some highlight here for elements that will be selected from the list. I tiny highlight is our carry. This approach, this method could be used in mobile menus. Again, could be hover, could be onclick UK presume that there will be some additional functionality, some additional menu that you use. So in this case is in most likely we use separate art boards because the interaction will be based on click. So there will be two different screens showing closed collapse in an collapsed out menu. Okay, let me show you an example. So I'm drawing two rectangles, connect them between each other, creating a sort of background which should be contrasting. These element will be changed to x, so to speak, or kilo's icon don't pay much attention on the huge blocks. Of course you have to be more accurate, newer design. Okay? And here we have Vout. Here we go. My position in differently. That's not the case here. Let's try. So I click and we have slight animation here, which is good. This approach is used usually for a mobile-first website naps. Let me introduce getting touch button in this manner. Now. Now you have these knowledge how to create interactive menus, dropdowns. You may apply this knowledge to dropdowns in your UI kit, whether it's a complex system or simple, May 1 apply this when you designing the navigation for your website and of course the menu for your mobile app. Try a couple of times by ONE thing about the areas of application and components like this where they can be useful. Thank you for your attention. See you in our next lesson. 59. Common Layouts Overview: Okay, so in this video, we're going to go over some of the most common layouts for content on a particular website or application, whatever that may be. So we're going to walk through several different examples here. And then Arthur's going to walk you through how to set this up and create this and Adobe XD. So as you can see here, we have this particular website that we're looking at. And what we're looking at here is how the content is laid out, right? And I really like this particular example here, because you can see down here that have like an H1 right here. And then they have the paragraph text right under this. And I really like how there's a lot of whitespace here because it really draws the attention to the text, to your image, gets to users really pay attention to this. And so we go down here. This is where it gets a little bit jumbled up here. There's quite a bit of stuff, however, you can get away with this because it does look good. However, for me, I would break this down into maybe two to three different sections. I think there's a lot going on here and it can get a bit jumbled up here. Now, this is a good layout here as well. I like this as far as the icon and then some text and then a little bit of paragraph text under that. And then there's a button right here. But I really loved just this white or this spacing here. As far as for the text here, the content of the button. And there's this huge gap here because it really wants you to draw your eyes into this particular content. And they also do a good job down here as well. This is also pretty good here. They just have editing text here with the paragraph and then they have the actual companies that they work with. But I like this one right here as well, where they have the icon and then the Heading text, and then a short paragraph and then the actual button. This is what I believe is one of the best types of layouts where you have a lot of space that's open. You have an icon and then you have some heading text, and then the paragraph. And that's going to be more often than not, the best type of layout because it allows you to easily get directed to this content here and actually take whatever action that this website wants you to take. Now if we go down here, not too bad, and then the rest of the website looks pretty good and see how they have their blog here. Ok, so their blog is all over the place. I think this is too much here. I would have maybe had smaller images. Let's see here. Okay. So their blog content here isn't to Matt as well. They have the headings. So this would be like an H1, H2, H3 and so forth and so on. So now let's take a look at my website here and I want to show you how this is laid out here as far as the content. So I have here the three core areas. I have the three different icons and have the content under that. And then there's some referrals, and then there's content right here with the heading. And then same thing here as well. And it's pretty straightforward, right? And then there's some actual different testimonials here as far as clients. And then let me show you how the service is laid out. And this is my favorite because it's very precise and it's very eye-catching for the user to come in here and be able to look at the different services and how this is laid out is very, very precise so that it's enticing to the user. So as you can see here, there is the image on the left and there's contents on the right. And there's like a dropdown here, right where you can see full deliverable. So this is a comprehensive report here, review. And then they can look at the full deliverables and under the Learn More button, same thing here, SMB and enterprise outreach. There's a picture on the right and then where you can see full deliverable. So I like this particular type of layout because it allows to provide context to what the content is. But then also it's laid out in a very pleasurable, eye-catching manner, right? So now let's take a look at some other examples here. Let's look at this particular attorney website that we saw in another video. And let's see how they're laid out here. I think this is too much. This is all jumbled up here. Then a lot of the stuff they're doing for like SEO, where they have all these different links here. So that may be why as well, but I would have these typically at the very bottom down here. So let's look at their belong here. Okay, so the blog isn't to well-laid out just simple blog layout here. You have your headings. Okay? So these types of websites, you're not really going to see a lot of UI design because their main intention is just to get you to come into this website and make a phone call or contact them. So not the best type of user interface here. But let's look at another one here. This is Ignite visibility. This is, I believe a marketing agency. And one of the things I don't like about this website is that there's too much going on here. There's a lot of content. So right here, you can see there's a top-ranked marketing agency and there's a company name there, like we were just looking at school back. So there's the number one search engine. And then in the US, UK, and Canada. And then it's just so much stuff going on there. Like three different four different colors. Right? And I think it would be a lot easier to have it more plain and not as much stuff going on here. So maybe I would have like the green text or maybe just a white text and would lay that out as far as what the company does, right? Instead of having all this stuff here because, you know, there's so much to read and then go and down here. This is all pretty much jumbled up as well. I think this could be a better design. However, it still allows for ease of use because it's all in one place. So that's a benefit as well. Coming down here, not too bad as well. And then let's see right here. I think this is too jumbled up as well. I think there should be some texts above this that says, we are able to do XYZ. We can help you accomplish, you know, ABC and then have a button there. Kinda like I have right here on when we go to the home down here, how it's like ready for more security projects, right? Yes. Elected Learn more. So I think something like that here where it says ready for more customers or whatever that may be. I think that could really benefit this year. But overall, this is pretty good as well. I just think there's a lot of stuff going on here for the most part, I would really look to make this a lot more easier, to navigate in, a lot more easier as far as not having so much stuff all jumbled up in one place. Okay. Just like I mentioned earlier, I think this one here was probably the best because they have a lot of white space, right? We don't have enough white space on the other one. Because a lot of its jumbled up right here. You have a little bit of white space right there, a little bit right there, none right here. And just a little bit here, right? Very, very little versus this one. Having a ton of whitespace. Whitespace here, rank, all it is is the contents and the button. And then right here as well, having this, you know, just be in the middle here. This is a better type of design, better type of user interface. It's a lot easier for the user and allow more pleasurable for them to come on to this website and, you know, fulfill whatever action that is required. So that's going to be here for the common layout. So you're going to see Arthur's going to walk you through another lesson in Adobe XD as far as how to create these and how to set these up. So that's going to be here in this video and we'll see you on the next one. 60. XD Lesson - Common Layouts: Hi there. This lesson we're gonna talk about types of layouts, different layouts for your pages. And we'd like to start from more traditional approach like image plus Text heading. So nothing fancy. I will show you a degree how it's integrated into create two. We have one margin here and one margin on the right side looks spacious. Here you see that the content may take less or more. You may adjust width and Haidt actually you may adjust only the width of the contents because Haidt usually calculated when you have actual content inside the box k. So let's say we have only prolines and this looks nice. Looks not that nice. Okay? So whether you have less content, tried to shrink your text box, so it looks compact, veritable. Ton tried to spread your words all over the whole page. We won't work. Same here. Lets the mirror version of this one and I just increased the size of the image on the right and decreased the size of the number of words inside the container. So find out which type of content the website will have in the sections and try to adjust your blogs to its length so it looks more balanced composition. The other way is to make it step-by-step. So there is a heading with a text box, there is an image by these elements, I presume not only the heading tags and the image could be different elements combine in different ways. So try to apply this approach to your design and think not only about the image and about the tags. To be an opt-in form could be a slider, whatever it can be, just try to arrange it appropriately so it looks very cozy for AI and loved by users these days, more designs are made using mobile first approach in the here I will suggest to have this layout so like step by step, so it's a consistent approach, kay? So there's one element in other, and the third one, let me show how it looked here. Have an image heading. So this approach works here best. Even if we decrease the size to its minimum steel, we be able to use something like this to column grid here. One word that well, as in the desktop design. So please consider this difference when you doing the desktop design first, please think about how the mobile version we'll look. I think it will be consistent, same as here. Image goes on from the left side, means that image will be on the top. If image goes on the right side as here than in the bile phone, will look this way. Okay. Please notice that in each of these layouts, you need to consider an attach your elements to the layout greet k. Remember, you may use these block and this block, this block, and then the other one, just to have some variation so people will not scheme, you're taxed trying to trigger the eye to read a text inside it and press the button. Ok, I will show the just the bars and for reference. Okay, so now you see how it works. With the call-to-action peer. You may place button like this, but you need to work on the visual part. So these area will be together with this, where your elements should be aligned to something because once it goes out of the creed, you, as user will notice. Okay, these are the most common, most popular, most easy layouts that you may integrate and use your design. Of course, for complex systems that won't work because you have to think about structure. There are different types of elements and there are many of them much more than on corporate website. So it requires additional analysis and further research on which would be the best way, in which will be the best structure for your content on the dashboard, on the complex systems, on the other controls and so on. I will tell you that these are two types because this is the mirror version of this one and the other one is more adapted to the mobile phones. And of course, with the complex SAR systems, you will need to to a deeper analysis of the content of the function and so on and, and structure your screen and controls the other way around. So this is more applicable for websites that has some pages, up to five pages, different layouts that you may remember these two for now for starting it's enough. The second one is more appropriate to mobile design. The first one is more adapted to desktop, and this one is just mirror version of the second layout. So these days, more often I'm using this one, even though from a static perspective, I like this one more, much more. But when I do the mobile first design, of course, have to stick to a consistent layout. Thank you very much for your attention and see you in our next lesson. Bye. 61. Mobile & Desktop Footer Design Overview: Okay, so in this video, we're going to look at the footer design. Now the footer design is where you're going to have typically your logo on where you're going to have any different types of links. For different pages. You're typically going to have like your balance, your contact, your address. Sometimes you can have like a map in there of your location if you have like a local business and where people actually come out to your location, and also several types of links for the cities or locations. And that's you, sir. And then also typically like a contact form and as you can see here, each one of these a lot of times why they do this as far as for that geolocation and the services for SEO purposes, because when you have a link, especially with the anchor text, which is the text here, you can see it says Search Engine Optimization here. And then on the bottom left has Services forward slash SEO. So if we open this up here, you can see that the URL is Ignite visibility forward slash services, forward slash SEO. But then when we go down here, the text, the anchor text is search engine optimization. So they're really doing this for SEO purposes, for them to be able to rank on Google. And obviously this is extremely smart. This is the right way to go about it. And so they have different types of links here for the services. And so this is what you're typically going to find on a well designed type of footer where you have the links for the services and then they're using that SEO, juice and power, the industries here, I'm not really necessary. But then the proudly serving sparse for the locations. This is a big deal because the locations, i say they're trying to rank on Google for, you know, Facebook ads or digital marketing services in a particular location, then this is exactly how they would do it. They have these links here and they have the locations. And then if you go to the page, it has like San Diego digital marketing, right? You can look at the URL up here. It says San Diego digital marketing. So this is all done strategically to make sure that they're able to rank for those particular services in those areas. Okay. And then about here, you have the team, you have the values clients, and like this particular stuff here, like the values and maybe some reviews, maybe some tools and resources, right? You're not going to find it up here on the header. It's typically going to be down at the very bottom in the footer in where you're going to find like privacy policy pages, where you're going to find Like Terms of Services pages, right? So this is where you're typically going to have that information on the footer. And then you have the address here for the location, the phone number. And then a little bit about the company here. And so this is fantastic here. This is a great type of Footer to have the logo here. And for this one here that have the logo on the right, right. So this is just a footer. Remember on the footer, there's different rules that you play by. And it really doesn't matter if you had a logo on the left or the right. For the footer. And then they have a good call to action here. And as far as having them submit their information. And then the social and I like how the text is like light gray or light silver because it doesn't pop out like the actual heading here. And so it's really there just to have as reference. And so I really like this design. I like how this is laid out. Let's take a look at some other ones here as far as the photon menu. And so this is the attorney website here. You can see they have their social here. I would have this Social down here further. And one of the things that I notice here is this testimonial here that you can barely see. And so I don't know why they have this like this. I would have this standout more or make this into actual white text. And then they have the sitemap and then they have the text right here, which is just like I mentioned four. More often than not, it's going to be for SEO purposes. Notice how they have here, San Diego criminal lawyer, that's the anchor text that's giving the juice and the power to that particular website. And then they have the privacy policy here as well. And then they have the directions here. I'm sure if you click on this, it'll take you to a map, right? Perfect. Okay. Yep, that's great. And then here is the link to the actual Escondido criminal defense attorney page. So there are some more SEO power going there. And then they have the social like I mentioned. But there should be a call to action here. There should be like a button here that allows people to send a message or even to call if they wanted to hear right, just click on this number here, but this is for the most part going to be okay. You're typically going to see this kind of layout and a lot of local business websites. Now let's take a look at another one here, which is z F7 creative. This one here is a lot more straightforward, right? They don't have a bunch of stuff going on here, like the other ones. This is just a phone number here, address, and then different partnership information. They're not really doing a lot of SEO stuff here because these guys are more of a creative agency. And so they still have that the Google Partner here, they have the branding here. The service is about, but they don't really have like the particular, you know, San Diego or XYZ marketing services type of links because they're not really going for the SEO because this company is more of a creative type of agency. Regardless, they could still use some of that SEO juice as well. The footer, as far as having some links there. However, this is more of a nice and simple type of layouts InDesign. And then they have the social down here. And so they don't have the logo or anything like that. They just have simple links. And then being able to get you to actually call them or visit their location. So this is the different types of footers that you're going to see. Obviously, there's a lot of variation between them, depending on the type of websites, what the client actually want and what you feel looks the best based off of your expertise in what you want the footer to ultimately get accomplished. So that's going to be here for this one, and we'll see you on the next one. 62. XD Lesson - Mobile & Desktop: Footer Design: Hello again, Arthur's here and let's talk about footer. Footer, it's the lowest part of your mockup. And here we include all that we can't include in the header. Usually we duplicate information from the header, would duplicate it here if necessary. So I will explain a couple of things here. When we have long pages on the website, we may forget about this notification and this navigations hide it, not fixed, then we can duplicate this modification in the footer K. When babies are not that long, you have a quite few scrolls. I don't think it's necessary to duplicate in to include the main navigation from the header and the footer k. Usually, it serves these broad. When you have small pieces of necessary content, may use this section. They are copyright. Let me show you the copyright string. Copyright by our tour. 2020. Also, you may see that some footer may have social networks. For mobile, I would recommend to use one column design. Sometimes you may put two menus here if necessary. If it works, I would suggest to place the icons this way. Ok. And of course, don't forget to differentiate by spacing or some sort of divider between sections, between groups. So it's easier to recognize information. Let me put the logo here. You may change logger to black and white version or invert colours. Do you think it's cool? Of course, you may have other color of the background, but usually they are darker than the rest of the content. Sometimes footer may include roadmap. Let's restructure debate. Also don't forget about the if using the map on mobile. Remember that's pressing on the map. If person one to scroll pressing on the mob will initiate the interaction with the map itself. I use band here. Let's try where say, and I press call and it's called the map. Be careful with this. Sometimes we may use some margins to allow a person to touch this area, not to interfere with the map section. If we are considered the quantity of four menu items, that's okay to use a centered layout. Maybe like this. Well, PSAP to you. Maybe like this but with some hints, some bullet showing that two different sections. Same goes with desktop design because it's easier to create a desktop when you have lots of space here, k And usually goes dB like this. Create a wider map. Copyright. Again, it's not a rule, but all your project team will appreciate if you use green. So it may look like where you may move elements to different. For this, let's use the same width as the Content section. Spend some time on playing wing elements from 1 to another and finding the perfect place for elements. Greed will help you in this because it shows you where your element or group of elements could be touched. The placed. Okay, that's all for footers. Thank you very much for your attention. See you next time. 63. Mobile & Desktop Button Design Overview: Okay, so in this video, we're going to go over the different types of a button design. In the next lesson, Arthur's going to walk you through the different types of buttons as well in the Adobe XD. And he's going to show you how to create the. So for this one here, I'm just going to go over some different types of button designs on different websites that give you a quick overview here. So let's go ahead and jump in here, we can see the first types of buttons here on this particular website. You can see that they have the services here. And then our work you can notice here. And what I really like about this here is that they have the button here with the plain white box in with the actual white text in the middle. And then once you hover on this, you see that it turns blue. So I really like these kinds of buttons here because they allow you to have it stand out, but then also be able to send out even more once you hover on and write the whole dynamic feature of this and then this one here. They actually have a feature where it actually raises up the button here and it makes it a little bit more lighter. So I like these kinds of buttons here. And then let's go down here and look at some other different types of buttons here as well. I like this one as well. One when you hover over it, it turns into a arrow here in its dynamic. Also, you'll notice that there's a little bit of shadow in the background as well. When you hover over this and you can see the shadow around it, however, you don't really have a shadow when it's just they're static, right? But the shadow is also another great feature as well. And then going down here, here's his button as well. Same thing. You have the shadow that shows up there and then the arrow. Okay? And then this button here is fantastic. I loved his button here. This is very, very unique. Once you land on this entire section here, this button right turns into a square from a circle and then a background actually changes the color as well. So these types of dynamic buttons are very, very nice as well. And so let's go ahead and look at some other types of buttons that we have here in this example. So this button here is for the attorney website in, as you can see here, they have the submit and then they have like a gold type of button here. And then they have a little bit of a darker shade there on the bottom as well. So it kinda gives the three D type of look, right where kind of propped up, right? You have this 3D type of look. And then when you hover on it, it actually changes this to a white text, right? And then it gets a little bit darker here as far as a button. And so let's go over here and take a look at this button right here. So i like how this text is up here right above the button. You always want to have texts above a particular button that's helped people what this is about. And then this one, it gets a little bit darker once you are lending on and you'll typically have like a button that is kind of rounded edges like this, or a full square, or you have a button like a circle, right? And so those are the different types of buttons you're typically going to see. You can see this one right here has a little bit of shadow there with the black eye like that shadow were really makes it pop out and stand out. And then this one right here, just another symbol button. And then let's go to my particular website here. And this button here is a pure square button, and then it actually gets darker once you actually hover over a particular button here, and then click on this, and it takes you to the contact us button. And this one here is essentially going to be a submit button. This is not going to be anything fancy. You can make it fancy. However, it's pretty straightforward. Notice how this one, it gets a little bit darker when you hover over it. So for the most part, you're going to notice that different types of buttons will have different types of dynamic functions to them. Some of them will highlights in different colors. Some of them will have different elements on them. And I like this one right here. As far as this type of button here, as far as his play video, you can see how it highlights it around. And it's very different because this is for a video here. It's not for a particular button, has like a circle design. It's, Hey, play this video here, and it's a very nice-looking, unique design. And then going down here, like this one right here as well, where you have just a plain white outline here for the button. And then you have the white text in the middle. And then when you highlight it, it really pops out. You have to white text with the blue highlights around it until it really pops out. So this is a quick lesson here on the different types of buttons you're going to see. Typically the square ones or the ones that are typically a little bit rounded, right? Or a full rounded button type of design that you're going to see. So in the next lesson is going to walk you through how to create these buttons. And that's going to be here for this one. And we'll see you on the next one. 64. XD Lesson - Mobile & Desktop: Button Design: In this short video, we're going to talk about bargains and how to design them in XD. Let's go. You see three buttons here. One has the rounded corners, one with the square corners, and one with a slightly rounded corner. So this feature is easily controlled. Would this function of x D Very nice news for future. Someone who works in Photoshop knows that you may also have tre corners without any radius and slight reduce here. Besides, to differentiate your burdens course, you may use different colors. Usually it's the main colors, green, blue, red for some attention. Okay, next, where you may do is to make title all caps here. Besides, you also may apply the letter spacing. I mean, you may increase the letter spacing for better consistency if needed. The recently introduced shadow button, which has only the outline P2. And this type of biden, usually known as shadow baton or goes button K. So besides these manipulations, you may add the shadow when necessary, please don't over use shadows for all elements. If the bottling conveys pressing, clicking some slides, shadow is okay. The color could be gradient. Try is c cubed p a gradient to your UI kit, which is the combination of which is the collection of your UI elements over the project has to have consistent color scheme, as we already talked about that. And you have to define rules for your buttons like this colour and this shape will be used for this and that, this color will be used this type of functions, red buttons usually used for deleting operations that can be undone. And of course you won't use square and rounded bottom on one screen at will look terrible. Me show you. So for instance, we have shopped now edit or I would change. So here is the sample of the combination, how colors in balance work together. So show up now is the function which we are all interested in conveys something positive, green color, blue color conveys something else. Something difference on average between good and bad perhaps. And it's used here for edit. And counsel means that you will skip this screen script, this window, and return back. We came from word. You may use it for deleting an element and row data, anything. To apply this approach all over your projects, mostly used in complex SaaS systems, dashboards and so on. Perhaps you may implement this approach into cart or my cart section on some e-commerce. So the idea is to assign colors and probably shapes to a group of buttons. So you won't have one screen where you have shop now and edit, respectively, green and blue colors and counsel with the red one. And then all of a sudden, the next screen will have sharp. Now here, edit brad and counsel. Ok. Now you see the difference. If you see such combination, you perhaps will be confused to bid because you're used to red colors, color of warning. Blue color is more or less okay for shop now, but the red colour for edit as something not appropriate. So this approach is called color coding. When you have functions that are similar and you apply the same colors, two buttons that are in your project. It's also called primary, secondary and third button. Okay? So the primary button is shot now, secondary is added. My card. And the third goes button has designed this style. So it's easy when you start doing this, when you have primary and secondary functions, that is how you apply this color coding to your UI elements. And it doesn't matter whether you have rounded corners were we are co-owners. You just need to have the consistency all over your user interface. So when user is used to your colors, he or she will already expect, will change after clicking red button, after clicking green or blue button, ok. So besides the assigning priorities to your buttons, please consider the different states of button default. As this one. Disabled. Usually disabled have gray color on hover. And pressed. Or active. Active means that the button was pressed. Hey, these are basic dates of button that you may consider. But in x D, You may create on the two of these, so normal and on Hoover. And I think that's enough for coaches to work on your mock up the disabled button perhaps will be the same style for all of your solid buttons. The disabled style does usually goes, the disabled style usually goes, in addition to these two. Mean, move it a bit. So disabled style is usually comes as an addition to your bottom states, but these two or three states, please illustrate how your burdens Luke on hover how they look when they are pressed. It's not only about burdens on your interactive helmets that have some interaction, even micro interaction is very useful to illustrate it, to showcase, to frontend team so they are able to implement your design thoughts and the markup and the project besides the states reason other thing which called greet. And it will be cool if your buttons will fit to the crete k, whether it's three columns, whether it's two columns or four columns and so on. You may even design several sizes, small and large buttons if necessary. I could tell you that you may prepare a perfect UI keyed prior to going over project. And fortunately, most of the time it's impossible because you're not sure which functions, which elements you will require and how small or large they should be solved. You have enough understanding on how to design not only beautiful but also meaningful buttons, How to Buy callers to create gradation between primary, secondary, and tertiary. And you can also adjust the styling, fine tune the corners at shadow, ray gradient and course grade at different states. And the last thing is the greed. Greed goes over all of your pages, windows, whatever. So your elements precisely buttons have to be the same with not only the same, but also have the precise number of columns so they fit your greed C, So three columns, five columns, six columns, K. Try to avoid such size as this one or this one, k, i will be much easier to work with your mockup. Thank you very much for your attention. I hope this lesson was useful. See you in our next lesson. 65. XD Lesson - Mobile & Desktop: Input Design: Welcome back. In this lesson, we'll design the text area, which is the element of most UI kits and user interface in general. So it won't be that challenging that art. Design, the text area or input, but some things you should consider in order to create consistent user interface. Kid, okay, from our previous lesson, you know how to create buttons and what types are there? What are their priorities? I only want to add. One thing that you may do in Adobe X-Y is to create a hover effect on the button. So once person overs with the cursor over the button, it changed appearance. Kay, let's say, you say, Here we go. Just keep that in mind. Okay, so let's go back to our inputs. First of all, in terms of inputs, you will need to start with the hate of your input. And that is interesting because you have to know which size of the font will be used on your interface. That's OK if you're working with some standard tanks and your font size is actually between 1624 pixels. That's not going to make that much difference. But when it comes to some outstanding user interfaces to weather huge bald phones, sometimes it's necessary to dab text area to that size and to the Sasso looks, you know, as a one home. Okay, so every time you start to design the input, please type the text placeholder inside it. So usually it's name or fullname. Ok. So the size of this font is 27 pixels, and these area is too large for such phone size, even though it looks spacious, but still we can deduct a bit from the Haidt, So it, oh, look more compact. We may deduct a bit more. Try to keep this dimensions of your elements clear. Soviet not 6163. And now we see that with almost 30 size formed, we have 60 pixels tall input. The other side of this element is that it usually works together with button. So if we take button and place it here, will look a bit unbalanced as these two heights are different. Even if we do like this, we see that this element takes much less emphasis comparing to the cancel button. And this is the problem. Because elements must be equal, so you may put it together in different ways. So we have two ways here. Make our button smaller or they cover input taller. So here I will decrease the size of button. But when you are designing your UI kit, you need to start with font size. Whether you are doing textblock, whether you're doing Barton, whether you're doing input, textarea, checkbox, radio buttons, lag drop-down and so on. You have to start from text size. And once you've got the right font size, then your elements will be wrapped around this. The starting point is the size of your phoned in your UI. So we have 24 pixels, which is quite enough for readability. And our hate of input is 60 pixels. So the same will be four button. Regarding the styling of these simple element, I should point out that whether you are doing a rounded corners for your Barton course, you need to maintain a preserved the same styling here. Use the same radial corner radius, border-radius for your inputs as well as in button, your input can have three states. First of is the default state, the other is the disabled state, and the other is active or unfocused. So once on focus, perhaps you will have the cursor here on your disables. Perhaps he will have brighter. And I think it's useful to include the user. Another state as typed text, okay, because there is a difference between user text and Placeholder. So let's describe it again. Let me rearrange it a bit. Okay? So here's the default condition which represents the input with placeholder text. Once you've clicked on this area, your placeholder usually disappears and you see the cursor or typing, then you typing your text. Additional state for input is disabled. Disabled is used when something is not available for you to change at the moment, and hover state will be this one. Let's keep in mind that sometimes even on Hoover placeholder and remains there until you start to actually type something. Ok. So there remains there only until you're starting to press any key on your keyboard. You now know how to combine these core elements in your UI. Next lessons, we will discuss additional elements that will help you to create your UI kit. Thank you very much for your attention by. 66. Mobile & Desktop Filter Search Bar Design Overview: In this video, we're going to go over the different types of filter design in the different types of search design. So this is typically what you're going to see on an e-commerce store where you're shopping for a particular product, a particular item, and you have different variations that you can choose from. And then also on the search bar where you can essentially use it to search for different products, different items on a particular store. So let's go ahead and jump in here. So this first website here. So this first website here you can see is partake foods.com. Looks like they sell a bunch of different types of cookies. And so what I want to show you here is how they have their particular filter design laid out. So let's go ahead and look at one of these particular products. So we have the crunchy chocolate chip cookies. You can see here. They have the reviews here, which is great because it allows for social proof, right? For people to be able to see that this is actually a good product. And then they have the different types of sizes. Or you want three boxes or do you want six boxes? And then you can see here the price changes, right? And then you can sign up on a subscription-based for them to deliver every two weeks, every four weeks. And so this is kind of a different types of filters that you're going to see on various websites. Now, the design is going to differ, right? Depending on the look and feel of that particular websites. I just want to show you some examples here from different types of online e-commerce store. So okay. So then right here you can change the quantity and then you can add to cart here. So this is going to be one type of filter design here. And so now let's go up here to the search bar. You can see, you can just typing here, let's say we were looking for a particular type of cookie. So let's go soft Bates. Okay, so let's go ahead and type in here soft baked cookies. Ok, so then it pulls up here the different types of soft baked chocolate chip cookies. Now, this search bar, the search design is going to be quite simple. You're going to see this at the very top of websites oftentimes, in also, like I've mentioned previously in other videos, you're going to have the logo either in the middle or on the left hand side. So this appear also is a great thing for e-commerce stores, where you have at the very top like a coupon code or a coupon, right? It allows people to be able to be more enticed to want to make a purchase, right? So this is a very simple search filter design here, and as well as the type of filter for the product. So now let's look at a different type of website here. Let's go to this particular website, which is the package appreciate.com. And let's say we click on this particular product here. And you can see this has a very standard type of filter design. You have the style here, black, sand and Brown. And then you have the quantity, right that automatically updates down here. And then you can add this to your actual cart. So let's go to different ones here. Let's go to a market kit. And so for this looks like there's only one available here, right? These are all sold out and see if we can find different types of products here that are actually available. So let's go to the travel kit here. In this one typically will have different colors. However, for this one is only one. But you can see this is a pretty straightforward one. And here you have the quantity, nothing too special about it. If we go here, we can see that it's just a different types of colors. And that's what the, what you're going to notice in the filter designs, you're going to see typically the price, the quantity, different variations of color, different variations of size. Amazon.com does is very well where you have different types of features, like I mentioned, such as size, design, layout, right? And then pricing. And then here's a coffee website which is the black end bulb. And let's take a look at some of these have some filter design as well. So let's look at this one here. So this one you can filter by size, typically have different sizes here. And then you can have like whole beans or drip or French press, right? And then you have the option to have a onetime purchase here and a suscribe. Okay. And so this is just a very quick short video. What I did is I went up and I searched the top Shopify stores, and then I went through the top three and selected these here because I want to show you what some of the top stores are using four different types of filter designs and then search design layouts, right? So very, very simple here. This one has a search at the very top. More often than not, you're going to see Shopify stores where they have a very simple search bar up here. Or they have like this little magnifying glass frame. You're going to see that even on this one right here, the very top, you're going to see the magnifying glass. And then you can search for whatever product that you're looking for. This is just a very simple type of filter and search layout. Here in the next video, Arthur is going to walk you through other variations and other types of filter design and search bar designs as well. So that's going to be here for this one, and we'll see you on the next one. 67. Adobe XD Lesson - Mobile & Desktop: Filter Design: In this video, we're gonna talk about filter design. So let's start with a simple description of what filter is. Filter is a way to save space on your user interface in same time providing user convenience. So the approach which is used in filter design is usually simple as drop-down menu that we've discussed on previous lesson, but some difference. So usually we see a filter icon. Then we're pressing on the filter icon and see some original content. This content is actually representation of filter parameters or criteria by which other UI element will be worked. Or this will be the way of shrinking our content search results on the page that we are already on. So say you are looking for shoes for $18, then you see choose that, have the different colors. And you don't like red, green, or blue, you want simple Brown. This is the place where filters may be helpful. In our case, we will have the following parameters. Now we have four parameters which we are able to filter out or filter in. The approach here is used by including these once they are selected. And if I want brown shoes only isolate brown color and perhaps I need some other control that will help you to close this window after I just selected. So this is how we would sort out brown color shoes. The other thing is the filter and the slider that help you to sort out precise numeric value from your catalog or other content. Usually on larger screens, you may add slider, which will help you to select a precise numeric data, whether it's a price, size, quantities of something, and so on. Let's have a price here. So this will show you the range of price that you are looking for. Also could be like if we're talking about some selectable criteria. I would use simpler illustration. Once a person decided to select some price range, there are several approaches to this. One can select this low price, the medium price or the high price. So it's also can be applicable in your filter. There are many modern elements that came into u i over last couple of years. So they are not usually included in basic UI kits of most of frameworks, but tags, sliders. So one, making user life easier, representing the same functionality. They have better styling, bear visual so it fits user needs and recent trends of small screens. So it's more comfortable to select one of these three items. Here we have from k. In our case, this case user has to focus on this element, the lowest price, and then think about the highest price and afterwards press some buttons. So let's count. First, we selected, that's the first interaction that petite. So as you see that is not the changing of user interfaces, changing to the approach to the data. We know that machines are quite precise in this case, but here we want to make it user life easier. We have to change user language to a user actually language, not the machine language. So once I see this abbreviation, dollar sign, i automatically understand what is meant by these three icons, ok, and by the context of this app, we understand that all products divide it into three categories. Sometimes it wouldn't be applicable, but still, there are lots of things that you can rethink and explain to users in a different way. So let's go back to her filters. So you see we can use several types of element, as well as traditional elements like radio buttons. So we have leather or equal letter, one or another. And once we selected leather, we won't be able to select eco letter or vice versa. Can't select both of them. So it's a one option. You can even implement icons, your filter for selecting some criteria. It's also user language. You're not showing a huge list of categories which is boring, which are boring, but you showing them the representation, the visual support. So they are not guessing about what they want to order to eat, just showing them icons. And that looks more easier rather than reading between all lists of options. And there is one more which was also used in our app. Let's say we want to show only special products. So we may use a toggle on off here. And now we see that this one is disabled, okay? And this one is enabled. So we don't want to see only partial products. We want to see only in stock prior. They are available in the stock immediately. What else height ad will hide and price, for instance, I'd add with no wage some very nice and cozy functions that are really appreciate it on some search results or some catalogs, maybe some systems, complex systems. Think about what would you appreciate as filter function on your favorite websites and think about how you got this inside. What do you think would be appreciated in your favorite mobile apps? What things could be rearranged. These observations will help you a lot. Okay, see you in our next lesson. 68. Adobe XD Lesson - Mobile & Desktop: Search Design: Hi there. Welcome back to our work I lessons. So today I would like to talk about search and search, which is quite simple thing searching. But as you may see on the screen, I've illustrated three search parts which have completely different visual only because of replacing the elements inside this box. So here we have search icon, which is zoom. I can then small spacing and keyword or IT, then you have nothing because it's expected to press Enter visually this element and this look quite differently. And I would say that is because of our habits. We used to have search here per everywhere. If we would like to search something, we'd like to have this modal, sometimes also use like this, but these elements in my view, placed very far from each other. So if you would like users to easily and quickly read the function of your element, please try to place elements closer to the left corner, especially when you work with fonts and use a more traditional language which is search, not specific keyword or ID. In some says, I understand there could be some things, but these search for us, for many people looks more natural rather than these two, only because of changing the text in this small text field, search could be technically live search. You start typing and then some options could appear. Then you select from the option and maybe go. The other one is when you use a precise data like deaf 25. Now would like to search for these ideas. Most of UI elements have the states and its states are more alike, the states of usual text input. So remember this is the default state. The other reason focused, third one is user text and disable search also could be disabled sometimes. So you may consider this and the other cases for user texts and hover. Please consider these conditions this states in your UIKit, so your user interface will be more interactive. Developers will have less questions on how you think the hover will look like an past US developers were the one who styled these icons, who designed these interactions? Because small animations, small interactivity elements, they weren't available in Photoshop, was quite hard to create different states for elements. You've created another onboard for each state and so on and so forth. In x D, we have the chance of easily highlighting the interaction of the element and easily create to manage, to pass and to maintain these objects among all project. Thank you very much, organized a 69. UI Kit Overview: In this video, we're going to go over UI kits. So UI kids are essentially different types of components, different types of features and functionalities that a particular application or website will typically have. And in the next lecture, Arthur's going to walk you through how to create these. But in this video lecture here, I'm going to walk you through where you can find these if you don't want to create these on your own and where you can get different ideas from. So the UI kits, as I mentioned, these are going to be things that you create for a particular websites, in particular application, as far as like button designs, different types of texts, different types of font, different types of icons, right? So let's go ahead and look at some of these different types of UI kits here. So you can see this first one here. It has a bunch of different types of features and functionalities already built in that you can use for a particular application in where you don't need to create these from scratch rank. You can use these and put these into your portfolio. And as you can see here, the different types of screens that different types of views, right? These types of views here are very, very nice and simple. And they make it so that it's easy for the user to actually navigate in one, a purchase, right? And here are some of the highlights. Well-organized layer, super easy customization, different types of Google font, modern UI design, right? And you can purchase this for, I believe $20. And so you can go on theme force, all these different types of websites and really just type in UI kit on Google and you'll find a lot of different resources. So let's go over here now and go to UI store dot design. And we can look at some different ones here as well. This is for landing page template design in Adobe XD, The Seagull. Look at this, you can see all of these different types of landing page designs, right? And like I said, you can purchase these or you can download for free depending on the particular website that you're on. And then let's go to up labs.com. Here's another resource where you can buy some reading done for you templates. Let's look at this blue one here. This one looks pretty nice. So this one here, you can buy for 99 a month for an actual monthly cost, or you can purchase this at a onetime fee for $29. Okay. And I believe this is more for a messaging chat type of feature there and see if we can find some different ones here. Education app design. This is for fashion landing page templates that see here quiz app. Let's look at this e-commerce one right here. So this is a very nice layout here. Again, these are different templates, UI template kids that you'll be able to purchase and have these designs already set up and ready made for you to be able to use. And you can also use these and add these to your portfolio, right? But you won't need to create these from scratch if you don't want to, because you can take different ideas from this. You can use some of the different elements, right? And components, and maybe changed them around a little bit. Unless you want to create a UI kit from scratch, you know, that's going to be something that you do on your own where you're developing, let's say a website or an application. And you want to create a UI kit for the coders and for other designers that may be down the road working on that particular app or website. But this is just a quick overview here of showing you different types of UI kits, UI designs that are already made and available for you to use, right? Like this is a good one here as well for a actual store that sells shoes or maybe any kind of sports products, right? This is going to be something that you can use as a typical type of design. And then also here on an Varro elements, you can buy some ready done for you, UI templates as well. So this one here is for an e-commerce store, years for construction website. Here's another one for like a marketing company. Let's look at this one here. Enjoy the power of email marketing. So it comes with just this particular landing page deal here. Okay? So, yeah, this is going to be a resource here that you can look at when you're looking for UI kits, right? You can just type into Google UI kits and you're going to get taken to a lot of different resources. You can use those UI kits and purchase them and use them as references or maybe use them for a particular design. You rarely have to create UI templates from scratch unless you want to, unless you have something very unique and Customer Rank. And then Arthur is going to walk you through in the next video how to set up a UI kit. So that's gonna be here for this one, and we'll see you on the next one. 70. Adobe XD Lesson - Desktop and Mobile: UI Kit: Hi there. Let's talk about UI kit. Uikit is the collection of elements that might be used all over your project. Uikit is related to user interface. It may include colors, icons, topography, control bars, buttons, cards, controls, sliders, labels, and so on. So once you need to create additional page for you, it will be easy to pick primary, secondary, or tertiary color. Pick the necessary font size and font style, icon if necessary, button and so on, and create another new layout for your user interface. So let's say we have a system that had an update and we need to implement somehow this update so it won't stand out like separate from this design concept. So we will pick the card, we will pick the same slider if necessary, button and so on and so forth. So we will be able to preserve the same styling over all project that we're working on. In. Other thing is UIKit Jesus, for when your project is passed to developer team. And these guys will be able to create, to generate some new pages, new screens without any effort from you. So they won't bother you. And they won't have lots of questions like which color I should use if I need to create the search bar for four category page, for instance, here you will have the rules for colors, will have T icon set. You definitely will include the typographic hierarchy, the paragraph styles, elements and so on. So they will pick the necessary Color, Fonts, bars if necessary, Barton's labels cards, and we'll create the needed interface. Moreover, they could implement this functionality into the system that you work in. So these new templates there will be generated automatically without any effort, neither from you, neither from front end developers. Okay? So for small projects, one pages, several pages. Websites, like corporate websites, don't think it's necessary to create UI kit, but it would be nice to pass the UIKit alongside with your mockup to developers. So they will be able to add some functionality in advance using your UI kit that using the elements that you suggest. But for more complex things like SAS, social networks, Any other types that have many screens. Of course, it is almost required to have this UI kit because lots of changes could occur while the development, while the design, design framework should be flexible. So it adapts to needs of the project, whether its scalability or it's the responsiveness or other thing. But you have to maintain these main thing inside your UI kit. And once you have this system which has 40-50 screens inside, of course, you will use the same element, the same styling all over your project. So try to create UI kit for complex projects because you will need them yourself. Because there could be some edits, could be some updates. And once you have everything on hand, you already defined rules. They aren't rigid, they are flexible. You will create a new page with these without breaking work of female coders. Our other guys inside the project team UI kit is very similar to brand book or brand guide because it has mostly the same elements. But in this case it's more technical and you can just borrow the icon from here. Copy paste in your working file. Some UIKit may not have some elements that are illustrated here. Some may have some additional elements. The more elements you will have inside this file, the less effort will be to create new screens. In other useful feature of UI Kit is that it helps to pass your project to other designer in cases when you are not able to continue the work for some reasons. Let's say you did the job, complete the project, but sometime some updates occurred. Your client may work with other designer without bothering you which element we need to use here or there. Again, it's like branding guide for user interface and encourage you to spend time and to create these libraries of elements for projects that are complex, that may require new layout, new features, and will be very helpful for you and your team. Okay, thank you very much for your attention. I hope that was useful. Thank you very much for your attention. I hope it was helpful and I really love creating UI Kit and hope you will love to see you on our next lesson. 71. Microinteractions Overview: In this video, we're going to go over micro-interactions. Now, micro-interactions are very, very common in different social media platforms, on different websites, right? You probably use these all the time, especially if you're like on Facebook where you're constantly engaging with people's posts, with people's content and given them a thumbs up, maybe Harding, a comment or whatever that may be. Those are all going to be examples of micro interactions. And in the next video lesson, There's going to show you how to create different micro-interactions and how they work in Adobe XD. However, for this video, this is going to be more of an overview. So as you can see here, micro-interactions are really those types of engagements that make it so that it's very much so and enjoyable experience for the user to actually interact with that application or that website. And as you can see here, micro-interactions have four parts. The first one being the trigger, which is going to be the initiation, which is going to initiate the micro interaction, whether it be like a like or a heart that you do on a particular posts on Facebook. And then there's rules that determine what happens. A micro interaction is triggered, for example, once you like a particular comment or a post, right? That automatically turns from gray to blue. Once you Like that, right, then you have the feedback, lets people know what's happening and then the loops and the moat, right? This is essentially determining the minerals of the microwave interaction. And so what really micro-interactions due for the actual user is that they make it exciting and enticing for the user to navigate and use the website, right? Because when you have a website that just pure static and it's not very unique and there really isn't any type of dynamic type of components, then it can get quite boring. So here we have some examples of a swipe. You can also think about different dating apps out there like Tinder that have this white feature as well. Those are all going to be micro-interactions. And let's go down and look at some other ones here. Here's a data input here, where you input the data here. And then it gives you a strength meter there depending on the strength of the website, a lot of websites will have these where you gotta sign up as a user and you need to create a password in order for you to be able to pass the creating your actual login information, right? You need to be able to set a password that is strong and is not very easy and simple to actually figure out. And so these types of macro interactions are great because they're dynamic and they also provide the user the sense of security of like, Hey, we want you to create a password that is going to keep your personal information safe. And then going down here, this is like a type of loading or current system status, right? Just another type of like a micro interaction here. And then this one is going to be for like uploading your designs or uploading a particular file did very, very nice and very appealing as well. And then this is more of a call to action right here, where you essentially are inviting people to take a specific action. These are very important on a website or application where you want people to lean on there and to take a specific action, to click on a particular link or button to be able to, you know, get them to do what you want them to do, right? So that they can accomplish whatever it is you're trying to get them to do, right? More often than not, it's going to be you to buy a product or schedule some sort of appointment or phone call, right? And then we have here the animated buttons here where they come in from the right. Oftentimes you'll find the animated buttons or like the chaplains. At the bottom right-hand side of a website. You'll see those quite a bit. You'll see like the chat feature pop up or even like a Facebook Messenger chat that you can embed onto a website. And so that's where you're going to see those on a website as well. And then the animated upload button here. This is going to be another microwave interaction here, but the micro-interactions are typically going to be the ones that you see on different social media websites, on different websites where they're looking to add a little bit of dynamic functionality, right? And interactivity to the actual look and feel of the website or application. And so how do you design micro-interactions? Artists going to go into a video of that in the next lesson. However, here are some of the things you want to keep in mind. You want to put yourself in the user's shoes. We wanna make sure that you're always looking at it from the customer's perspective and making sure that you're having fun with the right. So it's not like going to be intrusive. It's not annoying. And where it's like not matching up with what the user's trying to do. You want to make it a very pleasurable tasting experience. And so that's essentially what micro-interactions are. Just think about the Facebook likes. Think about anytime you're loving somebody's post or you're interacting with a specific website or application, right? Those are going to be examples of the micro interactions and how they're becoming a lot more prevalent in today's day and age as far as the applications and websites. So that's going to be here for this one, and we'll see you on the next one. 72. Adobe XD lesson - Microinteractions: Welcome to micro-interactions in XD. Today we're going to explore essentials were scroll to alter animation transition types on hover and so on. By good interaction is when you can modify the process of transition between one's art boards and in other art board. So outwards could be pop-up, I bought, could be Screen page, web page, and so on. Let's start with the O2 animation. You see I created two almost similar graphics, but except for heating waves here. And I've selected this element also only made in interaction to an action type, same here. So these two screens are linked between each other and they go back and forth. And let's start with the second one. So you see there is a slight animation on this soft ball. Please notice that the layers should have the same name and same position. The layer order. Because here they are, hide it behind the bowl. If I delete this, we won't see this animation as we see it currently. Let's try. Yes. See these layers appear instantly like fade out and fading. But it doesn't give us a sense of movement as here. So please notice that the other type of interactions is transition. Transition means that we will just go to this odd boat without any effect. Well, there is a small fade out fading, but it's like almost nothing. Same for our boards, which has user interface elements. Here we have auto animation. Let me try it again because logo have the same name, the same layer. It goes up and scales down. What happens if I select transition? So no effect is applied. Overlay is the type of interaction that is useful for pop-ups or for other windows that are smaller than your base art boards, like in our case, we have selective filter icon and selecting overlay for filter pop up. And let's see how it works again. Just to recall it. You see it overlays the main mockup with this screen. I also added a small tint for background, so it adds more focused to the search filter. Exterior thing I would like to explain is scroll to, scroll too, is useful when you have long page. And another one, a useful fact is on hover, usually used on the Barton's, seldom used on the Icons. First of all, you have to create a component from your button. And you will see that there will be a default state. You may add another state, which would be hover state. And in hover states inside the container, you may adjust the visual part of your bottom and let's see, Same for your other buttons. Please remember to create on hover effect for all of your elements that can be pressed or hovered fits at mobile app, please create a Clicked state for your button. You may name it's conflict. Make it a slightly darker. Okay, I would create hover state. Please note that these effects should be very slight because they have to be natural. Again, you may change size of your bots and hate color of text. On the bottom course, we won't see hover effect on the mobile device. It's more relevant to desktop interfaces, though, you need to create the additional states. So your developers want gas, how these button will look when it's pressed or moved or drag and so on. So I think that the CCS enough for you to experiment with micro-interactions in XD. And the last one is the previous art board, which usually takes user back like here, we have the button back. You may convert this element to component and assign the previous art board type and copy that to places where you mock-up has backed. But, and every time a user will click this button, it will take him or her back. It's useful for such thing as here for filter. Filter will be used on at least two screens, meals and restaurants. So instead of creating clothes icon and assigning it, okay, let's imagine we have this filter. I would like to have the transition or it previous odd boat and I assigned the overlay for restaurants section and meals. So you see the search filter appeared with a Cause button. And I just go back to meals. Once I'm on the restaurants and I press Filter, it returns me to restaurants. So you may add these two reusable elements in your app, like pop-ups, which appear here and there in couple of places. If we won't have this function, you will need to create the other filter which pop-up, pops up from the restaurants section and assign, these aren't born with depressed runs. Same here. Well, have separate search filter pop up, which will have the closing icon to meals. It's easier to create this such elements which could be used in several places in your app. I think that's all for now per microwave interactions experiment, try it yourself and wish you good luck with this as very interesting thing to explore and have a nice one by. 73. Navigational Components EDITED: In this video, we're going to go over the different types of navigational components. Now this is something that you are typically going to be seeing at the top of a websites or top of application where you have, let's say, different search bar components, different types of menu bars, right? So let's go ahead and jump into the navigational components. Ok, so the most common different types of navigational components that you're going to see either on a website or application or any kind of software that you're using is going to be the search bar. You have breadcrumbs, pagination tags, slider, different icons and the carousel. So let's go ahead and dive into these a bit further. So the first one here is the search bar, right? And this is typically where you have the ability to search on anything on the website there if you want to find, let's say an individual, if you want to find a certain article, certain blog post, or a certain piece of information. This is where you're going to be able to use the search bar here. And it provides a ton of value for the end user because they're able to find something very quickly, right? If they're on, let's say YouTube, right? They want to be able to find a specific video by going on there and typing in certain keywords, certain names right? In. It's going to be oftentimes very simple and easy for them to find what they're looking for. The next one that we're going to cover here is the breadcrumbs. This is essentially some kind of line that is showing the current path to the actual location. So you'll see here, we have the home, then we have a forward slash About Us. And the forward slash is really the breadcrumb because it's showing you the hierarchy, right? You have at the very top, you have home, and then you have about us under that. And then under About Us, you have history, right? And it's showing all of the different levels within that particular section. And then the pagination here. This is where you can look at the very bottom, let's say, of a blog or particular news publication type of website where you can look at all the different pages and even current pages that the website has content on, right? So this is a very simple type of navigation to create and set up. It's just looking at the previous post and then being able to get up to date to the most recent post, right? And then we have the tags here. And this is typically going to be the lowest level of hierarchy to finding precise content. Because you can easily just go to the search bar, typing what you're looking for there. You can type in like different tags like UX design, branding, whatever. However, for the most part, the easiest way and what people are going to be typically and commonly using is just the search bar and also the header navigation in the menu to be able to look up exactly what they're looking for. And then we have the slider. And this is used to set value of arrange or values and in particular given set. So it's typically going to show you like, hey, this is the target audience between, you know, 25 to 45, or it's showing you, you know, what you prefer. Or here at the very top, it's telling you to set your pets weight. Twenty-five, up to, let's say a couple of a 100 pounds or whatever. Or if you're in kilograms, obviously that's going to be different. But this is typically going to be something that is shown horizontally. Because if you do it vertically, it's going to take up a lot of space and it's not going to look very well. So this is best laid out on a horizontal type of layout. And then we have the icons here. Icons or one of my most favorite here because they really give you an indication of what is that particular area about, right? Like if you look at the very bottom there, you have an e-commerce, legal and compliance. You have a nice little icons there with the texts under those. And they really give you a great indication of what that section is about. So I like these a whole lot. There's obviously a bone to different types of icons and different layouts. And the great thing about these also is that you can lay these out in a vertical manner or horizontal as well. And they're both going to look fantastic. Obviously what the vertical, you want to have smaller icons so that you're not taking up too much space, too much room. However, what the horizontal ones, you can make them a lot bigger, just like we have here at the very bottom with the e-comm, legal and compliance, and then the finance and banking. But they work fantastic. They look great as well. And then we have the carousel. This is typically where you're going to see a portfolio where you have a lot of different projects that you've done in the past. Maybe different artwork, different photography. That's going to be best for. That's where you can make it. So that's clickable. And let's say somebody's on your website and they're looking for your portfolio. You can have a carousel there that allows him to see different images if I'm projects that you worked on and then they can click on those specifically and get taken to a specific page that gives them some more information about that particular project. Okay, so let's take a look at some of the different factors when it comes to the mobile specs here. Okay, so remember, when you're designing a web application, it's important for you to understand the differences with different fonts, different elements, and the size that is going to be required on a desktop versus a mobile, right? Because it's going to be obviously completely different type of layout, user interface for a mobile phone. And you need to be able to be aware of the difference there. So that if you have a very nice-looking application that works well on desktop, but it may be falling short on the design on the mobile specs. You need to keep that in mind at all times. And some of the key factors that you want to keep in mind here obviously is the font size, different elements, different forms. If you have like people filling out applications and overall the layout and design as well so that you're able to maximize the amount of space that you have and you're not carrying it all jumbled up. So it's easy for the person to navigate. Because remember, mobile phones are essentially the leaders right now in traffic sources. And so that's where the majority of traffic is going to come for websites applications. And so we want to make it as easy and as simple and as smooth as possible for these individuals to be navigating the application, that website, whatever that may be right through their mobile phones. Let's take a look at the mobile specs a bit deeper. So what the font size here? We want to make sure we have at least 16 pixels and then also increase line spacing. You can see here on this image to the right, this is a fantastic type of user interface. They're nice, design, nice and simple. You don't have too much, they're going on. And then also the size of an elements, at least 44 by 44, so that it's not too big, not too small, but it's very easy to look at and to navigate through. And then the heatmap, This is where you're obviously going to be looking at where people are clicking, where people are actually spending their time, if they're spinning at a time on, let's say, reading articles versus on a particular page, you want to be able to look at what are these individuals doing on their mobile phone when they're using my application, when they're on my website, right? So very important there. And then the forums, right? If you're having some sort of application that has people fill out their information, you're gathering or you're having people sign up as a user, right? Creating a username, having a password there. You want to also consider having a heatmap on here and make it so that it's nice and simple, right? This is where they have the entire page essentially as the actual form that that's all that there actually focusing on, right? Because just think about having a form on a particular website, landing page or whatever, right? And you have that form that is just on a small piece of that particular website on that layout for the mobile phone, right? It's going to be very distracting for the user. So you want them to click a button and take them to actually register so that that's all they have in front of them so that they can focus on just doing that and actually sign up, right? Less distractions. And then let's take a look at some layout grids here. You want to preserve readability. You want to have more air in space, right? You don't want to have things jumbled up. You want to have three textbooks for a column, five items per row. Consider having a framework that's specific and custom to what you're looking to accomplish here. But this one right here, you can see from this mobile phone here is great because there's not too much stuff going on there. It's very easy to look at what is going on there and what you can choose, what you can select. So really think about the different layout grids and the specs on that. Okay, so let's take a look at the mobile specs here for an Android phone, right? Because they're going to be a bit different than like a IOS, Apple phone and various other phone makers out there. So for mobile portrait, these are the different specs you want to keep in mind. Same thing for mobile landscape, a portrait for tablets, and then a landscape for a tablet as well. So when you're designing different elements, different components, right? You want to keep these in mind for the Android. And then here it is for the iPhone, you wanna make sure you have the column and 16 margin. And then for the iPad, you want to have a column and 16 margin as well. And then obviously you're going to have a different orientation for the iPad landscape and then also for the desktop layout. So make sure that you have a understanding of the different layouts, the specs, right? When you're creating different applications, because for the majority of the time, when you're designing or creating different applications that are going to be used pretty much exclusively on the phone or on portable devices. So you want to make sure you have the right specs, the right types of columns by types of margin, so that they show up nicely on the proper devices. And here are some specs for the Bootstrap. You want to look at phones at our 768 pixels or the tablets. You want to look at 768 pixels, 15 pixels on each side of the column. Again, this is something that you want to be able to look at and use and navigate on your own. I'm just giving you here some different specs that you should keep in mind. And what you can do. A lot of times it's just go on different applications, different websites, and look at what are the current trends, right? Look at the different reports and essentially be able to emulate how these guys have laid out their current designs and be able to look at, okay, what are some things I'm ideas, some different frameworks that I can take away from these individual, from these different applications, these different designs. And then I can use in my own designs as well. And then finally here we have the user guidance. And this is great for new users introducing a new feature updates in a user interface. And so this is typically what you're going to see when you have somebody come into a website that has different contents, different types of information where you want people to sign up, right? Or it's perhaps a service that is for free or maybe paid, or maybe they have a free version and then you can upgrade. You wanna make it nice and simple and easy for them to sign up, input their information, and be able to sign up as a user and be part of that particular website or software application. And so that's going to be here for the UI navigational components. And we'll see you on the next one. 74. Optimization Section Overview: In this video, we're going to go over the optimization section overview. So this is going to be a section here where we're going over different things such as how to get claimed feedback, different questions that ask how to optimize a particular app or website after it's been created. How you can use analytics, how you can use data and different tools to be able to maximize and optimize the performance of the website application or whatever type of project that you've developed. Let's go ahead and jump into the optimization. So one of the first things we're going to be going over is client feedback. How to give feedback from the client. Also get referrals and be able to get new customers, new clients. And then the above the fold rule, the importance of this, how this works, how this is going to make the site a whole lot more easier to read and navigate through. And then we're going to go over how to use analytical tools. How to use different tools to be able to gather data, to be able to look at where traffic is coming from, to be able to analyze a demographics and be able to use that data to more effectively optimize the performance of the website or the application itself. And then we're going to be going over the use of heatmaps and different element placements. He maps are a great thing to have on a website, especially when you're looking to find out where everybody is interacting with your site to what are the different elements that they're actually clicking on? What are the different areas that they're actually visiting the most, where they spend the most time on heatmaps in element placements are very important there. As well as the tools for optimization are gonna go over different tools that you can use if in resources to improve the overall performance of the website, right? Because you developed a website there, you're going to have traffic coming in and you want to be able to look at where it's coming from, what kind of traffic it is, what are the different sources? Is their advertisement campaigns also being ran as well? So you wanna be able to really analyze that data, optimize the application or website Emacs. And then we're going to go over some human interface guidelines, some things you should keep in mind. And then finally, going to provide you with some useful links you can use to be able to look at the different tools and resources are provided for you in this section. So we're really excited for you to get started and we'll see you on the next one. 75. Feedback Review & Getting Referrals: In this video, we're going to go over getting feedback and referrals from your existing client base. This is going to be a very important factor here when it comes to you doing freelancing or any type of client consulting because you wanna make sure that your clients are happy, dissatisfied with the results in that you can get some additional type of clients from the current relationship that you've already established. Because getting clients is a challenge in and of itself. And so when you can leverage existing clients that you have worked with, that you've been able to provide different application designs for different web designs for right? You want to leverage those and be able to get referrals from those particular clients. So let's jump into the feedback and getting referrals, okay, so one of the first things you wanna do here after you finish a project is you want to ask for feedback and a review. You want to ask them, hey, how was your experience? Are you satisfied with the end results? What things could have been improved? Is there anything that could have been done better, right? You always want to be able to get that information back or your own personal preference and then obviously always asking for referrals. Hey, do you know of anybody else or any other company out there that may benefit from my services as well. And those are the easiest ways to get additional clients, right? And one of the best ways that you can collect user feedback and client feedback is by having some kind of exit questionnaire right after you finish a project, send that over to a client and let them know, hey, listen, how was your experience? Have questions such as design up to your standards, what could have been improved? And a good thing to use is the Google forms. It's very simple to use. You just send them over a link you created in the Google Forms. And it's very easy for them to answer the questions. Or oftentimes you can just send them over an email and just have a list of questions and let them know, hey, listen, this is a question in or that we have and that we send out to all of our clients because we want to get the right type of feedback. So very important here. And when you're working as a freelancer, when you're working with clients, you want to have some sort of exits, maybe interview or some type of exit questionnaire so that you know what you can improve upon. You start seeing some trends on some of the things where you can maybe improve that you've been dropping the ball on. And I would say probably the biggest thing here to keep in mind is the asking for referrals are a lot of times people don't want to bother the clients or don't want to ask for referrals because a, you know, for whatever reason have some sort of fear behind it. However, Those are the best people to actually talk to new clients from because they've already experienced working with you. They've already paid you, you've got paid for your services. And at the least, which you want to get from these guys is some sort of case study or some sort of email that says, Hey, working with so and so was a pleasurable experience. They were able to design, it's up to par. And the design was amazingly beautiful. Things of that nature where they can provide some sort of recommendation referral, write a case study that lets them know that you did a great job in that they would recommend you to other clients because then you can use that's on your websites, on your different profiles, on different freelance web sites. And you can use that to leverage yourself to get other clients as well. But always remember, ask for referrals of anybody else that they would consider or if they know anybody that would also benefit from your services. So it's going to be here for the feedback review and we'll see you on the next one. 76. “Above the Fold” Rule: In this video, we're going to cover the above the fold rule. Now, this is something that is very important to understand when developing different websites, even with applications itself. However, websites is going to be the most important here because this is what is typically going to be shown at the very top of that websites. It's the first type of interaction or information that the actual end user is going to be seen on that website. So it's very important to have it laid out properly, to have the right type of things there, and to make sure that it's super simple and easy for the user to navigate through. But they also get the big picture and idea of what the website or application is about. But mostly for the website's right, because with the website, you want to be able to have the very first above the fold information there. Tell you exactly what this website, where this business is about, or how they can help you, right? So let's go ahead and dive into the above the fold rule. So just like I mentioned, it's the first image or screen that the user sees. This is top priority content here. As soon as they land on your website, you want them to know exactly who you are, what you do, and why it's important to them, right? You want them to be able to see, okay. I'm on this website. I know exactly what they do vs. If you notice you go to some websites that are not very well laid out though have all different kinds of stuff on the homepage, on the screen. And you don't really know what the website is about. And you gotta go through the site to find out what that business or that brand or whatever that may be or application, right, is about very important to use it wisely as far as the above the fold area and use different powerful words. Let them know exactly what you do, how you help them or how you serve the marketplace. If you're working with the clients, you want to take note of their particular customer base, their market, who are they targeting, and make sure that it's catering to that specific market. You don't want to have many types of pop-ups or any type of distractions. You want it to be straight to the point, oftentimes as an image or you have an image with a dark background and then you have like white text really bring out the actual text that also have the image in the background. So also consider different types of devices, the sizes, right? And wherever you can use interaction, interactivity to engage the user whenever possible. So oftentimes nowadays where you'd have like a modern design website, you will see, typically when you land on the website, everything will pop up and it'll be interactive. So the words will come on like a sliding or from the top, from the bottom. Same thing for the image. So make sure using some of those types of elements as well. And this is a screenshot here for my particular website for one of my businesses. I have the above the fold rule here that I'm implementing Where I have at the top, I have the menu, and then this is the homepage. You can see there that an image in the background, it's essentially a security type of image, and then there's a dark layer behind it as well. And when you land on my website, you can see here from the text and from the button there, it tells you exactly what we do and how we help businesses. And then it has a button there to be able to learn more. So we help security businesses book meetings, and secure contracts. So if somebody who landed on my website, right, you're right. They would obviously, from the very first second that they land on here, wouldn't know exactly what I do with the business does, how it helps, you know, different clients and ultimately what the business is accomplished, right? So that is important to know there into notes that anytime you are designing anywhere above the fold and you're using that space to make it so that it's interacting with the user and it's telling them exactly what it's about. So okay, so that's gonna be here for the, above the fold and above the fold rule. Remember, you want to make it so that when somebody lands on that particular area, they know exactly what the site is about and it's getting them to understand why they should stay on here or take whatever action that you want them to say, Right? So that's gonna be here for this one, and we'll see you on the next one. 77. Adobe XD lesson - Designing a Powerful Above the Fold: Hi there. In this video we will design above the falls section for both mobile and desktop layouts. Let's start with a description of the above default. Above the fault is the first seen area. These dotted line in x D shows us where these section is. Let me show you an example. This is the level to which the mockup a scene. So it's the first screen without scroll. Same for mobile. Let's start to design something beautiful. I will create the top navigation for now. Let me put some logo here. I've got the logo. A few links for navigation. Firstly, you have to place powerful text. I'm not pretending to be a best CodeWriter above the fold may have no call to action or have one call-to-action or several call traction. Like me showcase you the Bob default with two CO, two actions. Let's define the size of the BALTAM. These, that this one will be the main priority. I think the right one would be the high priority call to action. The other one will be secondary button. Now we have a structure of both we would like to include in our above the fold. Now it's time to define the background, which of course be eye-catching, fascinating, remarkable. One I will use on splashing Paxos.com because they have free assets. Here's the image. Of course, the image should be emotional. The process of picking the image is most challenging anything. Now it's time to make the text readable. Here we have Ghost button. And we can under fond we want. So we've used OS fault all caps. Now it's time to tint the image a bit so the text will be suitable. Or we have lied to dark options for tags. Well, we're gonna do is create another layer with a capacity with some filter. Well, better than I was, but still not perfect. That's crop. Some cases when you have the chance to invert your logo to white instead of being black. You may do it in order to create a seamless about default section. And so it looks like this. Please make sure that your brand supports inverting colors in logo. So I d will work on dark background, looks better. So I would like to add some emphasis here on these buttons, so more attractive and trendy. Same term. I think that's all. You may finish it by creating the component from this bottom. Control plus K, n is small animation. We can move the arrow a little bit to the left. Maybe a passage is too much here, can go without it. Let's try. And for features, we may add some capacity on harbor. Just this slight capacity on hover. So feels like interactive. Maybe we need more capacity. Okay. You may make some similar effects for two of them. Ok, now, what is left is to attach the link to your buttons so the Take your user in the right direction. I hope this video was useful. Thank you very much for your attention. See you in our next lesson. 78. Using Analytics For Optimization: In this video, we're going to go over the power of using analytics. So you design a website, you've designed a particular application, some sort of software. And so now you're getting traffic through paid advertising or any type of organic search or whatever that may be, right? You're having visitors there, you having users interacting with the platform, the application. And so what you want to do now is you want to start analyzing that data and start analyzing those users such as, where are they coming from? How long are they staying on the websites that had been sources of traffic, right? So this is where we're going to be jumping into, being able to analyze all of those users, all that traffic, and how you can look at different key data points. So you can use that data to your advantage. So let's go ahead and jump into using analytics. So with using analytics, right, you're going to be able to find out so many different things about your traffic, about the website as far as the proportion of new users versus returning visitors. Additional data points such as page a bounce rate, which means that how many times somebody will go onto a website or a homepage, right? And the proportion or the percentage of people that leave right after they go to that website because it's not what they're looking for. You want that to be very low bounce rate because you want people to be actually going to your website because they've found you on search, or they've clicked your ad or whatever kind of method that they've chosen or they've taken to actually go to your website and have it all be relevant, right? Because let's say you have like a sales funnel, you have an ad that is talking about some specific offer or some specific feature or whatever that may be, right? Your intent is to get them to your website, to your homepage. Now, if they're going through that sales funnel and they're clicking on certain pages. And they finally, after a few different steps, land on your website and then they quickly leave because the information that you presented on the ad and on the landing page isn't relevant to what they're looking for. That's where you're going to have a high bounce rate. A great example of this is let's say you have like a business that is a brick and mortar. This is just an example here. And you have a dentist that's offering a dental implants offer 4909, right? One of the other examples that we did in the sales funnel and landing pages. So if that individual clicks on the actual advertisement and that landing page, let's say perhaps talks about cleaning or it doesn't talk anything about the dental implants. Well, they're going to bounce out of that page very quickly because it's not relevant to what they chose to, what they clicked on as far as what they saw in the ad. So that's why it's hyper important that the bounce rate be reduced. And you have the advertisements, you have your search queries out there. They're all relevant to what that individuals looking for. The next couple of pieces of data is the traffic source. And then also understanding if you're any kind of languages, you know, sometimes you may need to add a different language if you're noticing people from different countries are going there as obviously what people are using the majority of the time. And it's just a great way to be able to look at the mobile versus desktop, but then also look at what specific type of devices are using. And another thing that you can find out with the use of analytics is looking at the audiences and looking at the user Pat. So what type of path are they taking to actually land on your website? Are they coming from an external link or the coming directly to the websites? Are they coming from a specific advertisement, right, so you can really track how that user ended up on the website, very important information. And then also be able to run AB testing, right? Ab testing is essentially where you have two different ads that have essentially similar type of content material. But there's one little component that is changed in one of the ads so that you're testing, let's say a headline, let's say an image. However, for the most part, you're going to be having them be the same with just one particular component that is changed. A good example of this is, let's say you have two different types of ads, uh, you're testing out and you have the same copy messaging on both of those ads. However, the one component that you're testing is the image. So you wanna see which image is actually the one resonated the most with people. So that is what you would consider an AB type of split tests, right? Where you're testing just one component there and where you're going to be able to find all of this data is with Google Analytics, something that is highly recommended. It's free every single websites or web application. If it's health it online, you can attach Google Analytics to it and be able to look at all of these different data. So you can really look at what type of users are really engaging and interacting with the website or application. So that's going to be here for the use of analytics. And we'll see you in the next one. 79. Heat Maps & Element Placements: In this video, we're going to go over the important of using heatmaps and a bunch of other different resources that you're going to need in order to make sure that you're analyzing the website or whatever type of product that you developed where you have constant traffic, you have constant interaction with different audiences. So let's go ahead and jump into using heatmaps and some additional resources. Now when it comes to user experience and user interface, heatmaps are one of the most powerful ways you can really measure the overall design of that particular application or website. Because you can look at where people are spending their time. If they're spending their time up on the header navigation or the spending the time actually, you know, playing with the different factors on the website such as the body of the text or on the sidebar, or are they clicking on a specific button that you want them to click on so they can go into the next stage of your sales funnel, are the buying a product, right? Let's say there's an e-commerce store. You want to make sure and look at where people are going. Are the actually selecting the add to cart, are the actually checking out? Why aren't they checking out? Where are they spending the majority of their time? And so what you can do is use grouping to differentiate u, iv and sections, right? You can use the header and want to make sure, hey, how many lending their time up on the header, how new spending their time on the footer, Holman, you're actually clicking on certain buttons. So you really want to get this to be very precise. And one of the things that you can do is also use the whitespace quite a bit there to preserve the readability, especially on mobile devices, you want to make it so that there's a lot of whitespace. So that's easy to read, that's easy to navigate through a pleasurable experience, right? Because if you have so much stuff on a particular page, just think about this image right here. Obviously this isn't a website or an application, is just showing you different elements. However, just imagine if you landed on a site that had all of these different buttons, all of these different components and jumbled up like this together, right? It wouldn't be a very pleasurable or exciting experience. You'd be confused. It would be just too much stuff going on all at once. They are so very important to make sure you're preserving the whitespace for better readability and you're increasing length spacing on the mobile devices. And one of the things you can also do is look to use shorter pieces of texts, right? So if you look at this image right here, you just have small pieces of text such as registration, login. You have, let's say message board or last message, things that are going to be very short pieces of texts or they're not eating up a lot of room. And you always want to remember the UI fundamentals, right? You want to make sure that you have enough room for all the different components, all the different elements. And you're using them appropriately and you're not overwhelming a user when they're using the websites, when they're on the website, or when they're using a specific application. Okay, so now let's take a look at a couple of tools here for research that you're going to be able to use. Like I mentioned previously, a Google Analytics is going to give you a great, great overview of where the traffic is coming from. Types, traffic that the demographics that locations, the ages and devices. Same thing with the index i, however, Google Analytics is probably the most trusted as far as the source there because you can just connect it to the website and it's going to be able to pull in all different types of sources. So the next thing that you want to look at is the human interface design guideline, making sure that you have the right guidelines set up for the different iOS devices, right? On a laptop, on an actual tablets, the actual Watch as well, right? And this is something that's fairly new to the marketplace, and also Apple TVs. And then here are some useful links that you can use as well. So we have n an in-group dot com Material, dot au slash design, I design inspiration.com, and then a bunch of other different resources as well that you can check out as far as for the overall improvement in the optimization of the website, the application, or whatever product that you've developed or built. So that's going to be here for the heatmaps, placements, and additional resources. And we'll see you on the next one. 80. Crafting A Usability Report Overview: In this video, we're going to go over crafting your usability report. So this type of report is going to be great for an audit. Let's say you have a potential client that is wanting to get some work done and they wanted to get an overview of their current site and its functionality. One of the things you can do is create a usability report to show them and identify different opportunities, different types of designs that would really help them out and show them different technical issues, different site speed issues, different SEO issues, and really talk about different types of improvement. Second, really enhance that website or the application. And this is going to go a long way, especially in the initial bidding stage where let's say you are bidding on this particular project and the client wants you to showcase your best foot forward, right? Put your best foot forward. Well, you can send them a particular usability report and show them, hey, this is what I found on your site. This is the problems, the issues, you know, the opportunities that I've found. And then it really puts you ahead of the curve. And it puts you in a different level than your competition because you're willing to provide value up front before you're getting paid for any of the actual services. So once again, the report is going to be for a client and some of the most common objectives here that you're going to go through and actually include is identifying the opportunities, looking for different design changes that can easily increase their user experience, user interface, and then also identify different technical issues that I mentioned. And then number four, you can discuss different types of improvement. So when you look at the business objectives here, this is going to be the very first thing that you have to understand. You have to understand what are they ultimately trying to achieve or are they trying to sell a product? Are they trying to sell a service? Or they're just trying to get email sign-ups, or they're just trying to get users to sign up for a particular application. You know, what is it that they're looking to accomplish? Really want to be able to understand that. And once you have that end goal of your clients, and then everything else can just follow. So you understand the business objectives, the ultimate goal you're looking to accomplish. Now you want to understand the persona's and user flows. Do they have the right type of target market that they're going after? Do they understand their target market? Do they understand the needs, the wants, right? And do they have a specific flow or customer journey or even sales funnel, right, for them to follow and actually go through to become a paying customer or to actually sign up for an email list or whatever that may be, whatever action they want them to take. And so you can draw that out here in Adobe XD, and we're going to have that in Adobe X z. In the next lesson, we're Arthur is going to walk you through how to create a usability report from scratch. You don't need to create it from scratch. You can get a template. Just change up some of the information yourself, however, you're going to be able to see how to create that in Adobe XD from scratch. In this particular drawing here is created in draw that I0. This is a great tool that really gives you the ability to layout and map out a specific user flow, right? And then going down here, working with data, this is where you've been able to get access to maybe their Google Analytics or any type of analytic software that shows them what are the demographics of that traffic? What type of devices are they using? You can use sites like SEMrush that really give you a good indication of the actual website visitors how much traffic that traffic is coming from, whether or not they have a traffic as well. And so you don't need to have access to their Google Analytics unless they've actually given you access to that, right? And then going down here, usability review, looking at him walking through, maybe let's say buying a product or signing up as an email opt-in, right? Whatever that may be, you want to walk through usability experience and go through it as if you were a customer so that you can get a good understanding of how it works in different areas to improve upon that, right? And then user journeys, right? You want to understand where they're actually coming from, how much information you providing them. You want to make sure that design is consistent all across the board on all different pages, that there isn't any issues with the alignment, that there's good color schemes, that there isn't any kind of issues would page hierarchy or content hierarchy rate. And then making sure that it's mobile responsive in that it shows also on the desktop at a very nice rape. And that obviously shows very well on the desktop as well. And here's a thing you don't need to include everything here. I think the most important, as I mentioned in the very beginning, is just giving them as far as like a swot analysis, strengths, weaknesses, opportunities, and threats, right? And then giving them ultimately a strategy or a go-to plan like, hey, this is what you can improve to actually increase and enhance your UX, right, your UX to new UI. And then right here, this is the performance of a website you can easily go to, I think it's Google lighthouse, or you can just type into Google, Google search SEO tool or something like that. And you can pull up and you can put in the website URL in there. And it'll show you how fast the website loads. Seo speed, issues with technical issues with the website. And so it's a great resource. And then down here, this is for like different color schemes. And then the technical review, I mentioned the performance of the website, making sure that it's actually optimizing its loading fast enough, right? Because a lot of times they're getting so much stuff going on, on a website or there's so much data and maybe the images are very large. The videos take up a lot of space or whatever that may be, that it's costing the actual website, you know, a very long time for it to load up. And so you want it to be typically within one to two seconds, the website loading. And so you want to make sure that you're performing a website speed type of analysis as well. And then going down here and to the best practices and letting them know what they should expect, what they should have on their particular heading, making sure that following the right type of specs for like mobile on different types of mobile devices, right? And then SEO, right? Making sure that they have good search engine optimization and that they're using that to their advantage, right? And then ultimately, the opportunities here you want to show them, hey, this is what you're missing. This is what you can do to improve and this is how much a would improve your particular website. So this is a nice and simple video here, just giving you an overview of a usability report. You can find these pretty much anywhere. You go, literally just Google usability report and they can get quite complex, but you don't need them to be super-duper complex. Good. Five to ten pages should be just fine. I think one of these here, this is one of 43 pages here. This is a user experience ADI here, sample report. You don't need to go this much in-depth. However, you can look at what this has here, right? You have a table of contents and see here the homepage. And then it has down here navigation and findability, right? And then the search analysis. And then it shows the most axis page, right? So it shows you essentially what you can expect. And this is like I said, very much so in depth. You don't need it to be five to ten pages. You don't need it to be 40 pages. You just need it to be, you know, good 5-10 pages and give them an overview of what you've been able to find and then the opportunities that they're missing and how they can improve the overall experience on the website. So that's going to be here for this one. Like I said, Arthur's going to walk you through how to create a usability report in the next video. So that's it for this video, and we'll see you on the next one. 81. Adobe XD lesson - Crafting Reports in XD: Welcome back. And this will be the last lesson where I will show you how to craft your usability report or any other report during your UX process. And first of all, I would like to start with a data structure or information structure on the canvas. I prefer to create problem solution layout with a screenshot if these is available. So let's start and bring up sample screenshot. So your canvas and type problem. Then solution. Sorry, important to find one. And these should be the list of problems you found. Let me change the background a little bit. So it has a small contrast. So design right now is not a delta important, as you may already realize. And first will go bad or, or quality of the main image, then the layout is not responsive. It's just for instance, Adobe.com doesn't have anything. With that. Surge is showing you the examples. And the third will be too small. Font is used in the body. So if your reader, people that will read your report, it's nice to have these bullet points to be reflected on the canvas as well. So for this one to do that, you need to pick up a contrasting color. Usually orange. And it's nice to have and small outline so it doesn't mix with the, with the content. And we have some point here. It will be a PIN number one. And poor quality of main image will go here. Okay, let's imagine that this is not SVG to this. That is something very compressed. Okay? Fine, brighter color, okay. You may add shadow if we wanted to stand out a bit more. This is bullet number one. The bullet number two, the layout is not responsive. You may put it somewhere here. Because it's general thing. Too small fonts is used for the body. And here goes the third one. Ok. Now you see, we can read, we may look, see what is meant by these three points. Of course, you have to come up with solutions because otherwise it will be loaded without analysis. So you have to propose some solutions. And let's imagine that everything where I wrote is real and the image should be traced into SVG. Okay, so we have to use the original image from like, let's imagine this is a JPEG image. Build the vectorial file and export it to SVG so no quality loss will occur. The layout is not responsive. Ok, this is simple, create at on disability to the layout. Okay, too small fonts is used to the body. And the body use at least 60 pixels. Sans serif. Okay, so right now, you not only pointing on the problem, you also provide a solution. The same applies for a very window, every screen or every page you are reviewing and how you may send it to your client. If a person reviews these on the computer, it's better to use the landscape layout. If you want to print this report. Perhaps you may consider the portrait layout. Although it's slightly harder to implement the structure to the landscape. But if we are talking about A4 format or letter format, I think that's something close to where I've, the ratio is close to what I've just designed. Once you discovered all problems, he found, you may begin to find solutions. You may create a separate text document to find these, but also, please keep in mind that you have to do. You have to make screenshots. So you want do the double work. You may create a separate text document where you find. You put down problems and solutions. We also have two screenshots so you can easily copy them to your odd boats in XD. Okay? And of course you may like to add some styling. Lets pick a logo for us. We have a logo. Now let's make some styling. Lets some styling to our font. You may use Layout Create to create consistent slides. Let's add our current date to get About page number. And one thing I've missed is the section or page that you are reviewing. Homepage should be written here. Now we have some difficulties with on here came at some small icon that will bring some diversity to your slide. You may add your email. And the bottom if we want to. The other thing is that you need to have an introduction Larry Page, which will show your introduction, which will explain which factors you considered while you designed your usability owed it. Let's try to do a couple of things. First of all, I need to create another page. Let's name it intro. You may add your personal name or company name depending on how you present yourself here. By. And women put slight background for making it more graphically interesting. So let's add an image. Here. I just want to keep these lights style. Now you may export your document into, let's see, exports all boats. Here. Select PDF. You want it to be a multiple pdf file. So each page would be separate PDF file. You select multiple PDF files. If you want to. Your report would be all in one file, but with the multiple pages inside it, you just Select single PDF file. And I've opened this document and I see that there are two pages text this can be selected, can be copied, pasted, and of course, could be printed. Again, if you want that to be printed initially, just without showing on digital displays, its better to prepare. The portrait layout for A4 or letter format depends on the region, country, besides the cover and the content pages, it's nice to create another page which will state what is this report about? What is his ability or and here I have the text which I am using over all my reports just to let the client know what are you doing and what for. The other thing which you may use is adding a section where you compare good and bad user experience. Let's do it. So good You acts is something that lays on detected ten unnoticed. It provides users filling of simplicity and elegance that exist behind the scenes in the small details. But it, but it's essential for your company. And the people who use your products. Per UX also lays undetected and unnoticed. However, it results in clutter frustration, feelings of distaste. People will save this product is confusing or something just isn't right, or I'm lost, a poor experience and usability may not immediately drive customers away, but over time it will. So let's read the description. A user experience, oh, did is an assessment of the usability of the website or software application by a user experience or UX designer. We take your business goals and your target audience goals into concentration to evaluate whether there is anything on your site that is preventing you or your users from achieving those goals. Everything from the typography, layout, and flow is evaluated against established usability principles, scientific research, practices, and current trends to create intuitive websites that resonate with the way your user. Thanks. So when person opens your audit, so we have the title, we have information. What is the user experience? Oh, did what is good and bad user experience? And the content goes on every page that you are reviewing will have the problem solution and this end screenshots as visual support for your findings. Another thing I suggest for you to include is the overall score or conclusion in your report as a last page. I have the same layout as your previous text pages, but will have the conclusion. You may write here. Overall, the website looks good, but however, it prevents users from achieving their goals. Due to these reasons, the following reasons. Due to the absence of proper fonts or graphics, whatever. Due to the complex interaction, due to the complex structure, due to the absence of user friendly navigation. We're navigation has to be rethink and so on and so forth. And other thing is to break down some categories of digital products. And you may have a band score for Overview. And have a search rating like top three feedback and errors. 19 to ten, task orientation. 90 to ten. So 90 is good, ten is bad. I mean, 90%. Forums and data entry. Could be that main page, the overall score of Main Page, Layout and visual design, navigation, trust level, content, quality. And we may include Page Speed. So depending on the subject of your research, you may add these sections into your overall score into the lab on the last page of your report. Let me explain a bit. I think that has to be explained in greater detail. Okay, I've pre-designed pit this section. So the search is the Place. Search corresponds to the position of this website in search engines using the keywords that are relevant, feedback and errors is when a user understand when the system communicates with the user and provide feedback on some events. Whether it's a mistake, whether it's everything is fine or so on and so forth. Forums and data entry is the score of work interaction with the forms and entering the data. Well, I think it speaks for itself. How comfort, how easy is the structure of forums that IQ test on this website are? System. The main page score is just the overall score of the main page and it's abstract, you can measure it. Of course, it all depends on your experience and your knowledge and your judgment, layout and visual design. This is also the abstract score for the overall design modification. How easy is to navigate a website. And I think I missed task orientation. This parameter is the indication of how easy it is to understand what I have to do in order to get from point a to point B. Let's imagine I will like to buy tickets to the concert and have to know where start my buying process, where I have to press, where have to click. Let's imagine a would like to buy tickets to a concert. The good task orientation is when there will be very clear button search for tickets, for instance, and there will be easy filter listing and so on and so forth in order to ease the process of searching and buying tickets. So it basically task orientation is the path that I have to undergo from point a to point B. It should be clear, if it's not, means that the score will be lower. The trust level for websites can be spread to a several categories, like you may rely to this website in terms of sharing your personal information, your financial information, or business information on other confidential information. And it also requires to have additional protocols like SSL or other protocols that are required for processing money transfers or other financial transactions. And if you found some evidence that this website was suspected in fraud or something like that or the other negative feedback. That means that the trust level will be lower. Content quality reflects the overall score for all content together, which includes tags and media content. Whether it's interesting whether Ford imagery that is used is custom-made, not stock images. Whether texts Britain is interesting, whether the article has relevant cover image and so on and so forth. Page speed is the service brought by Google and it calculates the overall Page Speed and suggests to improve some parts of the website in order to increase discoverability. So there could be some technical things. There could be some designing things, fixing a code or replacing image, or converting images to more modern format, quoting some pages meta keywords. And it clearly shows how this website is seen by Google. So you want your website to be Google friendly. You have to fix these errors that pulpy found on your website by the page speed. So overviewing conclusion are the, let us say a sort of extended version of Report. And again, you will export this as all our boards and single PDF file. And we will have all pages in one PDF for reviewing by your stakeholders. So I think that's all for now. Thank you very much for your attention. I wish you good luck with crafting your visibility user experience, reports. 82. Careers in UX/UI Section Overview: In this video, we're going to go over starting a career in the UX UI field. Now this particular section here is going to be quite intensive. Here we're going to have a lot of content, a lot of material. Because we're going to go over quite a bit. I'm going to walk through several different things such as how to build a brand, personal branding, how to set up a website, had a network, all of these great things that you need to understand and know about when you're starting a career in the UX UI field. One of the things that I mentioned previously in one of the other lectures and, and throughout this program in general is that you want to be multifaceted when you are stepping into the UX UI feel, especially if you're going to be working for smaller organizations, small to medium sized businesses, or even the startup organizations, right? You want to be someone that understands not only UX UI, but also understands sales funnels. Behavioral psychology, user psychology, right? So that you can not only understand your roles, but also understand the roles of others in the actual design phase in the organization as far as the design, so that you can be that much more valuable to an organization. And for whatever reason, if there's anytime that there's layoffs than you're going to be the person that sticks because of your value outside of just having the UX UI, right? You understanding how to write copy, copy framework, sales funnels, customer journey, all of those additional types of skills and knowledge that not a typical UX UI designer would know. So let's go ahead and jumping to the starting a career in UX UI section overview. So some of the things that we're going to be covering here is the freelance and client consulting. We're gonna walk through several different freelance web sites. I'm going to walk you through how to set up your website. I'm going to walk you through how to also get started with Clang consulting. I'm going to give you some examples of Arthur and his particular profile on Upwork and then also several different other platforms as well. And give you some tips on that. And then I'm going to walk through something that is extremely powerful, that is probably worth more than an entire course in and of itself. And this is going to be my particular templates that I use on notion that is for your personal life and your actual business and work. And with this particular templates, you're going to be able to run your entire life out of this as well as any type of client projects working within a team or whatever, then a b, you're going to see just how powerful this is. It's a pre-made templates where you have different sections. You have different areas for projects, you'll have different areas for clients. I have different areas for your personal stuff and it's just going to be something that you'll be able to use for your entire life or for also your project. So I'm very excited to be able to present that to you and show you just the true power of it. And then we're going to be talking about building a brand, personal branding, understanding what a brand is, the importance of it. And how you can develop and how you can leverage personal branding to get your name out there as a UX UI designer. And this is extremely important, especially if you are going to be going to freelance route and you want to get your own clients. You want to be able to be out there on the web right? In as many different places as possible. Especially also if you're looking to get a job. One of the first things that employers will do now when they get an application is the application to look at experience and what not. But they'll also be looking at Google. There'll be Googling the applicant to look at, are they online? What kind of, you know, what does online profiles look like? Do they have a Facebook page that they have a business page, right? All of these different things are, the employers are going to take into account because they want in actual individual in there that is unique, that is different, that is going to set themselves apart from the rest of the competition, which just has, let's say, an application, write a resume with some experience, right? And then we're going to be going over the importance of having a website and blog and how you can really showcase your portfolio. Showcase maybe some testimonials from working with clients. So somebody, your work, right. This is going to be something that's extremely powerful for you to have, especially if you're going down the freelancer mode and then networking. This is also going to be extremely important for getting clients, but also would getting jobs right? Being able to understand how you can leverage your existing network, but then also be able to go out there and network with others and be able to have them introduce you to our put you in positions to be able to find certain positions, certain people that can turn into a client or potential employers. And then we'll walk through some of the top freelance websites. Some of the top ones that I recommend, some of the ones that you should be on, some of the ones that you shouldn't be on. Loss will walk through some of the different sites so you can put your portfolio on and you can actually get some jobs and get some clients. And then we'll go through some of the questions that you want to have as far as for scoping a project for UX and UI, right? You want to be able to have a set of questions that you are asking your potential client or when you're starting off and you're working in a team. Or maybe you're doing a UX UI yourself at a smaller organization. You want to have these types of questions set up so that you can start the actual project and actually get into the design phase, right? And then finally, we're going to end it with the best places to find UI and UX job. So this is going to be a resource here. I'm going to show you over the shoulder different sites and you can go and actually look for open positions. Some of the things to take note of, some of the best ways to open up your messages, right? And so this is going to be a big section here. I'm excited for you to get started. And that's going to be here for starting a career in the UI UX section overview. And we'll see you on the next one. 83. Your Daily Productivity Hub: Okay, so in this video, we're going to go over your daily productivity tool, which is going to be through notion. Now notion here is a fantastic productivity tool similar to a sauna Trello. Some of the main big names out there, however, notion has a ton of more features that are available to you and it's 100% free. And as you can see here, you can create different types of workspaces. You can keep track of your projects, your to-do list. I'm going to have so many different things that you can do. And what I've been able to set up for you is a done for you templates where it has in there your vision, your goals and your outcomes, your different projects, your daily productivity as far as your tasks, and then your CRM for your clients. So you're going to be able to manage everything through this hub. You're going to be able to manage your clients, your to-do list, look at your different projects with your clients. It's just a fantastic tool to be able to come in here every single day. And instead of your to-dos, update your CRM, your different milestones. So let's go ahead and login here. All you gotta do is sign up and just use your e-mail sign-up. So let's go to login here. It's going to continue. This is pretty much blink. There's a lot of different things that we can do. However, we're going to install the done for you template that I've created for you. So let me go ahead and grab that over here. So you're going to get access to a special link. So you gotta do is copy that link, put it in here. So this is the actual template here that we're going to set up. So let's go to duplicate. And this is being added to your particular actual hub here. So we can see here that it has been added. And so this is where we're going to be working with every single day. So every single day, when you come in here, you want to look at your different tasks. You want to look at your CRM. And as you can see here, it talks about outlining your vision and your goals and then your outcome. So your goals are essentially what you want to do and the outcomes is essentially the result of what you're going to do, right? How you're going to actually accomplish that. And then we have the projects, then we have the milestones, and then the tasks, and then a CRM, and then we have the goals and outcomes. So as you can see here, we have the outcomes. And so this is the actual result of what we want from our goal. So I have a goal here to get more organized. Well, what's the direct result of that? Right. Well, I need to plan each week based on an eight hour workday. Okay. And then right here B on top of my finances, keep daily track of my finances by creating monthly budgets right, right here. Create 350 YouTube videos for this year. And then how am I going to accomplish that? Well, I'm going to batch record videos on Saturday and post daily YouTube videos. And then we'll go right here. I want to weigh 225 pounds. So how am I going to do that? Well, going to the gym in the mornings and then focusing on salads and greens. So this is how you're going to set up your outcomes. Remember, the outcomes are the direct result and how you're going to accomplish that, right. So it's important for you to have your goals up here and then your outcomes right there, and you'll see everything's attached. So we go here to the actual outcome here. So plan each week based on eight hour workday. And it's connected to this particular goal. Okay. And you can add in here specific date if you want to do a specific actual day in time, start date, and time. And then right here you can put the status here. You can put on track, and then we can also assign it to a specific quarter. So and so let's say you wanted to do all quarters here the entire year. So we'll go ahead and set that up and then this will show you all the quarters here, okay? So you want this to be done and the entire year, so you have all four quarters here. If you want to just have one or two, you can do that as well. And then you can assign different tasks to it. You can come down here and add in some additional information, whatever that may be, right? This is a very, very good tool for you to be able to set up your goals, your outcomes, right, in this particular area here. So that's how you set up your goals, your outcomes, very simple to set up. Let's go ahead and go back here. I want to show you one more thing. They have different emojis. You can go to random here and I'll just put in whatever you want. Or you can just go through here and find whatever emoji you want that setup there with, right? And so let's go ahead and exit out of this. And then let's go down here. So then we have projects. Okay? So projects are like for your clients, right? If you're working with a particular client, you want to be able to set them up on a particular project. And you want to put in here the dates as far as and when you start it with them, when is the agreement over? You know, typically if you're working with clients, you're going to be doing anywhere between 3612 month agreements. So let's say this one here is for a particular client. Here we put in the dates. We can assign this to a certain person. We can put in the fattest here. And then we go down here and then we can see the actual calendar where we can put in different information. So let's say in here, we can put its setup landing page, okay? And this to be done here on, let's say the tenth, okay? And then we can add in whatever we want here for low smiley face, okay? And then it's cooled back. So we have that right there. And then down here we have the Kanban flow tasks where you can add in different tasks. You can put in different months here. You can change this four days, whatever the you want to do here. It's very easy to change this up and you can add in different things. So let's go, let's even go like this. So basically, all you gotta do, if you want to add something here, you go to this place right here in our show you different elements that you can add in here. So if you want to add just text, if you want to add a page, you want to add a to-do list. If you want to add heading one, heading two. If you want to add a bullet list. Okay, numbered. Toggle this quote divider. You can add in different tables, different boards, kinda like the one we have here. And then, you know, here's like a gallery. Here's a simple list calendar. So you have so many different things in here that you can add and modify with this particular tool. You can add different media, video, audio, you could embed from different places. So this is just a great, great tool, right? If I wanted to come in here and add an another, let's say calendar. Okay. This is go down here. Calendar right there. Boom. So that's how simple it is to add an a calendar, right? This is all very simple, very easy to navigate and use. And like I said, you want to have your kinds all into separate projects, okay? And this is where you can manage everything here. So then we go down here to the milestones. And this is for each quarter. So this would be, you know, hey, for q one, these are the milestones that I want to have in my agency. I want this revenue, I want this to be done, and I want to be able to accomplish this. I want that to be accomplished, right? All those different things that you want to to accomplish each particular quarter, right? You'll be able to set that up in here. And it's great to have because you want to be able to measure what you're doing and making sure that you're on track and that you have no dates that you're following in different milestones that you're looking to reach right through your daily work. So let's go up here now and let's go to Tasks. Now. This is your daily tasks rank. And this is so great. I mean, I wish I had something like this when I first started to where you can literally run your entire life through here as well as your agency. And so let's say that you want to set up a new email campaign where you would set up a new task. So then you would put in the date, the person attached to any of these other factors here that you want to put in here. Let's say we wanted to change the status here to In Progress, right? And then we can add in whatever notes in here that we want. We can put in. All is needed. Is the email list, right? Or you can just put that into notes here, right? If you want to just leave notes for yourself, you can just copy this. And then go right here, add a comment, okay? And then boom, and then right there, and then it's going to put in the notes, right? So this is such a fantastic tool. I just cannot talk about this enough. This tool is a complete lifesaver. You can manage, like I said, your entire life as well as your agency through here. So that's how simple you would set this up. And let's say you were able to finish this. Okay, great, done. That's how simple it is. And then right there you can see there's a little comment in there, right? And then down here, this is your CRM. So this is where you would set up for your clients, right? Let's say that you had, you know, for this one here, the leads, right. You can put in the website. Any other additional features here that you want to add and then the comments in the note. So, you know, let's say you were to come in here and be like, you know, spoke to the client and they want to get started. Next week. You can add a like this or you can just copy and go right there and put that right there. And one of the other things that you can do is adding a comment to this particular line here. So let's say you put we'll follow-up. But the client next week. Okay. And then bone. And so now you can see there's a little comment right there. So this is just a fantastic tool. I mean, I just cannot talk about this enough. Like I said, this is just one of those tools where you wish that you had this, you know, when you first started or when I first started. I wish I had something like this that was able to allow me to control and set up my entire life as well as my business. Okay? So that's how you want to use the CRM in here, can also attach this to specific projects, specific goals, right? So right here, I don't want to attach it to that, right? Because this is for this client. Let's say this client was the one that actually signed up, right? So now we can see this is attached to XYZ client appear, right? And so that's how we would set that up. So this is how you're going to be able to manage your client's here with the CRM, manage your to-do list every day as far as your tasks, your goals, your outcomes for yourself, for your agency, rank, and just be able to manage everything all in one place. It's just a fantastic tool. And then down here, we have our one of the day, if you want to have a specific thing that you had successful throughout the day, you can add that right there. Here's the one of the week, if you want to add in particular when that you had, let's say on Sunday and then perhaps layout like a win of the week. And then we have a weekly review here as well, kind of what you did, how things went. You can see here the effectiveness, gratitude, lows, challenges, wins, right? So a fantastic way to set up your weekly reviews. And then also here what the monthly review, right? So once again, all you need to do to get this set up here is to get a special link once you sign up and then you're going to be able to copy this template and set it up in to your particular hub here. And this is your daily productivity hub. All you gotta do is come in here every single day in terms of your vision here, right? As soon as you lay this out, you want to put in the links in here so you can visit this every single day, right, daily. And then your goals and outcomes, right? Making sure that you're on track and that you're doing what you need to do. And you've set everything up here and then your projects for your clients or even personal projects or whatever it is that you're doing right? You want to make sure that you keep track of your different projects as far as working with clients and be doing in a kind of branding maybe for yourself, right? Like I said, you can manage not only your business, but your entire life in here, okay. Very, very powerful tool. And then obviously here with the milestones, making sure that you have specific numbers or things that you're trying to accomplish, right, each quarter. And then your tasks here, daily productivity, making sure that you're on track as far as what do you need to do today? What do you need to do tomorrow, right? And then your CRM down here, okay, so fantastic tool. This is what is going to allow you to really keep everything inline, keep everything organized, and be as productive as possible. So that's gonna be here for this one, and we'll see you on the next one. 84. How To Start Freelancing: In this video, we're going to go over freelancing. Now this is something that if you're just starting out in your UX UI career, then freelancing is something that you may want to start off working with because it's going to give you some experience. It's going to allow you to get some work under your belt, some case studies, right? Some referrals, testimonials. And then you'll be able to leverage that to get more clients or even to get a job if that's your ultimate goal, right? So let's go ahead and jump into freelancing and what you can expect from being a freelance UX UI designer. So with freelancing, you're essentially self-employed and you take on contract work for other companies and you're typically going to be working within like a freelance website to such as Upwork, Freelancer or fiber or any of these other ones out there that are in the marketplace where you have clients coming to you with projects and then you go and you essentially bid on them. And you put your best foot forward and you actually get these contracts. That's one of the best things about freelancing on these platforms is that you don't have to go out there and spend time and energy and resources on client acquisition, right? Because if you are a standalone business and you're not using these platforms in, it's going to be quite a challenge for you to get clients. And especially would you not having experience in getting clients, right? So freelancing is a great way to start because you have the ability to have clients come to you, projects come to you and you get to pick and choose which particular projects you want to work for. Now, one of the best ways to use these different freelance web sites is to make sure that at the very beginning, if you're just starting out, right, maybe you've gone through this course, you've had some additional training. You want to get started with UX UI design jobs. Well, what you should look for when you're just starting out is small UX UI jobs that you can work on for very low costs, right? You don't want to really worry about how much you're getting paid right now. Because as your experience and your actual project basing proves and increases, then you'll be able to slowly move up your hourly rates or your project rate. And you'll be able to command higher prices, right? I'll walk through later on in this lesson here an example of Arthur and his profile, how he was able to do the same where in the beginning he'd started off some lower tier jobs. Now he has a lot of the jobs that come to him directly and he gets essentially pick and choose. And just like I mentioned, the whole intent here is you want to be getting small jobs that you can essentially get some feedback. Width, gets some testimonials, get some case studies, build up your profile score, right? And then be able to increase your hourly rate. Now, here's the thing. When applying to freelance jobs. You want to make sure in your application that it is catered and specific to that project, right. Because I myself even post a lot of jobs on Upwork and you'd be surprised how many times people will respond. Job post with just a boiler plate type of application resume. They essentially don't read the profile or the job description, right? And so that's very important there and a big red flag for employers. They want to know that you actually spent the time to read the job description. You understand what is required, what is needed, and that you are being able to present yourself as somebody who is, you know, who is qualified. But it also has, you know, what the particular project entails because you took time to read the actual description, right? And one of the other things that you can do to actually take your proposals to the next level is being able to have some sort of videos. So if you can create like a value video or a video specific to that job description and your interview rate will skyrocket. Because when you're taking a very custom approach by sending a video that says, hey, you know, I took a look at your job description. You know, this is kind of what I'm recommending this as my experience. This is what I've been able to do for others or this is what I'm recommending, right? And UK iterate in your specific to that particular job, then the probability of you getting accepted and getting interviewed is very, very high because you're setting yourself apart from the competition. Okay, so now let's go ahead and go back to my computer. We're going to take a look at our thrust profile and Upwork. And I'm going to show you kinda what he did, how he has his whole upward profile setup. So you can kinda take some pointers away from how he has a setup and then how you can set up your profile. Okay, so we're back here on my computer and as you can see here, aren't there has a 100% job success rate. Obviously, he's the best of what he does. He's fantastic. He's an extremely talented UX UI designer. And obviously his, the feedback here shows that. So as you can see here, his rates for specific types of jobs vary. So for UI and UX design, forty-five dollars an hour for graphic design and $40 an hour in for any kind of product design that's very customized, specific, his rate goes up because, you know, it's the level of difficulty, right? And so he's earned over a $100 thousand in his particular profile here on upward. And so one of the things that he has is good video here and it goes over some data, some information. Another thing that would really help out is to actually have a video of yourself perhaps talking about your experience. Maybe talking about yourself, talking about, you know, what you bring to the table, the value that you're able to provide, right? And that would actually go a long way as well because people want to see your face, want to see that you're a real person, right? And would you having a video there that either explained, you know, about what you do, your experience or just you behind the microphone there talking about what you can do in the value that you bring would definitely go along way. And so as you can see here, he has different profiles, essentially four different type of work. For the UX UI work, he has a specific type of profile description here. Same thing here for the graphic design, right? He has different description here. And then you can go ahead and look at the different types of jobs that he has. Now, if we were to sit here and look at UI UX, and you go back to that for five, you go back to seven here. Back when he first started, I believe it was or I don't even think this was when he first started. I think this is more of just when he started doing freelancing on Upwork. But you want to look at some of these different types of reviews here and go back as far as you can. So this one's back in 2015. You can see this job that he had was for a frame redesign right? Back in 2015, right. So this is a big deal here. I want you to take note that Arthur didn't start out charging $50 an hour, right? This is something that he built up to and work up to an order to get to that particular percentage, right? So that's exactly what you want to do as well. You want to build up a profile with small jobs, right? And start showing people that, hey, you know what you're doing, you know how to get results, and then you can bring up your hourly rate right here is 27, 78, right. And I believe he has it now up to 45. So keep in mind that when you're starting out on different freelancing websites, that you actually are able to build up your profile first and then be able to start raising your prices and command higher amounts and start getting projects actually sent to you when you get to pick and choose. Okay, so that's gonna be here for the freelance lesson, and we'll see you on the next one. 85. Client Consulting: In this video, we're going to talk about clients consulting. Now this is something that's different than the freelancing. Where freelancing is more of projects that are coming to you on various freelancing website saying where you're just working kind of as a sole proprietor, you don't really have a company, you don't have an organization, right? And with Client Control team, this is a whole different ballgame. This is where you're going out. You're getting your own clients through different marketing efforts such as, let's say paid advertising, cold email, any of the different forms of advertisements or promotions or marketing methods out there, right? But you are responsible for getting your clients. You have perhaps your own business, right? You may have some employees that work with you are freelancers, right? This is obviously down the road after you start out with some freelancing, however, lion consulting is going to be a good route down the road as well if you want to proceed to this route because you'll be able to we're bigger clients, you'd be able to keep a lot more of the profits, charge higher fees, right? Because you're a company and you're getting your own clients versus having people come to you or you bidding on different projects, right? There's a lot more competition. So let's go ahead and walk through clients consulting. So as I mentioned, with client consulting, This is where you're setting up your own company or you can have your own company's name, but you typically have like an LLC or an S corp, the most common ones. And you have your own website with your business on its. And what I recommend in the very beginning is you do some freelance projects. You get some work under your belt, you get a portfolio built up, and then you start to be able to go out there and get Klein's on your own. Because you'll have work that you'll be able to leverage. You'll have testimonials rain. And so one of the best ways you can go about getting clients on your own is going down, doing some research on different businesses, different websites, right? In reaching out to the marketing department or the owner, in mentioning to them about any type of recommendations that you found or that you recommend on their website, on their application, right? Whatever product that may be. So that's going to be one of the best ways to actually get clients for yourself is doing a little bit of research on their website or maybe the application, finding out something about that individual bits, the owner or the marketing department, marketing director. And then being able to reach out and say, hey, I came across your business, your website application level, which you guys are doing. And I found this right here as far as my recommendation, or I noticed this over there, right? And then being able to add value up front, and then being able to get them through a quick Discovery call to find out a little bit about their current situation. So the client consulting is going to be the most rewarding because you get to charge higher mounts, right? How your project base, but here's the thing. It's going to be the most difficult because you're not getting clients coming to you, right? With the freelancing, you just sign up as a particular freelancer on the platform. You go out there, you get to pick and choose which jobs you get to apply for, right? And everything is coming to you. You're cherry-picking versus With the kind consulting. This is more of an outbound approach, right? You're gathering data, you're gathering different potential clients and you wanted to target. And you reaching out with your own type of marketing messages, your own email, your own type, different promotions, right? And you're reaching out to them to be able to work with you to see if they have any type of projects in the pipeline, right? So that's what you can expect from clank until team. This is something that I don't recommend you jump into an as you've already had some experience with freelancing, you have a portfolio, you have some testimonials and case studies that you can leverage to get some clients, right? So it's going to be here for the client consulting lesson, and we'll see you on the next one. 86. Building a Brand: In this video, we're going to go over building a brand. So this is going to be very important, not only for yourself, but also for when you're doing that, say some graphic design work or you look into take on some clients that want to do some remapping of the current brand. We want to understand what a brand is, what it represents, what are the key components surrounding what a brand represents? What are some of the key factors when it comes to building a brand and a lot of the different things that you need to keep an eye on and be aware of when you're developing a brand for yourself or a potential client. So let's go ahead and jump in here to building a brand. So a brand is not just a logo, that's where a lot of people fall short. And were they get confused thinking that a brand is just a logo, right? It's not just a logo because a logo is just a visual representation of a brand. But a brand is really a promise. It's essentially a unique selling proposition. And if you're unfamiliar with this, this is essentially what sets you apart in the marketplace. Let's say you have some sort of unique process or unique design methodology. And it doesn't have to be something that is extraordinary, right? This is a real simple way here to set yourself apart in the marketplace where you can get your brand known or help clients get their brands known, is by helping them develop a unique selling proposition, right? And you can create some sort of simple process or have a process and name it something unique and different, right? And have it be your own unique process. However, it can be something super simple. However, when you're able to give it a name and you're able to bring it out, then that's where the creating that unique selling proposition, because you can tell other potential clients or potential clients I want to sign on and you may be bidding against somebody else said, hey, we haven't unique methodology. We have a unique design methodology or we have a unique process that we use to go to our designs to make sure that we're creating and developing world-class brands and designs, right? So all brands have a message, very important here to understand. It's really central to any type of brand. The brand represents something. And when you create a brand, the reason why you're creating the brand is to deliver the message, right? Because it's saying something, it's delivering a message. It's conveying something about you or the company or what it stands for, right? Very important there. And branding isn't about what you feel, what you'd think, right? Just think about, you know, trying to give yourself a nickname, right? It doesn't really work that way. Nicknames are typically given by other people and that's how they stick. Because it's about what other people think, feel and say about Jews, not about what you think, right? Because you can think that your brand is the best in the world and you do this, you do that. But if the marketplace is saying otherwise, then you need to pay attention to that. And that's going to give you all the indication that you need to know that, hey, listen, my brand, I wanted to be known to stand for this. And so all of my actions, everything I do, it's going to be in accordance with that, right? And one of the key questions that you want to ask yourself when you're starting off to define your brand is, Hey, what do I want people to know the product or service for, to know me for, right? And this is big when you're working with clients as well. And when you're doing like a logo redesign for a client or a completely new branding development, right? Redevelopment of their entire brand. You want to ask questions like these, like, hey, what do you want your business to be known for? What are some of the key values, key characteristics, key things that you want your business to be known for in the marketplace, right? What you want people to think about, what do you want people to be imagining or thinking when they are hearing or seeing your brand, right? Very important there because as a UX UI designer, you know, you makes up into the UX field. You may do some UX jobs from UI jobs, and you may do some graphic design. And so you're going to be multifaceted To be able to understand, hey, if a brand is getting redeveloped or completely revamping of a brand or from scratch. You want to have these key questions and understandings that Haidt a grand, is delivering a message. And in terms of the client, what do you want that brand to be known for, right? So very important there when it comes to building a brand. And a good example of a great brand is Starbucks, right? Just think about what it represents. You know, when you are drinking Starbucks coffee and people see you, right? It's representing that you are essentially upper class, so to speak, that you are different, you are unique and you're OK and willing to spend more for a cup of coffee that could cost a couple of dollars or dollar, right? At Dunkin Donuts, right? So it's about thinking different, being different. And then also with walking into a Starbucks location, right? You get a certain field, you're going to survive. You get the certain lighting in there, and it's all going to be the same no matter where you go to Starbucks in the world, right? So there's a certain message that is being conveyed here. And whenever you see people drinking Starbucks, right? It's conveying a message that they are different. They are unique. And I don't mind spending four to $5 on a mocha, on a drink, right? That could easily be made for dollar, dollar, that can easily be made for a dollar or $2, right? So that's what you want to think about a brand. It's what it's representing, how it's making people feel, and what comes to mind when they see the brand. And another great brand here, probably number one, is going to be Apple, right? Because remember, Apple doesn't make a product that is superior, far superior than, let's say, HP or Dell, or any of these other desktop or computer manufacturers, right? What really sets them apart is going to be the branding element as far as what it represents and how it makes people feel, right? People are going to spend a couple of thousand dollars on a, you know, Apple computer because it's what it represents to others and to the world, to society about them like hey, I think different, I am unique. I am, you know, upper echelon. I'm not your average Joe, I'm not your average thinker. I'm somebody who's creative, who likes to think outside the box, right? So that is something that you really want to take into account to take into consideration because Apple is conveying a message all the time, right? Because remember the computer functionality of it. There's really very little difference between an apple or like a Dell or an HP with the similar specs, right? But it's the Apple brand that people are connecting and resonating with. And that's really important to understand. It's about how you're making people feel and the message that is delivering to the marketplace, right? And so let's go over some reasons why building a brand is important, right? So having a brand along with an online presence will immediately set you apart from all the other applicants that just had resume with experience, right? Because one of the first things that employers do nowadays is the look you up on Google to see if you have any other interests out there outside of work. If you have a blog, if you have any kind of presence, right? Because you've gotta remember, in today's digital age, everything is online. Everything is digital. And so you want to be able to set yourself apart. Then just somebody who has, let's say an application that has experienced that has, you know, a good resume, but maybe they don't have an online presence, right? That's something to really take into consideration when you're developing an online profile. You know, having social media profiles, having a website, having a blog, you know, getting, being active on social media will go along way. And we're going to go into social media profiles in another lesson. But just wanna kinda give you a quick overview of that. And so when you combine experience, a resume with an online presence along with the brand, right? And you have all of these working in your favor, then you have the winning formula that employers are looking for in today's digital age, right? Because you can represent your brand to the marketplace and show others as far as clients, potential clients which are able to do for yourself and then let them know, hey, listen, this is what I've done for myself and this is what I can do for you in especially in the employer space, right? They can see that you know how to develop a brand. They see that your act of online at your, in the social media space frame and you have other interests outside of work, then you're really setting yourself apart from the competition. And that's what employers are looking for. And especially if you're going down the client consulting route, your branding will go along way with potential clients, especially if you're soliciting them to, for any kind of graphic design or any kind of projects. You being able to show them that, Hey, I've created my own brand. I have my own portfolio, right? My brand represents this. This is what I stand for, is my values, right? This is my unique selling proposition. So all of those are going to play a factor. And you being able to get a job or you being able to get clients in the Freeland space, or even just going out and getting your own clans, right? And so that's going to be here for building a brand. And we'll see you on the next one. 87. Personal Branding: In this video, we're going to go over personal branding. So in the previous lesson, we went over branding in and of itself. You went over how to build a brand. This particular lesson here, we're going to go into the specifics of branding yourself as that brand, right? Because there's a big difference here as an organization versus building a personal brand. So let's go ahead and jump into building a personal brand. So what is personal branding, right? The personal brand is really the same concept as a brand, except for a, an actual individual personal branding. You are the brand, right? That's the biggest difference here. When you're building a brand for a business, right? For an entity outside of yourself, then that's going to be where the business is, the brand. When you're doing personal branding, you are the actual brand, right? Your online persona. You know how you represent yourself online, how you post on different platforms, what you post, what's just say, right? And it allows the outside world to directly perceive your skills, personality, and experiences, right? And so personal branding is probably going to be where you are being able to get the most out of your actions, right? And the most out of your work because with personal branding, for the most part, you're going to be branding yourself as the brand. You're going to be posing on different social media platforms, different social media profiles run. You're going to be on Instagram, you're going to be on Facebook, right? And all these other different social media platforms that really let people know that you are active and you are taking your brand serious. And ultimately what personal branding, this is really the best way to be able to put yourself in a strategic position to broadcast the value that you bring as a UX and UI designer, right? Because remember as a UX UI designer, you're oftentimes going to be doing like website designs, application designs, also graphic designs for like different graphics maybe doing, let's say, a graphic design for like business cards, logos, right? There's a lot of different things that are inside of the UX UI realm, so to speak, right? So let's look at some of the different ways that you can get your name out there as a UX UI designer. So here's a thing. You can be the best designer in the world, right? But if you're just sitting alone in your basement and nobody knows about you are what you do or how you can help them, then it doesn't really matter, right? You're not going to have much of an impact. And so what you want to do is you want to be somebody who is good at what you do. And that is improving Wright constantly improving, but is able to leverage their online presence, right? And being able to put your name out there with having a small amount of skill that's developing, right? Is going to trump having a ton of skill with nobody known about true or no reputation, right? That's why it's important to really be able to go out there and have different social media profiles and be actually acting on those profiles, right? Think about a specific market that you may want to target as well. Would you want to target, let's say the entertainment industry, the commerce industry, maybe the software industry, software as a service, right? So really thinking about also the type of markets that you want to target and understanding that you can be the best designer in the world, but if nobody knows about you, then is going to be off or not, right? So here's a key factor with being able to build your personal brand is having the social media profiles active and you don't need to be on there every single day, right? But you can be on there, you know, once a week or so, post and different things. And at a minimum, you should have LinkedIn, Facebook, and Instagram, right? And like I said, you don't have to post every single day, just making sure that you're on there and that you're showing that you're actually taking it serious. And what you can also do if you don't want to do any of the posting yourself, you can sign up for a program called buffer and Q. And together they're about 20 bucks a month. And what they do is buffer allows you to connect that to your social media profiles and be able to automate posting, right? Every single day or even months out and advance, days out in advance. And then have all your posts going out automatically without you having to touch it. And then q gives you the ability to look up different content that is related to your topic, right? To your market, to your industry, to design, to UX UI. And then be able to take that content and be able to post it on your profile so you have relevant content that is getting posted on your profiles. And so it's showing that you're active at, you're actually taking it serious. And that will go a long way with your branding as well. And so that's going to be here for the building a personal brand. Remember, you want to be very active on social media. You want to make sure and understand that you are the person that is behind the brand. It's you who's the brand. And you want to be able to put yourself out there. And even if you don't have a ton of skill, right, just being able to showcase that you have some skill and that you are wanting to get your name out there will go along way versus you being the best in the world and not having anybody know about you, right? So that's going to be here for this one, and we'll see you on the next one. 88. The Importance of Having a Website: In this video, we're going to go over the importance of having a website and blog. So we went through in the other lessons, the importance of branding, the importance of personal branding. And here we're going to talk about why it's important if you're developing your own brand, if you're doing personal branding, to have your own website and potentially your blog, so that you can really set yourself apart from the rest of the applicants out there if you're looking to get a job or if you're doing freelancing, Clang consulting, let's go ahead and jump into the importance of building a website. So having a website, we'll add instant credibility to your personal brand, right? Just like I mentioned, if you have a brand and you have it all over social media. However, if you don't have a website or at least a blog, and this is going to do a lot more harm than good. You want some consistency. If you have a brand, you have to have a website, right? It's just a given, especially now in today's digital age. And so what you can do is set up a website for your company or for yourself. We like a personal brand ramp. You can do either or that's going to work. And then for a website, it's super inexpensive. I mean, really, all you need is a domain, let say for $10 and then $5 a month for hosting. You can go to name cheap, and then WordPress is for free. And I believe they give you a free one-year SSL certificate, so very inexpensive. There should be no reason why you do not have a website, ok? And what you can do is you can go to, let's say team forest or about market and get it theme for, let's say 30 or $40. And you can get a website up fairly quickly by going to fiber and pain somebody $10 and saying, Hey, listen, I just bought this theme from the market, from theme forest. I wanted to look just like the demo, right? And so what you'll do is you'll go to fiber and then you'll spend $10 or so and you'd be able to get the website installed just like it's shown in the demo. And then having a blog will also allow you to be able to write some content and had it picked up by Google. And it really shows your credibility and expertise. So your visitors, right? So it's a, you have a potential client and they land on your website and they see that you have some blog post there and you know what you're talking about, right? You're providing value that's going to add to your credibility, right? And so let's go ahead and go to my computer. I'm going to walk you through some resources. I'm going to walk you through that be enforced and bottle market so that you can see different types of templates out there. And then also show you some resources on fiber where you can get somebody for $10 or so. And then where they can have your website up and running within no time. Ok, so we're here back on my computer and we're at the auto market theme for us.net. And what this platform is here is where you can find different types of website templates that you can use for different projects, for different things that you're looking to create a, let's say that you want to develop a specific type of websites or perhaps a certain type of graphic design. This is a great place years far Zimbardo market to get a lot of recommendations as far as what's hot out there in the marketplace. We can take different ideas, right? You can look at right here different UI templates. You can look at things that are popular, things that are, you know, top sellers as far as the different types of templates. But really this video here is going to be more for a website and we're going to look for a website for your particular business as far as if you're going to be going at it from a brand standpoint or where you want to be the brand yourself. Okay, so let's go to WordPress here. And this is what we're going to be using as far as the CMS. And so what we can do here is typing, let's say digital agency. And this is going to bring up a bunch of different types of templates we can use for our website. So what we want is we want WordPress. We want to make sure that it's in WordPress. So what we'll do is we'll go to WordPress right here, okay? And then we'll look at two here. Creative. We have technology, we have in commerce, we have corporate. We can break this down by bestsellers are best rated. Let's look at the bestsellers here. Okay? So we can look at some of the top sellers here. We can see she's almost 646,000 testimonials here. So we want to look at something that's hot, that's popping, right? And then let's take a look at this one here, the very first one. Okay, this is a great second look at this. Okay, so this is a very nice template here, nice and straightforward and has a lot of the different elements that we're looking for. Okay, great. And so this is kind of the process that you're going to go through here as far as for looking at different types of web templates, different types of themes, right? Because what you'll do is you'll install the WordPress and then you'll be able to install these templates on the actual WordPress platform that your website is hosted on. And then you'll be able to manually customize this just like the demo. So let's go back over here and see if we can find another one here. Let's see your total responsive multipurpose. Let's see here, let's go to agency and also get some of them here. So this is multipurpose right here. I kinda like this one right here. Just check it out. Okay, Live Preview. And so they have different types of previews here that you can use for your particular website. Okay, so here's this one is for hosting. So obviously you would want to change it up for what you're looking to do there. But this is more of the user interface here, the layout, the design. This is something that you like and you can obviously use something like this as well. And so just spent some time here looking through the different types of themes. And if any of these resonate with you and connect with you for your digital agency, if you're running something where you're going to create a brand as an actual business, right? That's a separate entity. Or you're going to do personal branding and have your brand actually be centered around you, Right? So you want to have like XYZ agency or XYZ creative or whatever brand name you want. If you're going to go that route and if you're going to go the personal brand around, then you might as well just register your personal name Azure domain, right? So this is a quick resource here where you're going to be able to find different website templates, different themes for your particular website. And then also if you want to look at some different templates here for different ideas, right? And so then let's go over here to fiber in this is where you would go to actually have the theme installed on your website. So you would buy the actual files from here, from the invited market. And then you'd go here to fiber and you'd ask one of these guys for $510 to install the actual theme on the website that you have there, just like the demo, right? And so as you can see here, to five to $10 for the most part's going to be, you know, $10 or so. And just have these guys installed the theme on your WordPress website, just like it looks as far as the theme here, right? And then you can manually customize that now. And if you don't want to go and spend all the time looking through different templates, different themes. And you want to just give something up and running very quickly, very easily, and then be able to modify and adjust down the road. And then I'm going to show you in another video. Now walking you through the entire process of registering a domain, getting hosting, getting your SSL certificates, and then also installing a particular free theme on your website so you can get up and running. So that's going to be here for this video and we'll see you on the next one. 89. Creating a Logo: Okay, so in this video, we're going to walk through creating a very quick and easy logo. So this is going to be through canva.com here, Canada is a great tool to use for different types of design, different types of presentations. You can create logos, you can create different types of animations and a lot of different types of designs that are easily created through Canvas. However, this is more for a beginner. And if you want to play around with Canva, I highly recommend that you do so that you can start out and learn how to do some different designs because they also have a bunch of templates here. So let's go ahead and jump in here and create a logo for our website. So you can come in here and type in different types of logos. You can see here there are some PR games, there's some profession. There are some for different brands here. Let's even just go to something like this. And what we can do, we can change around some of this text. So let me just go like this. I want a different type of background here. I want it to be white. And then I want this to be washed. Let us do this first. I want to change these colors and I want them to be purple. Okay? So that's changed. Now let's change this to white here. Okay? And then let's move this. I don't like this text here, so we'll change this text here. We're going to delete. Okay? And then I like this right here. So what we'll do is move this here, okay? And then we'll close this up like this, right? And let's try something here. Let's go to an in-group. And I want to just move this over here. Okay, there we go. So just like this right here. And I want to make that a little bit bigger. And then now we'll bring now some text. Let's see here, right here like this. And the company's called the bomb design, so the bond design, okay, something like this, is delete that. So then we can drag this, make this smaller k. And let's see if we can make this. Is there a way to make this thicker here? I'm sure there is. But see here. Okay, now this should be fine, just fine. And then we can use a little bit skinnier type of text. Maybe something like this or like this. Let's see if we can change this here. Some of that. Ok, so let's see here, okay, so something like this would look pretty good. Let's go back and let's go to something a little bit thicker. So let's go to something like this. Bomb design. Okay? We want something a little bit thicker like this. And so we can do SQL-like this. Make it bigger. Okay, something like this, nice and simple. We have that black right there, and this can be a whole lot better. I'm just creating this for sample purposes so that you can see how this would look. So you can see how we would set up a particular logo and how easy in symbol it is to create one. Okay? Okay, so let's check out how this looks. If it were to be capitalised. The bomb design. I think the we can go like this, the bond design. Or we can go like this. The capital looks a little bit better, okay, so we'll just go like this. Nice and simple. Let's bring this out a little bit more. Okay, so let's go download PNG, download this right here. And so now we're ready to go, ready to upload the logo to the particular website. So we'll go ahead and jump into the website and actually set everything up. In the next video, we'll install the logo and we'll get the website ready to go. So that's gonna be here for this one, and we'll see you on the next one. 90. Step by Step Website Setup: Okay, so in this video, I'm going to walk you through how to register a domain, how to set up your hosting, how to get the SSL certificate for your website, and how to get everything set up so that you can have a readymade website that you don't have to pay for as far as having to buy theme, you're going to be able to get access to a free dean here. And I'm going to walk you through step-by-step how to set everything up. So the first thing that you're going to need is a domain. A domain is essentially a web address. That's your websites actually going to be hosted on, right? So the first thing we need to do here is go to the domain name search here, okay? And then we want to type in here one that I already have set up the bomb designs.com. And so we'll go here and we'll add this the car and you can see it's $9 a year. And then we'll go through and actually buy this here is called a checkout. And then I'm gonna go ahead and quickly go through this here. Okay, so we've gone through and we've gone through the checkout page as far as buying the domain, you want to go to that. You can do that on your own, but just follow the steps. Adding your payment information and then you'll be able to purchase that domain. So once you purchase that domain now you need hosting, right? You need to be able to host that website online. And so the package that I recommend is going to be this one right here. The 488 to month, very inexpensive. That mean $5 a month is nothing right to be able to host your website online. And this is required, right? Because every single website out there in the marketplace has hosting, right? They're hosted on a server in order for them to be live. So just pick this one up here. I recommend it for 88 named Chip has great customer service to walk you through and help you out any kind of issues or problems you're facing. And then you should be good to go. So you want to pick this up here. And then also you want to pick up the SSL certificate, right? You need that on your website and that's this up here. If you look at this, you see there's a certificate there and there's not one there, then it's going to show it as not secure. So this is the HTTP right here that allows the website to be protected as far as any kind of intrusion. And it also protects the users when they're landing on the website so that they feel more protected and safe, right? So you can pick one of these here as well. I would go with the positive SSL certificate right here. And you can buy this just for one year. And when you come here, this is automatically set to five years. However, you want to break this down for 234 whatever, right? You can just go with one here and then make it nice and simple. Confirm order. And then I'm going to go through the payment process here. Okay, So you've bought the domain, you bought hosting, and now you've actually purchased the SSL certificate, right? So now what you want to do is go in here and make sure that your domain is setup to the Name Cheap hosting servers. And I'll show you how to do that here. So you want to go to your account here you wanna go to dashboard. And then you want to go here to your domain right there, go to manage. And then go down here to the name servers and go to Name Cheap web hosting. Click OK, and you should be good to go there. So now this is telling the Name Cheap hosting servers that you want your domain to be hosted on the hosting services or you just purchased, right? And if you have any questions as far as the hosting, how to set that up, how to setup the cPanel, all of that stuff. You can contact the life support that they have to rename cheap and they'll help you out. They'll walk you through everything step-by-step. Ok. So once we set this up here, now we want to go to the cPanel and we want to install WordPress. Okay, so what they're going to do is you're going to give you a specific type of link that is going to show you and tell you, hey, listen, this is where your actual hosting is going to be set up in the cPanel. And what you can do a lot of the different modifications and where you can install the actual WordPress theme. So let's go ahead and sign in to this one here. Okay, So this is the screen that you're going to see. Once you log into the cPanel, you're going to get the login information from named cheap. They're going to send it to you and email. You have all of that information there available. So this is where we're going to install the WordPress CMS and also the SSL certificate. So the first thing that we want to do here is we want to go down here and go to WordPress, and it's go to customer install. Okay? Okay, so let's select our domain here. Let's see here, right here, right there. Okay, so we want to leave this HTTP because it'll automatically forward to the HTTPS when we installed the SSL certificate. So we'll leave it here like that. And we can leave this, let's say the bomb design company. We, let's go down here. We provide UX, UI and graphic design, right? Something nice and simple. And then right here, which you can do is you can set your username and your password. I'm going to essentially create one here from scratch. Now you can have these changed in here. You can go like this and it'll automatically create one for you. I'm gonna go to hide here, and I'm going to type went in here. Okay, so that should be good to go right there. And then we'll go down here. And then we'll go to Install. Now you want to have this sent to your e-mail as far as the installation details. Ok. So I'll just put it in here, my email and have this Go Install here. Okay, so it looks like I need the password to be longer, so we'll add in a different password here. Okay, that should be good right there. Okay, so now we're ready to go. So now this CMS, right, the WordPress is installed on our domain. Okay, I just remembered before we actually install that templates, where we want to do is we want to set it up for the SSL certificate. Okay, so over here to Name Cheap SSL, let's click on that. And then we're going to add in the certificate to the domain. So let's go to install here. And then we want to select the domain. Perfect. And then we'll go to install certificate. And then it'll automatically forward to the HTTPS. Okay, so we shouldn't have any type of issue with that. This is the backend of WordPress. You can see here it's just a simple type of template here. And so what we wanted to do was we wanted to go to, there's a couple of things we want to do here. We want to go to settings and we want to go to reading. We want to make a static, the sample page here. And then we want to go to permalink. I want to go to post name. Okay, and then what we'll do is we'll go to plug-ins and we'll add in a free plug-in here, astra. And then this is going to be essentially where we have the element tore installed here as far as a web builder and also free types of templates that we can use as well. So let's go now to the appearance is go to themes. You can see this is the team that we have right here. So now if we go down to the starter templates, okay, we select a type of page builder. You can go to element two are here. And then now we have access to a bunch of different templates that we can pay for or that we can access for free. Let's go down here. Let's take a look at some of these. The C here, there's this one right here. There's one in here that I'd like as far as the design, as far as for being free and, and we can definitely modify this and adjusted for the business. So let's go down here. I believe it was for design. So something like this. This is perfect right here. So all of these pages here are going to be installed. The homepage, the about page, and then the services and the Contact Us. So everything is literally laid out for us. All we need to do is add in our own information. So this is extremely powerful here. And so what we're going to do here, we're going to install this template here. And then we're going to create a logo. And we're going to set it up like if it's a real, actual business. Okay, so let's go ahead and import complete site. And import everything here. Okay, so the site is installed here. Let's go ahead and take a look at how the site looks. Okay, there we go. This is the site. And it's amazing how this automatically installs by itself. And where we have all of these different pages here already ready to go. And so we have the home about services contact would have the Request Quote up here. So let's go ahead and edit this year. Let's go to edit with a mentor. And this is going to be the homepage here. And what we want to do is we want to add in a little bit of space up here so we can put in our logo, so will go like this right there. And then we'll go to advanced here. And we'll go, let's say about 115. Ok, notice how abroad down this little area right there. And then we'll be able to put in our logo over here. So let's go to Save or update here. Okay, so we're good there. And so now what we'll do is we'll go ahead and change some couple of things here. We'll delete this here. Will go delete like that. And we don't need this here as well. As you can see here. This is a very simple drag and drop. Let's say here we create amazing business websites, right? Or let's say here, graphic design. Matter of fact, let's just go ahead and leave it like that. We create amazing Lee, beautiful. As change this here. Kay? Just like this. Okay, we create amazingly beautiful websites, okay? Nice and simple. As delete this right here. And let's move this to the middle, just like that. And we can actually move this a little bit higher. Let me go to update down here. Okay, So what we can do, we can go right here and we can move this up like that. Ok, nice and simple. And then let's go to Save. Okay, we wanna go to update. And then this is how it's going to look. And so if we go to duplicate here, we can see how it's going to look. Or we can just go like this. This is how the website looks. Okay, so what we want to do here is we want to go to customize. Okay, so we want to go to header here, and we want to go to site identity. And we want to add in a logo here, right? The logo that we were able to create on Canvas or just drag it in here. And what we want to do is we want to edit this and we want to crop it. So will go like this. Just like that. And we'll click on that. And what updates. Okay. And then we'll go to Select. And it's going to ask us to do it again. Let's go to crop image. Okay, so let's go like this. And let's remove this error. We go, we remove that. And so we can make this a little bit bigger. Let's go back on the site identity. Here we go. Let's make it a little bit bigger. There we go. Something like that right there, the bomb design, right? And it's got to publish. And now we have our website with our design here, with our logo. We have the about services contact. And then you just go in here and essentially click on any area that you want to update. So let's exit out of this and let's go back to where we had it, the pages. And so the homepage here edit with Ella mentor. Right. So you would come in here and edit all the different places as far as down here, how can we help? Maybe you want to just have design, development and marketing or e-commerce or whatever that may be, right? You can use these different icons here. You can change this out. You can remove this. You can add an information down here, and that's where you're going to find that information there. Okay. And so right here, this is the different types of areas that you can customize for this theme. You can also go down here, header, footer and blocks. And this is going to allow you to adjust the blocks at the footer. So we'll take a look at this here now show you so like right here, change this right here, the logo, put in the company address, company information, right? That's how you're going to edit that right there, and also this area right here. So that's going to be a here for the website. Again, this is a nice and simple website that's literally for free. You have all these pages. All you have to do is put in this information that you want for your particular business, for yourself, right? And then change and modify some of these sections. It's really just click, drag and drop. And now you have all these different elements over here. You literally just click on one of these areas and you can edit the content, right? You can look at different things that you can drag in their different elements, right? And everything super simple. Just click on it. You can edit, you can remove stuff, you can add stuff, right? So this is going to be a nice little website here that you can design and setup, right? For your particular business. If you're doing it as far as creating a brand, or if you're doing it for, you know, actually setting it up for yourself as a personal brand new. Remember, every page you're going to need to do this here as far as to have the menu up there for your logo where you're going to be going to style or actually to vance here. And you want to go to about 151? I think it was or 150, something like that. Right? Based on what we did previously. And you want to have about the same amount of space in here as you do on the homepage so that you can have your logo here, right? So that's going to be the entire section here for the website. Play around with this. You can design this how you want. You can see here a lot of these elements are already included here. So you can just add in your own content to these pages. Okay, so that's going to be here for the website setup in layout, and we'll see you on the next one. 91. UI Templates: Ok, so we're here on the enforced.net. And in the other video, we went through looking for a website for our brand. If we're doing personal branding for ourselves, right? Or if we're doing the actual business branding where we're going to have an actual business be the brand versus ourselves. And so now in this video, I want to go over the different types of templates here that you can use as frames of reference for your particular designs. And specifically going in here into the UI templates. Because what you can do here is essentially look out what are the hottest types of UI templates that are out there in the marketplace. So you can make your design process a whole lot easier and a lot smoother, right? Because you don't have to reinvent the wheel. You just have to look at what is hot, what is popping out there and be able to add your own unique twist to these particular designs that you already know are actually hot in the marketplace, right? So let's go here to the UI templates. And you can look at all the different types of templates from Photoshop, Sketch sigma, Adobe XD, right? We're mostly working with Adobe XD. And so you can go down here and look at different types of templates all across the board if you want to look at for, let's say, food delivery, UIKit for mobile. Let's say that you have a potential client or maybe you want to get into the UI type of design for different types of mobile apps, right then you can take this particular kit right here and be able to use it as a reference, maybe design a made-up brand or made up type of application. And you can actually use this as your design portfolio. Very, very powerful here, okay, so what you'll be able to do is look at some of these different screenshots and be able to, let's say, purchase this particular framework, right, this type of design and be able to use it for your actual work with your clients. And also be able to maybe create something from scratch as far as a brand using this type of interface and design and be able to use that as your actual portfolio, which will go a long way because and that's one of the biggest things that clients want to look at prior to them, you know, choosing to work with us. Hey, what have you done in the past? What is your experience? Summing some designs. And so this is a great way for you to be able to showcase your design skills by leveraging existing types of user interfaces, right? So let's go down here and look at some of the different layouts here. You can see everything here is already set up in design. You can just use this particular templates and be able to input different information. So it's very, very powerful, right? And it's just something that you can use on your particular portfolio which is so powerful. So, so powerful, can not stress that enough. So you can see here this is from the customer side. Let's see here. Select the restaurants food. Because keep in mind, very, very few companies. Or, you know, businesses out there actually come up with something unique and creative from scratch. There's a lot of pre-made templates, designs that are already setup and kinda standard. And then the designer will go and modify and adjust and add their own unique twist to it and be able to make it their own. However, for the most part, a lot of these designs already are available, 30 made. However, a client obviously isn't going to come here and look at all these different UI templates, nice UI design frameworks rate. They're going to go to a specialist like yourself, right? A UX UI designer to do all of this for there might because you understand this. And so pretty much, you know, you can look at all of the different features here, functionalities. And then be able to purchase this for $60 and be able to have this, you know, in your portfolio, right? And so let's go back over here. Let's look at another one here. This is Adam and UI Kit template for website. So this is for website design here. And you can take a look at some other different types of websites set up here where they have the components here, the navigation you can see, then they have the different elements as well. And then the header here and all the different types of elements. And remember, you're not creating things from scratch very few times a U actually creating something that is original, completely new, indifferent, right? A lot of designers, what they'll do is they'll get a particular job that will come their way though, have an idea as far as what they're thinking. But they're always, for the most part, going to be going out there and looking at what's already available in the market and getting some frames of reference, looking at what's out there that's already working, that looks great, that looks fantastic. And then there'll be able to modify and adjust and make it their own, but you don't really need to, like I said, reinvent the wheel. You can take a lot of these designs and make them your own. So these are the, all the different types of images and pages. If you're going to get right, here's a dashboard, so this is a fantastic place for you to come in here, get some templates as far as for the UI design and be able to create some of their own designs yourself, maybe make up some brands or whatever, and then be able to use this as your portfolio because it's just massive, massive potential here for you to be able to have a lot of different projects under your portfolio right out of the gates so you can start getting some jobs, right? Because like I said, a lot of people that are looking for different UI UX graphic design jobs want to see your previous work, and that's going to be the best way that you're able to do that, right? And showcase that. Here are some different types of UI templates as well. You can spend some time looking into these scene which one's kinda resonate with you the most and be able to take these and add these into your portfolio. So that's gonna be here for the UI templates and we'll see you on the next one. 92. Logo Templates: Okay, so in this video we're going to go over logo templates. So we're back here on the forest, just like I mentioned in the other videos, this is such a great resource for you to be able to get different references, different types of design ideas, and kind of see what the marketplace is, you know, up to at the moment in what's popping and what's very popular. So let's go over here and I want to show you the global maker tool here, which will automatically spit out a logo for you based on your market or your business name on the design type in. You'll be able to use this as reference to be able to create your own logos from scratch, or some of these as design references. Or maybe just have this logo created just by using this tool. Very, very simple. So let's go ahead and jump right in here. Okay, so as you see here, all we need to do is type in a brand, let's say ABC, UX, UI design. Okay? And then we go to next. And then we go down here. We choose design, right? We are designed company. And then let's go. And then what this does is it spits out a bunch of different types of local recommendations with the business name, right? And you can choose different types of graphics here. You can add in different elements. And it chooses for your particular design type. Let's say you have a client that may be in a different industry. Maybe they're in the medical field, maybe there are bakery, maybe they're a beauty salon or, or something different obviously than what you are as far as a digital design agency, right? So you can look through down here, look at different types of logo templates, different design ideas. You can take these and run with them. So I'm not really sure as far as for the price here. I think there may be a small cost, however, being able to get this type of template here for 5.20, $10 dollars at the most, I would say it's still completely valuable. So come in here. You can edit the text. You can edit a different types of color schemes. You can add another graphic, you can change the background. You can do so much here with this particular tool. And let's go ahead and just try a different type of business that said that we were working with a beauty salon and they wanted a complete logo revamping here. So let's go XYZ and beauty salon, okay, and then let's go down here. Sco beauty. And then it's going to apply. And then we'll see the kind of different designs that this Recommends. So perfect ksi, it just takes into account the niche, right? The market, the industry, and is able to create different logos based on what the brand is centered around. So this is so fantastic here. This is such a great tool. You can use this for your own designs. You can sell logos easily starting out on fiber for, you know, 102040, $50 a pop and be what's a good designs here? And you know, easily start getting your portfolio built up, right? Because remember, it's all about giving you a portfolio built up so you have some work to show people. And especially if you want to get a job or you're just looking to get a position at an organization. You want to be able to put on your resume that you have experienced, that you have different design projects. You have a portfolio, and obviously same thing with working with clients. They want to make sure that you've been able to do something in the past and you know what you're doing, right? So just a quick video here going over the different logo templates that you can have access to on the market. And how quick and simple you can create very beautiful, amazingly beautiful logos within a matter of minutes. So that's gonna be here for global templates, and we'll see you on the next one. 93. How To Create a Business Email: Let's go right ahead and jump in. The number one platform that I recommend that you use for setting up your business email is going to be G Suite very inexpensive and very easy to set up. So I'm gonna walk you through step-by-step how we do this. So the first thing that I want to show you here is the pricing. The best one here that you're going to use if you're just starting out, is going to be the basic year, $6 a month. You get the business email, you get video-conferencing, team messaging calendars, 30 gigs of storage on. Then you get support and you get different security and administration controls, which is totally, totally worth it. So you also get a 14 day free trial. Highly recommend you set up, I'm gonna go ahead and walk you through how to get this rolling. So first thing we're gonna do here is we're going to go to G Suite dot google.com. And then we're going to go to get started. Okay? And then we want to put in the business name here and this is put ADC company. And then if you want to put just you or to deny employees depending on how many employees you have. So we'll go there, just you next. Wanna put in your firstname. I'll pull Kuan Galvin and I'll put my email address on a fungus upon.com. And then next. And then you put yes, I have one I can use. Now if you don't have a domain and you want to purchase one, you can go ahead and do it through them. But I highly recommend that you go and purchase a domain through Name Cheap, very easy, very simplest setup. So Tenex, your clients.com. Next. Okay, great. And then we're gonna go to next. And then this is where we're going to create our username. So we're going to go to, let's go one at whatever our URL is there and then password. Want to set a password? Can I'm not a robot? Let's go to what we got to do this here real quick. I agree and continue. We're going to need it, verify the domain. And I'm gonna show you how to do that as well. Okay, so this is where we need to select the flexible plan or the annual plan on flexible plan is going to be the best. Now with this page, you need to enter your credit card information. I'm gonna go ahead and do that real quick. All right. So we've submitted our payment information and we're ready to go to the next step. So this is where we're going to verify our domain in setup our MX records. Now when you're verifying your domain, I recommend the quickest and easiest way to set this up is to add a TXT record. I'm going to show you how to do that. So make sure that you have named cheap hosting setup. And I'm going to show you where you're going to add that particular TXT record. So we want to go down here and go to I have successfully logged into your cPanel. Whenever you get hosting with name cheap, you're gonna get an email. And they're going to provide you with the login details to your unnamed cheap posting. And then from there you're going to go to your Zone Editor and then you're going to add the record. I'm going to show you how to do that. So it's telling you here to go to the particular name t posting cPanel. Okay, great. And then you're going to get this particular Google site verification code. And you're going to want to add this as a record. And let me show you how you would go about doing that. So we're here in the cPanel and you wanna go to Zone Editor. Alright? And your cPanel from my Name, Cheap. Alright, so we're here at the 10-inch or clients Zone Editor and we want to add this code here now. This is a previous Caudell was added. So we're gonna go ahead and add in the new one. We're going to copy that we're going to save here. Okay, great. So let's see this registers, Verify domain and set up. Now this is going to take awhile to load up, but that's the process that you're going to go. Now, I'm going to show you now what you're going to do next, which is add the MX records and, and this is really important because it's going to tie your G Suite email to your particular hosting. So let me show you how you're going to set that up here. So here in the Zone Editor we've added a TXT record and we want to go to MX record. And you're going to want to add these particular codes here as well on it's the priority one, priority five. Now you can easily find these MX records literally by just going to Google. If we go to Google MX records, there we go. So you can easily just copy this here, but those are the ones that are going to go in the particular cPanel here, right? You're gonna go to the amex to add these particular MX records. And then you want to go to the TXT and verify the domain down here. So that's essentially how you're going to want to get that set up and you're going to go to, back to your domains here. This, it says MY digital, but I'm really going to want to make sure that you're selecting named cheap web hosting DNS, or that it propagates properly there. So that's essentially the process there for you to be able to create a business email for your particular business through G Suite only $6 a month, highly, highly recommend. So that's it for this video here, and we'll see you on the next one. Thanks. 94. Networking Do's and Don'ts: In this video, we're going to go over networking. Now, networking is extremely important, whether you're going down the freelancing route or if you're going into looking to get a job right now, working can open a ton of doors for you. And so in this lesson, we're going to walk through how to leverage your existing network, how to go about now working in the right way. Some of the do's and don'ts, how to make sure that you are presenting yourself in the right type of manner when you're trying to engage and networking activities and how to avoid representing yourself in the wrong type of weight. So let's go ahead and jump into networking. So here's some key points when it comes to networking. Building a network is one of the most important things that you can do for your career. And this is whether or not you're going into freelancing, you're going to look for a job. It's always about knowing the right kind of people that can help you get pointed into the right direction, right? And LinkedIn is by far the best place online to network. You can have different connections. You can have different people that may be connected to people that you want to get in front of. And you can leverage your existing network to help you get that foot in the door, so to speak, right? And as the old saying goes, it's not what you know, it's who you know, right? And obviously you want to be able to have skills. You want to be able to have the knowledge, the expertise, right? A lot of times it's the people that you're able to connect with and engage with and the network that is able to open up a lot of doors for you that you may not have had before. And so one of the key things to keep in mind here with networking is at, a lot of people go about it the wrong way. I don't know if you've ever been to any kind of networking events or have done or tried networking before. More often than not people, what they'll do is they'll always come to some sort of event or they'll go about networking in a very selfish manner. So talk about, hey, this is what I want you to do, or can you do this for me or everything about their own selfish interests? Well, you really need to take the opposite approach to that because that's what's going to allow you to take your networking game to the next level. You want to look to find where you can add value to the individual, right? Let's say you are trying to connect with somebody in your network or somebody outside of your network that maybe have a connection with somebody within your network, right? You always want to take the approach of, hey, what can I do for you? How can I add value to you and then be able to ask them for a favor, right? Because even though you may not do what you tell them that you're recommending or that you're offering, right? Just the offer alone will go a long way. And especially with you being able to go on their profile, maybe look them up online and mentioned, hey, listen, I noticed that you do X, Y, and Z. I looked you up, right? Letting them know that you actually spend some time to research them, to look at their background is really going to go a long way. You want to get away from just sending messages that have pure self-interest. Or there is nothing in return because nobody wants to feel used, right? And when you're going in with your own selfish interest, then that's really pushing away and driving away the potential relationships and networking opportunities that may be coming your way. So this is a quick overview here of networking. Remember to always looked at value when you're connecting with people and when you're networking, asking questions about them, about what they're about, about their business. And then inevitably, you'll get asked questions about yourself and your business as well. And for the most part, if you really want to take your networking game to the next level, focus purely on LinkedIn and start building up your profile. Start posting a bunch of content related to your topic and really look to develop a great network on LinkedIn. So that's gonna be here for networking, and we'll see you on the next one. 95. Top Freelance Websites: In this video, we're going to go over some of the top freelance web sites that you can sign up for. Start getting some work under your belt, start building up your portfolio. And the great thing about these freelance websites is that all of the projects are going to be there for you to be able to bid on, right? You don't have to go out there and actually look for jobs. All of the jobs will be on the platform. And you get to essentially sign up as a user, be able to verify your identity, and then be able to get jobs presented to you. And then you can actually bid on those jobs right out of the gate. So let's go ahead and jump into the top. Different freelance websites that you can sign up with for a UX UI designer, right? So let's go ahead and look at some of the top freelance website. So as you can see here, we have the first one which is Upwork.com. This is going to be probably the biggest one, the best one that you sign up for because it's essentially one of the top in the marketplace. You're going to have a ton of jobs, ton of opportunities to pick and choose from. And then the second one is Fiverr.com. This is more of a job or slash gig type of platform. However, there are some opportunities in there to bid on custom gigs that people place on there. And then there's freelancer.com. This is probably comparable to Upwork as far as being number two in the marketplace for freelancers. And then we have the two specific platforms for designers, which is dribble and Behance. Both platforms are fantastic to showcase your work and to also be able to get specific jobs coming your way. And then the additional sources here are people per hour.com. This is one in the UK. This is also a good one as well. However, you're typically going to have more success from what I've seen, what I've experienced in the top freedom, that's websites as well. However, if you're in the UK, perhaps this may be a good source for you. And then we have google.com, which is also in other freelance website as well. So let's go ahead and jump into these individually. So the first one here, freelancing on Upwork, Write a great, great platform, highly recommend. It is looking at some of the pros. The pros are they have a screening process and they have both fixed and our the contracts. And then mini-projects that are available. Different scale, right? You can get started with your career and have a small project for maybe 40, $50 just to showcase your work, get that experience right. And then you have hourly contract protection, which protects you as a hour the wage earner. And some of the cons here are that it's challenging to get your first project. However, if you're using a lot of the different tips that are explained in this course, right? Where you want to really read the job description. You want to make sure that you're presenting your bid and you presenting it in a way that lets the end client know that you actually read the job description. You're familiar with the you have the skills to be able to do the project. And adding a video will go a tremendous long way. So think about that as well. And so for a lot of people, yes, you can say it's going to be challenging, but since you have this course, you have access to this content, to this material, to these tips. It's going to be a lot easier for you to be able to get your first project, right? And so obviously there's competition. There's a lot of different people on there with lower rates than you. And that's why you want to have something where your rates are very low in the very beginning. So you get your foot in the door with the jobs, right? And then another con here is that the job success score goes down automatically if you don't work on Upwork for awhile. So making sure that your profile is up-to-date. You're constantly, you know, getting a new jobs and you're working will keep your score at the highest, and then freelancing on freelancer. And this is also a great platform as well. They have a screening process. They have a can get verified process as well where I believe you pay about a $100 and they verify your identity, they verify your background and they verify a couple other things to make sure that you are a vetted and verified freelancer. And then they have fixed scenario the contracts as well, many different projects or different scale, right? You can really build up your portfolio as well by getting a small project and then working on from there. And then they have a preferred freelancer program as well. Where if you're a freelancer that's preferred, you have a high score, you're going to get a lot of the jobs don't act you from freelancer itself. And so you're going to get an opportunity to win a lot of these jobs, however, you have to build up your profile and get that experience right. And then the cons here, challenging to get your first project. However, obviously going into this material, it's not gonna be as big of a challenge for you. And then a lot of rivals out there, a lot of competition would lower rates. But again, it's one of those things where, how can you set yourself apart, right? How can you create maybe some sort of process or methodology that is unique to the marketplace. And you've got to be on top of the jobs. You've gotta be always searching for new opportunities, new projects coming your way. And then we have Fiverr.com. Fiverr.com is a great platform as well. It's very easy and simple to get started with. And then you have two different types of projects here. You have gigs, and then you have projects that are essentially made from scratch. So somebody can go in there and put in a particular job or project, right? And then people can bid on there. Or you can set like your own gigs select, let's say, for a UX design for a mobile application, you can have a gig for that with a certain price. And then maybe let's say for a logo design. And you can have that as a gig and you can have a set price for that. So it's like setting up your own store, right? Where you have different gigs, different projects, and then they're all at certain fixed prices. And then you have the fiber pro for top talent. There's a screening process for this. And if you have a lot of skill and you really skilled right, then you can go through this process here and get access to a lot of the different clients that are willing to pay top tier. And then again, this is a great way to build your portfolio, build testimonials. And some of the cons here is that projects start a $5, which is going to be low cost. And you can look at this in a positive or negative way. Yes, it's unfortunate that the pricing is quite low. However, it's a great way for you also to be able to get some working your portfolio and start actually getting some feedback, some referral, some recommendations, testimonials, right? And so some additional columns here, orders can be placed without any communication. So let's say somebody wants some ridiculously complex design or logo or whatever it may be, they can place an order without contacting you because you have a gig there like on your store, right? And then if they need to cancel the order, then it's going to count against you on your score. So not a great thing there, it's unfortunate, but I would always recommend that you put hey, contact me before each order. Right. And just like I mentioned, if the order is canceled, you're going to get a strike on your account and then prices are set on per project basis. So there's very little wiggle room there, or room for negotiation. When you have a price of like let's say $30 or $20 for a logo bright, you can't really go back and try to negotiate that. You can't really go back and try to negotiate that with the buyer because that is what's your price is set at. So regardless, this is a great platform to get started on because of low cost, you can start building up your portfolio and be able to use it for getting additional clients down the road. And then we have dribble here. This is a platform specifically for designers. And so the approach here is that it's, it's easy to publish your work free to use. There's different jobs and project boards there. Well, you can go on there and look for different projects that may figure criteria or different jobs that you may want to be able to look for. And the great thing here is that they have remote jobs where you can work by yourself as a freelancer or work from home, or you have the opportunity to find jobs in there. They are going to be in-house, inside of an agency or inside of some sort of a corporate large organizations. And some of the cons here are essentially a lot of the features that make this platform work. A lot of the different things are only available to pro accounts. And so if you wanted to showcase your work, if you want to do a lot of the different things this platform does, you're going to need to pay for it. So keep that in mind. And then we have the Behance here. This is also a very simple and easy platform as well. That's easy to create Adobe portfolio, custom designs for each of your cases. Helpful profile statistics, how many people have visited your profile, right? And then you have an area to look for full-time, freelance or even internships as well. So just think about this. This could be something that you look for as well. Maybe you're just starting out. You've gone through this course, you've gotten a lot of education here, a lot of skill developments in the UX UI design space. And perhaps you want to get an internship, right? And just learn on the job. Sometimes this can be paid, sometimes it can be free. However you want to look for a paid one that can even give you just a low amount of payments, however, you're able to learn on the job. And then the cons here is that this is not necessarily a job platform. This is more of just a platform to showcase your work. Okay? Another con here is that some jobs can only be applied for using a third-party form, which takes a very long time to fill out and very time-consuming, right? So it's not going to be nice and simple for you to fill out the job application. And there's no salary indicated on a lot of these posts here, so they'll have a polish on there. Like hey, I'm looking for XYZ designer. I'm looking for this type of work, but they're not showing you how much you're going to get paid. So that's a, you know, Khan unfortunately, but still a great platform to be able to showcase your work and give some potential work. So that's gonna be here for the top freelance web sites. And we'll see you on the next one. 96. UX/UI Project Scope Questions: In this video, we're going to go over the typical and common UX UI project questions. These are some of the questions that you want to be able to be aware of and be asking your client or when you're working with team members, right? This is something where you want to be able to understand the scope of the project, the deliverables, the timeline, the financials write everything that you need to know prior to starting a project. So that let's say if you're working with a client and it's able to be delivered at the right time that they're expecting at the most affordable cost, right? So being able to understand the types of questions, the initial conversation that you need to be having with the clients make you sound a whole lot more credible so that you'd really come across that you know what you're doing. You've done this before and this is just another day in the neighborhood, right? Okay. So the types of questions that you're going to be typically asking, you can look at different types of project scope questions to understand what exactly they're looking to accomplish, right? What does that end goal look like? What does that finished product will look like? And then timeline type of questions, right? You want to know what is their timeline for finishing this project? Do they have different milestones at their wanting or needing to actually meet? And then the communication, are you going to be communicating with a teen or you're going to be communicating with an individual who is going to be your point of contact and how often do they expect you to be in contact with them right today? Require any kind of daily updates, weekly, biweekly. What does that look like? Right. And then the financial right. Understanding, what is their budget, how much are they willing to spend? What can you work with? And then obviously being able to make sure that you are being compensated fairly. So if you look at the chart to the right there, that's going to give you a really good indication of the different types of tasks, and then the deliverables, and then the estimation time, and then the actual timeline delivery date. So it's just something that you can really look at and use for when you're looking to build out different projects and when you're getting to that interview stage so that you are talking to your prospective clients like your essentially a doctor and you are able to analyze and understand their current situation. And then B, what to prescribe them the right type of medication, so to speak, right. Where you're saying, hey, based on what you're looking to accomplish and what you want to get done here with this is what we're recommending as far as project scope, as far as what you're going to need, as far as all the different stage. Here's the type of deliverables, here's the estimation, and then here is essentially an estimated timeline for us to be able to complete these. Okay, so let's look at now some of the specific type of questions that you want to be asking prior to starting a project. So some of the questions here are, what are the milestones and deadlines, right? You want to know what exactly do they want completed at each particular milestone, and what exactly is that date? And then which deliverable is necessary for each milestone, right? You want to know what they're actually wanting to be delivered as it going to be a prototype. Is it just some designs, right? Some graphics? What does that look like? And then how many revisions would you like to include? You know, typically when you're doing a project there's going to be multiple revisions and a lot of back and forth getting user feedback, getting user data, and being able to modify and adjust so you wanna make sure that you understand what does that look like to them so you can give them exactly what they want, right? And then what is a budget for this particular project, right? Pretty simple there. And then who will take part in a discussion or who is going to be on the team, right? If you're working in a team-based environment, you want to be able to collaborate with the right kind of people and make sure that you're not overstepping somebody's boundaries and understand your role in this entire project, right? And then the communication, how do they like to be communicated with? Do they prefer just working through the platform if you're doing like freelancing or do they like to use Slack, that will act to use Facebook, whatever that may be, right? As far as a communication method, you want to be able to understand how that looks and why it's important to them and then who approves a project? Is it going to be the person that you're working with? Is it somebody higher up, right? You want to be able to understand these important questions here. And then these are some sample questions here from Mike Montero. I believe his name is from Mule Design. So here's some of his specific questions here that he typically asks. Where he has here, the, what is the business requirements that must be met? How could user needs be served better? Who are your audiences and what do you want to do with them? You know, believe it or not, a lot of different businesses will have a hard time being able to explain in a very detailed specific process or statement who their actual audience is, what that looks like. They're actual avatar. So that's going to be part of your research and analysis, right? Understanding who is the actual audience, who's the users, which are demographics? What don't they like and be able to create an actual user persona from that information. And then who will maintain the site after launches? Or, you know, same thing for like an application. And then how will you measure success? This is crucial here. This is a very important question. How will you measure success? How did you know that after we've designed this or build this or created this, that it's actually successful and that it's actually gotten, you know, good results. So you need to be able to understand what are those metrics and what are the KPIs as well. So that you can understand and look at what the successful look like for them. And then what are the project risks where they see, you know, as far as any kind of changes or potential risk that they can face. And then after launching the new site or application, what will change for your organization? Will, will change for your users, right? Is it going to be a whole different experience that they're not used to, is maybe going to take some getting used to what exactly is going to change so that you can understand them from their actual perspective of Benin organization and then also from the customer standpoint as well. Okay, so now let's take a look at some questions that we would want to be asking when we're doing a complete redesign. So this is something where there's a brand is already existing rights. They already have a website, maybe they have an application, and they want to do a complete revamping or change up their logo or change up the actual website, whatever that may be, right, but it's a redesign. It's not necessarily something from scratch. It sometimes can be something from scratch, but for the most part, it's just a redesign, right? Why are you redesigning the site? What does the current site do? Well, where's it lacking? What challenges have you faced in their previous work with design partners, right? So you want to look at why they're redesigning the site. That's important. Is it because it's just lacking in a particular areas far as the user experience, or is it just a bad interface, you know, whatever that may be, you want to understand why are they actually looking to do a redesign, right? And maybe something from higher up that they just want to just get the whole entire website and start fresh, right? And then what does the current site do? Well, what are the things that they currently do well, so that we can look to implement and keep some of those that are working well. And then we can fix those areas where it's lacking, right? And so this is something where you really want to be able to look up and pay attention to these answers, right? Because you're going to tell you why they're doing it, why it's important to them, and what are some of the things that you can implement in this new design, right? And then the particular third question here, this is more for understanding how the elect to work with different partners in some of the things that they face previously, so that you can differentiate yourself as to why you would be a better partner, right? And then finally, we have here the self-discipline and actually being able to get the work done right after you've gotten a client, you've got some projects are you working on? You want to be able to actually deliver and fulfill. And so some of the things that consider here, you're actually doing your work and you're actually creating your designs is having like brain dot fm or some type of music in the background that allows you to focus and study and keep your attention on what you need to be doing, right? You can use like a time tracker, like tomato timer. You can use meditation to help you relax and calm things down. You can do some meditation before you start working so you can calm yourself down and get into that state of just focus. And as far as scheduling apps, you're going to be able to get that and notion on with the timber that is provided in this course. So you really want to understand that once you get the client and you get the projects, you need to go to work. And you want to be able to work as effective as possible with minimal distractions are really no distractions at all. And being able to have some music in the background while you're working, maybe have some kind of timer will really help you out. And so that's going to be here for the UX UI project questions and we'll see you on the next one. 97. Laser Focus & Productivity Tools: Alright, so in this video, I'm gonna walk you through some productivity tools that you can use to help increase your focus to make sure that you're not getting distracted, going on YouTube, browsing the web, and not doing what you don't need to do. And really just focusing in on which are supposed to be doing, which is getting work done, right? And so what this allows you to do is select different type of focus music that you can listen to that will help you increase your focus, your productivity, and minimize your distractions. So let me show you here how this looks inside. I mean, I uses everyday, extremely powerful. So you have here different time blocks. You have 30 minute block when our block to our block, right? And if you're listened to one of these play and you don't like how it sounds, You can go ahead and skip that, okay? Or you can go up here and you can go to more music. So you can go with lo-fi focus, classical focus. You can go to relaxation, sleep. Obviously you don't want these two here unless you're wanting to relax. However, this tool is going to be mostly for focus, ok? And so really what I would do is when you're trying to get something done, put on some focus music here, I would say for two hour block and get working. And this is scientifically proven to actually help you increase your focus. So it's not just people saying, Hey, listen to this music and you're going to be ten times more productive. It gets you in the state of mind where you are in flow and you're completely relaxed. You're focused on what you need to do and there's no distractions. And so I highly recommend this tool so that you can increase your focus, right? Increase your productivity and have specific time blocks of, let's say two hours. Or if maybe you wanna go hard in the paint and you want to put this on a limited Well, you can go to work for, you know, four or 56 hours. I wouldn't recommend that. However, this tool here is extremely important. So I highly recommend that you pick this up. I think it's about five to $10 a month. However, like I said, I mean, it'll be totally worth it with your increase in productivity and your increase of focus, okay? And so the next thing that I want to share with you here is the Ideally method, okay? And this is more of a daily routine. And what this is here is it gives you a set of steps to do every single night. So basically at the end of each workday, you want to write down the six most important things that you need to accomplish tomorrow, the next day. Now, it's important here that you do not write down more than six because it can get quite overwhelming. And so then you want to prioritize those six items in order to either True and ports. And so what is it that you need to get done first? And then, you know, number those one through six. And then when you get up in the morning or when you start your day, right? You want to focus on that first task and work on it until it's actually completely finished before you move on to the next one, right? And so you want to approach the rest of your day in that manner, right, where you are doing your first task, you're doing whatever you need to do to finish them, and then you're moving on to the next. So this is huge here. So every night when you go to bed or before you go to bed, write down the six things that you need to do the next day, and then prioritize them in, you know, as far as the most important to the least important, right? And do this every day so that you'll know what you need to do the next day, right? Plan for tomorrow. Today, okay, very, very powerful. And then the next thing that I recommend that you do is you install the newsfeed eradicated for your Facebook profile, okay? Because this is going to limit your distractions. So if you see here on mine, I have this installed here, which means I can't see any ads. And so it limits me from going onto Facebook on my computer. Yeah, so have it on my phone. However, another thing that I do with my phone is I hide it, which is another thing that I recommend. If you are working and you're trying to get things done, you're listening to brain dot fm, get your phone and hide it somewhere, or put it in some kind of cupboard and some kind of draw or some kind of desk so that it's away from you. It's not easily accessible, right? All you gotta do is get it on the Chrome extension here, install that up here. And so it allows you to block your entire newsfeed. Very, very powerful. And then the other thing that I wanted to share with you here is the concept of batching, okay? This is where you are essentially blocking out a gay or a certain set of ours where you're dedicated to just working on what you need to get done. And so for example, here, for myself, I create YouTube videos and I try to post them, you know, three or four or five times a week. Now, I don't create my videos. On the day of wright. I actually batch record my videos all on one day. So on Saturday, what I'll do is I'll block out the entire day to just record YouTube videos. And our record five or six videos are that one. So then throughout the week I can trip them out, right? And so what allows me to do is instead of having the work, refocus work, refocus work, right? Refocus work. Instead of going through that whole entire process, I can now just block out a day, get everything knocked down at once, and then be able to have free time to do whatever I want. So think about how you can use this to your advantage. How you can block out time or even days where you just focus on one thing and you're able to knock that out and execute on other tasks. So that's going to be here for the productivity tools, and we'll see you on the next one. 98. Places to Find UX Jobs: In this video, we're going to go over the best places to find UX and UI job. So this is going to be here a list of several different resources that you can use to find an actual Java. That's what you're looking for. You're not necessarily going down the route of client consulting or freelancing. You want to start working in a team and a business in a particular company that has good track record that is able to provide you with a stable and steady job. And and so let's go ahead and jump into the best places to find jobs. So the first recommended place here is going to be glassdoor.com. This is going to be a fantastic source here because you can actually look at different jobs by their salary. You can look at different positions. You can look at what some of the trends are as far as that particular position or even entry-level positions, right? A lot of different profile settings. You can look at different jobs. They have a fantastic job search filter and it's very easy to apply to the different positions. You can see company reviews. This is fantastic because it gives you an overview of the kind of environment in the workplace that you can expect to work, that you can expect to see in that company, right? Giving you a really good idea of that company's culture so that you're not going into a culture where accompany type of environment that may not have the best type of environment for you, especially if you're just starting out and you're brand new. And this is the tool that is available in many countries. So regardless of where you're at, you should be able to use glassdoor.com. And it shows you the actual salary per position. So you can look at, okay. What does this position look like right here as far as the requirements, the description, what is the actual salary rates or you'll be able to see all of that right on the actual page. So the next one here is going to be simply Hired.com. This is similar to the Glass Door. However, you don't have as many features. You don't have like company rating, company reviews. This is more of just like an actual job board here, job website where you're looking at different search filters, where you have different positions, different jobs, and you can use the search filter there to go through those positions. And for the most part, they do have the actual salary. However, sometimes they don't have a salary. And one of the things that keep in mind is this is US based only, okay? So if you're in other parts of the country, you will not be able to use Simply Hired.com. And the next one here is indeed.com. This is another great resource as well. A lot of different profile settings, detailed job search filter, easily able to apply. This is going to be US based, and so you've got to keep that in mind. However, it does typically show you the actual salaries for each position. And then we have the angel.com. This is going to be one of the best places for you to come in here and look for jobs at startups. Because not only will you be able to get experience in a wide array of different areas, right? But also you'll be able to get some equity in these companies and be able to potentially make a significant amount when that company actually get sold or when that company exits. So very much so a great opportunity for you to get started as somebody whose brand new, just starting out has some experience. You'd gone through this training. You've gone through the exercises, created a logo, you've created a website, all of these different things that you've been able to do. This is going to be a great experience for you to be able to come in here, look for a start-up that is in need of some kind of designer, somebody in the marketing department. And you can come in here and be able to potentially get an equity stake in the company, as well as being able to work with a wide array of different individuals and also do a lot of different things within the organization. And then the last one here that is unlisted, which should be quite common in already known, is LinkedIn.com. That's probably going to be one year top places to go and actually find positions because There's going to be pretty much every single company in the world that's on LinkedIn in the professional space, right? And so oftentimes don't have all of the jobs posted on there as well. Sometimes they won't have the jobs on LinkedIn and then they'll have like, let's say glass door, although have Amman like Simply Hired or different other platform. So for the LinkedIn, makes sure that you're able to go in there and look at different companies, go out and look at different reviews before you're actually submitting applications so that you're getting in with the company that has a good reputation. So that's gonna be here for the best places to find jobs. And we'll see you on the next one.