sharepoint 2010 branding

This page contains a list of resources useful for SharePoint 2010 Branding, User Interface, Design and Web Content Management solutions.

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. Why? Probably because I’m an Information Architect at heart. No reason really.

 

Key Resources

• The most important source of information is the SDK.
• The other critical SharePoint 2010 Branding & Customization resource is MSDN’s Real World Branding with SharePoint 2010 Publishing Sites

Planning and Design

Usability

• 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

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 – I use this app religiously. Works so well for remote discussions about visual requirements.
• SharePoint 2010 Visio Stencils by John Chapman

Web Content Management

• WCM improvements in SharePoint 2010 – Mike Ferrara
• 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!
• Plan Pages in SharePoint -Technet
• IntranetFactory – Get a Content Inventory of your SharePoint site
• 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

Implementation

 

Microsoft SharePoint Designer 2010

Downloads:

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

CSS and HTML Resources

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. If you know how to clear a float. If you understand a stacking index, you are okay. If you don’t, practice on plain old HTML first. Build your own HTML from scratch and style it. Draw a design and build it from scratch Plan it.

• 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.)

CSS Sticky Footer – You may find yourself struggling to get your footer to stay at the bottom of your page. If you really want this to be a part of your site, test the layout and structure all alone to troubleshoot. Test with and without content on as many site templates as possible. CSS Sticky Footer, CSS Sticky Footer II, CSS Sticky Footer III

• JS Sticky Footer If all else fails, use this JS Sticky Footer. Be sure to test your site with real content!! If it’s not in the body of the site, look to the CSS overflow as the culprit.
• Understanding Floats (another advanced technique but helpful alternative to overflow)

Themes

• SharePoint 2010 Themes – Erik Swenson
• How the SharePoint 2010 Theming Engine Works – Buta No IE
• SharePoint 2010 keeps copy of modified theme

General SharePoint CSS and Markup

• SharePoint 2010 CSS Reference chart – Heather Solomon
• The Shiny New CSSRegistration Control in SharePoint 2010 – Buta No IE
• SharePoint 2010 CSS references in Master Pages – Erik Swenson
• https://www.nothingbutsharepoint.com/sites/eusp/Pages/Use-font-face-in-Rich-Text-Editor-of-SharePoint-2010.aspx

SharePoint Navigation

• Adding Navigate Up breadcrumb on your search center
• Very cool Mega Drop Down Navigation

Master Pages

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
• GreenShade Free Master Page - TopSharePoint.com

Master Page Tips and Tricks that will save your ARSE

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

Simply Cool Tips and Tricks

• Image slideshow with CQWP in SharePoint 2010 - Christian Stahl
• Sing Chan on general and SharePoint 2010 branding – Sing Chan
• Location aware content rollup – Serve’s SharePoint Blog
• Display Dynamic Messages in the Status Bar – Tobias Zimmerman
• Dealing with Background Images in Your Dialog Boxes – Heather Waterman
• How to print SharePoint 2010 page without header and navigation – sharepoint-sandbox.com

Upgrading 2007 Designs

• Upgrading an Existing Master Page to the SharePoint Foundation Master Page – MSDN

Ribbon

• Some SharePoint 2010 User Interface Terms – Mindsharp
• SharePoint 2010 developer – UI Enhancements – Ted Pattison
• Architecture of the Ribbon – msdn
• Customizing the Ribbon – msdn
• Customizing the Ribbon – Part I– Chris O’Brien Sharepointnutsandbolts.com
• Ribbon Customization Part 2 – Adding Items – Chris O’Brien Sharepointnutsandbolts.com
• Ribbon customizations – dropdown controls, Client Object Model and JavaScript Page Components – Chris O’Brien Sharepointnutsandbolts.com
• Enabling a Button on the Ribbon Based on Selection – Blogs.MSDN.com/SharePoint
• Creating a Custom Ribbon Tab in SharePoint 2010 – SharePoint Solutions.com
• 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)

Mobile

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

Templates, Tools & Themes

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

SharePoint Design Galleries

• Top SharePoint
• WSS Demo (Live Pivot View… Very cool)

Videos

• Creating complex SharePoint 2010 ribbon elements – Yaroslav Pentsarskyy
• Getting started with SharePoint 2010 ribbon – Yaroslav Pentsarskyy

Developer Links

• Customize the ribbon programmatically from web parts and field controls – (sharepointnutsandbolts .com – Chris Obrien)
• Creating a SharePoint 2010 Ribbon extension – part 1 (Wictor Wilen)
• Creating a SharePoint 2010 Ribbon extension – part 2 (Wictor Wilen)