Mockplus RP - UX - UI Design from Zero To Hero

1. Class Intro: Mock plus rp is an online UI UX design and collaboration tool. And great thing about it is you don't have to download it to your machine. You don't have to bother your machine too much. Whatever machine you have is going to work just fine because it's all working inside of a browser. You can create interaction rich designs and prototypes, share them with your clients and developers for handoff. And it's always going to include the code in the background, which is always handy for their developers to use once you actually get to that hand-off process. Hey designer, Alex here and welcome to this Skillshare class about Mach plus rP from zero to hero, a digital products creator. And so far I have created or 500 digital design products. I'm also a course creator and so far I have recorded over 40 different UI UX design courses. And I have over 60,000 students enrolled in those courses. In this mock plus rP course, we're going to cover what is the welcome screen and how to navigate the interface, how to work with different pages and navigate between them. What are components and built-in components inside of ma plus rP and how to create your own. How to work with icons in mock plus rP, how to create different assets and sets of assets. How to work with Properties panel and what it is and how it changes. Different interactions you can achieve in mod plus rP. How to work with nodes are ports and airports. And what is the difference? What our templates, why use them and save time and how to be more productive. How to choose a template from a vast variety of them on my website. How to customize the template, how to edit it, change the copy color is layout and images. We're going to start working with some flowcharts, then move on to wireframes and use components to create wireframes really quickly. Then turn those wireframes into a design by adding different colors, images, and copy to create our final design. At the end, we're going to add the different interactions and bring our design to life. Finally, we are going to preview, share, and use MC plus Cloud to work with other members of our team, our clients, and our developers. And I'm going to explain some collaboration features that mock plus rP has. Your class project for this class is to follow along and to create a design using the tips and techniques you'll learn from this class. There is a dedicated Skillshare class video. Make sure to check it out to learn more information about it. More plus rp is great because it's super easy to get started and it's free to get started so everybody can join UI UX design community. So I look forward to see you in class and let's create some awesome website design. 2. Class Project: Your class project for this class is to create a website using some of these tips and techniques of mock plus rP that you'll learn throughout this class. You can either use templates or you can create your own design from scratch, following some tips and techniques that you learn from this class, you can follow my structure or you can create your own structure. Doesn't really matter. It's all up to you. And what are you most comfortable designing width and what are some approaches that work for your design style? Make sure to have fun and when you finish, make sure to export as JPEG images or to make any sort of screenshots and upload them to your class projects. I would love to see what you guys can come up with and I would love to see your results at the end of this class. 3. What is Mockplus RP: Mock plus rp is an online UI UX design tool created for designers just like you because you can work when it, wherever you are in the world, all you need to do is just use your browser that you already have on your computer. Unlike some other tools, it doesn't require that you have some ultimate design machine, but you can use any computer that you already have because as I mentioned, it works inside of the browser and it doesn't eat into your RAM memory and your cache memory on your machine. You can collaborate with other people using more plus rP using dare sharing function and their team function. So you can create your own team when you're working inside with the project. Or you can be invited to be part of somebody else's team. And you can work in real-time and collaborate in real-time with other people from their team. Or if you're just a freelancer, then you can work all by yourself. You can create complex interactions and animations inside of mom plus rP. And then you can share them with your clients or stakeholders for feedback and put further improvement. And what's the best thing of all is you can export that and you can share it for hand-off for developers using more plus Cloud and their seamless integration. It's completely free to get started. And inside of your pre-plan, there are hundreds of different components, pre-made components which are already included in hundreds of different templates which you can utilize in your workflow by simply editing and opening them up inside of more plus rP. 4. Welcome Screen: Like any other software out there, mock plus rP has a welcome screen and it's used to help you navigate the beginnings of your project. So let me show you how it works. So here we are on the welcome screen of mod plus rP. And what you can see right here on your left-hand side is all we chew, which is what you see on the screen right now, which is all possible options at the same time. Then below that, we have recently edited. So these are the projects that you recently edited. Obviously my favorites because you can add any project to a ferret. Pretty simple clicking this star right here. And you can work on several different projects at the same time, but perhaps just some of them are your favorites. Then we have created by me. And these are projects created specifically by yourself. Because when you create a project and when you create an account for Mach plus rP, you can see that it's going to display your handle. So however you created your account, in my case, I use my name and it's going to say team off than you. However you created your account. What that means is you can add different team members by clicking this button right here to your particular team. Here what you can see is the plan that you are on. You can either be on free or an ultimate plan, I believe. So. This is where it's going to display that. So if you are a part of the team, is the one created by yourself or somebody else invited you to their team, like e.g. you're working either as a freelancer for an agency or a freelancer for a client, or if you're working full-time for an agency, then you're going to see all the projects created by yourself. I started by yourself, but you can always invite other people to it. Then we have recycled, been in all the projects that you deleted. Finally, we have templates right here. We're going to touch upon templates a little bit later. But basically, if you need to use a quick template, you can simply click right here. And it's going to take you to the templates page below that we have mock plus Cloud. When we see it says Share projects, collect feedback and handle specs and acids, which is really important if you want to move outside of mock plus rP and you want to go to the marketplace Cloud to do these things which are just mentioned. You can do so by clicking right here. And then we have plus d t, which is the best or online collaborative UI design tool. Like no other, you can use MC plus d t to open up files from different tools such as Sketch, Figma. And you can create your files completely from scratch there. Or you can also use more plus RB, which we are doing in this course. Then if I go back to all what we can see right here is the new project, then we have new project folder, which is great if you want to add either different files to the same project folder or different starts off the project to the project folder. So e.g. you might want to create a mobile app or website, design a dashboard screen all inside of one project. Then you can create a project folder and put all of those projects that you create into that particular project folder. Once again, I already mentioned invite members, option and what it does. And now, as I said, plant is located right here. You can see your personal space and you can see the team. So you can switch between the two if you so choose to work on the projects by yourself and nobody else from your team can be able to see them or as part of the team, as I already mentioned, if you click your profile picture, you can edit your profile. You can check your teams because you can be a part of multiple teams. Notifications and requests. You can see the help right here and how you can get help about RP. And finally, you can log out. If you have multiple products, you can search them right here. And you can organize your projects by clicking right here. If you want to get more details to see how the type of the project when it was created and updated. And you can of course delete it if you so choose, as I said, you can favorite it right here. You can click right here to preview, to clone, to duplicate it real quickly, rename, move to another project folder, e.g. share it with some other team members. Add or remove team members from that particular project or completely delete the project over all. What I'm going to do now is hit New. And I'm going to see you in the next video where we're going to explain what this is and we're going to tackle the interface. So I'll see you there. 5. Interface: Interface of a toll is where you're going to spend most of your time working in that tool. And same is true for Ma plus rP. So let's continue where we left off in the previous video. Let me give you the tour of an interface, what it can do and where all the options are located. So here we are back where we left off the previous time. We open up this window. And what we're going to do is give it a name. So we're going to give our project a name. And let's call it e.g. our first project. And here what you can see are all the presets. So these different presets can give you different options, e.g. iPhone. What you can see right here is for mobile devices, and if you click this little arrow, it's going to open up all the presets that mock plus rP team has provided you. But if you don't see your preset, you can write to them, if the device is popular, they are going to introduce it. Or you can always go for custom size right here to learn about the Custom Size which you want to use, you can visit the manufacturer website and then see the design section. Or if you have a design system themselves, then you can find it inside of there. What sort of pixel density to use, and what sort of dimensions that they used. Next to that, we have iPad, which is obviously a tablet. And here you can see all the popular tablets right here. Once again, if you don't see your dimension, you can always write to the team, they are going to add it. Then we have the web. And you can see some most commonly used sizes. Of course there are others out there, but if you want, as I said, you can create a custom size. All of these sizes are in pixels. So to get us started, I'm going to simply select 1920 by 1080. And once again, you can access free templates from here. You can do so from here or from here or inside of the interface itself. So let's hit okay, and let me show you the interface. So while this loads, I can go back to here and you can see now that we have created this, my first project, our first project, sorry, a few seconds ago, I'm going to get rid of this one, delete it, okay? And now I have just this project because I don't want to confuse you throughout this course. So our first project is what we just created. Here is how it looks like. And if I hold my control and scroll wheel on my mouse or hit Control and one on my keyboard, it's going to zoom back into place. Let me hide myself so you can see a little bit better. And this is how the interface looks like. So on the left-hand side you can see all sorts of different options. Here we have components, we have icons, we have assets, pages, and layers. And I'm going to explain all of them in the next few videos. Then on top we have some most commonly used options and we have sharing and collaborating options right here. And then we have the panel on the right, which can be either properties, which is going to be different for whatever you select the inside of your art board, interactions, which is used when you want to add animations and interactions between different art boards. And then we have notes, if you want to add a different nodes, which is really helpful for your clients, e.g. or your teammates to explore. Let's get started from the top. If you hit this back, arrow is going to take you back to here, which is the homepage. And you can see recently edited and no such project found because this is our first project obviously. Then if we click right here, you can see project. I can create new. I can import the RPI file. I can save it to control S or command S on a Mac preferences. So when I click right there, I can change the general options. So I can either change these shortcuts, offset pasted color Canvas colors so you can choose the background of your canvas. So in this case, is this sort of mid to dark gray, but you can also change it and add your custom color to this background. It can be completely black, it can be light gray, it can be white, red, whatever color you want. You can check and uncheck some of these general options. Then we have layout settings, which is the layout in a background, and you can see how that works. So we have two other columns, column width and gutter width. So let's see. Gutter on the outside we have the rows, we have the visual. So let's say something like, I don't know, Column Width. Let's give it something like 86. So we get a little bit more narrower columns, gutter width. We can increase the gutter width to 100 just so you can see what it does. So it's this option right here, but let's change back to 74, e.g. Then we have 12 columns. But if we switch it back to eight, you didn't see how that looks like, but let's go back to 12. And of course total width, you can narrow that down. So instead of 1920s, let's go over to 18, 20 e.g. and you can see that now we have this space on this side, but let's go back to 1920 because that's how we set it up. There we go. And then you have the offset. So what you can do with this offset is you can either turn it into a center or you can place the pixel value and it's going to push it to that particular side. Then we have the rows. If we switch rows, you can see that the rows are these horizontal columns which just appeared. Gutter width is the width between the rows. Obviously seem like it is between the columns and height. So let's call it ten, e.g. and you can see what that does. But let me get rid of these arrows. Finally, we have the visuals. So full grid or stroke outline. You can see that looks like and what it does. And you can change the colors right here. Finally, once you're happy with your settings, if you're using these values all the time, you can switch them on to make default settings. Why this is important is especially when you're working either as a part of a team or as a freelancer on monosomy for same projects all over at a time. This is going to save you a lot of time because you can just click there default settings and the next time you open up more plus rP D settings are going to wait for you, right, where you left them off. Then we are going to move on to the grid settings. Grid is basically just these blocks of pixels all around your art boards. And you can set them however you want. So if I set him to 40, you can see that it increased the size of these blocks because it was 20 previously, seemed like we did previously. You can change the color right here so you can change the direction and change the locale. And once again, you can make default settings. Then we have a measurement. You can have basic alignment. So when you move your objects throughout your art board, they are going to align top, bottom, left, right, and center on each side. Even distribution and spacing specs. That's basically it. So when I hit OK, We're going back to the airport itself. Let me hide myself so you can see a little bit better. Our board is basically the place where you put all of your elements inside. Here I have all my basic components. We're going to touch upon them a little bit later. But if I drag and drop an element inside, I can reposition and reorganize it however I want. And it's located inside of the art board itself. You can drag it outside of the art board and you can see it's now located just outside. But if you want to create designs inside of your art board, just drag it and place it inside. As I mentioned previously, this properties panel is going to change for whatever you select on to put on your art board. But we're going to deal with that a little bit later. And what you can also do is create some art boards, which we will tackle a little bit later. But basically those are ports are used, e.g. when you create an effect or scrolling effect left and right, let's say you're going to put those different, either pages or different sections of your page or mobile app or whatever you so choose. It can be e.g. a pop-up, add a banner or something like that. Maybe a flying form or something different than you can use those sub airports and you can connect them with the main art board using the interactions panel right here. So whatever user does inside of the main airport subpar port is going to follow n is going to be put into place. So if we go back to here to rename your art board, you can simply double-click right here and call it e.g. Home page, let's say. And for this, let's just duplicate it. E.g. I want to have two of them. You can hit Control or Command D. To duplicate your art board, you can double-click right here and say e.g. let's say Shoppe page. If we are creating this website and then all of the elements which were in the homepage are going to be translated into shop page, which you can also do is move this around if you find it annoying, e.g. and you can see the distances between your art boards. So if you want to be nice and tidy with them, you can just position them however you want. So that's enough for our ports right now because we are going to deal with them a little bit later more, what I want to do is quickly explain all of these elements on the top. So we tackled this panel on the left-hand side. So here you have your pages, here you have your layers, obviously. So the more layers you add, more of them are going to appear. So if we duplicate this, you can see how that looks like. And if I double-click and call it e.g. rectangle, there you go. Rectangle, there we go. And now I have three different layers. This first option right here is the Connect mode. But that's going to do is allow you to connect these interactions between either your airport and subpar port or between different elements inside of your RPA, e.g. you have the button and you want to create a hover state for different components which is located inside of the artboard. You're going to do that with the interaction pattern. So it can be used both ways. Next to that, we have creating a sub art board. So if I click my sub art board and drag and draw the option right here, you can see that now I have my sub R port, which is just what I mentioned. So let's say that this is our pop-up window. And it's going to be triggered when I click right here. Then we have this option for the Connect mode. So when my users click right there, it's going to be linked. So when they click, it's going to command and show art board, which is this one, position center. And we're going to tackle this a little bit later. Just sued, not confused, but basically, that's how these things work. Next to that, we have the Pen tool, obviously, which is used if you want to create all sorts of different objects which are not located right here, and you can just click outside of it to de-select it, and then you can move it. And we switched to Properties. You can see that you have some different properties that you didn't have before. Next to that is a pencil icon n for the pencil tool. Next to that is undo and redo. But you can see the shortcuts right here. So Control Command Z or Control Shift, Command Shift set. Then we have the group option. So if I select all of my elements right here, I can hit this or hit Control G in order for me to group them. Or I can hit Control G One more time to ungroup them if I so choose. So you can do it right here. So I can go ahead and select these from here, hit Control G to group them, double-click and call it e.g. rectangles because that's what they are. Or if I don't want them inside of a group, I can ungroup them. But you can also do is move this up, move this down, do with it whatever you want, and then bring to front and bring it to back. So to demonstrate the debt, I'm going to fill this object with red color just so that you can see it. So it's now in front of these rectangles. If I scale it by holding the Shift key, you can see how that looks like. So when I click right here, send to back, It's going to send it behind these rectangles. And now if we want to bring it to front, if I can select it, I can simply click right here. But if I cannot select it, I can click on the item which is in front of that item and send it to back. So that's how that works. And then what we have right here are our port list. Currently we just have one artboard, but e.g. if I go back and Control D to duplicate that. And now when I click this option here, we have two artboards. Now, it might sound a bit silly when you have just two artboards. But these UI projects can sometimes have 200 words, 300 airports. Having an option like this is really important because you can simply jump to that particular artboard by clicking on it and you can see what it does. So you can just imagine that you are somewhere around here and I want to click on Homepage is going to take me straight to it. Control command one to snap back into position, get rid of this one. And that's why our port list is so valuable and so important next to it, what we have. If I hover, you can see all sorts of different options, but this one is estate panel, now States is how the element looks like when user does the interaction with that element. So e.g. debt can be a default state, a hover state, clicked state, Press state, disabled state, and so much more. So depending on your project, you will have more or less of these states. So to demonstrate that quickly, let's select a quick button and let's type in something like Read More right here. Click somewhere outside. And let's enlarge that button just so that you can see it a little bit better. Let's change the fill color to this blue. Let's change this text color to white. Let's change this to, let's say Roboto and something big like to whiny to maybe something like that. So now we have our button. Let's get rid of this border and this button because we dragged it from the component panel right here where it says compost is the default components. You can of course create your own component and add it to assets right here. We're going to talk about that a little bit later. So when you click right here, you have all of these states who have disabled pressed focused mouse hover selected and so much more. So right now we are in the normal state. So when I change it to mouse hover, and when I go and do something with the fill color, e.g. something like that. And I go back to the normal state and switch between normal and mouse hover. You can see how it looks like, but how can you preview it? You can do a quick preview here. So as soon as it does, you can just hover and you can see what it does to your button. You can change the content inside of your components, in this case the button on any one of these states. So e.g. on hover, it should not say Read More button, click now or whatever. You can change the size of your button. You can change the color. You can include the gradient, so it can really be creative with these dates. And you can see you have bunch of these different pre-made States for all of these pre-made components. And you can of course create your own. You can click Add, state, name it however you want. So e.g. let's say disabled too because we already have disabled. And now on this disabled, you can go ahead and edited further and add new changes. You can rename it and you can do whatever you want with it. So basically, these are the states in a nutshell. Then we have Zoom and Zoom option. You can simply click on these. Or if you have scroll wheel on your mouse, you can use Control or Command and just use the scroll wheel on your mouse. And as I said, Control Zero, control one control to, you can just play around with those settings. Then you have published option, which is great if you want to publish this as a prototype for others to check either from your team or from some other team. Then once again, we have members and you can click and invite different members. You can change the project type from private to team. And it's going to be accessible to all members of the current team or all members of this project, which is really important because maybe you want to just invite few designers, are few teammates to this particular project before we make it public and available to the wider team such as marketing, such as, I don't know, finance and stuff like that. You can invite members. Role, you can just add it these roles, some member, collaborator, guest. You can see what each of them can do when the link expires and invite link so you can copy and send them this link and they're going to be able to join. And once they do, you will see them right here. Next to that, what we have is to download online prototype presentation package, which is really useful when you're trying to sell the NVP either to the investors or to the higher members of your team, such as board directors, stuff like that. So you can download this prototype and you can share it with them either in person to further explain what you're trying to do right here, or if you don't want to publish your project and you don't want to invite board of directors, e.g. to view this project, then you can simply share this project with them. They can open it on their own machine and they're going to be able to see everything that you did. And I'm going to show how that looks like a little bit later. Next to that we had the preview option. So I'm going to click right there. It's going to open up a new window. Once it loads, you can see all these options that we saw. And this is what your board of directors, e.g. a. Will be able to see if they download the prototype. So list of pages is going to be right here and they still have the search option. They can navigate these pages, they can go up into full screen. They can hide these panels right here. So hide left hydride panel if they so choose full-screen and hit Escape to go out of full-screen. And of course they can Zoom so they can fit to screen, e.g. go back to full screen and now you have your full websites, say presentation package. And it's great because everything is explained right there. They can further shared this preview link. Or you can set what they can click and what they cannot click always show link area. So that's going to show what, what's linked inside of this particular page, Charlene carrier on mouse hover. So once they hover over your link and what you actually made clickable in this page, it's going to show content outside are born, not markers and hide toolbar. This is where the notes are going to live. So e.g. if you want to let them know what's going to be in the next version, what's going to be included later? What's here now? What they need to do if you want to help them out with some aspects of that design, you can put that in the notes right here. So that's how the preview looks like. And Wednesday, once you download it and share them, this is what they are going to be able to see. If you click right here, you can either start from homepage or start from current page, which is obviously great if you've got multiple artboards and you want to switch What's homepage for that particular project. And then here we have enter fullscreen hide left panel, hydride panel. And now you can just focus your efforts on the full design if you so choose. Now, you cannot show them when you hover, you have to click right here to show the left panel and show the right panel, e.g. maybe you're using just the shortcuts to search for whatever you want and included inside of your project, then you are going to be able to simply hide this or you don't need layers, you just need to create something really quickly using these rectangles. So e.g. if I type R, it's going to show me the rectangle. If I type all e.g. is going to show me the circle. If I take t is going to take me to the Type tool. So sometimes you don't really need these layers to distract you. And that's where this option comes in handy. You can just hide these two panels. And finally, as mentioned, but I want to mention once again really quickly, this panel on the right-hand side is going to change whatever you select. So let me show you. If I go back and select, let's say the type tool, we have the type options and we have limited options right here because those are the options for the type itself. Then we have the circle. You can see that it's going to change a little bit. Then we have the rectangle. It's going to change. Once again, it's going to give me some additional options. And if we choose my custom shape which I previously created, then it's going to give me all these other options as well. But there is one option which is really important and it's called pages. It's located right here. And I'm going to tell you what it does and how you can use it in the next video. So I'll see you there. 6. Pages: When you're working on a project, you want to divide it. So it's easy for you to navigate and it's easy for your teammates to navigate. That's where the pages option comes in handy. Because inside of the pages option you can do just that. So let's go back to mode plus rP, me show how it works. So here we are where we left off the previous time, and here are the pages on the left-hand side. Now currently we just have the homepage and this is what you see right here. If I double-click right here and change this to shop page e.g. and when I click to home, this is the actual homepage. But if we want to create another page, click right there, it's going to show me page one. So for the page one, it's going to still create that our board, because we set it up as our default ones. We created the one for the homepage itself. But here what we can do is, let's see, let's see what we did right here. So she'll page here. We can do something like blog, e.g. so you can either do this. So when you switch between home, which is going to be your shop page, and you can double-click right you to rename it. So shop e.g. this can be blogged e.g. so you can easily switch between these pages if you so choose. But that's not really what I would use these pages without using them is something like flowcharts. And this is going to be our flowcharts, e.g. then this is going to be our wireframe. And let's give it a name of a wireframe. Then when I click New, I am going to use this one for design. And if I zoom and paste this, we're going to use this one for design. And finally, to create a new one, let's give it something like project brief or design brief. So I can easily switch between these. Let me rename this as well, my Excel. So as I said, they can easily switch between these and I can move them around. So inside of the flowcharts, I can include the design brief if I so choose, or I can move it outside a bit. Just place it outside. Right-click and you can see you can copy it. You can insert a page or a group. You can clone a rename or delete if you so choose. But what I want to do actually is go back to it and just move it outside, like so. If you want, you can select multiple ones and just add page or add them to a group. And you can see that it added this group. But what you can also do is select them and create a new group right here. And you can put whatever you want in that group. So e.g. design files, because you can have multiple pages in your project. And let's say design brief, I want to include in that group. And you can see that it's included right here, let's say design. And it's going to place that it shows number two because it has two files inside. Obviously, if you have multiple files is going to include multiple files inside. Let's go back a few steps and I'm going to select my folder, hit delete, and it's going to say I'm going to delete this group. So basically, that's what I would use these pages for. When you have your design brief from your client, e.g. if you're going to read it and navigate it really easy right here, then you're going to move on to flowcharts. Create some quick flowcharts are awesome page charts or user flows or whatever you want. And then once you're done with them and you have your structure in place, and we're going to move onto wireframes quickly designed some basic wireframes. Draw some rectangles on a page, e.g. or let's see some circles and place them wherever you want on the page. So let's say something like that to get some quick layouts without any colors, maybe you can use some nice easy gray color just to differentiate your elements. And then you can move from those elements to design, where you will add some colors. You will add some clear project copy clear topography. There are clear divisions with icons, with images, with animations and interactions. And then this design is what you are actually going to either publish or download as a prototype to share with your clients. In the next video, we're going to talk about components because they are super important part of mock plus rP. There are hundreds of them and I'm going to show you what they actually do and how you can utilize them in your work using more plus rP. So I'll see you there. 7. Components: Ui design work is generally pretty repetitive. What that means is a lot of the elements are repeating themselves all over the time. So if you can save a bit of time without creating those elements, every single time you start on a new project, you're going to be good because you're going to save a lot of time in your project every single time. That's where the components come in handy. And components can be super simple, like a rectangle, e.g. or they can be really complex components made out of several different elements like navigation bar, e.g. or a slider, or a shop page completed, or a checkout car or something like that. Either way, components are super useful and I really encourage you to start exploring components and start using them. Because especially with buttons, Let's say they're going to repeat themselves all over the time. And you don't want to waste your time creating them every single time. So let's jump into more plus rP. Me show you some default components which are included right from the get-go when you get started with block plus rP. So here we are inside of the interface where we left off the previous time. And here we have the design page selected. And below that we have this compost, which is short for components. Below that we have search option. So if I search e.g. a. Rectangle because I can see it, you can see the rectangle right here. So it's, it's inside of the basic and inside of the shapes, basically the same component right there. Let's get rid of it and let's go back. So basic are the basic shapes that you see right there. Let me switch to wireframe is because it's going to be much simpler to demonstrate there. So if I drag and drop a rectangle like we did previously, as I mentioned previously, you have different options for your rectangle. Right here. You can play around with the fill color, with the boiler color. You can place where you want your border to be. You can round your corners by either separate corners. So when you hover, you can see and when you change a lot, 50, you can see that this is top left corner because that's what it updated. Or if you want to add everything to 50, then you can do so right here. It's going to update, update every single corner. Then you can add that by percentage, you can add it by shadow. Or great thing about components is when I select my components, you have these extensions. So you can show them or hide them. And you have this shape option. Now these extensions are going to be different for whatever you select on your page and whatever components you choose. Same like the Properties panel itself, depending on what shape have you chosen, what component here we chose it. Obviously, you can add it to different options for every single one of them. You can change the colors, you can change the border color, e.g. then you can add a type in every one of them. But for some of them, it's going to be really specific depending of the component that you select it and depending on what that component is suppose to do. Here, what we have for this particular rectangle is the shape option. So when I click on it, you can see all sorts of different shapes appearing right here. So this is really useful because you can easily switch it from this straight corners to the rounded corners, e.g. so when I click outside of it, you can see that now we have these rounded corners. And when I go back to here and select my option, go back to my shape and switch it to here or to here. You can see that now we have these rounded corners. So if I extend it, you can play around with it and I can adjust whatever I want with these shapes. But if we go back to my default one, you can see that now I don't have them. So that's the option with these shapes. And I really like using them because you can quite easily switch between those options. Then we have e.g. the line option, which is great for line dividers between different sections and page breaks, let's say text. You can drag and drop it and type something. So let's, Let's type something. And what you can do with type is you can extend the zone where the type is going to fail to the left, right, top, and bottom like this. If you want to create a quick paragraph which is going to fill this particular space, then you can rotate your type by clicking right here. And once again, you can link it for any sort of different interaction that you want with this particular link. So you can create, let's say, hover effect on it. Or you can link it to some other parts of your design. Once again, extension has different options for the type. So you can fix position where it's crawling. You can add a tooltip or external link. If you want this type to add something else on line, you can use the Fill Color, Border color for the shape, or you can choose the typography right here. At the moment, Google Fonts and Adobe fonts are not working, but we're going to work with type in a separate lesson. So let's just move on from it. But these are your options for the type next to it, you have your image, so you can scale this image, something like this. E.g. Or you can scale it to something like this. So you can do whatever you want and you can see when I move it, it's going to show me different options. You can hold your Shift key to select different elements and move them together, e.g. so when I hold my shift key and bottom arrow, it's going to move in increments of ten, as you can see right here. And when I click and hold my Alt key, you can see the distances between all different elements and all different edges. So to add a different image, what you can do is selected and once again, under extension, because this is an image, it's going to look a little bit different. You have your upload options. So obviously you can upload from your computer and you can use all sorts of different images and upload them there. But basically, what you can do as well is use some links and copy and paste these images inside e.g. if we want to use online images, but I'll always recommend to store those images on your machine. If something goes wrong, you cannot find it online. Your Internet doesn't work, whatever, then you can just use it. Click Upload and it's going to show you. So click to upload or drag and drop it to here. You can keep the original size, but you can let more plus rP optimized death image for you. But I want to show is this, which is fantastic option they have. So this is the default style, or you can switch it to the wireframe style. So it's going to show up like this, which I really love to see. You can switch between these and your clients can easily tell, okay, so this is an image and you can see when you start stretching it, it's going to take different shapes. Let's say because this is 1920, let's position it in the centers of deaths and let's extended, let's say that this is a hero image. You can see how cool it looks like and how formed our design already is, and we just included one element. Then we have the bottom, which is probably most commonly used option on line and inside of the UI UX space. So if I switch that to 300 for the width, and let's see, 64 and a height. What I can do inside is changed the size of my font to 32 maybe. And you can see it's huge. Political back to 24 or even to 18. I think that one is good. So I can switch it to bold. Let's see. I can change the fill color to, let's say this nice blue color. Let's get rid of the border. And let's use something like a nice white color for our texts. And you can double-click to change it, to Click here, e.g. and once again, you can take it to external link. You can use a tool tip. You can fix position when scrolling. And what that does is when you select your art board, you can stretch it around. And when you start scrolling, this element is going to stay fixed, which is great usually for navigational items such as Menus. Then below that we have input. As I said, it's basically the same as button, but input is most widely used inside of the forums. Then we have text area, which is great for paragraphs. We have containers. And first one is a panel. And panel is a component that allows you to put all the elements you need into one place and use them all at once. It's a nice component that you can use to create designs like cards, e.g. or a scrollable sections for your project. Next to that, we have the content panel. And that is a component that helps you to create the effect of a tab, e.g. for content switching. And you can easily use it with subpar ports to achieve that effect if you want. And below that, finally, we have the web view, and that is a component that helps you quickly design websites. And most importantly, it allows you to directly enter a website URL to directly embed that website into your interface. So when being previewed, you will be able to interact with that embedded website as you actually do it directly online. Below that we have common components, which I really liked to call design system components. Because you're going to find these components in the majority of design systems out there. And once again, they're going to be different for whichever component you select. And they're going to give you different options on the right-hand side. So let's say app navbar. You can see how it looks like in here we have some different options. So we have icon, we have selected colors. So when you click right there, you can see what that does when you select the different option. So to swipe icon straight to select an icon in the component and click the icon you want in libraries, which is this one which we're going to tackle in the next video. But basically this is how this component works. And you have majority of them right here. Then we have the charts, obviously self-explanatory, whichever sort of chart you want to include, you can just drag it and drop it. Let's use this chart and you can play around with all of these options right here. Then we have the markup, which is one of my favorite options. Let's switch to flowcharts. And let's get rid of some of these elements. Something like this. I'm delighted this. And when I want to add something, I can double-click on my elements. Or if I select and put them in a group, when I double-click. You can see it's focusing on one element, which is the one I'm currently trying to edit. And it's going to focus now on this element. So when you're finished, you're editing, adding texts, changing colors, changing shapes, adding images, whatever you're doing when you click outside is going to go outside of the focused effect and just allow you to move them around and to select them obviously, to go back into that focused mode for editing. But going back to the markup where this is important, especially with flowcharts, is using these arrows. So if we zoom a little bit more, you have two points and you can move these two points however you want. You can see the Start option right here. So let's say none. Or even better. Let's add it. Let's add it back how it was to, to, to, to, to say, let's say this option. There we go. Then my end point is going to be none. So I'm going to use Control C, Control V to paste it around. And then I'm going to hold my shift key. And then for this one, you can see it's switched around. Start point. It put it right here, but endpoint it put it none. So for this top point, I'm going to use this circle. Let's see what it is. There we go. I'm just going to nudge it up a little bit to something like this. And now for my endpoint, I'm going to use the arrow. So you can see how simple this is. Let's say that here we have our rectangle component. Just drag and drop it inside, something like this. Let's say copy and put it right here and inside of that, I can put let's say Home page, something like that. And I can obviously reduce the size to maybe ten or something like that. And you can quite easily stretched this and show to users how to navigate your, your product or show to the stakeholders, are your teammates, your ideas, and the best approaches they can take. Obviously, this can expand widely and include various different elements, but this is just in this presentation methods that you can use. Now below that, what we have inside of the markup is a circle marker. You can use that in conjunction with the arrow. You can use the sticky notes if you want to add quick notes inside of your design or just outside of it, you can just place your sticky note right here. So when your teammate jumps in, you can say to them something like add different images that we spoke about yesterday or something like that. So you can just play around with these sticky notes and they're really useful once they are completed, you can just hit Delete and get rid of them from the page altogether and drop marker, obviously a great component to have if you're creating maps. Then below that we have all sorts of different shapes which you can use. And the Mach plus rp is including all sorts of different shapes from the very, very basic ones to the ones which are complex like this. And this reminds me of an icon and I consulted with we're going to talk about in the next video. So I'll see you there. 8. Icons: You know how they say a picture says 1,000 words. That's what the icons are for. And in this video, I'm going to show you icons, what they do and what you can do with icons inside of more plus r p. So here we are back in one pass rp where we left off. And here we have the icon. So I'm going to click right here. You can see all sorts of different options. So once again, we have the search which is separate for the icons themselves. So if I type in person e.g. you can see all sorts of different person icons. And when I drag the icon here and zoom a little bit closer, we have all of the options which we already tackled. But the great thing about this is when a drag and drop the icon right here. As you can see, it's just as quick as this, but you can change the style. So we have the tin and we have the bolt style, we can change the color. So let's update it to this color, e.g. we have the tooltip and external link. And depending of how this icon is going to prefer, we have the tune and we have the bolt. So for all of them, sometimes it's going to change drastically, sometimes it's not. But basically you can see how this looks like. Of course, you can also just place these icons wherever you want. So e.g. if we choose this component, go back to the layers and you can see that here we are on the button component. If I try to drag it inside, it's just going to place it here. So I actually would have to group them like this to be able to see this icon inside of this button. So of course you can create the different button with the icon inside of it if you want to. But now, when I start moving them around, you can see that now they are inside of the same component. When I tried to drag it, you can see that it reduces the size of all of them. And if I hold my shift key, it's going to reduce the size evenly. That's a great thing about icons. You can switch them around, you can change them. In. Here you can see we have Office chart gesture and all sorts of different categories that you can play around with it. And you can see some of them are a little bit different style. So we have the tin style right here. And if we update it and switch over to bold, you can see how that looks like. One final thing I want to note is this with the interaction. So if I click and drag my interaction to here, e.g. you can change the triggers, you can switch the state. You can change the state from normal to disabled, e.g. and stuff like that. But we are going to tackle this in one of the future lessons. But for now, I'm just going to leave you with this. So basically, these are the icons and this is what you can do with the icons themselves. And you can switch them, you can reposition them, you can reorder them, you can put them wherever you want and do with them whatever you want. And the great thing about it is all of these icons are pre included inside of mock plus rP. So you don't have to waste your time looking for these icons online and changing between different icon packs. You can, of course, a drag and drop your icons from your computer, e.g. inside of our p.sit, they're going to work just fine. But for this particular example, I like using these icons because they are already included in every single icon that you can think of is already right here. So why waste your time with searching for different icons online. Next to that, we have the assets and we're going to tackle that in the next video. So I'll see you there. 9. Assets: Having all these default assets and items inside of mob boss rp is great. But what if you want to create your own assets and you want to save them out for further use, either by yourself or with your teammates? Well, that's where the asset option comes into play. And let's jump back into my plus rP. Let me show you what that does and what you can do with it. So here we are back where we left off the previous video, and here we have the acids option. So when I select my assets option, you can see that we have three different options. We have colors, text, and components. So as I mentioned, you can create your own default component from scratch. So let me show you how that would work. And we're still on the layers, we're still inside of the wireframes are bored. So let's do just that. Let's create a button, e.g. our, drag it to something like this. So let's go with 50 maybe. And let's type in something would say, read more. Let's see. I'm going to position that text in the center of my button. I'm going to select it and use, let's say something like ten for the corner radius. Let's get rid of this corner. And for the fill, Let's go with this color that we chose right there. Then let's go with something different, like little border e.g. and let's go with, I don't know, maybe maybe 16, just a little bit different analysts call from center. And I'm going to go with bolt on this case, and let's select it to be white maybe. And then I'm going to go back to my icons. And let's see, greed. I'm going to use this icon, e.g. place it right here. And I'm going to change its color to this color or to the one we just previously selected. Make sure that these two are centered by clicking a select them and clicking right here. And then you can select all of your elements and center them like so. So I'm going to just leave it right there. It's 18 from this side, it's 21 on this side. So let's go with something like this. So maybe 20 on this side and 19 undecided. I think it's going to work just fine. So now we have these options. So let's call this BT and slash Biji to create our own button for this. And I'm going to select all three of them, hit Control G and call it mean btn, e.g. for main button. And I'm going to switch over to assets inside of the components, I'm going to click this, add components to assets. It's going to show as main btn. So main button, you can put it in a default group or create another group, changes, auto sync to all instances. An instance is basically to version of this button latent online, we decided to create maybe wider button or taller button or smaller button. That's just going to be a version of this main button. So everything is going to stay the same inside. So the content is not going to change. Maybe the colors are not going to change. Interactions are going to stay the same. Just the size is going to be different. So that's where the instances come into play. And you can change. You can sync auto changes by thinking this option across all of your different instances. And that's where this option is great. So I can simply hit, Okay. And you can see it's going to pop in right here. So here we have our main button. Inside of our default group, we have our main button. And you can see how that looks like. Now it's in the red color. And if I want, I can simply switch over, go back to different page, let's say design. Here you can see that we have a blank page and I can simply put it roughly around here. Now if I go back to my wireframes and edit something, e.g. I can double-click inside. It's going to take me to the separate page where I added my elements. So let's say that I want to change something like maybe different color to this color. Let's say hit Apply, go back. And you can see we are in a wireframe is, but if we go back to design, It's still going to apply the change because this is an instance of our main button. Even though it's completely the same, it's just a copy inside of the design of what we have inside of two wireframes. Now, because I use this color and I really like this color, I can simply double-click on it to apply. But let's say I want to select my layer, go inside of here, call it main button, that's fine. And I want to choose that color. So maybe because the color is already been added, I can double-click right here and open up the button Vg. What I can do is inside of my assets at this as my color. So these can be different colors and I can get rid of this one, e.g. or just select this one or I can double-click and call it e.g. sum. Or this can be, let's say dark gray or something like that. Switch over to sell on, hit, Apply. And then when you go back to here, you can see your colors appearing right here. But if I want to double-click and I can select my text right here. But I can do under texts is just click. And here we have the rebuttal version of this text. If you change the color e.g. or change it not to be bold or change. Completely different font, type or font size. In this case, you can simply click plus and it's going to add it to your texts. Just hit apply. When you go outside of it. Here, you can see what it does. And on great thing about it is, if I decide to choose another texts, let's say this one, e.g. and I can change it to Roboto and you can see that it updated in real-time, switch over to avoid using 16, which is what I told it to do right here. Or if we select my button hit, someone is going to apply that color. And you can see why these options are great if I choose to change this color to the dark gray, you can now see where assets are coming in handy. You can of course, use assets in various different options. E.g. you can create complete components such as, let's say contact forms. And you're going to reuse the contact form throughout your design. So having an asset of it, in terms of components, is going to be greatly beneficial for you because you can simply drag and drop it into position and you can use and reuse that component. And if you need to update it, e.g. your client doesn't like this style of icons. Maybe they don't want field, maybe they want outline. You can simply select that component to the main instance of it. Apply that change to our icon and it's going to auto sync across all of your instances and across all of your components, no matter where they are located inside of your design. So this is the difference between your assets which you created and these components. Because components are really default options that you get in more plus rP. But Assets are something which is really personal to you and something that you created for every single project that you'll work on. Now one final thing which I want to mention is how you can actually share your library with your teammates. So right here, when you hover and click these three dots, you have this Share option. When you click it, it says, I want to show, are you sure that you want to share this asset library to the culinary team, you say, okay, because you are part of that team, remember, when you go to the homepage and there you will be able to see it. Now we have this linked option and we have this option. So when I click right here, you can see library, our first project, which is our library. And if you are a member of some other teams, are e.g. in your team, there are some other libraries that you are a part of. As a team member, you will be able to see them right here so you can easily switch between them. But because we only have one which we just created, That's the only one which is shown at the moment. But remember you can have unlimited libraries right here. So e.g. in one library, Let's say that your teammates have created a color palette that you're going to use. Other library is e.g. graphical elements that you're going to use for, let's say collateral or branding work or something like that. Then in some other libraries, maybe there are some images that you're going to use on your website. So this is a great option to have because you can easily switch between all those libraries. Take the elements that you need from them. So when you click on them, the elements inside of those libraries will be presented right here. You can easily drag and drop them onto your page, e.g. if we have different components, Let's see different buttons or input forms or something like that. Or if you want to use different text styles or different colors, all of that will be presented right here. And great option, as I said, is that shared function which you can also unshare if, let's say e.g. library is not finished at the moment and you're going to finish it at some other time. And then you can reshare it once again with your teammates, you the next video, I'm going to show you a little bit more information about Properties panel and what it can do. So I'll see you there. 10. Properties Panel: We already tackled properties panel in this course, but I'm going to tackle it a little bit more and just show you some a bit more options that I didn't mention in the previous videos. So let's jump in. So as I mentioned, Properties panel is right here on the right-hand side. So no matter what you select, it's going to change and update in real time. But what I didn't mention are these options right here at the top. Here we have aligning options so you can align your objects relative to the art board where they sit inside. So e.g. if you take this object, put it outside, selected, obviously it won't know where to align it for. So it's going to just tackle your art board and it's just going to aim for your art board so you can position it left to the center horizontally, right? Or you can position it to top. Line mode vertically or bottom, then you can spread apart your items. So this is great. If you have multiple options like these, e.g. then you have these. So you can distribute horizontally. Watch what happens when I click this is just going to make sure it has the same spacing between my icons. Or you can distribute them vertically. If they are located like this, you can select them and you can click this option and it's just going to place them right here. But if you want, you can click right here. And that's going to organize them really neatly and position them however you want. But let's go back a few steps and let's position them how they worked previously. Because I want to show you this option so you can place them right here if the icon is taller, e.g. it won't be with these default ones, but if you're using your own, but you can do is simply click right here. And then when you hover, you have these options, which is great if you want to increase the spacing between them. And obviously auto adjust between all sorts of different options. Now, when you select ones, are, when you select multiple ones, as you saw, it says three components have been selected. Or let's say two components have been selected. One, a default 11 which I created e.g. and then you have these options. So this is to hide it. So it's still here so you can see what it is. But when you go to preview it, It's not going to be visible. This is to disable it. So it's not going to be able for your users to click e.g. and then you can lock it or unlock it, and then it's not going to be able to move, they're not going to be able to select it and stuff like that. You have the smart layout. So when I select this and go to smart layout, you can choose auto or manual. You can use fixed width, e.g. or fixed height. You can check or uncheck boat. So when I start dragging, it's just going to keep the fixed height, but the width is going to be different. Or you can go the other way around. So you can see, I cannot change the height anymore. Sorry, wait anymore, but I can change the height in this case. And you can choose where your items are going to stick to. In this case, they're sticking to the left-hand side, but you can switch it to the right-hand side and you can see they're moving to the right now. But in any case you can use auto and you can adjust however you want and let mach plus rP do its magic and applied from there. Here we have the width, we have the height, x axis, y axis, and then we have the rotation. So e.g. 45 degrees, you can see what that does. And these are the advanced options for horizontal space and vertical spacing. So when I select these ones, you can see right here that we have horizontal spacing, but if we flip them around, you can see that then we will have vertical spacing. What we also have inside the Properties panel for most of the objects are shadows. So when I click shadow and typing something like, I don't know, 6.10 or ten. You can see that now I have the background shallow included here. I can change that channel by clicking here and changing its alpha value, which is basically its opacity value. Here you can change the colors so you can choose whichever color you want. But I'll just go with the default black in this case, maybe something like that. But alpha, obviously it's just too strong. Maybe ten per cent, it's going to lower that down just nicely. But because this is selected, I'm just going to uncheck the shadow for it. And then when I select everything, it's just going to work like it previously was. So when I increase this to 20, and I have to select this and uncheck the shadow once again on it. It just going to have the shadow on the background of your elements. Fixed position one's crawling is great as I mentioned previously, if we have e.g. navigation right here at the top, you want to select the entire navigation. Let's say that this is our entire navigation, something like this. So when you use a start scrolling and your art board expense, by doing this, it's going to stay into that particular position and it's not going to move at all. Once again, based on whatever you selected, you're going to have different options right here. And we already tackled that in previous videos. So I'm not going to spend too much time on it because I want to move on to the next lesson, which is interactions. It's located right here, and I'll see you in the next video. 11. Interactions: Having a static designs is just fine, but when you add interactions to them, it just brings a bit of life to your designs. So that's where interactions panel comes in handy and it has some great options inside ma plus rP. So let's jump inside and let me show you what you can do. Alright, so here is where we left off the previous time. And let's now talk about interactions. Now. Basically interactions are located right here and it's what happens between two elements or two airports or on a single element where you want to add some sort of animation just to show what will happen when the user interacts with that particular element, you can see what it says right here. You can select a component or art board and click Add interaction to add different interactions. Or you can drink a link point of the components to any target component or a page. Now, that link point is what it says right here. So this is this red dots and basically you can point it to self, you can point it to other elements or you can point it to other airports, even other pages if you want it to interact between this particular page or airport or some separate page or RPA. So basically when you want to add different interactions, you can choose targets. So you can choose between components and you can choose between the pages. And you can change it to e.g. self. And here you have the triggers. Triggers is basically what will trigger it to have that interaction. So what sort of trigger that the user will do, will trigger this interaction to actually start and to actually happen. What we have right here, our double-click, right-click mouse down, mouse up, and all sorts of these different triggers. Then we have commands. Once we actually have the trigger, what will happen? So then we have the Move, zoom, rotate, Show, Hide, scroll. So these are just some basic commands, but we also have some more advanced commands later. Then we have a relative value. So if ticked more relative to the position, if untapped more to the specific location. So if more to this specific location, then you can use x and y values to position it to that specific location. After that comes the easing. And that basically is how this interaction is going to look like. Is it going to be strictly from point a to point B? Or is it going to be a linear? Is it going to have easing, easing out? What that means basically is, is it going to ease in a nicely into the animation? Is going to easily nicely out of the animation? Or is it just going to be straight from point a to point B? During this interaction. After that, we have duration. So how long this interaction is going to take place? And then we have the delay at the end, delays basically what it says. So after I click this or after I give it some sort of a command, doesn't have a delay or does it happened instantly? So that's where the delay comes in handy. So let's explore our perfect example with a basic hover state. So here we have the button that we previously created. And to explore this button further, let's double-click on it, and let's jump inside of here. And let's select our button. And here what we have is the state bowel. So here we have all of the pre-made states that MC plus rP wants us to include. Of course that's all. If we want to. If not, you can click Add a state like we already explored previously, and then you can add a custom state of your own. So here we have all of the states that are usually used in the UI UX design. So we have the normal, which is just this basic state without any sort of animation to it, we have selected. So usually on selected states you want your users to be focused that they understand that they have selected some element. We have the disabled state, which is basically they cannot select it at this point, usually because they have to perform certain operations to be able to select it. So that's where the disabled comes in handy. We have the mass horror. So what happens when I hover my mouse over? It isn't going to change. And this is especially useful because we want our users to be able to understand that they can do something. And mouse hover is the perfect option for them to grab their attention to be, to actually be able to do a certain task. Finally, we have depressed. So what happens when they click the button, when they press it? What's going to change? Let's go to the mouse hover. So when I click right here, it's going to edit this mouse hover specifically. So let's change its color, e.g. let's switch over to Properties. Now let's select the fill color and let's choose a little bit of a darker color. So e.g. something like this. Because I like this color, I'm going to add it. We are on the mouse hover state. So I'm just going to add it to my colors right here. And I'm going to double-click and call it e.g. hover, something like debt. And then you can go over to interactions if you want to. And when I switch over to normal, you can see that we have this color. When I switched to mouse hover, then we have this column. So you can quite easily switch between these. And you can hit apply to apply that button. And to do a quick preview, I can click right here. And when I hover, you can see the changes, the color. To the hover color that we actually created right now. Okay, so let's try to connect this to a separate art board, e.g. so let's add a sub R part. And let's create it right here. So, oops, not that. Let's click the arrow and zoom a little bit. And let's add a different sub art board. Let's go to Properties. Ellen's go to 1920 by 1080. So it's selected to be the same. Or let's see, this one is 1080, Something like that. So we have the sub R port right here. And when I click right here, it's going to link to this art board. So it's going to show our port. You can position center, you can animate none. And let's say, let's say slideUp are fading even better. You can show the mask and the mask easing is going to ease in, out. So ease into the animation is out to the animation click, Okay, now inside of this sub R board, but I'm going to do is switch over to Properties. Hit T for the text tool and type in something like Here is your pop-up window, e.g. and obviously let's change that to something a little bit darker, like maybe dark gray color. Let's switch it 16-45, something really huge. And let's position it to the center of our page, something like that. So when I go back to here and preview our prototype, so I unclick, it's going to show, but as you can see when I click on it, nothing really happens. So what to do in that case, I want to click to close it basically. So what you can do is go back right here. You can double-click, and here you can see your options for edit. Under commands, you can see these three dots. Hit Edit, alright, here, and here you can see Show mask and click mask to close. Click Okay, go outside, hit refresh, and let's try that one and see if that works and does the trick. Once it loads click there and it's going to show the mask. When I click on the mask, it's going to hide it. So once again, click right here is going to hide it. Once again, this is great, not just for the pop-ups, but let's say for the subscription modules are for the e-mail modules or Sunday like that. When you just want to show a quick information, it doesn't have to be full screen. Remember I created it to be the same size as this art board. It can be in the center. Those are interactions. You can see that you can add interactions, two separate components, or the entire airport. Or one thing I didn't mention is you can even link these two separate pages if you want. So you can just drag that little red handle to the separate page that you want and you can link it to wherever you want, something like this. So when users click on it, it's going to take them to the design. You can see page jump. So you can jump to that page, you can animate it. You can see wherever you want and do with it. Same like we did an explored previously with these options. So that's interactions and that's what the useful for. In the next video, I'm going to show notes. So I'll see you there. 12. Notes: Notes are great if you want to add nodes either to your teammates or to your clients, just to let them know about the page they're looking at and what's included inside. Okay, So here we are back in our file and nodes are located right here. And you're going to notice that my wireframes is selected, so it says page notes and I can add something like e.g. these are just wireframes. And when I hit Control S to save it and hit preview, it's going to show me the page note right here. Now if you have multiple nodes and let me show you how that works. So e.g. if I select this and just make a few spaces below, paste, paste and pays e.g. hit Control S hit preview one more time. It's going to show me those multiple page notes. Now, you can clear all the nodes right here. You can simply hit Delete on your key, or you can simply select it like this. Hit backspace and delete all the unnecessary nodes that you want. Now, those are the page notes. You can also add notes to different elements of your pages. So e.g. if I select this button, this button, you can see that here we have the component and here we have the group because that's the group name. So if I select this component, let's say e.g. do you like this icon maybe. And then I can select the texts. Let's say it says something like, do you think that this size is too small or something like that? So you can see how this is really useful. So when I hit Control S and preview it, once again, you can see that now we have multiple elements, so we have the page notes. So this is the node for the entire page. Then we have the main button. And when I hover, you can see the number of one and here is the number one are located right here. And then here we have one for the type. And it's going to show number two next to that type so that your clients are teammates. Know what is this note about? So here we have the page notes about the entire page. Here we have the main button about this button. And finally, at the type about this type or located in the wireframe. So when I switch over to the design brief, e.g. you can see that it's blank and we don't have the notes because the nodes are related to your pages. In the next video, we're going to talk about our ports and airports. What is the difference and what you can do with them. So I'll see you there. 13. Artboards And Sub Artboards: We already covered so much about art boards and subpar ports in this class. But I just wanted to show you one other example now with the mobile app, because this class is primarily targeted towards websites and those kinds of sizes. So I just want to show you this one as well and what you can do in this case. So here we are back in a mole plus and I opened up to Joe, Joe go UI kit, which is this UI kit. And to open it up templates, you can simply open up, hit, Edit, save, and then choose which team or personal space you want to save it at. And it's going to open up like this so you can switch between all of these different pages right here. I'm currently at the login page, and I quickly created this sub art board by once again clicking this button right here. Now, I already showed this example, so I'm not going to go into too much details, but when you click right here and connect it, you can click, show our port. You can position it where you want to solve, let's say bottom in this case, slide up or fade in or zoom in or whatever you want. You can click must-do close. Same like I explained in one of the previous videos. And I just placed a bit of a longer easing in this case. So this is how it looks like when you click the button, it's going to show it when you click outside, it's not going to show it some. This is great for prototyping for obvious reasons because you can show to your clients what you want to show with these error messages, e.g. and stuff like that or with your teammates to explore it a little bit more. But different here is, we now have the device mock-up and we have the device frame in this case. So you can quite easily show this to your clients. And it's iPhone because this size of the artboard is the iPhone size. If you choose some other size, then it's going to show us that different size for that particular project. But every single page is in debt, iPhone size, whatever I tried to preview, it's going to show me in that size. One other thing which I wanted to show you is when you select your art board, once again, you can set the smart layout, background color, and stuff like that, but you can also flip it. So if I choose to position this just a little bit further up, and then select this artboard and flip its position. You can see that you can quite easily change it from portrait to landscape mode. Just by clicking this button is going to retain the same dimensions, is just going to flip them for the width and the height. So that's basically all which I wanted to show you about our boards and sub airports. And that's the only thing I figured that we didn't touch upon an already, I showed you how to use these free templates. Once again, if you want to access the templates, you can simply click right here, click templates. And it's going to take you to this page with the templates that you can edit any one of these templates and adjust them however you want. You can see how many pages and elements they have, how many colors, and you can go ahead and change and update those as you choose. In the next video, I'm going to show you some type options and how to work with type inside of mock plus rP. So I'll see you there. 14. Working With Typography: Typography is a crucial element of any UI design out there. So knowing how to work with type, especially mock plus rp is really important. So in this video, we're going to tackle some basic type setups and basic elements. How you can work with type and how you can work with it inside of our p.ball. Let's get started. So here we are back in our trusty old wireframes. And when I select this type or I can delete it, hit T on my keyboard click and it's going to place that type something place holder. Because already created this, I can apply that to my type and you can see that it changes the color. And I can switch that fill color to something like dark black or something. I can always go back and click here. And now it's going to give me those different options so I can switch between light and dark by a click of a button and it's going to retain the same setup, same positioning like that. So you can also go to Components and drag and drop the Type option right there if you so choose or just hit D has already explained, and then you can play around with to type. So what are your actual options? So here we have the font family. So these are font families currently included, but I'm speaking with the team in the future updates, they are going to add Google Fonts and Adobe Fonts hopefully. So you're going to have much a bigger variety of your fonts. And the custom upload of your custom fonts option is going to be down in the future as well, but these are your options for now. So when you select your font family, you can select various different sizes from these predetermined sizes. Or you can change it by simply typing whatever you want, whichever size you want. Then we already covered the color and how color works in more parser p. Here we have the bold option here we have the Italic option. Here we have the underlying option. If you want to add the underlying, we have the strikethrough, and here we have character spacing. So it's just the spacing between the characters. So if Rights Act 20, you can see what that does. Here. What we have is, if I increase this to, let's say 80, nothing really happens because that's the space in-between two lines. So if I type something, placed that on a new line and bring it back to 56, you can see how that works. And if we bring it back to 36, you can see how squashed our type actually is. Below that, we have alignment options. So we have aligned a left align, center, align, right align, justify, which means that both sides are going to have the same values and the same width. In this case, this top value is going to be different. Guatemala going to be different, but if you justify them, they are going to be exactly the same. Here. Uppercase. So everything's will be uppercase, lowercase, or title case. So every single word is going to be a just like that. And if you don't want, you can just click and it's going to de-select it. Here we have text indent, which is great for paragraphs. Obviously. Here we have vertical text indent. Here we have numbered list, and here we have bulleted list. Once again, click to deselect it. What we have right here is auto width, which is the width of your text included. Here we have auto height, basically the same thing, and here we have fixed size. So when you check that, it's not going to go outside of that fixed size. So let me go with auto width. So whatever I'm typing, I can adjust it and type something new on the page. You can see that because it's a width is going to scale automatically. But if it is a fixed weight, e.g. like that, something new on the page which you can see it's placing it on the new line in place, something like that. So I'm going to go with auto width and I'm going to get rid of this text from here on out like that. And I want to show you some additional options so you can have the fill and watercolors. You can add border around your text. You can add separate fill color if you so choose. And you can just curve these corner edges if you want to, but I'm not going to recommend you do that. For the extensions, we have fixed position with crawling as always, we have the tooltips when you hover you can see what it is. And finally we have external links. So when I add that, Let's say google.com, e.g. hit. Okay, and you can see that it added a link. So when I hit preview really quickly and then go back and see type something, when I hover over it, you can see that now we have the link when you click, it's going to take me to the google.com. So that's basically the type in a nutshell. What I want to show you finally is, let's get rid of this external link. When I hit Control D to duplicate it a few times, you can see that the spacing option appears, it's 19 at a moment, but let's say I want to go with something like turbine T. Maybe there we go. Here we are. And now when I hover right here, you can see that now we are at 20. Also wanting, I want to show you is these options would work exactly the same for shapes as for the text. So when you want to switch them apart, you can do so. You can position them however you want. You can space them out, distribute them with them, whatever you want. So I'll show you how that works if I can grab and select all three, something like this click here. So basically the same thing as with the shapes. You can hold the Shift key and it's going to show you the same spacing between your elements. So that's the type. Basically, in the next video we're going to tackle premium mode. And I'm going to give you just a little bit more information about it than it did previously. So I'll see you there. 15. Preview Mode: Preview mode is where you see your prototypes and how others from your team or people who you invite to view them can see them. So it's really important part of more plus r p. So let me show you how it works in a little bit more detail than I did so far. So if we go back to here, Here it is, our preview mode. So once again, you can click and start from homepage or start from current page. Homepage in our case is flowcharts because that's the first page in the list. Or you can start from current page. You can choose that by hitting Control Command P. Now, when it launches, as you can see, it loads because it has all sorts of different options. And it started from this page. We already explained the page notes. And here you can have the Zoom so fit the width, fit to screen, something like that. And here you can have the full-screen, you can exit it as I already explained. And you can hide these panels if you so, choose. When you hit Share, you have show Control Panel. You have all of these options. So when you actually share this preview link with somebody else from your team, you can actually choose what you want them to see. And this is really important for one simple reason. When you're sharing this with some user testers, you want to be able, for them to be able to test your prototype, but not give away too many options. And nuts, basically hold their hand while they're doing this because you want them to figure out things by themselves where they need to click, where they need to show. If you're timing these interactions, you want to be able for them not to get any help, but to manage on themselves. That way you're going to be able to measure what they're doing. And for that, this settings is really important part of it because you can show or hide control panels. So when I click right there and click copy e.g. and open up a new tab, hit Control V, paste it in inside. This is our new tab, and you can see that they don't see anything. So they will have to manage for themselves because we purposely closed it from right here. So she'll control panel. You can show link area on mouse hover or don't figure out for themselves. We're showing carrier show content outside art board shall not markers set password, and stuff like that. So it's really important if you want to dig a little bit deeper into sharing, to explore this option as well. So when we go back to here, we have more options. So always showing carrier, basically what we saw right here for the sharing. But this is what you and your teammates and the project leaders, e.g. is what's what they are going to see right here. So that's basically it for the sharing. In the next video, I'm going to explain in this download prototype option what it is and what it is useful for. So I'll see you there. 16. Downloading Prototypes: Sometimes you want to download your prototypes from Mach plus rP, sharing them with teammates, with clients, and don't want to upload them and publish them just yet. Maybe you are under NDA. Maybe you don't have internet access. Maybe you're traveling somewhere and you want to have just those prototypes. Think about them to review some notes that you've got. All sorts of these different scenarios and deaths were downloading option comes into handy. Let me show you. So here it is, right here at the top, you have this download option. So you can download offline prototype presentation package. And these are the key phrases right here, presentation package, this is used for presentations. So when you want to present this offline, when you are on the go, perhaps you are on your laptop, maybe you're traveling, maybe you're going to the place of business or for your clients. There are various different options and scenarios where you can use something like this. It's super important to do this because you always want to have a backup. It's great to have it in Cloud, but sometimes people may not have the access to the Internet. Maybe you are just there. So why would you take them to the Cloud when you have the option available on your location, e.g. maybe you want to share it internally because of the NDAs, as I said. So there are really few scenarios where you can use something like this and it's really useful. So all you need to do is click right here. It's going to show you a page range. I'm going to select the Paint rage and I'm going to select my shop desire so you can uncheck what, check what you want to do. I want to explore and exploit both of them so we can simply select all. You can see that two of them are selected. And you can see page range all because I have two pages inside of my folder. You can show page panel, you can show northbound, show toolbar. You can show links to all of these settings that we spoke about and hit. Okay, once you're ready to download, It's going to take a bit of time to download. And depending of your machine, depending of your project. So e.g. if you did an optimize your images, it's going to take a little bit longer. If you used various different pages, is going to take a little bit longer. But in this case, as you can see, it exported really quite quickly. So let me just drop it into a folder. Now let me show it that folder, how it looks like. So there we go. We have this option for a zip file, right-click. And I'm going to extract two here and hide this just so that you can see it a little bit better. There we go. And it extracted these assets solid and get rid of this zip file. Actually. Get rid of it by hitting delete. There we go. And here we have all of these assets which are included by default for multiple SRP. Then we have the data options, which are all the images which are included inside. And obviously it's really important that you name your layers. Otherwise you're going to end up with a results like this. But basically it just export them like placeholder files when you actually share this with your developers, it's going to keep those layer names that you posted. Finally, we have the index page, double-click on it and it's going to open up as a new page and you can see what your users are going to see inside of, let's say, presentation package that you want to show them. So they have all of these options which we spoke about previously. If you want, you can include some nodes right here. You can hide these panels. You can show these panels. You can do whatever you want and let's just explore them one last time. There you go. It took us to this page. Hover effects still works. This still works. So everything is like it was right here, but it's just a portable and more, let's say version where you can take it wherever you want because you have it stored on your machine. And that's why downloading prototypes is such a cool option. I'm going to like it and I recommend you guys use it all the time. Seem like I'm doing as well. 17. Publishing Prototypes: Once you're ready to publish your prototypes and move them outside of your hands into the wider organization, e.g. or just share them with your clients, teammates, stakeholders, investors, whoever. That's where the publishing prototype option comes into play. And it's located right here at the top right-hand corner. But maybe we can play around with some settings. Maybe I can adjust this and please sit to go to flowcharts page jump animate. Let's go with non easing. That's fine. So I just want to be able to animate to that page and you can see when I select it, it shows that it animates towards the flowcharts. So now when I select my wireframes, let me hit Control or Command S to save it, hit Publish, publish to mock plus Cloud. So you can see anthropologist plus Cloud for instant online collaboration, handoff and layer data check. You can target Cloud project, project sample one, e.g. or you can create a new one. Our first project location. All hit, Okay, hit Okay, and it's going to publish that project. Now once again, same liquid, all this other stuff. Depending on how big your project is, how many images you have, how many icons you have, it's going to take longer or shorter. So depending of your project, That's how long this project is going to take N, especially how fast your internet is. So you can view your project because it's published successfully, as you can see. And it's going to take you to mock plus Cloud. Now, here it is, our new project pages. You can view details and basically you can solve what we created already here are all of these elements, wireframes, stuff like that. So you can get the code right here for development. So you can switch that. And it's going to show the quotes or whatever they select, e.g. this image is going to show me the CSS, Objective-C, Swift, and Android. And that's great because you can switch for different platforms. You could go fullscreen collapse, preview, and now you can download this as separate option. You can go into presentation mode if you want to present this to your clients during this development process. So whatever you select right here is going to narrate and show. So e.g. here we have this option that we already chose. If I click here, it's going to take me to flowcharts, e.g. so we can present that comment mode. So that's great because let's say I want to add a comment here, maybe change this color to blue. Let's say. You can try and labeling comments. You can hit control enter to share this comment. So you can change this color to blue. Okay? So when I hover and click, if I sold it, I can resolve it. And it's going to disappear. But if I didn't resolve it, I can always go back. So bad color, you can change it. And let's just actually do that really quickly. So change this to blue, Let's say, shared it. There we go. And now you can see that we have this common. So whoever comes right here can hover, can click and see, change this to blue. Okay, it will be done. There we go. Control Enter to serve. And I'm going to be notified back in my project that somebody commented. I can see that comment. Then I can see what to do. And if I did it, I can reply back to them. But the review, they can review it, they can come intent. And there are all sorts of different options that they can do with it. E.g. if you hover right here and click on the Select, you can see that you have the select tool which allows you to move these elements around. And basically to select specific elements. You can select the text and annotate dead. You can coordinate markup. You can do a spacing markup, and you can do a region markup if you want to mark up some region of your design and be extremely specific about the changes that you want to highlight or about the changes that you want to highlight that you did previously. They haven't reviewed yet. They can also do that same thing to you. So basically they can jump in right here and say e.g. if I go to select and do the type, let's say, then they can annotate that type and say something like e.g. this topography is too big or it's too dark, you can change it to lighter, but they can be extremely specific about this section of your design and about the elements in your design that they want you to change. If you go back to here, you can edit this project or view the details. And if you want to view all airports in one screen, you can enter storyboard. It's going to show you all of your airports into one screen. You can click and double-click the pages to add comments and check specs. So that's what I already showed you, or you can go back to the prototype list. So basically, that's how easy to publish your prototype is. And one final thing, you can also share it, private share, public share, or embed project if you want to copy the code and embedded into the separate website, e.g. publisher is great if it's not under NDA or if you want to get some additional external feedback or private share, if you want to privately share it inside of your team. Also invite your pardon, to become a project member if you want to add it to your project or if not, you can simply copy and share this link with them. My dad. And when I open up a new tab on my machine, hit Control Enter. But because I'm already logged in, is just going to show me a diluted version like it is. But basically this is something which they are going to see. They have the design, they have the task resource style guide activity, all sorts of different things right here. But that's basically how you share your prototype and how you publish it. And it's really important that you do because you want to get additional feedback on your design on every single project that you do and not pass RP combined with mock plus Cloud gives you this great option to do so. 18. What Are Templates: Templates are a great way to jumpstart your creation process because you are UX design is nothing but a repeating tasks all over the time. If you think about it, you're creating these buttons and these elements all over again. So why not choose to use a template somebody else has created, or you can create a template of your own and just reuse some of these elements if you choose to create really separate and delicate elements. Most of the time, that's what's called design system. And then you can choose systematically to use those design elements across your designs. Like buttons, like time pickers, like inputs and stuff like that. But in this part of the course, we're going to talk about templates, which are complete layout, finished layout so that somebody else has created. And you can simply drag and drop some of these elements of these templates to create your own custom layouts. From there you can add your own colors, your own typography, your own images, your own copy, and you can really personalize it to your particular project. You can also change the logo, e.g. for the client that you're working on at the moment. And you can really make this template custom to yourself and the project that you're working on. So basically, those are the templates in a nutshell and the hole and main point, why would you use the template is to save a bunch of time because as I said, these elements are repeating themselves all over again and all the time on every single project. So why not use the power of mock plus rP and the templates that it provides. Because all these templates are free after all, and they're super easy to use and that's fine. I'm going to show you in the next video. So I'll see you there. 19. Choosing The Template: In this video, I'm going to show how to choose the best template which is going to work for your particular project, where to click, how to do it and all of that good stuff. So let's get started. So here we are back in our home page, in our starting page. And here we have the option for templates. And throughout mock plus rP, you're going to be able to see this option for templates later on. I'm going to show that as well. When you open up the interface itself, inside of the interface, you can open up templates directly from there. But here inside of our homepage, this is where they are located at. So here we have samples and templates. All design resources are fully customizable, reusable, and scalable. Which is really important because as your business scales, as you add more screens or more pages or whatever, then you're going to be able to scale them up. Then we have these categories. So you can like some of these templates. You can just click right here on this heart icon and it's going to be added to my legs. You can click on the media and it's going to sort through different media pages, e-commerce, travel, social tools, management, Food, News and UI kits, whatever you want. Now, UI kits are especially important because they're really useful because they are created with the scalability in mind. What that means is you're going to get bunch of these different components which you can use as they are in your design or you can adapt them to follow suit your needs. So e.g. you can choose to use one element of a UI kit, add rounded corners to it, add backgrounds, shadows to it, and really customize it to fit your brand and what you are trying to achieve with your design. Or if you want, you can use it as it is and just replace the colors that are placed the copy perhaps add some new images. So it's really all up to you and how you want to customize these templates to fit your project the best. So if we go back to all what I wanted to show you right here is new and popular. I'm going to go with, let's say popular. And I'm going to go for, instead of for all devices, I'm going to choose between mobile and websites. And I'm going to choose websites in this case. So it's going to, because I'm showing all right here, it's going to show me all sorts of these different options and templates. And you can see how each of them is organized, how each of them is structured, and there is really a bunch of them to choose between. Now, what you can notice right here is we have wireframes, we have templates. And the main difference between the two is images. Inside of wireframes, generally, you don't see any images. While inside of templates, you do. So it's really all up to you how you want to present this, because wireframes are best if you want to quickly create some sort of layout and just test a few ideas that you have. Maybe get some additional client feedback at the start to the project may be explored how things are going to be laid out on the page. So perhaps you can work a lot faster if you're just working with wireframes rather than with images. Because sometimes images can be a little bit confusing, especially if they don't work with the niche you are in or your client is in. Therefore, in my opinion, working with these wireframes is much better, especially at the start of the project if you already have your images and you collected them into a folder, e.g. then you can even choose wireframes and upload those images that you have directly into wireframes and then just switch the colors later during the design process. But it's really all up to you and how you want to structure your workflow when working with these mock plus rP templates. So as I said, these are the wireframes. If we scroll a little bit more down, you can see some of these have images prepared already, and let's open up one of them. Let's say this one, e.g. and if we scroll down, you can see it says shopping web UI kits. So you can see it's inside of UI kits, mock plus shopping web UI kits. And we have a bunch of these different options right here. Now, on some of them, let me actually show you those. Let's say this one. You can see that these are the pages and it says 19 pages in total. But if you count these things right here, it says nine because these are nine folders. Because the team that created this, and you can see it's more PaaS team that did this. They put all of these pages into separate folders. So they have few home options, they have few product filters options, they have few login options. And that's how you get to this 19 pages in total, which is really useful when you're creating different versions of your pages. So e.g. your client wants to see how the little shopping cart is going to look like when they fail, or when the card is declined, or when they fail to enter some information, or when they completed the whole checkout process, how that's going to look like versus when they don't. So you can really see why these folders are really great option to have in sudden mock plus rP on this next one, you can see that we just have these different styles. So you can choose any one of these styles. You can customize them, adopt him however you want. So that's the difference between just plain pages. And folders on specific pages and different versions of specific pages. So basically you can scroll right here and you can see that they have 19 pages. It's an RPI file, so it works beautifully in what plus rP. And you can see some further description right here below. So what we have is a template with 20 plus screens, 30 plus components, which is great because we can reuse those components a little bit later. Help you create different commercial shopping websites in minutes. All necessary key pages like homepage shopping and so on. And components like buttons, sliders and more are packed and fully customizable, which is great because you don't want to waste too much time, does the whole point of templates and why you will use them to save you a bunch of time. So what we can do right here is I can click to 50% just to see how it looks like. I can fit two width. I can fit to screen, go to 200 per cent just to see the quality of it. Go back to here. Or I can click right here and hide these if I don't want to see them. E.g. I don't want to see these notes panel, so I'll click right here, is going to expand it. Or if I want to quickly hide this and see it in, let's say fit to screen. Now I can see how it looks like onscreen. So that's why these are super useful and super important. Let's go back to 50% or something like that. So to finally wrap this video up how to use a template like this, you will just hit edit and save. So when I do that, it's going to take me to a new screen. And you can see that you are viewing this sample project in mock plus rP. Click to save the project in the current team. So why this particular bit is important and useful. Here, you can get a full preview of how everything looks like inside of plus rP. So here the preview was on the website itself, but here is how it looks like directly in the mock plus rP. So what I can do is go back where it says pages right here and open up some of these pages so I can click right here to open up the menu type to manually type one, type three, there we go. And I can quickly scroll between these, but I'm not editing them at the moment. So this is how they look like. I can switch between them. So 12.3, you can quite easily see what's the difference between these types. Or I can go to the homepage and select e.g. fashion home, how the furniture home like that. So this is how all of these look like and you can quite easily switch between them. You can hide them, you can show them. And here we have these separate artboards. Artboards showing us how this screen looks like e.g. this is our slider. We can choose between these different slide options and we can choose which ones we want to integrate. So to be able to use this template in your projects, all you need to do is no matter which page you are in or which folder urine, you can just to save the project in current team. So what you can do is choose between personal space or your team. I'm going to choose the team in this case, because later down the line, I might invite some other teammates from my team to help me add it, these templates and to help me evolve this design into something a bit more advanced. And finally, what I'm going to do is hit, okay. Now you can choose a different project folder if you created one, I didn't on my homepage and you can see right there. So I don't have any folders created, but I can create new project folder really easily and quality e.g. fashion website or something like that. There we go. And it's going to be located right here. So when I close this click to save team, fashion website kid, okay, and it's going to save it inside of that folder. So when I go back to here later, it's located inside of this website and it's not going to clutter my homepage at all. So there we go. Now that we open it, we can edit it, and that's what we're going to do in the next video. I'm going to show you how to make some edits, how to make some changes, how to adjust these and make them fit your brand, and how to actually start a new page and start building from scratch, but using templates. So I'll see you there. 20. Customizing The Template: Now that we chose our template, what we want to do with it, It's time to customize it and to do so, it's super simple to do a mock plus rP. So let me show you what we're going to do with this particular template and how we are going to adjust it to our needs. So let's say because this is a shop template that we are going to use the shop elements for it and we're going to create our own shop, so to say. So when I select this, you can see it's 1,600 by 798. So obviously we will create an output like that. But before we move on to it, Let's first create our group. So when I click Create Group, it's created a group right here. So I can move it right here, or I can move it one level up, which is going to basically nudge it outside. Right-click, move up. So it's going to put it to the top. And I can say something like my design or shop design, something like that. Inside of that, I'm going to create a page and I'm going to call it home page. And you can see it's 1,600 by 1080 because it's, by default, the width is what matters, the height. It doesn't matter too much because as you can see, it inherited those types of elements from this particular page in this particular group, like e.g. our port width and height. So what we're going to do in this case is switch over to the Layers panel. And I'm going to say something like content menu that's deleted. Editing the component will detach it from the assets or you want to show you want to continue. Let's first explore this group and see, so we have some icons inside. So basically it's for the content right here below. But what I'm interested is basically this menu. So double-clicking on it, detach it. Yes, ungroup it. And what we have right here are all sorts of these different elements. And let me move this down a little bit just so I can see it a little bit better. What I'm interested in is this group and is this rectangle. So when I hide it, you can see it takes to complete width of it. What I'm interested in is let's first group ID, so Control D, e.g. and I'm going to call it Top Nav, BG. So Top Nav background. And I'm going to reduce it down into size to something like this. So far, 71 or let's go with 72 soft round number. And let's go back to the top. Let's extend this a little bit just so we have a bit more space. What I'm going to do is first of all reduce its opacity so we can see the stuff behind it. So let's go back to here. Let's go group. What is this group? Yes, this is what we are interested in some NAV or top nav items. There we go. And inside of this top nav items, what we have is our logo, which we will replace if this is an actual project. So we have these three icons like that. Then we have our menu items and we have the rectangle, which is the oral background from this project. So if I close it top nav items and move it straight to the top. So something like this. There we go. So we have talked enough items and we have Top Nav be G, which we just created. Let me drag it into that group. So let's open up the group. Let's try to move it. Or even better, maybe we can ungroup this like so. And then select this, hit Control G and call it top. Now, what I'm going to do is hit Control C and then go back to my pages. Select my homepage, hit Control V. And you can see that it's pasted in right here. What I'm going to do first of all is jump inside of here. Select this text where it says Assets. I'm going to add it as my texts. So you can see that this is the font, this is the size. I'm going to go ahead and straight at it as a color. It's pure black, so I don't really like UPS, I don't really like that. So let me select it and let's change that to something a bit more realistic to something like this. I'm going to add it as my color. Get rid of the pure black. Select this one, apply the color, apply the color. There we go. And for these particular icons, I don't really like this color. So let's go ahead and change it to something nice and vibrant. Maybe something like this. There we go, I like it. So I'm going to double-click right here and call it text color, just so that I know where it is. And this is my icon color or my main color, or whatever you want to call it. So we can go and apply our icon colors so you can see straight away that we achieve a look that we want. And I'm not going to bother with the logo too much, but all you need to do is simply look at the dimensions. So 136 with 36, you can have a little bit different dimensions if you so choose, but it's best. A result to use the dimensions that they already used, all you need to do is head on over right here where it says Upload. Click Upload, upload your own logo. This time in PNG format e.g. might work just fine. And simply upload it to there once we're ready with our top menu. And when I switch over to the layers, you can see top nav copy one. I don't really like this copy one, naming strategies, so I'm going to call it the top navigation. There we go. Below that, I'm going to add some new elements. So head on over to pages had an over to home fashion home, as you mentioned, we want to use these elements. So when I head on over to the layers, double-click right here. So we have all sorts of different options. So we have the rectangle, we have the image, and I want to use some of it. I'm not going to use all of them small. Let's first select multiple of these elements, something like this. Because I don't really want them. You can hit 02 times to reduce the opacity just so that we can see what we're working with. And you can select some of these leftover elements 02 times, so that you can reduce the opacity of it and select this container. You can zoom in a little bit, reduce its opacity, because I don't want to use all of it. All I need is to use just some of them. So e.g. I. Like this slider option. So I would use these and just select these. I would use this text because I like it. Shop Now button works just fine. And I'm going to use the rectangle and the image below it. You can uncheck and check to see if that was the image that you have chosen. So it looks like we have to do it all over again, but it does matter. So let's do it. You can hold your space while you're navigating to move left, right, top, bottom. So let's use the shop now and let me actually use these. Yeah. But before I do, let me use all of these. Hit Control C, go back to my pages, go back to my homepage, hit Control V to paste them into place. There we go. And I'm going to align them nicely to here. And when I switch over to the layers, I'm going to add them to the group. But actually before I do, let me switch over to the Fashion Home and I'm going to use these. So switch over to the layers, select it, see what it is. There we go. So we have icons and we have rectangles. You can see that. So let's select them. Hit Control C and go back to our homepage Control V. There we go. All I need to do really is align them nicely to here. So hold Shift, Left Arrow 123440 pixels, Shift Up Arrow one-two-three-four to make it 40 pixels from here, or you can adjust them to your own liking. I don't really like the alignment of this, so I'm going to position it. Let's see what we can do right here. Maybe I can align it a bit differently. So let's see, maybe something like this works just fine. There we go. And maybe I want to move it just a little bit to the right. So maybe one-fifteenth will work just fine. And there we go. We have went ahead and created our own custom background. Now what you can do right here is select your image. And because I'm really have too many of these images right here in my computer. I usually use some online collections. So perhaps that would work just fine. But let's say that I want to replace this image. So what I will do is call it hero image. Come right here to the right. Hit Upload, click to Upload. Go to stock photos, right light. That's the collection I have to e.g. something like this hit Open. It's going to open the image depending on how big it is. It's going to take longer or shorter e.g. and you can hit Okay. It's going to stretch it a bit so you can kit fill e.g. that's going to fill it in quite nicely because we have rectangle on top. I can call it color overlay. Just so didn't know what it is. And e.g. if I select it, you can see that we have this fill color. I can set up the alpha to be 40, e.g. or something more dramatic like 60, Let's see. Something like 50. I think it's actually going to work quite fine. And there we go. We have went ahead and created a separate button. What they need to do right here is perhaps adjust this inside of the interactions. You can see that it's invalid because it's going to take us to the separate page which we will make at some point, e.g. to add more elements to this page, what I'll do is simply select my art board and extended all the way down to give myself a bit more space, switching over to pages, switching over to homepage. And now let's go ahead and select some of these elements. So I'm going to select these right here at the top. Switching over to my layers. And select them alike. So there we go. I think I selected everything I needed. Hit Control C, go back two pages, homepage layers. Hit control V. There we go. Nice. Hit Control G to group them, and I'm going to call them e.g. let's say promoted products, something like that. And because all of these other elements are scattered all across our page, but I'm going to do is simply select all of them like So hit Control G and call this hero image or whatever you want. You can move this down top navigation, move it up, and you can see how our website already starts taking in some shape. I'm going to hold my alt key to measure. And you can see that this is 160, which is fine, and 80 from the top, which is great. And I want to use it. Then we can go back to the homepage. And e.g. I. Can just make the selection from all of these elements, something like this. And we can go ahead and select the footer as well. Hit Control C, just to save ourselves a bit of time. Hit Control V around one more time. And remember we are ATP. So we're going to keep the consistency of our design. We're going to select our art board by double-clicking on it and extend all the way down. There you go. We have created one page, we have adjusted a page. And obviously what you will do is, let's say that you want to add something like this and you want to edit it. So maybe instead of new arrivals, maybe I can see prepare for winter. Because she looks cold and snowy. Prepare for winter magic. Maybe something like that. Basic t-shirts, That's fine. So let's click outside and adjust this. So sale this summer. Yeah, maybe enjoy most popular items on sale. Something like that. I think that's going to work just fine. And you get the whole picture, you can go right ahead and replace these images so you can double-click to draw the two properties. You have this Upload option. So what I can do is hit Upload, e.g. click to Upload and find another image. Maybe this one hit open. And once again, depending on how big your image is, and I would always recommend that you optimize your images, whatever you are doing, It's going to take longer or shorter for you to do so. So here it is. And I can hit okay, e.g. n is you can see it's going to replace that original image with this image. Finally, what we need is to add something different here. So I'm going to call it e.g. men's men's tight fit trousers. Maybe. And maybe I can add it this price. Maybe it can be 49, 99 or something like that from this price. And you can clearly see what that did. One more thing I want to note is when you double-click inside, you can see that you're taking to this edit mode. Everything else is shadowed and everything that you're editing at the moment is highlighted. Also, what you can do is hold Shift to narrow down this image if you want to or to scale it up. But I'm going to keep the consistency of this and I'm going to place it right here. And by the way, I really like how this looks like because it doesn't make too much sense to include trousers. Next two models. So I'm going to keep the original layout as it was. Why should they choose us? You can apply that, you can adjust it. And e.g. maybe I want to apply this icon color in the background. And now select this one So it's an image and now drag and drop our dollar inside. You can select these two and you can make sure that it's centered. And there you go, you can see how simple this is to edit, how simple this is to adjust. And crucially, you can select these elements, hit Control G and call it free shipping. Then you can group these control G equal payments. And you get the whole point. So you can go ahead and group them and adjust them however you want. It's going to be quite simple for you to organize it. And then simply you can grab all of this content, hit Control G, and call it e.g. why choose thus? Because it's just my preference and I always like to do so. I was lucky to select these elements and put them into group, organize them nicely. So I know, and my teammates know later down the line who created what we did, what we achieved, and where everything is organized at some particular points in time. So that's why I like naming my layers, my groups, and keeping things organized. So later down the line, when things get bigger, when deadlines gets shorter, everything is nicely organized and everybody's on the same page, what we need to do and where we left off the previous time. So if we move on down the line, you can see some products in today. You can change something like this to our most. A popular products. And what I will do in this case is select this, make sure it's centered. So when I'm typing, it's going to extend on each side. There we go. We have this option. So what I'm going to do right here is perhaps add some background to it. Or maybe let's see image. That image. What I can do is add a quick shadow, so something like 610 and then 20 for the blur. And maybe adjust the Alpha so it's not completely black, but it's something like that. There we go, just to add a bit of shadow around it. And perhaps while we're at it, maybe we can add some different options. So maybe I can go with ten for the corner radius and just make sure to change this rectangle as well to turn because it covers on top of the image. And now you can see that we have these nice rounded corners instead of street corners, if that's something that you are after. Now here what we can see is all of these information inside of our footer. What I would do is obviously replace this and change it. So let's see what we have right here. We have men, women, and kids. And I don't really like how this is centered. So I'm going to actually select all of it like this and just come right here and make sure that everything is centered, like so. So when I zoom, you can see that everything is centered. Now, if you would like this to be your footer, you will always just copy and paste it down at the bottom. But I'm just going to keep it as it is because this is a component. I'm going to hit to open it and to edit it. So what I'm going to do is perhaps you can change this, what it says. You, you can see shopping online. So maybe let's see information contact. So maybe you want to change this, Let's say store at my website.com or whatever hotline you can choose. So let's say phone number, phone. Maybe you want to add some additional phone down below or something, maybe an address, whatever you want, you can adjust it. And finally here we have some different options and we have some different icons. So you can easily replace these icons. You can add your own, you can switch them around. You can do whatever you want with them. E.g. maybe this store doesn't have LinkedIn. So you can get rid of the LinkedIn and you can select these two and just nudge them and see 31 pixels is the distance between these and you can quite easily adjust them. In this case, what we can do is simply select all of them alike. So head on over to our assets panel and select icon color because remember, that's the icon color which we choose for that. But we also do is select this one, makes sure it's bolt. And make sure that we are actually using this font for these options right here. There we go. So we have the same font as before. I'm going to go with bold. I'm going to go for some reason it didn't change there and there we go, bold. And we have bolt. Now that we added debt, what we can do is add that option here. There we go. And you can simply apply this option for bold. There we go. So now when you add it, this bolt, it's going to add it across your design. Now finally, what I want to do is select these three and perhaps add a different color to them. So it's not so obvious, maybe something like this. I think it's a lot more readable than before. And let's see, we have this color. I'm going to add it to my colors. And I'm going to call it e.g. paragraph color. Like that. I'm going to select this paragraph and apply the paragraph color to it. So you get the whole point. Maybe I can select this and apply this bold, but I don't think that it works really nicely. But you can go right ahead and simply adjust them and apply whatever you want with them. So this one, I don't really like how it looks like. So perhaps, maybe we can even move it outside of the folder. So let's see why choose us right-click and ungroup. Then position this to be in the center. There we go. Control G, and then why? Choose us? Great. So now I can select this control G, most popular products. Then I can select this control G, and perhaps call it. Let's see why I didn't group control G. There we go. You can call it CTA, e.g. for call to action. And I can group our new footer because remember we previously ungrouped it. So Control G, Let's call it Footer, go. And what we are left with are all of these elements on top. So let's see. Okay, So for you, selected for you like that. And let's check. Now you can see that we are a lot more organized than before. We can do is start from the top. So we have top navigation, you can move it on top. Hero image. Then we have promoted products selected for you. There we go. Then we have y, you choose us. Filter is going to go way down. Control of a call to action, most popular products and the footer. So now if I want to create a new page, Let's say that I don't know, I clicked on this t-shirt or whatever and opening up, all I need to do is simply find it right here. So let's go into product detail and let's see what we have. So there we go. We have this exact shirt that we'll look for. And we have all sorts of these different options as a sub art board. So we have description, we have reviews. And this is how reviews look like and they used subpar ports to do so. And here you can see that we have these two options. So really like what they did right here. So we can do the same for our second page. So inside of our shop design and inside of our homepage, what they can do is put it inside of the folder. Inside of that, what we can do is create another page. Sorry, not not a group. I wanted to say another page. There we go. And I'm going to call it e.g. product details. There we go. And all I need to do right here is basically start copying and pasting elements from my homepage. So now it's going to be much simpler to do so, so let's just take this, let's take this, this and this control C. Switch over to the product details control V. There we go. And I need to extend my airport tiny bit to something like this. There we go. And I will go to the product detail and I will select everything that you see right here. So I'll select all of it, hit Control G, switch over to the layers and call it e.g. product details, Control C, hit Pages. Go back to my product details control V. There we go. Switch over to the layers. It always says Copy button, don't worry about it. It's just because you copied it from another page. So orange to do is double-click and simply rename these product details. There we go. Something like that. Copy and just keep things nice and organized. Because sometimes your clients are going to ask you, this is a copy of what did you copy it from somewhere online and then you have to explain to them. No, no. I just copied it from another page. So what do we need to do finally, is go back to the details and we need to copy this, which as you can see is the content panel. Inside of that content panel we have U1 and U2. You can see that this is V1, this is VW two. And if you double-click, you can see how you can check between these and what you can do with them. And of course, interactions have already been added for this. So you can quite easily adjust between them. So if I hit Control C to copy it, go back to my pages, go back to my product details control V. There we go. And remember we used AT, so maybe we can go with 100. So solid is still 123. And if I hide, if I hover and select Alt and left-click, you can see I'm 100 from the top navigation. And let's switch this to here content panel. There we go. And basically what I will do as well as just make sure to go to View and select these Control C. Go back to product details Control V, and make sure that they are located right here. So I'm going to just position them right around here. There we go, nice and organized. And I'm going to select all of my content and nudge it towards this to be 100 double-click. And there we go. So now that we have this prepared, everything is as it should be. Obviously, you will go and make some changes further. So let's say that this icon inside of this switch over to the Properties, you can see that it is an icon. So switching over to Icon color, if that's the style that you want to go for, maybe this sale is not something that you like. You want to adjust these font sizes and font types, e.g. stuff like that. So you can do all of it. And crucially, when you hit preview right here, when I scroll down, you don't really see this because we need to connect it. But you can see the preview. And when I go back to the homepage, you can see the homepage. Now this is just what we created, this is just what we added. And in the next video, I'm actually going to show you how to adjust and create this interaction to actually integrate between them. And maybe we can add to cart, maybe we can add a nice little hover effect. So I'll see you there. 21. Adding Interactions To Templates: Adding interactions to your designs can really bring them to life because they're not just static designs. You're going to add some life, some motion and some national storytelling to your designs so that your viewers, your clients, and your developers will understand what you meant by it in what you are talking about in your design. So let's pick up where we left off in the previous lesson and let me show you how to add some basic interactions into mock plus rP. So here is the product details page, but I actually want to start from our homepage. So I want my users to be able to select this image and then go to the product details. And then we're going to tackle some of these options. So to do so, I'm going to go right into here and say, go to page view one. I don't really like how that's structured. So I'm going to edit it. And I'm going to click Page jump. And I'm going to target and go back to here to product details on emissions, none. So let's see if we achieved it. And then let's quickly hit preview right here. So when it opens up this preview, I can scroll all the way down to this image. When I click it, it's going to take me to this page. So all of that works just nicely. So when we go to the details itself, what I want to adjust right here are just two things. One thing is Add to Cart button. I want to add a quick hover effect to it. And then I want to tackle this content panel to add my hover effects. What I'm going to do is double-click on my button. And then you can see that we have all of these commands, but I actually want to add it, this button. So I'm going to select mouse hover in this case. And I'm going to go to Properties right here. For the mouse hover itself. Instead of this fill color, I'm going to change it to this icon color e.g. and on the text itself. So let's see, text is going to be right here. There we go. So let's switch over to normal. Let's switch it to mouse hover. Let's quickly preview and see what we did. So when you hover right here, you can see that it changes the background color and you can do so with all of these. So e.g. this doesn't have any color on it except for the icon itself. So when users hover on it, perhaps this icon can turn from green to purple or something like that, like we did right here. But still we have issue with this content panel because you can see it doesn't show any content inside of it. So that's where some magic needs to happen and we actually have to connect some of it. So if we zoom in a little bit, you can see invalid are born. And that's because we copied it from this particular view. And here in this view, everything works just fine. So you can see view of YouTube. So you can rename these however you want. If we go back to our T-cells, what I'm going to do is double-click right here. And if you can see we have invalid art board. So let's get rid of it by simply clicking Delete. Then I'm going to go ahead and add to our boards. And you can see them right here. Now, instead of this, what I want to do is this is going to be description. The next one is going to be reviews. So quick. Description. Hold the space bar, double-click reviews. There we go. And now if I go back to here, you can see that it updated in real-time to description and reviews. So all I need to do right here is simply copy the content from here. Control C. Oops, sorry, I accidentally selected the pen tool. So you can get rid of this what I created. So let's go back once again. Control C. Go to my description control V. There we go, nice and clean. Then go right to here, control C, and paste it inside of my reviews. Now because I already used this content, I don't need these subpar ports which are just copied. So I can just position my description right here, and I can just use my reviews. Position it right around here. Now, if I go back and preview this one more time, you will see that it is right here, but when I click right here, nothing really happens. So how can I switch between these two and how can I make it change between these two content pieces? So to do that and go back to here, once again, it all has to do with this content panel. So if I switch over to the layers, select it, you can see it names. It's named content panel one in this case. So that's what we need to target. So you can see that it already has some interactions right here on the reviews and on the description itself. So basically what we need to do is when users click to reviews, to take them to reviews, when they click to description to take them back to the description. How to do that? Simply go to the interaction pattern. Select your reviews right here, and you can see that the commands have already been set. So all you need to do is link it to the new page which we just created. So hit Edit triggers, click, that's fine. Select the target. So in the main artboard, which is this output right here, I can open up, locate my content panel, one, click there, switch content. So content, I need to select it to go to reviews. Because when they select reviews, I need them to go to reviews because this is reviews I'm going to select it from right here. You can choose the animation that you want. You can swipe down left and right, and you can choose the easing when you choose the animation. So let me show you, let's say swipe left, then you get all these options. So I'm going to just choose none. Hit, Okay? And then you need to do the same for this one. So click on these three dots right here. Hit Edit. Click, select the target. I'm going to choose main artboard content panel, same like we did the previous time. And you can see that you can have this loop continuously option if you want to. But I'm not going to because we are at the description, we want to target the description. So select the description right here. Hit Okay, once again, you can choose all sorts of different options right here. And you also have different triggers. So you have cliquish, you have double-click, right-click my mouse down, up, mouse enter, mouse leave. Mall center means this. Mouse leaves means this Slider fluoride Zoom, all sorts of different things, but I'm just going to use the same basic hold click, hit Okay, to confirm that. And now let's hit Preview on our main, our board also, you can call it a how you called it right here. So we call it product details. So you can double-click product details. Everything is going to be linked because you didn't change any links and you didn't do anything extra to it. So now you can see that it is located right here. So hit reviews. There we go. You have two reviews. Maybe we should change this to three reviews because we have three reviewers. And obviously you can change this description. You can play around with it and do whatever you want. One last thing I want to do is perhaps when they click on the logo, It's going to take them to the homepage. So let's quickly add that. I'm going to go to here, select it from here, and then just click and drag to my homepage. So trigger is going to be click commands. It's going to jump to that page. Open and current window. I don't want it to open in additional Windham animates none. So maybe I can do something with it. Maybe feed in. I don't know, maybe that will work and do the trick. Let's see. Yeah, let's use fading. Easing is going to be ease into the animation duration, two milliseconds to seconds, and then hit, Okay. Now when I hit preview, this still works. Everything works just fine. You have to hit the target. And then when you hover, you can see that it changes from the arrow to the pointer. You can click there and it's going to take you to this particular page, fade into nice effect. You can also turn these into hover states and maybe we can do just that. So go back to the homepage and select these. Switch over to the layers and we have to do some basic adjustments. So maybe promoted products, maybe I can even ungroup them for now so that I can group this. So Control G. This is going to be winter magic, like that. This next one is going to be basic T-Shirts. And finally, this last one is going to be items on sale or sale or something like that. So I'm going to group all of them. And I don't remember how we call them, but perhaps promotional section of promo section, Something like that. Now what I'm going to do for this one is I'm going to add interaction, or I can add a new state mouse hover, e.g. inside of the mouse hover, I can open it up, make sure to switch it over to the Properties panel. So what you can do is play around with these. You can include shadows, borders, and stuff like that. But all I'm interested in is this. Here. I'm going to introduce loops. But first select mouse hover. Here I'm going to introduce a bit more opacity to something like, I don't know if 50. There we go and switch it over to the normal. Then select this one. Basic T-Shirts. I'm going to select mouse hover. And inside of it, I'm going to select mouse hover for it and switch it over to 50 per cent. Make sure to always go back to normal, close it. And finally, we have the sale option. So I'm going to select this rectangle mouse hover and make sure to change it to 50 per cent. You can, of course change the color if you choose. So we can choose this icon color, e.g. that can be our mouse hover color. Go back to normal, select this one as well, switching over to mouse hover, then we can select this 40 icon color. And let's just make sure that we left that normal. There we go. Select this one once again, choose the mouse hover icon color switch in order to normal. There we go. And now that that's completed, what we can do is do a quick preview, See what we did so far. And once it loads, you can do so with these. You can make these arrows jump a little bit. You can move them up a little bit. You can add using our boards like I just showed you. You can add this as a quantity panel. Then you can connect different sub art boards with different slides, with different products and stuff like that. Maybe you can change this as on hover. But you can see when I hover on these, you can see what they do. And the power is incident. So it works just fine. But you can also do is maybe on these images, you can enlighten them up a little bit. So when you hover on any one of these, it just zooms in a little bit. Maybe death could be a thing to try. So perhaps on this image that we already chose here we have the image, we have the mouse hover on mouse hovering. What we can do is add different interactions. I can select my target. So I would have to choose this one manually. So it's image PNG. So perhaps we can name it man, model or something just so that we can differentiate it a little bit. So inside of here, Let's try to find it. No. There we go. Mad model triggers. Let's see, replaced with mouse, enter, Zoom. Then we can add another interaction. If we go back to pages, go to the product details. So instead of mouse enter, I'm going to add click Page, jump. I meet, none, hit. Okay, and there you go. Now we have two interactions. So let's quickly test it out and see what we did. Mouse enter is hopefully going to show us that hover effect. Like that. You can see how that looks like. So it just scales up in size a little bit. When you click on it, it's going to still take you to this particular page when you have all of these elements which we just added and just edited. So that's how super simple it is to work with. And you can see it just go back. It goes back to the original state where it was. But when you go to the mouse enter, you can hit Edit. And perhaps, maybe we can move this c commands. Auto recovery. I think that will work just fine because auto recovery is going to take it back to the original place where you left off. And it's going to show you that original place and that you edited. So basically that's it for reviewing our interaction panel and what you can do with interactions. And in the next video, we're going to tackle publishing our prototypes and how to preview them and what are some of our options that we have inside of mock plus rP? So I'll see you there. 22. Previewing And Publishing Prototypes: When you want to preview your prototypes inside of more plus rP, there are some options that you can explore and also when you want to share those prototypes and published them for others to see which are outside of your team, there are some options as well. So let me show you. When you go right here, you have your preview mode. So you can click this arrow to start from homepage or to start from current page. If I select that, it's going to start from the current page where we left off. And you can see, like all of our interactions still work as I showed you in the previous video. But you can also select this to start from the homepage. So whatever you set as your homepage is where it's going to start. Finally, when you want to preview, just click this arrow. Now instead of the premium mode, we have some options as well. So here you can select how you want this to be zoomed in. You can fit too wet, you can fit to screen. Oregon fit the width. Or you can zoom in and 200 per cent, or you can do whatever you want with it. And now we have full-screen option, which is going to be this option. But I don't really like it because actually I need to zoom in a little bit to 100%. And then I need to go into full screen. And this is basically what your users are going to see as a full-screen website. Obviously, I have a bit larger display, so I have these margins on left and right side. But if you have e.g. laptop display, because remember we did this at 1,600 pixels wide. It's going to take up the full screen. So just keep those things in mind when you want to go outside, you can just preview. You can see that this goes back when I click is going to take me to this page. However, effect works. So everything that we did previously, steelworks nicely. And when I click, it's going to take me back to the homepage. If I want to escape, I would just hit Escape on your keyboard and it's going to take you back to here. Now next we have these panels left and right. You can hide page bowel and doesn't show how many pages you actually have. And you have a bit more real estate to explore the prototype. And then you can show your notes bow, we didn't add any notes right here. But basically, you can head on over to note and say something like when it's going to be for the entire project. In this case, nodes can be something like, do you like minimal style and colors? Should I add more colors to the design? There you go. You can hit Enter two times n Then e.g. typing something like Please send me the image back. We spoke about horizontal lines that maybe they didn't share those images, but you can hit Control S and hit Control R or Command R. If you are inside of Google Chrome to refresh this page. And there you go. You have your page notes. If you want to get rid of the page nodes, simply select them right here. You can select one, like So, hit backspace to get rid of it. Or you can select another hit Control S and you have to hit Control R Once again right here to refresh the page to see the changes happening right here. If you don't want to see the nose fell because at the moment we don't have any notes. You can click right there to get rid of it. Then you have your sharing options. So you can share the preview link. And you can choose to include or remove some of these options depending on who you're sending it to. If it is a client, e.g. you want them to be able to see all options. But if there are some users, you might want to hide some options like e.g. a. Link areas. You can check or uncheck Show clink area. And this is useful because you want them to be able to either click on the link or to figure out where the links are for themselves. You can even set passwords if you want to protect your designs and your prototypes. And you don't want everybody to access them, but just certain people. Then once you're ready, you can hit Copy and you can send them this link and they are going to be able to access it. Also some options that you have are these. So basically what we just talked about, you can show link area, you can show hover effect, you can show these things or you can hide them depending on if you're doing some testing or if you're doing some previous. So basically that's it for the premium and finally for the publishing. When you want to publish your prototype, let's say that you are ready. You are happy with it. And let's say that I don't like these. Maybe I want to delete them because I just wanted to be able to use the things which I created. And I don't want to necessarily for my clients to see that I may be used some template or something like that. So I'm just going to get rid of this and I just have my own designs which are just created. Doing a quick check-up will be good because you always want to make sure before we move on with this, if everything works, everything works right here. If I click right here, it works right here. So everything is as it should, but just do a quick checkup before you actually hit publish. But when you're ready, you can hit publish and you can target or select a new project. So here we have our first project, e.g. or project sample, but I want to create a new project. So instead of this, which is the name of a UI kit. I'm going to call it sharp design because that's what I located at. And I can select all as my location sheet. Okay, shop designed, hit, Okay, and it's going to publish it to the mock plus cloud. And I'm going to be able to work with developers, with teammates, or with stakeholders on this project. You can close or you can choose to view project right here. And it's going to show you that. So here we have shopping web UI kits. We have View Details. Let's hit View details to see what we have. So we have homepage and we have product details, so we have description and reviews as sub artboards inside of that. So here we have that for this particular section in which you can do inside of here is you can post notes so your clients can answer some notes. So maybe I can maybe I want to add some comments right here. Let's see. Do you like the yellow color for the buttons? And you can hit control enter to send that comment. And you can see it as unsolved or you can solve with right here. You can close it if it is completed and stuff like that. And your clients will be able to see this in real-time and answer in real time. So when they click, they can post a reply here. You can see that reply right here. Notification jump back into here and simply added a worst solve this issue. Development section is built specifically for developers. It's a place where developers can get everything they need to start coding asap, like the specs, like CSS code, like snippets for color's hex values and so much more. So we have the assets annotations, link to design system, switch deaf platforms and colors. So what all this means is when you start hovering, you can see the distances between all of your elements, which is obviously crucial for both HTML and CSS. But let's say I want to choose this image. I can get the code as CSS, Objective-C, Swift, and Android. I can see the dimensions right here. So x, y, positions, width and height, radius, and opacity. So I can see all of it, and it's all located inside of my custom. You can see web h5, which is the size, iOS, android and custom. And I can do it in pixels. I can do custom units right here, so I can choose between pixels, points, DP and so on and so forth. And customize width, I can confirm and it's going to apply that particular change. So that's how super simple this is to share inside of more close Cloud, you can go into presentation mode if you want to present this design to your clients, e.g. or to the stakeholders or project owners or whoever. And then you can choose between these two projects. So you can go from homepage to product details and basically work with them in real time. And they are going to be able to understand what you did. And here you can see selected and highlighted areas when they can actually click. You can see it changing in real time. So everything works as it should. And you can see these areas right here, right here. So all of it works as it should. And that's the publishing of the projects in mock plus r p. In the next video, I'm going to tell you about downloading your prototypes. Why is it useful and how to do it, and how is it all looking like? So I'll see you there. 23. Downloading Prototypes: Sometimes you want to download your prototypes from Mach plus rP, sharing them with teammates, with clients, and don't want to upload them and publish them just yet. Maybe you are under NDA. Maybe you don't have internet access. Maybe you're traveling somewhere and you want to have just those prototypes. Think about them to review some notes that you've got. All sorts of these different scenarios and deaths were downloading option comes into handy. Let me show you. So here it is, right here at the top, you have this download option. So you can download offline prototype presentation package. And these are the key phrases right here, presentation package, this is used for presentations. So when you want to present this offline, when you are on the go, perhaps you are on your laptop, maybe you're traveling, maybe you're going to the place of business or for your clients. There are various different options and scenarios where you can use something like this. It's super important to do this because you always want to have a backup. It's great to have it in Cloud, but sometimes people may not have the access to the Internet. Maybe you are just there. So why would you take them to the Cloud when you have the option available on your location, e.g. maybe you want to share it internally because of the NDAs, as I said. So there are really few scenarios where you can use something like this and it's really useful. So all you need to do is click right here. It's going to show you a page range. I'm going to select the Paint rage and I'm going to select my shop desire so you can uncheck what, check what you want to do. I want to explore and exploit both of them so we can simply select all. You can see that two of them are selected. And you can see page range all because I have two pages inside of my folder. You can show page panel, you can show northbound, show toolbar. You can show links to all of these settings that we spoke about and hit. Okay, once you're ready to download, It's going to take a bit of time to download. And depending of your machine, depending of your project. So e.g. if you did an optimize your images, it's going to take a little bit longer. If you used various different pages, is going to take a little bit longer. But in this case, as you can see, it exported really quite quickly. So let me just drop it into a folder. Now let me show it that folder, how it looks like. So there we go. We have this option for a zip file, right-click. And I'm going to extract two here and hide this just so that you can see it a little bit better. There we go. And it extracted these assets solid and get rid of this zip file. Actually. Get rid of it by hitting delete. There we go. And here we have all of these assets which are included by default for multiple SRP. Then we have the data options, which are all the images which are included inside. And obviously it's really important that you name your layers. Otherwise you're going to end up with a results like this. But basically it just export them like placeholder files when you actually share this with your developers, it's going to keep those layer names that you posted. Finally, we have the index page, double-click on it and it's going to open up as a new page and you can see what your users are going to see inside of, let's say, presentation package that you want to show them. So they have all of these options which we spoke about previously. If you want, you can include some nodes right here. You can hide these panels. You can show these panels. You can do whatever you want and let's just explore them one last time. There you go. It took us to this page. Hover effects still works. This still works. So everything is like it was right here, but it's just a portable and more, let's say version where you can take it wherever you want because you have it stored on your machine. And that's why downloading prototypes is such a cool option. I'm going to like it and I recommend you guys use it all the time. Seem like I'm doing as well. 24. Course Project Breakdown: In this video, we're going to do a quick course project breakdown. And I do this for every single one of my projects. We're just not going to include some deeper details like e.g. design brief or project proposal. I'm going to assume that these are already been created because this is the project that doesn't really exist. But I still want to take you to the full design process, which I like to use when I'm designing my projects, both websites and mobile apps. First, we're going to start with some task flows or with some flowcharts, however you want to call them and structure them. I'm just going to show you how the things are going to be structured on the page itself. Then with some basic information, we're going to move on to wireframes. We're just going to lay down some elements onto the page and just create some basic elements structure in our designs. Then after that, we're going to move on to designs. We're going to take those wireframes, turn them into designs by adding color, by adding different images, by adding structure, by adding real copy to it. And then finally, we're going to add some interactions and animations to our design to bring it to life and to make it stand out a little bit more than at the end, I'm going to show you how to share that design with your teammates, with your clients and with developers. And finally, how to export it as a prototype, which you can then take with you wherever you are without any internet and you can open it up on any device. So let's get started. In the next video, we're going to create some quick task flows to describe what our page is all about. So I'll see you there. 25. Flowcharts: In this video, we're going to create some quick flowcharts for our projects. So let's get started. So here we are in mock plus rP, and I'm going to straightaway create a new project. And I'm going to use 1920s 1080. This is fine because this is going to be up VR website. That's how I'm going to name it. Hit OK and it's going to open up a new tab. I'm not going to use any templates because I want to start creating it from scratch. And first things first before we move on any further, let's go ahead and set some preferences up really quickly. So let's go with the layout settings. I'm going to use 12 columns. For the column width. What I can do is use something like 82. Gutter width can be maybe something a little bit smaller, like 60 or something. There we go, but let's try to meet in the middle. So 8,080.80, I think that's going to work out just fine. And these rows are going to be okay. Colors. Maybe we can go with something like 40, something like that. That's good. And we don't need any rows for now. I'm just going to use this. So let's see, offset maybe 20 pixels, but not from the center. Gutter on outside. Something like debt. Let's see, one-twenty maybe. There you go. But I don't really like it. So let's go with a t once again. So we views, show layout. There we go. So this is our layout. This is going to be auto-layout for this page. So first things first, let's quickly hide it. So views, because I don't want to see it really quickly. So alt plus l is how we're going to hide it. Click Alt plus l to quickly hide it. And I'm going to go to the page, and this page, I'm actually going to rename. Let's see, when it creates a new page is going to take me down. There we go. So this first page, I'm going to rename as flowchart like that. Then the second page, I'm going to rename to wireframe. Third page is going to be our design. There we go. So all of them are 1920 by 1080 because that's how we set them. And you can see it's right here. And let's go back to our flowchart because let's start laying some elements. So by the components, all I need to do right here is to use one of these shapes. So perhaps this one here inside of this shape. Let's stretch it out just a little bit. I'm going to double-click inside and type in something like hero image. There we go. And I'm going to enlarge this text to be maybe 30 or something. There we go. Just so that we have a bit more space while we are working right here. Maybe something a little bit smaller, like 20, just so that we can see what we're working with. Now let's change this to Roboto, I think, and make it bold, just like so. So inside of here maybe we can switch this and use some different color. So I have a color already prepared on my desktop, which is a nice blue color. And the text in this case is going to be pure white. And let's get rid of this bold. We don't need it. Finally, I'm going to get rid of the border. And in this case we are ready to go. So what I need to do right here is I need to go to the markup, drag some arrows inside of here, and let's place it, let's say roughly 20 from here. So from here on out, what I'm going to do is let's increase the width to five. Maybe not that big. Maybe three, maybe two. Actually. There we go. So just extended it a little bit just so that we can see it a little bit better. What I'm going to do is duplicate this, position it here. Then from hero image we're going to go to Explore section. And inside of that explore section, we're just going to give some information about what you can explore using this VR. Now for this first shape, I'm actually going to change it. So let's change it to be the entry points, something like that, I think works. Well. Let's narrow it down from this side a little bit. Let's select all of them, move them something like this. Then from the explore section, we're going to move on to the next section, which is going to be possibilities. Because we want to show to people what is possible when they purchased this VR headset, e.g. then on the next section, we're going to move on to gaming and gaming. And I want to highlight this section, so I'm going to use some other color. I already have this color prepared like this because I want gaming to be standout feature of this website, something like that. Because gaming is really beneficial in the world of we are currently at the moment. This is where most of the money actually is in this gaming stuff. So let's position it 20. There we go. And I'm going to move on to some other sections. Now, this section can be e.g. video section. And inside of that video section, we can maybe explain what the VR is best for, how is it used or something like that. Then let me duplicate this. Positioning here. Duplicate this below the video section. Maybe we can explore some features or some elements. So VR headsets. So maybe people can buy them or something like that. And finally, let's deal with this. Flip it around some delight. That position it here up to 20. There we go. Control D on this one, position it right here. And maybe we can type in some testimonials. There we go. And let's duplicate this arrow one more time. So I want to just create some sort of a closed loop. So I want to show to my e.g. clients how this is going to work. So let's see Promo section, something like that. There we go. What we can do is perhaps duplicate this arrow and maybe play around with this shape a little bit. So at the end, Let's see right here, I'm going to use this Control D to duplicate it, then position this to be roughly around here. Start is going to be none groups. Perhaps I should rotate to the different side like this. So start should be none. There we go. And I want to position this down a little bit. Then end is going to go like this. There we go. And I'm going to duplicate this one. Make sure it's roughly in the center and make sure it's 20, just like this. So below that we are going to say something like sharp accessories. Because there are plenty of those. And let me duplicate one of these, perhaps this one. And position it right here, where it says 20. There we go. And duplicate this one once again, like so. And I'm going to say something like final prompt section or world of VR. Because it's going to describe what the world of we're actually is. And finally we reached the end of the page. So I can duplicate this one more time Control. Whoops. Not that. Position it here to be 20. This to B2C as well. And this is going to be our page footer. There we go. Perhaps I can call it and give it some different variations. So this first one can be something like, I don't know, this color. This last one can be this color. Or even better, maybe we can use something a little bit different. So for this first one, what I'm going to do is use some darker color like this. So our entry and exit points can be these dark colors. And for all of these other colors, we can use these blue shades and blue tones and stuff like that. Maybe we can move this down a little bit and just extend this arrow to be something like this. So this is just my approach and how I like to create flowcharts. You can do so on. Any kind of different techniques are ways that you choose to. And there is also one more feature which is amazing instead of mock plus rP called Connect mode, which is going to help you create these flowcharts even faster. So let me show how it works. First of all, I'm not going to delete this because as I said, this is just my approach. I'm going to duplicate this art board using Control or Command D. And then I'm going to get rid of this arrow and this arrow and this arrow, e.g. and just continue with deleting these arrows. And then I'm going to actually select these to move them out of the way and select this one as well, just to give myself a bit more space. So same like we did right here. Let's say that this is our hero image ended. We are starting from here. So to enter the connect mode, simply click right here or use Alt C, click there. And then you can just drag from one of the corners, e.g. this one, and let go. Then it's going to give you the option to create any kind of these shapes that you want, e.g. let's use this one. Let me zoom in just a tad. And from here, I'm going to double-click and type in this because this works our next step. So let's just imagine that we didn't create it at all. So Explore section. There we go and click somewhere outside. Now to click on this one, Let's see, 28793. I'm going to click on this one. So 28793, something like that. There we go. And when you move it up, you can see that the arrow is generated dynamically, which is amazing. And it's going to just give you that a bit more precision with your designs and with your selections. So let me go ahead and copy this color. Let me apply it to the fill right here. Let me select the text color of the text should be white and let's go with Roboto. Let's go with 20. So to mimic these sections down the line. So what you can do next is you can simply select this one, hit Control D to duplicate it. Positioned at solver outside click and just click and connect these two dots. Now on this next one, you can say something like possibilities. And then you can click and then drag this to reduce its size, e.g. then the gaming was next. So what we can do in this case is if I select these two and move them, you can see how the arrows are moving dynamically. Then maybe we can take a little bit of a turn here and then hit control D one more time and type in gaming here. There we go. But I'm just going to use this gold color like so, and then paste it in right here. Now from gaming, what I can do is perhaps I can connect these two right here, or I can connect it right here, and then simply position it here so you can see how dynamic it is and you can move it and organize it in any way that you want. And these arrows are going to follow up. If I'm not satisfied, I can always go and undo a few times and then go back to here. And then if we want to connect to the next section where I can do is hit Control D e.g. here. Then it should say Video section, like so. And then simply connect this one and this one. Then from this you can go to here, e.g. from this one you can go down to here, let's say from here you can go to here and you can see how quickly this can branch out and adjust in various different ways and shapes and sizes. So you can go and create all sorts of different complicated layouts using this awesome connect mode to exit out of it, simply click here. And then it's going to leave you with all these arrows and how you position them. And you can see that it's still dynamic even though we exited the Connect mode and whatever he tried to adjust and change, the arrows are going to follow up. Just a quick note once again, this is much better approach than my approach, but I still like using my approach because I have been using it for years and I'm just used to it, but make sure to use the Kinect mode. It's much faster way to create these flowcharts, especially if you have multiple different pages and working on a huge project. And you need to connect these cross pages and cross-platform supporting layouts, screens, and different sizes for your art boards. So this is much better way to do it using connect mode. But as I said, I'm going to hit Delete right here. We are going to use this approach in this method, which I already showed you. Because as I said, I'm just used to it. Obviously these flowcharts are better used when you have multiple pages and when you're moving between pages when you have multiple screens. But of course you can see how super simple they are to setup right here so that you can plan your page content upfront before we actually move on to wireframes and designs. And don't waste any time once you actually get to the creation part of your design. Speaking about creation part in the next video, we're going to tackle some wireframes, and I'm going to show you how to set up these wireframes and how to prepare for that layout, what to include, what not to include. So I'll see you there. 26. Wireframe: Wireframes are really important part of every design process because in it you can really experiment with the layout, see where the positioning of different elements can be, how you can adjust it, how you can position it and do with it whatever you want in those first stages of the project. Before we actually move on to the design stage, the whole point of wireframing is to do things quickly and move on from things. And if something breaks, just leave it and just continue to the next idea because this is all it is. Idea generating process of wireframing before we move on to the final design. So let's jump back into ma plus rpm. Let me show you how to create some wireframes. So here we are in mode plus r p. And I'm going to select my wireframe page. Remember we have that 1920 by 1080 already set up. And I'm going to extend it quite a bit because we're going to add quite a bit of content inside. So first thing I want to do is hit Control L. Okay, so the issue here was that I didn't set the original values on the first page before I created these other pages, e.g. wireframe and design. So what you have to do here is when you have your first page, make sure to set the values that you want and then save them as default and then create other pages. It will then translate to all those other pictures that you created. But you have to do it in the first page that you create and then save those values by default. So we have 80, 80, 87. So let's quickly adjust that. So we have 8,080.87, 80, 80, 80. Let's try it and gutter on the outside. 80, 80, 87. But before we go any further preferences, I want to change it just a touch. So perhaps I want to narrow this down to maybe 20, or maybe even something lower, like ten. There we go. Okay? So it doesn't clash too much with our design, which is not what we actually want to do. So first things first we can create some sort of a hero section. To do that. You can use rectangles, you can use images, you can use whatever you want. I am going to use image in this case. So I'm going to drag an image to this and I'm going to set some values. So 1920 by 1,000. There we go. I'm going to snap it to the top like this. And on top of it, I'm going to add our rectangle. So 1920s by 1,000. So same dimensions. And I'm going to just snap it to the top, get rid of the border. Come in right here. Image. And I'm going to call it e.g. hero image. There we go. And this can be Hero Color Overlay. There we go. Now I'm going to add another image to here. And I'm going to name this image logo. There we go. And for the logo itself, what I can do is give it some dimensions of 106, width 56, e.g. snap it to the top. Physician it e.g. maybe 50 pixels down, something like that, and position it roughly around here. There we go. Hit T on my keyboard and I'm going to type in something like products. There we go. And I'm going to position it to be roughly around here. Now for this, what I want to do is use Roboto in this case. And I'm going to go with 18. There we go. I'm going to make a few duplicates. So first of all, control and D. Now this one is going to say e.g. partners. This next one is going to say support. There we go. And one final one. And it's going to say something like about, there we go. And now finally, all I need to do is simply a space them out evenly. So I'm going to maybe position this right here to the end, position this right here. So it's right around 60. There we go. Hopefully this will follow. It. Does. This will follow as well. It does. So what I can do is select all of them, hit Control G to put them in a group called them nav items. Put them below my logo and make sure that these are centered like So hit Control G and I'm going to call it Top Nav maybe. And with that, our hero section is almost ready. But we need some sort of a color overlay right here. So what I'm going to do is use the color and I'm going to place it right here. There we go. And I'm going to go straightaway to my assets and select that color without this bottom color because I don't need that one. I just need this one. And I'm going to call it e.g. something like dark gray or main dark. Dark, something like that. There we go. And in this case, I want to make sure that my text is completely white. So I'm going to head on over to here. Completely white. But let's just select the text elements sort of Bordeaux, completely white. Yeah. Okay. I'm going to head on over to the color, select one of them, it doesn't matter. White. There we go and select one of them. And I'm going to add them to my texts because that's what I'm going to use throughout my design. Let's go to compost and let's add text to their basic text. And I'm going to put it roughly around here. Then I'm going to move it out or Control X to cut it outside and then paste it in right around here. Then I can position it to the top. And once it jumped to the top, what I can do is create some bigger texts in this case. So I'm going to use Roboto once again, but go with something like 70. There we go. Make sure it's centered, align, make sure it's something big. And I'm going to say something like title goes here. There we go. And I'm going to, as I said, make sure its center aligned, make sure it's centered. There we go. And I can position it just below here. And then I'm going to bold. There we go. Go back to my assets and add it as my text. Then I'm going to duplicate it, position it right here and I'm going to something like customize yours. There we go. But instead of this, I'm going to go with 18. 18 is going to work out just fine for this particular case because I need to create a button so I can use the button component and I'm actually going to button placed it in right here. So my button is going to be something like 366 width 60, their ego. And the text inside, as we said, is going to be 18. So you can select it. Go with 18, go with Roboto, go with white. So I'm going to go with white. And for the color of my button, what I'm going to do is use the color which I already used. So right here, there we go. And we're going to add this color and get rid of this because we don't need it. I'm going to use this and this is going to be called our main blue. There we go. And here I'm going to just use this text. Double-click, customize yours. There we go. Get rid of this one. And for the corner radius, Let's get rid of the border. For the corner radius, let's go with something big like Swanee. See how that looks like. It looks good. Make sure it's in the center, like so makes sure it locates and right or roughly around here. Sorry, there we go. So this is going to be our main btn. And straightaway, what I'm going to do is perhaps create a component for it. So on mouse hover, but I'm going to do is change its color. So perhaps we can go with actually let's change that mean blue, main blue. Let's see what we can do. Come in right here, change it to here, there we go. So this is going to be our main blue. And this is going to be our dark blue. There you go. So for the main blue, it's going to be inside of the normal. There we go. And for the mouse hover, it's going to be dark blue. So just that simple. Let's go back to normal. Let's quickly preview just to see if we apply that change. And you're going to see, there we go. So it's already there. Lovely. So if we go back to it, and let's start designing some of these other elements. Before we move on any further, I want to make sure to put the button here. There we go. And I'm going to call this hero section. Now, the next section below my hero section is going to contain my image and some text. So basically what I'm going to do at this point is use some text. There we go. And I'm going to say something like section title. There we go. And I'm going to make sure it's left aligned. And this time I'm going to go with something lower, like 60. And I'm going to go with that main dark color, make sure it's left aligned. Once again. Position it until it lines right there, Control D to duplicate this. And now let's go with something different once again. So first of all, let's add this as our text. This one is going to be something different, like 24 e.g. and the color is going to be a little bit different. So I'm going to turn this color into here, then select the color into here. Call it the paragraph. There we go. And this paragraph is actually going to stretch to, let's say one-to-one. Something like that. That's this 792. There we go. And the height is going to be 121. Now here I'm using my own texts, but if you want to use a placeholder texts, all we have to do is right-click on this text component and click autofill to quickly fill it out with auto placeholder text. And this is going to be section paragraph text is going to go right here. So there we go. Now finally, what I need is to include some image. So I'm going to straight to the components, go to Image, stretch it in nicely, position it roughly around here. It doesn't really matter for now. And then what we need is we need to turn that button that we have. So open this up. Default group, but we didn't create it as a component, so let's add it right there. Main button hit, Okay, and open up this default group. Here we have the main button, just drag it and position it right here. For some reason, it just keeps popping into the main hero section. So let's go out of it and just hit Control X close all of this. There we go. So it's positioned it right around here. Section paragraph, image, section title. There we go. And I'm going to simply group these. But before I do, maybe I want to have some spacing between them. So maybe 48 is a good number. So let's see, 58, 48, there we go. And this can be 48 as well. So what I can do is select this quality section, contents like that. And I can call this entire section a section. Position it below my hero section. And let's see for the distancing, what we can do is maybe let's just keep it. Let's keep it at 100. I think that's going to work out just fine for now. And inside of it, what we can do is select these two elements and just make sure that they are centered. And there we go. Now below that we can have some different section. And I'm going to actually reuse some of these elements. But before I do, let me select this one and add it as my text. There we go, and go outside. And what we can do is create some different sections. So let's create a new one either way. So this is going to say unlimited possibilities. Possibilities, make sure it's centered and make sure it's this one in the center. Make sure we are 100 Control D. Now, use this one. I'm actually going to go a little bit quicker. So I'm going to actually paste in that content, the original content. And let's see, the distancing can be something like 40. I think it's quite good. There we go. So here we have 100. Now below that, what we are going to actually create are some sort of cards. So this card can be inside of a container. So to create the container, you can create with our rectangle. And it can be because it's going to be, let's say four of them. It can be something like three columns wide. Let's see, maybe we can give it something like 40, 87 for the height or something like that. Let's see the distance between it and the layers on top can be something like 100. So if I selected 100, there we go. And we can add the corner radius. So without any border corner radius can be ten. There we go. And one thing I forgot to mention is we can set the color of our art board to some different color because at the moment it's not really standing out too much. So I'm going to use this color added up like this. And I'm going to also add it to my colors right here. But I'm just going to quickly apply it to here. There we go. So fill, you can see f b, f b, f b. And I'm going to add it to my colors, call it art board color. There we go, and simply get rid of this color. Now, instead of Artboard color, I'm going to go with white now to continue what we did previously. I don't need this to be bold, I think. So maybe I can set it up like so. There we go. And what I can do is actually use this text. So Control D, position it roughly around here. And I can add some content to it. There we go. And maybe I can set the width to, let's say three to three, something like that. I can adjust it to the center of my card roughly around here. And I can go back to components and add a new image. This time we can go with something like one-twenty width 108, maybe, something like that. Position it to the center control D on this one. And here what we can do is set up a new text style of 32. And I can give it a name of education maybe. And this time it can be Bolt. There we go. I want to give it that main dark color to differentiate it. Just a touch. And let's see, we can go 40 from each side. Let's say, I think that's good. So let's see. First of all, let's go 58 from this top edge. So 58 and this can be 40 down. Like that. This can be 40 down as well. There we go. And then we can extend the card perhaps a little bit, just a little bit down. There we go. So now that we have our card, what we can do is call this current BG. There we go. And I can group these elements. So this can be icon, learn new skills, education, icon. There we go. So this is going to be our cart. And we are going to put our cards. Let's see, right here. So this will be right there. There we go. This is 100 grid. And now all I need to do is simply duplicate this card, position it here. Position it here, and then finally position it roughly around here. Now let's see, 369. We're missing a column here for some reason. 23 456-789-1011, 12 columns. So let's go back to our preferences. Layout settings. You can see 12 columns, but this offset is from the center. So maybe we can set it to something lower. Know, Let's go gutter on outside AT or 40. Let's go with zero. There you go. Just so that we can have some lining of our content in this case. And I don't want to waste too much time because at the end of the day, this doesn't really matter when it comes to development because developers are going to create it either way. Either you create it like this or they are going to edit it later when they finished with it. So first things first, I think this is just fine. Maybe this can be moved slightly. Maybe this can be moved slightly to hear everything else works just fine. When final thing which I wanted to add and touch upon is these cards can be a bit narrower, something like this. And like this. There we go. Then like this. And finally control D, duplicate it. Position is right here. There we go, and that's our card. So basically, what I'm going to do at this stage is select this control G, call it possibilities, and basically organize it just below this section. The next Control D on this section, organize it below possibilities, hold my Shift and bottom arrow so I can move them about the place a little bit. And basically what I want to do with this section is just replace the position of these elements. So this image is going to go right here. This text is going to go roughly around, let's say here I think we're going to sketch that later and see that later. This is just going to be our gaming. There we go. Below gaming, what we will need is that video. So I'm going to just create a quick image. So go back to here, image drag and drop. Now, this image is going to be something like 16, 44, width 863. There we go. Make sure it's in the center. And I'm going to basically create a rectangle which is exactly the same dimensions as this image. 16, 44 with 863. There we go. Was that the image here? So this is going to be Color Overlay. We're going to apply the same main dark color to it. And I'm going to lower it down to maybe 60% or something like that doesn't really matter. So this is going to be our video or promo video. There you go. Like that. And finally on top of it, we need some texts. So hit T and type in. See the world through new eyes. Now, this text is going to have this huge style and it's going to be located in the center of this element. You can select all of these elements, called them promo, video, and nudge them all the way down. Now, adjust this to be 100 from here, e.g. or obviously you can set it up to be 150 maybe and adjust this further. I'm going to tackle that a little bit later when we actually have all of our content ready. But for now, I'm just thinking of cutting off this video because I don't really have too much of the different contents which I want to create below. Maybe I can set this up, possibly. And then maybe I can actually duplicate this entire section. Position it all the way down to, let's say 150, move it all the way down. This can be cutting-edge, something like that. And then I'm going to go ahead and get rid of this card. All of them like so. And let me actually copy the text inside is going to be much quicker than for me to type. There we go. And I'm going to actually create three different cards right here. So let's use r for rectangle once again. And let's go with something like this. 246 columns Control D, position one right here. And I'm going to actually narrow them down a little bit. Let's see what we can do with this layout. This first one can be something like 618 in height or something, but let's just leave it like it is for now. So here we are going to have one image, so I'm going to drag it and drop it inside. That image is going to be something like 680 by 386. There we go. So nice, enlarge. Lovely. And then I'm going to select this one, drag and drop my image inside of here as well. This image is going to be a little bit smaller. So 146 width, two to three, e.g. something like that. There we go. And then one final image is going to cover the elements below. So let's drag and drop. And I'm going to basically use the same dimensions. So 880 by 3198080 by 319, there we go. And just position it right there. I'm obviously going to have some text inside of here, so I'm going to call it the Explorer to. That's going to be the name of our headset. And let's see for the size. Yeah. I think it's quite good. So just make sure it's in the center. There we go, positioning their control D. And I'm going to give it some different colors. So dark blue, e.g. or main blue here. And I'm going to give it some texts like customized yours, e.g. maybe we want to customize this a little bit. Then I'm going to hit Control C, Control V. To duplicate this, I'm going to position it right here. Make sure they are aligned to the left-hand side like this. Then I'm going to type in e.g. controller. There we go, but I forgot to make it left aligned for the text. This is going to be left the line instead of customers yours. Maybe you can say something like explore now. And these two can be links. Now finally, I can duplicate this one more time, position them in the center here. In this first one can be getting ideas, and this next one can be get inspired. There we go and adjust the background of this image. Let's see, it's in this one. I can give it the dark blue color, e.g. this image is just going to stay here for now. So basically here we have this, these sections. And obviously I will just go inside and e.g. group, this group, this group and this, so that we have three different groups. This is going to be ideas. This is going to be controller. And this is going to be Explorer to this, the actual headset. So I'm going to give it the name of tech. There we go, move this down a little bit and finally move on to the next section, which is going to be testimonials, is going to be the same as this section. So just move it all the way down to here. There we go. And I'm going to give it the name of testimonial. There we go. We're going to adjust it a little bit later. Then we will have this same section more or less position it here. And I'm going to give it some different name. Like all in one handsets. We're going to have some options right here. There we go. And I'm going to just basically get rid of this and this, get rid of this as well. So right-click Ungroup, and I'm just going to leave the image inside of here. Now this image is going to be Explorer too, because that's going to be our device headset. So that device headset can be something like 1190650. There we go. Make sure that's in the center. Lovely. And finally, just drag that main button component that we created previously and position it's something like I don't know. 80 maybe, something like that. There we go. Just make sure it's below our image. Now, this can be headset. Lovely. And then finally, what we have at the bottom are going to be some three cards. And we are going to actually duplicate this section. Let's see. Yeah, actually I can even duplicate this section because it's just going to say something like unleash the world of we are technology or something like that. And let me actually extend this down a little bit like so. Between this and this section should be one other sections. So let's put it right here. Unleash. There we go. And as I said, we are going to have footer right here at the bottom. So what we can do is actually create that rectangle. Use our position right here. And I'm going to use this main dark color. And I'm going to call it something like footer. Bg. These dimensions are going to be 1920s by 740 and a wind to get rid of the border, snap it to the bottom edge, like so. Switch over to compost at my image. And let's see, 1920 by 740. So 1920 by 740. There we go. Make sure it's here, then it's here, and make sure to send it to back. So Order Send to Back. There we go. This we're going to lower down to maybe 50% just so that we can see what's located behind. And one other thing which I would like to do is just create this same logo. So hit Control C on this one. Go back to here where we are, footer be G. There we go. And I'm going to basically group these, call it footer. Inside of the footer, I'm going to paste in that logo. So just located right here, Right-click order. I don't know why it won't show me this, but does matter. So ungroup Control G and call it footer. There we go. So just below that, we are going to include some copy later down the line so I can hit T, e.g. and typing something alike. Let's see products. There we go. And for this products texts, I'm going to use one of my assets, which is this 100-fold or Control D. And for this one, I'm going to save partners Control D. This is going to be support, groups. Support. And finally, for this last one about, there we go. So now that we have all of them, I'm going to select them and simply spread them apart a little bit, position them in the center and later down the line, I'm going to add some elements behind the scenes. But basically how that's going to look like is Control D, duplicate it and then add something like headsets. But I don't want you guys to get bored while watching this. Instead, what we're going to do is create another section right here. So to do so, what we need is one section and just above this section. And that section is going to be something like, I don't know, maybe yeah, Let's see. Maybe we can move this up, just a touch like that. And above this section maybe we can create something like sharp accessories or something like that. So let's go with T typing right here. Sharp accessories. There we go. Now, this can be, I don't know, 32. Why we didn't create that 32 thing. 24, where is the 32? So this is 60. Where was it? Was, it, was it this? No. This was 32. Alright, so created right here. There we go. And now I'm going to select the debt, turn it into 32 dairy goal position it left aligned to here, Control G. And I'm going to say something like carrying case. Carrying case. This next one can be extended cable. And this next one can be see all accessories. And maybe I can break it into two lines or something like that. There we go. Below those. I'm going to add some images. But before that, I can actually create some rectangles to put them into those because we have three, Maybe I can divide them into four different groups. So right-click and Order, Send to Back. There we go. So this is going to be right here. Actually let me get rid of these ones. And let me actually create one. And then we can duplicate it like we did previously. So maybe I can position it 40 from each edge. Like this. And then I can duplicate this and put the price right here. And for the price I can go with that smaller size. And maybe this can be something like, I don't know, 98 or something like that. $98. There we go. 40. And inside of here, I'm just going to add a quick image like that. And that image can be something like 417 by 417. There we go. Nice and big. And let's see, the oral card itself can be a little bit bigger. So let's see. No, let's just put this image. So Order, Send to Back. There we go. Right-click Order. Bring forward. There you go. So it lies just below our text. So I'm going to select it. And actually before I do, maybe we can turn this and added some corner radius of 20. Maybe get rid of that border. Background color is white, which is just fine. And this is going to be our shop BG or product. So product of background. And I'm actually going to go ahead and select all of these items like that, 98 Control G. And this is going to be our products card, maybe something like that product card. There we go. Control D to duplicate it, position it right here. Control D to duplicate it, position it right here. Now, this next one can be called, let's see, extended cable. Maybe. There we go. Price of that can be something more like 54. There we go. And then this final one can be something like C. All accessories like that. My English is not really good today. There we go. And all I want to do right here is say something like explore all. And next to it, I want to be able to add the icon of error. So let's see, this arrow is going to work out just fine. Like so. There we go. Make sure we are at 20 e.g. and this arrow is just going to be a white. We're going to add, what is this? White? There we go. And this can be white as well. So white. There we go. No, not fill color, but the text color can be white. There we go. This can be white as well. Like so. And the background of it can go to Assets and go with dark. Obviously you don't see it below this image, but it doesn't really need this image. So I'm going to get rid of it altogether. And shop or accessories, I'm going to keep it so 40 and this is at 40 as well. And basically, there we go. We have gone ahead and completed all that we need. One final thing I want to do is bring this a little bit closer, maybe to 60, maybe to 40. We can do whatever you want with it. And I can say something like accessories. And let's quickly just organize them a little bit. So it's going to go just below here. This section is going to go just above here. There we go. So when we go to unleash, footer and accessories is going to go above unleash. And obviously let's organize them a little bit better to something like this Double-click and nudge this down a little bit. So if we go to our layout preferences, and I'm going to switch off our columns here, okay? And this is what we have so far. So this is our design, this is what we currently created, and this is our wireframe. You can see how super simple this was, how quick this was. Obviously it took me 40 min to create, but the design part is going to be much faster because we will go ahead and create this without any scratch. So you can see when it starts crawling, everything is nicely laid out on the page and everything can work as intended. So in the next video, we're going to tackle design. So I'll see you there. 27. Creating Design: In this lesson, we're going to create the design and turn those wireframes into design. So without any further ado, let's get started. So here is the wireframe which we created previously. What I can do is simply select all of my elements inside of the page. Hit Control C, go back to Pages, hit Design, zoom out all the way out and extend this all the way down to here, e.g. hit Control V and it's going to paste in all of the elements inside. Let this empty space be at the bottom because obviously we are going to do some spacing a little bit later. So first things first I want to add some real copy here. So I'm going to paste it in right here and make sure that this is, let's say 59, 60 or something like that. There we go. And I'm going to nudge this into here. Then switch over to layers and find my hero image, which is this image right here. I'm going to head on over to upload, click Upload, and then I'm going to head on over to my desktop. Let's see where the folder is located. So here it is. And if I go to images and video, which is going to be my hero background, this is how it's going to look like I'm going to hit Okay, and there we go. So let me just lower down the color overlay a bit to 60, 50, maybe, something like that. And let me go ahead and use my top now for the logo. Let's replace that. Let's click to Upload and let me go back to my assets icons. Let's see if we are there. No, it's inside of the images. Logo. It's SVG, so it works just fine. There we go. So you can see how easy this is to replace. Now, this image is going to be VR in girl, e.g. for the VR grill, I'm going to hit Upload click images and use this girl right here. There we go. And you can see how super simple death was. We became human, scale it up a little bit to something like this. There we go. I'm going to click outside. You can see how that looks like. Now here I'm just going to paste in the copy from my original design which I created offscreen. Obviously, use this for my paragraph. There we go. And what I can do right here is six tended to just a touch so that it fits the role of we are maybe or even better, I can narrow it down so we can go into three lines to something like this. 48, 48, that's good. But I still don't think that this image has to be this big. Or maybe we can just use the two like so. And just make sure that they are in the center like this. So with all of these other sections, we are going to move them down obviously to something like this. Let's see how this works. Maybe we can bring this up a little bit closer. And maybe we can even turn on our preferences layout settings. There we go. Yeah, I think that's going to work out just fine. But why doesn't it stick so preferences, layout settings. Okay, So L, and I'm going to nudge it to the edge. There we go and just nudge this image in a little bit. And I think that's going to work out just fine. What I'm going to do once again is hit Control D. One more time. Let's go back to here. So let's see where is our image? Here it is. We are girl. So I'm going to add another image right here on top of it. Hopefully. For some reason it doesn't want to go. But it doesn't matter. What I'm going to do is just make it 200 by 200 and upload my logo, sorry, my icon. Instead of the icons, what I have right here is the VR icon. There we go. Click Place and then position it roughly around here. What that's going to do is just giving me some a bit more of interest in this section. Say. So, I think that this section has been fine. Then these all I need to do is just go right ahead and click Upload. Then switch this. This is going to be our education. So switch it over to here, there we go. This next one is going to be games. There we go. And I'm just going to replace this with games. And this next section, we're going to double-click and paste in some text. Next one is going to be music. And double-click music. So just click right here, hit Upload click and find music. There we go. Here. Okay? And then this final one is going to be metal because that's all the rage at the moment. As I see online. There we go, Mehta, and finally replace this icon with your own icon matter icon. There we go. Hit. Okay, great. Now that that's done, what I can do is select this entire section and just nudge it right around here just so that I can see where does it fit with the rest of my design. And I can go ahead and select all of these other sections and just move them all the way down until I see what to do with them a little bit later. So that's why it's great. So let's see games here. And I can upload this click Upload, go back to my images, games, which is this guy. There we go. You can see something like this. I think it's going to work out just fine. So select the data to make sure they are in the center. And maybe I can move them just a touch. Or maybe I can just move this game's image a little bit towards here, something like that. Perhaps some lacking some shapes in the background. So maybe I can add some background shapes a bit later or something like that. But I think it's going to work out just fine for now. The next thing I'm going to do is add a new image right here and use the same technique. So 200 by 200, there we go. And inside of that position, it may be roughly around here. I'm going to hit Upload and switch on over to my assets icons. And let's see games icon. No, not that one. So let's see gain, gain gaming. It's this one and position it roughly around here. Now when I have that, I'm going to include my copy inside a define gaming. And I'm going to do the same for this text. There we go. This button has auto sync in feature on it. But if you just want to change this button and you don't want the change to sync to all instances. All have to do is right-click on this button and click detached from assets. And then the changes will be applied to this button only. And obviously we will need to change some text here. So instead of this, I'm going to say get yours. There we go. Hit apply and just see if it updated in real-time everywhere. So what I need to do is to basically make a copy of it and then change in debt. But I'm not going to for the sake of time. So let's just go ahead and move on with it. So I'm going to select these two and make sure that they are in the center. They are great. So I'm just going to select this and make sure it's in the same distance as this one at the top to just give it a bit more of a breathing room. There we go. So now for this next one, I'm going to align it to be the same and this is going to be quite straightforward. So promo video, just hit Upload click right here, go to my assets and Ikhwan, sorry, images promo video is this one here. Okay, there we go. It's placed straight inside. Then in this section, move up. And all I need to do right here is basically replaced these images as they move up. Here, upload select images. It's going to be this one here, okay? As you can see, now here we are going to use the controller hit Upload to click to upload controller. There we go. Hit Okay. And finally for this one, it's going to be a little bit tricky. So select the image here, upload, click Upload. And I'm going to use this image because it's a PNG image of this girl. As you can see, it's going to translate nicely into that background. But for this, we need to actually replace some of this. So this get ideas should be completely dark. So main dark in this get inspired should be white. In this case. There we go. So you can see how this looks like. But finally, I need to get rid of some of these borders. If I selected this, Let's see, it doesn't have a border of this rectangle, does have a border. Same like this rectangle. Same like this rectangle. There we go. And now we can move on to this section, which we can add it further. So first things first, for this one, what I will do is replace the size of the image to something like 792 with 500. There we go. Make sure it's roughly around here. There we go, and make sure that I put them into position. So what we will do is actually turn this section title and change it from 60 to something a bit smaller, like 32. Double-click paste in some, it's life changing. And let's include some paragraph of text right here. So make sure to extend it just so it can cover the text. And let's see for the distancing, maybe we can use 48. So let's see what we have right here. So we have 35. So we are at 48 right now. Instead of this, what I will do is include some pagination. So I can simply hit 0 to create a nice circle, something like this. And let's see Fourier but 48, maybe a bit big. So 40 by 40, there we go. I'm going to include a border. And this border is going to be this, Let's say mean blue color. So apply to border. And I'm going to get rid of the fill border width is going to be two pixels, something like that. There we go. From here we are 54. And I'm going to be at 48, same like I did with the previous one. Control a D. There we go. Control D, where we are at the moment we are 29. So 20, let's see 20 and Control D on this one we are 20. So let's go ahead and quickly select these. So these other ones, actually, no, let's select all of them and hit paragraph color as a border. And I'm just going to select the second one and hit main blue as the fill color without any border to indicate that this one is selected. But I still think that they are really too big. So I'm going to select all of them like that and reduce them to 20 by 20. Let's see how that looks like. Yeah, I think that's much better. Evenly distributed them in case just they are not hit Control G, we're going to call this pagination. And you already have the component for the pagination, but I like to create my stuff from scratch. So I just like to have, let's say, full control of it. So I'm going to select this text, make sure it's in the center of this image. So I can select my content, select my image. So Section content and image and make sure their center aligned. There we go. And I'm just going to select this image here. Upload, click Upload, and add the testimonial image to it. Hit okay, there we go. And I just want to add some additional details. So hit R and perhaps creates some sort of a rectangle in the background. Maybe round the corners up a little bit. Let's see. Maybe 20. There we go. And I'm going to get rid of the fill and for the border, I'm going to apply that main color and I'm going to make it e.g. two pixels. Right-click Order, Send to Back. So it's just behind this image. There we go. I think that works out just fine. So only one handset. It's going to be super simple to do. All we need to do is simply upload this VR device. There we go here. Okay, and I think that works just fine. So we are at 01:20. Let's see, five from each side, 24. 24. Yeah, 123 from each side. I think it's going to work out just fine. And then finally for these right here, what we will need is to go with product card. This first card is going to be the carrying case, as it says, on the tin. Hit Okay, there we go. The second one is going to be those cables. So hit Upload, click Upload cables. There you go. And perhaps because it's cut off, maybe you can place it on the bottom edge of your image and this scale it up a little bit and then simply align it to the center like this. I think it's going to work out much better. Now finally, for here what we will need is, let's see. We'll need the title. So unleashed the world of VR technology. There we go. Make sure this is 48, like so. And then I'm going to add texts right here. There we go. And I'm going to keep this as it is. And finally, simply replace this image. Hit Upload. Choose this VR woman. There we go. And I'm going to make her a lot larger to something like this, nice and big. Select both of them, hit center and then move this photo down below. For the content image itself, I'm going to use components to drag in another component, go with 200 by 200. There we go and place it somewhere, roughly around here. Hit Upload, click right there. And then I will need the assets icons. And I'm going to use technology icon, I think. Yeah. So just position it roughly around there. What you can do is also use some background shapes to fill in these images. If you want, it will make them stand out a little bit more. And perhaps I should actually export and bring them in. So let me actually see what I can do. So maybe I can do something like this. So what we can do with this is here it's bringing the new image. Make sure it's scalable. Positioning roughly around here. Order Send to Back, hit, upload. Click to Upload and where it is, blob shape hit, Okay? And you can see how it looks like straightaway from here, all you need to do now is nudge this image into the blob shape itself. There we go. And just move both of them at the same time to roughly around here and it's going to work out just fine. I'm going to go a bit later and adjust all of them. But I see now is I would need something like 20 right here for the rectangle. So let's go with 20. There we go, just so that we can have a bit more of an interesting layout going on inside of this image. Our final thing which I wanted to do for this, but before I move on, let me quickly make sure that this is centered. There we go. I'm going to select the footer image, filter image. There we go. Hit upload and click right there, select the VR device number two images. We are device to. There we go. Hit OK. And perhaps I will just enlarge it a touch to something like this. And just make sure that the footer background is on top, maybe on 80%, something like that. In the nice trick is you can simply cut off your art board roughly around here and it will not scroll any further. But if you want, obviously you can simply extend your foot right there. I think that's going to be quite a nice trick and quite a nice way to end this design session. But because I'm really annoyed with these background shapes, I'm going to simply export them from my original design. Add them right here. So I'm going to add a new image, placed it to something right here, right-click and Order, Send to Back. Hit, Upload. Click Upload, go to Assets, blob shape number two, hit. Okay, there we go. And perhaps I can scale it up just a touch to roughly around here, maybe. Yeah. And then I can adjust and move them around. Let's just see where it is. Yeah, So here it is. This, this and this. I can move to here, perhaps. There we go. And we're left with one single blob and let me export it and prepare it and simply bring it into here. And while I'm doing that, let's quickly go ahead and add a new image. Scale it, right-click Order, Send to Back, upload click. And it's going to be blob shape number three, but for some reason it doesn't exist in there. So let me try that one more time. Click to upload blob shape number three. There we go, here, okay, and it's located right here. Obviously, you can play around with the settings a little bit more and adjust them a little bit more. But these blobs are there just to give you a bit of interests to your design. Let's quickly hit preview to see what we did so far and see what we've created so far. So here we have our hero section, we have our buttons, everything works just as it should. I start scrolling down. You can see explore new worlds. And we have this girl, once again, button works really nicely. Unlimited possibilities. So we have these options right here, but I think I forgot to add is for the main airport, I want to change this color. So assets. Right-click. Let's see what we can do. So it was this one. There we go. So when I switch over right here, it should make it switch and stand out a little bit more if it's saved. Let's check it out. Yes, because now we can see the white color of these cards. So everything works as it should. It looks nice. You can see how these blobs make your image stand out. Perhaps I should move that just a little bit more. But I think it's going along quite nicely. And for this video, what I will do is simply round up the corners of this video. Locate the color overlay and make sure that we are 20 right here. There we go. And now when you save it and open it up right here, it will work just fine. You could just imagine that this video plays continuously on bloop maybe over nucleic. It's going to take it to Vimeo or YouTube or something of that nature. These cards should also be rounded. So let's do that. So let's go with 20. Let's go with 20 here as well. There we go. And let's check out this section for the testimonials. So this one is selected, works good. All-in-one headset, customize yours. There we go. So we have these three. Explore all maybe we can add some hover effects. There we go. So everything works as it should accept for this section. Perhaps I should even cut it and I should even included inside of here. So what we can see, let's see. So we have footer, BG is 740. So let's go with 740. And I can go with Phil. There we go. And I think that's going to just about salt in this case, like that. In there we go. So that's it for our design. I really hope you enjoyed it. In the next video, we're just going to tackle a little bit of animation. And I'm going to show you e.g. how to animate one of two of these sections just to see how everything works. So I'll see you there. 28. Adding Interactions: Let's go ahead and quickly add some nice little interactions to make our page a little bit more interesting than it is right now when it's almost completely static. Alright, so here's where we left off the previous time. Let's go ahead and add some interactions. So the first interaction I'm going to add is actually when this page loads, I want these elements to move a little bit. So how to do that? Well, let's just quickly switch over to interaction. We're going to select the target, and I'm going to select this hero section. So scroll all the way down here, a section. And you have your hero image, e.g. and you have all of these other elements inside of the hero section. So first things first, let's just select this text like so. So it targets the text on load. Like so. And we want to commence to move. And let's do something like on the y-axis, let's go, I don't know, maybe ten pixels. So for three-five to ease out 200, maybe 300, something like that. Okay, then do another one. So add interaction, select the target inside of the hero section. What we can do next is maybe use the main button. We can also use the move. And let's go with, I don't know, maybe ten pixels here. So let's go with something like 604300 milliseconds. That's fine. Let's add another one for the menu e.g. so AD interaction. Let's go to the top. So we have the top nerve, we have the move. And on the y-axis, which is top and bottom, I'm going to move it e.g. let's say 40 pixels. Something like a debt. Maybe I can, I don't know, maybe I can enlarge the background image. So let's do that. So once again, hero section. Let's go with hero image on load, and let's go with Zoom. So let's go with the width, maybe 105, something like that. Let's quick. There we go. You can see how quickly this happened because we set it up to 300 milliseconds. If you want these changes to happen a little bit slower than this, then you can play around with that. Let's now move ahead and adjusted this next section. And I'm going to quickly touch upon this icon. And maybe when you hover over it, it can rotate. When you move your mouse over, it can just jump back. So to do that, instead of these triggers, and first let me explain what I just did. So when I click and drag it to itself, it's going to apply changes to itself. So I'm going to go with mouse enter. So when the mouse enters, and instead of Zoom, let's use a rotate and let's go 180. Let's go linear duration 400, I think can be quite good. You can use ease in, out. I think it's going to just look a little bit better. Click Okay, and then do another one. So mouse leave, and I'm going to use the angle zero. So let's quickly preview what we did right there. So when I move down, you can see that it's highlighted in red, which means that it has the effect on it. So when I hover, you can see what it does. And when it moves inside, maybe you should set it to minus 180. So let's test it on Moussa leave. Let's hit Edit right here, and let's go with minus 180 so that it goes back to its original position. So let's see if that did the trick. There we go. So when your mouse leaves it, it's going to go back to that original position. You can go with 360 if you want to. But I think 180 is good. I'm not going to touch upon these buttons because they already have the hover effect on them. You can do all sorts of different things with this image, e.g. you can enlarge it when you move your mouse over it. E.g. when you slide over the intersection of sunlight, that what I want to do is play around with the position of these cards. We already have the hover effect on them that we previously set. But what I'm going to do is I'm going to select the entire card and drag it. Use the mouse enter. Instead of rotate, I'm going to use the Move y-axis. I'm going to go with ten pixels, 300 milliseconds, which is fine. And then use this and go. Let's see. Let's go with zero and see what that does for us. So let's go instead of mouse enter. Yeah, let's, let's do that one more time. So when I click right here, male-centered move y-axis. Let's go with ten pixels. Click Okay. When I click right here. Instead of mouse center, I'm going to go with mouse leave. I'm going to keep it at zero. Hit. Okay? So now we have mouse enter with ten, mouse leave with zero, and let's hit Preview. So when I hover over right here, you can see when it leaves, it goes back and it has this springy effect, which is going to go nicely with what we are trying to achieve right here. So I'm going to go with mouse enter, move ten here, okay? Do the same for this mouse center, move 10, mi center move ten. There we go. And then I'm going to go with this one. Mouse leave, It's going to be zero. Mouse leave zero and mouse leave zero. You can of course, copy and paste these effects, but I found to be equally as fast when you do this. When you're just Blair, plan your state's upfront and when you plan your animation upfront. So now that we have this effect, sort of this springy effect, when you move your mouse over these cards. They play around and they show you these different positions. So when you scroll down, maybe we can rotate this one, but I'm just going to skip it for now and move straight to this section. And what I'm going to do in this section is I'm just going to select this color orderly from here. Head on over to my states, go to the mouse hover selected, go to Properties. Inside of the properties. I'm going to lower this down to maybe something like, let's go with 40 per cent. Something like that. Switch back to normal. Hit preview one more time because when you hover over it, like so when you're scrolling down, I want you to be able to quickly click on it or to see that you can actually do something with it. And in this case, it would be a video playing in the background. So perhaps when you click on it, it can expand, enlarge to be full screen or something like that. So this is the whole point. When you click outside, when you hover outside, it's just going to enlarge in obesity. So now let's play around with these sections a little bit. So what we can do right here is maybe we can enlarge this a little bit. So when you click and drag mouse enter, we can resize. So you can do it relative value, or you can, if you have a right here, you can see if untick resize to specific size, which is actually what I want. Because I wanted to on Enter to enlarge for ten pixels. So 710. And let's go with, let's go with the round number here. So maybe 407, actually 200 milliseconds. I think that's fine. Easy now, that's great. So that was mouse, enter, drag it once again, mouse leave. And we're going to keep it at these sizes. There we go. Let's hit preview one more time because I want to be able to know if this works or if it doesn't. So I can know if I need to make any changes. There we go. So you can see how this looks like when you hover your mouse over it. It's just going to basically show you this image and show you how it looks like. That's great. So the next thing which I want to do is perhaps, maybe do the same thing with this. So what I can do is do the same thing. So mouse enter, just so that we are able to understand that these are all part of the same section. Let's see. So 156.233. There we go. And then mouse leave. It's going to bring us back to the default settings. Hopefully. So let's see 156146. There we go. Then let's play around with this one as well. So I'm going to select the image like so. And in this case, I want to be able to scale it to something like this. So 9 443-594-4350. So once again, select your image. So 944 with 350, that's on mouse. Enter, hit, Okay. And now add another one. Instead of mouse center. Let's go with mouse leave. You can see 880319. There we go. So let's quickly preview these. And if these animations work as intended on these sections, so this one works quite nicely. This one works quite nicely, and this one works as well. It's just jumping outside of this sum. If you want, you can play around with the positioning of it. For it to go to the top a little bit. So maybe instead of this enlarged and maybe you can make it move just by y-axis, but just keep in mind that her legs are still going to look like this. But for now, I'm going to skip this section because usually these sections are quite static because people are taking between them and changing. So maybe we can enlarge this one. So let's try it with debt. So what do we can do right here? Let's do the same trick. So let's go mouse, enter, resize. Let's go with 1206, 60 maybe. Let's go with something a little bit slower, like 400 milliseconds. There we go. And then mouse leave. We're going to keep the same settings. Something like that. There we go. Finally, for D is what I want, is I want to select this image and I want to switch to hover, mouse hover in here. I want to reduce the opacity to maybe 70% or something. Switch back to normal, then select this image as well. So char to mouse hover, 70%. There we go. Switch back to normal. And then finally switch back to this product PG, mouse hover. But here we're actually going to change the color. So inside of mouse, our switch over to the dark blue, go back to default. There we go. And here what we can do for perhaps because it's the last section, maybe you can make that same trick for it to rotate on hover. So mouse enter, instead of re-size, maybe I can. Let's see, if I rotate 100 degrees. There we go. And mouse leave -100 degrees, 100 degrees, and there we go. So now that we have that, of course, you can add all sorts of different animations. Let's go ahead and quickly test out the entire design and see what we have so far. So when I hit preview one more time, we're going to have that nice little loading effect of all of these elements in the background. As I mentioned, you can add an additional animations to the background if you want to. But for now I think it's good. This works as intended. We have these which acts sort of like a springboard effect in the background. So maybe you can click right here and it's going to take you to either dedicated page section about games or separate games page. In this case. We can make this rotate if we want to, then we have this reducing hover effect on this card. We have these elements scaling, including this one. Then we have this slowly enlarged and interview. We have this nice little hover effect on all of our cards. Then finally, we have this one for the rotation. There we go. That's how easy it is to add different interactions inside of mock plus rP. And you can see how simple they are when you select your art board, you can see on load what happens then when you select specific elements like this one, e.g. you can see the triggers that it has and the commenced that it has right there. In the next video, I'm going to show you how to preview and publish to mock plus Cloud why that is important and what you can do once you are there. So I'll see you there. 29. Preivew, Share and Mockplus Cloud: Getting feedback from your clients is the most important thing you can do on the project. Because the wrong feedback can take the project into wrong part and how to actually get the feedback from your clients. And that's what we're going to talk about in this lesson. Okay, so this is where we left off in the previous video. Now, let's go ahead and preview this one more time. So here we have this panel at the bottom. So here we have fit to width. You can have fit to screen if you want to see your entire design. And once again, all of these elements which are outlined have some interactions included on them. You can go back to fit the width or you can go with 50% depending of your screen size. Then what we have next to it is the full screen. And you can hit Escape to go outside of the full screen. And you can show or hide these panels on the side. Of course here, on the left-hand side, you can switch between your different pages. And here, your nodes are going to be located. If you have your notes, once again, you can quickly show or hide these panels. If you don't need them. Then we have the preview link option. And what we have right here is what it says right here. So this privilege will be different when you change the settings below. So please copy the new link to share then. So what this means is when you check and uncheck some of these options, make sure to always click new link that you got from checking and unchecking some of these options. So what we have right here is to show control panel. You can show it if you want to. You can show this toolbar if you want to or don't want to. You can show the link area on mouse hover. What that's going to do is it's going to show to your viewers that they can actually click on that specific area. This is great, especially for user testing because you always want your users to understand for themselves if they can click somewhere or not. Because that's going to improve the speed of your design and usability of your InDesign. You can always show LNG carrier. You can show content outside our firm. Those can be either sub art boards are some elements that you created outside of your artboard. You can show node markers and you can set the password so everybody with a password can get into this preview. Everybody without password cannot access it at all. So those are just some of your settings when you share the preview link. And then finally, we have here, which are just some quick settings which I already showed you here, just congested and condensed into here. So once again, always showing carrier, short link, carry on mouse hover. So once happens right here, and it's going to show that link area. This is your link area. Show content outside art board. As I mentioned, Show Note markers and auto hide the toolbar. So those are just some of your options when you want to share your prototype really quickly. But what happens if you actually want to publish it? So to publish something on mock plus Cloud, but actually selected and let me show you, is going to say right here. So you can sync your project to mock plus Cloud, for instance, online collaboration, handoff and layer data. Check what this means is when you just share pour for preview, people can actually preview it. And then they can maybe give you some advice about what to change. Maybe they can that point you in the right direction about the design. But when you actually share to mock plus Cloud, you can collaborate with other designers and other people in your team, like Stakeholders like copywriters and developers. So that all of you inside of that team can shape that design to be what you actually want it to be at the end. So let's go ahead and target the Cloud Project. And of course, for developers, they can be able to see data specs. They can be able to see colors. They can be able to see CSS, snippets, and all sorts of different things which will be useful for them to develop this design faster at the end of the day. So we can target the Cloud project. We our website, that's fine. Hit Okay, and you can change it. You can use whatever you want from here. And I'm going to use we're website in this case hit, Okay? And depending on how big your project is, publishing of it is going to take longer or shorter. It's published successfully. So you can hit View project as a separate your environment and you can see how it looks like. So you have all sorts of these different options right here. About to document prototype design, task resource style guide and activity. You can check all of it. You have the team, so project permission. Who has the permission to access this project? You can preview it once again. Here you can start from the homepage or start from the current page. You can download that we already mentioned previously, and you can further share it outside of here. And you can set some settings right here. So let's view details really quickly. Let's go into design right here because it was starting from the flowchart, because that was the first entered default page. So what we have right here are some options on the top. First of all, we have the review. So inside of this tab, people can review. All of the changes that you created and they can basically have their say about your design. Then here we have some options. At the bottom, they can select some options inside of your design. They can add the texts, they can coordinate work-up. They can add the spacing markup and region markup if they want to add some comments in specific region of your design. They also have some pin style, so you can show annotation markers or unresolved comments to have a bunch of options when you're working with about somebody like clients or stakeholders. So they can really voice their opinion about your design and about changes that needs to be made for your design. You can quickly add these references. You can add different colors and stuff like that. So you really have a lot of options. You have annotations right here, and you have your revision history, which is always great because you can see how many revisions that your design actually had. Then what we have right here is the comment mode. So when you go into inside of your comment mode, you can quickly leave some comments. So e.g. change this background image. You can see it says Control, Enter to post this. So it's sent when I click outside, somebody can see this and click and say, Okay, change this background image and somebody else can see, I already did. Please check the revision history. So they will be able to see in the revision history that already did change this background image. So that's basically how it works and how it looks like. You can choose any kind of part of your design that you want to annotate. Maybe you can say something like add some graphics and the background here or something like that. So you get the whole point and you get how this works. Then we have the development. And this is especially useful, of course for developers. This is where they will be able to see all sorts of code snippets there we'll be able to see all the colors that you use, typography that you use. And there'll be able to further inspect your design before they actually start with the development and speed up their workflow a lot. So what we have right here are the assets. So these are the assets that you prepared a download acids, we have annotations. So if any annotations have been added, if you're linked to design system, you can switch deaf platforms and you can set colors and get the values are on the current page. So when I click right there, you can see that we have all of these colors. And you can find a duplicate of these colors. And you can change between hex, RGB and all sorts of these different color modes. Because depending of which color mode your developers are going to use, it's going to be easy for them to do so. So you can see acids are currently not supported in prototype pages. You can use more plug-ins to import designs from these tools. And you can watch the tutorials if you want to import assets and you can view annotations. We don't have any yet. And you can link to the design system, as I said, if you want to. And you can switch the development platform. So right now we have web. So these are your units. We have iOS, we have Android and custom. And you can enter the values right here. So if I select the web, that's going to be our main sort of platform that we are going to develop for it as developers. So when you actually hover over your design, you will see that the artboard size is 1920. And you can see that this is 1,000 pixels tall, which is the section of this page. And you can see when I hover over various different section, the distances between each of these elements. So you might be wondering how developers are going to actually use this. Well, it's quite simple when they actually see that this button, e.g. is 366 by 60. They can select it. And they're not just going to get the values right here. They're also going to get the code snippets. They're going to see the width and height and quiet easily, be able to copy the code and paste it into their code editor so they can work much faster. We have this e.g. which is the logo. You can see how it looks like. And of course you can change the development platforms here if you want to get some different values, e.g. and stuff like that. And finally, we have a different sharing options. So you can share private, share public or embed project. This is really useful, especially when you're working with outside collaborators such as, let's say some board of directors may be or people from other company that you're collaborating with on this particular project. So it can be really useful to share this outside of your organization or outside of your circle of people who are working on this particular project with you. So that's why this version is useful and that's why this option is useful for speaking about collaboration. Mock plus rP has great collaboration features and we're going to talk about them in the next video. So I'll see you there. 30. Collaboration: Collaboration is really important part of a redesign process because that's where you're going to get the feedback or you're going to get help from some external designers, either as a part of your team or some designers that come in to help you from some outside of the team. But how can you do that in more plus rP? Let me quickly show you how to do just that. So here we are back in more plus rP. And if you want to invite your collaborators, all you have to do is click right here where it says members. Now, you can invite these members and give them all sorts of different permissions. So they can edit, end design, they can comment and view specs, or they can be guessed to preview only. So it's really all up to you. Obviously, if you want to invite somebody to help you with design, you have to give them the role to edit and design. And all you need to do is simply copy this link, share this link with them, and they're going to be invited to your team, first of all, and then to this project to be able to edit with you. Now permissions, project type, you can set it to private, so accessible to all members of this project or team. Accessible to all members of the Quran team. In my case, I would switch it up to this and click Submit, click, Close in, white members. There you go. And then they will be able to access this with me. Now in real time, what's really important is using nodes. Now switch over to nodes right here. And then if you have to say something, then add it to notes. There'll be able to see it, they will be able to access it. And obviously it will be super easy for them to understand what you mean. But you can also do your communication outside of mock plus rP, but it's just easier to have it all into one tool like it is right here. So anytime you want to add something on, removes something, you can just add the note and the other person in the team is going to see that note. So that's how super simple it is to collaborate with others on your project. And remember, you can do so in mock plus clubbed as well. Just a little bit more advanced using the tools for developers, e.g. and you can have your project be worked on by multiple people. So on one side you can do the presentation, the clients, e.g. or stakeholders or some new teammates in the team. On the other hand, developers can take those specs, measurements and simply edit and cut them out ready for development. And on the other hand, you can work behind the scenes and create an adjust some of these changes in real-time and simply update the prototype, update the link, update the MOP plus Cloud project, e.g. and everybody in the team can see that version and see the versioning behind that project inside of the Cloud as well. If you want to quickly share the library you already created with your teammates, all you have to do is click right here on these three dots. Hit share. And it's going to show this dialogue if you want to share it with the current team hit, Okay? And then you will be able to share that with the current team. And everybody in your team will get a notification that this library has been shared with them. As mentioned previously, you can come right here to download the offline presentation package if you need to take this with you, e.g. on your laptop or on your phone. Maybe you just want to package it up and you just want to take it with you to show to somebody in person, then you can simply click right here to be able to download it and to take it with you offline. If you want to export this RPI file, you can head on over here on the menu and hit Export RPI file. And it's going to export this RPI file to your machine and then you can share it like that with your teammates or take it with you wherever you want. So that's how super simple it is to work inside of mock plus rP. And you can just come back to right here. And you can see a revision history. You can click there. And you can see who created what at which day. So when you hover, you can see some changes which are made. If I click right there, if I click right there and unzoom a little bit, then I can see all sorts of different changes, how they looked like. So I can click right here. So this is where we started. And finally, this is where we left off or I can click the current version and see how that looks like. So that's how super easy it is to work in mock plus rP, especially with some outside team members or your local team members as well. 31. Outro: There we go, we reach the end of this class. I really hope you had fun learning about Mach plus rP and exploring in how to use it. I look forward to seeing your creations in the class project. There is a dedicated video about your class projects, so make sure to check it out and I look forward to see what you guys can create. That's it for this one. If you want to access mock plus rP, make sure to check out the PDF with a link inside, then you can easily access it and create your free account that way, it makes sure to get started today and get those creations going. Thank you so much for watching this class. Once again, if you're interested, I have some other classes about UI UX design right here on my Skillshare profile. So make sure to check them out as well. Thanks again for watching this one and until next time, take care.