 Would you build a house without a blueprint? So why are you designing your products without wireframes? That's crazy, you're crazy, we're all crazy. I'm Chris and today we're gonna talk about wireframing. Specifically, what is a wireframe? Why do we do it? The different types of wireframes and the best tools out there. And then finally we're gonna touch on best practices. So let's dive in, what is a wireframe? A wireframe is a blueprint of a website or a digital product that indicates where visual and UI components are located. It gathers your ideas and functional requirements to help you see the complete picture. Similar to blueprints that builders use, designers use wireframes to help them keep track of complex designs and make the entire process run smoothly. Having a complete overview of the user flow is perhaps one of the best benefits to wireframing. If you want your product to run successfully, a user flow is essential. When your app or website becomes too difficult for users to navigate, they are more likely to abandon your product. So wireframes have some distinct features. They don't exactly look like the end product. They're made up of line, borders, and other geometric shapes that you can think of. Wireframes don't involve website features such as text, video, animations, or whatever. Mostly black and white or grayscale with occasional bright spots. But why wireframe? Well, wireframing is the backbone of a product. And while I understand there's a temptation in terms of jumping into development without spending time on wireframing, I almost would guarantee that decision to be wrong. Think about the Titanic. Iceberg, right ahead! Thank you. Right ahead! The Sinking of the Unsinkable is a classic story of how the tiniest error in the project planning phase that could lead to a total disaster. We know the what and why, but what are the different types of wireframes? Well, the first is low-fidelity wireframes. They're done focusing on the layout and the high-level interaction. Basic shapes like squares, triangles, circles, and lines to represent the UI elements and content. Then you have the mid-fidelity wireframes, the next iteration above the low. It allows you to use grayscale colors to emphasize the layout and the particular elements, but you don't need to choose a color palette or spend time including real copy or text. And finally, the high-fidelity wireframes. They're the more detailed counterpart to what I just mentioned, but they are not concerned with the final visuals, branding, or style. The UI elements look realistic and might even include textures and shadows. Those are the three wireframes typically used in our industry, but what tools do people use to create these? Here are my five favorite tools, and you guessed it, Figma is my number one. Then we have sketch, mural, UX pin, and finally, paper and pen, which is probably the one I use the most. Let's talk about some best practices when wireframing. The first one is color. Wireframes are used to provide a visual understanding of an early product, either to stakeholders or to test users. It's recommended that when you're working on it, you don't add colors because they could draw the user's attention in the wrong way. The purpose of the wireframe is to communicate and evaluate visual hierarchy, not branding or emotion. Two, content. Define the type and the amount of content that you include in your wireframes, conveying the requirements and ideas behind wireframes without falling into the trap of spending too much time on copywriting. Number three, annotations. Include annotations while working on wireframes is important because it helps you give clients a clear explanation of your design decisions. Number four, accessibility. Think about being inclusive. Use components and adequate content hierarchy for users who may be colorblind or older users or younger users or power users, et cetera. Just make sure you include everyone that your platform may affect. Number five, wireflows. This is an easy way to demonstrate the desired interaction and process that a user may follow while using your product. Whether you are designing or redesigning your Apple website, wireframing can help you focus on functionality and user experience before focusing on the visual aspects. Imagine building a house without a blueprint. You're trying to get crazy with it. No schematics, no technical specifications, no material requirements, no structural stability documents, no considerations about using the space, no diagrams of where the financial will sit. I mean, you could try, but it may not turn out as you would like. Think about the chance of your home breaking apart, water leaking, and other problems that you really want to avoid in a new house. So why would you design your product without laying down the foundations? Don't answer that. By showing wireframes in the context of a prototype, you'd also be able to loop in clients earlier in the design process, giving stakeholders a chance to review your product's visual representation before they start working on the creative phase. If you feel that you're spending too many resources on wireframing, have another thing. You can de-risk a project by spotting potential flaws earlier in the process. Your user interface and flows are working properly. That will make the investment more than worth it. If you're interested in learning more about wireframes with detailed guides and templates, check out the link in the description. Oh, oh, oh, oh, oh, oh. Or you could hit the big red button for another Play-by-Play breakdown of UX frameworks. Bye.