SharePoint 2010 Branding

**Page updated 5/10/2012**

This page contains a list of resources useful for SharePoint 2010 Branding, User Interface, Design and Web Content Management solutions (Right click to open link in a new window).  I tried to bucket them in order of design/dev cycle.   Link back to this page if you find it helpful.

 

Planning and Design

Gathering Visual Requirements

Best resource for initial envisioning?  Pencil and Paper.  It’s also important to develop a style guide that extends design concepts beyond a single prototype.  What are the common design elements seen throughout the site?  Rounded corners, sliding functionality? 

 

Wireframes and Prototypes

  • Mockflow – I love love love this web app. WIreframes, interactive flow and site map all at once.
  • Adobe Illustrator - I recommend Adobe Illustrator for the fastest wireframes with loads of content.
  • Notable – Not a bad app for remote discussions around  visual requirements. I used to use it religiously but now I use Delta to help me overcome this remote visual design discussion challenge.

Usability

Take some time and look at what makes a usable site.

Information Architecture

Web Content Management

 

User Interface Design

 

Implementation

The most important source of information is the SDK. For those about to upgrade from 2007, make sure you read this article: Upgrading an Existing Master Page to the SharePoint Foundation Master Page – MSDN

Software

Microsoft SharePoint Designer 2010 is the  tool you need for most SharePoint branding needs. It’s free. Download it. (DO NOT USE DREAMWEAVER)

Styling

SharePoint 2010 requires a better understanding of CSS than you needed in SharePoint 2007. You really should be able to plan your CSS. If you can use the box model on purpose or if you know how to clear a float. If you understand a stacking index, you are okay. It hleps to practice CSS techniques OUTSIDE of SharePoint before you can fully understand the quirks of SharePoint 2010. 

General CSS and HTML Resources

SharePoint 2010 CSS

You are going to learn how to override the default SharePoint CSS.  The trick is to target the CSS and then call the exact same CSS class you want to change but apply it last in the cascade.

First add the CSS to the master page:

Then hunt for the styles you want to override:

SharePoint 2010 Themes

If you want to change the look and feel with zero code, use a theme. I’m not a fan but here are some good articles on themes.

Master Pages

For a truly custom User Interface, you will build your own HTML and then add the HTML to a custom master page. The v4.master has a lot of extra stuff in it. Download one of these master pages to start adding your custom HTML to a master page.

Starter Master Pages

Branding a Master Page

 

Tips and Tricks

These links are a collection of how-to’s, tips and tricks to implement  a specific design component implemented in SharePoint.  This is what you and I “google” for on Bing.  I also collect many of these on my pinterest site.  Follow my pins to enjoy my other collection.

Fixed Width Layout

Dialog Boxes

Rounded Web Parts

Fixed Width

Sticky Footer

You may find yourself struggling to get your footer to stay at the bottom of your page. Tom Daly used some of the resources below to come up with a great solution.

My SharePoint 2010 Sticky Footer Solution – Tom Daly  Other Resources:  CSS Sticky Footer, CSS Sticky Footer II, CSS Sticky Footer III, JS Sticky Footer

Ribbon

Navigation

Search

SearchBox -
Search Center

Mobile

My Sites

My sites can be branded. You just have to staple the branding feature to the site definition. Sounds easy? It is when SharePoint MVPs Randy Drisgill and John Ross provide you with this handy reference. Thanks Randy and John!

Rich Text Editor

Print

Slideshow

 

Web Parts

Styling the look and feel, functionality and presentation of web parts is fun with all of these helpful how-to’s.   

Content Query Web Parts

I spend more time working with publishing sites so the Content Query Web Part is my favorite. Go to Christian Stahl‘s site. He’s got several great solutions (many are listed below)

 

Dataview Web Part

The dataview web part is a powerful tool to implement custom displays of data or simple displays with advanced functionality. 

 

Downloads

  • SPXSLT – This project is a place to share useful XSL templates that can be reused in SharePoint Content Query Web Parts (CQWPs), Data View Web Parts (DVWPs), and other XSL-based Web Parts.
  • SPServices – a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. (Marc Anderson, Codeplex)

 

Galleries and Examples

Go look at what can be done from a UI and UX perspective in SharePoint – be dazzled, view source, get familiar with how others have done it.

Design Templates

These tools, templates, plugins will help you get you started customize the SharePoint 2010 user interface (Note: I haven’t tested most of these)

 

Article Series

The previous tips and tricks are are a collection of solutions to specific problems. Here are some resources to help you get trained to brand SharePoint.

Benjamin Niaulin (EndUserSharePoint.com)

 

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks