Branding SharePoint – Part 1: Designing your SharePoint Site

Chances are you are reading this because you have been tasked with taking a SharePoint 2007 site (MOSS, WSS, publishing, etc) and making it “just not look like SharePoint!”. I have good news, this isn’t a hard thing to do. With a little time, organization and know how, you can make this happen.

In the first part of this Branding SharePoint series, I am going to provide some tips for how to start your design process, and some questions for you to think about to help get you going in the right direction. I can’t tell you how to create a design, that is up to your or your hired creative skills, but I can help make branding SharePoint not seem quite so overwhelming.  Let’s get started.

Where do I begin?

Before you even think about SharePoint, you need to start to formulate a design.  Think about the resources that you have:

  • Logo
  • Tag line
  • Color palette
  • Images
    • Images used in existing materials like web sites, brochures, ads and internal communications
    • Images that convey your industry, project or purpose
    • Think About This: Don’t have any images? If you would like some, work out an image budget.  Most images have to be purchased and can cost $50+ depending on source, resolution and target purpose.  If you have little or no budget, check out free or low cost image sites such as or  Another option is to grab your camera and take pictures yourself.
  • Illustrated or vector-based graphics –  you don’t have to use photos, you can use graphics or illustrations in your design.
  • Special events, office politics requirements and other miscellaneous stuff – do you need to include a certain logo, image or tag line to comply with standards or requests?

Where do I find that stuff?

Depending on the organization, design elements may already be outlined in official documents that have been approved or are in use.  Check with marketing, sales and management to identify if you already have branding documents and guidelines for your company. If you don’t have any of these resources, look to other elements already available (web sites, brochures, etc) to find logos, colors and images.  If this doesn’t do it for you or you don’t have any of these resources, start to think about descriptive words that describe your project, company or purpose. Write these words down and use that to start to formulate colors and images that are appropriate to what you are doing.   For example, a site geared towards kids will probably be very bold, bright and colorful.  A site geared for banking transactions and information will probably use more muted colors and have a stately and official feel to it.

I don’t need to worry about all that, we have an ad agency that handles it.

That is great that you have an external resource to help you with your design.  Make sure you check out what they are doing and ask questions about their intent and purpose behind design elements.

I got my design elements, now what?

Now that you have identified design elements, you can start working on a prototype, or comp, for your SharePoint design.  For you or the person building the design, being a SharePoint expert is not a requirement, but it does help to be somewhat familiar with the interface and the application itself.  There is a lot to SharePoint and detailed comps for several sample SharePoint screens will make the development process go much smoother.  The site designer should spend some time in the interface checking out SharePoint and clicking beyond the home page. Here are some things to consider in regards to your design:

  • Navigation!
    • SharePoint has and uses a lot of it.  Make sure your design accommodates the navigation you need to use. Don’t forget about things like the breadcrumbs, the welcome menu and Site Actions.
    • Off, On and Hover – A lot of SharePoint elements have off states, on states when the item is active, and hover states.  The design needs to provide detail for how these different states should be handled.
    • Expanded menus, tree view and fly-outs – If your site is using any nested navigation, make sure you have design specs for the various levels and treatments.
  • Toolbars – There are several toolbars used in SharePoint on various screens, plus form field backgrounds.
  • Content – web parts, calendars, publishing areas
  • SharePoint functionality – what SharePoint interface features do you want to keep in the new design? Think about page titles, site titles, page images, navigation menus, etc. Make sure your SharePoint design still incorporates these items.
  • Splash page and sub page, or just one design? Will your site design have a splash page (a home page with a different layout and look)? If so, you will need a sub page design that focuses on content delivery.
  • Custom components and functionality – if you will have custom features on your site, make sure the interface has been created in a comp for developer reference.

Again, I don’t need to worry about all that, we have an ad agency that handles it.

Don’t assume that the ad agency or web design firm is familiar with SharePoint.  Ask to show the designer around SharePoint or to point out certain features you need to have on your design, like Site Actions and the top link bar.

If you are using an agency, ask to see some samples of other SharePoint work they have done.  Also ask for examples of the finished SharePoint site so you can see how close the resulting site looks like their original comps. Do a little reconnaissance to verify the agency does have SharePoint experience.

Wow, that is it?

Yup, you are done. Let’s recap:

  1. Identify resources for design
  2. Become familiar with the SharePoint interface
  3. Identify SharePoint interface elements you need in your final design
  4. Using your resources and SharePoint knowledge, create multiple comps for the home page, sub page and other subsequent screens to show design treatment for navigation bars, toolbars, web parts and other types of content.

Follow up, Part 2: Creating the code for the design

The next part in this series will focus on how to create the code for your design.  Go to Part 2.

Dustin Miller and Heather Solomon from SharePoint Experts