SharePoint Branding presentation by Tracey Nolte

Beginner to
ADVANCED

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

Who…
BRANDS SharePOINT?

Proctor & Gamble

Other Top SharePoint Sites
http://www.wssdemo.com/livepivot/

But…
BRANDING
Is not just to make it “look pretty”…

Function
Matters

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
GOALS, MOTIVATION, AND TRIGGERS
MY GOAL IS TO
BE MORE PRODUCTIVE.
http://bit.ly/cBKoTK

30
Obstacles AND Limitations
I CAN’T FIND IT.
http://bit.ly/9giEMb

31
Tasks, Activities, AND Behaviors
I HAVE A LOT OF THINGS IN THE AIR
http://bit.ly/9rYgds

32
Geography AND Language
I’m Pacific Time…
http://bit.ly/agm9aw

33
Environment AND Gear
My NETWORK CONNECTION IS SLOW
http://bit.ly/bdNYpD

34
WORK LIFE AND EXPERIENCE
I’m NEW TO
COMPUTERS
http://bit.ly/9a3eCj

User Experience

User Experience
by Apple
and Microsoft

User Experience
by Apple

User Experience
By Microsoft
http://www.youtube.com/watch?v=g6B9zex8Bp4

What ARE the
BENEFITS OF UCD?
39
Increased Adoption Rates
Improved User Productivity
Higher Initial System Quality
Reduced Maintenance Costs
Realized Return onInvestment

SharePoint History & Tools

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

SharePoint 2003 vs. 2007 vs. 2010

SharePoint Design Tools
Code Editor: SharePoint Designer 2007 or SharePoint Designer 2010
Image Editor: Adobe Fireworks, Gimp, Adobe Photoshop
Browser: for 2007 (IE ONLY) for 2010 any browser
Development / Test Site: for making changes & testing your designs (not live)

SharePoint Designer 2007

SharePoint Designer 2010

SharePoint 2010What’s new?
More Flexible Branding of the UI
User Experience has Changed (i.e. Ribbon, Look & Feel)
Silverlight Dialogs
Much better inline editing
Better positioned for everyday Branding

Browsers
Better (OOTB) Cross-browser support
Better HTML Output (less tables, more “div” and “ul”)
100% XHTML Compliant

Methods of Branding
Themes
Master Pages
Page Layouts
Content Pages
CSS

Themes
Themes change the colors and fonts for an existing SharePoint template
Allowed 12 colors & 2 Font Choices
Theming Engine (.thmx)
Common w/ other Office Products
Theme Gallery
>> DEMO TO COME LATER

Themes
quick and easy
Like painting walls in your house
Accessible in SharePoint & PowerPoint

Apply Existing

Create New Theme

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.

Master Pages
Master Pages hold: HTML, SP Controls (Navigation, Search), Content Placeholders
SharePoint 2010 gives you:
V4.master (eq. default.master in 2007)
Nightandday.master (Internet/Large Intranet Site)
Minimal.master

Page Layouts
Page layouts contain field controls and Web Parts
Dictate the body layout for a page

Master PagePage Layout
Master Page elements combined with page layout make the page layout

CSS
SharePoint uses CSS heavily
MOSS 2007 = One Large CSS
SP2010 has multiple CSS files that are loaded as needed (as controls are loaded)
Alternate CSS Loading – Much like Theming

Content Pages
Publishing - structured information distribution with web zones/parts
Content – based around web part zones and web parts
Wiki - loose information structure
All customizable but varying levels of effort!!

Web Zone & Parts
Cheap or free web parts help increase functionality
http://www.amrein.com (twitter feed, video player, image rotator)
http://PathtoSharePoint.com (easy tabs, dashboarding)
http://wwwcodeplex.com (minicalendar, animated dashboards)

How Do You
Start?

Low Effort – OOTB Master Pages & Themes
Medium Effort – Custom Themes or Alternate CSS
Full/High Effort – Custom Master Pages & Page Layouts
Project Estimation

The UCD Process helps branding by answering questions about time, effort, tools, knowledge and user expectations/use/challenges.
UCD is an iterative process!!
What then?

4 Phases
Design
Evaluate
Concept
Research

PURPOSE
Define Audience
Learn User Objectives
Identify Motivators
Analyze Content
Understand Behaviors
Visualize User Challenges
Define Site Gaps
Measure Web Analytics
Analyze Processes
Identify Improvements
Research

METHODS
Interviews
Personas
Surveys
Focus Groups
Workshops
Brainstorming
Task Analysis
Content Analysis
Contextual Inquiry
Affinity Diagramming
User Scenarios
Competitor Evaluation
Research

TOOLS
Meetings
Pad & paper
One Note
Audio recording device
Research

ASK
lots of questions

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?

PURPOSE
Define Navigation
Create Site Map
Create Site Layout
Visualize Functional Areas
Plan interactivity
Compose Site Requirements
Design User Interaction
Define Click Path
Build Information Architecture
Concept

METHODS
Storyboards
Sketching
Card Sorting
Wireframes
Participatory Design
Page Layout
Navigation Modeling
Metadata Design
Taxonomy Design
Controlled Vocabularies
Concept

TOOLS
Meetings
Pad & paper
One Note
Balsamiq Wireframes
FreeMind (mind mapping)
Sticky Notes
Whiteboards
Large drawing pads
Concept

Navigation
(taxonomy)

Storyboards – click path of users

Wireframes – define function

PURPOSE
Create Visual Style
Design Consistent Style
Select Color Theme
Set Feel/Mood
Create Brand Color Cohesion
Apply Visual Interest
Design Interactive Controls
Develop Engaging Experiences
Envision Final State
Design

METHODS
Graphic Design
Logo Design
Branding
Icon Design
Screen Mockups
Interaction Diagrams
High/Low Fidelity Prototyping
Paper Prototyping
Functional Prototyping
Style Guide
Design

TOOLS
Image Editor: Adobe Fireworks, Photoshop or Gimp for mockups
Color Picker
Style Guide
Marketing (branding style)
Microsoft Expression Blend (high fidelity prototypes)
jQuery!!! YAY!
Design

PURPOSE
Quality Assurance
Ensuring System Functionality
Testing For Design Flaws
Refining User Experience
Ensuring Return on Investment
Predict User Adoption
Evaluate

METHODS
Usability Evaluation
Usability Testing
Remote Usability Testing
Usability Lab Testing
Web Analytics
Heat Maps
Evaluate

TOOLS
Quality Assurance test scripts
Test group user feedback
Heat map tool (CrazyEgg.com)
Google Analytics (if you use it) or SharePoint site analytics
Evaluate

Plan your work
Work your plan

WHEN
DO YOU NEED IT DONE ?

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-?

Watch
>> demos

Tracey Nolte
Contact Me
www.traceynolte.com
281-253-2888
tracey@traceynolte.com
@TraceyNolte
http://gplus.to/webgal

http://estarktechnologies.wordpress.com	101
http://www.conseilsmarketing.fr	30
http://www.conseilsmarketing.com	8
http://server2	6
http://paper.li	2
http://twitter.com	1

SharePoint Branding presentation by Tracey Nolte

by Tracey Nolte on Jul 20, 2011

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 148

Statistics

SharePoint Branding presentation by Tracey Nolte Presentation Transcript