Content-First Wireframes: Perfecting the Design Process
Creating a wireframe without thinking about content is like hitting a piñata blindfolded: you might get it on the first try, you might need several attempts, or time might run out and you won’t have hit it at all. But before diving into how a wireframe is built…
What is a wireframe and what is it for?
A wireframe is a visual model that represents the structure of a website or application. It works as a visual guide to how the content, navigation, and overall user experience will be organized before final content like images or text is included on each web page or application screen. It also includes interface elements and navigation systems, showing how they work together.
Wireframes are typically created by a UI/UX designer, who, based on a provided brief, envisions how to arrange the elements that the application or website will contain. They can be as rudimentary as hand-drawn sketches or more elaborate, built with specialized software. Below is an example representing the wireframe of a banking portal once a user has logged in.
Wireframes do not show the final design, but are limited to indicating the arrangement of elements on the site or application. Just as an architect presents blueprints that do not include the color of the walls or the finish of the floors.
As you can see, someone looking at the wireframe does not yet have a clear idea of the final graphic design, since dressing it with typography, corporate colors, images, and content comes later in the development process. Creating a wireframe is an essential step in the planning stage, but sometimes this step is skipped by developers who don’t work with an error-proof methodology.
Skipping the wireframe can lead to endless changes from the client and a huge waste of resources. Imagine the design team working alongside programmers to build a mockup that looks nothing like what the client originally envisioned (before development, the client must approve the wireframe). In that case, all teams would have to redo their work—possibly more than once.
Another drawback that experts in the field have recently identified is that even when a wireframe is created, if the final content for the website is not kept in mind, elements are not always arranged in the best possible way. This is why the new trend is to create wireframes with a content-first mindset, guided by prioritization frameworks.
Priority Guides (Content-first) while building a wireframe
The concept of a Priority Guide in the context of UX design is attributed to Drew Clemens, who coined the term in an article about the process of designing responsively. The limitations traditionally associated with wireframes can be overcome by adding one guideline when creating them: think about the content.
As mentioned earlier, designing interfaces without considering the content can result in incorrect hierarchy. That’s why, by following a priority guide, the designer empathizes with the user of the page or application and prioritizes the most important content. How? By showing the most relevant information first or placing it in the most visible area.
To establish a Content Priority Guide, it is necessary to:
Know the user. Understand who will be using the application, what their interests and priorities are. For this, tools such as buyer personas, empathy maps, and the customer journey map are useful.
Determine the objectives of the site or application. Do we want to generate leads? Then it makes sense to place a form early on the page. Do we want to sell a product? Then we should feature it on the homepage, avoiding extra clicks for the user to find it.
Identify the most relevant content topics. To do this, it’s necessary to know which stage of the customer journey the content is targeting, so that CTAs or topics on each page can be properly prioritized.
Define the objectives and priorities of each page or screen. Once the objectives are defined—who each screen is for, what we want the user to do, etc.—a Priority Guide is created, as detailed as necessary.
It may seem like a very simple concept, but in reality, having a clear understanding of the content priorities that the user is looking for on the page or application can completely change the structure. Returning to the earlier example, this could be the result of the Wireframe once the Priority Guide is taken into account.
In addition to websites developed with these guides being more user-friendly for end users, work teams also find these benefits:
They optimize the customer experience, since the final products are user-centered.
They are more stable when implementing responsive development, as a traditional wireframe does not necessarily preserve the same element order on mobile as on desktop.
They foster interdisciplinarity and teamwork between marketing departments, since the design is necessarily centered on the research conducted about the client or potential user.
In conclusion…
The traditional way of drawing a wireframe has limitations that can certainly be overcome by being empathetic with the user and designing with them in mind from the very first draft of the site or application. Priority Guides are a key tool that has been described as content-first, but they are also customer-first—significantly improving the experiences and stories we create.