imason's User Experience team offer tips and insights, and sometimes share their frustrations, about Interaction Design, Usability, Information Architecture and gathering requirements.
Home » What We're Thinking » User Experience Group
Problem: You've been asked to create a graphic design that can be applied to a SharePoint 2007 site - but you've never seen one before. Or, you've seen one but don't have access to the CSS to see how things are set up.
Here are some basic guidelines for creating a graphic design that can easily be applied to out-of-box Microsoft SharePoint 2007 sites. The guidelines apply to designs that will be implemented using SharePoint “themes”, which means that only CSS and graphics can be altered but the HTML on pages cannot. This is by no means an exhaustive list of SharePoint elements - but if you're trying to work on a mock-up of new graphic design, hopefully this will help clarify some of the terminology and limitations you might hear about when discussing the feasibility of implementing the design with a technical team.
Disclaimer: When I say that something "cannot" be done - I don't mean it's impossible, but rather that it's not easily done by modifying a theme file alone. And I won't claim to be a CSS guru either. I have no doubt that people have figured out ways to overcome some of the points below with more crafty CSS than I am capable of.
TipIf designing with a “grid layout”, commonly used in print design, percentages will have to be used to define the column and gutter widths.
In Sharepoint terminology, the left navigation bar is referred to as the “Quick Launch” bar. The links in this area are generated dynamically as users add lists and libraries to their Sharepoint site.
The breadcrumb uses plain text, hyperlinks, and the “>” character to let users know where they are in the site hierarchy.
Global links appear at the top of each page.
Area / Site Title
Logo / Icon
The default icon can be replaced with a JPEG, GIF, or PNG file.
The page title is plain text that can be styled.
The page description is plain text that can be styled.
“Web part” is a SharePoint term that in other platforms means “widget”. A “web part page” could be considered as a dashboard view of various lists consolidated on a single page. The condensed view of each list is referred to as a “web part”.
Web Part Title Bars