introduction to sharepoint information architecture and branding
TRANSCRIPT
Introduction to SharePoint IA & Branding
Derek Cash-PetersonArchitectBlueMetal Architects
Agenda
• Information Architecture
• User Experience
• Why brand SharePoint?
• Introduction to SharePoint Branding
• Common Tools
Derek Cash-Peterson
• SharePoint Architect/Developer
• Information Architect
• User Experience Designer
• The Branding Guy
I Take This
• SharePoint Architect/Developer
• Information Architect
• User Experience Designer
• The Branding Guy
And Turn It Into This
Information Architecture
Information Architecture
The Right
Content
Information Architecture
To The Right User
The Right
Content
Information Architecture
To The Right User
The Right
Content
At The Right Time
Information Architecture
Quickly!
Information Architecture
Home
General & Administrati
ve
HR
Internal Site
Finance
Internal Site
Business Developmen
t
Sales
Internal Site
Marketing
Internal Site
Managed Services
LYNC
Internal Site
Consulting Services
SharePoint
Internal Site
CRM
Internal Site
Project Managemen
t
Projects
Project 1 Project 2
Purchasing Time Tracking
Information Architecture
• New Employee No institutional knowledge Needs to find our the expense reimbursement
policy
• HR Admin Has institutional knowledge Needs to add a new policy and run it through
workflow
Information Architecture
Home
Departments
Department 1
Internal Site
My Department Policies Forms Project
Central
Project 1 Project 2
User Experience
• How users interact with the page
• Navigation structured
• Components on the page
• Consistency is key!
Why Brand SharePoint?
• Governance
• User Experience
• Messaging
Introduction to Branding
• Skinning
• Custom CSS/HTML or Purchased Package
• Complete UI Customization
Introduction to Branding
• Skinning Easy to achieve UI or PowerPoint 13 editable fields SharePoint still looks
like SharePoint
Introduction to Branding
Introduction to Branding
• Custom CSS Can create a custom look and feel Can start to move things around on the page Requires HTML/CSS skills Can be overwhelming Can break some OOB functionality
Introduction to Branding
Introduction to Branding
• Purchased Theme Low cost of entry More advanced look and feel Relatively easy to install Work with some OOB templates You get what you pay for
Introduction to Branding
Introduction to Branding
• Complete UI Customization WCM Based Heavy Customization Requires Custom Development Works best for non-OOB sites
Introduction to Branding
• Screen Shot 1
Introduction to Branding
• Screen Shot 2
Level of EffortLow Medium High
Components Out of Box themes Custom CSS Custom master pages, page layouts, HTML/CSS
Pros End-user editable themes, can easily modify color and fonts.
Leverages existing CSS classes and IDs
Highest flexibility, most tailored user experience
Cons Rigid in what can be customized. Can lead to a disjointed user experience.
Limited to existing classes, requires CSS/HTML resource
Requires extensive custom managed code. Can be rigid in what templates you can use.
Common Tools
• Firebug (Firefox)
• IE Developer Toolbar
• Yslow
• Fiddler
• SPDisposeCheck
• Jquery
• SPServices
• SPXSLT
• U2U CAML Designer
• SPManager
Contact InformationContact Information
Derek Cash-Peterson
Email: [email protected]
Twitter: @spdcp
Blog: www.spdcp.com
Web: www.bluemetal.com
Handy Links
Starter MasterPages: http://bit.ly/7UDZbb
SPServices/SPXSLT: http://bit.ly/12gHek
OOB Styles: http://bit.ly/q4c8Fz