Visio template and stencil for designing SharePoint sites (beta)


I am sharing my Visio template (with stencil) for designing SharePoint sites. They are designed to assist interaction designers in prototyping wireframes, together with all the other Visio stencils you can find online.

The template and stencil are free to use, just don't re-sell them or distribute them under your own name. Because this is the first time that I publish these tools, I release them as 'beta'. I will be adding more shapes in the nearby future. If you have any suggestions for improvements, please drop me a note.

Software Requirements

These tools were created in and for use with Microsoft Office Visio Professional 2003. You can publish your wireframes in HTML ('save as web page'), but if you want non-Visio users to view your Visio document, you might recommend downloading the Visio 2003 Viewer.

Using the template

If you open the template in Visio, you will see that there are several pages already there. These are background pages. I have created many seperate background layers to be able to easily use pre-defined page templates:

  • SharePoint Portal Server: homepage (tab BG portal1-home), area (tab BG portal1-area), webpart page (tab BG portal1-webpartpage);

  • Windows SharePoint Services: homepage (tab BG WSS-home).

The global navigation is located on the tab NAV portal1, so if you wish to modify a navigation label, you only have to do it in one place.

To create wireframes, insert a new page, set the page type to 'Foreground' and choose the background that matches the page you want to design (see above). For example, to design an SPS homepage, choose 'BG portal1-home'.

Setting up a new foreground page

The result is an empty page, but with the background and some rulers that help you positioning webparts on the background.

Sample of the SharePoint template

You will notice that the drawing page size is bigger than the standard paper formats A4 or letter. I created a larger drawing space to be able to design 1024x768 wireframes and still have room for annotations on the side. The background template does not exactly corresponds to 1024 pixels, but it is close enough for prototyping. Printing of the page won’t be a problem (if I am correct), because the page is set up to automatically scale to your printer size (landscape).

Using the stencil

SharePoint shapesThe stencil offers some of the basic SharePoint webparts. Simply drag & drop them and customize the list or library. I have included an empty webpart, area-details webpart, document library, links list, events list, some custom list views and a site directory. To customize a component, you have to ungroup it first. It will lose its connection to the master shape, but that is okay.

Not all default components are included in the stencil. Webparts like a discussion board, survey, image library and tasks will be added later. So check back later if you want those.

Good luck and enjoy!


Comments (12)

  1. Buenas a todos. La verdad es que decir que es definitiva … es un poco presuntuoso, pero no puedo pasar

  2. Lisa says:

    Hi Roberdan,

    thanks for your great work. For wireframing I usually use axure, because you can produce clickable html prototypes for your customer in short time. Do you have a stencil for the logical architecture of moss?


  3. En el mundo del desarrollo del Software, hay una etapa muy importante en la que o se invierte poco tiempo

Skip to main content