3 min read

Prioritize Content and Create a Winning Wireframe

Whether creating a new website or redesigning one, you’ll want to start by defining your site strategy: the information you will provide to your visitors, the top tasks you want them to undertake while accessing that information, and the priority of both.

Before starting on a wireframe design, make a Page Description Diagram, which is a list of content elements with a brief description of each, organized as high, medium or low priority.

How to create a Page Description Diagram (2013, TREW Marketing):

  • Grab a whiteboard or large sheet of paper and create three columns. Bring your key stakeholders into the room and give everyone a stack of Post-it notes.
  • Ask everyone to write down the key content they think should live on the page you are discussing (e.g., the home page of your site). Use one Post-it note per content item.
  • Take the Post-it notes and place them in the column that everyone agrees that content falls in - highest priority (must-have content), medium (really great to have if we can fit it), and low (nice to have but not critical).
  • Work as a team to make trade-offs, ensuring you aren't overloading your high-priority column with too many items.
  • Move the Post-it notes around as you discuss and make conclusions.

 Page Description Diagram Create a Page Description Diagram to prioritize your high priority to low priority web content. (Image source: konigi.com)

This approach helps you determine what you offer first, second, and third on a given page of your site. Later, when you build the wireframes of your site, the content that you offer "above the fold" - meaning in the top third or half of the page that is viewed without scrolling - should be the content you've placed in the far left column of your diagram. This is the highest priority, most prominent content that immediately speaks to your audience and helps you achieve your marketing goals. And, the resulting diagram can be translated directly into wireframes. Here is an example of page prioritization seen on the website home page of TREW client Silex Technology:

Silex Technology home page prioritization TREW client Silex Technology clearly defined its messaging and positioning first and then prioritized each message for the home page - above and below the fold. (2013, TREW Marketing)

Once you have your content prioritized, you're ready to create a wireframe. A wireframe describes the information architecture of a website including navigation elements and the placement of content. Visually, it identifies overall functionality – not style elements such as typography, colors or graphics. Much like an architectural layout of a home, the wireframe facilitates a final website design that is both usable and efficient.

By taking the time to create a wireframe, you will

  • Save money by experimenting with a variety of page content arrangements before a designer begins logging hours
  • Be able to think through content decisions visually, trying out different approaches quickly and easily
  • Make the design process efficient, with fewer modifications
  • Provide the designer with a clear idea of which content is the most important, resulting in a design that is closer to the end result much earlier in the website creation process

(2013, TREW Marketing)

Example wireframe(2013, TREW Marketing)

The wireframe allows you to focus on the site’s basic, skeletal structure and helps you create the content hierarchy and determine which pages may be redundant or should be combined with others. (2013, TREW Marketing)

For more information about creating a highly effective website that works for you, download our free ebook, Smart Marketing for Engineers: Website Redesign