If you have already completed our recommended MVP scope then you will have already created suitable Wireframes.Courtesy of InVisionWhether you’re new to user experience design or you’ve been active in the field for years, you’ve no doubt heard of wireframes. Wireframing is an essential step in translating an idea for a digital product into a reality. But where does wireframing fit into the product design process? If you’ve never done it before, how do you know what to do, where to do it, and what steps to take? And what’s the difference between a sketch and a wireframe? What about mockups or prototypes? Let's find out.Getting started with wireframesFirst things first. A wireframe is a low-fidelity design layout that serves three simple but exact purposes:It presents the information that will be displayed on the pageIt gives an outline of structure and layout of the pageIt conveys the overall direction and description of the user interface Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project.Wireframes serve as a middle ground between pen-and-paper sketches and your first prototype. They help you plan the layout and interaction patterns of your users without distracting details like colours or copy. The proposed user journey should be clear without needing colour or shading or fancy menus.Wireframes are fast, cheap, and perhaps most importantly, impermanent. Wireframes are meant to change as you gather more information through customer interviews.Compared with a high-fidelity mockup or prototype, gathering feedback with a wireframe is much more important than researching usage patterns or user journeys. With a wireframe, people pay more attention to functionality and the user experience than the aesthetic characteristics of the on-screen elements.Wireframes serve as a common language between designers, users and devs.They’re complex enough to inform everyone but simple enough to not be bogged down by too much detail or design language.What NOT to include in a wireframeThe key to a good wireframe is simplicity. All you need to do is show how elements are laid out on the page and how the site navigation should work. You can add fancy images and flashy typefaces later. Minimise distractions.Keep these guidelines in mind:Keep your colors to grayscale: white, black, and the grays in between.Use a maximum of two generic fonts, maybe one serif and one sans-serif. Showing the hierarchy of information through font can be still shown through changing the size of the font and whether it is styled (bold, italics, etc.).Avoid flashy graphics and images. Instead, try using simple rectangles and squares as placeholders with an “x” through the middle of the box to show where the image will be placed. Pro tip: You can also do the same thing for videos by using a triangle as a play button at the center of the box.Using wireframes in your design processDifferent UX designers approach wireframing in different ways. Some like to start by sketching by hand, while others like to use apps or tools that are a bit more technically inclined. More often than not, the decision to wireframe by hand or on a computer, and the process used to get to from sketches and wireframe to code, is more related to what approach the particular situation requires rather than the preference of the designer.Rosie Allabarton suggests in a post over at Career Foundry that you should ask yourself these questions to get started:What are the intended user and business goals when interacting with this page?Exactly how can the content be organized to support these goals?Where should your main message and logo go?What should the user see first when arriving at the page?Where is the call to action?What will the user expect to see on certain areas of the page? Your wireframe should be a visual guide to the framework of your site and how it will be navigated. Looks and visual appeal are not factors at this stage. Your main concern with a wireframe should be presenting your content in an intuitive and natural way that is familiar to users of this kind of service.Your mission is to make it easier for your users to accomplish their goals (or for them to hit your conversion point or follow through on your call to action). By presenting your information in this way, you are aligning the business goals of your product with the needs of your users. All by laying out some lines and squiggles. Pretty cool, huh?Tools for building wireframesThere are lots of tools out there for building wireframes in, the one we recommend for its simplicity is BalsamiqWireframing in No-Code toolLots of people ask us can we just prototype in a no-code tool so that we can move to MVP much quicker. Of course you can but in our experience this is not a quicker process, most no-code tools are not designed for creating simple wireframes and even if you do the work to move it from a wireframe to a functional app is still huge. Its much quicker to use a tool like Balsamiq then into a no-code tool once you are happy with the wireframes.