SharePoint 2010 Branding and Customization Resources

**Links 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)

As I was researching SharePoint 2010 Design for our new book Beginning SharePoint Designer 2010 (wrox), I collected several links to good resources. I hope you find them as helpful as I did. 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

About Marcy Kellar

Marcy Kellar is a SharePoint Solution Architect at Perficient and well known for her expertise in SharePoint branding. Her specialties include user experience design, branding and UI customization, information architecture, web content management, and usability testing. Marcy’s experience spans over 20 years and includes work in design, life sciences, psychology and R&D. Marcy is co-author of Beginning SharePoint Designer 2010 (Wrox, October 2010) and is a former professor at the Art Institute teaching user centered design courses, “Intro to User Centered Design” and “Usability Testing.” She is a popular speaker, author and award-winning artist and photographer.

Branding, css, design, master page, masterpages, ribbon, SharePoint, sharepoint 2010, User Experience, User Interface Design, ux

17 Responses to SharePoint 2010 Branding and Customization Resources

  1. Shawn July 14, 2010 at 12:38 pm #

    The Notable link is: http://www.notableapp.com/

  2. Pam Fozo August 4, 2010 at 6:53 pm #

    Love all the content!

  3. Orçun Eceyurt
    Twitter:
    February 2, 2011 at 8:45 am #

    This is a great article. I am a SP architect same as you. And also i am not a developer same as you. This library was very helpful for me. Thank you.

  4. venkat March 16, 2011 at 11:15 pm #

    Can anyone tell me how to change the look and feel of the Performance Point Services web part. I am new to sharepoint and i am able to change the entire site look, but the problem is with these PPS web parts.

  5. Ben July 17, 2011 at 5:45 am #

    This is a great article. Found also this Designer for creating custom CSS Files for SharePoint 2010. Very cool.
    http://www.nextflow.at/designer/designer.aspx

  6. Chris July 21, 2011 at 4:27 am #

    To complete your great library. There is a new online designing tool to create custom css files for SharePoint 2010. Very easy to use. What do you think about that?

    Plug ‘n Play Branding for SharePoint 2010

    http://www.nextflow.at/designer/designer.aspx

    Cheers
    Chris

  7. Chris July 23, 2011 at 5:48 am #

    Great summary.

    To complete it, you should don’t forget the Online CSS Designer called Plug ‘n Play for SharePoint 2010.

    Easy to use and great styles in just a few minutes.

    Link: http://www.nextflow.at/Designer/Designer.aspx

    Very cool.
    Chris

  8. Imran Aziz
    Twitter:
    February 2, 2012 at 7:38 am #

    Wonderful, thank you very much for sharing such wealth of resources. It was very helpful to me to find some guidelines of SharePoint Navigation that I was looking for.

  9. Tom Daly
    Twitter:
    May 11, 2012 at 6:34 am #

    nice comprehensive list of very useful branding resources. Here’s a few more you may or may not know about.

    Another great mockup tool – Balsamiq – http://www.balsamiq.com/

    A useful Theme tool – Microsoft Theme Builder – http://connect.microsoft.com/ThemeBuilder ; expires on 6/30/2012

    Understanding Conditional CSS – http://www.quirksmode.org/css/condcom.html

Trackbacks/Pingbacks

  1. Introduction to SharePoint Branding » TraceyNolte - November 14, 2010

    [...] ›http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/ [...]

  2. Branding Sharepoint 2010 - November 23, 2010

    [...] [...]

  3. Jeroen’s SharePoint Blog » Branding SharePoint 2010 - January 10, 2011

    [...] Een aantal goede online resources vind je in ieder geval hier: http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/ [...]

  4. Always Learning! SharePoint Branding 101 « Chamonix Vue - June 12, 2011

    [...] See the SharePoint 2010 Branding and Customization Resources post from the SharePoint Muse (aka Marcy Kellar) which includes links to many useful sites, clearly organized, that go beyond design & branding and venture into related development, code, fixes and tips, etc. – even Information Architecture and usability: http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/ [...]

  5. SharePoint 2010 Centered Fixed Width Design | Srinivas's blog - July 6, 2011

    [...] now with a little help from a few other posts (The SharePoint Muse, Elumenotion, Styled Point) we can create a SharePoint 2010 fixed with centered [...]

  6. The SharePoint 2010 Muse | SharePoint Blog ~ S. J. Huibregtse - October 14, 2011

    [...] The SharePoint 2010 Muse provides a great compilation of resources for all aspects of the SharePoint project in this post.  Need to read more of them.  ~ http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/ [...]

  7. branding - April 5, 2012

    branding…

    adwords help…

  8. Always Learning! SharePoint Branding 101 « Doing IT Differently - April 7, 2012

    [...] See the SharePoint 2010 Branding and Customization Resources post from the SharePoint Muse (aka Marcy Kellar) which includes links to many useful sites, clearly organized, that go beyond design & branding and venture into related development, code, fixes and tips, etc. – even Information Architecture and usability: http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/ [...]

Leave a Reply