Wireframing For Designers

1. Course Intro: wire frames are the important part of any design process because they are the bridge between the ideation and the execution. They're great because they're simple enough so everybody involved can understand them and also cheap enough because you can create them on the piece of paper or majority off design software's Hey there. My name is Alex, and in Discourse you will learn what are wire frames, how to draw wire frames on paper and use the templates I provided how to create wire frames in different online does how to create them in four shop and, finally, how to create them in Adobe X'd and then move on to high fidelity wire frames and prototypes. This course is for anybody interested in wire frames, and you don't have to know how to use these tools. We're going to cover them in this course. So if you want to improve your productivity, save a lot of time and money on iterations and create the products faster than clicking roll and I'll see you in the course 2. What is wireframing: wire frames are the essential part off every product creation. So where you're creating a mobile app or website, wire frames are the essential part off the creation off that product, because they're essentially a bridge between the idea behind that product and the execution in cold later, wire frames are super easy to create because you can create them with different variety off elements. You can try different ideas out because they're super fast and super cheap. Therefore, they are perfect fit between the idea part and the execution part because you can jump inside and change things really easily, really quickly. And then, for example, if the element doesn't work, it's a lot cheaper to create it in wire framing, then in code, for example. Therefore, design is not done within code. Design is not done within the U. Y. Part off the design process. It's done within de vire framing part off the design process, because once again it's really fast to execute. It's extremely cheap because you can do it on a piece of paper. It's extremely easy for everybody to chip in with their ideas, and you can test all kinds off ideas out right there on a piece of paper before you jump into production off your you I work and later on in Cote. Therefore, it's really recommended for projects or fall sizes, for example, from smaller projects. When you are working with your local business all the way up toe extremely large companies like Google, for example, to do this wire frame, in part because it's extremely easy to execute. And it's extremely cost effective because you're not investing time and money into cold and then iterating inside of the coat, because there will certainly be plenty off that later on when you get to death part off the design process. But when you're just getting started with your design and you have all these ideas jumping around in your head, especially if you're working as a part off a team small or big team, it really doesn't matter as long as you are doing this wire frame in part off the design process, it's extremely easy for everybody involved toe understand the idea and later on the execution 3. Resources For Paper Wireframing: when it comes to resource is for your paper wife ringing process. It's really up to you what you're going to use in order to create those wire frames. You can simple use a blank sheet of paper like this. This is just a simple printing paper, and you can use it wheat lines or without lines. It really doesn't matter. I'm going to show you. You can use a nice quick drawing book like this, this one, this one from my Kia. But you can use any drawing book that you want. As you can see inside. These are just blank sheet off paper and you're getting these alliance, for example, and you're getting these dots if you want to use them for sort of great. But as they said, it really doesn't matter. It's really up to you what you're going to create, because my friends are extremely simple to create that can be created with freak and or you can use a ruler. For example. They can be extremely easy to the eye or extremely complicated, And in the later video I'm going to show you some Web examples and some products that I created within my company off. What donut with the help off some people, of course, and I'm going to show you different. Resource is that you can see Toby inspired and to use in your particular projects to see the differences between all of these different wire frames. Also, when it comes to actually drawing, you can use a simple wooden bent like this, so it's a simple pencil. You can use different shades of pencils if you want to. You can also use a pen like this. This is simple ikey a pen, but you can use a pen that you want. Actually, you can also use different colored markers if you want to give accents to something on your wire frame. So, for example, you want to give different accents to the bottoms. Let's say your client has blue buttons on their website. Maybe you want to use a blue marker. Perhaps you can use a green marker for images and so on. It's really important to understand that you don't have to invest any money in this paper wife ring process because you can really use whatever you have around your house if you want to be fancy later on down in the process, then you can really explore and spent endless amounts of money basically on rich other. Once off these different papers you want, you have different grades of papers. You have different shading pencils. For example, you have all kinds of different markers from from light grey, Let's say toe 30% great, 50% grade. But the main key to understand here is all of that does not matter. You can use whatever you have around your house to create these wire friends because, as they said in the introduction of video off this course, they are just a starting point off your design process. Because a lot of the times when you're working in big companies, you're going to scrap wire frames really easily because perhaps they don't fit the U ex parte off the design process. Maybe this position off the buttons doesn't work. Maybe you have to try different sliders. Let's say maybe this form does not need to have three fields. It only has to have two fields and so on. So you're going toe encounter all of these different changes during your design process, so it's really important to be ableto iterated quickly before you actually jump into software and start designing. So that's why I say it really doesn't matter which kind of paper thickness you're going to use or paper grading. It's really all up to you and what you have around your house to start with. The paper Weibring. 4. Wireframe elements: There are many different elements that you can use in your wire framing creation process. But some of the most important elements are basically text images, bottoms and forms or fields. So those four are basically the main elements that you're going to use in your white cream in creation process and then later on down the line, you're going to combine them. So, for example, you are creating a bloke post or you're creating a car off some sort, so you're basically always going toe interchange these four, and to include them in your design process. Then you're going to expand from those four and create something like a slider, for example, which is formed off, Let's say image text and some pagination, so you're going to use the dots for the pagination. You're going to include perhaps different buttons. Maybe you're going to include different icons inside, but it really does depend about your wife from in creation process. Also, it worries about your client budget, so if the budget is small and the deadline is really tight, you are not going toe explore wire frames in deep detail, but you're just going to put in some nice quick sketches to convey your are your ideas to your clients so they can understand what you have in your head a bit better before you jump into software and start designing in the next video, I'm going to show you some different paper wire framing styles, and I'm going to show you what you can actually do with your paper wire frames. I'm going to show you some more easy ways and easy methods and also some extremely complex ones and some extremely elaborate ones, which includes illustrations as well, because it really depends about you if you're talented about that sort of thing, if the illustrations are going to be included, if they are going to be included, but you don't know how to draw, don't worry. You can simply scribble something to indicate that the illustration is going to go there. Also, when it comes to wire framing, you can use actual text to indicate what everything is, or you can simply create some boxes, and we're going to get to it a bit later. In this course, we're going to show you some different software tools which are using different elements, and you can basically have endless creativity. But it's really important to understand, not to get bogged down with his wire framing part because, as I said multiple times throughout this course, it's really a bridge between the idea and the execution. So that's where the wire framing part comes in, and that's where you are going to start thinking about this wire framing part. It's just the bridge between the idea and the execution. So let's now jump into the next video, where I'm going to show you some Web examples about how different designers are using the's paper wire frames, and they're different ideas and executions. 5. Paper Wireframe Styles: If you go into Google and simply type paper of wire frame, you're going to get all of these different variety off paper wire frames, and they go from really, really, extremely easy wants toe extremely complex ones. And I'm going to cook to show you these examples. But you can also explore whatever you want about thes wire friends because there are literally thousands of different examples. So from this first mobile app, for example, you can see that they have all these different ideas basically marked down on the side with arrows pointing. And this is really useful when you're sending this designed toe other members off your team , for example, or if you just want to remember something yourself, maybe you have this idea at the moment, but you want to Kuwait later on down the line with your client, so that's extremely useful to do. And as you can see, they're using text for literally everything. Other parts off the wire framing process is this. As you can see, perhaps they're going to use titles right here. They're going to use paragraph right here, so a bit smaller text and they're using this nice and simple box for the images you can see right here. They're using play icon. So perhaps this is going to be a video. So there is also this style for Vier frames, and this is usually used as they said in the previous video. When you don't have a lot of time on your hands when the budget is perhaps toe short into small. So you're going toe, have to use something which is nice and easy to understand both for you and your client. Maybe you will have to do a bit more explanation to your client. Then if you're just using something like this because you can see right here that there is nothing there. So perhaps client is going to get confused about what this is. Maybe you have tow, say to them. Well, this is the image. This is the paragraph. This is the title. So perhaps you're going to actually lose a bit of time there. Then if you're just using this from to start, you can see a nice example like this. So perhaps they're going to use some different illustrations, different drop down menus, maybe breadcrumbs. Maybe they're going to use the website right here, So it's really up to you. You can see this example right here. They're going to use the text in this example and also some scribbles. So if the text is repeating, you're not going to waste your time. You're just going to scribble something down, is going to indicate that that is the text as well, and you can see right here and the frustration from this guy. So he's using a lot of different screens, lot of different elements, and that's really the key. Take away here from this weathering process. You're going to do this a lot, especially if you're drawing on the piece of paper because you're going to make mistakes along this process. You're going to make some alterations and changes. So this is what you're going to expect from majority off your projects. Also, a lot of the times clients don't understand that they actually need a few more additional webpages, three more additional mobile screens. So that's where this comes in and you're going to have to create multiple iterations off each screen in new screens and new pages. So that's where this comes in, and you have all of these different papers at the end. Off this process, you can see something like this for the website and this person actually included some drop shadows and some difference cruise lines and you can see did once again they're using some text. So, for example, you can see products right here, but for the paragraph there, just scribbling something like this also for the bottoms. But they have their notes right here. And this is what I was saying about what you need to use for your wire frames and what you want to use one of our brings. Basically, based on your abilities and your budget, they're using different upend color to indicate what they need to do. So you can do this. For example, if you remember when you were in school, maybe your teacher used something like a red color to indicate some errors and something like a green color to indicate something that you've done well so you can use exactly the same principle and exactly exactly the same style. But you can do that in variety of different colors. You can use blow. You can use whatever color you want. But basically red, green and blue are major colors that designers use because they're really simple and easy to convey to other team members off your design team or your design client. If we scroll all the way down, you can see a bit more advanced wire frames right here so you can see that this person clearly knows how to draw. So you can see all kinds off different icons, different people. You can see a map right here. You can clearly see a nice handwriting here. They're drawing different icons, so you can do this as well. But just be advised, if you're on a tight deadline and on the type client budget, you perhaps won't have enough time to create something like this. There is one nice example here as well, as well as this one. So you can see they're drawing a car. They're drawing the process. They're drawing different icons right here on the side. So you can do that as well as I was saying in on, uh, equipment part. Basically, as you can see, they're using a ruler right here. So everything is nice and evenly spaced out. You can see that these different patterns are even on each side you can see a great right here. You can see the icon right here. So, as I said, you can do that as well. But as you can see, they're using exactly the same thing. So they're just writing description and then just some scribbler lines to indicate that that is going to be, Ah, paragraph on that page. Now you can see this example and they're using this for the images. This is going to be the text. As I was explaining about the imagination, there simply dots right here, and you can do this as well. So as you can see from just these few examples and I really encourage you to explore as much as you want to see which of these styles actually fits you and your projects, and you can really make it as complex or as easy as you want, or if the project requires something a bit more complicated, maybe you can involve in your design process something like this. So extremely easy, extremely simple, or perhaps something like this where maybe you're going to include a bit more colors and a bit more drop shadows or something like that you can use markers, as I said and you can see right here and I'm going to include thes printing templates, which I'm going to give you for discourse. And I'm going to include different mobile devices and different shapes, and I'm also going to include one for the Web browser. So if you want to use them, feel free to print them out and use their Maybe it's going to speed up your process a little bit, especially when you have to draw all of these different boxes. Is going to really take you a lot of time to make this perfect spacings and to measure everything So not to lose any time in your designing and wife Remi process. I'm going to give you these templates, which you can freely print out, and you can then use them in your projects. They're going to look something similar to this. But as you are going to be able to dulled and to see their going to speed up your process immensely and later on, when we actually start with the wire framing design process, I'm going to show you how you can print them out and also how you can use them in your via framing process, so that's basically it for this video. As you can see, just by scrolling down, you can see all of these different examples, different complexities, different ideas, different colors, shapes and so on. But basically everything boils down to these four shapes, which I was saying images, bottoms, text and fields so you can see different categories right here you can explore and go into a lot of details. A lot of people are doing this, so basically they're cutting all of their right frames and then gluing them onto a wall or pinning them to some boards, for example, and you basically end up with something like this. So once again, depending off your client budget depending. Or if you're doing this for yourself in just for yourself, in your client, or if you're doing this as a part of the big team. So everybody have to be involved inside off that design process. It's really up to you how you're going to convey your ideas and how you're going to present them to your clients. 6. Printable Templates: All right, so I want to show you how all of this works. Basically, I'm going to give you these four different templates, which you can print on your own. Or if you don't have a printer, you can easily go to a printing shop and simply print out all of these templates, how many of them you need or conceivably use a blank sheet of people like we talked about in the previous videos. So what we have here are iPhone templates, and you can see the iPhone templates with spacing around these templates so you can quickly add your marks or something that you want to say, or to remind yourself later way have out Samsung Galaxy template. We have a frozen template, which looks like Google home with these bar bets top so you can use this space below its two simply drawn it. Or, as I said, if you don't want to, you can simply using Thetis or even simply use people like this and then sink. You draw on your Web design, for I have right here and because Apple Watch is too small, I simply used a lot of them as you see right here to correspond with the remaining space on my page. And all these are a four, but you can simply adjust them inside of your favorite program, or you basically prints them toe be US letter size if you want to inside off your printing software. So how can you actually use any of these? This one? You seem to have to start drawing. And as I said, you can use any pen or paper that you want or need thes so they don't distract us. So, as I said, you can simply use any piece of paper and a pen that you want or that you like. And as a zoo saw in the video, which is shown previously with all these different examples of how people are using these wire frames and drawing on them, I would be that once again, you can make this as simple or as complex as you want, and it's really ease. It really is up to you up to your talents, up to your time, up to clients, time and, of course, clients budget, because I just want to quickly mention that one more time. You don't want to lose too much time on this part of the process because the actual design part of the process, once you get your favorite softer is what is going to take a lot of time. So wire frame ings are just that bridge between the ideation part and the execution part. So I'm going to show you a few different methods here. So for the image, you can simply draw a nice rectangle like this. I would say that you have a text little bit so we can, perhaps into something like this. And we can maybe show something like Do you support a title and a few off the smaller ones for the pattern of below And finally, for the button, maybe we can add around a button. So something like this, perhaps, and that's basically your card. Let's call it like that, then next level you can do exactly the same thing. But, for example, maybe you can add a nice illustration. Let's say a mountain in the sun or something like that, and perhaps people can then understand a little bit better than this is the actual image. Then perhaps maybe we can add a title like so maybe we can add a paragraph like so and maybe we can add a button right here. So exactly the same thing like we did right here. But we're going to type in, for example, Bt. And so people actually know that it is a button in question. Then after that, perhaps you can add one. But for this one, perhaps if you want to add image off a mountain here, you can, perhaps, and euros catch. So maybe you can draw something like this. Maybe centrally, this. Maybe we can have a son here. Maybe we can add some trees. So, as I said, all of this requires your time because you saw Hamas. How much faster we draw. This one saying is with this whole. But this one is taking us a lot of time. So, as I said, it's really up to you and up to clients budget. Perhaps you don't know how to draw. Maybe you don't want to draw. So perhaps you can adjust all these different styles toe what best suits you as well as your client and your project. So here, maybe we can add, let's say, yo, stone park. And here we are going toe right the entire paragraph. So I'm not going to do that. And finally, right here. Maybe we can put in a lot more. And maybe I can even add a drop shadow behind this button so that I know later on in the design that are going to use this drop shadow so you can see just with these three styles how how different they are, how much foster is this as well as this. While this one takes a lot of time and a lot of exploration, especially if you're drawing characters, for example. So you need to create, let's say, a male and a female character, maybe your child character, so that is going toe take a lot of time, didn't simply putting an icon like this. As you can see, it's a lot faster. It's a lot simpler, and all of you in the team are going to understand that this is actually a person I call. As for the entire layout, ghost quickly for this speech. So maybe you can use something like this, so maybe we can go with first. Stalin should do, Which is this one, which is the most easy one to understand So let's say we're going to create a Web page and we need something like this. So let's create hero image right here and inside of the hero image. Let's put a nice big title right here. Let's put a paragraph right here. Let's put a bottom right here. And maybe we can put a nice big image right here so that we know that this is the image. Maybe we can add a navigation right here. So I usually like to put in a circle, maybe putting a few of these alliance like so. And maybe I can put in a search right here at the top, and I can call it hero wits. Let's see, caller Benji, which is a hero image with the color background or it death below death. Maybe we can put in a nice big title. So something like this maybe with a paragraph below it. And maybe I can include some features right here. Maybe I can add the name of the future like so. And perhaps maybe I can include some kind off icon right here. So maybe I can just putting a star for now so that I know that these are the icons which are going to come right here and below. Here. Maybe we can include some paramount, so you can see how easy this is. And I can simply putting futures here. And maybe I want to add some kind of a background shape or a background color or something like that. You can draw it in. So let's say the shape that goes like this and I can simply include another arrow right here, another note and I'm goingto writing Let's say shape like so then below that maybe we can include a video. So maybe I can simply include a boss like this with a plate icon inside. So everybody knows that death is a video like So maybe this video shows futures off this website, then below that, maybe we want to include a nice big fault action. Let's say that we want to include a text, then paragraph below. Maybe we want to include the form right here so I can even write in the meal and then dtn this is going to be a call to action and maybe this is going toe contain a background image . So be Jeep. I m G s a background image so that I know that this is a background with an image. And I want to include, for example, a nice big title here, description or the service and then email and a beauty then below. Dad, perhaps we want to include song. Let's say testimonials. So maybe we can include a nice big image right here. Maybe we can include a title paragraph. Then I'm going to include some arrows right here. And if you want to, you can add a pagination right here just so that the visitor knows how many off these they are left, left, right, and we can call it testimonial. Perhaps this next section is going to be a team section. So maybe we can divide it into three cards. Let's say and maybe we can also include Ah pagination right here. So perhaps we can add a title and a nice B paragraph. This is going to contain images off people, then title I name than their position and maybe their social media icon. So you can simply replicate what you did right here. And if you want to remind yourself a bit later when you're should start designing this inside of the psalter. If it passes with your client, then maybe you can draw a nice big barrel right here and say that these are social media icons just so that you know, a bit later on what they are in this entire sections. Two b team section. Then finally, maybe we can include further right here. So this is going to contain a local. Let's say right here. Maybe I can even included. And perhaps some menu navigation are going to come right here. And then we'll see orginal cooperate and maybe 2000 and 21. Let's say that that is the year. So basically, you can see how easy it is to create these wire frames and how easy it is to basically navigate between all these different sections. So you can see, uh, with a bit of work and a bit of time, you can easily create them extremely, simply extremely easily. But just enough. So did you in your clients or 30 members know what they are, what they do and what they should represent inside the design process. So in the next video, we went to actually start creating our wire frame on a piece of paper. We're going to use iPhone templates, which issued in this video because we're going to create an iPhone wire frame for the imaginary and later on inside off my favorite softer Don't be XY. I'm going to show you how you can add some spice to it and how you can add images perhaps, um, colorist and so real text which are going to generate to create nice looking app, which is basically a bridge dead between the wire frame and the cold part off the design process. So, as I said in the next video, we're going to take a look at how can we actually start creating fire frames, which actually means something? Because all of this done from my head just to show you some examples about how you constructor off my friend like this. So I'll see you in the next venue 7. Drawing your wireframe: All right, let's now start with drawing a wire frame in a set. In previous years, we're going to create a wife ring 40 I phone so you can print out and use this template, which I provided for the iPhone. It has not right here at the top, so it can accommodate all domain requirements for deep iPhone app design. So now let's start, and I'm just going to use thes three screens. And obviously you can print out as many of these as you want because your project might require, let's say, 20 screens. Some projects require 200 screens and so on, and you can also use the pdf, which is provided, and adapt this to as many screen as you need. So you could have, for example, five or 10 screens like so. But I really recommend three, because I found it to be kind of optimal value and optimal number, because you can really jump into details and see as many big details and small details as you want. So let's not start with this screen on the left right here, and I'm going to create a simple home screen. So what I would do is draw a nice big toe bar right here, for example. I'm going to in local in the middle. I'm going to use the search icon right here, and I'm going to use menu Icon right here on the left because people are going to be able to hit, search and to search, obviously. And this is going to be sort off timeline or a social Media page or something like that. So posts from your friends are going to appear right here. So now let's start with the Post and I'm going to draw a nice, be cracked Ingle like so, And it's going to go all the way up to here to the top bar. So first on the left, I'm going to draw a person icon. So it's going to be the image of a person name of the person and obviously the time, for example, when disposed words made and I'm going to do the three dots right here on the right, for example, to indicate that you can let's say, open up that for more information now, below that, we're going to include, let's say, a line off text, like so maybe a description for the image and below that, the image itself. So it's going to go like this, for example. And let's say if you're going to draw these mountains that were drawing previously to indicate that this is the image itself. Below that you're going to have three icons. So we're going to have heart cycle with the counter. Let's see, 125. We're going to have the common tycoon, Let's say 36 we're going to have to share icon right here. You can use any icons of that you want, and I'm going to simply typing share right here. No, we're just going to cut off our rectangle like so to indicate that that is the post itself now read and creating the second rector will be low. I'm going to use the TEP bar right here and draw a nice big are here first. I can't. I'm going to draw his home, so I'm going to draw a nice, simple home I gotta like so then we're going to use the common type on. So perhaps maybe this is going to be the checked portion. Maybe this next portion can be a member portion so where were your locations? Wherever you moving about and finally profile right here on the right. Now let's draw. Second card here is going to be exactly the same as the first card so we can go to here. So we have a person right here their name, Time on post. As you can see, it's much simple when you created one so duplicated, basically and create other ones that's cuts off this with image right here below. So we're not going to need to drop these sharing icons below because we don't have any space. But you can simply indicate that they go right here, for example, like so as in protecting share here, not for the next screen. We're going to use exactly the same set up so search logo and menu Michael and is, as I said in previous videos, and you can see right here this doesn't have to be perfect. It can be really scribbles, but it needs to convey the message for your team and when you're sending this out to your client, so basically what's going to happen in this next screen is person is going to be tapping this card or this image, and the image is going to expand a little bit in this next screen, giving us the more real estate on this screen, to show the image a little bit better so that we can perhaps leave a comment or something like that. So we're not going to have this friend on the screen because, as you said, it's expanded. So we have the same set up for here saying for here. But right here we have the bigger image. You know, before I go all the way down, I'm going to simply drop that bar once again just so that I can limit myself with the space that I have and once again, these because I don't have to be perfect if you want to save a bit of time. As you can see, I made a mistake right here, but it speaks it. If you want to save a bit of time, simply drove them Aziz best as you know, but basically all they have to do is conveyed the same message right here. So let's extend this image all the way down to here. Let's say I think that's fine around it off and simply draw a bigger shapes. Then you did right here to indicate that it's a bigger image. Obviously, no, let's do these icons. So 1 25 this one is for a comment 36. And finally, these arrow for the share and below. Here we're goingto be drawing in a field for the comment itself. So I'm going to a nice big rectangle like So, for example, we're going to put in a smiley face just to indicate that person can add these emojis, for example, until rights right, uh, Colman's, for example, and finally this icon, which indicates send or post Hari once, and it's basically our screen. Maybe instead, off this search Mike on, maybe we can include a back icon. Let's say so. This is why wire frames are great, because you can simply go in and remove anything that you don't like. You had that white thing to buy in every bookstore or whatever. You're finding your supplies to cover it off if you want to. If you don't want to, or if you're going with a pencil, you can simply remove the pencil razor and then simply believe the space for your arrow. But you can also do it like this because the whole point of the wire frames, as they said multiple times throughout these lessons, is to make sure that they are fast. Make sure that you can generate with quickly and make sure that you can go back and forward between your ideas and bounce your ideas between you and your client. Now, finally, on this last one, we're going to show the profile screen. So once again I'm going to drop this bar with search logo and menu and this man you can, for example, expand to a few different things because, for example, right here on the bottom there, we don't have settings. We don't have payment. We don't have any of those things. So that's where the menu comes in. No, let's draw a nice big image right here, like so this can be the name. This could be the location, for example. No, we're going to draw in three tabs like So maybe you want to include different images. Let's say from different albums, and this is going to be our selected stab, so maybe we can fill it in as well to indicate that it is selected as you can see right here. And finally, let's draw in a few images right here. So maybe we can create a great for three images may be creative till may be great, for it's really up to you. You can use this, Mansour great. Which indicates that these two are like this. And then this is one major image and then switch them around. So really, you can do whatever you want right here. It's really up to you. Perhaps you can add in a description. Maybe you can add in a paragraph about the person right here. But I'm not going to do that. I'm going to simply draw in a nice big bar right here at the bottom once again. So I went in comments, icon, paying map. And finally, because we are on the profile, we're going to fill in the profile icon, which once again indicates that this is the clicked state off this profile. I call so you can do something like this. Now you can see the difference between this one and this one because this one is filled out . And that's what we're trying to convey. Finally, I mean, we can add three more images right here so that we have a nice, big, great off images. Or you can simply drawing a nice big image like this than second image below 30 below seem like we did right here, just without all these frames and information. Now, if you don't want to waste time withdrawing this, then you can simply do this. Do indicate that these are the images because, as you can see is much foster. And because these shapes are repeating themselves, maybe you can simply do this for the image. So your client or your teammates, for example, or you yourself know a bit later what this is. So that's basically it's This is the design that we're going to use to create it in all of these other Softwares. Perhaps we're not going to do all three. Maybe I can do just this once to speed up the process a little bit, because in some of those I cannot import these icons. Maybe I can use some other icons and sold, and I'm going to show you that a bit later in the course. But basically this is how our wire frame is going to look like and later on, When we get to Adobe Xdd, I'm going to show you how you can easily adapt these wire frames and how you can include some additional colors. Maybe you can include some additional icons. Maybe that we didn't include it right here. I'm going to include some images, obviously and so on. So that's what I'm going to show you when we get to Adobe X'd part now when it comes to this part. Once again, I really encourage you to try to convey your images best as you can. But as you saw with this back arrow, sometimes you're going to remember things as your drawing. And that's the main point off wire frame process is to explore. None of this is final. None of this is perfect because it doesn't need to be perfect. And it's really about exploration and about finding the ways and methods where you can incorporate these elements So they look great on page, and they work logically basically, so they are easy to understand their easy to use, and they look great on the page. There's basically it for this wire frame, in part on the paper, really encouraged to start exploring it. It can be a lot of fun, and it can be really fast process to learn more about your design and the entire process off your app before you even jump into a favorite software. Speaking of software, in the next lesson, we're went to start exploring some of these free and paid options, and later on I'm going to show you how you can do this in adobe eggs deep and include different images and include different colors, maybe even some borders of background shadows. And we're going to explore that part later on in the course, so I'll see you in the next lesson. 8. Digital Wireframing Tools: in this section of the course, we're going to explore digital wire framing tools and what our digital wire framing options that you might have now. There are many different options out there, but I'm just going to give you four different tools for shop, and then we're going to finish in a Toby X'd. You can also use figure mind. You can also use sketch, and there are many, many, many other tools like Illustrator, for example, and so on so you can use any tools that you might find suitable for your needs, your projects and your business, as they said multiple times in a paper wire framing part of this course. I really adore Adobe X'd because off its versatility and its functionality. And that's what I choose for my wire framing and for my, um and UX work. But you may choose whatever you might find suitable for you now tools we're going to explore apart from four shop and adobe ex d r wire frame dot cc just in mind, Mark plus and balsamic at the end. So we're going to basically explore all of these tools, and I'm going to show you all of them have free versions, and some of them have premium versions. But I think all of them have praying versions, but you can start with all of them for free. You can explore them and see if there are right fit for you. Or if not, you can simply explore some of these adobe stools, fig, MMA or sketch, So let's get started. 9. Tool 1: first. Still, we're going to explore his wire frame CC and its first because it's the most limited off them all. Now, when it comes to far from CC, you can choose your device right here. I'm going to choose the web because it's just the easiest one and the most white off the mall. You can simply extend it down if you want to include multiple devices, and your device can be as white or as narrow as you want. So as you can see, you can do this and you can even do this from the site now controls. That should do you undo. But if not, you can simply extend it back like so, and it will snap into position and into place. You have some commands right here, like undo or radio, and you have some more options right here. You have these settings right here, and when it comes to saving when you click, save it will take you here so you have a public urinal, which you can copy and share with your team. They can believe comments, as you can see right here, and it's free for private projects. Malta packager clickable wire frames, reusable master pages. PDF and B N G exports. So if this is the right fit for you, then go ahead and choose this and start away for free now to start with our wire frames. As it said, it's extremely limited as a tool. So what you have to do, basically is you have to draw these options, and I'm going to do this for our icons that I'm going toe. Draw something like this. And as you can see, you can choose the text option, and I'm going to simply climb being logo. If you remember what we did before, and I'm going to click on this one hit control C and then control V to copy and paste. And I'm going to use this for our menu options so you can see how limited it is. Basically, you don't have any options, at least not in the ones which I founded that you can perhaps position icons inside position images and so on. But as they said, some people may found it easy to understand and easy to use, so that's basically what you can use it for. So let's no just simply align this and not waste any more time. This greed is a great option. But you can do this, for example, and let's do this. Let's include an image because that's going to be the image off a person. And let's maybe duplicate this text on. Maybe we can position it here. Call it a name and you can reduce the size of this text like so. And perhaps we can do another one and call this time off posts, maybe, or something like that, and we can maybe even reduce it further and position it right here. Now we have one more icon right here. I'm going to simply draw a nice big rectangle. Maybe I can include it to be a circle or something like that. I'm going to position it here, then, below that, we have the description off our image, so I'm going to simply draw a nice big rectangle like this, include a text, and that's going to be the description off our image, basically, then below that, maybe I can include the image itself. So something like this simply click on the image is you can see some of these tools are really easy to use. While other ones are really complicated now for the icons. Maybe we can use this shape. Perhaps position this to be right here. Maybe I can call my shift key or something like that and position it here. Then maybe I can copy it. Listen politically cornered. If it wants to click, his exceeds extremely annoying. So maybe I can select it like so Control C control V To make a duplicate of it, I'm going to position it right around here, Then control the one more time for another duplicate. And this is going to be basically heart. This is going to be comment, and this is going to be share. Now you can use the text you saw, but I'm not going to bother you with that. And one final thing that I want to do it simply draw a nice big rectangle around it all. So something like this and I can position this rectangle to be somewhere around here. Maybe like this, and you can click right here. It says around arrange elements and you can send this element toe back, and then you can play around with all of these additional elements and you can very positioned, and however you want to make sure that everything is in the center like this, you can click here toe, remove this line of text so it fits and we're going to maybe position guests like so maybe we can move this about. I can click right here, position this right here, for example. And that's basically it for in this shape. Now you can simply select all of these, like so hit control C Control V to have a duplicate over like so Because if you remember from our paper via frame, that's what we did. And perhaps maybe we can select all of these. Let's see if it works. It doesn't. So you have to basically select all of them toe, move them. As I said multiple times, it's really complicated, unnecessary, and it's really boring to do all of these things. But basically, if you want something which is extremely simple, as this still really is that you can do get away with this stuff. One final thing that I want to show you here is how can we add our icons right here at the bottom? As you can see, there is some weird thing going on right here. But let me quickly adjust it like so maybe I can bring this even further like this and for the icons at the bottom. Maybe I can just use some of these circles. Maybe I can position it all right around here. Hit control C Control V A few more times like this, and I can have my four. I construct the bottom something like this. Then maybe I can select them all, and you can see that it wants to create a new shape. It doesn't let with you select those shapes, Aziz said. It's extremely complicated to navigate, but once again it's free. And as you can see, we have done and completed our mock up. So basically, you will have to do a lot of explaining here because, as I said, you cannot include any icons or images or something like this. But as you can see, it does the job. So if you want to explore something like this wire frame dot cc and I'll put the link in the pdf toe. All of these tools, all of the resources which I'm going to use in discourse so can simply access them with a click. So why Frame CC is a first toll? And in the next video, we're going to move on to the next tool so that we can explore some additional tools that we can use for online wire framing, so I'll see you there. 10. Tool 2: next tool we're going to use is Mach plus, and you can see that you can use it for free for 15 days before your purchase. So if you're not interested in this, maybe you should find some additional free versions or free other software. But letting quickly show you what it offers so you can see has fast integration. You can use it for prototyping. You can use it to include images, so it's much more elaborate than the previous tool, which I showed you. So when you download and install this on your machine, here is what you're going to get so you can choose whichever device you want. Toe create your wire frames for you can simply quick create. And this is what you're going to get behind this. So here is what it looks like. So right here on the left, you can choose these pretty find components, and you can click right here on these extension. You can choose whichever layout you want. So as you can see, it's extremely complex, extremely complicated, but it doesn't need to be. You can simply draw however you want. So here we have a navigation bar. So perhaps I can drag and drop it right here. But it's showing me the android navigation bar and I want to I US navigation bar. So if you don't want to use it, then you don't have to. But as you can see, we have the action bar right here, and this is what we're going to use. So instead of action bar, maybe EC insight being a local right here, press enter or return. And this is what we're going to get. And if you have any additional icons which you can use either PNG or SPG, you can drag and drop your icon right here. So you can simply double click right here and open this up. You can also click right here to see these additional layers and so on. But you can see we have the action bar right here, and we have all of these additional setting so you can even change your text name right here so you can change icon color right here. You can choose the phones. You can choose the color off the background and so on. So you have all of these different style so you can click on these additional styles to see whichever one you want to use. It was, You can see right here. Let's keep exploring and find some additional things that we can include. So we have all of these static elements. As you can see right here we have the charts. We have the mark up. So if you want to draw something and then share with your team, you can do that as well. So you can simply drag and drop whatever you want inside. And here we have the icon, and perhaps I can position. It's somewhere around here, but I don't want the icon so I can simply hit. Delete. What I want is the image so I can drag and drop it inside. You can hold your shift key and position it right around here because that's going to be a person image. Then let's drag and drop some text right here and for the label making. Maybe we can include name off person. Somewhere around here, you can hit control. C control one more time. Seem like the other tool. Maybe time off, post something like that, and you can hold your shift key toe, reposition them so already the stool is a lot better than previous tool because you have a lot more control over these features. So this is going to be a description off our image right around here and below that it's going toe contain the image itself. So simply drag and drop your image right here. And perhaps I can reposition it to be somewhere around here. Let's see like that. And now we have to include some additional icons. So when I click right here you see, we have all of these icons. So if you remember, we had the heart, we had the comment and we have the share icon. So let's search for heart. Here it is, and it always populated in sight. Now what we need is a text. But before we move on to debt, let's include other ones or comments. Check box. Here it is. But don't prompt me about this again. So here is the comment right here. And we need to include additional I consulate search for the heart. As you saw, you're going to get all of these additional pop ups annoying to show you that you really need Teoh purchase this still. But if you don't want to. You can simply continue for 15 days as the show you on their website. So let's duplicate this like so And now let's try to comment like this. And now it's duplicated one more time and we're going to type in share like so. And now let's jump into the text so you can click right here and drag and drop subtext. So for the heart, let's see 1 25 like this and you can duplicate it. So control C control re positioning here. Maybe we can typing No. 86 let's say and for this text, maybe we can typing share like it is. So something like this making capital s like so and you can hold the shift key to select both of them and give them a bit more space. And this is great because you can see all of this spacing happening, and you can simply select all of them and simply adjust them toe fit however you want. So, as I said this to is already a better toe than the previous one, which I showed you. But if you I don't want to pay for it, you can simply use the previous one or find additional tools which you want to use. Now we need a Nikon like this right here. Maybe we can use this one, but not to bother you and waste any more off your time that simply select all of these and see if we can group them like this. So simply hit control G. And it's going to group them. And you can rename your group like this and for the name off the group. Maybe we can typing, for example, in your life like this. And perhaps maybe we can duplicate that one so we can copy. And we can maybe paste right here. Or maybe you can even do it from here. So control C control V like this. And this is going to be a image to, for example, like that and very hurt. We have our layout ready to go, and you can share this with people on your team or with some other designers. And you can save it from here. You can export it, for example, as being G, and you can share that with your clients. But one final thing we need right here at the bottom are our options. So lets include that. So now let's include our icons. And from here I'm going to search for home. Here it is. I'm going to click and I'm going to position it right here, Down at the bottom Hit Control C Control Veto. Make a duplicate of it. And right here we're going to use that comment one like So it's going to populates and you can align it like this. Hit control C Control V and let's use map. Perhaps that's even has the pain It does and finally control C Control Re for the profile. Here it is, and maybe we can use death one. So, as you can see, this stool is really easy to use once you get the hang glitz. And this free version can really get you there. And it can really help you explore this wire framing process in the digital form as you might not notice. Or if it did. I didn't created the frame around it because I think it doesn't need it because it shows this light great, um, bar around it. So I think it's going toe look really cluttered right here. So, as you can see It's extremely easy to use these, and it's extremely easy to work in mock plus. So once again, if you like this sort of thing, if you want to explore this stool a bit further, you can. And if we jump back to here, let me check out the pricing. I'm using this one mark plus B r, which is what I download it, and you can see how expensive it is, basically, is $200 per year. So it's a lot more expensive, in my opinion, than adobe stools, for example, so you can use a sweet off to Jules, I think, for $19 a month, so that's already almost a lot more cheaper. 10. This. But you can get away with professional version off Adobe Exit, for example, because the full adobe suite is a lot more expensive, obviously, but once again, it gives you a lot more options. But you don't have to pay for Adobe X T either. You can use the free plant forever. Basically, you're just limited with few off the options, but I just wanted to show you that you have this option as well, So if you want to explore it. And if you want to dig deep into Mark plus, there you have it, you can download it and I believe the link in a pdf file, which you can download and click on the link and then simply visit this website and download Moke plus and try it for yourself once again. As I said, it's 15 days free trial, so check it out. You don't have anything to lose because it's a free trial. And perhaps you might even like it. So that's what that was it for the mark plus and I'll see you in the next video. 11. Tool 3: next door, I'm going to show you. It's called just in mind, and they have this free wire frame until for Web and mobile projects, you can see that works on Mac is Bella's on Windows, and you can click right here to download it for free. They will ask you for a free account, and once you're 15 day free trial runs out, your beat continued with the Free Forever Plan and Free Forever. Plant just covers this wire framing to which is basically what we're interested in, but they have all of these other tools. So they have you. I kids they have. You can see private mobile collaboration requirements, integrations with other tools and so on. So for all of that, you will have to pay. But for the basic wire framing to you are able to use that for free. So if I scroll down here, you can see that you can create high fidelity prototypes. You can see what it's for. You can include images, and this is what it's great about. It is that you can add these interactive fields, for example, interactive forms, and you have all of these pre prepared elements that you can simply drag and drop in include into your own designs. You can see some companies which are using it. You can see how it looks like once you emulated, so you can basically preview your prototype and see how it works. And it's for all those basic things, like as you can see right here filling up the forms, filling up some of these calendars, for example, so on you can drag and drop images inside you can crop images include different funds, different styles, colors and so on. And you can see you can integrate it with all these tools, including Adobe X'd, and you can see that you can try all features for 15 days, and you can then be switched to free forever addition. And you can see the difference between free and professional here as well. I was leave. I'm going to leave the link in the pdf file, and you can simply access it and then read all of these things. So to get started, this is how Justin might looks like. And as I said, you can import new from these files, or you can start with the new prototype. You could simply quick there, and then you can choose from all of these different devices. You can go left to right to switch between the devices because I am showing you iPhone X example. With this not yet atop. Let's simply select that and you can start with all of these different people parrot elements. But we're going to simply start with empty orientation in Portrait Click Finish. It's going to start loading these widgets and Justin mind prototype er and all of this I'm showing you in this video is a desktop application, so you have to install it on your computer. But the trouble is, it's taking all of the assets from inside the software from the Internet. So as you can see it's taking. It's time to load when I'm going to show you. When we start creating our layout and we start importing our icons, it's going to take a lot of time. And that's in my opinion. The worst possible thing about this software is that it's taking a lot off time so straight away you can see that it looks a lot cleaner and a lot nicer than the previous example I showed you in the previous video, but still, it doesn't look that complicated. It looks familiar somehow, because you can find all of these tools in all these other Softwares. So to get started, let's quickly run through and see what everything does. So you have your basic tools right here, and if you hover, you cannot see what everything does. So you basically have to click and you can see that's a major drawback, in my opinion. But you can basically go file and you can export to document, and you can export to dogs or customized document, and you can. Then you can save us images, and then you can share with your client and so on. And basically what you feel right here is view on device. So you have to install the app on your mobile phone, and you can then connect this software with your APP on your mobile phone. Second, directly, preview it on mobile form and you can also simulate, So when you click right there, assimilation will open. And that's what I showed you in their example. So let me quickly find it. Here it is. This is the simulator. So once you're done with your design. And while you're designing, you can always go back here and check it out inside of the simulator and see what you have done. So basically right here at the top, you have your basic toolbar. You have user interface comments, side map scenarios and requirements. As I said, this is just the free version, and all of these are coming a spade versions. So you have to pay toe access comments from your client's site, maps in areas and so long right here, you're going to see the items, and this is basically the layers panel. But just their own bad version on might say so right here you have these regents, and this is the main issue I have with this app is all of these widgets are a loading from the Internet. Basically, while that might be a good thing for all of you with slower Internet connection speeds, it will be terrible thing because it's going to start taking you a lot of time doing all of these basic things. But I think it's great to have this option just I found it to be extremely slow and extremely TD's, so it here right here is some of these basic elements. We have IOS components, and you can see all of these down there and you can see some basic iris icons right here. So what we need right here is we're going to need some. Let's see forms and controls. Maybe it's there. It's not. So perhaps it's bars, menus and tabs because we need the stop bar right here and basically you just click on it, drag and drop it like a show you In the previous example, we're going to type in local right here. If you remember from a previous example and a good, simple del click right here and delete this. And instead of searching for a search icon, maybe I can even do that. Let's go all the way down. Here is the search. You can simply drag and drop it into position right here. I'm going to nudge it in place just a little bit, and I'm going to simply in delete this icon. Simply click, delete and then simply, you can hold your shift key and simply not this, and you can see it's outside of the top of bar so you can simply drag it inside of the top are. And now let's continue to create our layout. So first thing we need is an image, so I will scroll all the way up right here. Goto basic. Here is the image you can simply drag and drop it inside position right here so you can see straight away. This is a lot easier tool to use than the previous one I showed you. We're going to drag in the text. I'm going to typing name, for example, or person named name. Let's call it that. And what's great about it is you can simply increase or decrease the size. So, for example, let's use 18. But I think it's too big. Let's go with 14 you can go control C Control V to make a duplicate it. Position it right here. Maybe make this smaller. I care. So time off post. Let's say just so that we know what it is, and you can select and bold by holding shift and simply position them in the middle like so you can even go further and reduce this even more to something like this. Then position them right around here. Anything that's good. What we need right now is that menu icon. So let's go all the way down until I see it right here and let me quickly show you. So if you go right here, you have this search. Click there and just check out how long it takes to find it. So I'm going to simply type in menu. I am finished typing, and you can see how long it takes it to find it. And this isn't the hi corn, which I was searching for. So when I click right here, click my backspace key. You can see how long it takes to go back. You can also click this X, but you can see it's going to start loading. It's going to start to deleting. So basically, the whole lap is going toe cloak up, leading pause the video until it cleans up. So once it does, you have simply scroll right here. So find the icon that you're looking for. So let me see which one it is. It's this one. So basically, we want to include this more. I can't right here. I'm going to nudge it into position. I'm going to duplicate this text. Position it right around here. Good to call it description off you, Mitch, which is posted, for example, something like that. Then what we need is an image. So I'm going to simply drag and drop it into position somewhere around here. Extended to here so you can see straight away. This is a much better example than a previous video which I showed you, but still extremely slow and extremely tedious to do all these things. That's why I adore Adobe X'd. But we're going to get to it in the later video. So I'm going to drag and drop my heart icon. Position it right around here. I'm going to scroll down to see if I can find a chat icon. Let's use this one for the share and shed is somewhere around here, I think here it is so drag and drop it into position. I'm going toe click right here, duplicate this post and let's use 1 25 for this. Maybe nudge it slightly right around here. Let's use let's see 84 for this, maybe, and let's duplicated one more time for this. Call this share like so, and you can simply position it wherever you want. And that's another issue I have with these Softwares is that you cannot be completely sure where these guidelines are. And that's why I love Adobe X'd and Adobe products in general, because it's extremely simple to find them. That's simply select all off these. Let's go to here. Let's go align center Sorry, not all in center, but align middle like this and now they are aligned in the middle. So once we finished that what we need is a basic shape. So I'm going to choose my rectangle drag. Its were around here, let's say And here it is. I'm going to double click right here. Call it G. Just so did I know what it is. I'm going to drag it all the way down just below my image and then select all of these items like so by holding the shift key, right click and then group in dynamic panel because if your group in master, it will create a master component. Basically, from this which we don't want. We just want this group and we're going to call it image one. Another drawback off the software is once you double click right here, you cannot command A or control A. As you can see, it doesn't do anything to select this text. You basically have to do this and then type in your name, right click on it, duplicate, or you can hit control or command D, and we're going to position. It's somewhere around here saying me, remove it slightly to here until it aligns, and that's basically it for our prototype. All we need to do right here is create a tab are so I'm going to go right here to bars, menus and tabs. Locate my bar. Maybe this one. I think it's going to work just fine, positioning to somewhere around here. And because we only need four, we don't need five. You can double click inside. For example, Just go to the option C where is hit? Delete and then click right here and then simply extend him to fill like so Once you have heard it, you can simply rename these. So this is going to be profile. This is going to be locations. This is going to be, let's see shut. And finally, this is going to be home. So we need to replace these. I consider that basically means let's go back and find these icons so we can use this one for our profile or ice. I think I saw better one all the way down, but scroll down and see what it is so you can see this is taking you a lot off time. Basically, in any other software, you can simply integrate icons and there's in the drag and drop them into position. Or if you have purchased, for example, and I come back, then you can simply drag and drop that into position and use that. But with all these Softwares there simply too limited for my taste and they're taking too much time, let's see discomfort, Seiken, maybe for locations. Yeah, like so what we need for the chat. Let's find it. I think it's somewhere right here. Let's see here it ISS drying and drop it. And because we don't have home, I can't just going to leave this right here. So one final thing I want to show you with this software is when you click. Simulate is going to show this in process and open up a new window. And here is how that window looks like. So Basically, you can click and drag you can see. For example, if you have multiple off these, let's see if we can make that work. It's closed. This this is Palumbo to duplicates. Let's position it roughly around here, for example, just to see if I can show you debt as a real example like so. But what we need is to position tow bar at the top, like so so this can go below it. And if we jump inside BG bottom and if I see right here transparency is at 0% so did it stays flat. And once we quick simulate once again, it's going to open it right here. And as you can see, you can scroll down and see where it's going to take you because this isn't fixed, and you can see some alignment issues right here on these icons. But because this isn't fixed, for example, I cannot fix it at the moment right here, or I cannot scroll past this step bar. So as you can see, there are many, many, many limitations with software. But if you just want something that you can try, for example of play around with it then you can explore just in mind. I really recommend that you try all of these tools and just see for yourself if you have time, just how better the Adobe, X'd and Adobe products in general are. And also sketch and figment. If you like to use those tools in the next video, I'm going to show you Final One off these online tools. And then we're going to move on to for shop and finally to Adobe is where we're going to explore multiple tools which Adobe X'd offers you. And I'm going to show you how easy it is to use and basically dominate your wife framing game. So I'll see you in the next video. 12. Tool 4: the final one off these online tools, which I want to show you a school balsamic and Islamic, is perhaps the most well known toe online for wire frames because it's extremely easy to use. It's extremely easy to communicate your ideas with the designers, and it's basically a tool which your clients might use to send you their ideas. So perhaps they have some ideas. They put them down to paper, but they're moving it one step further with balsamic to create these nice looking wire frames, which everybody can understand. And if you scroll down on their website and what's again, I'll leave the link in a pdf file so you can check it out for yourself. This is how the wire frames are looking like. Basically, they're like sketches, and it's extremely easy for everybody to understand. You can see they're kind of fun and extremely easy to communicate your ideas with, and you can see some basic examples right here. So what you need to do is create a free account, and they're going to give you, I think, 30 day free trial, and after that you can start with $9 a month. This is helpful Islamic looks like. So once again, it's extremely colorful and extremely sort of like cartoon like so basically right here you have your wife frames you can create is many of them. As you want. You're going to see the notes right here. Alternate versions. You can see all of these tools right here at the top. You have the stool bar where you can choose all the different options, which you can drag and drop into the wire frame. So basically, what we're going to do is drag and drop in. IPhone inside. You can see with notch right here, and you can position it wherever you want. Like so what I'm going to do next is simply choose a rectangle drag and drop it into position, like so it's going to snap on all sides, and it's going to show me the middle. Next, I'm going to put in a text so complete right here, and I've bean text and let's see what we can do, maybe text inputs. So basically, just click is going to position it right here. I'm going to double click inside and call it logo press center, and you can position your text right here. Next, what you're going to do is use, um, Michael. So I'm going to start typing search, click, and simply position it all right here. Like so after that, we can use menu, and we have these bars so you can simply click and drag into position. And you can see straightaway how easy distal is to use typing image. And you can see image file outline. Picture outlined. I'm just going to use this image. Position it right here. And once again, you can reduce the size if you want to. You can hold the shift key in position it like. So I'm going to add a text once again. And I don't need this. Let's see, what other choices do we have? Let's see a line of text, perhaps Like this. You Condell click right here and call it a person center. And I can control C control. Be one more time and time off post like so press center. You can see how extremely easy and simple this is to use. And let's see. Oh, to size, text color. We can reduce it to hear maybe 16. Yeah, I think that looks good after that what we can do is more letting so maybe current down. We can use that. Or let's see if they have those dots they do, we can use thes one's position them to here and you can see straightaway. How is the stool is two years? I think this is the easiest tool to use out off all of these, which I showed you. Next, we need a line of text. So let's see a line of text position to hear a little click inside. And this is going to be description off the image posted, maybe for a center, and we're going to reduce the size to maybe 16 to match with this text. You can even nudge it up a little bit. Then we can use an image. So maybe this one. Position it right to here, and then I'm going to extend it a little bit. Maybe like so I'm going to use heart. Here it is. Let's use outlined like so next Chet or comment. As you can see, they have this icon but doesn't matter. That's position to here and maybe share like this one. Position it to here and let's see, maybe we can duplicate this one on it. I share, like so maybe I can move it somewhere around here. Let's do control. C control we one more time. This is going to write in a before, for example, and let's see one more. And this is going to be Let's see 1 25 like so, And you can see just in a few minutes. I already created what took us, Let's say, 10 or 15 minutes to create in these other Softwares. So this is basically the key. You need to like this to create these wire frames fast, easy and to make them make everyone understand inside off your team how this is going to look like. So let's see. Maybe we can use a tap bar or a button button bar. Let's see that bar. It is work bottom. I think this could work, but I think we need to create a new one. So let's use a rectangle drag and drop it into position. So all right, here, like so. Then let's use these icons home. Here it is. I'm going to place it right here. What we need next is Chet. Let's use exactly the same icon as this one. A position right here, then map. Let's see. Map in map Maker works fine. Like so and finally profile. Let's see, user position it here and then maybe simply nudged these icons left and right, and that's basically it. You can see how it looks like, and basically we have finished our wire frame. What I can do is simply select all of these and then make a duplicate of them and then do another one down below. Soto Group your layers. You have to select them because, as you can see, we have any layer panel. So as they said, Um, sometimes you're going to encounter some of these things, so it's much more important to deal with them as you work. So perhaps I shouldn't have created this like so. So maybe I can simply reduce the wit of this text input, like so So it's easier for me to select it, so you can then hold your shift key and simply select all of these icons and all of these elements like so, and what you have to do is simply go right here where it says group or you can use control G, Then you have to duplicate it, which is Control D, and then you can simply position it right around here. And if I scroll down is going toe cover over my tab bar. So basically you can click right here and send it to back and then simply bring it forward . And that's basically it. That's our wire frame done. And as you can see, it took us less than 10 minutes to create the screen, which is extremely helpful when you're creating a lot of screens and you can see it's a lot of fun because everybody can understand inside your team or your client what all of these elements are what they mean. But this still isn't what I would choose. I'm going to show you for the shop next, which is the greater, and it's always been a great toe. But it still isn't the tool which I would use for wire frames that will still be Adobe X'd because off its versatility, and it's basically made for this stuff. So that's it for balsamic. I really hope you like it. You can check it out. As I said, a 30 day free trial. You can test it out and simply play around with it and see what you can come up with these fund wire frames. And one more thing I want to show you is when you click more controls right here is going to open this and you can choose between all of these different templates. You can see what other people have created. You can include different colors, different shapes and so on, and you can simply choose from layout, templates, tutorials and so on. So it's extremely helpful. This stool is really great and a realtor command that you at least check it out and see for yourself if you like it or not. And one final thing I want to show before we wrap up. You have this share button right here, and you can share it with your clients who could send them the link, and they can check it out. But obviously you have to pay in order to do that, and finally, you can click right here where it says project. You can take a snapshot. If you have multiple off these Oregon hover over here toe export and then current wire frame to be in G or you can use a transparent background. You can also use wire frame to Jason appearing to code, which is great in working with developers. But that's basically it. That's balsamic for you. I really hope you like it. Go ahead, check it out. Have some fun at least until your trial runs out because they have a lot of these different elements. And they can also give you some inside about what a professional tool can look like. Because all of these elements you can use them yourself inside off other software that you are using. So, for example, you might not consider all of these different forms. So when you click right here, you can see all these different forms, and perhaps you can see some elements that you didn't use before, and they can give you inspiration to use them in your projects. 13. Wireframing In Adobe Photoshop: in this video, I'm going to show you how you can create that same wire frame mock up that we created in all of these other Softwares in Adobe for a shop. And in this video I'm using for Shop CC 2000 and 14. But you can use basically any other version. I'm not upgrading to the newer versions because I don't use for a shop for my main work. I just use it toe, edit photos and to manipulate photos and at some text when other tools aren't available to do such a thing. Because for shop is still the king off manipulating your images. Basically, what we have right here is our file, and you can jump right here to file new and this window is going to pop up. And I'm using 1920 with 10 80 at seven to resolution. Because we're working for the Web, you can simply click OK, and it's going to create that for you. This is what you see right here. I'm also using this screen, and if I jump right here, you can see it's 375 with 8 12 which is basically the iPhone 10 and 11 size for the screens . And I'm also using these icons Big I constant, and I'm going to leave the link in the description if you want to use these particular icons, which I'm using their premium icons. But I will also link some free icons which you can find and use in your projects. But you can see a real like this one because it's extremely versatile. It's extremely well made. It's extremely coherent, and it's also it also has a lot of these categories, and you can basically use these same icons for a variety of different projects, and they will always work no matter what you are doing back to our work. I selected these icons from this back. I simply drag and drop them right here using the move toe, and I'm going to use these icons in our project. I went to reduce the size a little bit, so let me quickly select him by holding the shift key and then holding my shift key once again because I want to make them nice and small because there is really no need for them to be that large. Granna went similar position and in dissenter like So, no, what we're going to do is we're going to start with Top Bar. Seem like we did with all the previous examples. You can click right here, but I'm going to click outside and simple type of logo we can use later. It's frequent front. I think that's fine. You can simply use your move tool. Position it right here. I'm going to click T and reduce the size. Let's see, maybe 24. I think that's fine. Making center aligned older control Click right here, move toe and then simply position it wherever you want on the campus. I'm going to click on my menu icon, and I wouldn't have to zoom in a little bit because it's a bit tricky to select all of these and I'm going toe, select them and then simply position all of them above my screen just so that I can see them. I'm going to position this to be in the center off my text and perhaps, but see 20 pixels is fine from the right edge. I'm going to rename it menu because all of these icons are coming without the name, so that's a drawback. But basically it's a majority thing with all of these I compacts to come without any mean. So you have to rename them yourself. But it's fine because for majority off icons you have to rename them. Anyway, I'm going to select my screen, position it to the left shift 12 and then rename this to search. I'm going to position it right here, go into position to menu right here, select all of them, click right here and then perhaps stacked into the top and then maybe 10 or 20 down so that I make sure that all of them are aligned perfectly like So now that we have complete that, you can see that this looks a lot nicer already than all of these previous examples, which is showed you, and we haven't even started yet. Next, we're going to use that rectangle toe, so I'm going toe, create a rectangle. Let's see, maybe we can position it to align with our icons, something like this, And let's leave it to here for no, we're going to publicly can call it BG. I'm going to position it all the way down, billow everything except for screen. And now let's start creating our elements. So we're going to start with a circle. I'm going to call it Molitor. Sorry, I didn't tend to change the name, so I hear. I went to position it right around here. I'm going to double click and use this same color, and I'm going toe. Make sure that an object, for example, 10 pixels Or we can use the darker color. So DDT, for example. And I'm going to use DDT for this as well. Just so that you can see all of these icons a little bit better. Now, I can simply click right here. Hit control C or control J or Commander. Click right here and typing. Name off. Make sure it's left the line and make sure to reduce the size. Let's see 14 works. Well, position. It's roughly around here. Control J one more time. This is going to be time posts like so in a way to select both of them, shift 12 and make sure that they are in the center like this. Just make sure to align them properly. And this is just me being a bit annoying with all of this. But you can if you want to just leave them without alignment. We went to position this right here is zoom in a little bit and make sure it's 10 pixels. Same like, our image is next. We're going to duplicate this position it right around here. This is going to be the description off our image Post image. Just so it feels more off space like so. And I'm going to position, for example, 20 pixels down. I think that works fine. Like so. And I'm going to make sure that this maybe we can show it, uh, with an outline. So perhaps we can use the stroke color for this, like so, but just smaller stroke. Perhaps one that works fine. If this is something that you want because you can then have white background as well, like so if you want to and you can call her your BG decided color. So I can simply cute. I sample and I need to unlock it first. And then a locket once again. Just so that I don't move it and then screen can be white. And here we go. If we hit control zero, you can see how that looks like. Now let's get back, toe our image. And instead of creating new shapes and going to hit control Jay on this one, I'm going to call it image like so. And let's move it right here so shit. 12 I'm going to position it right around here, for example. And then I went simply positioning to here it control. Click on my screen Lear Press V. Position it in the center. And now I have my image and my image can be this color and I can simply heat eight and then click right here to remove the stroke. And now I don't have a stroke anymore. And I can even reduce the wit a little bit more so 3 20 for example, just so that you can see it a little bit better and make sure that it's 20 down, like so maybe even send. Maybe we don't need 20 like so I think that works well. And finally, we're going to include icon right here, toe display. This is an image. So what I'm going to do is locate my image. I cant Here it is. She'd control G and then simply position it into place like so I'm going to enlarge it a little bit like this just so that it indicated this is my image in civilian and I'm going to move these two layers or right here, for example, image I see. And make sure it's in the center like this. If you don't like it to be this big, you can hold your shift old and left click on your mouse to reduce the size. What I also need is this avatar icon, So I'm going toe control J one more time, and I'm going to then select it and move it. You can see it's a lot harder to click because they're too small positioning right around here. Then move it inside a far better position it right here. I'm going toe. Copy this like so I CME for the icon to be shorter, make sure it's in the center like this, and there we go. Next. We need to create these three icons, but before we do, I'm going to duplicate this. Make sure it says 1 25 control J. I'm going toe. Move it right here. Make sure it's is 84 and controlled you one more time and make sure he said, Sure, As you can see, it's extremely stupidly simple to create all this in four shop. But it's going to be even simpler in adobe angsty. And I keep saying that, but I really mean it because I think that is basically the golden standard. In my opinion, for this wire framing and design work, this is going to be hard cycle. So CNN and I really like Teoh Name my icons because I truly believe that once you send this file to your developer, they're going to hate you with the passion. If you don't send the files with the proper names, because later on, when they start developing your app or whatever, they're going to have a lot off difficult time with renaming all of your players. So, like this maybe 10. What we need next is a comment. I console me located. All right, here. Here is selected Heat control J one more time, went to position. It seemed like a date right here. This is going to be comments. So position it or right around here and its position right here. Think that works fine. Same spacing as way to this one. And finally share. Let's move it right around here so that eight aligns it just doesn't online. For some reason. Let's try it again. Here it is. And for the share. Let's just include that share icon here is I'm going to select it. Positioning to here and I'm going toe and a large is just a little bit because you can see it's a little bit smaller than these other icons, like so, And make sure it's 10 right here. There we have it and when to simply reduce the size toe right around here. And there we go. We have created our image. Now all I have to do is simply Jews D's, which are left it here so we don't need image anymore. What we don't need anymore. Let's see, we don't need heart anymore, so we're going to delete it. I'm going to select all of these by holding my shift key like so hit control G to group them and they're going to be our Ted war icons or simply tap bar. Then I'm going to find my home. Here is simply not just right around here. It's going to be profiled right here. This is going to be map. Let's call it. This is going to be chat and this is going to be home. Next. I'm going to move that bar right here to be in the center off my screen. I'm going to position down. So shift one to, for example, and then let's simply move around these icons just a little bit. Maybe like this. Maybe like this. Maybe we could want profile like this. Then you can select all of them and simply click right here. It's going to distribute them evenly, then position it in the center and we have it. We have finished this part. Now the next part is to select everything, and I'm going to believe my search, my a logo and my menu out of the way. This is going to be a top bar, for example, and I'm going to group everything else except for a tear bar control G is going to be post one. She'd control J, and we're going to duplicate it and simply move it down. We're right around to hear. Let's move it. Let's see, 26 is down, for example, and it's going to be post number two, like so just below and inside of a star bar. Let's use the main color. So let's use a blue color three e c six ff percenter just to indicate that this is the selected icon and that the user is located on the home screen. So that's basically it for your wife framing process inside of the four shop, it took a little bit more than expected because I have to explain all these different icons and positions is somewhat, but you can see it's extremely simple to do. What you can do at this point is simply select all of these right click convert to smart object, then go into smart object and from here, go to file, save us and then save this image as a JP Agra PNG in orderto share it with your client or your teammates. What you can also do is start with our ports if you're working in your original for shot because, as I said, this is C. C 2000 and 14. It still didn't have any our boards inside, but from C. C. 2000 and 16 or 17. I believe they included our board. So when you're working inside of our ports. It's extremely simple. Do then export all your our ports and to share them with your client. I really recommend that you were working in this sort of way to just imagine that this is your number one. Our port number one Number two would be right here. Number three will be right here and so on because all of these projects tend to have many, many, many different images inside included and many different assets included. So the more our ports you have, the bigger the project will be. And the harder it will be to control what you have inside of that project. So I really recommend it. You're working inside of our party if you have them. If you don't, you can do something like this. And then you can export all of them as smart objects as explained simply. Group all of them, select each of them, then group it toe, be inside of a smart object, then export every single smart objects outside. You also have a file batch export right here. I think it's in the script. Yeah, and then you can batch export everything that you see on the screen. But Once again, you'll have to create them as smart objects. So that's basically it for four sharp part. I really hope you understood how extremely easy it is to use in four shop and how easy it is to work in for shop. And you can see the result is much better than with all these different tools, because you are truly in control off what you're doing and what you're presenting to your clients in the next video. We're going to start with Adobe X'd, and I'm going to show you what, in my opinion, I think and truly believe that it's the best tool out there for this sort of work. 14. Wireframing In Adobe Xd: And now finally, let me show you how you can via frame in Adobe X deep. So have an R port open right here, and you can go to home and you can click right here to open the same are for for the iPhone , or you can click right here and you can choose whichever our port you want. And I'm going to rename it home, for example, and let's start like we did previously with Top Bar. So I'm going to simply drag a rectangle. I'm going to use extreme light gray color, for example. Something like this. Remove the border like So I'm going to position it in the center to the top and extend it right here and all right here. I'm going to make it a touch, and our courage is so that you and I can see it. Then I'm going to type in local, and let's use the same front that we used in four shops. So it's going to be later. I'm going toe, show you where you can get later. I'm going to leave the link in the pdf file, and it's a free Google fund, and you can use it however you want basically for personal and commercial projects. This is going to be, for example, tow bar G. Let's call it like that. Then what we need is a menu icons. I'm going to use this one going to position it right here. And we also need search icon. So I'm going to position that one right here. Then I'm going to select everything like so I'm going to move in a little bit closer. Position this here. Shift one to, for example, to move 20 pixels. Position is to the left shift one to basically the same. And then do this once again. So make sure that all of them are in the centre. I'm going to get control, G and call this one tow bar just so that we have everything nice and organized off course because you have that notch right here. You're going to move this down just so that you can accommodate the space for the information. We're here on the top left and the top, right. So time, better indicator so on. But because we're creating via frames, we don't really care about that too much. You can care about it once you moving toe, the high fidelity prototyping part. But as I said, you can include that as well if you want to, and you can download a free you I kid from Apple themselves because they created it. You can simply use it to include all that inside off your wife framing process. Next, we're going to create a nice big rectangle, something like this. Make sure it's in the center. He controlled deep, and I'm going to call my shift key, and my old key told it was the size. I'm going to use this for the image. A little bit later. Let's use this color with removed border. Let's leave it there. I'm going to call it image like so, and perhaps I can't even hide it just so it doesn't bother us. And this going to be BG. Make sure it's in the center and make sure to position it. Let's see. 10 pixels is fine from the top. Next, I'm going to use the circle. Make sure it's something like I don't know 60 60. Let's get some nice even numbers. Position it all right here. Shift one and one here where you can use to if you want to. It's really up to you. I'm going to call this term like so. And what you can do with all these icons is you can covert them to symbols if you want, or two components, and you can then copy and paste those components later. I'm not going to do that because we have multiple instances off them. But just so direct. You sure you can hit control K and is going to show you that as a symbol control key? Okay, okay. And once I started, let me create all of them s symbols, and I'm going to show you how you can use them a little bit easier later. So you have the profile of sensible drag and drop it into position in position it somewhere right here. And let me quickly reduce the size of it and position it right here in the center, off my circle, like so. Next I need the text of teeth and my name is called debts. Make sure it's left lying. Make sure it's 16 for example, like so and I went with my old key to make a duplicate of it. And let's give this 10 for example, it's going to be time off, post something like that and let's see if we can separate them. But 10 pixels position descend center shift 12 and now we need that icon more. I can simply drag and drop it into position, like so make sure it's in the center and make sure to position it until it aligns with our background like this and then one, too, so that we have even spacing right here. If you don't want to see this to be too bright, you can use something like this or you can use a bit darker color. Perhaps something like this. I think that works good. Hit control D. I'm going to position this right here and description off the image, and we can use this toe added to character styles at this to character styles. And then you can simply click on this one. Click here is going to apply the same character styles to dis text as well. So if you want to have it look exactly the same as this one, make sure it's a line to the left. It is now we're going to get toe are layers panel right here click on our image position. It's roughly around here, so let's see. Maybe that's too big. 20 pixels down. Make sure Aito lines here. Make sure it alliance here like so let's see home. Much space we have. Perhaps that's goods. You can even extend it up to here to make this image look nice and big for the height. Let's use 1 70 Make a nice around number. I'm going to include image. I can't go back to here. Move image icon Right here. Select my image. Make sure it's in center and I think it does look a little bit better like this than the other way around. And I can also do the same things. I'm going to remove the border and include the same field color just so that we have some consistency here as well. In the real project organized these layers a little bit better. So perhaps this avatar and this outer icon will go to the top like so then first name, time of post and this icon just so that we can see that time boasts and more it will go below, like so then description, then image. And then this Bijie So like this. Next we're going to include these other icons so you can simply click right here. And the 1st 1 is heart. Because if the drag and drop it into position like this next one is comment into position, maybe in a center like this, and finally share, Simply drag and drop it. I'm going toe select All three I'm going toe include, I mean, turn off responsive resize. I'm going to hold the shift key and then simply resize them to somewhere around here. So they're a little bit smaller than before, and I'm going to make sure that they are, for example, 20 pixels from this 20 pixels down. And then I'm going to close it off up to here, then select told three and then simply move them up 20 pixels once again, like so and then I'm going to do. I'm going to select this text. It controlled the two duplicated and then simply make some adjustments to it. Some way to reposition this this is going to be 1 25 like, so make sure it's in the center off all these icons, but we can deal with it a bit later. 10 on and move this right here, Control De. This is going to be 84. For example, Control de one more time. This is going to write a sheriff. So positioning here. And then perhaps 10 pixels likely did with all these previous ones, like so. And you can choose these icons like so, by holding the shift key, you can zoom in a little bit and you can sample discolor, for example to have them be more consistent. Like so. And there we have it. We have finished our first card so I can jump inside and I can move my talk bar right here at the top. I can select all these layers. Once again, you can organize them a little bit better, but in order to save you some time, simply grouped him. Call this card one, and what you can do is use a repeat great, and then simply extend another card right here. Or if you don't want to do that, you can simply duplicate this card. So hit control D and then simply move it. All right here. Let's have them be it stem pixels. I think that's fine. And because of the size of the our port. Let me quickly delete. Follow these icons is going to cover nicely right here at the bottom. So you don't have to do basically anything else. What I want to do next is simply jumping right here. Hit control de to duplicate this layer. Drag it outside alike. So you're not going to call this, for example? Tab Bar, Place it right here at the bottom off my our board, like so and because we cannot see it, maybe I can make it a little bit darker like this. And it's going to basically color up. This because we wanted to scroll and which can also do is extend this Our port toe fell. But I'm going to show you that in the next video we'll get toe add some spiced this design . But for now, we can leave it like this. What we need right here are those icons. So let's quickly drag and drop them inside. So we need this home, Michael. Place it right around here. We need a common tycoon places right around here. We need a member indicator icon and finally we need a profile icon, something to position and writer here. Then I'm going to select all of them, turn off responsive resource for my shift key, and then simply reduce the size of them. Make sure Darryl in the center and I can click right here toe evenly. Distribute them. Same liquidity in for a shop. If you remember, jump back into layers. Panel, click right here. He controlled G and then call this step bar. That's basically it. We have finished everything. I'm going to move top bar right here. Organized this a little bit, parent. And here is how our screen looks like I'm not going to go ahead and create my other screens just to show you how easy it is to do in Adobe X'd. So this is our home screen. We're going toe hit right here. Control deep. This is going to be our image open or opened Image gallery once because person can click. And that opened this image to see it a little bit better inside of it. We're going to delete discard because we don't need it. And this other card, we're going to rename it Part two. Sorry, and we can position it. I don't know how to type today we can position below card one, of course. And let's see, I reduced you pay city accidentally. So here we have opened image and what we're going to actually do right here before we do and weekly select this. And maybe we can add a splash of color three D c six ff. If it does work, it doesn't. That said the darker color just to indicated this is selected now, right here you can add the same thing right here so I can delete this tab. Are control C control we and included stab bars easily like that for this card. What we're going to do is simply click right here and extend it. You can use responsive resize if you want, but it's going toe Divide all of these elements basically which we don't want, especially because for these icons, responsive resize is turned off. So if I select him so we have a share comment heart. I can turn on responsive resize and then try to reduce everything a bit down so it does work like this but in order not to lose any time, you can simply select thes like so Then select this text and there's simply move it all the way down to or roughly around here, for example, then BG position it are roughly two here, then select all of them once again. So, like this, make sure they are 20 pixels up, 20 pixels up. Once again click on our image and extended. And now I'm going to select them once again like this, pixels down just so that we have even spacing, and then finally click on our image and extended and position it into center like this. So that's what we have. Basically, you can see how easy it is to do in Adobe XY. All you need to do he simply fall some logic and followed our sketches or ideas that you have in your head. And I really recommend if you're doing this right here just to experiment as much as possible. So basically, if you're not starting with paper via frames and you're starting directly Rita Adobe X'd I really recommend that you experiment as much as possible and to start just laying down some elements and see where it takes you next? What we need right here is write a comment so I'm going toe duplicate this beauty control D with outside. This is going to be comment. Beauty. I definitely definitely cannot spell today. I'm going to move it roughly around here, for example. And then we can just leave it here. Maybe. Let's see 70 thing that works. Fine. So, until 12 maybe we can move the entire image toe here. 12 and then finally, what we can do is click right your shift 12 and then go right here and selected this guide . Snap it to here and then we're going to simply extend this BG to fit toe here. Basically moved everything 20 pixels up once again. So or you can go the other way around. If it's easier for you, you can do the same. But with the bottom one. Let me show you that. So you can click right here, shift 12 and then simply extend it away down to here until it fits. And then simply select these inside. So these three this like so on to then you can extend this down. So anyway, uh, which is easier for you? Works well because, as I said, this is the process off experimenting. Nothing is completed. Nothing is final, so basically it's all up to you now. What we're going to include right here is we're need this text. If you remember from our sketches, it's going to basically right, Right? The Commons. Like so then we need to new I course, I'm just going to jump inside our icons. I'm going to locate my smiley face icon. I think it's right here at the top. It is Here is control. See? Super jump back right here. Hit control V. I'm going to reduce the size just a little bit. Same like you did with all these previous icons. Shift 12 and then she want to. I'm going to use this same color which were used for thes previous icons. So simply picked it, and I'm going to call it Smiley. So and we just need the send icon right here, So let him quickly located and see where it might be located. Perhaps it's somewhere around here. Let's see Here is much use this one dont simply jump inside, position that into place And what you can also do is simply align it with your smiling face like so make sure you have responsive resized switched off because we don't need it at the moment. Then simply position it into place alike. So shift one, too. And we're going to sample this color or right here from the bottom like this. It's basically it. We have finished our screen. Let's call this send. So like that smiley face right comin, comin, G. We're going to call this comments, position it down at the bottom, and one final thing that we need is to include the back arrow right here inside of a Tatar because we want to be able to come back. So I'm going to jump back into my icons once again relieved the link in the pdf file. So if you want to check out these icons, you can let's see where that icon is. Here it is. That's just simply jump in sight and see here it is, he control. See Control V and I'm going to move it away, up like so, See what it is, and I'm going to simply position it like it is the trough responsive resize this implicating larger, just a little bit. Make sure it's in the center, like so, like this and I'm going to call it back like this. I'm going toe switch off the search or simple dilated however you want, and that's basically it for this screen. Now the final screen is going to be a profile screen. So I'm going toe maybe duplicate this one, for example. And what we need is let's quickly delete everything from here. Or maybe we can just leave the text. But because we already selected it, we can select from here. So I'm going to simply a drag and drop a profile icon right here. Make sure it's in dissenter like this, or even better, I can do the same from here. Just give me one second. I can jump inside. Profile an avatar control. See quite here, Control V. There they are going to simply extended to be a little bit better. 12 Then we can use these to control C control. We make sure they're center aligned like this like, so make sure they're in the center and let's see what we have here is person, name and perhaps location like that. Make sure it's in the center. Let's have it be. It's no No. 10. I think that works Well. Yep. Now what we need are some taps. So what we can do is quickly include three lines like this. For example, perhaps we can use this color maybe without border control. De, make sure this is in the center control D. This is right here, and if you want to space them out evenly, simply make a rectangle. Then select these to click in the center position. Directing will right here selectees to make sure it's in the center. Then delete this rectangle and there you go. So basically, those are your three tabs. It's going to be a 20 because this step is selected. Let's give it a color. Let's give the color off these icons so you can go right here and you can jump inside and basically add your colors right here. Let's add a color for this like one as well. And once we are right here, let's choose this icon. Make sure it's this color Jews home. Michael. Make sure it's this color because now we are at profile screen, and this is what I was saying. You can see how easy it is to multiply these, and to add it to them, and so So this is going to be tab free. This is too. And this is step number one, and it is the one which is selected. So basically, that can be your It's a gallery or favorites or communications or something like that. You kept them in a Twitter or Facebook and soul. So what we need next is to include different images. So I'm going to simply drag a nice being rectangle something like in days. Perhaps next I'm going to include my image icon, drag and drop it into position. Perhaps I can make it a little bit smaller. Maybe like this, I'll choose to use this without a border, and I will include this icon right here. Next I'm going toe group it. So this is going to be image Bijie. You can use the other image between created before and include that if you want to. But I found this to be a lot simpler way. I will reduce the size just a little bit just so that I could be sure that I can fit three of them. Simply group them, call it image and click, repeat great and then simply populate three in a row like this. Make sure you reduce the spacing between them. Click right here to position it in the center and then simply extend all the way down. However many as you want. And that's the great thing about the dhobi exceed has all of these fantastic tools which are going to help you speed up the process off these tedious task, especially once you start duplicating all of these different things. This is going to be profiled, and that's basically it for our Via Frame has hope that you can see how extremely simple it is to create these wire frames in Adobe X'd, because it has all of these different tools which are going to help you immensely. Once you start prototyping and start sharing with your client, you can add some hot spots. You can include different images, drop shadows and so on. And that's what I'm going to show you in the next video. So I'll see you there 15. Taking Your Wireframes Further: beauty off Adobe X'd is. Once you've finished your wife framing, you can turn that up and move on to high fidelity wire frames at images as shadows, different colors and so on. And then on top of that, you can even include some movement by adding prototypes to your designs, and you can then share those prototypes with your clients, and then they can leave feedback so that you can know what you can improve. That's why I love Adobe Xdb because it's such a complete tool. Not only is it extremely easy to use, and I hope you saw that in the previous video, but you can also do all of these other things without ever leaving this tool, because previously you have to use multiple tools to do these multiple things. While in Adobe X D. You can do all of them without ever leaving the app. That's why I love it so much because it saved me so much time. And when you're working with clients, especially on a tight deadline, it can be extremely important to do these things while saving as much time as possible on a project. So to get started, I will simply jump inside off here. And this is the wire frame that you previously created. I was select. All three are ports hit control D to make a duplicate off them because I'm going toe. Basically add some images and some color to them. No, let's jump inside and let's start adding some elements. So right here, let's include the name, for example. Jason Marcus. Let's a time off, boast 24 off April. That's let's see City 45 something my debt and this can be also 24th off April. But let's see to the 48 maybe something like that. So this is the fresh post. This is the old post, and perhaps this can be even other person. So let's call it Murray. I don't know Andrews. So just some random names and you also have blood gins for Adobe X'd, and you can also generate some of these random needs to save you even more time now to include some images. I have some stock images right here taking from on splash, and when a dragon dropped the image, you can see that it populates this, but I have to hide my profile icon and you can see there. It's now starting to get the shape. Let's include same for this person right here. So I'm going to go ahead and choose an image. Let me see. Right here. I have this folder off my images, which have taken online, and you also have a plugging for disk. You have these plug ins right here, so can simply click right there. And you can install all of these different plug ins for a splash. Will give you, for example, images from an splash dot com. It will populate your placeholders. You are Logos are great because you can include all of these different images on droids. Great. Because you can use over these different illustrations and so on. And to discover, plug in, simply click right here. You can discover all of these different plug ins which they accumulated and collected for you. These are the essential in their view. So you I faces is great because it can populate with these images. So I really encourage you to explore all these different plug ins and let's now get back toe are designed. So we need the same person right here. So I'm just going to jump inside corporatists text and based it here. I will also double click right here and based it here and let's use the description. But first I need to find the image which I'm going to include, So I don't know. Let's see. Maybe we can use some architecture images, for example, or some travel images. So let's see. I can include an image right here. I can simply drag and drop it in place. This particular one is from that to stock photo dot com, and it's great because you can find all of these different images, which are free to use. But you can use images from on splash, for example, or, if you want premium images you can go to in volatile elements, for example, and include images from there. So description off the image bridge in Sen. Francisco. All right, so from helicopter, like so and then for this are one. For example, Brooke formation here, Sir Francisco, because it's the same collection for these images and, for example, for this one, maybe we can locate this background. Perhaps I can include some corner radius. Let's include Korea's off 10 for example. You can see how that looks like. And maybe I can even include some drop shadow and then go ahead and remove the border. When I click outside, you can see how that looks like. So it gives this nice bit of dropped down shadow. And I can also jump right here, right click copy, then jump right here and simply based appearance. And it will give me the same look for the card right here. And I also want to do that right here. So it's going to give me the same look off the card right here. And we can also do that for the comments. A simple based parents and you can see how that looks like. So basically it makes it look as it belongs right there. Now for the images. Let's give them the same board of radius. So 10 just had some spice to it. For example, this image 10 and we need toe include that same image right here. Let me remove my image icon, and you can see how that looks like All we need right here is this description like so And we also need to include in this same image off a person that we did before, so quickly Find it. Here it is. And simply remove my profile. I can from it. And there we have it. Basically. Now we have app forming and we can also move on and include for example, color right here. So let's go ahead and sample some color. So maybe we can use a color from that icon. Like so? See how that looks like It doesn't look that bad, but we need to turn these icons toe white, same as with our logo. So maybe we can call this something like socially, for example. And maybe I can include some fodder form for it. Play fair display. Bold italic. Make sure it's white. See how that looks like that works, will. So this just basically an example off. What? You can do it and you can simply kid control. See? Then jump right here. Hit control V control, we and I'm going toe Hide this. Stop our daily to this all one. Then I'm going to do the same here. But before I deleted, I want to be able toe Move this back arrow here. As you can see, I made a mistake and I included multiple of these, but it doesn't matter. I'll included right here. Then delete this stocked bar like, so I'll bring him back. Then simply turn my back arrow, toe white and simply reduce the Obey City off my search. And there we have it. We have our top bar looking nice and clean now for this one. Perhaps people have clicked on this person and then they jumped right here. So we need another image off that person profile. We're going to copy this right here and for the location. Maybe he's located in San Francisco because that's where those images have come from. And because I'm going to copy and paste the same images, I'm going to replace this one. So it's used the image of London, for example, for this one. Maybe I can drag and drop it right here. And that's why I said, This is great about Adobe X'd. You can simply go ahead and change anything that you want and let's say something like just so that we can populate some random text now for this. As you can see, we have a repeat. Great. All I have to do is simply fight in this 1st 1 and then I can jump right here. Drag and drop my images onto the 1st 1 and is going toe populate with all of these different images right here. All we need to do now is simply add some tabs right here. And to do that, all I have to do they simply jump right here. And, for example, copied one of these texts. Perhaps I can hit control de position. It are right around here and make sure it's in the middle off these lines, like So and Dent Let him quickly fight my tabs. And maybe we can write in favorites. Let's create a duplicate. These can be, for example, brand new, and let's create another duplicate. And this can be, for example, collections. Let's see. And because we chose favorites, maybe we can jump right here and click on our color. That's basically it. Lets know, simply organize them. And if you remember the tip, I showed you simply select like so. So like these two more with right here The imposition. This right here selected these to move it like So I'm going to delete this one, and perhaps I can lower your basically of these ones. That's Jews five, for example. And I need some better spacing for these. So perhaps I can see this is stand maybe 20 N Dent. Let's give it same. So 20 like so there we have it. If you want to bring in those lines back, maybe I can choose a tap one and I can call it selector, for example. Adjusted just a little bit. Maybe used to make sure it's in the middle off my text and perhaps move it just five. Let's see. And I can even reduce the wit of it to here, like so and then simply select this color to make it obvious that this is selected. That's it. Basically, for the designing part, you can see that in just a couple of seconds you can have something which is really appealing and something which looks really nice. I don't like this because it's this gray color, so perhaps I can turn it into white. See how that looks like it looks good because we now have this background right here. But you can also add a line right here separating it so top line it will look even better But for the sake of time and off for this video, let's just have it be white because we have all these background elements covering nicely. Now that we don't that maybe it's time to move on to prototyping and simply add a little bit off integration in direction to it. So what I can do is simply extend this. I can jump right here and then simply move it all the way down to here. Double click here until it reaches. So let's see up to here. That looks great. I want to touch dese two and I want to do this because I want to make it keep scrolling. So what you need to do actually is bringing back until it aligns with this line. Because this line is basically a cut off line like so and now we can get the prototyping. So simply click prototype And what? What we can do is simply click right here on this image. So when the user taps, it will open up this screen so we have a trigger tap. So once again, when you use the taps, it will open up this screen transition we will use also animate And that's why we had the same layers and same naming structure because we want Adobe X'd to recognize what we did. And it will compare these two screens and then simply find differentiations between them and simply integrate a nice illustration. Derek, you can use easing off easy notes and duration 0.4. I think it will work just fine. Now for this image. We can step and we can transition. Maybe we can use dissolve easy and out because once user clicks right there, it will take into this person's profile. We will have the same integration for here and also the same integration for here for this profile icon. So simply hover over it, click on it and then simply drag and drop and Adobe X'd will remember your last settings. And it will basically show you the same settings that you already chosen now for this one simply selected right here. And if you want to go back to home from here, you can simply do the same thing and it will take you back to home. And that's basically it for this. Maybe we can even include the same scroll right here, like we did here, but I'm not going to bother you. You get the idea with one last thing I want to show you is here. So when we jump right here, we want to go back toe home. So I'll link this tap transition and instead of dissolved, let's use sleight left, for example. And then I can click right here and before I do, I just want toe fix position when scrolling. So this is going to stay fixed. And once you get to the bottom off the page, it will be right there. And once we're here, we can do the same thing for here. So let's jump into design. I can extend it all the way down. And I can, for example, move it. Let's see 20 pixels, something like that. And I can simply hover right here, see what it is. And maybe I can cut it right here, and I'm going to jump back, bring it all the way to hear jumping, prototyping, fixed position and scrolling. And that's basically it. So now let's check out our prototype. Simply click right here. It will open up this speech, and if I enlarge it, you can see that once we start scrolling, you can see how that looks like so you can scroll and you can see that this stays fixed to the bottom. As you can see, you can scroll up and down, and when you click right here, you can see that this nice little animation is going to show. And when you click right here, it will bring you back. If you don't like disposition, you can use also animates. And it will also animated back basically. But I think this works a lot better. Once you slide left and right, many click right here. It will dissolve to the profile and you can scroll down basically. And once you click the home, for example, it will take you back to home. So that's how easy it is to use Adobe X'd from the ideation process of it to the more complex designs and finally to the prototypes, which you can then share with your clients by clicking right here, you can create a link, and then you can copy this link and send it to your clients. They can then leave your feedback on what you need to change, and that's basically your entire design process inside of one app. And that's why I adore Adobe exist so much because it gives you so many possibilities toe work with your clients and to stay creative and to keep moving forward with your projects. I really hope you're going to try it. Check it out on Adobe's website of Also leave the link for Adobe X'd in the pdf. It's free. You can use it for free forever, basically because they have the free forever plan. It just has a few limitations off. How many products can you share with your clients? And that's basically it you can use. It starts today. It's going to change your design career forever as it changed mine. I really adore it, and I cannot say that too many times because it's really true. So check it out. I really hope you will like it, too. 16. Exporting Assets From Adobe Xd: one final thing that I want to mention is exporting. So perhaps you want to share these images with your clients or with your team were email via chats were social media. However, you want to share with them so you can share it with the link and already mentioned that in the previous video, simply click right here to create a link, then click here to copy the link and basically send them the link. They can leave your feedback with the comments, and they can pinpoint specific details of the wire frames that you want that they want you to change. But what if you just want to export your images? You can simply click right here on the name off the our Port Hit Control Command E. These now will pop up, and you can select the file formats who controls being G SVG for the Web. Pdf and Jay Pek. Basically, if you want to share images, you can choose PNG or JPEG. If you want to share, pdf's basically click here, or if you want to share SPG for the developers to use of this, of course, perhaps then you can share it like that Also, you can export specific parts of the design based on how you created them, so you can export design. It will export at one X basically original size. You can click Web, and it will export one X and two x basically original size and double that size, which is great for developers. You can click iris. It's going to export at original size, double the size and triple the size because off the variety of different devices. And finally, when you click Android, you can see that you are designed it at, for example, 100% which is your its original size 75% which is a bit smaller than the original size and goes up from that. So basically these percentage points are basically debt so original size, then bigger, bigger, bigger and so on. And this is smaller. That's basically it for the exporting part, all in it to a simply click export. It's going to export that image, and when I open up that image, basically with my imagery error, here is how it looks like basically like any other image, And one final tip that I want to show you is when you have multiple off. These are ports, and the chances are that you are going to have them in majority of your projects. You can simply select all of your ireports hit control or command E. Choose these settings, however you set them up and simply click. Export is going toe export all of those because I already have home one J pack, which I exported previously. You can hit replaces, going to replace that image, and it's going to export all of your images. So that's basically it for this course and basically it for the exporting. I really encourage you to play around with Adobe X'd, and I guarantee that you're going to love at least some off the features that it has to offer. 17. Working With Templates: working with templates will allow you to finish the project, foster to charge more and to deliver the files to the clients into the developers as fast as possible. That's why templates are a fantastic solution. If you're on a tight budget, for example, if you're on a tight deadline or if you just want to have more projects done within the year and to earn more money. So here we are on a Web donut dot net page, and this is my website in my company and inside of my company. We're creating these templates. As you can see, we have you I kids, UX kids, social media templates. We have Social Corner graphics, which is dedicated social media templates. Page. We also have the courses, and you are in what we enrolled, obviously, in one of our courses right now, we have stock images, and we have other products. So we have all of these brooks in order to help designers evolve and to help them speed up their process and to finish their projects. Foster. So if I jumped right here to the U X kits, which is basically user experience gets, we have all of these different products which you can purchase and use in your projects. And let's explore one of them. And I'm just going to show you how easy it is to create a page when you're creating, eat with a template and let's use something like bones wife from kids, for example. So here I am in Adobe X'd, and I'm just going to call this our wire frame that quickly extended all the way down like so, And I will jump inside and choose template from our bones back. I was simply copy and paste it right here, Al. Position it to the top and then I will simply move on with some other templates. So let's see, Maybe I can use this one, for example, and you just have to align it with the previous one, like so. And they simply move on and start building your wire frame so you can choose from the variety off different elements and let him quickly show you how those elements look like. So just go ahead and position this until it aligns with my previous one. And here it is, for example, this is the futures part off the bones. Why from kit and I just used this one, and you can see you can add it. Any of these you can edit this text, you can edit thes icons, you can change their colors and so on. And they're available for this particular product, for example, for Photoshopped X'd and sketch, so you can use them however you want. Let's quickly select another one from here, so you can open as many of these files as you want. You should hear, for example, and then simply start building. And you can explore how ever many off these templates is you want. You can reposition some of these elements. If you don't like it, you can simply delete it. Let me choose this one for testimonials, for example. And I think we have 10 different categories for this product, and you can use any of these categories obviously, and reposition some of these elements. However you want a quickly position it here, and I can simply darkly cried here on my art board. Close it at the bottom. So we're around here, for example, and every habit, as you can see in less than two minutes, have something which I can show to my clients, for example, Give them feedback and say to them, Okay, we have a nice, small, easy to use navigation right here at the top. And then we have a slider. Here we share features. We have form where you can collect your e mails, for example, for your campaigns. Then we have a slider right here below. And finally we have a footer. It doesn't need to look like this. It can look however you want. That's why you have 120 in this particular product. 110 different elements, as you can see right here. But we have other products. As you can see right here, it's not just our products you can go to. You ate, for example, and you can explore all of these products. You can go to browse and you confined wire. Frank. It's and you can search for these wife and kids right here, and you can see they have variety off different Y. Frank. It's and I believe the link in the pdf toe everything. I'm speaking off right here, and you can use any of these for your projects, obviously. But my favorite is in Votto elements off course. Here are our products here on in water elements as well. What this site basically does is your paying one monthly subscription price and you're getting every single product which is located on this website. So if I jumped two categories, you can see what they have from stock video, your templates, music, sound effects, graphic templates, which includes all of this, which I'm speaking off. You have graphics, illustrations, templates and so on. You have photos even for rep templates. You have WordPress teams. So every single thing that you can possibly imagine you have on this website. So if you're interested in a great deal, then you can jump to involve elements bay for one monthly subscription and then simply use whichever template you want and is a set. Here are our templates and if I jump right here, they're not all located right here. But if you jump into graphics templates because we simply have toe save something for our website to make it exclusive because we have a subscription here as well. And you can see how many of these different templates we have right here And here is the bones IRS y frame kit. And there is also one for the Web, which I was showing you before. And once you're finished with these, you can turn them into fully fledged prototypes and high fidelity prototypes, so you can simply drag and drop your images and include them inside and let me show you death. So let's say I have an image and I want to include it right here, or we need to do is simply hit control to select this layer, and you can jump right here to see the layers strategy. If I jump right here, you can see that everything is named correctly. Everything is positioned as it should be on the page. Simply drag and drop your image to include it here. And as you can see, with just a few minutes off your time, you can convert this into high fidelity. Prototype. Obviously, then you can select the stakes and change its color to, let's say, this color, for example, just so that we can see it a bit better. Maybe even this color, and then you can simply enlarge it if you want, and position it to be a little bit cleaner to the eye. and a little bit more appealing. Let's say then you can jump ahead and extend this image to the top. For example, position it right in the center like so and then we can locate our navigation, put it right here at the top, jump inside their navigation and simple switch off the background. And then you have this nice transition between the navigation and background image, riches, hero image, of course. So that's how easy it is to use these templates, especially our templates. And we really try really hard to work with our designers and our buyers to understand their needs and the wants in order to structure our future products even better than before. So, as I said, you can jump toe any of these websites, and I believe the link in a pdf, and you can check out all of these websites and purchase any off these templates if you want to, to improve your work floor and to increase your speed 18. Conclusion: thank you so much for taking this course. I really hope you found some value in its and that you're going to implement some of these steps and techniques that I taught you in this course into a future work. Just remember, if you're starting with paper wire frames, start slow. Start small with the supplies. You already have a lying around your house, and then when you start getting bigger and bigger projects and bigger and bigger clients, then you can start improving and buying some more expensive equipment. For example, some of those fancy markers or take a grating paper in someone. And when it comes to digital wire frames, just choose the software that you are most comfortable with. Is the mentioned multiple times throughout the course. I'm most comfortable with Adobe X'd I like adobe eggs deed best, and that's why I used every single day you can use any of those Softwares which showed you , or you can use any other software, which I didn't show in the course. Basically, find the one that you are comfortable with, and then once you start to know all the soft first, you can switch between them because Basically they're all were similar, and I hope you saw that in the course. Basically all of them have layers. For example, they also have these moving tools that you can use to move your shapes around. Basically, every single one of them is similar, so when you learn one of them, you basically know all of them. Only need to do is explore a little bit also on the pricing. If you're not comfortable paying for anything, then don't pay for it until you are comfortable and until you think you need it for your projects because that's the most important part. Why would you pay for something? If you don't want to use it later? That's it for this course. I really hope you enjoyed it as much as I enjoy making it a real hope. I'll see you in one of my other courses, and until then, take care and keep wire framing because it's the most important part of the design process and it can be extremely fun when you get to hang it. Take care 19. Your Class Project: for their class project. I want to create the same wire frame we did in the course or a completely different boyfriend, which actually encourage you to do and then save it out as an image and upload that image there. Class projects. You can use paper wire frames, and you can use any supplies that you have around your house so you don't have to have the same supplies I did in the video. You can use any supplies that you want. You just need to take an image with your phone, for example, is uploaded to your class projects. Or if you're using digital matters, then you can simply save out the image off your final wire frame and uploaded to the projects. I really want to see what you've done with all of these techniques, which are taught you in the course, and I'm really excited to see your results and to see what you learn from discourse. So I'm looking forward to your designs 20. YouTube Channel For More Content: Hey, Designer Alex here. And I just wanted to say a quick thank you. Thank you for taking discourse, and I really hope that you got as much value as possible out of it if you want to check out more content. I recently launched my YouTube channel, where explored some topics that might interest designers from freelancers toe passive income techniques from Web design, APP design. You design UX design. So if you're interested in any of those topics, head on over to my YouTube channel, link it down in the pdf, and you can simply click there and it will take you to my YouTube channel. If you like that content, make sure to subscribe and make sure to follow, because I'm going to try to be really regular with that YouTube channel and upload as much content as possible. So thank you once again for taking my course, and I really hope to see you on my channel Digger 21. Join My Free Facebook Group: Hey, designer, I really hope you enjoyed the course, and it you got as much value as possible out of it. If you want to receive even more value from me and from the design community, I started a Facebook group. Where you can join is just a Facebook group for my students alone so you can join by clicking the link down below order. Nate off course is a Facebook account, and it's a free group to join. The group is formed in order to provide you additional feedback so you can attach your designs by following this course and using examples from this course or any other off my courses. Or if you have your own examples. Off design works from the past from the present. You can upload those works to Facebook Group and then received feedback either for me or from other design members. I also encourage you if you have a job positions available to share them in that group so everybody can benefit from that group. Once again, the group is free. It's easy to join. Simply click the link in the pdf, and I really expect to see as many of you as possible in that group just to share our experiences as designers, and I will try to post some additional video, some additional tips and techniques into that Facebook group. But for now, we're just getting started. We're just going to form its, and I really encourage you to join and to share your best work there. To inspire other designers or toe ask for additional feedback. Just make sure please, when you're asking for feedback, asked for specific things. Don't just ask. What do you think of this design? Because nobody is going to reply to that. Or if they do, they're on Lee thing. They're going to say to you Is it looks nice or it doesn't look nice. Make sure to ask for specific feedback on your designs. For example, do like this color combination. Do you think I should use a different front? Do you think that these images correspond well with the background color, for example, things like that, So make sure to ask for specific feedback when your designs, because it's going to be a lot easier for me and for other designers in that group to give you are specific feedback that you can improve a lot quicker, then by just asking what? Everything off this design. So thank you once again for taking my course, and I really hope to see you in sight off my Facebook group Digger.