I’ve been in the SharePoint world for a couple of years now, and feel like I’m finally able to start seeing clearly what branding in SharePoint really entails. For those of you just getting started, prepare for a long journey. But no need to worry, branding in SharePoint isn’t too scary once you get into it.

I started out (and still do) hand-coding websites. I then progressed to CMS’s like Drupal and WordPress. I have since taken the plunge into SharePoint 2010 as well. If designing a website is like putting together a Lego castle, then designing a website in SharePoint is kind of like putting together a Lego castle where all the pieces are individually wrapped in little plastic bags, and are strangely shaped. It takes a long time to strip away all the “SharePoint-y” stuff to get down to your real design. But once you get there, it’s not so bad.

Not being a developer, SharePoint was a bit daunting at first. A lot of .aspx pages, as well as strange new programs like SharePoint Designer, InfoPath, and Visual Studio (although I don’t use this one). As you begin designing in SharePoint, you’ll want to consider your approach, and it will be slightly different than your typical approach to web design.

Bite-sized pieces

Don’t jump in and start opening every file in SharePoint Designer that you find…you’ll go crazy. Here is my three-step basic process to get started with branding in SharePoint. Move through each step slowly and see how it goes. Once you’re done, you’ll want to repeat the process (probably backwards) to create your own solution.

1. Apply your own custom CSS
2. Create new content types & page layouts
3. Customize/create a new Master Page

Apply your own custom CSS

You’re a designer, so this is something you can be comfortable with as a first step. First, register your CSS file in the master page (all we will touch in the master page for now), and then create a new CSS file in “/Style Library/”. Using the web developer toolbar in Firefox, or Chrome’s built in developer tools, you should have what you need to get started customizing right away. You could do just this step, and be totally fine. However, if you keep digging the grave gets deeper.

Create new content types & page layouts

To keep things clean, I would suggest creating your own content type(s), and from there create unique page layouts for your content. With a page layout you can add your own html wrappers to your content (titles, body text, custom fields, etc.), which gives you that much more control of layout within a page. Also, you can add header styles in these documents to call CSS files and .js scripts without editing a Master Page (not best practice…but it’s possible).

[note] Don’t forget to enable any new page layouts in “Site Settings > Page Layouts and Site Templates” so your pages can use them.

Customize/create a new Master Page

This is the trickiest feat. I would suggest starting with something like Kyle Schaeffer’s HTML5 Master Page, or the Starter Master Pages on CodePlex (I believe by Randy Drisgill and others). My method? I printed out v4.master on giant A3 sheets, along with a couple of other master pages, and sat down at a table, analyzing line by line what I needed to pay attention to, what I was confused about, and what I could edit. So grab a couple of highlighters, print out a sample master page, and get familiar with your blueprint. You’ll learn soon enough what you can and can’t get rid of. A great tip I learned from Heather Waterman at a branding session in Las Vegas one year is to give yourself a bunch of blank space at the beginning of the document, put in your (working) html, and then slowly add in little pieces of the master page as needed. This way you don’t delete stuff you need, and you keep your html intact.

Explore

There is so much more you can do with SharePoint than just CSS and master pages. It gets really fun when you start working with jQuery and interacting with SharePoint services, for example. But that’s for another time. If you want to explore some more about branding in SharePoint, here are a few resources (some articles of mine, as well as other things you might find useful):

• Kyle Schaeffer’s HTML5 Master Page (my addendum to that here)
• Starter Master Pages on CodePlex
• Bittersweet Master Page (a tiny side project of mine)
• jQuery in SharePoint 2010