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.

14 thoughts on “Branding SharePoint – Part 1: Designing your SharePoint Site”

  1. Heather, This is great! This subject hits very close to home! I could not agree with you more about educating the designers about basic SharePoint features and elements before Photoshop even gets opened.Looking forward to part 2.

  2. All very good things to keep in mind. Thanks for listing them for us. It is very easy to get overwhelmed with all of the elements of SharePoint. I can’t wait for Part 2.Thanks,Josh Lewis

  3. Great ideas here, thanks for the post. Looking forward to the next article as I am about to start the design process with our current upgrade project.

  4. Look forward to the next part. I am tasked with creating an Intranet for our advertising department. I.T. said they would support us as long as we use SharePoint. Advertising says they don’t want it to look like SharePoint. So now I am trying to figure out how to do that.

  5. Good timing for something like this. Nice to see you taking the time to cover the basics from the ground up. This is often overlooked and our well intentioned marketing and PR folks need to hear this :PI very much look forward to part 2.

  6. I look forward to this.I’m a long time web designer/HTML jockey who’s been doing .net work for the past 3 years but am TOTALLY confused by this beast of a product called MOSS. And it seems I’m not alone.So, needless to say, I appreciate your efforts Heather!If I may just toss out a completely random question:Has anyone attempted to use the Yahoo CSS grid framework within MOSS? Our 3rd party design firm delivered us templates using that. Look impressive, but I have my doubts that MOSS/.net will play nice with all of the ‘let’s put a random table here and a silly id name over here’ habit.

  7. Excellent Stuff all of this and indeed the whole site Heather. Thank god there are people out there that have figured it all out first eh!

  8. This is great! One question: Is there any way around the authentication issue? I have a portal which requires a login/password. Am I out of luck?

  9. I am new to Sharepoint Designer. I have been playing around with it for awhile. I need to change the whole image at the top. I tried to change the image using .msglobalareatitle but it is not working. Any idea? Not to confuse you with logo but more of the background. Pls. help…

  10. I would like to change the Help Desk template.I am able to edit all of the other lists/libraries/content types.I cannot edit the newform.aspx, and would like to change the content on it.Can you tell me how this is done. I have Designer, should I need to do it there.Georgia

Comments are closed.