This is the first in a series of articles exploring useful tools for designing a user experience for a SharePoint site.
I will explain what the tools are, why the tools should be used, in which circumstances they are best utilized, provide examples of usage and downloadable templates for use where possible.
What is Scamping?
In the context of User Experience a scamp is a quick, hastily drawn visual of a webpage.
Scamps should be the first stage of designing a SharePoint site (or any other site for that matter) when the content that is displayed on each page needs to be defined.
The content does not need to be pretty or drawn with perfectly straight lines (see below). In fact quite the opposite, we’re not aiming for a work of art here, it’s rough for a reason.
Creating these scamps in this crude way allows us to focus purely on content and if any element of visual design were added it would distract from this.
By only using a single color and having no styling applied a client will be led towards only giving feedback on the content of the page rather than being distracted by other elements and giving feedback on the color, imagery or the fonts used etc.
Another reason for doing these scamps quickly is that they will be disposable. An idea can be quickly agreed or disregarded by doing a quick scamp to assess its merits and throwing it away if it does not work. Many hours could be wasted by designing a perfect site with a full blown User Interface design only for the content to be changed and the time spent being wasted.
On a similar note, from the designer’s point of view, if you spend a few days on a design you will become attached to your design and you would be reluctant to make major changes to the layout. If these changes are made at the scamp stage, a 5 minute scamp is easier to throw in the bin and start again.
SharePoint Scamping Template
We have created a pdf template for quick and easy scamping which can be downloaded from the link at the end of the article and printed out. The template comprises of a browser window (1024px x 768px), pixel dimensions and a pixel grid to aid alignment and scale.
Also included in this template are layers that can be turned on/off in acrobat reader to add the Bookmarks Bar and the SharePoint Ribbon to the browser window.
Above: The basic scamp pad
Above: The basic scamp pad with bookmarks bar and SharePoint ribbon