Have you ever wondered why some apps feel effortless and intuitive While others leave you frustrated the answer lies in the power of uiux Design This in demand field is all about crafting user experiences that are both beautiful and functional imagine shaping the digital landscape for companies like Google Apple or Amazon these industry Giants and countless others rely heavily on skilled uiux designers to create user interfaces that are visually appealing and incredibly userfriendly the demand for talented uiux professionals is skyting as technology continues to evolve so does the need for intuitive interfaces that keep users engaged this translates to a stable and rewarding career path uux designers consistently rank amongst the highest paid creative professionals with CIS reflecting the value they bring to businesses this comprehensive uiux course will equip you with the skills and knowledge to navigate this exciting field you will learn the fundamentals of user research design principles prototype tools and the latest uiux trends by then you will be ready to transform ideas into user Centric experiences that leave a lasting impression are you ready to unlock your creative potential and build a uiux design career let's get started that's said guys if these are the types of videos you would like to watch then hit the like And subscribe button and the bell icon to get notified and just a quick info for you if you want to upscale yourself master UI and ux to learn your dream job or grow your career then you must explore simply learns cohort of various uiux programs simp simply Lear offers Advanced certification in uiux design in collaboration with triple it Bangalore through this program you will gain knowledge and work ready expertise in skills like user experience design factors influencing user experience user interface and design principles visual design UI prototyping and styling and much more that's not all you also get the opportunity to work on multiple projects and learn from industry experts in top tier product companies and academicians from top universities after completing these courses thousands of Learners have transitioned into a UI ux developer role as a fresher or moved on to a higher paying job profile if you're passionate about making your career in this field then make sure to check out the link in the pin comment and description box to find a uiux program that fits your experience and areas of Interest so the user interface or user experience design or also known as uiux is the process of creating digital products with a user first approach the goal of uiux design is to provide a product that is both aesthetic and extremely pleasurable to use it is a common idea that UI and ux are essentially the same thing and belong to the same discipline but that is not totally accurate they are separate FS that concentrate on different aspects of the user interaction with a digital product however they are closely related and overlap in so many ways that they are largely merged into one profession so to start off with let's have a quick look at the agenda for today's session we will start off by understanding what is UI ux we will move on to what skills do UI ux designers need and what are their tasks next we will see the difference between UI and ux then what are the research techniques in UI ux and how they work together and what are the disadvantages of combining them vote so I hope I made myself clear with the agenda now what is user experience and user interface is our first topic let's get going so how a person will engage with a product understanding your users's complete journey and translating it into a product the interaction of human user with daily products and services is the subject of ux design it includes user engagement user engagement would come up if you were to summarize the aim of your user experience efforts they maintain a connection with their user interests motivations and Ambitions through engagement next objectives objectives as in the industry ux design seeks to increase consumer satisfaction and loyalty through the usability Simplicity of use and enjoyment provided in the engagement with a product ux refers to the complete user experience that customers receive with a product by evaluating products usability we can tell whether consumers can execute task successfully and quickly good usability is the basics for a successful user experience and it is frequently confused by user experience and the Simplicity of use a part of user experience ux design is usability usability is the second level of user experience therefore you must address your product's usability once you've established that it can and resolve users problems the degree to which a designer's features fit users demands and situations determines how usable the design is and usability involves navigation the discipline of creating analyzing and implementing ways for users to navigate through a website or app familiarity next is consistency a usable and userfriendly design always provides a consistent experience followed by that we have error prevention alerting a user when they're making an error with the intention to make it easy for them to do whatever it is they are doing without a mistake next we have feedback feedback is used to engage and explain and can improve the user satisfaction followed by that we have visual Clarity visual Clarity is the measure of how effectively visual design prioritizes and conveys information information lastly we have flexibility it is about knowing your customers and giving flexibility for different customer intents now that we have brief understanding of what ux is let us understand what is UI UI or user interface the point of human contact and interaction on a device is called user interface this can include desktop display keyboards mice and other pointing devices it also refers to the manner in which a user engages with a website or application in other words they design the user interface of a website or app after knowing what is user interface we will see the different types of user interface first we have command line interface or CL line CLI enables users to input commands into a terminal or dashboard window in order to commun Comm unicate with a piece of software and it is a platform or Channel where users respond to a visible prompt by typing a command and receiving the system's response next we have GUI or graphical user interface graphical user interface enables people to engage with just an operating system using Graphics in the graphical user interface there are menus like Windows scroll bars buttons Wizards painting pictures alternative icons and much more it is simple to understand and natural the user is shown or given information in any format including plain text videos photos Etc followed by that we have touch graphical user interface a touch graphical user interface can be used with either the user's fingerprints or a stylus to control Graphics this can be done on a desktop computer laptop or a portable device like mobile phone touchcreen graphical user interfaces are increasingly used in hospital situations and provide both patients and healthcare workers with a number of advantages there are a lot of skills required for both UI and ux let's have a look at those skills skills ux designers need due to the nature of their work ux designers require a technological skill set such as design or development with programs like sketch caused by defect and adob XD successful ux designers have had the following soft talents or abilities let's discuss the different skills for ux designers in addition to hard capabilities are research problem solving and communication research research is a fundamental skill designers must derrive useful insights from the data they gather both in early stages and during the real world testing next we have problem solving and in a process called Dynamic ux designers look at a variety of methods to solve a single user problem they not only fix difficulties during prototypes but they also continuously develop and improve goods or services to make them more user friendly finally we have communication because ux design is indeed a highly collaborative process communication is essential this includes being able to effectively communicate within the team and to customers about the user's needs and requirements when using the product now let's discuss about the skills that UI designers need to work as a UI designer they must need some hard skills UI designers must keep up with current trends methods and Technologies to grow they must be familiar with design Aesthetics user interfaces and brand design layouts and other aspects of graphic design they must also know how to use graphic design and wireframing software there are some of the following skills required to become a UI designer creativity the only way UI designers can effectively fix problems is by coming up with novel ideas since imagination is a part of creativity businesses seek out creative individuals teamwork and communication the user interface designer must work work well with others they collaborate closely with product Architects and web developers so clear communication is essential for a successful end product adaptability technology evolves at a rapid Pace to consistently develop their products and services good UI design Embraces changes and keeps on top of the industry Trends after knowing the skills required for ux and UI designers we will look into their different tasks ux designers ux designers start by researching in-person interviews are frequently the first step in user research these conversations allow them to have a better understanding of the users's motives and problems user tests are also conducted by the designer to observe the user activity they improve and deliver the greatest possible user experience by detecting both verbal and non-verbal stumbling obstacles such tasks done by ux designers are user understanding analyze interaction and wireframing or prototyping so the first one is user understanding the depth research is typically the first step in new design with the aim of understanding the audience their needs and wants a key competency for us designers is empathy it aids ux designers in comprehending and revealing the hidden wants and reactions of the target audience next the analyze interaction designers of user experience examine how users interact with things including their routines preferences and shortcuts better design Solutions are proposed during all the available insights and the last one is prototyping a prototype is a model or a trial version that you teams use for testing before launching it seeks to test and validate ideas before sharing concepts with stakeholders and ultimately handling of the final versions to design Engineers with the development process ux designers are always active in how a product is put together to make sure the design is going in a proper direction they communicate with each team member now after knowing task done by ux designers we will look into UI designer task UI designers the web designer is in charge of creating how the product is set out graphically once the ux team has completed their process and handled over a wireframe they must of course design from the users's perspective this includes understanding interface design and implementing basic design principles it also entails selecting fonts menu designs buttons icons and other elements with care to both Express the brand and satisfy the user there are several tasks done by UI designers and the first one is testing in general UI testing sometimes referred to as testing is a process designed to test the features of any product that the user will interact with typically this involves doing test on the visual components to ensure that they are performing and functionally in accordance with the specifications communication typically the technical team ux design ERS and UI designers collaborate closely communicational abilities are needed to grasp technical viability wireframing one of the most important processes in uiux design is wireframing this involves modeling the framework of digital applications a wireframe is a product outline that shows what software components will be present in important Pages it is an essential step in process of design interactions now we will see the difference between you iux two of the terms used in web and application design that get mixed up and confuse most are ux design and UI design and that makes sense on the surface they appear to be describing the same thing because they are frequently combined in face uiux design but don't worry we will try to understand the basic differences between UI and ux user experience relates to the users experience of the product or service whereas UI refers to the visual components through which humans connect with a product therefore ux focuses on visual interface elements like fonts colors menu bars and much more whereas UI focuses on user and their experience with the product after knowing the difference of ux UI we will see the research techniques in both UI ux the practice of gathering information from actual users in understanding their demands and trouble areas is known as user research there are the following ux research techniques user Persona a user Persona is a fictionalized picture of average user the objective of this is to assist ux designers to develop Solutions with particular Target user in mind as opposed to a general one user interviews user interviews are a great method to get user data learn why users encounter certain issue and determine whether your design fulfills their needs next surveys A specific group of users is sent a set of questions by designers as a part of ux research survey to learn more about their attitude and preferences now we will see the research techniques of UI designers research ensures that user wants and expectations are taken into consideration while designing user interfaces which is is typically the very first stage in the process after the user experience has been established the UI design process begins the best color schemes patterns and other visual components must be determined by UI designers this makes it possible for the UI designers to get ideas and ensure that the design components they select are in line with users choices and needs now we will see how they work together while UI and ux design involve quite distinct technical skills they are both majorly elements that must work together to provide the optimal user experience without a proper ux design a beautiful UI design might become clumsy and complicated to navigate understanding the users demands should be the first step in any front-end design and development process now after this we will see the disadvantages of combining them both it's almost like wearing two hats at once when you have a combined UI ux function UI and ux designers have diverse skill sets even though most firms advertise a ux UI function as a single unified rule its main focus way of looking at things and approach to prototyping a product are very different it might be difficult and reduce the amount of focus needed for each discipline in a mixed uiux rule to constantly trans transition between ideas and representations when you visit a restaurant what's the first thing that comes to your mind you look around the furnishings and fixtures and then feel the ambience around you similarly when you visit a website you look at the ease of usage and experience that Comfort involved while using the application to simplify it further with the same restaurant example the food menu the services the ambience music taste and the restaurant environment can be considered user experience or ux you are all already watching simply learn and today we bring this informative video about yousign before we begin if these are the types of video you like to watch then hit the Subscribe button and the bell icon to get notified and if you are a tech geek here is a pre teaser for you who call the concept of ux design is it Alan K T Norman John wner or Dylan Fe let us know your answer below and get a heart from Simply learn without any further delay let's get started with the session on what is ux design ux design creates software or desktop application considering the an user expectations and requirements it's the process of creating a steam LM experience whether digital or physical that customers will find practical simple to use and enjoyable to interact with it involves improving the user experience of the consumers when dealing with your product and ensuring they give you good feedback on what you offer the thought process of constant iteration and ideology to to enhance the user interaction with the application and its service can be termed as ux design there are many factors involved with ux design but the three most important ones are usefulness usability and desirability if you sum up all these three factors we can design a great ux or user experience first come the usefulness of ux the primary focus of a ux design should always beond the application usability our website become dominant only when it's simple to use Serve the purpose and proves beneficial to the user next come the usability of ux this factors usefulness and usability may sound the same still the parameters considered in usability revolve around the effectiveness efficiency and performance of the application and it's calber to handle multiple user requests at the same time without crashing the U designer must ensure the application is strong enough to easily serve multi-users environments and the last one is desirability that plays a key role in uxm the visual Aesthetics of application engage desirability in users since the application need to complete with several other similar applications higher the desirability better the application look at all the products around you think about usefulness usability and desirability and see which one has a better ux next we will discuss what will make the user experience better let's see some examples one of the most helpful employe on boarding checklist is provided by LinkedIn how would you go about looking for work or hiring new people as LinkedIn helps in recruiting new people easily and it's relatively easy while opening a LinkedIn account we notice how the website keep offering suggestion to improve our LinkedIn profile and use the tool more effectively it can be either by adding relevant skills acquired certification or just connecting with people in our domain to create a network and we recall completing them because they seem important and will give our profile better visibility in this case is LinkedIn is a success let's take a look at another example Spotify completely modified personalization Spotify rep deserve a market oford one thing is obvious with r daily mixes and the most recent addition the Bland tool that enables you to combine your music and create a playlist with your friends nobody does personalization better than Spotify spotify's ux is different since it offers the customization that we all desire in 2022 the Spotify user experience include not only customization but also how the software revolves around the idea of personal music they retain users on app by creating a loop of personalization music while constantly recommending music you may like with daily suggestion I recommend playist this helps create a musical experience that other platforms strive to replicate user experience one of the industry's trending themes you should be more familiar with the complexities of user experience if you are in the design profession so far we have seen the big picture of ux design now let's look into more details about the process and what steps are required to have a good ux design so the first one in the process is to understand this is one of the most important procedure in the ux designing for the product te before creating anything in the market because understanding the product context is more important before designing it this phase of understanding gives you the foundation for the design process next is the ability to research after brainstorming IDE the product team moves the application to the research phase then the designer conducts thorough research identifies the problem and comes up with a better solution the research phase can be classified into two categories market research and user research market research is checking out similar products available in the market and understanding their unique features that make them stand up user research will be given a higher priority and will form a base of your product by hosting test groups and conducting service this information will help you discover user expectation and serve a better design platform up next we have design at this phase the product team start working on activities that involve constructing Mups images icons colors and Etc the design phase include creating prototyping wireframes and sketches but the wireframe is among the most important aspects you can produce a wif frame is an extremely simplified representation of your product the next one is testing this phase determine how the market uses your service and product for example if you were the swigy app designer you might ask your user to use the app and place an order you may have seen how users respond to app while ordering the food you can qu them about their experience once they have finished this is an excellent chance to determine how satisfi your user is with your app and whether it meets their demands should there be any concern those can be rectified right away before the product hits the market Market finally we will look into evaluation the benefit of getting users feedback is to compare the ideas and assumptions you develop you can utilize this input to make change to your product or think of the brand new features you may have yet to consider as we learn more about the ux is being received by the general public the team can work on the further improving the base to create the best version of your product after understanding the basics of ux design are you ready to start practicing on your own and start mastering a design tool now let's pick out two tools one is figma and it has a very generous free plan you can work on it using all the features completely and it has some collaboration features that if you are working with someone you can work on the same design file simultaneously it can work directly on the browser making it platform independent while also having dedicated apps for certain operating systems another option is Adobe HD adobe's Creative Cloud offers a synchronization features with other Adobe products which can be very much helpful when working with large projects with a very large customer base and readily available support from Adobe there is a huge collection of templates and project ideas that can be used directly in Adobe XD with minimum first you can find a link for our detailed tutorial on how to use figma in description that will get you started with the platform without any U basic knowledge hey everyone and welcome to Simply learns YouTube channel you're already watching simply learn and today we bring you the informative video about Adobe XC tutorial this tutorial is designed for learning your I design using Adobe XC it is very useful for UI and uxix designers graphic designers and the other professionals as a is leading and training the market among the UI designing tools available because of its many Advanced features and tools before we begin if these are the videos you like to watch then hit that subscribe button and the bell icon to get notified and if you are a tech geek here is a brain teaser for you who coin the concept of adobe XD the first one is Don Norman talin wsor Dylan field or is it Raymond ly let us know your answer below and get a hard from Simply learn without any further delay let's get started with the session now let's take a quick look at the agendas first here we cover the basics and advanced topics of adobe XE first we will start by understanding what Adobe XC is we'll then review some of the Adobe X's Advanced features then we'll see how prototyping Works in Adobe XT lastly useful tips for Designing and creating image graphics and web designs in Adobe XD with top use cases what is Adobe XD Adobe X is a powerful and trending design tool that is easy to use and a vector-based software tool for Designing digital designs and prototyping UI in uix that gives the tool that a developer needs to develop the world's best experience collaborative Adobe ex is designing the UI or uxix for web applications mobile applications and many applications it also provides an ideal way to create assets for different applications Adobe ex is provided and managed by Adobe Inc it comes for Mac OS operating system and windows only we cannot use it in Linux based operating systems it creates a web based link that can be open using any web browser but Adobe XT becomes the most useful tool before Adobe XD the photosho tool was widely used for design purposes but Photoshop doesn't have a user experience this disadvantage of Photoshop design makes Adobe XE the most efficient design tool as we have an application for user experience its prototyping and animation features give if the application a complete virtual tool the best thing about Adobe ex is that it provides a user interface for design each tool in Adobe XD has optimal options making it incredibly simple to utilize as a result it saves the designers a huge amount of time on the same project designers make various places can simply work together team members can watch and provide comments and suggestions through commenting and pinning directly from their browser using the link sharing tool now we will see what are the advanced features of adobe XD Adobe XD has a wide range of extensive and Powerful features and applications that makes it an essential tool for any ux designer some highlighted features of adobe XS are the first one is components and States second padding and stacks the third one is repeat grid and the last one is responsive resear so the first one is components and States these are Advanced features that photoshop doesn't support components allow the creations of it once and then can use it multiple times in the same existing project providing features to the applications when building certain Design Elements like buttons and navigations and maintaining the alignments across our design components are helpful changes we make to the primary components will also affect the supporting components therefore it will be helpful for design changes and for the stats as opposed to components are also effective approach to making the design functional we can preview our variations on a single components thanks to States States can be used to design produce effects like hover click toggle and many more and it is helpful to create and design cleanly by reducing the number of artboards for example instead of developing a new artboard for a drop down menu we can construct one using a click state so the next one is padding and stacks these are also some Advanced features of adobe XD that are not available in other designing softwares like photoshops and are useful features of adobe XT it is very helpful when working with Dynamic content such as buttons and labels and managing content sections and exploring design it will save significant time and effort and provide a well organized design structure and the third one is is repeat grid repeat grid is also one of the excellent feature of adobe XD and also one of the best feature of adobe XV by using a feature of a repeat grid we can easily cop up with the same layout multiple times it can be used in building the images data tables image Galleries and other things it takes a long time to design these UI components the repeat grid functionality could save our lives in such circumstances we may turn on the repeat GD for a certain items with just one click using the repeat slider we may repeat any objects or collections of object once the repeat grid features is enabled the text and graphics on the repetition grid can also be modified and the next one is responsive freiz the world is full of different types of EEG gadgets smartphones smart watches and TV so while working with the design we must ensure UI compatibility for all sizes of devices the responsive resize features allow us to automatically understand the design for a new device and fit the design in there are several other explosive and intelligence features of adobe XC that allows us to choose Adobe XC over any other graphic designing software to understanding some of the features of adobe XC we will see how prototyping Works in Adobe XE Adobe XE supports dynamic and interactive prototyping for the design to interact with different layouts we can add animation transitions to stimulate the flow of the application we provide a realtime preview of the application using the Prototype features of adobe XT we can experience a virtual toour of the application the Prototype can be shared with the team and stakeholders through a web link the team can experience a complete preview of the applications and provide valuable feedback right from the browser Adobe X supports Dynamic and interactive prototype for the design to interact between different layouts we can add animation transations to stimulate the flow of the application it provides a realtime preview of the application using the Prototype features of adobe XD we can experience a virtual tool of the application the prototypes can be shared easily with the team and stakeholders to a vaping the team can experience a complete preview of the application and provide valuable feedback right from their browsers so in the design mode we create the design for our applications using Adobe xit tools and Designs features then we switch to prototype mode to specify the interactive links between the artboard and components we can also create prototypes using the component State once we are done with the design and prototype we can share the design using the share feature we can preview the designs and prototypes using the previous features the Prototype is one of the finest features of ad OBX which makes it different from other tools we can also add Transitions and animations to our prototypes While redirecting to other screens after understanding how prototyping Works in Adobe X3 we will understand the top uses of adobe X3 in different fields top Adobe XD use cases Adobe XD is a flexible tool and can be used for a wide range of design projects some popular uses include create wireframe templates and prot prototypes design user interface create illustrations and Graphics streamlines the UI and ux design process enjoy custom design and the last one is design augmented and virtual reality the first one is create wireframes templates and prototypes Adobe exists an excellent tool for quickly creating wireframes and prototypes creating simple and complex design is easy and you can add interactive Al M ments to make your prototype more realistic the Prototype tool is excellent for web design Mups and mobile apps and for making realtime updates to your UI and ux project and the next one is design user interface Adobe ex is a great tool for Designing it's a vector base so you can create designs and has many buildin UI elements to use in your designs the third one is create illustrations and Graphics Adobe XD is a great tool for creating illustrations and graphic design elements offering an extensive creative library with the vector images shapes colors and fonts the interactive prototype updates in real time so your workflow is fast and responsive when building mobile apps and web designing and more the next one is streamline the uiu design process Adobe XD makes it easier to duplicate and reuse the common elements create repeating content and automate the process to save time so the next one is enjoy Custom Design Adobe XD lets you create variations of a single components and maintain spacing between the contents of a group and the other bounds it is possible because of its padding options andless customizations using space wireframes and colors and more within the adob XC design system and the last one is design augmented and virtual reality Adobe exit supports designing augmented and virtual reality experience you can add 3D objects to your prototypes and test how they work in an immersive environment making crafting AR and VR experience easy even if you are a beginner let's take a look at uh Adobe experience design X is a part of the Adobe SS that uh primarily focus on UI design a ux design prototyping and responsive web designs it's available for both Mac and PC as long as you have an adobe CC subscription it's most definitely competitor to along the modern design tools that have come out recently and you might be using like sketch or figma or the dozen others that are on the market right now so in this video I'm going to cover the basic things you need to know about uh XT when you first open up the project to help you to get up and running and feel really confident about the program I'm ready to get started I hope you are let's do this thing okay let's get jump into write the computer and figure out when the 10 basic things are the basic that you need to know about I'm just going to roll and I'm going to open XT okay and we will open up uh the program and you can see it's open it's right up and it's dropped an artboard into our canvas the artboard system is really common things nowadays and mod design tools and exit is no different and allows you to put new artboards onto the canvas anytime you want you can do that's by rolling over over here into the tools panel and here an artboard tool and you can use the hot key of A and and you can you can do the things you can draw out and customize the size of an artboard and I'm just going to command set to undo that or you can choose from the different selection that we have like we have iPhone x up here maybe we want to do like an Android mobile device as well and then and I'm going to like an iPhone 14 pro to the right and then it's every time you want to put an artboard just down on the screen it's going to just space it when you open out to the right and also with artboard um um you can you can use and also with artboard you can press V command or use your selection tool and you can grab the artboard by just grabbing the top kind of portion of the name of that artboard and you can move it around the canvas and you can get some automatic snapping for um spacing and all that kind of good stuff but that's the first thing uh that uh uh you need to notice how to make artboard how to move them and also how to resize them by just simply that and all right uh so the second thing uh you probably need um you need is a basic tool or understanding of the interface and so what we are going to do right now is very general fashion not real in dep we we're just going to kind of cruise through the interface and show you what we have on the very left hand side we kind of already covered it we have the tool panel where you can drop the different shapes or lines you can use your pen tool text and you can zoom in um each of these have an HW key and that you can learn to kind of speed up your W uh workflow sorry down at the bottom of this same panel and you can see there we have a h key and as well as and you can click over yeah these assets the assets where in uh in where exit is going to store all of your colors and your characters style and your reusable symbols or components you can reuse through your projects and so you knowing how to click back and forth between your layers and your symbols or your layers and your assets really powerful part of x3 right next to that we have all the artboards displayed we can see all the tree on their own separate line up at the top left uh you can see we are currently on the design Tab and we'll talk about this layer but we can click over to prototype tab where we can able to create interactions between our kinds of artboard and create interactive prototypes so that's the difference between these two tabs that we have the name obviously of our project and then we have some Basics controls on the top right like zoom in zoom out like what personage are we currently looking at um it it we we want a device preview with or desktop preview it looks like so we can we can share these designs and then you all have your basic tools if I just draw a rectangle and then you have all your basic tools if I just want to draw a rectangle and then if you all see the basic tools I have just drawn the rectangle and you see over in my properties panel uh then you have all your alignment tools and some interesting repeat beats grid and you have a Pathfinders or the Boolean operations and you have all your different properties uh for your width your height your X and Y value and we have some different prototyping options as well as all of your appearance options like colors Texs in different strong sizes and all the good stuff is there and that is a basic tool of the interface of the interface all right the third thing you might want to know how to do using adob XD like any other Adobe product is to use the pen tool and that's by simply clicking on the pen tool in the tools panel or by pressing the hot key of P once I do it I get my pen icon and I can start by adding notes to my artboard and and create custom shapes filling those custom shapes with colors coming back and redness of uh redressing we can redress the individual node and we can redress in the individual node and I can add new nodes on however any line I can redress in the individual note I can add new node by hovering over any line I can I can also delete each each one at a time by pressing delete key and it will just slowly move around and delete each of these points a few interesting things about the pen tool in ad do XC is that un like most other dopy products May hold hold down shift and gently Gally I can hold down shift and get increments on I can just kind of freeform it by doing it with nothing but my hand once I release and I have created here a brasure curve uh so it's going to be uh and it will come out straight it's going to automatically kind of smart pan or bow the curve I don't know if that's a good thing or bad thing it's just a thing if I created a straight line and if I hold down the option key like is in most of the program I can just control one of the basic handles um instead of both the handles to give myself um a little a little bit more controls of where I'm going to go next but the automatic curve thing it's a little bit um yeah the four thing that you are going to want to know about in x uh in Adobe X3 is about Styles and reusable symbols we have created kind of funky shape on our canvas and I can select the shape fill it with and we can add an ugly color yeah that's not such an ugly color but now let's say I want to make this some sort of reusable component that I could use over over and over in this a bad use case and it I had it's probably be something more likely a button or logo or a certain style that you can have to going on your project uh but for your uh our example this would do this will do if I want to create a reasonable symbol out of this Al though I will I would roll all the way over to the left and down between my asset and my layers I have an asset panel and it's here there's a few there are few things I can do while I'm here in my asset panel I could probably create a reusable color so now I have so now we have a border color and the fill color that are both a part of now that the rest of this design this design and I can always count come back and reuse those Styles I can also create a reusable symbol and I can rename this symbol I can call block because this what uh what it looks like to me and anything and anytime I want another one of these I could either option to drag and this could either option drag another one out or I could drag one from my my asset panel and there's like I uh like this it's a nice visal representation of all your reusable components in your project and it's really really nice symol work and a very interesting way I will say uh you just take any of the represent uh represented symbols on the canvas and you can change the properties with the color and we'll change the size of this right and I can also double click and change the size of the element when I do that it changes every symbol not only on the canvas but also the symbol panel so yeah so that's so that's kind of of interesting so now we have changed the size of our symbol and uh maybe we want to have that color into our colors we also have character Styles so I can use my text tool I just drag out some text and say let's just write headline and we will let's choose a headline and just wrag out some text and say that's uh and say that let's just write a headline and we can let's choose a headline like maybe we will all grab a fur or Bol or let's make the size little big and maybe even um make it little more bold yeah and our headline still something like 60 and then we can take the character style and we can take that uh headline into our character style and we can add it into our character character style panel and we can uh rename like and we can take the take the character style and we can add it into our character style panel and we can uh rename this like maybe we want uh this just to be uh like H1 and so now so we have a headlining and anytime we have like two new text we could start are uh when to typing anything like [Music] see uh with uh kind of text that I was using I can apply that character style simply by clicking on my new and uh text and double clicking on my character style and home man uh we have our headline style has been has has been applied on one thing and uh I really enjoying is if you have a multiple of those Styles or multiple uh of those symbols on a page or across different canvas you can right click and highlight all of them on every canvas throughout your entire project that's really really cool as well the fifth thing we are going to talking about uh adob XT is in my opinion uh one of its coolest features and that's It's ability to repeat grids and speed of the design process with its repeatable grid features I have now created what I consider to be a reusable component I am going to click I'm going to click back over to my layers View and I'm going to group The together I will I'm just going to call that card okay now I'm going to group uh that together uh together I'm just going to call that card okay and now I want to perhaps make lots of these cards and then added the spacing and how they all work together like all at one time instead of duplicating again and duplicating instead I can just click on the element I want to duplicate and head over to my properties after dragging down and all the copies of it of it appear and now we can have multiple copies that are being controlled by our grid uh we can just kind of fix them like and that if you want to change or added the spacing that we have of our cards in between from one to another we can literally just uh double click and we can roll over those margin areas and we can grab and just kind of stretch out uh to our liking so now and this feature is very extremely enjoyable I think it's really speed up kind of the rapid prototyping aspects of design as well as some of that tedious kind of back and forth of spacing things you don't have to do that because all these taken care off right here in our repeat uh grid function the next thing we need to talk about is prototyping it's uh kind of big deal in XD it's so big it has its own tab up the top of the left to and to the right of the design now we are in the Prototype Tab and prototyping is really really easy you literally just going to click on any sort of element that you want to like um for instance for our our carts or for the triangle or for the circle I'm going to grab the uh Tab and just connect it to and you're going to set it any type of trigger for instance I'm putting the trigger as a tab and animation should be like I will choose only Auto animate and this one back to this for this we have have to uh see whether is it working or not first we will tap on this and we have the play button over here so the thing it will pop out and when uh the thing we have putting on the trigger as by tapping when we will tap on the circle the next page of the iPad is coming after the iPhone 14 pro to the iPad one um so our final point it's all about about sharing sharing is uh cing and SD is all about sharing and so we are our uh we are sorry we are in our prototype view right now uh it doesn't matter if you are in your design or prototype the share icon will always show up and the Very uh top right and by clicking I can publish the prototypes uh and some Pro uh publish some designs space manage my public links but first thing we are to do publish our prototype we are going to allow I come across apps that may not be the most feature Rich but are just so welld designed that you can't help but use regularly to generate such high functionality uiux designers play a crucial role in creating userfriendly and Visually appealing digital products such as websites and mobile apps additionally the increasing use of digital products in everyday life life had led to high demands for you iux designers making them valuable Assets in many Industries you're already watching simply learn and today we bring you this informative video about how to become UI and ux designer and if you are a tech G hey is a brain teaser for you user interface design implemented is an iterative process that draws on predefined design principle is it true or false let us know your answer below and get a hard from Simply learn before we begin if the these are the videos you like to watch then hit that subscribe button and the bell icon to get notified every time we upload a new video without any further delay let's get started with the session on what makes uiio easy to use well uiio designers aim to create products that are easy to use by following several principles such as keeping interface simple and using consistent design patterns designing interfaces that provide clear feedback following accessibility guidelines and continuously testing the product with users to get feedback and make changes accordingly by following these principle and the best practices uiu designers can create products that are user friendly and meet the needs of their target audience so now that we have understood how UI is easy to use we will now explore their importance uux design is crucial for success of any digital product for example the uiux design of Instagram stories emphasizes Simplicity creativity and ease of use allowing users to quickly and effectively share their experience with others various creative tools for adding text stickers filters and more to enhance the visual appeal of stories also it determines how enjoyable it is for users to interact with the product a well-designed uiux can distinguish between a widely adopted product and a quickly abandoned one but why UI and ux UI ux is important because it directly impact a user experience with the product a well-designed UI us can make a product easy to use visually appealing and provide a seamless experience for the users this can lead to increase users engagement and satisfaction and even drive sales in short a good UI uxix can make the difference between a product that is successful and one that is not a poor UI ux can lead to frustration confusion and ultimately users abandoning the product additionally it's also a way of differentiating your product from competitors as a well designed uiux can make it stand out in the market now that we have covered all the basics of UI uxix next let's discuss the salary for both UI and ux designers the salary for a UI ux designers can vary widely depending on the factors such as location experience and the specific company or industry however here are some approximate salary ranges for UI designers in India and the US UA designer salaries in India ranges from 2.1 lakh to 15.0 lak peran with an average annual salary of 5.5 lakhs and talking about the US a uiux designers annual salary is approximately $98,000 the employment situation for them is stable and expanding but what kind of role should uiux designers aim for UI designers play different but complimentary roles in the design and development of digital products UI designers are responsible for products visual design and layout including the lay L out of buttons menus and other interactive elements they create the overall look and feel of the product and ensure that it is visually appealing and easy to navigate ux designers on the other hand focus on the overall user experience of a product they conduct user research testing and analyze to understand the needs and behaviors of users they use this information to create wireframes prototypes and user flows that will guide the development of the product they also ensure that the product is easy to use and efficient in summary UI designer focus on the visual design and layout of the product while ux designer focus on the user experience and usability of the product both roles have worked together to create a digital product that is visually appealing easy to use and provides a great user experience now that we have talked about the role let's explore the road map for becoming a UI designer the first one is learn the fundamentals of design study design principles such as layout typography color theory and user experience and the second is get familiar with design tools learn to use popular tools such as Adobe XD sketch figma and Invasion and the third one is build a portfolio create a portfolio of your design work to Showcase your skills and abilities to potential employers the next one is Network attend design event meet other designers and join online design communities to learn about new design Trends and Technologies the next one is keep bling stay update on the latest design Trends and Technologies by taking online classes attending workshops and reading design blogs and books the next one is specialize decide on a specific area of U iux design in which you want to specialize such as mobile design or web design continual Learning and Development as a field of design is constantly changing and evolving it's important to keep learning and staying updated with the latest design Trends and Technologies and the last one is certification if you want to demonstrate your skills and knowledge in a specific U IUS design area consider obtaining a certification up next we will see the skills required to become uiux designer now to become a uiux designer one must possess Technical and creative skills these include strong understanding of design principles including layout color Theory typography and user Center design knowledge of user research and user testing method or understanding users requirement strong communication skills to effectively present and explain design decisions to stakeholders understanding web development Technologies and ability to design for various platforms including desktop mobile and web strong problem solving skills to create effective and efficient design that meet users need knowledge of accessibility and inclusive design principle ensures the design is accessible to all users continues learning and keeping up with new design Trends and technological advancements in summary uiu designers must have a blend of Technical and creative skills a deep understanding of design principles a user Center design approach and the ability to learn and adapt to new technologies and Trends constantly now we'll see what tools are required or what tools are commonly used in UI us designing so the first one is sketch adob vxd these tools are used to create wireframes workups and user interface prototypes HR this prototyping tool allows designers to create interactive wireframes and prototypes Invasion this is also a prototyping tool that allows designers to create interactive wireframes Mups and prototypes figma this is a cloud-based design tool that allows for collaboration among multiple team members and can be used for creating wireframes Mups and prototypes user testing this tool allows designers to conduct user research and testing to together feedback on their designs these are some common tools used in uiu design but the specific tools used will depend on the project and the designer's preference let's discuss what practices are needed for uiu designers becoming a uiu designers require educations and practical experience a strong foundation in design is essential to gain practical experience designers can participate in internship or freelance projects additionally it's important to stay up to date with the latest design trends for example the dark mode concept tools and Technologies to ensure you can deliver design that meets the need of the modern digital landscape participating in design communities attending conferences and workshops and taking online courses can keep your skills sharp the ability to cooperate and communicate with cross functional team such as developers product managers and stakeholders is another requirement for UI us designers next we will see portfolio for UI us design that needs to include a uiux design portfolio is a collection of a digitally made Showcase of past designer skills and abilities in designing user interfaces and user experience for various digital products such as websites mobile apps and software it demonstrates a designer design process problem solving skills and ability to create users Center designs having a portfolio is important because it helps designers to effectively communicate with their work and skills to potential client or employers and it allows them to stand out in a competitive job market example of your best UI or ux work should be included in your portfolio along with the summary of your professional background and a landing page that makes it simple for hiring managers and recreators to find what they are looking for three main things your UI ux portfolio should include an attractive Landing Pace a few case studies and work history here is an example for you Nia Watkins is a US designer many of the obvious check boxes are checked in her uxix portfolio including clear design navigation and well organized Cas studies however Nia's about section is what really makes her ux portfolio stand out now when someone is wearing your ux portfolio they might not immediately look at your about mebe however if they manage to get that far it is crucial chance for you to share your story and say something not worthy Nia accomplishes this in just four condensed paragraph she Begins by clearly stating who she is and what she does then she describ her previous work and how it influenced her decision to pursue a carrier in design Mia talks about how she encountered ineffective poorly designed websites while working in civil service and frequently had no use creative solution to save time energy and money she expresses her view on what makes a good designer understanding The Human Experience last but not least Nia share her obbies and interest outside of design with us Nia's about section is strong unique and impactful it is an essential component of her brand and portfolio not just an afterthought you may not realize how important you're about me Pages you can definitely take a reference from Nia's portfolio and create a unique about section for yourself that relate a personal meaningful story about your enthusiasm for user experience contains few brief paragraphs about your experience and inform the reader about the person who created the portfolio let's take a brief look at companies that hire uiux designers Google freelancer Apple Amazon IBM Microsoft Facebook Adobe Salesforce Tesla and Oracle it is important to research the companies you are interested in their design philosophy and type of products they designed to ensure a good match with your skills and interest after looking at the companies that hire you iux designer we will see how to apply for this job so you can follow these steps to apply for a job in uii update your portfolio and resume to reflect your abilities better investigate potential employers and job posting in the industry personalize your cover letter and resume for each position you can apply and network with others in the field to obtain recommendation or connections by practicing and showcasing your design process and problem solving abilities you can get ready for the interview now at the last we will discuss some tips for interview know the company and the role research the company its product and specific role you are interviewing for show your portfolio have a strong portfolio that showcase Your Design skills and process understand the design process be able to explain the design process you created and how you approach solving design problems be familiar with industry tools know the most commonly used design tool and be able to explain why you are using them know the user Center design principle be familiar with user Center design principle and be able to apply them to real world scenarios stay up to date be knowledgeable about current design Trends and Technologies be yourself show your personality and let your passion for design shine through Gathering user requirements creating graphic elements and creating navigational components are all duties of a u u designers therefore in order to succeed in this role you should have a preor experience using design software and wireframes Tool nowadays a resume is an essential tool when looking for a new job the resume has overtaken all other requirements on the modern job marketing regarding what prospective employers look for instead of taking interview first the resume is what impresses employers this article will show you how to create a stylish and catchy resume in canvas CV template that accurately convey your Works experience so here we come with uh the steps to create the canvas CV templates so the first step is to select the templates and go to the canva first and you have to sign in with it and you have a templates option over here next to home and you have to click it you will enter to the template page of canva and you will write resume over the search bar and select the desired resume according to your choice and find your idal template for your resume by scrolling up and once you search the resume you will see a millions of resume templates available in this canvas so you can choose according to your needs so first so we are creating a canva template so we will choose a blank page so first we will take a [Music] frame Circle frame so that you can put your picture in this circle so let's take a picture of a girl let's take this yeah now let's take an uh rectangle bring in front we will change the color for this let's take an light color take a little big so in this you can keep your your name and your designation to highlight it in the resume so first so I have highlighted the name as I'm given and she is a graphic designer so I have highlighted this we can make it bold and little because we can change the color uh font okay now after selecting uh the picture and highlighting the name we will customize the background now we are in the canva homepage with the selected template and we can customize it changing the background color is a good place to start with customization to select the background of a template you have to double click on it and you can have a small box on the left of the panel and you can select any of the color uh let's take yeah this color and you can pick any of them include on your resume and now we will see the header and the contact information uh this section contains your name designation with some personal informations like email date of birth and any other social media links like LinkedIn Etc so we will write it over here so here I added the information with the header with the contact information of a user so here I'm adding the contact number with the email ID and the location with the links of like LinkedIn or something uh the websites the she is or the user is on next we can add the summary statement or the career objects like this section contains a small description of your career objectives in this field for example your expectation towards the company so we will uh design it over here so here I have designed with the colors suppose uh we can change the color for this also I have puted the light sky color or you can keep any color let's take this color yeah so after professional profiles after adding uh this summary statement now we have to add the additions educations or and the skills this section contains the details of your educations and soft and hard skills for example be BSC btech or Etc so let's add it over here so here I'm adding the educations and the skills of the expertise skills that is web designing uh creative thinking Adobe Photoshop Adobe illustrators and Etc and for the education also I'm putting the Masters in arts and illustrations and ba in arts or illustrations so next so next we will add the certification Hobbies or interest or projects like this section uh will contains additional informations about your habits projects Etc uh for example Hobbies like playing Cricket Etc we will uh mention it with the Stars or we can mention it with the dots or weekend with the poll how much the language you know so here I have uh mentioned the certification or the Hobbies interest or the projects like the language also like how much she knows the language of English like she knows I have written it by I have mentioned it by the dots like how much five out of five she knows out almost four or out of five she knows only three for the French and Etc and for the interest she she's interested in traveling or reading books so this part is of the certification hobbies and interest and the projects so the next one is uh the work experience this section contains the details of your previous work experience like your role and responsibilities in that company for example uh system engineer and you're having an experience in that so we will keep that in in this section so here I mentioned the experience the experience for the users where she worked before present or before that also I have mentioned it over here so that wrap ups our tutorial on how to build a canvas CV templates and the final output of the resume is [Music] this or we can make it more attractive with the different colors we can use it like as I have chosen the rectangle we will keep it over here 1 minute send backward and we can change the color for this let's pick some colors like um soing it there from this side also we will increase a bit Yeah similarly we can apply it to the right side also we can copy then yeah so this is the final output for our resume templates in that we have created where we have wrap up with the profile picture of the user with the name and the designation in highlights after that we have come with the header with the contact information where we uh put all the information of the user after that we put the Professional Profile where we are putting what the expectation from the company and the expertise skills of that of the user and the educations of the users Masters or ba or something else are with the uh interest on the language and after that we have mentioned the header with the contact information and after that we have mentioned the summary statement and the career objects with the educations and skills and after that I have puted the work experience of that users and the final I have put uh I have mentioned the certifications if you'd have or the hobbies and the interest and the projects so to start off with let's understand the top UI and ux tools to master in 2022 and the first one is adob XT all the graphic designers are familiar with the adob industries leading software including illustrators and the photoshops these adob XD Cloud products are beneficials to the UI and ux designers photoshops can be used to modify composite and produce visual contents such as arts and Graphics some of its features are they can change the master component then distribute it throughout the compy company and it is perfect for designers in huge business and organizations with the necessity for asset uniformity and it is good for prototyping and designing and it works on Mac OS and window next one is sketch in order to create high quality prototypes and the interfaces with just an intermediate preview on the mobile devices sketch has become a common ux tool it it has an icon that makes it easier to construct UI elements for reuse with the help of these capability it is possible to create Design Systems and uphold consistency in interface design some of its features are user can generate mup using these design and prototype tools and share them with the group for the feedbacks to get an accurate knowledge of the final product they can add photographs and addit the text and it is good for prot typing and designing and it works on Mac the third one is Invision Studio it is a set of three UI and uex tools that offers user a centralized workspace for the collaboration and quick screen design prototyping all the prototypes sketches and the designs are accessible in one place so thanks to Invision Cloud communication is also made simpler through Invision Studio and they can get intermediate input and stay informed about the documents modification at every stage some of its features are the studio platform provides a simple method for quickly producing responsive design for the any screen as well as the ability to quickly test a user experience with the vector based drawing capabilities it may mix users navigation by animating screen changes and it is good for prototyping and UI designing and and it works on Mac OS the next one is figma it is one of the top UI design programs it features a drag and drop user interface designers that enables Cross organization collaboration one of the few uux solution that unites designers developers and project manager is figma some of its features are it takes pride in being an organization's single source of Truth you can upload approved reusable Al ments icons fonts and style team members can check code as well as extract the keyr and it is good for Designing and it works on browser Mac OS and windows the next one is framer x one of the most powerful ux tool is framer which was formerly known as a framer act it provides demonstration of a future products functionality and performs that are so close to reality as possible professional UI designers aiming to produce amazing prototypes that should consider using framework some of its features are it provides collaborative early stage creation input from the JavaScript and it supports a development of complex and advanced prototypes including the projects for augmented reality and virtual reality it aids in the establishing minor yet important Transitions and it is good for prototyping and it works on browser and mqu and the sixth one is flow map it is an another specialized ux tool that makes it onto our list the tool works best for IAS sit Maps user flow and sites using flow map several team may see the workflow quickly when creating a ux strategy flow and the site Maps need to receive a lot of considerations there are several techn Oles available that integrate UI and ux tools in a single platform some of its features are it is a straight forwarding sit map tool that facilitates team work and the website page construction customer personas are created with the help of the Persona to and it is good for Vi Framing and web designing and it works on browser the next one is origami studio in contrast to other ux design tools like Invision it is extremely Advanced software that specially for expert it was originally developed for the Facebook designers but it is now freely accessible it has a steep learning curve that makes it a difficult prototyping tool for the new users and it is one of the most advanced ux tool available and it creates interaction that are realistic and offer easy sketch integration some of its features are it creates a prototype logic using the patch editors and it has a substantial fixed library that can be assessed instantly and the components from the sketch can be copied and pasted without any issues and it is good for design misss and it works on Android Mac OS and iOS devices the next one is balsamic is among the greatest UI design software and a popular WI in tool among designers product managers and innovators and it was specially created to make low Fidelity wireframes despite its Simplicity this tool is recommended for the ux designers of all the levels to quickly demonstrate the usability of a given website or the applications any product manager or business owner trying to put an IDE on paper will find Bic to be very much helpful some of its features are it helps in the creation of lowtech wireframes that focus on the utility and the user flow a drag and drop editor is available to make designer quick and easily and it works on mup and wireframe and is good for browser Mac OS and windows the next one is Mel another excellent U ux tool is marel which can be used to create a variety of high-f five and low five wi frames Pro prototypes HTML and CSS handoff it is a fantastic tool for polishing the interface for the prototypes and giving it a finished look the learning C for this app design tool is quite minimal and it makes the tool efficient and developing and the interface and creating prototypes some of its features are it provide testing handoff and fast prototyping and it enables you to easily construct pages and even use a prototype to test your design and it is good for wire framing animations and it works on web Android and iOS device and the last one is exure the dynamic content conditional logic and the adaptable views capabilities of the exure RP UI design tools allow you to quickly create the prototypes that function similarly to the real things in order to exchange design with the stakeholders you may also connect XR to the well-known design software like sketch some of its features are you may instantly distribute prototypes with the organization for the intermediate feedback using the built-in exure Cloud capability it enables ux designers who don't frequently work with the coding to transfer a design to the development team with the full documentation and it is good for prototyping and it works on Windows and Mac now let's discuss what figma is and proceed further for the scene figma is an online tool for Designing and editing users and Graphics interfaces it may be used for various graphic design task including wireframe websites creating users interfaces for the mobile applications creating design prototypes creating post for the social medias and everything in between compared to other graphics editor software figma is unique mostly because it immediately works with your browser also you can begin designing and getting your project from any computer or platform without installations of additional software or acquiring addition licenses after discussing what is figma we will see how to use figma it is a web based application as we already explained to begin using the app you only need a desktop or laptop with a reliable browser and an internet connection after that you may sign up for a free account on the figma websites Additionally you may immediately get to work on your designs with figma you may design products from scratch or from pre-made templates using an editor that is incredibly users friendly for the beginners there are many sources that are available online to teach you how to use figma but but learning will be much simpler if you use the lessons we provide Below in the tutorial I'm going to show you the best way to start practicing designing apps and websites in figma and we'll give you stepbystep instruction you can literally follow Click by click I will only tell you the stuff that you need to get started designing interfaces so let's get started so we are going to look at the tool called figma and it has a few advantages but most importantly for you it's free to get started if you are working by yourself we like using it at smart because it has also really good collaboration so we can have multiple people working on the same design file at the same time it's really very fast it works on any computers whether you have a Mac PC Linux whatever you have it works right in the browser as you're watching the video if you have any questions about how to do a particular effect in figma or any comment or something that you want to recommend please put it in the comment below and if you want to find out more tips about UI and ux make sure to subscribe our YouTube channel so you will never miss an update from Simply learn I wanted to start off with the templates so what I want to do now is create a triangle for my own design and it will called as frame so the first tool you need to know about is the frame here or you hit the F on your keyboard or anything I press will show here in the bottom left corner so you know exactly what I press to activate a particular tool and then I can start drawing a size but I know if I look at the frame here I click on that it shows I can hit F again to go into the frame mode and then I can select from here A bunch of templates and I will select iPhone Pro Max and then it automatically puts in the frame of a particular size and I will just place here and I will start designing so let's assume I want some different color background right so the easiest way I could accomplish this is I could draw a rectangle I could do from here you can see that there is a rectangle tool and it's already says like R next to it so I'm going to hit r on the keyboard and draw a rectangle right so I don't want to take it up I don't need to take up the whole screen this is fine now I can see by default this is dark color so I will click on it and so here is I say whatever like I can select the color fine to make it more attractive for the right under the position and the dimension so if I want to change this this is just an changing Y coordinates and this is for sorry this is for the Y coordinates and this is for the x coordinates you can see the dragging your cursor see the cursor turns in just sideway arrows and I can click and just drag left and right change these values or I can type them in the right I can also change the width and the height this a WID and this is a height the right or the corner radius right so the rounding effect is there so I can use that so with the arrows the surrounding effect and Corner radius suppose it must be 29 or 39 39 and I will keep this also by 39 so we can see this and this Corners are giving the round effect so if I change Zero you will see there is no longer rounded and if I want to keep the top rounded but not the bottom then I can change the bottom ones right and now it looks good the next thing I have to create is the circle is from the shape Manu you have an ellipse which you can do also used with the letter o on your keyboard now by default you will be able to draw any kind of circle with any aspects of ratio now let's change the color of the circle you will often need when designing mobile interfaces because you you will want to have an icon for home screen or something like that and you can literally Google free figma icons after searching uh this page will open and let's say I want to copy this one and I come back to my file and I will paste the element and figma also helps you to with positioning it automatically centers things and let's say what I wanted to get an image here for interesting instead of the blank color so one good website is called unsplash here I just write food and I will get the image and save it we will copy that and paste it over here yeah I the command V2 paste and I just can reposition this now the thing that I need to text here that says non- contct deliveries and the way I get the text is through the T icon here and I can just hit the T on my keyboard and text no none so we will change the font by double clicking we will change the font of the text in SF Pro text for make it little small so now we will write one paragraph here below so I will hit the icon T again we can addite something related to our food and we'll make this font as small four something like and make it in the mid yeah so now I'm going to have a button for order now so for that I will hit the keyboard again with the T repeat have rectangle for so now I'm going to have a button for order now for that I will have the rectangle so I will hit R and I'll make one rectangle over here one make it in the center I will pick one color for that I you can steal the corner radius and so I said order now text and I will make it in the mid I will just Center this and make it and let it be white and this is very easy and now I will just write under the text for disiness so so starting with a template we had make our speci first pach for the food delivery app in figma if you are a web designer or you are ux designer you may already be familiar with the figma and all it can do for you but did you know that some simple figma tips and tricks are available to help you with your task and it is a tool that are responsive quick and simple although the tool is simple to use there are many hidden yet effective features to find although if you feel comfortable using it daily these additional 10 suggestions May improve your workflow let's get right to it the first one is use a scale tool to avoid Distortion the second one easiest progress Ring third drag objects outside of a frame while keeping them inside it the fourth one is swap the position tidy up and organize the green fifth duplicate The Last Action sixth one is preview a color with the eye dropper seven fix the line height in seconds e create the square cells with ease ninth control the reels and unsplash and the last one more tricks with space bar let's get into in details for the first one is use a scale SC tool to avoid Distortion with the scale tool you can keep your design Pixel Perfect and to use it choose what you want to scale press K on the keyboard and drag this tool extremely flexible and has several benefits firstly adjust an object size is simple without picking it up a key second you may adjust the sizes of several items at once with the free transform tool third you may rotate an item using the free trans form to among the most crucial design concern is Skate which needs to be given great thought in each project and the next one is easiest progress ring pigma is a great application for Designing Rings since it has many tools and features that makes it simple to construct beautiful pattern these are helpful for reminding users to carry out the desired action or for letting them know how much of a product product or PL still they have left and in figma you must first create a new file and to begin select create new file from the screen upper left corner menu in the menu or the left side of the screen select the shapes that will be the tool doing this will appear in the menu of several forms you may use in your design we advise utilizing the circle from the Rings and the next one is drag objects outside of a frame while keeping them inside it an object can be dragged so far any object can attempt to drag off the canvas while immediately log back into the position to keep an object inside a container while dragging it outside of a frame hold down the space bar in order to view the object while it is outside of the container you may also disable clip contents for the frame that includes the item and the next one is swap position TI the up and organize the G organize your design by selecting numerous objects in an array and then clicking the grid symbols in the corner as a result every object spacing is equalize and you may drag items to rearrange them and change their spacing and the fifth one is duplicate The Last Action by choosing using the item in figma hitting the keyword control+ D that is Windows or Mac OS and then dragging the copy to the desired area you can copy an object several times Additionally you can use the duplicate menu option under the edit menu use the replicant menu or the command to copy an item many times in the Grid or the pattern and the next one is preview a color with the eye dropper you may paint over text layers stroks and other vectors object with the color peer the ey dropper tool allow you to add color samples from anywhere in a picture to your element panels to acquire the desired effect adjust the tool setting like sample size and Sample using the option bar select the color you wish to view by clicking apply solid fills gradients or pictures using the Color Picker in addition you may use the blend modes to modify a color situation or opacity and the next one is fix line height in second when you input Auto or remove the current value from the line height box your line height automatically adjust if it appears weird and you don't have a specific value using the leading setting in the text section of the inspector's panel is a second technique to modify the line height in figma you you may enter a number or a percentage to specify the distance between the line of a Tex in this option and the next one is creating Square s with e do you know how IOS app icons are shaped they don't resemble typical rounded rectangles they resemble squares in between a square and a circle a square cell is a form the term square cell has at least two meanings the most popular among which is based just on the Square ellipse a combination of terms square and circle the word squares in UI design this kind of form is becoming more and more common how to make a shape like this in figma it is incredibly easy the square cell is in between a circle and square and the next one is control reels and unsplash two essential plugins to save the time are content real and unsplash Avatar's names and address and much more can be added to your design with just one click and thanks to content tree a free resource for high quality Graphics is unsplash when creating a new file in figma choose new from unsplash to use unsplash images this will launch a pho library that you can look through and utilize it for your design and the last one is more tricks with the space bar you may also set aside space as you sketch a form so that you can reposition the object afterward pressing the space bar will cause figma to immediately transfer the item into an autof frame or design if it is sufficient and can be used in the place of nesting a space bar is a great tool to expand the selection size of your pointer drag a selection region and then hold down the space bar you may also hold down the space bar while sketching a form to move the items around and in addition you may also use the space bar to prevent the figma from automatically nesting items inside the frames pigma is a great tool for prototyping in UI and ux design that allows you to create an interactive flow and that allows users to interact with your design prototyping is important for different reasons setting the workflow for the new users and examine and getting feedback from users so now we will see what is prototyping protyping is important for many reasons and you can examine new users workflow prototyping is what allows designers to design in the era of digital products prototyping is the interactions between the users and the interface prototyping is a process of how the final product works and this allows the product team to test their Design After understanding what is figma and prototyping we will see how prototyping Works in figma so the first one is we can add prototype flows add interaction fix position add overflow scrolling and how to present and share prototype so the first one is ADD prototype flows in the Sigma file you can have one or more than one prototype flows on each page and they should have their starting point and unique name select the first frame you want to appear in your flow and then click the add icon right to the flow starting point and after adding you can rename the Flow by clicking on the name input and can add a description by using the point by clicking the delete icon next to the flow starting point and the next one is ADD interaction interactions are used to build a prototype and can be used to show a different Behavior a pattern of navigation and outcomes and they work by connecting two different layers and then we'll examine how these two layers will interact with each other by adding animations act and triggers interactions can be simple and easy but sometime it's more complex too as animated elements move and change their properties interaction can be done in three steps instant interaction animated interactions and the smart animated interaction so the first one is instant interaction use instant interaction animation to let the action to be taken and plac without movement or effect it will be helpful to navigate between the pages or model example navigation between the pages with an instant animation you can navigate by by just tapping a button the next one is animated interaction use animations to add movements in interaction that helps move in move out slide in slide out Etc use different features that are available and last one is smart animated use Smart animations to examine matching layers on different frames and animate their differences these differences can include a change in color size and position fix position fix the position of an element in the Prototype so that it will easy to stay in the same place while scrolling and it is helpful for the element that wish to be in the view example navigation for top and bottom configure the design panel set the next one is ADD overflow scrolling it allows scrolling in through each frame inside the Prototype it is very helpful for prototyping components or UI region that have their own property of scrolling example menus table list Etc and it is important to have a frame with content overflow while using overflow scrolling and the next one is how to present and share prototype first select the icon press an icon near the top toolbar that presents the Prototype and if there are multiple flows on a single page switch down between the sidebar and here comments can be mentioned as notes task and questions although you can leave feedback to prototyping can be shared by clicking on shared prototype in the presentation toolbar after understanding how prototyping Works in figma we will see how it is useful using prototype is a great method we can use it in user flows and interaction in advance idea sharing and Improvement we can get the feedback from the users and also we can test the users interactions and the last one present your concept to the interested users you may preview a users journey and experience with your ideas by creating several flows for your prototype on a single page with figmas prototyping features so in this tutorial we will will look at how to create prototyping with figma figma is a powerful design and prototyping tool that you can use for both your ux and UI projects if you are new to figma I recommend you to check out the tutorials I created on how to create Mups in figma first which I will link to it in the description below in this tutorial we will make some interactive prototype so we will get started by opening up the figma file with this fire frame here we have few static Pages including the homepage and the uh women's category page and the product page and I will walk you through in this tutorial is how to connect these pages so users can click through just like they would on the real products so the first thing we want to do is enter the prototype in the figma yeah and you can do that and that by clicking on the Prototype tab in the top right corner now you will notice that nothing really changes except for the content in the right side bar yes the Side Bar so we will start there and there are the settings for your prototype these are the few things you want to change uh depending on your device or sorry your design so the first setting that you may want to change here is the device and device refers to the device that your protyping is presented in so in this case uh we are designing for the desktop so we are probably would not want to present these design inside in any additional uh device I think so uh but uh wait let me do it in that yeah but uh if you were designing for mobile instance it would be nice to show these designs uh yeah these designs uh inside an iPhone iPhone but for our case we will design it for the desktop so let me back with the none okay um another setting that we want or we can change is the background color and this refers to the background color of our prototype that appears where you are presenting the mode or this present mode so if I open up yeah present mode here is a top right hand corner right so I can see the design here yeah I can see the design here there are some few margins uh these dark margins on the side that are currently look black and that because here is a background and the setting that we can have is the background color and this refers to the background color of your prototype that will appear in your present mode when you click it in this and you can present it and you can have that color of the background if you are suppose yeah this is the color of the background that is black and you can change it so yeah so that uh if you'll do it as a white color so it it's lot more than a natural feels like there is not uh that awkward cut or the sides of the design if it is a black color so let it be white so yeah so uh so now so now that we have set up our prototype and adjusted the settings then we can actually start the connecting these different uh screens and the way you do it is by just creating the connections uh so to create the connection we will actually have to go here to the homepage yeah this is the homepage for instance right so and let's imagine that we want to connect this woman link to the women's women's category this is the women's category right so uh page which is on here like like to do that I would like to click on the women you will see that the right of the woman there's a little uh White uh this one there's a little white circle appears and that's what known as a node and nodes allow you to connect these links to other pages so if I click on the Node and the white circle yeah and and I will drag it one minute wait if I'll drag it yeah I can now drag to many other pages in this file so I can drag to this category page or I can drag to another page which is further on this file so if I drag it to the category page of this women you will see that there is a connection created right uh wait it's not created I think let me connect it once more yeah it's connected right so there is a line revealed here that shows that there's a there when you click on in the women see when you click in the women it's going to take you to the women category page and another thing uh that pop up when I created uh that connection was a little arrow yeah this one here in the top left and this is known as the starting frame indicator and allows this and all these indicators is which a frame of a prototype on or which one of these screen will be the first screen that people see when they open their prototype right um so uh right now it's set to uh the home homepage home but if I wanted to change as it I would just click it on the arrow and drag and then change it to another screen so in this case uh when people open your prototype they will start on the women category page but in our case we actually want users to start on the homepage so I will click that Arrow again and drag it back to the homepage yeah um so now let's create another connection So currently we are having a connection from the homepage to the women's category link uh to the women's category page right but now let's create a way for users to get back from women's category page to the homepage so what we want to do is just select I see shoe and then you can see the node appear right here so the right you will want to click in on that node and drag it over 1 minute and drag it over to the homepage so that uh let me connect it with here yeah yeah so so that uh way when you the when the users on the same on uh when the users on the nicey Shoes logo it will take them to the back to the home page of the women's category that will be this one um so before we create more connections here uh in our own prototype let's make sure that the connections are already created are working correctly so to do that and to preview your prototype what you do have to do you have to go to the right of the corner and there's a play button so it will open up open it up yeah right present mode this is known as the present mode right and you have already look at the screen previously and there is a there is your actual prototype and this is what you did you want to share with your users client teammates Etc so in in this present mode the there are few things to know we will see the present mode is just another tab right in your figma file so if you want to go back to your design you just click on the tab to the left of you can go yeah this one and to the another tab to the right side and enter present mode again and you can do the present mode right and what's really nice about this present mode is that it updates automatically as you uh as you update any uh as as you update any of your prototype here in the left this tab here just updates automatically you don't have to keep opening up a new prototype every time you want to preview something so in your case you want to preview all of the connection we just created so to do that we just have to click anywhere so uh you will see that the little triangle sorry a little rectangle appears overlaying in the women so and that's what are known as a hotspot and that indicates that there is an interactive element that we have to click and we can click on so if we go ahead and click as we already clicked on the women Al vant uh women that takes us to the women's category page and this is the category page right SC down and uh this page check out the content like a normal website and then we can also want to click again to see if there's any other hot spot in this page so yeah so if you click here we will see there's a Hotpot on the logo which is uh we know as we created uh uh and that will take us back to the same page if we'll click on that yeah so it's look like uh both our connections are working correctly right let's create few more okay uh the next connection uh we will uh we want to make is yeah okay uh sorry the next connection I will want to make uh is from women's category page right to the product page product details and where we want to add the connection is here to the button suppose button in the top kicks for the women's as a specific product right product name top cakes for women so I could just goad and select the image and drag the node and bring it over to the product page right but what I actually want to do is to make this make this whole card clickable so this image here or this block and then this title as well as so to do that what I want to do is Select both the elements here and then hit the control g 1 minute yeah on the window okay you have to hit the Control G on the window and what does uh what that does it uh that will group both the elements together and create one single note for this entire group so now this whole card is clickable and us is just the rectangle and now I can take this node yeah and this node and drag it to over to the product detail page right and we will see that there is a connection now and now when I it go back into previous mode I will go over to the women page scroll down let's wait and when we scroll down and if I click anywhere yeah here's the Prototype I will see that the hotspot is for the entire card so if I so I can go ahead and click that and that takes it to the product yeah product page this is the product P so the next thing I want to do is uh give users way back to the women's category page so actually I want to include a right uh include a link right here so yes are connecting that link back to the women's category page or to do so that I will go back to design file and then I will select this women here by double clicking on that yeah when I select the women the selection box or this uh boundary box is actually pretty large and I will show you what that means when we go to our prototype so if I clicking on that node and we'll connect it to the women's category page I will zoom out see yeah so you can see what uh when we go back to the Prototype that the selection box is actually the same as our hotspot yeah is actually pretty large as well as it would be fine for the most cases that prod ipe find in this cases because it's just a couple of pages and uh we are just linking back and forth but if you had a more complex prototype where you want to include a link include a link on women's and then another link on the sneakers that's really wouldn't work so to fix this um and to make this Hotpot slightly smaller what you to do you have to go back to your design file and then we have just drag click to drag the selection on women's here you have to drag it slowly and make sure it only covers the women link and now when you go and now when when you go back to our prototype we can click anywhere you can see that the prototyping uh let's wait one minute yeah okay 1 minute yeah actually uh yeah after prototype we click anywhere uh we can see that the Hotpot is exactly the size of the women legs and the sneakers below right um so last connection that I want to make here is a connection from the product page this product page uh which is Page uh product page uh which is uh the page where on the back on the homepage so to do that I will create a connection here on the logo of nice shoe yeah logo that links back to the homepage uh so we will go over this design file design file is this one yeah I will just could just select the nice shoe uh logo drag uh drag the no drag it over to the homepage but I'm actually going to show you a trick to speed up this process of creating uh connections especially when it comes to navigation element so what can I do is go to another page and I can select this element and then simply paste it into another page so first I will copy this and now we will notice that when I paste it in actually past is the connection as well as see this one and it keeps this one to so you have a connection on the women's category page which made before um and we have uh this new one in the product page and this is amazing especially when you are working with things like menus because um when you have menus with 10 different links uh that you want to do that each page and create more connections like um to do uh on each one of the your link instead you can just copy and you can uh copy the entire menu paste it on the new page and those connections uh will already be made and now we will look at how to edit your prototype in other words edit some of the connection that you already made um yeah uh doing this in figma is super straightforward and all like you have to do is Click uh on one of the connection so in the first case the connection from uh women's to women's uh category page this one category page I will click on that yeah and now you have a few options uh or what call interaction details on this specific connection and there appears a little pop up here to the right call interactions details and there are few things that you can do here is uh one you can manually change uh what screen you're navigating to so for that if you're do for the instance I could choose product page instead of women right which I will touch on briefly but few cool features that figma has to offer so first off animations between the screen so when I click on this link and that makes me to the uh uh that's make me to the category of women's category page um this is the animation or the transition that happens between these two screens so right now it's Set uh uh it's set to in instance so uh yeah the animation it sets to instance so you can see when I click on the women so instantly it's taking me to the women's category um but I could actually change that add to something like uh dissolve uh I want uh that does is instead of but just flashing to the women's category page there is actually a nice dissolve transitions uh let's click in on this yes this one uh that's a dissolve transitions between the screens and this is just one basic animation style but figma has a few more advanced features uh that are really amazing actually so if you choose a smart animations for instance let's see for the dissolve yeah suddenly it dissolves right that effect and uh actually if you choose a smart uh animation for instance let's choose okay so uh we set it as a smart animation let's play and if I hit the women there a smart animations for instant if I hit the women it will go with a smart animation of instance and and if you can see that some elements start to shift and that was not very smooth because these were not a lot of common elements from page to page but if I do something like that takes so the women page uh duplicate that and then we'll actually make this duplicate 1 minute and if I change this changes to theand it little small and then pan repeat then men to this page and I will connect this and if I link men to this new page and now I preview uh this let let me connect it with this is and uh see it's h set to Smart animate already if I preview this let's preview this one here here what I looks like is so as you can see that the line automatically animate see and it's menu Link in the case if it is also gets smaller I mean that what smart anime uh can does that's really basic example and it gets a lot more complex when you are working with different elements but it's a uh it's really uh quick way to create transitions between the screen and it works especially when things like an app where where you are pulling up sheets or popup um yeah figma offers some amazing features when it comes to animations and it's really uh powerful so I definitely encourage you to play around with some of these features in the interaction details panel um so the next thing I want to talk about here is how to share your prototype so you might want to share your prototype with a client or a teammate that involved on the project and to do that in the Fig Mite it's actually uh super straightforward and so the first thing you want to do in is your open your present mode you if it is not open then you can click it on the right side of of this one or otherwise we already open the prototyping um present mode so you could know that when you open up this tab you already open then you have to hit the share prototype now you important note that you make sure you are not hitting share from the actual design file because in this case you had to share a design file not the Prototype so when you are sharing just prototype make sure you are not doing it from present mode so uh will you go ahead and hit the share uh then repeat and hit share prototype and that gives us uh few options right so the first option is to invite access um and you can do that by entering email here or here and just they will get you get an invitation to the Prototype and they will get open that up with that that's one way to do it but the way uh I actually prefer to share out your prototype is by hitting this uh copy link option and that just open copies a link to your clipboard to this prototype that can share out in the message or the personal message by email or by FB or Facebook messages or really whatever you want uh yeah but just to mindful that if you're doing this copy link method I guess you want to make sure that this is a set to this is set to anyone with a link because if it's set to only people invited to this file when someone receiving that links and they are not invited to this file they may not be able to open so if you are sharing out your link make sure you set it to anyone with the link hope you enjoyed this tutorial and if you are interested to learning about more ux or becoming a ux designer please check out the link below of for the ux design and we will cover the fundamentals of your exerise let's say you are creating a poster for a school event for that you need to design a poster by choosing various assets to edit an image we need a Photoshop for creating books magazines and BR in design is there and if you require different pictures then there are many stock photo sites with a collection of template rather than navigation to so many platform for these Tas we present you canva the on stop solution that combines not only these editing but also publishing tools that provides an online design platform so hey everyone welcome to Simply L YouTube channel today in this video on canva tutorial for beginners we will showcase canva tools for Designing but do you know that you are expert use canva to so if you want to learn u i expert in 5 months and attend master classes from the top faculty of IIT Bangalore consider our Advanced certifications in UI design course check out the link in the description for more details and if you geek here is a brain teaser for you which country uses canva the most is it Australia Japan United State or Russia let us know your answer below and get a heart from Simply without any further delay let's get started with the session by taking a quick look at what you are going to learn we start by introducing what canva is and what makes canva so popular we then take a deep dive into some of its features finally we look at where canva is used along with its pricing and also we will create a poster for the school so let's take a overview about canva canva is a platform with the graphic design that provides user with the tools and resources to create visually appealing design for various purposes canva users can create professional looking Graphics social media posts presentation and marketing material among other things canva is a popular graphic design tool where users can create visual content of a wide range of templates customizable design collaboration and cost effective now that we have a good understanding of what CA is and what makes canva so popular let's take a deep dive into some of its feature and we know canva is a popular online graphic design tool that derives some of its key features include the first one is userfriendly interface free and paid plans social media integration customization option Design Elements and it has inbuilt and comprehensive image Library overall can is a versatile and userfriendly tool ideal for creating professional looking design quickly and easily moving ahead a deep dive into where canva is used so canva is used by businesses marketers Educators and bloggers and individual who need to create high quality visual content for their brand or personal projects with its userfriendly interface and extensive features Cana has become a popular tool for creating visually appealing design for various purposes finally the pricing for for the canva canva offers both free and pre plans here are details of each plan for the free plans it includes access to Canvas basic features including thousands of templates photos and Design Elements users can also collaborate with others and share design and for the canva pro it is a paid subscription plan that offers for one person only it is 3,999 rupees perom and some of its additional feature are their ADV collaboration and Team Management feature the ability to create and save brand kits for consistent branding and the ability to schedule social media posts directly from canva and the third one is canva Enterprise and for the team um it is a custom pricing plan for larger organization that is for two plus people it is 6,590 rupees perom for the first five people that requires additional features and support custom branding options Advanced security and ACC compliance features custom templates and Design Elements and advanced analytics and reports are there in today's tutorial I'm going to share an in-depth canva tutorial for beginners and you will learn everything there is to know like to start designing your own graphics and whether you like to use it for YouTube Instagram or other social media channels it doesn't really matter because canva offers a great variety of tools and it's free to use as well for watching this video you will know how easy it is actually the design with it so let's do this so I am bringing you a comprehensive canva tutorial and if you're not heard about canva it's a free design tool completely brilliant it's got tons of different photos elements and other graphics for you to use so in other words a complete Lifesaver in the content marketing world it's absolutely brilliant for any graphics that you want to design whether it's a social media your website and blogs whether it's for any presentation card invitation card anything of that nature canva will sort you out so without any further Ado let's do this okay so we will start off with creating an account in canva and it's completely free to begin with um so you can sign up either with Google with Facebook or traditionally with an email address obviously I have an account already so I didn't need to do that so just signing up and it's super easy and then we will start designing all right first so in the top left you have got the main navigation panel and you have got the you know the returning of the homepage of course and then you have got the templates and then obviously categorize into different types you have got their uh social media templates background birthday marketing Educators so there are various different templates for you to browse and whenever you need something you can just glaz through it and see what they offer already already in canva you have got the features let's see the features section as well with the photo icons print because canva now offers printing as well there are different apps uh you can uh have to connected with canva and some of the use cases are there with different Graphics charts video teams you can invite your teams different templates are there so there's also the learn section which is super important especially when you are a beginner so after you watch this whole video set up your account kind of get the feel for what canvas I would highly recommend you actually go to the learn Tab and watch some of the kind of uh videos um like how to create top designs logo maker flyer maker and then so that as they say in here uh you can see how to learn how to connect and grow your community here so uh they have uh give you quite few different features and tips for you so the learn section is really really important and I will mention something at the very end of this video as well a resource for you to learn even more in depth then this video is going to go but stay tuned I will explain at the very end so uh this is what the canva homepage looks like there are quite a few different areas to help you navigate so I will explain each and every every one of those so that you can or you know where to go certain functionalities over there so let's start off with the top right panel uh you have got your account so there is where you are and you can find a change of your account settings you can set up your profile photos as well and refer your friend the things of that nature then there is a create design button which I will explain uh in a moment you have got the setting in here the account setting as well as there is a Center so let's get back uh 1 minute yes so and one of the most important part is the search bar you can or once you have signed up for the free canva account there are some different between the basic kind of free canva and canva pro which I will explain at the end of this video so make sure to watch uh till the very end um but at this point I'm just going to use the free canva because this is what the majority of people will use and need so uh we'll just stick with it and then at the very end I will explain it uh all the details so the first thing we want to start off with is in the middle here's a search bar and I have to say it's one of the quickest way to find any template I need different design with specific dimensions that you need to look for so for example if I wanted to quickly create and school poster uh so for that I will go to create a design and we take take whiteboard or we can select okay I will select the Whiteboard portrait okay then after that we will color the background first to decorated uh first we will take one frame for that um let's search more about it let's not to select a more designing like let's select the simple one or we can choose another one after this uh we already taken the Border like it is not that design but simple and so not that much designing but simple let's take a picture let's find some pictures regarding School say board so as we know this is a poster for uh school so let's say let's write um one heading was maths Olympia quiz let's see the want for this now let's add some elements some images that I've already installed I think to decorate this poster for the school let's take this medal you can download these pictures from Google and you can uh actually paste it over here you can download the pictures regarding your topics whatever you are going to create so these are some these are the collection that I have sted like this you can create add all the pictures whatever you have done download it you can add elements according to your needs so so this is how it looks this is the final design for the School poster for math Olympiad quiz or you can add some if you want you can add some more pictures over here you can addit the color for the background you can uh pick any frame regarding your posters and your needs and I have add the medal cuz it's a Olympia quiz and a bag as a design for the school and some books with the specs and pencil and it is a Olympiad quiz for the math so I added the just a uh to look attractive I add this animation of math with the colors and poster over here one glob is there and one pencil just to make it more beautiful as it is a school poster so this is the final poster for the school math Olympiad quiz the next we will create an advertisement in the uh Instagram suppose so just go to create a design once again and let's let's take this it's already open so still Instagram poster for square or portrait let's see how does it look what is the size for this okay this is perfect let's change the background color let's take this this and just go to file and show margins wait okay so after this choose some elements to make the design look you know so cre uh be so now just choose some elements to make your design look more attractive and beautiful so we'll add some elements um let's say Circle it in the mid change the color for this let's take okay I change the color for the background let's add one element over here be little darker in color let's suppose this this copy this make a design with this that's make it over here you can add or adjust any elements according to your needs [Music] so a line over here now and you can upload and choose any image so as I have already downloaded one image of a man fix it over here fix it over here okay adj just the image and just make it look this is the image and just added the image with this saturation it be zero yeah after that just add a text to your design let's suppose and always keep in mind that always you have to choose one font in any all the design so you can adjust your letter size with according to your design let's choose one take font one font for all the okay let's add another text over here just adjust the size adjust the size uh let's change the font for this to [Music] okay okay let's make it look more beautiful let's add a text as facts and always keep the same font let's change the color for this let it be little [Music] darker now let's add another page copy this first you can paste over here you can write actually anything but for the design let's look how how does it look you know then again this actually we will keep it little down over here copy and paste it at down as this is Effect one so we'll you can add uh design to Carousel your effect let's an element again or you can copy from here let's make a different [Music] color so we have written over here about jity we will write something about J again over here adjust it let's this big and same font again the first page so we will see this as adjust the size and the alignments of the text similarly you can add another page with the same design with different text second and again can add any other text over here just for creating and just want to show you how does it work I'm just making this change the color you can add as many as you want change the color for this also yeah so this is how does it so this is how does it looks so this is the final output how does it looks so next we will create a web page so let's uh create a web design for the uh game FIFA or the football let's create it let's take a whiteboard let's take site fine first we will uh choose a background color let's give a theme so I have already installed or downloaded one theme for the football let's edit it and make it little let's see more if it is there yes I want a background uh to be little lighter so okay this is fine a bit it's good so we'll add elements first we will upload and picture of a man playing football 1 minute first all let's let do this and we'll create one boundary first let's give a background color as we have after this we will add some lines suppose home align it over here before that we'll add one rectangle just as a margin change the color for this will be about section will be setting and let's add one more option log and one contact pages this will be Conta after this we will uh write one text uh for as a adding best keing let's change the font let's see always remember just to keep a same font change the color also we will change the color let's add an element suppose ball sorry to highlight it add some elements e so this is the basic uh web design let's try to change the color for this no okay this is fine only so this is a basic uh idea to create a web design a simple design the basic design for a football or a game now let's go through the top tips and tricks for the Cana then animation canva magic resize instant image background remover or use Cana templates align the text and the images perfectly use frames to customize the images filter The Elements by different colors use grade to organize the images blur the background of the photos unlog the elements or IM image position let's discuss each points in detail so the first one is instant animation with canva Pro you can quickly add instant animations to the presentations social media posting and other places where you want to create a lasting visual effect click once to start animating and save the file as a gift this your customize animation films will help in improve knowledge intake and storage of few be a free animated movie generator includes all the tools you want whether you are creating a video for a lecture in your class or presenting an idea at work so the next one is canva Magic resize canva magic resize is essentially the finest thing because if you ever created a graphic templates which I'm sure you have you are aware of how how much time is lost when you must recreate the design to fit various platform and unfortunately or fortunately canva BR magic resize function takes care of that issue for us you can use the tool of bulk resize your visuals to fit numar preset formats to view their measurements move your mouse over them more than one size is available click resize a change and design the size and the next one is instant image background remover visual impact is crucial for everything from social media to e-commerce but even in the case of flawless photograph backdrops can be annoying with just one click any product head shot or logo can stand out and shine thanks to the canva pros easy to use backdrop removal features simple choose an image then under the effect section click on the background remove the back background will magically vanage to Showcase particular Goods or add layers to the design and the next one is use canva templates canva templates are already made designs that various users can quickly alter you may buy Cana templates on thirdparty websites that digitally Market goods include online stores canva templates is a pre-made design that you can quickly change the design framework already exists but you may add your own Creative Touch by altering the colors fonts and the other components and the next one is align the text and the images perfectly align text components or images is incredibly used to do with canva you may quickly use the alignment tools to align and organize the text and the pictures instead of manually positioning each object are relying on visual approximations with the regards to the design page alignment moves your element to the location you specify and the next one is use frames to customize the images you may clip pictures and videos using the canva frames to fit their form you may change the setting and the transparency of inserted photos as well as apply the filters or effects Additionally you may drag the uploaded files and movies into the frames to add them and the next one is filter The Elements by colors can has many different elements available instead of utilizing the secret codes to find the pieces with a similar design but if you only require the elements of a single color type few individuals are aware that elements purchase may be colored filtered simply enter the element search T choose the desired color palette by clicking the filter icon and then press the enter key the element search result will be there that update to the match your color choices so the next one is use grade to organize the image in canva great function as a frame into which you can put photos it may stretch photographs across your entire design and group several images or small images in a composition the single frame grid is the most often used grid you should always include one of these grids into your designs if you use an image as a background or the backdrop if you do you can drag and drop various photographs while keeping their own filter Cotes or effects so the next one is blur the backgrounds of photographs adding a background blur to your photographs May highlight a particular topic such as a person in a portrait of an object is a still life while giving your work a more polished appearance thanks to advancement in free photos editing tools like Kena you can create this lovely background blur often known as poke even after taking your shot so so the next one is lock elements or image position while editing other components of your design lock elements to prevent unwanted changes from being made to them click the element or page thumbnail you wish to lock to select several components you may also click on them while holding the shift key on your keyboard you may use the open lock symbol on the edited Toolbar to partly log a page or the elements and only enable aables content replacement so now we will see the steps to create templates for Instagram stories first we we need to click on the create design panel that is located on the top right of the screen and we will search for Instagram stories then a dropdown list will open let's search for the Instagram stories Instagram story and we can select our Instagram story so let's take a theme of um Cafe so we can keep take this them okay fine we have searched the template from the search bar where we can post related to our search and select the one I and I have selected this one and after picking one picture we can and we will get the theme palette related to that picture only let's click on this and the color will appear over here so we will click this okay we'll remove this one cuz we want to edit our own thoughts over here so we will put one picture related to coffee or we will take beans keep here and we can take this also we can keep it over the bottom here we are choosing a brown color actually to that color is relatable to our picture or the theme after picking up the color we will insert some elements like we have inserted this cup or we can choose another picture uh let's take this one okay let's remove this and after that or we can make it little small and we will keep it on the top of this let it be here and let's write uh after this we will add some more images that is related to our theme as a watermark effect so we will take um coffee beans um you're not getting a good picture okay let's take this we having one already here so we'll pick more so after this we will add some more elements uh we will search for coffee cup let's take let's try to find some good pictures of a coffee cup okay let's I'm not getting any good picture for coffee cup so okay let's now here we will pick another picture that we will keep inside the frame as we will can choose or we can choose any shape let's take a shape from here is it Cloud shape okay for frame so we will pick the shape of kind of cloud so here we will keep inside the frame as we can choose any uh shape of of the frame then we can insert that image in that frame according to our need so we will uh pick this one and and let's give a color 1 minute now we can give a color to this it's not this one yeah this color after selecting a frame according to our needs we can search for the image and drag them into this Frame which transer or which transform the image into the exact shape of the frame so let's take a circle frame wait like one I will keep here and another I will keep over here yeah so I can uh search for the picture suppose let's say coffee cup like this I can drag it inside the circle frame and another one let's take um this one yeah or I can keep another picture over here one second um let's take this picture here yeah now here we can add uh one ribbon over here uh as it look as it will look so catchy and put the text on the top of it let's take one ribbon over here let's search for it let's take one ribbon okay okay it's it's paid one so we will use something else let's suppose we write just ribbon here we I search ribbon Banner so I will I like this one resize it a bit I can keep it a bit here so I can keep this here so I can write here something uh let's write special offer I'll keep it here let's change the color did perfect and another and and we will also mention some more details like the location of the cafe so let's keep the name as coffee Point let's write some another text and we will keep it here size okay we can change the color for this let's keep this or this something darker and we'll bold it okay uh let's change the font and we can put some another font um let's see how does it look okay this is little classy and it looks little better than before keep it here okay so we can uh give more details about our content through Banner or or something text as we have mentioned in the image or by the offer so let's put one more text over here let's suppose we'll write off yeah so our or we can keep this here this is something or we can keep it at the back like this and it will be in the middle this will come over here yeah let's change the color of for this also dark brown okay yeah so this is the final template for Instagram stories as we mentioned the coffee shop has a banner has a banner okay one one more and we can add the time um let's put one more text over here or we can write the time the time when it is open from time 900 a.m. to 10 p.m. and change the color for this I will change it by okay and I'll keep this with the white color it be little small can keep it in the bottom and also uh we can add more details uh with your needs and after understanding the creation of the template um for this Instagram story uh or the template for social media we will create another template for the birthday invitation so the steps to create the template for birthday invitation uh first we have this blank page and we have to click on the search bar uh let's take the search bar and we will uh search for the background color for our greeting as we have seen here so we will search for the Colors Let's Take gradient gradient let's search here let's pick one color let's take this color okay and after that we will uh we have this color okay fine so after that we will add some more uh images related to birthdays as as we have as we know that in the the birthday we are going to use uh balloons or some beautiful Glitters or something and then we will search for balloons and we will pick um let's see let's take this and we will keep it over here [Music] yeah or some different bright color let's see another one how can we keep it over here let's keep it like this let's remove this let's try this one okay so now we will choose some uh overlays to make the background look more attractive that are the same uh in the color as the background uh let's take um blue blue Galaxy overlay uh let's pick one color let's pick this [Music] one the background is different let's Pi color similar no it's not matching let's take another one this is not matching so I'm searching here uh White glitter overlay so I got some results for good effects so we can put some of these let's see uh not this one let's pick this one so it's it looks more fine better than before next we will use elements related to birthday so we are going to use some uh ribbons let's write golden party ribbons so we are going wait sorry golden party ribons so we are going to decorate the template and we'll copy paste it like uh first we will Pi the Rons like this and we will make it as a small in size we'll keep it here some here we'll copy it again keep it over here fine now we will add some more gift item in different places in this template with the small sizes so let's search for birthday gifts bir the gifts let's pick this one we will keep it here or we can keep another box let's take this no having color background is also not working okay it's fine we will copy and paste it over here and one more copy okay now come uh now we have come to The Graphic tab let's search for an element and then search for a circular frame with the borders that we can fit it into to make a decorative frame so we will search for frames let's big uh Circle frames uh let's take this circle frame and then we will search for the image suppose uh we can have frame we will keep it inside now here we will search a photo randomly and we'll drag it into this Frame and we are that we have created and let's suppose let's pick a picture for baby whom's the birthday is there we can select the picture for that uh let's pick a picture for a baby small baby okay it's there and after that uh we can put some text on the design for the invitation with the name of the birthday person as we have mentioned Below in this image so uh let's write and text over here you are let it be in our capital letters you are invited to it here another text let's say the name of a baby suppose um Ron and we'll keep it little bold with different color we will give another font for this yes for RS birthday party let's let's give another font for this we keep it here with uh different color [Music] okay you keep it little down okay fine so now we will uh press r on our keyboard to go put input uh for the rectangle so this rectangle will appears over here so here uh and then we will give it a bright color something uh let it let's take uh white color or it's yeah it's fine and here we will highlight the time and the day for the birthday party so let's let's take a text here Saturday satday um June 21st we will keep it here with the Bold color little size increased okay fine uh we will add another text over here your menu okay and the text to create the people with some different color dark okay so uh this is the final template for birthday invitation with some features as we have mentioned above where we can change the time and the place image of the person whose birthday is there the birthday party and the venue according to our need in many Industries visuals are essential we propose ideas for improved Communications whether well displayed photographs or buttons canva and figma provides equal access to use and prize and third party plugins or the applications but there are also many distinctions with some of the basic comparison between the two so the first one is platform access best design purposes drawing tools image editing and the last one plugins and apps let us have a simple quiz question to brush up on our knowledge who is the founder of figma so the options are Milan Perkins danan field shantanu Narayan and the last one Steve Jobs please answer in the comment section below and we will update the correct answer in the pin comments you can pause the video give it a thought and answer it in the comment section so now let's discuss it in detail first we will see what is canva it is an online graphic design platform for non-designers wishing to quickly and easily creating the simple graphics for nearly anything including infographics presentation posters and social media Graphics logos and other visuals content after the canva we will understand what is figma figma is more than just a tool for manipulating photos in fact it is a design software with the singular forces on UI and uxix design in the canva versus figma discussion figma is a software for Designing products you can quickly create and prototype application with the help of figma now we will discuss some basic features for the both canva and the figma so the first one is platform access the key factor to consider When selecting a design platform is accessibility the places where you are can utilize the canva and figma are listed below for the canva you may use canva as a browser based design tool by downloading an app for Mac Windows IOS and Android your previous design will be saved in your canva account even if you can check in using a different device you could use an app to save work locally if you don't have an internet connection for the figma is there another online design tool that can be used on Mac windows and Linux desktop computers an IOS and Android mobile app is also available for figma your design history files and plugins are all accessible from any device when linked to your figma account although the application permits offline design and the next one is best design purposes consider their Simplicity convenience and accessibility certain platforms are made for more effective uses than others here is a list of what canva and figma Exel is for the canva canvas's primary area of expertise is social media design including Instagram stories YouTube thumbnails and Facebook panel there are lot of free themes available for popular social net working sites you can produce a variety of reasons canva offers easily editable templates for calendars presentations and stationaries and for the figma since figma is a primarily employed as a user experience and user interface design tool it performs well when being used to create the website applications and other interfaces however you can also use it to make other things like presentations resume and the animations for Instagram stories most designed in figmas are Dynamic rather than stat and the next one is drawing tools if you are required drawing instruments the comparison that follows will assist you in making the best option and for the canva it is a design capabilities that are limited in comparison to other design software there is no pan tool available in the elements menu only the line and the Form Tools it's free to use lines and Curves in your sketches than to start from the blank and for the figma drawings can be edited right in the app using figma pen and pencil tool a few Form Tools are also included that can utilize an additional to the pan tools having the ability is great however it's the best to import individual drawings from other applications for the UI and U System sign the next one is image editing image editing is a workflow feature whether you manage social media or photographers you may read more about the canva and figma's abilities in the section below for the canva most of canva image editing capabilities are adjustment switchmen and thirdparty filters while some of its features are equal to those of photoshops canva products offer less customization and the texture application is covered in the tutorial with the canva pro you get the access to more and better editing tool and for the figma the majority of figma's image editing features are quite basic because it is not designed to be used for photo editing additional options include altering the colors or applying brand modes to the image the tool called figma needs a change image from another tool to be provided in advance and the last one is plugins and app your productivity may be greatly increased by using plugins the tools that you can combine with canva and figma are listed below for the canva this provides unique method for locating and utilizing other resources the elements panel is the first item on the menu bar to use your Creations you can find here Graphics audio video movies animations and illustrations you can actively download alements that are not already in the canva however you can only perform searches for the particular words and for the figma figma offers a huge selection of plugins on its Community page in addition to the third party application like unsplash for stock images wi frames or initial designs and placeholders plug-in for the text figma also offers smer plugins anybody can make a plugin with a figma account and anyone also can use a plugin after the comparison between the canva and figma we will discuss the pros and cons for the canva and figma some of the prones for the canvas are the software is easy to use and amazingly made templates it's free to subscribe and there is a collection of animated gifts and some of it cons are not for professional designers there are not many free templates readily available in canva now for the figma some of it PRS are it makes quick prototypes and presentations possible utilizing the browser based application for the cloud data storage it works well for design and graphics some of its cons are it's difficult to understand the auto layout the presentation mode might be improved after understanding the pros and cons we will see the pricing for the both pigm and can offer a free version of the program and paid addition depending on your needed capabilities there are three price categories for the canva it's free as $0 and the premium will be $12.99 monthly with a maximum of five person you will be charged $7 for each new member if you are a monthly plan or $60 per month if you are an annual plan one is the Enterprise $30 per user per month minimum of 25 users and the figma offers four pricing categories the first one is free access to the Mob byab and plugins three figma and unlimited users and the personal files and the second one is professional include all the capabilities of plus free unlimited figma files version history and access permissions and the third one is Enterprise $75 for each figma editor monthly with more sophisticated security measures and the last one is organizational libraries centralized data management private plugins and more are included in the $45 per month per at what are Mups now let's discuss what Mups are and proceed further for the SC Mups are mainly designed that represent how a service or product will seem in the future anything from websites and mobile applications to the basic thing like packaging may use them before devoting excessive time and money to a particular design Mups allow designers to test their ideas quickly additionally they allow designers to gather early clients or other stakeholders commands which can assist in enhancing the finished product after discussing what are Mups we will see how to create Mups in figma figma is an excellent tool for generating mup since it gives you a lot of customizing choices and capabilities create a new file in figma and choose the mooch of template from the list of available templates to start creating Mups you can create Mups in figma by accessing hundreds of Premium artboard Studio Mups component within your figma files with only a button press quickly convert figma frame into a realistic product Mups so in this tutorial I'm going to show you the best way to start practicing designing apps and websites in figma you can quickly download Mups plugin in the figma rather than saving your figma design and switching to another software to build a mup although numar plug-in alternate are available in different styles they are all easy to use and can be integrated into bigger projects so just go to Google cardboard studio all right click on the get started for free right guess that makes just quickly create an account as I have already make an account so I will go to the setting then integration okay then click on the setting to reveal the API key and you will be shown an API key and then copy this and come back to the figma and paste here in right now here you can see you can reveal the API key over here and you can paste it over here so right now maybe it's not making any sense but when you launch this plugin you are going to see more data that shows input API keys right so just go over the website create an account create your o API key and you have to copy and come back over your figma and paste that API key right and it may look like a little stressful but it will take a long run it's going to be an actually a beneficial to you all right so now you have a lot of Mups right so we'll click on right button and you can have the plugin over here in artw studio yeah it will take a bit of time okay now I'm going to search or I can select only fre items okay let's um use this let me click on this okay let's use this so yeah you can click on the mup item you actually presented with the two or the three screens depending on the kind of mup they you are clicking so first you have to Mo up by yourself your item you not going to make any change to this one so you can lock this so you're not going to move that and or you're not going to touch this so you're not going to addit this you can even go as far as you can lo this right right I have done and so this is what you're going to make changes to whatever whatever changes you are going to imp Implement sorry put here it will reflect on this m it looks like a magic right so let's create a design for the food delivery app for the first splash screen first let's change the color for the background um let's take a light color maybe yeah this is fine and we will give the effect to this we will change this color Also let's take the sky with the gradient we not going to get the gradient effect so fine fine after this first I'm going to make a water we will select a line from over here yeah again I will press the keyword L and I'll make the border so similarly I have drawn all the four borders I'm going to make the little bit big let's give this a black color so this is how it will look after giving the border now we will put a text as a name of our full delivery app so we will give a name in we will make the size a little bigger than this 36 let's make it bold with different color let's take dark blue right fine now we need to make a button with the name get AAL so we will um keep one rectangle over here and with the text let it be a little small with 4 16 24 yeah fine we'll align it in the mid and we'll change the color for this also yeah fine for making it looks a little good uh we will put one picture over here so so for that for first I will make a rectangle in which I'm going to insert the picture suppose I already downloaded the picture so this is how it will look and now for making this little good we will put one icon over here related to the food so I'm already downloaded one icon yeah so this will look like this after putting this icon over here so we will make it in alignment so after importing all the items and customizing the frame click on the render button first we have to choose the screen that is a spash screen so we will render this and it will reflect whatever your designing is going to render the item in that perspective and changes that going to made on this same frame would be rendered on the item after the render button just click on the visible in the screen see now for the next we will see now we will see something different when the user will log in into that the app and the next screen will be like how we are going to design let's pick a different let's take this one yeah we will again loog this one so we are not going to make any change in this and I'm not going to addit this but this yeah first I will pick the line and now I'm going to copy the line sizes three four yeah now I'm going to copy this I will resize this also want to copy this and so it will look like this let I want to add a text and that that text should describe or what you want to select your mean different locations maybe from your workplace or something like that so we were going to add a text over here size it with 24 and will change the design that it be Samy or medium Let It Be Sam and we change the color for this will keep right the bottom yeah and we will change the color of our p and so after this there will be the varieties for choosing the meal so I'm going to add one more text like choose your here sorry and I size this hole um with a little smaller than before like 16 yeah fine and I'll change the color for this also let's make it medium and I will change the color for the text Let It Be about blue only okay fine this is fine I'm going to align it again moove this okay there will be the location so I'm going to put one polygon in the name of location so we change the color for this let it be green color yeah fine so if you want to search your meal there will be search button also for that I have an icon download it yes it seems like this and we are going to put different different four four icons for that we will take rectangle align it yeah it will like this and now I'm going to quickly add the four different icons that I already downloaded as we are in the choosing page uh first icon will be active and other three will be on offline so we will keep them in dark color so it will be visible like this so we are going to add the items or the food that we are going to select there will be different different options so let's do it so first I'm going to take um square and one Circle we will use the rectangle later we will keep the circle over here and we'll select a picture of the food that we're going to insert over this so first and I have inserted picture I've already downloaded from the Google and I'm going to shift this rectangle over there this is the vegetarian so I'm going to give a circle with the green and it is in the our favorite list so I'm going to give a heart over there change the color with the green as it is vegetarian so it will be like this after that we are going to give the name of this meal so quickly I'm going to give the name of this meal and I will resize this and another text for the prize so I'm going going to give like it be italic and the size biger hello yeah so similarly we are going to make the different rectangle suppose like here or let's copy the first one only with the similar size yeah now we are going to render this for that we will go into plugin again on the item mod and we are going to select this yeah so it takes a little bit time and we are going to see it to reflect in the screen so it will be like this so whatever we are going to make a change in the first screen and and that will be reflect on our mup screen suppose we take another let's take this one let's try to put uh this screen over here I'll let it be like this so this is for this moveup screen so I'm going to render this and it will come over this also let's quickly plug in and open add Locus item and I'm going to render this yeah so it doesn't overlap but it is showing the same screen that I have used before and yeah I didn't make any different screen for that and it is overla but in this it is not it is showing yeah so similarly whatever the changes we are going to make in this reflect on the mup of screen suppose I will choose this anything like or any other shape like stick star give it a color with I'm going to render this screen and this is going to reflect over here yeah after importing the items and customizing the frame click on the rander button and your design is going to render on the item in that perspective or any changes that you are going to to made on the same frame would be rendered on the item after the render button is clicked on consecutively so this is how we create a Mups in figma what is wireframe a website service can be designed using wireframes and is frequently utilized to lay out functionality and content on a page while considering users need and journey and before adding visual design and the contents to the page the basic wireframe and the frame work of the page is established using wireframes early on the development process it is a double structure sketch of a web page or app comparable to the visual interface design in wireframes style color and Graphics are typically kept to the minimal because they represent the initial product concept depending on the level of information required wireframe can be created as either digitally or manually the most frequent users of wi framings are ux designers before the developers begin writing code for the interface this approach enables all the partners to agree on where data is placed and will place the data digitally or not after knowing what is wireframe we will understand its purpose wireframe having Tre main advantages they keep the concept and they are quick and inexpensive to produce because they stimulate users feedback kick off conversation with the stakeholders and Inspire Innovations in designers wireframes are helpful as Communications tool the designers can receive direct feedback and identify key problems that help them to create the proposed product by conducting users testing during the first wireframe stage they clarify and describe website functions and they maintain the concept users focus with particular W framing features you may explain exactly how they will work to your clients and what function they will ser and it has all the stakeholders combine the website's information architectures with its visual design and make the page operational clear the third one is quick and cheap the best thing about wireframing is how easy and affordable is it to create that you can design a wireframe with a newspaper paper and pan thanks to the abundance of tools you can quickly develop a digital wireframe the consumer is typically less likely to be honest about their early thoughts whenever a product is highly polished the longer a period is developed the harder is to make the change after understanding the purpose of the wireframe we will see the different types of wiame and the first one is low fidil wireframes and they are very simple visual depiction of the web pages and are typically used as a designer's foundation as a result they usually lack of all the sense of Grid or pixel accuracy and tend to be quite slopy it contains basic pictures block forms and dummy contents including fillers text or labels with the headlines and they leave out any information that would serve as a possible distraction these are useful for starting conversation selecting navigations layout and mapping users flow in the second one is mid fertility wireframe the most popular of the three while they avoid distractions like graphics and distracting fonts they mostly focus on specific features distinct from one another headings and body materials could potentially be separated using different xray although remaining in black and white artists can convey the pro of specific features through various shades of cre these are typically produced using a digital wireframing program such as sketch or Bic even if they are still useful in the early stages of a design the third one is High Fidelity wireframe finally the pixel specific layouts are features of high fidil fir frames they may have actual featured images and textual information unlike low fidil wire frames they are the best Cho for exploring and capturing ideas manual on interactive maps because of their additional depth and Rising wireframes should be safe for the last stages of the product's Desiring cycle now what is included in the wi frame as we briefly said previously whether a wireframe is low mid or high quality greatly affects how many details are contained however elements like tread makers searching areas headings share buttons and placeholder text are frequently seen in wireframes so the first one is information design by illustrating The Roots between the pages wireframe relates the web database structure to its visual design among other things explain how it should display specific type of information consistently on the interface identify the interface primary use of the functionality the second one is navigation design aite structure comprising all the components is structure so users can easily discover informations VI frames navigation charts and Etc to develop a flowchart of your website you will be evaluating sorting grouping and linking comparable information during this process and the third one is interface design the method designers use to create useful software interfaces or electronic devices emphasizes Aesthetics or Styles designers strive to produce userfriendly and enjoyable interfaces user interface design and other types such as voice control interfaces are called UI design it's a vital to remember that because wire frames are two-dimensional they don't work well for displaying the interactive elements of the users now we will discuss what tools are used to create the wireframes three best wireframe tools are the first one is figma as a potent cloud-based substitute for the applications like sketch and XD figma stands out the best thing is that it offers a range of usual capabilities whether you are freelance designer or a member of a large team with no restriction for free users there are many available free wireframes tool figma is a fantastic altern creative if your team wants one simple tool for the entire creative process but it's also a great option if you are a tight budget you may discuss ad map user Journey with figma and a digital whiteboard that consist with figma without exporting your ideas to another design program proceed directly to wireframing and testing second one is adob XD adob XD sends out as a user friendly choice for bu Framing and UI design task even though adop Technologies are famous for being content and challenging to learn within XD you can do anything from wire framing to simple prototyping additionally X simple UI is a breath for fresh air in the comparison to certain other features which adopt XD tools the second one is sketch sketch has remind a Top Choice among Mac users as a p yet portable Vector design tool wire frames contemporary UI and simple graphic art some interaction design and more can all be done within on their own compared to the industry leader the vector design Atomic designers and adob illustrator it has a simpler and more userfriendly interface because of the sketch Simplicity wireframe may be quickly constructed using a combinations of templates and graphic shapes so guys I have an empty page and I'm going to start my design right away so for that first I will take one rectangle with the effect of gradient and I will align it here and you know size so what I'm going to have a picture which I've already downloaded so what I'm going to do is to take that picture right into my screen and now I'm resizing it and this SI is okay so next thing I will do is to add an a text so I'm going to select the text and click here and some basic configuration is there for my text and I I need like to say text to be complete and bold but before I will go ahead and I will type l eight for the configuration of my text I will make it bold and I will just go ahead and we change the color color say I can white so now I will put the button over here but before that I will align it little up I will change the color by the name character name we'll change the configuration will change the size sorry this could be me I store the little light color or some other color that could match with the background so let me know what you think about this flash screen and if you have any other great ideas on how to bring out a good flat screen let me know in the comment section below and for now we are going to proceed with further with the home design and the next Splash design so guys the next thing I want to do do is the home as I said earlier so we will copy this first and we place it over here yeah or we can choose any other plain rectangle we will from here now I will pick the line keep this hair and I'm going to copy this and then I will reduce the size I will again copy this and I will reduce size of this also and the next thing I want to add a text and this text should describe of what you want to select your meal from a different locations maybe at your workplace in your school or office so they get the kind of place you select determines the kind of food that comes out for you so I'm going to select a text and I'll give a text let's say workplace you're selecting from your workplace so do the same basic configuration K Bol should left be left align now this is fine and I can add more description to this and the description should be a little bit easier than what we have for the workspace and the workplace so I'm going to make a description of size uh little small Tex actually like choose your delicious meal me so now I can drop this here with the point like a more description so we might so you might want the users to select the different location so we can achieve that with our triangle icon so it will be something like this and we'll change the color white next thing I want to do is um you can also search for food by the name so I'm going to add search icon yeah so it and we'll keep it align with this so it will look good and drag it to this point yeah and we can keep this as a white color also yeah it looks good make it dark so next what I want to do uh quick two icons so I'm going to create some icons with the rectangle with some curves so I will add the icon home over there so we'll add the icon of home we will search it over here home icon save this one and I'm going to drag it into the home screen and I will bring it in the center this way and also going to change the color or this color is fine okay I'll change the color yeah so next thing I will do I'm going to copy this and make it into four places the same alignment so I'm going to quickly change the icon for this this and another this one so second one I will keep this one I'll keep this there the third one I will use the filter icon for the fourth we'll use card icon like this this this one is the active one so we'll keep this as bright color these are not active so we will keep it in white color yeah so guys I'm having my icons the four icons that should show me the favorite meal which I started offer now this should show me like a filter screen where I can filter if I am a vegetarian same meal that are good for vegetarians and this should show me the T card I have selected to my card then from there I can payment also so what I'm going to do now so the next thing I will do is to add our card for the different meal where you can select so I am going to add a card so what I will need is a rectangle tool so we'll click on rectangle I have my rectangle tool next thing I will do a drag in and this slide and I have a color for this I will do go with the light color so next thing I will do is maybe add the image and I'm going to select the circle first within this I will keep my image over here and we will align this here now we will add the image in the circle what to do again image you can just select the image from where the image is in your system and upload it as I already downloaded so we'll upload it here yeah so the next thing I will do is um I will show you that this is the card so I'm going to add little design in the circle Circle over here one give this green color we copy this and make another Circle we'll give this as another color it's little dark okay and I will copy the heart and make a duplicate over here I'll give this the color and around the red I'm going to the next thing then the next thing is what the name of the me so I'm going to selecting the text so I can copy the text but before I will select the text configur it and I'll give this name as wburg and make it small this over here the board I'll copy this put another text for the pr let's suppose the price set must be see I put it over here yeah and the next thing is we add a button down over here like plus icon so here here we can add a button plus [Music] icon keep this here when you click on this plus button you can add to your card similarly and we can change change the color when you click on this you can add to your card the Fe food that you wanted you can add more similarly this we can make similar to this we have created another F suppose this is a wed burger or this is something else and this is this an example and these three are in our favorite and these two icons we showing this is in our cart so here we can add a little description that says okay there there is a discount in this particular meal suppose this one so what will I do in this way now I'm going to make so we'll make a small description over here with the red mark suppose 10 10% off let's just use this size yeah and we'll change the color also yeah I changed the color and so now we have something like this if you're really enjoying these to tutorial you can let me know in the comment section what you think about this tutorial and if you think I need to improve or something also let me know and this is the final screen designers nowadays are always on the lookout to streamline their workflows collaborate more effectively and create better design outcomes with a versatile set of features and interfaces Invision has become a goto platform for designers worldwide Invision has proven to a valuable tool for various design projects including mobile app design web design user experience design and product design it is a lading digital product design platform that enables team to collaborate and create interactive prototypes animation wireframes and Designs whether you are are new to Invision or have been using it for years this tutorial can help you to get the most out of the platform and take your design to the next level so hey everyone you're watching simply learn and today we bring you this informative video about Invision for a more thorough approach on web designing check out our course on uiux design master program here you can learn the design Centric approach towards user interface and user experience including ux research us sty line fir frames and prototypes usability testing and more check out the link in the description for more details and if you're a teag geek here is a brain teaser for you when was Invision Studio released is it 2015 2016 2017 or 2018 let us know your answer below and get a heart from Simply learn before we begin if these are the videos you like to watch then hit the Subscribe button and the bell icon to get notified every time we upload a new video without any further delay let's get started with the session on so you have delivered your final design to your internal or external client only to find out the work you created was way off the mark and the hours you have spent on the original design have been wasted sound familiar this scenario and others are exactly five wireframes are an essential step in turning any digital products into a reality think of a wireframe like a building blueprint but for your digital product the goal of a wire frame is to create the basic skeleton for each screen in your design that you can review the overall layout of the design with your CLI before things like imaginary color and branding get brought into a mix a wireframe will save you and your clients a huge headache and a lot of time now you may be asking yourself okay but what program do I need to create a wireframe so in this video tutorial we'll be using Invision one of the standard software use in Industry let's get started app.com after signing it it may take you to the project dashboard near the top right of the page click the plus button or the red circle but before that you have to sign it up or sign in create a white board with a free hand let's wait you can just log in you have to cross it out okay so from here you can get uh any like you can create a blank freehand you just select it and you will get the page let me select it once more than freehand or let's remove any of the before let's delete it from here it let's take a minute to look at the interface the whole blank space is called your canvas when you where you can draw endlessly uh in the top left hand corner there is the Invision logo to go back to your dashboard beside the logo is the title documents uh wait a minute yeah this is a highlight document that uh that name to be typed in for the new file let's take it demo invion in in the middle these are the different tools in the top right hand corner these are the menu options after that access an additional menu for exporting and uh version history creators and enter presenters mod to share your net on the bottom side on the left side or at the bottom in the middle of the toolbar to start your drawing in the bottom right hand corner you get a a pan Edge or to hold space zoom in and zoom out now let's talk about the first tool that is pointer tool that uh pointer tools allows you to select move and resize suppose it helps you to move the elements or the pictures on your canvas and you can make a copy of this let's make it like this you can click it hold and drag create a box around and choosing things like a select uh in Adobe Photoshop or illustrators alternatively you can hold down shift key and click each object so for this keyword shortcut is V and one draw on a canvas with your pencil tool when you select the pencil tool you can change the color uh let's take an color over here we have selected the pink color and you can change the color even from here again let's take this color and you even adjust the line thickness or set the default and caps to the top so with the chosen color you will see three different oppacity options along with your opportunity to add fills but remember to keep the wireframe as simple as possible by using black and white and gray color only it is over here to create neat Circle or squares hold on the option key while drawing while drawing uh that will help you to creating a straight line suppose I'm making it will be automatically will become straight at 0° or at 0° 45° or 90° to create any straight line at any angles uh let's take another color like this like this like if we will make a line without pressing the shift key it will be like this there will be no straight line but if you press while using shift key it will be straight and automatically okay hold shift key whenever you click to draw but release shift before finishing your line let's take a look how is it work like this can see we can make it up at okay when we release a shift key it will become a straight it will become a straight line keyword shortcut is P or two okay so now to erase or clear the canvas shape uh with the Eraser tool click once on the pencil oh yeah the pencil tool you can see on the right side there is a eraser tool that you can use it to erase whatever you have done before let's you have to just touch it over it or Pat it over that eraser on the top of the line that you want to remove and just and it just get erased and the keyword shortcut is e so the next is uh when the text tool is selected click once on the canvas the text tool adds to type something go ahead and enter text on your canvas to create a line break press enter switch to the pointer key tool to resize you can see the resize you can use it with your use of pointer key you can change the color formatting and Alignment let's change it to the red color metallic or let it be you can highlight the text and you can format the line of the text or you you can do it at alici size and set the text alignment to the left or right or Center as we have already text align in the center you can also lock the text on the canvas to keep it uh in place or convert any text box into a sticky notes let's see keyboard shortcut is T or three T tool you can create rectangle Circle or straight line rhombus oval or any Arrow shape click the shape tool and then select the appropriate shape whatever you want to keep here let's copy and I'll paste it over here and you can hold shift while trying to create a perfect square let's do that let me select the circle just hold the shift key first and you can create a perfect [Music] square while drawing a line will lock your line how does it work let's see it can lock it at 0° 45° and 90° keyword shortcut is s and4 What I suggest just avoid using graphics and images in iio wireframes use Simple rectangles and square shapes from here let's see if you place an X through the middle of the Box this is a signal where you can place the image and for the videos you can put the triangle like um make it like this as a play button let's make it a color got a note you want to clarify a point sticky notes allow you to add notes anywhere on the canvas it is in the fifth option with a sticky note selected you can change its colors actually adjust its width and you can even add a text over here let's suppose you can keep anywh with the cursor and the keyboard shortcut is n or six see something you like go ahead and add an emoji uh let's let's you can keep this Emoji over here or one more you can add over here okay start creating uh one basic wireframe let's take it over here from here let's select uh this one we will use some basic tools uh with the shape first we will have this pick another one and the editing toolbar appears when you have one or more uh objects selected like this and let's addit it with the text let's write something let it be a normal we will use our cursor to align the name okay similarly we will have passord pass for let's make it a little bit small in size okay and another text over here let's make it submit button so now after create shapes and line you can edit them using the menus actually so let's change the color for this is pink this also we can change the color with pink and we can change the color for the text Let It Be black and we can change the width of the line let it be normal this one okay it is already normal okay we will change the color for this also and for this also it it be little bold with the red color can see the alignment of this is always like to this okay uh when you have text you can select uh you can change the color formatting and Alignment that we have done already so you can un log the text on the canvas to keep it in the place like uh let's suppose we can make it move around like this but if we lock this one we can't move it because it is locked so just open it with the tab let's see or you can even convert any text blog into a sticky note suppose this and you can get a sticky note of this outside right let it do this okay and now you can click on the hand tool at the bottom uh to pan around the canvas like or press and hold the space bar to access the hand tool so you can move your and you are enabling to move around an image by pushing on it like this and the magnifying tool is to zoom in and zoom out on the canvas just like Adobe products you can command control plus uh minus to zoom in or zoom out so that wrap ups our Invision tutorial where we created a simple wireframe with multiple frame styles today's session was for beginners h a basic approach the possibilities are endless and we highly suggest you dive into the tool further and check out all their features artificial intelligence is becoming increasingly necessary in the design industry offering new and Innovative tools for designers to use although AI tools can enhance designers efficiency creativity and productivity it's important to remember that human touch and creativity remains essential elements in design you're already watching simply learn and today we bring you this informative video about AI tools for beginners and if you want to learn the A to Z of uiux Designing and how artificial intelligence is helping the industry moving forward with the time do check out our master's program on how to become a uiux design expert here you will will cover comprehensive approaches to all uiux design development stages taking a look at the concept of ux research design thinking UI prototyping and styling information architecture usability and testing you can find the link for the course in the description below and if you're a tech geek here is a brain teaser for you who is known as the father of AI is it fishera is it Alan Turing or John Mary or alen new let us know your answer below and get a heart from Simply learn before we begin if these are the videos you like to watch then hit the Subscribe button and the bell icon to get notified every time we upload new video without any further delay let's understand the top AI tools for the designers if getting your learning started is half the battle what if you could do that for free visit scaleup by simply learn click on the link in the description to know more and at the number 10 we have sketch to code sketch to code is a technology that allows designers to convert handdraw website design into functional HTML code this technology utilizes Advanced artificial intelligence algorithm to analyze hand draw sketches and the generates the necessary HTML CSS and JavaScript code to bring the design to the light some of its features are apis for computer versions personalized Vision model Dynamic layout service for text recognition and it is free to use here are some pros and cons for sketch to code time saving instead of spending hours coding the basic layout developers can use sketch to code to quickly generate code based on a handdraw sketch reduce errors sketch to code generates code Based On A visual representation of the user interface reducing the risk of coding errors and the third one is user friendly sketch to code is easy to use and doesn't require coding knowledge making it a valuable tool for designers and non-technical users some of its cons are limited functionality while sketch to code is excellent for generating basic layouts more complex user interface code quality sketch to code generates basic HTML code which may requires additional optimization to ensure it is compatible with all the browsers and devices dependency on sketch quality the sketch quality can impact the generated codes quality at number nine we have Ard uard is a Cutting Edge AI power design platform that has revolutionized the way graphic designers are created it's a initiative user interface and Powerful artificial intelligence capabilities allow users to easily create professional grade design with minimal effort it offers a seamless experience that saves your individual needs and skill level some of its features are idea generated realtime collaboration in design electronic product V frames and design assistant with AI for student and hobbies it is free up to three projects and for the startup and growing business the pro version is there with $112,000 per month on the other side for the large organizations or businesses the pricing will be $39 yearly here are some pros and cons for uard first time saving uard can save developers significant time in creating UI design by generating code automatically it is easy to use Ard is user friendly and doesn't require coding knowledge making it accessible to designers and non-technical users customizable the generated code can be edited and refined to meet the developer specific needs and the fourth one is accurate uide can produce high quality code that accurately represent the UI design some of its cons are limited functionality uard is best suited for generating basic UI design and may not be suitable for more complex or customized design dependency on design quality if the design is straightforward and contains error it can affect the accuracy of generating the code the generated code may require additional optimization to ensure it is compatible with all the devices and browsers at number eight we have design AI design AI is an AI power design platform that help businesses and individual easily to create professional grade designs it offers a vast library of of templates icons and images that can be used to create gen rating the designs in a minute the platform is also equipped with image recognition automatic layout generation and Custom Design suggestion making it a perfect tool for businesses some of its features are it is assistive devices scalable Vector images and collaboration between team unlimited downloads and pricing per month it's individuals and students and marketers that need quick easy projects can be go for the basic that is $29 per month for entrepreneurs and small teams leading Advanced aditing and professional teammates is $69 and customized for large team and agencies that need branding and collaboration here are some pros and cons for design AI it is quick and easy to use and AI power the platform uses AI to help users to create designs which can result in more efficient and effective design processes affordable designs. a prices affordable and it is reasonable wide range of design tools including a logo maker graphic maker and others some of it cons are limited customization the designs created using designs. a tools may need a small personal touch and may not be customizable as a design is created by a human designer lack of human interaction the platform is entirely AI powered which means user cannot collaborate with a human designers limited design options while designers. a tools offers a range of design options there may be limitation regarding the number of design templates or graphic available so at number seven we have front choose from over 300 in demand scales and get access to 1,000 plus hours of video content for free visit scaleup by simply learn click on the link in the description to know more an AI power tool called fronty generat source code from the image uploaded by users it provides a Fresh Approach to websites creation fronty offers a wide range of templates them that can be used to create custom website the platform is also equipped with features such as drag and drop functionality and automatic responsive design some of its features are image to code generator with a AI hosting a website's layout online custom domain and optimization for search engines and the pricing per month premium up to three users and in pro version it is $454 per month up to 10 users and another Advanced version that is 9 $ per month up to 25 uses here are some pros and cons for fronty some of the pros are no coding experience required fronty visual interface allows users to create websites and web applications without coding experience next user friendly friendly is easy to use and its drag and drop interface allow users to create design quickly realtime editing changes made in front interfaces are reflected in real time allowing users to see the design some of it cons are limited design options while fronty Dragon top interface is useful it may be limited regarding the number of the design options available limited functionality front's visual editors may not be as powerful as a traditional color editor which may limit the functionality of websites dependency on the platform since front is a web based editor users depend on the platforms up time and the availability so up next at number six we have color. Adobe color. Adobe is a webbased color palette creation tool that offered by Adobe system it is a part of Adobe Creative Cloud suit of applications and is accessible to all the subscribers Adobe color allows users to create custom color palette and themes which may be used in various Adobe Creative Cloud applications such as Photoshop illustrators and in design the color palettes can be saved and shared with others make it a valuable tool for graphic designers photographers and other creatives with Adobe color users can access a powerful color creative tool that can help bring their creativity version of their life some of its features are color palet creation color inspiration color adjustment sharing and mobile access and it is free to use and here are some pros and cons for color. Adobe it is free to use with an Adobe ID account provides free made color palette created by other users and Adobe experts offer various color rule option for generating harmonious color schemes some of it cons are requires an internet connection to use custom color palette cannot be downloaded as a file only shared via link limited ability to adjust individual color in pre-made color palettes so at number five we have di 2 di 2 is an artificial intelligence system developed by opening this Advanced AI platform can generate highly detailed and Visually diverse images from textual descriptions system is based on the Transformer architecture which enables it to process large amounts of information and generate high quality outputs the image generated by Dar to are highly customized allowing users to adjust color texture and other elements to create unique and personalized images some of its features are generates high resolution images from textual description improves upon the original D creates unique and diverse images trained on a large and diverse dat does it price for the D is also free to use some of it Pros are it can generate highly detailed and complex images from the textual description it offers a wide range of customization options such as image size and number of output images it can be used for various applications including advertising entertainment and educations some of its cons are it's a high level of technical expertise to use it is not yet widely available to the general public it may not not be suitable for every type of image or projects so at number four we have let's enhance let's enhan is an AI powered image upscaling platform that allows users to create the resolution of their images with just a few clicks with its Advanced deep learning algorithm lets enhance Canan upscale pictures while preserving the details and sharpness of the original image this platform has a userfriendly interface making it easy for anyone even those with a little to no technical experience and is an excellent tool whether you want to enlarge an image for printing or need to increase the resolution of an image for a presentation or other projects with its fast and initiative design the platform makes it easy to transform low resolution images into high quality images in just a few minutes so some of its features are accurate face recognition automated setting Improvement of tone and color and online storage and pricing per month signing up with free no credit card is needed and here we are getting another two versions with the credit that is 100 and 300 credit for 100 credit it is $9 per month for the 300 carats it's $24 per month built annually and $32 per month if built monthly so here are some pros and cons for leten Hance some of it PR are image quality improvement let enance can significantly improves the quality of image particularly when it's come to upscaling low resolution images user friendly the interface of Lance is user friendly and straightforward making it easy for the users to upload and enhance the images speed let's enhance processes images quickly with some enhancement taking only a few seconds customization users can customize a level of enhancement to suit their specific needs such as adjusting the sharpness or color some of it cons are costs while lets enhance offers a limited number of free Mage enhancement users need to pay for additional enhancement or a subscription for unlimited enhancements quality limitations that quality of the enhanced images will depend on the input image and the level of enhancement applied privacy concern as with any online service user may have concern about privacy and the security of their images when they are using L enhance now in number three we have pix art AI pix art AI is a photo editing and graphic design tool that provides users with various tools to enhance and transform their photos it also offers filters effects and overlays as well as the ability to draw and add text to images with its userfriendly interface pixer makes it easy for users of all skill levels to create stunning and unique photos additionally pixer has a strong social Community where users can share their Creations discover new content and connect with other artists worldwide whether you're looking to touch up your photos or creating digital art pixer is everything you need to bring your creativity version in your life some of its features are photo editing effects and filters drawing and illustrations and sticker and clip art starting creating with free photos and video editing tools zero per month and another version is there known as pixer gold with a $1.86 per month and $22.35 build yearly whereas team manage and provide full premium access to multiple member under your account with $ 2.53 per month here are some pros and cons for pixart pixart AI offers more advanced editing tools than the standard pixart app time saving pixart AI can save the time by automating certain editing tasks such as removing background from the photos which can be timec consuming to do manually it is easy to use despite its Advanced features pixer AI is still user friendly and easy to use even for beginners some of it cons are limited free features while pixer offers some free features May Advanced tools are only available with paid subscription dependency on technology using AI power editing tools means that you dependent on technology which can be a disadvantage if the technology is fail so up next at number two we have Runway AML Runway AML is a platform for creative and Technical artists to experiment and build machine learning models for Creative applications it provides a userfriendly interface for exploring and making it accessible to a wide range of users Runway AML aims to adjust machine learning in the creative industries by providing tools and resources for artist designers and developers to create test and deploy their models some of its features are model Library user friendly interface community and resource pricing for Runway AML for individual looking for explore Runway AI magic tools and feature it's free and for pro version is for individual and team looking for more access more AI magic tools and more export option with $12 per month for the user here are some pros and cons of Runway AML easy to use and quick Runway AML has a userfriendly interface and requires no coding knowledge making it accessible to the users of all skill levels active Community it has an active and growing community of users and developers who share their projects and support each other integration with other tools Runway AML can integrate with creative tools such as Photoshop and after effects allowing you to incorporate machine learning models into your existing workflow some of it cons are cost Runway ml can be expensive especially for professional use processing power some machine learning models require significant processing power which may be limited for users with older computer technical issue like any technology Runway AML can experience technical issues and bugs which can frustrate users and limit their ability to use the tool so at number one we have Adobe sensing Adobe sense is a framework of artificial intelligence and machine learning Technologies and services developed by Adobe system it enhance creativity and productivity across adobe's product and services Adobe Sensei allows Adobe to offer intelligent and context aware features that can automate routine task enhance the creative process and provide personalized experiences for the uses some of its features are scripted form conversion businesses and realtime creation Discovery and manipulations of images personalizing marketing to each customer Adobe senses come with integrated with other Adobe Creative Clow products here are some pros and cons of adobe sensor Advanced automation Adobe sensor provides Advanced automation tools including Auto tagging and auto enhancement which may save time and efforts in the creative process by automating repeative tasks Adobe Sensei can improve productivity and free up more time for Creative work Adobe Sensei is integrated with many of the adobe's other creative tools making it easy to incorporate automation into existing workflow some of it cons are limited customization while some customization options are available some users may find that adobe sensus preil automation tools are too rigid for their needs cost Adobe sens is only available through Adobe subscription based Creative Cloud which can be expensive for some users dependency on technology like an automation tool Adobe sensor relies on technology which can be disadvantage if there are technical issue it's important to keep keep in mind that while AI can help to generate ideas and create stunning visuals I'm going to show you exactly how you can generate these yourself websites are going to be built with AI art as well as tools like chat GPD in future so in this video I'm going to explain the whole process and we are going to have it write the entire Website Layout for us all the content the hero section and feature section and much more this means that we can build an entire website from the ground up without writing a single line of code and this will be a pretty damn gool all right we will start with the mid journey in Google search we will write Journey this is an AI tool that allows you to create the AI art that we are now seeing all over the web to go to this you just go to the mid journey.com and join the beta it's easy to get started because all you really have to do is join the Discord when you do this it will open up the Discord Community which you can accept the terms and condition and start creating your own AI Arts let's do this now here I have got the mid Journey server and I'm going to head over to one of the newcomer room here and and where everyone is creating different types of AI art the first thing we need to do is uh to do a forward slash and type in an imagine give us prompt for we can uh request the AI any type of art we are after here I'm going to type uh in a beautiful website for shoe then I'm going to pass in dash dash V4 which means uh the version four of the mid journey of AI tool finally I'm going to pass it in style stylize I'll do dash dash stylize it's basically how random we want to be in uh it's it between 0 to th000 and I'm just going to set it to about 500 which is average so I will do the enter it will take a little bit of time here this will start working in the background it's going to generate a low Fidelity version of the website and the design for this art and this low Fidelity version will be iteratively updated to be higher in resolution these four examples then can be picked from and then we can upscale them as well as uh let's have a look at what kind of results we get now one thing uh to notice here is that we do get a bit of a loading percentage bar and this is how long it takes for the actual AI to generate the image uh usually takes between 1 to 2 minutes but it will essentially refresh and ping you once it's complete so here is it is complete and here are the four versions that we got which are not too bad uh not that great either they are bit uh yeah I suppose it's looking a funny in a way so this is where we can start being more creative with our prompts so what I mean that uh is by giving more context as to what we want to do so here is a prompt that we have created what I'm going to do is to pass it in the imagine once more and I PES prompt in this and I'm going to give some more context I'm going to pass it to the word UI wait choose UI ux UI ux website this basically means that it's more or less focused on having good UI and good at ux and being more like a website rather than just a creative shoe or a design and it's important to give these context clues to the AI if you want better outputs different types of uh context clues you can provide is to find a kind of style that you want uh for for example um how you want the design to look and feel whether you wanted to represent a certain brand or much much more like these are just simple examples but let's take a look at the kind of results we will get just from making these small little changes to the design here here you can already see uh wait a minute look it's a little bit more interesting we have a bit of our sliders and what looks more like a Nike shoes and also have uh uh what looks like a menu at the top and and I really like this uh design uh that we have here on the bottom and here it is because it just look very much like a website that we have got a bit for a hero section or a hero set section and what's not so from here we can select the version one uh so from here uh we can select uh the version 1 2 3 uh 4 to upscale and I'm going to upscale version three where which is u3 and this will give us a higher resolution version of this one particular design that we can uh that we can start to take uh to the market or even you can use to bit this again uh will take a little bit of time it's going to process this and uh to do and you can upscale in data and let's run this in the background so that you can see uh wait a minute this again will take a little bit time to process it's going to process this and do an unscare or upscale in beta and let's run this in the background so that you can guys see what's the look look so here's the final result and this is looking uh pretty and we have got the nice design here for a shoe uh we have got a bit of a hero section and we also have what looks uh like a two call to actions and we got some option here to at the very bottom and as well as at the top we have got this colors and that essentially are looking like these shoes colors being used as a part of the website design so not too shy uh let's select uh the another one let's see for yeah uh but I think we can do a little bit more um in terms of customization the design for this website and I'm going to show you how you can do this I'm going to copy over this uh prompt once and for this prompt this time I'm going to pass a couple of extra things so let me just uh maximize this we are going to type um as I have uh pasted that URL over here so I'm going to pass uh in the context clues of like uh clues of Nike because Nike made obviously website showes so also uh so we'll write it here n key right here repeat and I also I want it to be red blue green and and or uh maybe uh yellow and I suppose we want to uh else uh running person would be interesting sorry person uh it would be interesting to see how that gets designed uh and I think that this should be enough let's actually improve the styling here uh 1 minute change the styling let's let's have it 750 uh to make it a little bit more creative and here are the results I don't have a running person but I do have a website that has definitely started using the colors that I recommended uh with joury AI art systems to use so the these website designs look way more creative than we had previously still we have this slider design these website designs look way more creative than we had previously we still have this slider design here at the bottom section where we can pick out different shoes but even these shoes look damn cool I can see that the Nike logo on these and these are actually ones that I would probably buy if I saw in the Nike store but generally uh these also are website because we we have got the menus here at the top of the right uh we got the text so generally speaking uh these are pretty interesting interesting designs so now I have another option here called version 1 2 3 4 what this does is actually allow you to pick uh more Generations uh based on uh actual image from these images or these designs now from these design I actually like the 12 three and four I think it is most I think four cuz uh it teals and red or it's a bit yellow or blue so I'm going to select the version um four and that's going to create uh four more version based on the specific version for us let's take a look at the what those that we got and here here we have got our results uh where we have more examples of that all of these looks very similar I think the only difference here is uh Blue Line a red line it seems to be shift and change as well as a hero section and and you would normally have this menu at the top right and something these shoes here are a little bit inverted but generally speaking this is the kind of variations you can expect now let's take a look at another way we can generate Our Generations for website now you can do is just uh jump into any website and select any image so first we will go to an app and website and you can uh select any image that you would like and I will actually go on here and I'm going to pull in this image of this shoe and but I do like the design Aesthetics uh here we are going to here and then we can copy the URL from here but this time what I'm going to do is type the imagine imagine then I'm going to pass uh in the URL what we have copy uh we will paste it here again I'm going to write we did it before we'll copy this paste it over here so what's going to happen here it's uh it's going to have a look at this image that we have defined in in terms of the URL it's going to use this as a reference point then it's uh going to take a look at the prompt we have bon which is the shoe prom using the colors and it's going to try to design a website that has a similar Aesthetics to that image which is really cool let's see the result we get back looks like uh that's ready uh let's take a look at this so here you can see that the design is Statics uh wait a minute static uh that is uh similar to the page seen in this one so this is more bubbly and colorful image and now I represented very much so in this design Aesthetics uh we have these four elements here at the bottom and if you have a look at the design originally uh we had four elements here so you can see that it's pulling in these design Aesthetics to create a design based on that and this is where you can really start using the air art repeat using the air tool to your own benefits trying to combine different styles customizing them and creating new and independent and unique ones from there so in this four I'm really like uh uh the version of fourth one or the second one is a pretty so uh what I'm thinking of doing is an upscale on this so so we are going to upscale uh V2 and we are going to wait for that uh 1 minute is uh use chat GPD to write out the most of the content for me and then I would I could take this to a client to immediately start sailing so let's see the upscale version happen if we take a uh closer look we will see that it has all the main elements for a website including a logo area uh a menu area a nice hero uh image as well as a title tagline Button as well the feature section uh so what I'm going to do is to save this image to my computer I'm going to save it and then customize it a little bit but before we do that uh we are going to head over to a GPD here we're going to prepare the outline for the website using some AI tools so here I'm going to ask thatp to give me the Brad prod outline for a website for shoes including hero title tagline call to action button and section for features and details about the shoe so let's see what charil will comes back with um it's pretty quick uh it's got a Title Here call to action button features and detail section and it's not really telling me what these are these are where we might need to be a bit more specific as to what we wanted to do it's giving me uh it's giving me like broad outline of the website on what it needs so please please I will write please provide then for each one of these that I can copy paste straight to the website um here title is here tagline call to action buttons features okay and the details okay detail specification is there okay reviews and rating okay so I think I have got enough hairs to go by to Simply copy paste and the website so let's start beginning to design this I have opened this design up in the Photoshop and I'm going to actually just crop it into the main element over here and I really want to capture this image and I will crop it and I will clear out the rest and we can design each aspects or each part of this design bit by bit I will save it over here it's time to build our website so I'm going to head over to editor X and I'm going to build this uh a website in this and I have login already and then I will create to a new site and here I will takeen to a web uh dashboard and I'm going to start by cop copy paste all the elements from chat gbd as well as mid Journey straight and the first thing and and I want to jump back into the chat GPD here and copy over our hero text so I will just take it first and I'm going to T add title and I'm going to paste it over here and then I'm also going to grab the tag line but before I will make it sure to keep it over here before that I will first I will put one image over here I will change the image as I have already uh downloaded the image let's upload that image we'll open it and let's wait to get uploaded yeah it's uploaded and now we will update it let's make it big in size okay so we will we will change the size but first I will remove this I will change the size for this this I will make it little small next I will add the icon for uh for the company of the shes that we I'm going to make a website for I will add this and I will update it make it small and this will be the task bar but make the size uh small a bit and we'll insert one more [Music] picture and it will be the logo of the company that we are going to put over here we will minimize it we can resize it can keep keep the logo over here now next uh then I'm going also going to grab the tag line over here so I'll I'll pick this tag I will add the text comes up over here okay I'll make it small in size and we will paste on and finally Let's uh grab a call to action which says sh and create a button button for that so so here we have all the workings of what we uh at least what we would need at least so for for the content let's resize this first now we will add uh we need to add the image itself so instead of just having a browser stock images or anything like that we actually had our images either done inside of the photoshops that we have done before as from the Journey as well as so I'm going to just drag the image and I'm going to change the image and it should be here I've already downloaded no I have to uploaded I have a collections of some shoes uh let's see and I will just install one I'll upload this picture it will take a bit of time let's wait for a while and once it's upload it we will we will update it I'm GL to did let's keep it like this or we can e e so uh we change our content place from that to make it a fix in a place so here we can change this also pretty well okay so basically have this text happening in little bit more here we have seen how we can resize it from this scroll bar and so now let's add one more H picture over here to make it look more better let's take a picture from here change the image upload from computer no we will upload it again sorry and we'll update it resize it let's turn it out okay Let's uh make a taskar for the top top most of the screen we will have a homepage so we will write a text over here that will be make it small a bit in size we'll add another text it it will show about us it will show about us section so we write it over here small let's make same size speak more small allow let's make it more okay uh the next next session will be services and the last one is context one section for one more option is there uh that is a start button like uh we have keeping the start button over here so we will we are keeping this here so let it be here yeah so next uh what I'm going to do I'm going to select add uh section and I'm going to just have a blank section um here I'm going to do first I will add a picture first as a background let's do it I will add one picture let's see I have downloaded not I I download it wait a minute let it be [Music] upload I will update it that would be a whole for a whole page so let's add the pictures now for other shoes here's the picture I'm going to reopen this iut okay I'll update it keep the pictures over here like similarly we will upload three pictures over here e e e e e e after this let keep it keep this here we are going to add another title over here little B we are making it a bit we will change the font for this let's make this after this I we will start editing the features of the shoes let's go to chat gvd take this first paragraph make it small we make it B we will add another paragraph over here e similarly we will make it for this also e e and last we will add a contact us last we will add a contact a section over here again so this is the final output of chat GPD or how we use chat GPD and AI art for our UI and new design to create a website or a web page or the land page for the shows a portfolio is a collection of work or asset that showcase an individuals skills experience and achievements in the business World portfolios are often used to demonstrate a professional competency in a particular field such as graphic design writing and project management a portfolio may include various items such as passwor sample case studies certification references and testimonials from satisfied client or employers a well-crafted portfolio can help an individual stand out in a competitive job market and increase their chances of Landing their desired positions additionally a portfolio can serve as a valuable tool for self-reflection and personal growth allowing individuals to identify areas of strength and areas of improvement so hey everyone and welcome to Simply learns YouTube channel today we are going to learn how to prepare your design portfolio in figma but do you know that uiu expert also use figma too so if you want to learn UI U expert in 5 month and attend a master class from the top faculty of IIT Bangalore consider our Advanced certification in UI ux design course check out the link in the description for more details and if you are a tag geek here is a brain teaser for you first should be included in a design portfolio only completed projects only personal projects a combination of completed and personal projects or a combination of personal and academic projects let us know your answer below and get a hard from Simply learn without any further delay let's get started with the session by taking a quick look at what portfolio is and how to design portfolio so first to make a portfolio we have to consider these points the first one is present your work as a case study carefully curate your portfolio showcase real world even if it's C problem design exercises more in-depth case studies talk about results make your portfolio easy to navigate do your research and write sincerely and let your passion show in your portfolio so let's begin so this tutorial video is all about creating a stunning portfolio or stunning design a portfolio for the product designer Named Sam using figma to bring it to the life our goal is to keep things simple and elegant while ensuring that every aspects of the design is taken into details from the fountain color scheme to the placement of every element on the page we are going to cover it all in details so without any further Ado let's start designing after for Designing of a portfolio we are going to use a tool called figma as we discussed before figma is a very powerful tool and a lot of people are using this tool this days especially uiux designers and it's really popular so let's get started go to fig.com first and if you don't have any account yet click on the sign up button and you can just sign up right I already have an account so I just have to log in to my account once you are in the dashboard let's first let's log in first so once you are on the dashboard first you have to design file so first let's change the background color so let's get started so now I will write the name over here okay so let's select this uh text and write this Five Section about Sam the first one is for home and the second is about section work sections and blog section the context section so yeah it's done now we will add some logos for social media at this left bottom over here let's take a rectangle and we will uh keep the picture for the Sam over here so I have already downloaded the pictures so let's keep it over here now we have done with the homepage now we will create a design or a portfolio for the about section e now we will write the section for the about so let's write something about Sam over here next we have experience over here so let's write something about experience that Sam's having so now after that we will add here some of his experience similarly we will add more off his experience so this was the design for the about section now we will go for the third section that is work let's create it so we will see what are the recent projects so now we will write some of his uh ux case studies let's suppose he's done the four case studies in ux so for example we will and with the four different boxes let's insert any of the four pictures let's say let's take uh write something um whatever he did a research or is having a scale study in 's design let's suppose he created a website we just added these randomly uh logos over here let's make it small for this we will uh make a three different sections let's do one okay we'll uh fill this with uh whatever you have done the Vlogs and all so let's put any of the picture for the sample let's these are the samples but you can put your blogs over here and about the text trite it first with the date and some text about the same blog same for the other two blocks one more done okay this is our blog section let's make the last one that is the context section uh let's copy this again can write over here contact me section uh let's write text contact we make it small here we will write another address for the Sam space and we'll write Sam's email ID write some of his link social media about his any projects let's see so this is the last contact Section so we are done with our portfolio this is the homepage this say about section this is a work and the third work section and the fourth one is this blog section the contact we have reached the end of this session on uiu X full course should you need any assistance DPT and other resources used in this session please let us know in the comment section below and our team of experts will be happy to help you as soon as possible until next time thank you and keep learning stay tuned for more
No comments:
Post a Comment