Design Your Wireframes With Content Hierarchy In Mind

An interface wireframe should clearly reflect the final product. But it should focus more on interactivity and usability rather than aesthetics and color choices.

In this post I’ll share tips for information architecture and structuring your wireframes with usability in mind. These tips apply to websites and mobile apps alike so these ideas work for designers of all backgrounds.

Size, Shape, And Structure

All three of these words start with “s” and they all describe a quality wireframe. You want to design interfaces that clarify intent based on the website’s structure. But you don’t want to add detailed text, colors, or too much specificity to any element.

So the best way to clarify a hierarchy is through visual properties. You can use differing sizes to specify headers and break the page into different sections.

You can also use larger shapes or square grids to design closely related page elements. The placement and organization of these elements ultimately define the structure of the page which is how the user interacts with your design.

At a glance you should be able to quickly distinguish the primary page elements and break down the content structure.

These are the most common page elements you’ll find on the web and they often carry over to mobile apps too:

Strong page headers
Clear navigation menu
Slideshows, galleries or carousels
CTA forms or buttons

Some websites even include alternating grids with graphics/icons explaining the features. One nice finished example is the AdEspresso homepage.

If you’re struggling to design quality wireframes try breaking down existing websites and recreating their layouts as wireframes.

The AdEspresso example above is a nice place to start. But you should study your competitor’s websites and see which features they’re primarily using in their layouts.

Plan Usable Menus

Page content is often structured through a navigation menu. This can include tiered dropdowns or a focus more on primary page links.

But either way it’s your job as the designer to plan out this structure and organize a usable menu accordingly. For example, larger ecommerce websites should have much larger navigation menus with more options for browsing categories.

With specific tags, filters, and search options you can clearly define how the user should interact with your online shop.

Yet a blog might only have a few navigation links going to category pages on the site.

Neither option is right or wrong, just different and geared towards a different solution. Figure out your content hierarchy before designing the navigation. Scribble down on paper which pages you’ll need and how many of those pages have sub-pages.

Through this process you’ll get a much better idea of how to structure your content with a usable navigation, and this works for responsive websites along with native mobile apps.

If you’re having trouble planning a content structure then take a look at these guides:

Work Around Primary Elements

Every page has some main goal or series of goals for the user to complete. Ecommerce shops way to increase sales and increase signups. Yet blog posts might only want to share content and keep the user reading all the way through.

Those simple content-focused pages will be much easier to wireframe than an ecommerce product page or a lengthy landing page. This is why you should always design around primary elements first and figure out where those “actionable” elements should go.

If you want users to constantly add new items into their cart then design around that. If you have a signup form CTA and want to increase signups then craft your wireframe with that CTA high above the fold.

This goes beyond simple wireframing into UX behaviors and user psychology. You should design your wireframes around key behaviors and encourage users to act on those behaviors.

At this stage you might do high-fidelity wireframes just to clarify the structure of the page. Still working in grayscale, but maybe adding detailed icons and possibly some copy too.

If you’re still brainstorming a clear content hierarchy then try designing 2-4 different wireframes. Start all of them with a focus on the primary elements and design the entire layout around them.

This way you can gauge the quality of written copy and the contrast between your buttons/headlines. If something really jumps off the page then you know you’re on the right track.

Plan Around User Behaviors

Interaction design is a huge subject and it should be on your mind during the entire wireframing process. Every website and mobile app is designed for user interactivity and your wireframe needs to reflect this.

Design interfaces around common user behaviors and structure content in this same format. Think about Facebook’s news feed vs the homepage of the NY Times. Very different user behaviors where the content structure is quite different.

You also need to consider the differences between mobile and web interactions.

Depending on how users interact with your page they might be trying to accomplish different goals. Someone logging into their Amazon account might want to save an item to their wishlist, but another person might want to update their shipping address.

You might even structure a full content map that links individual pages to other pages in your site. This lets you visually scan the entire interface to see how pages connect.

The only suggestion I have is to think of your wireframes like interactive designs. What sort of action(s) would a user take on your page? How can you clarify those actions and build content around them?

Each UI project will have different needs but they all share one thing in common: interactivity.

Wireframing Freebies

If you wanna put these ideas to good use then you’ll probably want a clean digital wireframing kit. You can find dozens of these online for free but here are some of my favorites that I recommend for web & mobile app designers.

One-Page Wireframes(PSD)

This single page wireframe PSD actually comes with a bunch of different elements you can add into a wireframe. The elements are all vectors so they’re easy to resize without quality loss.

I recommend this for any type of full-page website wireframe but it won’t come with everything you need. For example, I’d also suggest grabbing the Blokk Font freebie to add into your wireframe design workflow.

Maker Landing Page(PSD)

If you typically create landing pages from scratch then the Maker PSD is a good one to start with.

It’s more of a mockup featuring one specific type of landing page design. It’s certainly not the most customizable wireframing kit but I think it’s a great start for designing usable landers.

Teracy (Sketch)

Sketch users have tons of wireframing kits to pick from but my top choice is Teracy. It’s 100% free to download and it comes with all the fundamental page elements you’ll use in a website.

Buttons, dropdown menus, input fields, breadcrumbs, sliders, progress steps, paginations, you name it.

Teracy also uses pure vector shapes so it’s one of the easiest wireframing kits to pick up and work with on your own.

Clear Wireframing Kit (Adobe XD)

Some designers have made the jump to Adobe XD which has its own batch of freebies on the web. This Adobe XD wireframing kit by Jaison Justus might be just what the doctor ordered for newer Adobe users.

Elements primarily focus on website interfaces but you can use these for mobile app wireframes too. And since XD is still in beta this is a brilliant kit for Adobe’s newest software that’s still finding its legs in the design world.

Whether you’re making a landing page, a personal portfolio, or your own iOS app, the wireframing process is necessary for a great design.

If you follow these tips in your wireframes you’ll have a much easier time planning content hierarchies that look great and offer a clear structure for your visitors.