In my “Smart Marketers WordPress’ workshop, the topic of wireframes is discussed, because there is a lot of confusion about using wireframes when you are using WordPress Themes. Some people dismiss wireframes are considered an extra step, especially if they are going to use a pre-designed theme in WordPress or other CMS.  But that’s a big mistake to overlook the need for good wireframes in website planning.

Wireframes? Wireframing?

Wireframes are simple sketches or diagrams that show the navigation, the main buttons, the columns, the placing of different elements. They are a lot like blueprints. They show how the main elements are working on different pages of a site.

Wireframes are NOT web designs.

I try to do them in black and white, keeping them as rough as possible to avoid having them be confused with Web page designs that will come later.

Wireframing is the process of blocking out your key site pages. It primarily allows you to define the information hierarchy of your design in a simple, rough way, making it easier for you to plan the visual layout according to how you want your user to process the information.  I’ve found that good wireframes help clients focus on content instead of aesthetics.

They can look really clean and simple, like this example:

Or they can be very rough, and still be useful, like this:

A wireframe like the one above might be cleaned up to clarify things visually. But that’s not always needed. Instead of relying on the look of a wireframe and relying on the precision of the visual layout, you net great results if the front-end designer gives good, clear and specific direction to the development team in terminology they understand along with a sketch. Less is left up to visual interpretation that way.

Wireframes can also be made as detailed as you may need to handle very complex site pages, like this example for CNN International.

Isn’t wireframing counter to the whole idea of using a WordPress theme?

No. On the contrary. Wireframing is so important it should be done BEFORE WordPress Theme shopping starts. A set of good wireframes and some diligent wireframing helps you DEFINE what you need in a theme, before you commit time, money and energy in the wrong theme, trying to make it jump through hoops to achieve your site goals.

What are the benefits of using wireframes in a WordPress site project?

Because good wireframes allow you to assess and prioritize the content areas and features that are important to the site, wireframes can lead to a more complete shopping list of UX and interaction points that helps designers and stakeholders as they review potential WordPress theme candidates.

But you don’t want to simply do a very neat wireframe of a site’s homepage and top level pages and call it a day. It’s more valuable to have many rougher-looking pages (and different page types) addressed in your site wireframes, so you can be aware of needs the theme will need to support on pages that are deeper in the site. You don’t want to have a theme that works well on a few top-level pages, only to find yourself struggling with workarounds for many other pages of your website.

Use wireframes smartly with WordPress

Wireframes work best after site goals have been outlined, but before you start to touch design or theme shopping. They are essential in the process of getting ideas down in one place for everyone — client, stakeholders, designer and developer — to agree upon.

I like to view wireframes on paper stuck on a wall or virtual desktop that I can share with partners in other locations. We keep them loose, settling on Nav and UI needs, then moving on to “blocking in” the important parts of each page. It’s like a game of finding what works where in a consistent way.

There is going to be some back and forth in layout or content areas. That’s OK, too. It’s part of the process. Some ideas you might have originally thought were needed for one part of a site might shift or re-prioritized.

When it comes to creating good wireframes and using them effectively, the key is to use wireframes to check the total UX.  The sites that are best at retaining visitors have a consistent, flowing user experience (UX) throughout the site, so the visitor remains engaged, can find what interests them, and can navigate instinctively.

After creating good wireframes, go theme hunting with confidence!

Got your wireframes approved and everyone around the table onboard?  Good. Now you’re ready to go theme hunting.  Whether you are going to use a WordPress theme ‘straight out of the box’ or with customization, what you’ve learned through good wireframes will help you identify your needs. There won’t be guesswork about whether WordPress themes you are considering are a good fit for your Website.

---

---