introduction to sharepoint information architecture and branding

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: derekcp@bluemetal.com

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