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 Information Architecture and Branding


Published on

Published in: Technology, Business
  • Be the first to comment

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: Styles: