What to Expect and Things to Know

The first thing to expect when branding SharePoint is that anything is possible. Some people will say, “I want SharePoint to not look like SharePoint.” There are many ways to configure and brand SharePoint so that it does not retain the default look and feel.

You should also expect that you won't get it right on the first try. Everyone will have an opinion, and it's ok to have opposing opinions when it comes to design. Some people might like the color orange; some might not. This doesn't mean that you should scrap all orange from your design if that color is a valid choice in your palette.

As you move through the branding-definition process you will need to conduct peer reviews. Don't take anyone's criticism personally. When it comes to design, people have strong personal preferences. Take in the feedback, but stay true to your direction. Don't allow a committee to define your designs.

Identify the Support Team

For small projects you might be the only person carrying the design from concept to production. But on larger projects make sure you identify and communicate regularly with your team members, business users, and stakeholders. Your team might consist of approvers, testers, developers, project managers, and program managers. Get involved and participate in weekly or daily calls to discuss blocking issues, risks, and other problems as they come up.

Seek a SharePoint Community

You are not alone; there is a large community of people just like you that can help with any issues that come up. Explore blogs and forums, and attend a conference if you can. Start networking.

Understand That All Projects Are Different

No two projects are the same. They might have similar features and functionality but differ entirely in brand approach. The scope and length of the project also determine how much customization you can apply to your site. Some projects might just need a simple facelift with the use of themes, while others require a complete overhaul. It's best to fully understand the scope of the work and set expectations early.

Rely On Multiple Roles for Support

The success of the project depends on having good teamwork and synchronization among team members. On most projects you will be working with a variety of people with different skills sets. Make sure that you utilize those resources and capitalize on their strengths. If you're the sole person tasked with branding SharePoint, do not work in a bubble. Have others review your work, and conduct peer reviews often.

Understand the Project Scope

With SharePoint you can turn a number of features on or off depending on users' needs. These features include Document Management, Business Intelligence, Reporting, Multimedia, News, Ratings, Commenting, Blogging, Social Features, My Sites, and Profiles. Including these features means additional time and effort for building out the information architecture and taxonomy. Make sure you understand the defined scope of the project so that you don't exceed the original scope with your wireframes and potentially add unplanned development work. Stay in communication with your project managers through regular status reports, and do your best to keep to a schedule.

Take It One Step at a Time

If you haven't branded SharePoint before, it is advisable to take baby steps at first. Start small and work your way up to more advanced designs and configurations. First select a design on the web that you like—one that has similar characteristics to your basic SharePoint design. Then get access to a virtual development environment, and don't worry about making mistakes. If you happen to mess up, you can always revert back to a safe state and try again. Take that preexisting design and make small changes to the background colors, images, and fonts. You will be surprised by how quickly things start to come together.

Don't Skip Ahead

Put down those crayons. Don't be tempted to skip ahead in the process and go straight for the fun stuff. There will always be the temptation to get your hands dirty at the beginning of a project with visual design. You need to understand who your users are and what they want out of the site. If you jump ahead, you run the risk of lots of rework and lost time.

Don't Be Intimidated by SharePoint

As you begin to build out your newly defined visual design do not get intimidated by vast amount of styles that come with SharePoint. If you find yourself scrolling though the basic CSS style sheets wondering how you are ever going to make heads or tails of it, don't worry. This book covers the main CSS classes and the techniques for defining them. However, at times you might be at a complete loss on how to do something and will spend a ridiculous amount of time trying to figure it out. At this point you will need to dive deeper into the book and explore other options to get the look and feel that you are after. For example, if you are having issues with incorporating your own custom logo or header into SharePoint, the section on building the design steps you through the process.

Learn the Basic Features of SharePoint

Before you start defining your portal it is critical that you understand the basic features of SharePoint and how it works. Get access to a development environment or online lab and explore ways in which you can edit and customize sites. In SharePoint 2010 the inclusion of the ribbon takes some time to get used to. The ribbon is used for list and library management—for example, uploading and managing documents. It is also a key component in the rich text editing of content on your page. Almost everything in SharePoint is a list, library, or configurable web part. Any list or library can have custom columns. Think of columns as containers for metadata. The main difference between a list and a library is that a library item needs to have a file attached to it, while a list is simply a collection of metadata. For example, an announcement list is just three simple columns of data: a title, body text, and an expiration date. If you wanted to have additional metadata for that announcement you would simply add an existing site column or create a new column. Within each list and library you can create custom views that allow you to sort and filter the data, display different columns, and group the content by a specific column's metadata. Some SharePoint web parts are configured on the page and allow you to consume or display data in different ways. The Summary links web part for example is a publishing web part that allows you to manage links directly on the page with different groupings and display styles.

Remember the 80/20 Rule

When it comes time to build out the SharePoint visual design, you will find that you can quickly change the visual appearance. But implementing the final, small changes to get SharePoint to look exactly like your visual design composition takes up most of your time. Things like fonts, spacing, colors, and positioning are time-intensive. In most cases, if something is one or two pixels off position from your specifications, that is not such a big deal. But if objects are overlapping and the actual functionality of the site is degraded, then you need to spend time fixing the issue.

Have Fun

Branding SharePoint should not be something that you despise. Make it a pleasurable experience, and have fun with it. Keeping a positive attitude helps boost the quality of work. There will be times when you are up late burning the midnight oil to meet a very tight deadline, but the reward of finishing a project and having it be a success makes it all worth it. Be proud of your work and enjoy the experience.

Try New Things

Don't be afraid to venture outside the box every once in a while. You just might surprise yourself with a new idea. Sometimes people get tunnel vision and forget to explore new options. Look on the web to see how other people have done it. Ride the wave of the most current design trends and try new things. SharePoint has its limitations, and it's good to keep yourself in check with your development team so that you are not designing high in the sky without any boundaries. There always needs to be a balance between staying with what works and being completely out in left field.

Identify the Design Types

There are a variety of different types of design projects. The first type is just using simple colors and fonts that relate to a theme. The second type is to take an existing design like a public web site and adapt it to SharePoint for an intranet or extranet. The last and most complex type of design is creating a custom design. These custom designs are defined by requirements, design inspirations, and moods. They are considered custom since they will require a large amount of development effort to transform them from the standard SharePoint look and feel to something completely different.

Look Out for Pitfalls

Since SharePoint is a prebuilt system there are known pitfalls that you need to look out for. Some of these deal with vague requirements and definitions around approach. Others are more technical and pertain to the build and implementation of the design. The book covers some of these pitfalls and how to avoid them.

Know Your Branding Limitations

With all systems come limitations. These limitations can be rectified with custom code and development, but that takes time and money. It is best to understand these limitations and clearly communicate them to set clear expectations. The last thing that you want is to ignore the problem and expect it to just go away. People in general will understand and accept the limitation or, if it is a must-have feature, they might be ok with the additional cost to fix it.

Work With SharePoint, Not Against It

There may be times when you find yourself banging your head against the wall, with no clear understanding of why things are not working or why they aren't looking the way that you want them to. Don't give up, and don't be afraid to ask for help. Who knows? You might just need to make a simple configuration change, and then everything will go back to normal. If you find yourself stuck in a hole, try alternative methods. If all else fails, clearly communicate that there is a known limitation and that you might need some additional resources to help out.

Make a Great First Impression

A first 5.250impression goes a long way. As new users navigate to your site you want them to feel excited to learn, explore, and spend more time on your site. You want them to leave having had a good experience and wanting to come back. You can accomplish this in a couple of different ways. The first is through the user experience. By having good information architecture, navigation, taxonomy, and up-to-date, relevant content, your users will get what they need. The second is by adding personalization and targeted content to allow users to feel like this is their portal. The third is through a memorable and exciting visual experience. If the images and colors are dull, drab, and inconsistent, users will immediately conclude that the entire site and its content are weak. You have a very small window of opportunity to capture a user's attention before they click away or navigate to another site. Make the most of it and provide the best experience possible. This will increase user adoption and give you the best return on investment (ROI).

Be Prepared

A successful SharePoint branding project depends on the time and detail put into it. Take the time to do your homework. Listen to your users and discuss with them the primary objective for coming to your site. Develop use cases and test them. Organize your requirements and make sure to validate them. Create wireframes and detailed specifications to help your development team so that they don't have to guess or make things up as they go. Read through and use the design specifications that are given to you such as style guides, fonts, colors, and logos. The more prepared you are the easier the project will be.

Maintain Brand Consistency

Throughout the design and development phases, be sure to stay consistent with your design styles. Don't make the user guess whether an element is a link or just text. If you add a design treatment to an image, such as a shadow or a border, keep that consistent across all pages. Reuse classes for consistency to ensure that when updates are made, changes are updated globally. Headers and web-part spacing should also be consistent.

Allocate Time for Testing

There are different types of testing, and all of them will help make the user experience the best that it can be. Testing can be easy and does not require a team of skilled testers. For some tests you simply show the concept to a group of people and record their reaction. Throughout the process of building the visual design you will be testing your own code. It is important to test early so that you have time to make adjustments. Pay attention to how users react. Look for things like hesitation, facial expressions, and frustration. Ask participants to think out loud, and try not to lead testers in a particular direction that might skew the results.

Card sorting is a very effective exercise for testing out site maps and taxonomies. To prepare for a card sort write one word or phrase on each card. There are two types of card-sort tests. The first is called an open card sort. Participants are asked to create their own group labels. The second type is called a closed card sort. Testers have created a predetermined grouping for the participants to sort the cards under. To start the card sorting the participant is asked to sort the cards into logical groupings that make sense to them. Make sure to have a few blank cards in case a participant wants to put in additional items. Once you have completed the tests, record the organization and relationship of the cards into a spreadsheet. After repeating this with other participants review the results and look for clusters of similar groupings by the participants. You can also conduct card sorting online; a number of free web sites allow you to set up your own open or closed card sort. Most free sites allow for up to 30 participants and provide a graphical output of the results. The online card sorts often are a cheaper way to test, but you lose the live interaction between the tester and the participant.

Don't Expect to Get It Right on the First Shot

Branding SharePoint takes patience. When working with CSS you often make multiple passes at creating the design. Refer to your style guide and plan ahead. Be organized and take it slow. If you rush you might end up missing key style attributes and end up having to do a lot of rework. When planning your schedule add in time for multiple phase releases.

Know That There Is Never One Way to Do Something

When building out the design, you will discover multiple ways to get the same results. For example, to represent background color you can either create an image or use CSS. Also when placing something on the page, you can use padding, margins, or positioning to get the same effect. It is a good idea to know the pros and cons of each approach and test the results in different browsers. You can follow best practices to get the best performance out of your site. It is recommended not to use overly large images that will make the page load longer.

Try Not to Take Shortcuts

If you're on a tight deadline, it might be tempting to take shortcuts when designing or building your design. In most cases, if a shortcut does not affect the overall user experience, then it should be ok. However, if you decide to simplify or alter the design just to make it easier to build, then you might run the risk that users notice the change, and the original experience becomes degraded. Some shortcuts, like creating inline styles, affect the manageability of the site going forward. Placing inline styles directly on an element—for example, <div style=“font-weight:bold; color:#000;”>Text</div> —means that if a change needs to be made to that element style, you have to modify it directly and it will not be global. It is best to use CSS classes like this: <div class=”bold-text”>text<div>. With this approach you can update all references to this class with one quick change.

Understand the Purpose of the Site

Each site has different requirements and goals. Some sites are geared specifically toward the generation and publishing of news. In this situation you need to allow for content to be aggregated and rolled up to a higher level. There might also be different news styles such as featured news, company news, and reminders. The more advanced news sites might include rotating carousels, featured news, related news, ratings, and discussions. Other sites might be more collaborative and focus on knowledge management and content sharing. Sites may include social features that allow users to see what their colleagues are doing on the site. Given all of these scenarios you need to fully understand the purpose of the site and what your users want to get out of it. With this knowledge in hand, you can focus on those key features and provide the best user experience possible.

Make SharePoint Not Look like SharePoint

As mentioned earlier, when you start gathering the requirements for the visual design, a common request is for the site not to look like SharePoint. This statement can be interpreted in many different ways. Some people will ask for this when they want the visual design to take on a completely different look and feel. Others make this request to indicate that some of the controls on the page should be moved around to allow for a new and different experience. It's best to ask what they mean by this and not assume anything.

Keep Up With Design Trends

Stay up to date with new design trends. Start introducing these types of treatments and features to your designs and wireframes. Some trends have a short shelf life while others have been around for years. If you are out of touch with these trends, simply check a few top sites on the web and check for similarities. Design trends come in a variety of formats. Some design trends focus on look and feel while others are strictly functional or conceptual. Just be mindful of budget and time constraints as some features are not standard SharePoint functionality and therefore require considerable custom development.

Offer Mobile Support

More and more people are using their mobile phones to access the web, so it is only natural that users of your site will want to view SharePoint from their mobile phones or tablet computers. While SharePoint 2010 has a mobile view that can be configured, in most cases this will not give users the functionality that they need. There are some third-party software companies that can be purchased for a better experience. Another option is to create your own mobile views or applications for the site.

Provide Accessibility

Identify any special considerations that you need to account for when building out your site. This goes back to knowing your users and making sure you provide them with all the tools they need. Some sites require that you provide full accessibility feature to be compliant with Section 508 government-regulated standards. Other sites require only basic accessibility features. SharePoint comes equipped with some basic accessibility features designed to help users who have poor visibility.

Learn Application Shortcuts and Quick Keys

To be efficient and productive when designing your site, it's recommended that you spend some time learning and memorizing application shortcuts and quick keys. Show off your Photoshop skills by creating custom actions. By learning application quick keys, you save yourself from having to use scroll bars or choose a zoom percentage.

Avoid CSS Overload

SharePoint includes a lot of CSS style sheets and classes. Don't get overwhelmed by them; just use the ones that you need. Make sure you add comments to your CSS to identify what classes go with what section of the design or functionality. This will help with future updates and changes.

Save Often and Create Backups

The worst thing that can happen is that you spend all day working on your design and then find out that the file has become corrupt, overwritten, or lost. Save your work often and create backups. You can also leverage the built-in publishing in SharePoint and use version control to manage previous copies of your files inside of SharePoint's content database.

With the foundation knowledge of what to expect and key things to consider, this next section will provide you with some background concepts of HTML and CSS.