This is no longer the most up-to-date version of this article. Please refer to the new article: Visio template and stencil for designing SharePoint 2003 portals and sites (update).
I also have a Visio template and stencil for SharePoint (MOSS) 2007.
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.
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.
Download the Visio template and stencil for designing SharePoint sites (ZIP-file). Store the files in My Documents\My Shapes.
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‘.
The result is an empty page, but with the background and some rulers that help you positioning webparts on the background.
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 1024×768 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
The 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!