Day 3 - Wireframe Sketching for UI/UX Designers | Skill Booster #3 | Create Efficient Layouts

Welcome to this day three of the skill booster session. And today we are going to learn something which is very important called wireframe sketching. A lot of people have a problem when it comes to digital design. They don't know how to bring their thoughts into ideas. Right, so far, the last one or day one and day two, we have seen sketching, we have seen some basic sketching, we have seen some science behind how to able to sketch neater, how to in fact draw lines, how to not move your hands and move your shoulders to create very good lines. And then we also create a lot of ideas and everything.

Right?

So today it's very, very important to understand this aspect, which is wireframe sketching. UI UX designers and product designers massively use this form. Okay, so first of all let me share my screen. Okay, so in the day three we are going to see something called wireframe sketching. Okay, so, so this is mainly used for UI UX designer, as I rightly said. And this is only for people who are doing some mock ups, people who are doing some prototypes, people who wanted to iterate a lot. That is the main context of using this. Okay, so first of all, people call it as a low fidelity wireframe. The reason why they call it as a low fidelity wireframe is this is a very, very rough layouting and sketching because as the name itself suggests, this is very low.

Okay.

Before you conceptualize something, before you move into a perfect idea, before you make it as a, what you call, before you make it as a perfect concept, you need to have a lot of concepts which is in a iteration phase, which is in a conceptualizing phase. So in that stage you don't need very detailed ideas, you don't need very detailed sketches or details in the concept. Because if you spend a lot of time in detailing later what happens when the concept goes for iteration, then you will have to redo everything. That is why in the low fidelity sketches it is very easy to start with basics. It's, it's very easy to start with small ideas. Like let's say it could be very easy as, as putting a square frame, as putting a small circle, as showing this is a screen one to screen two. So people can understand it much better. Okay, so it clarifies design concepts. That's the reason I told you, it clarifies what are you really thinking and it reduces some errors in the later stages. And also it is meant for faster prototyping. The only way to tell you this particular sketching, wireframe sketching, is faster prototyping. The more faster you do, the better ideas you will be able to have. Like let's say while the demo session comes, I'll be able to show it to you. But anyway, I'm just giving you a fair idea.

Okay.

Like let's say if you're sketching some idea, okay. Some earlier sketches, I will show you some idea you have.

Okay.

Maybe some idea you have something like this. So it is much faster to communicate, faster to communicate these ideas in a very, very quicker way.

Right?

Because pencil, paper, sketch pen, sticky notes are most most popular. So you can get one sticky stickies like this. If you, if you have, if you have your office environment already provided, that's okay. Or else you can get one like this.

Okay.

If you're doing a home based sketching or home based wireframing.

Okay.

So yeah, and also this is majorly for visual communication and mainly for the stakeholders and the other team members. Because what happens is it's not only you who are growing this project. You have to communicate to your team.

Right?

Ultimately that's what is the main thing. So for communicating to them, this is most, most important. You can do pen and paper. That's also a way to do it. You can use some software, you can use some kind of a stickies, you can use some physical products. So a lot of ways is there to communicate.

Okay?

Yes. So now what are the misconceptions about it? See, a lot of people think wireframe is only for experts. It's like they do very high class of work and everything. In fact, wireframe is for the beginners. Wireframe can be done by anybody. Wireframe can be done by even the freshers were just entering the industry for the first day. It's as simple as that. You don't need to be an expert to do that. Second point is people think it needs to be very detailed. No, it needs to be very rough. That is the whole point of it. The name itself suggests it's low fidelity wireframe. Perhaps the medium fidelity wireframe and high fidelity wireframe could be more closer to the solution in order to freeze the content and everything.

Okay.

But to be very correct, wireframe, low fidelity is making very, very minimal sketches. It is as simple as that. Okay, and also what are the key techniques to do it? See, I will tell you some key techniques.

Okay.

First of all, try to use very simple shapes, primitive understanding. Don't focus on what's complicated shapes and all focus on layout alignment. Define the placement of the key elements instead of going into the details of the where the button, how the radius could be there, what kind of icons should we have? What kind of a communication should we have? Instead of that, just put one button. That's it. Tell this is for summit. Till this is for clicking. Till this is for interaction. That's enough. But primitively you'll have to focus on the whole layout of the screen. Like let's say if you're building a small wireframe for a watch, like let's say if I have to do it for you to show this is a wireframe I am going to build for a watch interface. Like let's say if I'm building a watch interface, okay, Perhaps this is the map section.

Okay.

And when I click the map section from point A to point B, it can show me.

Okay.

And okay, so I can able to show like this. It's as simple as that, right? So from point A to point B, map takes the option. So map is a primary option. And if he wants to go to the home, you can able to press this option.

Okay.

If he wants to press the A interaction, he can able to press here. If he wants to press the B, he can able to press here. So this is as much as enough. Guys, what is this? Very rough. This is what is exactly called wireframe sketching. If you're doing a sketch for the watch interface, okay. Similarly you can do for the mobile interface or website, whatever, okay. It doesn't matter. So this, let's say this could be a very first idea. Second, okay, you have another watch showcase. Let's say, let's say in the map, like let's say people has to find out the cab, like let's say if it has to go to this and it's like gap, walk and train. Okay, so these are all the two possibilities, three possibilities, what one can have. Okay, so here I am trying to look at this. I just created one idea. The reason being this is the map section. And also people can choose the ride. Like let's say if they can go for the cab, they can go for the walk, they can go for the train or so the map section, I have drawn a block map heading. I've drawn a block share option, I've drawn a block, these three options, I drawn a block. So wireframe is basically to freeze this kind of a content and thought process towards what you're thinking in interface. See, do you think it takes a lot of time? Just two minutes I made in front of you. So it is very easier for you to just think about it how we can able to roughly Sketch it how we can able to roughly bring those ideas here? Okay, let's say if we wanted to give some. Okay, you can ideally give one something like this. So you could also give something like this. So it means that this is the very, very first screen. Like let's say if you are, if you are using some kind of a platform to showcase like let's assume I'm drawing another wireframe here, okay, Imagine I'm drawing another wireframe here. Okay, so I'm taking you an example of showing you the primitive shapes, how the blocks could be. Okay, so I'm just using some colors here. Perhaps if I can use some kind of a color and methodology. Okay, so I'm just showing you some basic frames and understanding. Let's say this is.

Okay, I'm just.

Using some sketches so that you can also try at home while you're creating your prototypes. Okay, so can you see here from the one, you can able to go to the two, this is the three. So this I've just drawn the blocks so that people can understand. This is where the contents could be there. This is where the call to action could be there. I can also put something like a call to action. I can also show call to action. I can also show option A, option B. So while you're giving it to the developers, while you're communicating to your team, you can make them understand in a very, very, very simplified manner in just few minutes what is your thought process if something goes wrong, they can able to tell you now itself, yes, this is not going to work. This might have problem in development. Maybe this will not be user centric. Maybe user will not understand something. So some idea, some feedback, something could come up, right? So people will know what are you thinking Initially itself, this will prevent you in a larger scale while you're going and implementing this idea in a development way. Because lot of times what happens? Excuse me, a lot of times what happens, people make detailed sketches and finally the developer team comes and says this is not what we expect. This is not possible to develop in real time, right? So that is what is going to happen. And also I showed you the live demo, right? So I started simply sketching the basic sketches. You, you can choose it for mobile or you can even choose it for. You can take a bigger sticky notes or you can take a paper. It's very important to take a printout of the watch interface or the mobile interface. Whatever size you have in one is to an A4 sheet or A3 sheet. Take multiple copies so you don't have to even draw the basic frames. You just have to put the content and concepts inside so that you can able to move very, very, very, very faster. And it looks very even and seamless as well.

Okay.

And also start with a simple wireframe homepage. Yeah, I've showed you. Also I'm going to tell you an activity. Before we do that. Let me show you one more thing as well. Okay, so let me show you one more important interesting element. Let's say if you're. If you can able to see my screen, which is the Miro. Miro is one of the good software. You can use many tools as well, like U Wizard, Figma, Adobe xd. So wireframes, very basically it is can it can be done in softwares like Miro itself.

Okay.

Miro is very, very simple tool. Fairly in just half an hour you can able to get start using this tool and it can be done by any fresher as well. You don't need a very proficient level of expertise to do that. Okay, so this is the interface of Miro. Miro is a mind mapping tool. It's a. It's a brainstorming tool. Perhaps it's a project management tool as well. But nowadays Miro has a very good feature of having lot of plugins inside so that you can able to develop a wireframe prototype even it's just very close to high fidelity wireframes you can make. Okay, so as you can see there are many options available here, right? So here go for this option which is called tools.

Okay.

In this you can able to type wireframes. Can you see here wireframes library. So whatever you want. Like let's say if you want a phone, just drag and drop. That's it. Can you see here it came. Can you see here it came. Beautiful.

Right?

So this is as simple as that. You're already creating wireframes. So let's say if you want to put some buttons inside it. Yeah, you can create it. Like let's say if you want to create some kind of a what you call chip inside it, fine, you can able to create it here. Cool. If you want to create some kind of a search bar for your option for your wireframe. Okay, so this is a digital way of doing guys, apart from doing physical design, you can also try doing this in a digital way. Okay, so this is avatar. Let's say if you're creating some login pages, okay, you want to create some kind of a small card to interact what are the details of the user.

Okay.

If you wanted to put some kind of like let's say the solid icon is also there. The outline is also there. You want to use some toggle. Okay, you can use here.

Okay.

If you want to use some corrosal effect or something, you can show it here. So it doesn't matter what your, what your thought process is. You just have to bring it to the miro just by typing the keywords. Okay, like let's say tap. If you want to show a tap button. Okay, like I'll zoom one screen particularly maybe you have to show some gestures for your user. Okay, you're just creating a learning module for your instruction guide. Or maybe perhaps you are you're going to teach them how to what you call learn this particular concept. Okay, so you're just giving them some idea. Okay, so here what you can do here you can bring some kind of what you call a buttons where.

You.

Could write like this. Fine.

Okay, touch.

You don't have to even use colors at all. Just contrl d. It will be automatically. It's as simple as that.

Right?

How much time it took? Few minutes.

Right?

That's it. So you're telling there is an option. There is an option called what you call vertical. If you give it, it'll equally space yourself. So here what I'm trying to say, I'm trying to say this is a learning module where this taps is the feature for the user to understand.

Okay, maybe.

Tap one. This is tab two, tab three.

Okay, this is swipe. This is maybe touch. Okay.

Maybe I can exactly like two finger tap. Okay, maybe zoom, maybe toggle. I just. I'm just putting it here so that you can understand what is really happening here. Okay, like let's say if it's a. If it's some kind of a rocking screen which you're building for a user. So you can perhaps put it in a very, very, very, very smaller way.

Right?

You can able to put it. Or if you want to show some kind of a progress bar for your application, you want to show what is there in it. Okay, so like this you can able to simply create lot of beautiful icons or elements inside your interface to communicate. What are you trying to say? And the beauty is you can able to add lot of wireframes as well. The moment if you click it here, can you see something here? In fact you can create one. You can create one icon. Can you see here you can able to create beautiful connections over here. Like let's say see if you want to connect as a wireframe by clicking here, you can able to go to the next screen, you can show that. So what happens is while you're communicating with your developer team or anything you can say while people are clicking here, they can be redirected to this screen. Okay, you can put something like, fine, I'm. I'm not able to rename it. I don't know why it is. Ideally you can do it. Okay, maybe if you toggle off this, you can show it as a normal wireframe. If you want a phone option, you can able to do this as well.

Okay.

And you can able to create a orientation change. Also if you're showing any landscape mode, it's totally up to you. Okay, There are many options. Go and play with it. But basically this is to help you understand you. You can build anything out here if you want. You can able to add some icons here. If you want to add some fancy icons. If you want to add some kind of a home icon where people can able to go to the home button here. If you want to delete some option, you can able to give that option here.

Okay.

If you want to show some kind of a lock option. So whatever you want, you can able to type it out. Guys. So it's all completely available. It can be used free of cost. Like let's say if you want to use some search. Look at this search option is there, right?

See.

So the point here is try and experiment this tool that you can also understand what is really happening for your wireframes. Because people, what they do is they. They do a lot of detailed wireframing at the start of their project itself, which is completely not required. Nobody's asked you to do that. The reason being you should do more of iterations. See, if I create this kind of a speed just like that, what I showed you in just 15 minutes, in just 20 minutes, I could able to create at least 10 different concepts moving forward. Lot of people don't understand the power of going into this detail. A lot of people think, oh, I need to create a very detailed sketch here. Okay, Wireframe needs to be very neat and clean. What people will think of me. So all these thinkings, what will do is it will. It will hinder your whole process and then. And it will make you take lot of time. People don't understand it. Okay, so the activity which I'll give you guys, okay, you can take one mobile app homepage and you can able to try to take a wireframe of it. Take a very simple screen, you can able to do it. Okay, so use basic shapes. Don't focus on very complex shapes.

Okay.

Focus on layout. Like let's say what could be the homepage icon or what could be the homepage size.

Okay. Choose.

Basic grids.

Okay.

You could choose basic shapes.

Okay.

And line diagram it. You don't have to even make a complex, complex one.

Okay.

Do hand sketching and then you can take it to Miro.

Okay.

It's a very simple software Miro. You can create a free account Miro. And you can do it, guys.

Okay.

Don't worry. And also you can complete this wireframe in five to ten minutes. Quick sketching and do it. See, in ten minutes you can able to generate at least four or five different kind of an ideas for your thought process. Take any one of your project. If you're already a designer, take one or two projects which you already have very good shape and build a small kind of a wireframes and add it in your portfolio. It gives you a lot of leverage. You are a process oriented guy. You are a very rapid sketcher. You are more conceptualizing your ideas before you come into a solution stage. So people will understand you are driven by a systematic approach, not by just some random thought and intuition.

Right.

You know what happens? People just go with a random thought and intuition and they just submit in the process, in the, in the portfolio or anything. It means very clearly that you are not having a clarity in what are you thinking. You're not having some kind of an understanding what has driven you to bring this idea. That is the reason I'm taking this particular sketching activity and also showing you how we can able to create wireframes.

Okay.

And also I'll show you some important information, guys. See, efficiency in your prototype can increase your design by up to 25 percentage faster phase. Let's say if you're spending one hour, you can finish it even more faster. Less than one hour itself. If you're doing a faster way of prototyping using this low fidelity sketches. Can you see 2021 UX survey has said that improved communication, particularly 30% better communication, you might have guessed it out. The more clearly you communicate with your team, the lesser iteration you're able to bring in your process. And obviously it will reduce your errors over the time because you're already doing a lot of prototyping and testing and mock up and finding out lot of corrections in the initial early stage itself.

Right.

15% fewer errors needs a normal groups has found that. So it is very vital to understand the statistics also guys.

Okay.

So you can try with many tools like let's say UI wizard, you can try with Figma plugins. There is a Figma plugin which you can try to create wireframes. If you go to Figma, you can type this run plugin and type wireframe. You can find lot of options in Figma to do that.

Okay.

In fact, use Wizard. This digitalizes your prototype snap and upload a create wireframe. So what happens is in in UI Wizard, I. I did it in one of my earlier classes. You can just photo your picture of your wireframe. What you did, UI wizard will digitalize it into a wireframe. Are you guys getting blown? This is very simple tool. You can able to try it out.

Okay.

Perhaps you can also try with AI Figma tools. Like let's say the Figma tools is available even in the Miro. AI options is there. But basically try with that. This session is to give you some idea what is wireframe, why it is done, how to do it in a very simple way and how you can practice it once. If you're going forward, then you can use some advanced tools to also automate it, fasten the process and bring a lot of clarity towards it.

Okay.

And also you can use something like photo Snap.

Okay.

Ideally you could also do something like a photo in your. In your phone. Just click a photo and bring it here.

Okay.

You want to show your live raw sketches as well. Like let's say you're bringing this Image into your WhatsApp or maybe whatever digital way you wanted to bring this. You can also put this pictures and you can quickly scan it into Miro. Miro also has the option of digitalizing this content parallelly.

Okay.

You can create very, very simple basic sketches. Also, many people would love to show their raw work to the recruiters.

Right.

For that purpose, it would be much easier for you to showcase them.

See?

Hold on. So I'm just trying to figure it.

Out.

So that you guys can also try it out very, very easily.

Okay. Yeah.

Just a second.

Yes.

So can you see? I'm just. I'm just creating a picture. I'm just creating a drag and drop so that you guys can also very well see it.

Okay. Yeah. Okay.

Once again, I'll share the screen. I'll share my entire screen so that you can able to find it very easily.

Okay.

Yeah. Look at this. So like this is my WhatsApp image. What I've taken. I'm just putting it into a mirror.

Okay.

Can you see here just. You have to drag and drop automatically this image came.

Okay.

Because for some People, it would be much better for them if they show it live sketches. This is the thought process, what I had. You can able to name it. You want to add some sticky notes to it. You can add it.

Okay.

If you go to the mirror, there'll be many options available here.

Okay.

And create one.

Okay.

You can tell this is one. Make it really small so that it looks like a proper sticky notes. Okay.

This is a.

Thought process, so you can able to pin it here. No problem at all. This is my thought process.

Okay.

So you can say I've also created. So one more sketch here. One more sketch here. Based on the sketch, you can also tell this is what has driven me to bring this concept. See, you can able to create a very cool presentation or showcase your idea in a more clearer way. Lot of people don't understand this, so they think it's very, very difficult to. It's very, very difficult to do it and it takes a lot of time. It doesn't matter. You have to just make it very simple, to the point, crisp and clear. Communicate with your team. If you are very convenient in doing this over the time, very, very, very, very fast. I'm telling you guys, you will have no problem to communicate with any designer over a time. It is much easier to do it in a very rough way.

Okay.

And also the importance of wireframe. You know why wireframe is now important? So keep on iterating. You can use many collaborative tools like InVision. Okay. You can use something called what you call FigJam.

Okay.

You can also create wireframe there.

Okay.

You can use Miro, you can use figma, you can use xd, you can use. There is a tool called Sketch. So a lot of tools is there. These are the live collaborative tools. You can able to share this input with your team and people can do it on a live basis.

Okay.

And also, yeah, so this is now we have seen what is mean by wireframe and why it is important and. And how you can able to sketch small wireframes. So let us go a little bit, reflect it.

Okay.

So we understood what is the layout and organizing and content blocking for wireframes. We understood what concepts could be gone to there and how it can be made into a connection even in wireframes. We have created some arrow marks and other things in Miro in order to show some Screen one, screen two, screen three, in order to show the full flow.

Right.

So that we understood. Also we understood what are the biggest challenges keeping in the design simple but functional. How to use wireframes. To speed up your future design projects and everything. We did all these things. But majorly what I would like you to see is see it is not only about learning the wireframes and everything is going to be very helpful. End of the day you should be able to have a full project with your thought process built. In order to do a project at least you need 30 to 40 days to make it in real time. You can do a project in even one day also. But the depth what you will be going, it will not be much clearer. So I would invite you to the Sunday webinar 11 o'.

Clock.

The link is available in the below description. You can come and experience me how you can able to build your project, target the right industries and start working for them and go into that industry in less than 90 days. Some of my students have got into big, big industries by following the six step formula. Because wireframe is a very small part of it. If you wanted to learn the full process end to end, this is the best way you can able to take an advantage. Okay, so 11 o' clock Sunday. I'll see you there guys. And also make sure you subscribe for the channel because every day we'll be posting content for you to learn more.

Okay?

So thank you so much guys. I wish you all the best. I hope you would have taken a lot of benefit in this. Keep subscribing. Also bring to your friends, whoever is interested to learn this session because this is in YouTube live. You can also share with them the content, the link, everything and come and join my webinar to learn even more to see the full path. Okay, Take care guys. All the best. Thank you guys. Thank you. Punish and Nishu Kushwara Lot of people have come and taken the advantage here and a lot of people will also see it in the future. I wish you all the best. Take care.