Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction to SharePoint IA & BrandingDerek Cash-PetersonArchitectBlueMetal Architects
Agenda•   Information Architecture•   User Experience•   Why brand SharePoint?•   Introduction to SharePoint Branding•   C...
Derek Cash-Peterson•   SharePoint Architect/Developer•   Information Architect•   User Experience Designer•   The Branding...
I Take This•   SharePoint Architect/Developer•   Information Architect•   User Experience Designer•   The Branding Guy
And Turn It Into This
Information Architecture
Information ArchitectureThe Right Content
Information Architecture                  To TheThe Right          Right Content           User
Information Architecture                  To The     At TheThe Right          Right     Right Content           User      ...
Information Architecture               Quickly!
Information Architecture                                                                                         Home     ...
Information Architecture•   New Employee     No institutional knowledge     Needs to find our the expense reimbursement ...
Information Architecture                              Home                    My                                       Pro...
User Experience•   How users interact with the page•   Navigation structured•   Components on the page•   Consistency is k...
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       Share...
Introduction to Branding
Introduction to Branding•   Custom CSS       Can create a custom look and feel       Can start to move things around on ...
Introduction to Branding
Introduction to Branding•   Purchased Theme       Low cost of entry       More advanced look and feel       Relatively ...
Introduction to Branding
Introduction to Branding•   Complete UI Customization       WCM Based       Heavy Customization       Requires Custom D...
Introduction to Branding•   Screen Shot 1
Introduction to Branding•   Screen Shot 2
Level of Effort                              Low                         Medium                           HighComponents  ...
Common Tools•   Firebug (Firefox)      •   Jquery•   IE Developer Toolbar   •   SPServices•   Yslow                  •   S...
Contact InformationContact InformationDerek Cash-PetersonEmail: derekcp@bluemetal.comTwitter: @spdcpBlog: www.spdcp.comWeb...
Introduction to SharePoint Information Architecture and Branding
Upcoming SlideShare
Loading in …5
×

2

Share

Download to read offline

Introduction to SharePoint Information Architecture and Branding

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Introduction to SharePoint Information Architecture and Branding

  1. 1. Introduction to SharePoint IA & BrandingDerek Cash-PetersonArchitectBlueMetal Architects
  2. 2. Agenda• Information Architecture• User Experience• Why brand SharePoint?• Introduction to SharePoint Branding• Common Tools
  3. 3. Derek Cash-Peterson• SharePoint Architect/Developer• Information Architect• User Experience Designer• The Branding Guy
  4. 4. I Take This• SharePoint Architect/Developer• Information Architect• User Experience Designer• The Branding Guy
  5. 5. And Turn It Into This
  6. 6. Information Architecture
  7. 7. Information ArchitectureThe Right Content
  8. 8. Information Architecture To TheThe Right Right Content User
  9. 9. Information Architecture To The At TheThe Right Right Right Content User Time
  10. 10. Information Architecture Quickly!
  11. 11. Information Architecture Home General & Business Managed Consulting Project Purchasing Time Tracking Administrative Development Services Services Management HR Finance Sales Marketing LYNC SharePoint CRM ProjectsInternal Site Internal Site Internal Site Internal Site Internal Site Internal Site Internal Site Project 1 Project 2
  12. 12. 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
  13. 13. Information Architecture Home My Project Departments Policies Forms Department Central Department Project 1 Project 2 1 Internal Site
  14. 14. User Experience• How users interact with the page• Navigation structured• Components on the page• Consistency is key!
  15. 15. Why Brand SharePoint?• Governance• User Experience• Messaging
  16. 16. Introduction to Branding• Skinning• Custom CSS/HTML or Purchased Package• Complete UI Customization
  17. 17. Introduction to Branding• Skinning  Easy to achieve  UI or PowerPoint  13 editable fields  SharePoint still looks like SharePoint
  18. 18. Introduction to Branding
  19. 19. 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
  20. 20. Introduction to Branding
  21. 21. 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
  22. 22. Introduction to Branding
  23. 23. Introduction to Branding• Complete UI Customization  WCM Based  Heavy Customization  Requires Custom Development  Works best for non-OOB sites
  24. 24. Introduction to Branding• Screen Shot 1
  25. 25. Introduction to Branding• Screen Shot 2
  26. 26. Level of Effort Low Medium HighComponents Out of Box themes Custom CSS Custom master pages, page layouts, HTML/CSSPros End-user editable themes, Leverages existing CSS Highest flexibility, most can easily modify color and classes and IDs tailored user experience fonts.Cons Rigid in what can be Limited to existing classes, Requires extensive custom customized. Can lead to a requires CSS/HTML resource managed code. Can be rigid disjointed user experience. in what templates you can use.
  27. 27. Common Tools• Firebug (Firefox) • Jquery• IE Developer Toolbar • SPServices• Yslow • SPXSLT• Fiddler • U2U CAML Designer• SPDisposeCheck • SPManager
  28. 28. Contact InformationContact InformationDerek Cash-PetersonEmail: derekcp@bluemetal.comTwitter: @spdcpBlog: www.spdcp.comWeb: www.bluemetal.comHandy LinksStarter MasterPages: http://bit.ly/7UDZbbSPServices/SPXSLT: http://bit.ly/12gHekOOB Styles: http://bit.ly/q4c8Fz
  • AliciaNeo1

    May. 27, 2016
  • neandertalien

    May. 19, 2014

Views

Total views

928

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

16

Shares

0

Comments

0

Likes

2

×