Ep 266| Wireframe sketching - How to do it - 3 Misconceptions

Welcome to this podcast. Thank you for staying tuning here. Welcome. Particularly lot of people are learning skills in this last two days and this is a day three since we have taken this 100 day challenge. We are posting every day content for you to just learn and practice it because skill set is very important for a designer. In this day we are going to learn a skill called wireframe sketching. In the last two days we saw ideation, we saw sketching, but today we are going to see little wireframes. Okay, so what is this wireframe jerk is why it's important. Let me tell you guys. Wireframes clarifies the design concepts, what you wanted to communicate with your team. It comes with a lot of iterations and you communicate with your team beforehand in order to avoid lot of iterations. It also reduces your errors and make sure your prototyping is becoming faster. It also communicates your visual communication to your team and your cross functional team in order to make the work seamlessly happen effectively. A lot of people think wireframes is only for experts. A lot of people think wireframes needs to be very detailed. A lot of people think you need big, big software knowledge to do a wireframe. Everything is a misconception. Wireframes can be done simply by a paper and pen and sketch pens and sticky notes. If you wanted to have a live showcase of it, you can go to my YouTube channel. Also we have recorded a live stream for it so that you can able to see and practice it on your own. If you're feeling difficulties, the link given below for the channel in the podcast description, you can do it. Okay. Also in this wireframes, people think that wireframe is very, very difficult to make. And a lot of times what happens if you are showcasing it, what people may think if it's in a very rough format. So these are all misconceptions. I wanted to clarify guys. Wireframe should be minimal, Wireframe should be very rough. Wireframe should be very quick. That is the whole point of it. Let me tell you the techniques of doing it. First, choose very primitive shapes to do it. People think very, very complex shape is actually making wireframes. No, wireframe should be basically with squares, circles and also with a very, very basic primitive shapes, like let's say triangles, like let's say a simple markup, an arrow mark, an indication, a dot. So these are all the primitive shapes which you can use to communicate your ideas. Basically if you're building a UI screen for a mobile app, if you wanted to show a user clicks in this button from 1 to 2, what is guided? If he clicks this button, what screen will be redirected? You'll have to put a square saying this is the interface. You have to put a rectangle saying this is the interface of the mobile. Like 1, 2, 3, draw it on a chart paper and show this is interaction one. This is interaction two. This is what user will accomplish. That's it. Basically wireframe is to block out your content, block out your placeholders, block out your layout and arrangement in the grid. Whatever you have in your interface to communicate with your developer team, to communicate with your cross functional team in order to get a confirmation. This is what I'm really thinking moving forward. Will this work? Will this not work? Get a feedback, reiterate, get a feedback, come back and do it. Do the one wireframe one more time. So what does this really accomplish is it saves a lot of your time even before building a full solution. See, there is something called low fidelity wireframe. Medium fidelity. High fidelity. Low fidelity is just basic sketches and wireframe which you can do. There are many softwares to do it. In fact I showed you the live demo of Miro and you can do it in figma, you can do it in figjam, you can do it in invision. There are a lot many softwares guys. You can do it in a Microsoft, Microsoft Word also no problem. You can do it in a Microsoft PPT also drawing a box, correcting an arrow mark is as simple as to connect to tell what are you thinking. But tools is second. First of all in your thought process you should be very clear what are you really trying to say. Okay, so that is the most, most important thing. And avoid many colors, avoid many stylistic elements. And make sure you stick to just black and white. Make sure you block out your grid. Use the consistent elements to show what are you trying to say. Then people will understand. Okay, here logo will come. Okay here the buttons will come here. The interaction will come here constantly. This sticky pages will. Sticky buttons will come. That means it sticks to your screen ever. Whatever screen you open. Like let's say time, like let's say battery, right? So something like that. You have to communicate very clearly to your team. Fine. Also there are certain activities which I'll give you guys. See now you understood the theory part of it. Let us understand how to do it in a practical way. You can take any wireframe of a. You can take any mobile app guys like, let's say GP. Or if you wanted to take a PayTM or if you wanted to take Any mobile app which is very favorite for you. Try creating a simple wireframe for the homepage. Take that application, think and do a basic primitive shape. If you see a login button, try to draw login. Don't try to create a gradient, shape, depth, color, everything that's not called wireframe. Okay, Maybe in the medium fidelity wireframe you can able to go a little deeper and fix the placeholders. This is where the logo can come. This is where the call to action can come to that level is called medium federative wireframe. If you're telling this is what exactly what my concept is then it is very close to the reality that's called high fidelity wireframe. If you can see the high fidelity wireframe, it look more closely to the mobile app or UI interface what you're designing. We are not talking about this, we are talking about the wireframe sketching and doing a low fidelity wireframes. Okay, for that take a mobile app, take the homepage, just draw the primitive shapes. If battery symbol is there just draw the destroys rectangle. If you want to show time, just write it down in your paper and pencil and make sure you take a picture or what is your takeaways in that activity and pin it out in this chat box so that I can able to revert back to you with my comments to make a correction for you. Because I read each and every comments whether you're doing it in YouTube or podcast or anywhere. I really have a what you call have a feel to reply you because lot of people needs correction. People needs a proper mentoring and support. So that's the reason I usually comment on each and every post what students are doing. Even if it's a very fresher or anybody who is commenting on this, I'll give a correction for you guys, okay? And also make sure you take an action. Just spend five to ten minutes trying to decipher this homepage login of a mobile app and do it. Because if you do it you will learn it. If you do it, you will make mistakes. If you make mistakes you will be iterating more and learning more. Little good. Okay. Yes. So what is the importance of doing this? Jagdish? I'm also doing all these things. It's fine. See guys, if you take industry stat efficiency in prototyping can increase your Design speed up to 25 percentage faster. 2021 UX survey has said that it improves your communication and 30% better communication happens inside your design teams and cross functional teams interaction design has said that and it also reduces your error up to 15 percentage. Nielsen Norman Group has said that. So these are all the benefits you are getting guys. So think about it, okay? And I'll also tell you some AI tools which you can try it out. There is a tool called Uizard. Okay, there is a tool called Figma AI plugins. So these tools will digitalize your wireframe sketches whatever you took from your mobile photo. Or maybe if you're having a physical paper sketches like a wireframe, you can just take a photo and put it in this UI Zar. It will automatically digitalize this content and it will take out as a wireframe in a real time way. In fact, Figma plugin also use that feature. Okay, there is a plugin called in Figma. If you start running your plugin you can type out wireframe. There are a lot of plugins available here. You can try it out using auto layouts and easily creating a flows for your thought process. Because these are all the tools available. Even in the mirror you can take a picture and drag and drop and show. This is the wireframes I'm thinking. So it will make you look like a very raw figure. How you are able to do it? In fact, in Miro you can also create a small, small interaction while people are clicking. They can be redirected to the next screen and so on and so forth. So this is the tools which you can try it out guys. Fine. So you got the understanding. I hope you would have got a clarity on how to do a wireframe sketching. Why it is important? What are the stat? What are the AI tools which you can implement and how we can able to practice the exercise. Okay, so make sure you come for my YouTube channel every day. 6 o' clock Indian timing morning to watch the live demo. What I'm doing every single day to understand better. This is only. This is all this. We have kept it in a public forum. The reason being a lot of students can come and take an advantage. In fact, we do have paid programs and very intensive programs. But we also wanted to keep some free materials for the students who can come and exclusively take an advantage. Following this, I would also like to invite you to claim the free gift available in the description in the podcast. Make sure you come to my 11 o' clock webinar at Sunday which is more intensive. Wireframe is a very small part of the process. If you want to really learn from end to end and see the whole picture. How we can able to design your career in just 90 days to get into a job. I can able to teach you using my six step formula also in the next 10 years how we can reach your biggest potential in design using the power of generative AI. And I'm going to give you a game plan in next 10 years how we can become a great designer out of your big potential in order to know that you can just climb that free gift. It's a free webinar which used to conduct at 2 hours at 11 o' clock to 11 o' clock to 1 o' clock in the daytime to take an advantage. Okay, so click there and see you there at the webinar. Guys. Take care. All the best.