When it comes to wireframing, the earlier you start, the better. (Within reason, of course.) Different projects require different workflows, but as a general rule, you should draw up your first wireframe in either the initiation or planning phase of the project life cycle.
If you begin wireframing during the initiation phase, you should start with low-fidelity wireframes. The initiation phase is a time for experimentation: Youâve had an idea for a website or app, but donât know exactly what itâll look like. Low-fidelity wireframes are quick and easy to create, making them the perfect brainstorming tool. Get your ideas down, send them to other stakeholders for feedback, and then go back to the drawing board.
As your project moves into the planning phase, you should start to generate mid- and high-fidelity wireframes. The planning phase is when designs become concrete, and youâll need robust wireframes before you can move on to the next phaseâexecution.
Your wireframes should develop in complexity and polish as the project moves forward through those first two phases. By the time you hand the designs over to the development team for coding (the execution phase), you should be finished with the wireframing process.
Elements of a wireframe
Wireframes look simple on the surfaceâaesthetically, thereâs not a lot going on. In part, this is why theyâre so effective. In web and app development, itâs tempting to rush into the world of fonts and colors before youâve properly planned out the user experience. In wireframing, you set these distractions aside, focusing instead on three fundamental aspects of your product: information design, navigation design, and interface design.
Information design
As users interact with your app or website, they constantly take in information: What sort of website are they visiting? How can they interact with it? What is the âpurposeâ of the site? The process is automatic and largely subliminal. As the designer, you facilitate this interactionâyou choose how to present the information on a page.
So what does this look like in practice?
As an example, if your website provides a messaging service, most users visiting the site will fall into one of two categories: returning users and new visitors. Returning users will likely want to sign in, and new visitors might want to create an account or simply learn more about your service. On your homepage, you need to account for each type of visitor and provide them with enough information to achieve their respective goals. Perhaps this information is communicated via buttons: log in, sign up, or more info. Information design is deciding which to include and where to place them.
Navigation design
Weâve all spent way too long looking for the âSettingsâ menu on one app or another. And weâve all gotten the sense that a website is taking us in circlesâthat moment when you feel like the âAccount Informationâ page is just a click away, only to end up back on the home page or worse, a 404 error page. The point is, as users we experience poor navigation design all the time.
As the name suggests, navigation design determines the ways in which users move through your app or website. From any given screen, a user can navigate to a number of other screens. They wonât know this, however, unless you tell them: drop-down menus, clickable links, and scrolling bars are all examples of visual elements which help the user navigate your product.
Interface design
Interface design brings it all together: information, navigation, and, well, everything else in your wireframe. Both navigation design and information design have on screen componentsâbuttons, menus, etc. Interface design refers to how those elements are incorporated into the user interface as a whole, which includes other elements, such as text boxes, header images, and sidebars.
How to make a wireframe
With understanding wireframing theory provided in this guide, itâs time to put that knowledge into practice. Here are some steps to begin wireframing:
1. Map out a plan
