**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.

• What Does Usability Mean: Looking Beyond ‘Ease of Use’
• 20 Do’s and Don’ts of Effective Web Design
• Introduction to Good Usability
• 10 Useful Usability Findings and Guidelines
• Universal Usability Guidelines

Information Architecture

• Brief overview: “Information Architecture Deliverables”
• Information Architect by Peter Morville

Web Content Management

• WCM improvements in SharePoint 2010 – Mike Ferrara
• Plan Pages in SharePoint –Technet
• Content Strategy – Kristina Halvorson
• SharePoint 2010 Web page planning worksheet – Technet (What a gem for planning SharePoint 2010 publishing sites. Much better than SharePoint 2007’s page planner!
• Jumpchart – a great tool to give to your marketing team to work on content while you are building your SharePoint solution. It may sound hacky but it keeps marketing out of a site that isn’t yet finished. (that’s good for everyone)

User Interface Design

• SharePoint 2010 Layered Photoshop File! – Erik Swenson
• The Pursuit of Interface Design Simplicity -Luke Wroblewski
• Visible Narratives: Understanding Visual Organization -Luke Wroblewski
• Common Visual Design Misconceptions – Luke Wroblewski
• Responsive Web Design Techniques, Tools and Design Strategies – Smashing Magazine

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)

• SharePoint Designer 2010 (32 bit)
• SharePoint Designer 2010 (64 bit)

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

• XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) -w3.org
• Grid Builder – developer.yahoo.com/yui
• CSS Box Model – css-tricks.com (Advanced CSS design patterns are used in SP2010. You need to understand the impact of changing a value in one place.)
• CSS Overflow (you need to know the impact of this property)
• CSS Overflow (css-tricks.com.)

• Making Sense of HTML5 with SharePoint: Hello World – Marc Anderson

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:

• SharePoint 2010 CSS references in Master Pages – Erik Swenson
• The Shiny New CSSRegistration Control in SharePoint 2010 – Buta No IE

Then hunt for the styles you want to override:

• SharePoint 2010 CSS Reference chart – Heather Solomon

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.

• SharePoint 2010 Themes – Erik Swenson
• How the SharePoint 2010 Theming Engine Works – Buta No IE

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

• Starter Master Pages on CodePlex – Randy Drisgill
• Starter-Master-2010-v1.0.txt – Kyle’s SharePoint Karate, theSUG.com
• Fixed Ribbon Starter Master Page – Kyle’s SharePoint Karate, theSUG.com
• Microsoft’s SharePoint 2010 Starter Master Page – MSDN
• Cleanv4.master – Tom Daly
• Responsive HTML5 Master Page – Kyle Schaeffer

Branding a Master Page

• Branding a Master Page -
• Refining the Branding of a Master Page – astaticstate.com
• Mastering the Master Page – Advanced Branding for SharePoint 2010 – Mike Plekkenpol
• How to build a publishing masterpage for SharePoint 2010 - Serve’s SharePoint Blog

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

• Fixed Width Master Pages in SharePoint 2010 – Elumination Blog
• How to Create a Fixed-Width 3 Column layout – Tom Wilson, Styled Point
• Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues

Dialog Boxes

• Dealing with Background Images in Your Dialog Boxes – Heather Waterman

Rounded Web Parts

• Customize the UI of web parts in SharePoint 2010 – Christian Stahl
• Branding web parts in SharePoint 2010 – Thomas Zepeda McMillan *I love this solution

Fixed Width

• Fixed Width Master Pages in SharePoint 2010 – Elumination Blog
• How to Create a Fixed-Width 3 Column layout – Tom Wilson, Styled Point
• Centered layout with CSS & v4.master on SharePoint 2010 – SharePoint Blues

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

• Un-Floating the Ribbon in custom Master Pages – Randy Drisgill
• Ribbon Customization: Changing Placement, Look and Behavior – Tom Wilson, Styled Point
• Customizing Ribbon Positioning – Jonathan Kern UX Developer, SharePoint Foundation
• Code to Hide the Ribbon and Site Actions Menu for Anonymous Users – Elumination (Useful for public facing SharePoint sites)

Navigation

• Very cool Mega Drop Down Navigation  Stay away from the paid Mega Drop Down controls for SharePoint.  These will steer you in the wrong direction and were not built with a deep knowledge of navigation systems.  Instead they focus on bells and whistles.  They are a waste of money.  Please check out Jakob Neilson’s article on usability of Megadrop down navigation and see what I mean.   Just because you can, doesn’t mean you should.  Build a navigation system that captilizes on Neilson’s research and don’t put content up there willy nilly or get stuck trying to fit your navigation into a costly contro.l)  
• Left Nav Accordion with Highlight Location -Yanling Lei *untested but want to try

Search

SearchBox -

• Branding the Search Box in SharePoint 2010 – Christian Stahl
• Reskin/Restyle the Standard Sharepoint 2010 Search Box – Steve Ottenad
• Reskin the advanced search box in SharePoint 2010 – Steve Ottenad

Search Center

• Converting a Custom SharePoint 2010 Master Page into a Search Center Master Page
• Adding Navigate Up breadcrumb on your search center
• SharePoint 2010 Master Page Adapters for Search – Nick Hadlee A set of SharePoint 2010 sandbox solutions that modify the SharePoint 2010 Search page layouts to work with standard and custom master pages.
• Branding SharePoint 2010 Search

Mobile

• Blog Post: SharePoint 2010 Mobile Devices and Scrolling
• Branding Tip #6 – Mobile Views

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!

• Starter SharePoint 2010 My Sites (Full) – Randy Drisgill, John Ross Jr (Codeplex)

Rich Text Editor

• Overriding SharePoint 2010 Rich Text Editor CSS Classes

Print

• How to print SharePoint 2010 page without header and navigation – sharepoint-sandbox.com

Slideshow

• Image slideshow with CQWP in SharePoint 2010 - Christian Stahl
• Flexslider – my absolute favorite slider. This responsive content slider is very usable and easy to implement.
• Building a fully featured jQuery content slider for SharePoint 2010

Web Parts

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

• Location aware content rollup – Serve’s SharePoint Blog

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)

• Customizing Content Query Web Parts – astaticstate.com
• Image slideshow with CQWP in SharePoint 2010 – Christian Stahl
• Display News pages with CQWP – Part I – Christian Stahl
• Display News pages with CQWP – Part II – Christian Stahl
• Display News pages with CQWP – Part III – Christian Stahl

Dataview Web Part

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

• Alpha Selection of List Items in a Data View Web Part (DVWP) – Marc Anderson

• How to customize a grouped view in the Data View web part – Christian Stahl

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.

• Top SharePoint
• WSS Demo (Live Pivot View… Very cool)
• Case Study: SharePoint Branding Example – Destination Oakland – EUSP

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)

• 2 Free templates for SharePoint 2010 Publishing sites
• SharePoint 2010 Themes

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)

• Brand your SharePoint? (Part 1)
• SharePoint: Learn to Brand from the Start (Part 2)
• Brand SharePoint: Global Navigation – The Journey Begins (Part 3)
• Brand SharePoint: Global Navigation – Journey into the Menu Items (Part 4)
• Brand SharePoint: Global Navigation – Selected Menu Items (Part 5)
• Brand SharePoint: Reaching the End of the Global Navigation Journey (Part 6)
• Brand SharePoint: Global Navigation – Final (Part 7)