Wireframes are static diagrams of content, usually comprised of a series of plain boxes that denote how elements are to be arranged on a page. They serve as the “skeleton” of a product. And one of its most important purposes is to communicate content hierarchy.
There are several elements to consider when designing a wireframe. When selecting which to prioritize, focus on these three areas.
Primary Focus: Content Structure
After discussing content with your stakeholders, you should have a clear idea of what is considered high-priority content (i.e., must-have content), medium-priority content (i.e., great to have if we can fit it), and low-priority content (i.e., nice to have but not critical) for the wireframe you’re creating.
Structuring these pieces of content effectively on each page will be your main goal. When structuring your content, ask yourself:
- Does my structure accomplish the purpose of the page?
- Is it clear what actions users can take?
- What questions might arise from users?
Your wireframe should display your highest priority content clearly, drive users towards important actions, and help users find what they need.
Refining your content structure is the most important goal of the wireframing stage, which is why you should keep your wireframes simple. The time for visual creativity comes later. Stick to basic shapes and a monochromatic color palette using only the structure of your wireframe to communicate content hierarchy.
It’s always best to use real copy, so you can be sure that you’re allotting the right amount of space for each element. When the real copy isn’t available, at a minimum, you should create some temporary copy for calls to action and page headers. Visuals, on the other hand, shouldn’t come in until later. In doing so, you create a clutter-free diagram that steers the project.
Secondary Focus: Navigation
Depending on the type of project you’re working on, your navigation might be incredibly simple or multilayered. However, one thing that won’t change is the importance of good navigation.
While creating the structure and labels for your navigation might seem like small decisions, they can have a huge impact on results. Navigation affects things like traffic and conversions.
In general, you’ll want to follow two important rules:
- Limit the number of items in your main navigation to less than seven (7)
- Put the most important pages towards the beginning and the end
Keep in simple
Long menus are confusing and difficult to navigate. And it’s not just a matter of finding the right organization. As the famous psychologist George Miller discovered in 1956, the human brain’s short-term memory can only hold about seven items at a time.
Therefore, the more items in your navigation, the more difficult that information will be for your users to remember and process.
If you need to have more than seven items in your navigation, consider breaking them up into groups with a mega menu.
It’s not just the number of items that matters; it’s the order of those items.
We know that people pay more attention to and more easily remember items that are either at the beginning or end of a list. It’s called the serial position effect.
For this reason, positioning important items at the beginning or end of your navigation will make them more prominent in users minds. That’s why you should put items that are most important to your business or visitors in these places.
When creating your menu, ask yourself:
- What are the pages users most want to see?
- What are the pages the business wants users to see?
- Does my navigation need subpages? And how many?
- Am I making content easy to digest or too fragmented for the audience?
Tertiary Focus: Placement
When placing items on a page, it’s important to consider how users read. People typically scan content, reading from top to bottom and left to right, as you would read a book. But people’s eyes are also drawn to items based on size, shape, color, white space, etc.
When creating your wireframe, prioritize where you’re going to place essential elements first. Use your CTAs, videos, images, etc. as landmarks. From there, build around these landmarks based on your content hierarchy. Then step back from your work and see where your eyes are most drawn to. Are your eyes going towards important elements like CTAs? Or are they going to somewhere else on the page?
Place your must-see content where it can’t be ignored. Use your surrounding content to further drive your users where you want them to go.
A poorly placed item on a page can impact how users understand the purpose and goal of the page. Whether your goal is to push conversions or just read to the bottom, your elements placement needs to tell the user what to look at next.
Your wireframe should strive to achieve the core principal of web design and content marketing:
First, give visitors what they want, then they might give you what you want.
Content may drive your traffic, but these elements working together create the road to conversion. Prioritize accordingly.