When people think of UX, people generally think of wireframes, which are one of the most important deliverables in the UX process.
As defined by Usability.gov, a wireframe is “a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.”
If this definition puts you to sleep, here’s a GIF of a cat trapping another cat in a cardboard box.
Talk about space allocation...
Wireframes are a low fidelity, digital illustration of a website. Because they're low fidelity, they do not include any styling, color, or graphics. Think of wireframing as the skeleton of your website.
Wireframes are static, don’t show interaction, and are entirely about communicating the site’s structure and functionality. These are great for getting ideas across and for quickly generating concepts to test. That’s the beauty of wireframes. You don’t need to have the details ready to go before creating wireframes. Stay high-level and conceptual.
As you iterate on your designs, you’ll move your wireframes higher up the fidelity food chain, adding more and more detail. Final designs that are high fidelity are generally referred to as mockups or comps. Comp stands for comprehensive, and it’s the final version of what the page will actually look like.
• They’re relatively quick to make because they aren’t detailed.
• They provide early visuals to communicate layout, concepts, functionality, and interactions with team members.
• They’re easy to turn into a low fidelity prototype to test with users.
• And, they’re easy to change.
• Because they're lower fidelity, they don’t include the details, or technical functionality. This can make wireframes harder for team members, users, or clients to envision.
• As you increase the detail in the wireframe with real content, it can throw off the layout.
Regardless of the cons, wireframing is still considered to be one of the main UX deliverables. It’s one of the few necessary steps that you’ll take to successfully complete a case study.
