Tracey Nolte Work for Slalom Consulting Background in BI & Design 6 years of SharePoint Worked with SharePoint 2003, 2007 and 2010 Branded sites for: AT&T American Heart Association Dr Pepper Snapple Centex Homes SharePoint User Groups in Baltimore, San Diego & Dallas
Branding Examples Reasons to brand Problems with old sites UX/IA = UCD UCD Process How to get started PLAN Your Work, WORK Your Plan Time/Effort determines BRAND METHOD METHODS: Themes, CSS & Master Pages >> demos
Create INNOVATIVE CHANGE BRANDING STYLE CREATION INTRANETS DEVELOP LIVE SHAREPOINT UCD FUN USER FUNCTIONALITY WEBSITES ORGANIZE INTERACTIVITY COLLABORATE DESIGN VISUALIZE Planning CREATIVE
What are problems with the past way? Design decisions were made by managers, project sponsors or executives…. They didn’t INVOLVE USERS in design They didn’t understand PROCESSES They didn’t understand IMPACT to USERS They didn’t focus on USER ADOPTION They didn’t focus on USER EFFECIENCY They didn’t focus on USER EFFECTIVENESS They didn’t optimize the developer’s time
Users at CENTER business strategy USER company info brand & culture
User Centered Design UCD is an iterative methodology that puts the user at the center of all design decisions.
UX / IA = UCD UX = User Experience IA = INFORMATION ARCHITECTURE Ways to create USER EXPERIENCE Design/colors Interactivity Page Layout Emotional Response The way USERS FIND INFORMATION Taxonomy Navigation Pages Web Parts USER CENTERED DESIGN
Understanding the perspective a user brings to a system enables us to design that system to meet their needs.
27 What IS THE USER PERSPECTIVE? http://bit.ly/czatli
28 USER perspective NO. 1: NEEDS AND WANTS I NEED TO FIND INFORMATION FAST http://bit.ly/duRu7o
29 USER perspective NO. 2: GOALS, MOTIVATION, AND TRIGGERS MY GOAL IS TO BE MORE PRODUCTIVE. http://bit.ly/cBKoTK
30 USER perspective NO. 3: Obstacles AND Limitations I CAN’T FIND IT. http://bit.ly/9giEMb
31 USER perspective NO. 4: Tasks, Activities, AND Behaviors I HAVE A LOT OF THINGS IN THE AIR http://bit.ly/9rYgds
32 USER perspective NO. 5: Geography AND Language I’m Pacific Time… http://bit.ly/agm9aw
33 USER perspective NO. 6: Environment AND Gear My NETWORK CONNECTION IS SLOW http://bit.ly/bdNYpD
34 USER perspective NO. 7: WORK LIFE AND EXPERIENCE I’m NEW TO COMPUTERS http://bit.ly/9a3eCj
SharePoint HISTORY 1997 – 1999 Site Server : web content management and replication, site analytics, personalization, indexing/search, document management and ecommerce 2000 – 2001 STS : Microsoft releases a free add-on to Office 2000 called SharePoint Team Services which provides web-based team collaboration 2002 – 2003 WSS: STS was renamed Windows SharePoint Services (WSS) and became part of Windows Server 2003 and renamed Office SharePoint Portal Server 2003. 2004 – 2006: SharePoint 2007 with MOSS 2007 released with Microsoft Performance Point 2007 2007-2010: SharePoint 2010 released with ribbon in Office 2010, social media, and other improvements
Create Customized Themes PowerPoint > Design TabSelect the Colors button > “Create New Theme Colors…”. Change the colors to what you would like and save it. Now click on the Fonts button in the Themes Section. Change the Font and click save. Expand the themes section and click “Save current Theme…” You should now have your own thmx file. So now in order to use this file in SharePoint 2010 you need to upload it to the theme gallery. Site Settings –> Themes or simply go to http://YourSharePointPortal/_catalogs/theme/Forms/AllItems.aspx and upload your file.
Who will use it? OR Internal Employees Contractors Leadership Public Customers Partners Investors The World
Public Site Internal Sites Immerse Recognize Who: who you are What: what you do How: how you do business Inform Who: company culture What: policies/procedures How: business operations
Why brand? Internal Sites Public Site Create brand recognition To make it look “not like SharePoint” Look like corporate branding/image Create a custom user experience Clear & consistent information organization Sites outdated or incorrect information Target the right audience with correct info
How will people Use your site? Learn Collaborate Find information Buy stuff Meet people Help others
WHAT Will they do on the new site? Are they doing on the OLD site?
Time & Effort By when do you need it done? Do you know CSS, JQUERY & HTML? Do you need customized code? Do you have people resources? Do you have a development/test site? Do you have SharePoint Designer?
Time/Effort Determines BRAND METHOD Does NOT Require SharePoint Designer REQUIRES SharePoint Designer, Image Design Tools & More Custom Master Page Themes CSS
TRICKS Never edit default.master – make a copy and rename it Never edit core.css – create a new CSS and reference it in your master page above core.css Use inspect element in Chrome (F12 in IE or firebug in Firefox) to preview styles and code In CSS use !important when you need to override a style
Recommendations Book: SharePoint 2010 Branding by Randy Drisgill CSS: SharePoint 2010 CSS Chart: http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/ Branding a publishing site: http://msdn.microsoft.com/en-us/library/gg430141.aspx Starter blank masterpages: http://blog.drisgill.com/2009/11/starter-master-pages-for-sharepoint.html SharePint: Join SharePointers for a drink at Cadillac Ranch from 9-?