Professional SharePoint 2010 Branding and User Interface Design

Professional SharePoint 2010 Branding and User Interface Design

3.0 1
by Randy Drisgill, John Ross, Jacob J. Sanford, Paul Stubbs, Larry Riemann

View All Available Formats & Editions

A must have guide for creating engaging and usable SharePoint 2010 branding

With SharePoint 2010, Microsoft has provided a more robust environment for creating collaboration and content management sites that rival any of the popular websites on the internet. Creating a branded SharePoint site involves understanding both traditional web design techniques as


A must have guide for creating engaging and usable SharePoint 2010 branding

With SharePoint 2010, Microsoft has provided a more robust environment for creating collaboration and content management sites that rival any of the popular websites on the internet. Creating a branded SharePoint site involves understanding both traditional web design techniques as well as topics that are typically reserved for developers. This book bridges that gap by not only providing expert guidance for creating beautiful public facing and internal intranet sites but it also addresses the needs of those readers that only want to understand the basics enough to apply some style to their sites.

Things like creative design, the experience visitors have navigating your user interface, ease of use—these are all important branding considerations and not always intuitive. This unique book from a team of SharePoint branding experts lays it all out. 

Whether you want to make SharePoint look completely different or just make minor design changes, this expert guide will provide tips, techniques, and insights to get the job done.

Product Details

Publication date:
Sold by:
Barnes & Noble
File size:
22 MB
This product may take a few minutes to download.

Read an Excerpt

Professional SharePoint 2010 Branding and User Interface Design

By Randy Drisgill John Ross Jacob J. Sanford Paul Stubbs Larry Riemann

John Wiley & Sons

Copyright © 2011 John Wiley & Sons, Ltd
All right reserved.

ISBN: 978-0-470-58464-4

Chapter One

What Is SharePoint Branding?


* What is branding?

* Why brand SharePoint?

* How branding works in SharePoint

If you have picked up a copy of this book, you probably already have the desire to take control of the way your SharePoint sites look. Maybe this means that you want to make your SharePoint portal look more like your legacy corporate Internet site. Or maybe you want to make your new SharePoint site look cutting edge and interesting. Or maybe you simply want your site to not look like a SharePoint site. Regardless of the reason, you've decided that controlling the look and feel of your SharePoint site is important.

The goal of this book is to provide you with all the tools you need to brand your SharePoint sites. This chapter starts at a high level with overviews of concepts you need to understand before diving into branding. (The topics will become increasingly more granular as the book progresses.) Whether you are unaccustomed to design work or someone who does SharePoint design full-time, there is something in this book for you. By the time you have completed all the chapters, you should have a solid understanding of the tools you can use, as well as how best to use them, in your own branding endeavors.

As your starting point, this chapter will give you, at the highest level, an understanding of what branding is and why it is important. You will get an idea of exactly what branding means, at least in the world of SharePoint, and gain some exposure to several of the SharePoint components that you will need to be familiar with in order to accomplish your own branding goals. By the end of this chapter, you should be ready to get started on your first branding tasks.


In general, branding is the act of creating a specific image or identity that people recognize in relation to a company or product. For example, nearly everyone recognizes the iconic design of a can of Coca-Cola, which always uses the same logo, font, and red-and-white color scheme. You could probably look at the logos for businesses like Target, McDonalds, and FedEx and, without reading any words on or around the logo, immediately identify them. These companies have chosen a marketing identity that enables the public to quickly and easily recognize them. This is branding. When referring to websites, branding usually involves the colors, fonts, logos, and supporting graphics that make up the general look and feel of the site.

Branding for SharePoint sites is similar to branding for any other sites, except that branding for SharePoint includes the creation of master pages, page layouts, Cascading Style Sheets (CSS), Web Parts, and eXtensible Stylesheet Language Transformations (XSLT). In fact, everything a user sees on the screen contributes to the user experience, which helps to define the branding for a site. This could also include the correct use of corporate logos or other graphics, whether this means you are doing this because of strict corporate guidelines or merely because you don't want to look like every other SharePoint site. Regardless of your reason for wanting to affect the design of your site, you need to be familiar with the concepts of SharePoint branding.

To better understand branding, it might be easier if you can actually see it in practice. Figure 1-1 is a Team site in Windows SharePoint Services (WSS) 3.0, and Figure 1-2 shows the look and feel for the same site in SharePoint 2010. As you can see, Microsoft has used branding to distinguish between two major versions of its product. If you were to walk by two laptops, one with WSS loaded in the browser and the other with SharePoint 2010, it wouldn't be difficult to determine which site is which. The colors are different; the fonts are different; the graphics are different; even the basic layout of controls is different. The same content might be in both, but the presentation is unique to each site. This is a smart, and common, use of branding.

Some business texts describe branding as the "feeling" users get when they see something, such as a product or even a website. Normally these books are referring to external sites for commercial products, but the concept applies to internal sites, such as intranets, as well. In other words, branding is not merely cosmetic, because the key to any successful SharePoint implementation is whether users actually use the site — in other words, user adoption. How users feel about the site is an important factor in driving user adoption.


To brand or not to brand, that is the question. For most organizations the answer is usually to brand. Probably most of you reading this have already made up your mind that you are going to brand your SharePoint site for one reason or another. But there are many different reasons companies choose to brand and some of them might be similar to your reasons, and some might be very different.

For most organizations, the most common reason to brand a SharePoint site is to make it unique. Out of the box, SharePoint 2010 is not visually compelling. In fact, its look and feel is intentionally bland, as it is assumed that most companies are going to customize it. Indeed, making it "not look like SharePoint" is a basic request. You likely want to brand SharePoint to make it consistent with the corporate image and marketing standards you have established for your organization.

The previous section mentioned that branding is often associated with how a user feels about a company or product. Obviously, companies want to evoke different feelings in different types of users. For example, a company might want to brand its intranet site to help convey to employees a sense of collaboration, teamwork, and even family. While that might sound a little touchy-feely or unrealistic, consider the alternative — a sterile, poorly branded intranet that doesn't reflect the company's image or purpose. Although a company with such a site may not cause its employees to walk out the door, a SharePoint intranet site that is effectively branded has a positive effect on employees, in much the same way that a nicely decorated room creates a welcoming, harmonious effect.

Conversely, if your company has a public-facing Internet site, you likely want to target a completely different audience. In most cases the goal for a public-facing Internet site is to communicate to this external audience information about your company, such as its services or products. In these cases, your online presence is a critical component of your corporate identity, and there's no way the out-of-the-box SharePoint branding is going to cut the mustard. The design options for public-facing SharePoint Internet sites are virtually unlimited. Examples include everything from local government sites, schools, and universities to small, family-run businesses, huge, global companies, nonprofit organizations, and many others (see Figures 1-3 and 1-4).

Although SharePoint is purchased for a variety of reasons, most companies are seeking the business benefits such as document management, process improvement, or enterprise search that it provides. The point here is that the people who are actually using SharePoint care very little about the underlying technology as long as it helps them get their job done. From a branding perspective, this points to another reason why companies brand: to improve usability. Improving usability could mean simply organizing the elements of the page in an efficient manner, or increasing the size of the fonts in the navigation, or something far more complex, such as customizing the ribbon interface.

The subject of branding covers a wide range of topics. Each SharePoint implementation has unique requirements and poses unique challenges when it comes to creating a user interface. Nonetheless, effective branding doesn't have to be overly complex. Regardless of your reasons for branding or your branding prowess, SharePoint provides a wealth of options.


Like its predecessor, SharePoint 2010 is available as two distinct products:

* SharePoint Foundation 2010 — The new version of the free Windows SharePoint Services version 3 (WSS)

* SharePoint Server 2010 — The new version of Microsoft Office SharePoint Server 2007 (MOSS)

Although SharePoint Server 2010 is more expensive than SharePoint Foundation 2010, it includes the Publishing Features, which has several useful additions for branding projects:

* The Web Content Management (WCM) functionality provides users with a robust publishing platform. This means that users can author pages with rich and structured content and publish the pages in a controlled way using out-of-the-box workflows.

* SharePoint Server contains more robust options for navigation. This gives users more control and provides greater flexibility than what is provided out-of-the-box by SharePoint Foundation.

* SharePoint Server also enables site administrators to easily change a master page for any site, and all of its subsites, from a SharePoint site's settings page.

* SharePoint Server enables more flexibility with themes, including the capability to change the colors and fonts in the SharePoint Web user interface, as well as the capability to apply a theme to all subsites at the same time.

For a more detailed comparison of the different versions of SharePoint 2010, see http://sharepoint

From a branding perspective, SharePoint Server 2010 provides many more options for creating highly styled sites than SharePoint Server 2010. Therefore, many of the examples throughout this book are geared towards sites with publishing enabled. However, in most cases the examples will still apply to a nonpublishing site with minimal changes to the steps. The only exception to this would be when the examples cover functionality that is available only with SharePoint Server 2010. Where possible throughout the book, we will try to highlight different approaches for achieving the same results in SharePoint Server and SharePoint Foundation.


Although all SharePoint installations are unique, they all fall into one of three categories: intranet, Internet, or extranet. Each of these SharePoint sites has a different audience and, therefore, different design considerations as part of the planning phase.

The following sections discuss the typical considerations for each of the three environments. However, at a higher level, each environment is made up of many SharePoint sites and each of these sites is usually designed to primarily facilitate either communication or collaboration. It is certainly possible to do a little bit of both, but in terms of the core decisions being made about branding, most sites will favor one more than the other. For example, most of the sites on an organization's intranet would fall under the category of a collaboration site, as this is where most users store content and collaborate with others on their day-to-day tasks. However, the intranet home page for most companies is usually designed as a place to convey information to employees, such as the latest company news, announcements, or events. When users open their browser, they are taken to this home page where they are presented with all of this information, and from there they navigate to another area of the intranet to do work and collaborate.

Unfortunately, branding projects often overlook the importance of determining whether the intended purpose of a site is either collaboration or communication. To understand why it is so important, consider what you'd expect to find on the home page of your intranet site compared to what you'd expect to find on the main page for your department site. You would probably expect the intranet home page to be more highly styled, with a focus on communicating information. Conversely, you would expect the main page for your department to focus on the actual documents and content you work with on a daily basis. Obviously, your specific situation might be slightly different, but the point is clear: There's a distinct difference in the intended purpose of a site designed purely for communicating information in a one-way fashion verses a collaboration, which is designed for more of a two-way flow of information.

From a technical standpoint, sites designed primarily for communication or collaboration require different SharePoint templates, which require different approaches to branding. Templates are discussed later in this chapter, but consider that the approach for branding a SharePoint site based on the Publishing Portal template, which is designed for public-facing sites, is different from branding a Meeting Workspace template, which is designed purely for internal collaboration.

Planning for branding is discussed in more detail in Chapter 3.

Intranet Sites

Intranet sites are typically available only to employees and partners who are connecting locally to the network or using a virtual private network (VPN). The focus of intranet sites is to facilitate information delivery and collaboration for specific sets of users. They often have many content authors, as well as many users who will be consuming content and collaborating on new content.

Unlike public Internet sites, the browsers and system capabilities of intranet sites are usually controlled by the IT department. This makes designing a SharePoint intranet easier because fewer variables need to be considered. For example, if your organization supports only one browser, you have to design and test with only that one browser.

As mentioned in the previous section, most intranets are designed to facilitate communication, but the vast majority of sites that are created are of the collaboration variety. Usually this means using the Team site template or some custom variation. This is especially true for SharePoint Server 2010 implementations. If you are using SharePoint Foundation 2010, your options are more limited than with SharePoint Server (because of the lack of publishing functionality) and you'll most likely use all Team site templates (refer to Figure 1-2). Often, it is important to add a certain amount of corporate branding even to intranet sites. Figure 1-5 shows an example of a custom-branded SharePoint intranet site. This site used a custom master page, CSS, and images to create a new look and feel.

Internet Sites

Internet sites are public facing, and typically have anonymous users visiting them using a variety of Internet browsers. These sites are usually driven by marketing, with few content authors and tightly controlled content.

Typically, public-facing Internet sites offer the opportunity to create highly stylized designs. They pose a much greater design challenge than internal-facing sites because it is much more difficult to control the clients who access the site. In other words, additional effort has to be taken to ensure that the site is displayed properly across all types of browsers, and conforms to whatever compliance standards need to be met for the given site. Not only is the creative effort usually higher for an Internet site than for an intranet site, but the actual implementation effort is also usually higher because of the added complexity.

One example of corporate-branded Internet sites that were built with SharePoint is (see Figure 1-6). It has a highly customized user interface, so much so in fact that, without some poking around in the HTML source, it is hard to see any evidence that they are even using SharePoint.

Extranet Sites

Extranet sites combine the security and collaboration of an intranet site with the more heavily emphasized branding found in Internet sites. The goal for most extranet sites is to enable external partners to collaborate with an organization. This is usually accomplished by having a public-facing Internet site that users access initially. Once on the site, users enter a username and password in order to access a secure site, where they can collaborate with users from inside the company. For example, a manufacturing organization might have an extranet site to allow distributors to log in and place orders or to get other information to help them sell the organization's products.


Excerpted from Professional SharePoint 2010 Branding and User Interface Design by Randy Drisgill John Ross Jacob J. Sanford Paul Stubbs Larry Riemann Copyright © 2011 by John Wiley & Sons, Ltd. Excerpted by permission of John Wiley & Sons. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Meet the Author

Randy Drisgill is a consultant with SharePoint911. He is a Microsoft MVP for SharePoint Server and the coauthor of Professional SharePoint 2007 Design.

John Ross is a consultant with SharePoint911.?He?is an active member of the SharePoint community and a frequent guest speaker.

Jacob J. Sanford is a senior consultant for Cornerstone Software Services.

Paul Stubbs works at Microsoft and is a frequent speaker at Tech Ed and Dev Connections events about branding and SharePoint.

Customer Reviews

Average Review:

Write a Review

and post it to your social network


Most Helpful Customer Reviews

See all customer reviews >

Professional SharePoint 2010 Branding and User Interface Design 3 out of 5 based on 0 ratings. 1 reviews.
Anonymous More than 1 year ago