Creating Wireframes for Page Layouts

When helping customers migrate their Internet sites to Microsoft Office SharePoint Server (MOSS) 2007, I've found it very helpful to create wireframes showing the various fields, Web Parts, and master page content. For the last several years, I've been doing this in Microsoft Office Visio, but you could certainly achieve similar results with other tools, such as Expression Design.

I start by taking a series of screenshots of the existing Web site using Screengrab! (which makes it very easy to capture entire Web pages). For example, here is a screenshot of a "Generic" page on the Agilent Technologies - LSCA site that I captured a couple of years ago.

Figure 1: "Generic" page

See full-sized image.

I then paste the screenshot into Visio.

Next, I deemphasize the portions of the page rendered by the master page. To accomplish this, add a rectangle with the text Header (Master Page) over the top portion of the page. Then fill the rectangle with light gray (Shade 15% ) and set the transparency to 30% . Repeat similar steps for the footer and other content provided by the master page.

The next step is to emphasize the various fields that we need to define in the corresponding content type. In Figure 1, it is easy to discern that we have a Title (i.e. "Glycomics Solution"), a Page Image (i.e. the circular image on the right side of the page), and some arbitrary amount of Page Content (i.e. the "stuff" in the middle). I also chose to provide a Subtitle field for the bold text at the top of the page. Isolating the Subtitle allows us to provide "semantic markup" and better control the formatting and layout of this content.

To highlight these various fields, I create rectangles with corresponding text and fill them with a very light red (Tint 35% ) and again set the transparency to 30% .

We now have a "wireframe" that shows the various portions of the page with just enough visibility of the underlying content to understand what each portion refers to.

Figure 2: "Generic" page (Page Layout)

See full-sized image.

Here is another example, based on a press release.

Figure 3: Sample Press Release

See full-sized image.

Figure 4 shows the corresponding page layout.

Figure 4: Press Release (Page Layout)

See full-sized image.

Note the importance of choosing good sample pages when mocking up the wireframes for page layouts. I chose the example press release above based on the fact that it had "additional contact" information. In other words, all press releases have primary contact information (which I chose to map to the out-of-the-box Contact Name, Contact Phone, and Contact E-mail Address fields), but only some press releases have additional contacts -- which may consist of one more more individuals. Rather than attempting to create separate fields for each individual's name, phone number, and e-mail address, we chose to simply provide a single field for greater flexibility.

Some pages may be comprised of both fields and Web Parts. For example, consider the following product detail page.

Figure 5: Sample product detail page

See full-sized image.

In this scenario, the "Buy Zone" and "Announcements" features are both implemented as individual Web Parts (due to the dynamic nature of this content). Figure 6 shows the corresponding page layout, highlighting the Web Parts in a different color.

Figure 7: Product Detail (Page Layout)

See full-sized image.

Wireframes like these are valuable when you are trying to define the various content types and page layouts, as well as when it comes time to document your various feature specs. So the next time you start a SharePoint project -- or any Web development project for that matter -- I recommend creating a Screenshots library right from the start and adding artifacts like these. I also keep a copy of the Visio file (typically named Models - Page Layouts.vsd) so I can quickly make changes as the content types and page layouts evolve over time.