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.

Use SharePoint 2013 Tools to Customize the Look of Your Intranet


Published on

In this session we will dive into the methods for customizing an intranet built on SharePoint 2013. We will look at the options for customizing and how you can take these options further. We will discuss the Design Manager, tools for creating customizations and creating custom Composed Looks for SharePoint 2013. These will allow us to delve into code and widespread customizations that will affect both publishing and non-publishing components of SharePoint.

Published in: Technology, Design

Use SharePoint 2013 Tools to Customize the Look of Your Intranet

  1. 1. Use SharePoint 2013 Tools to Customize the Look of Your Intranet Cathy Dew
  2. 2. Speaker Bio Cathy Dew  Consultant at Planet Technologies  Graphic Designer, Consultant and SharePoint MVP  Over 6 years of SharePoint branding experience  Author: SharePoint 2010: Six in One  catpaint1 on Twitter 
  3. 3. Start at the Beginning Gather Requirements
  4. 4. What is the Purpose?  Public Facing  Extranet  Intranet – Informational Only  Intranet – Informational and Collaboration  Intranet – Collaboration Only  Intranet with Social and MySites Plus everything else
  5. 5. Asking the Questions  Can be the biggest challenge  Example Questions:    What is the one thing you want users to know when they go to your site? What sites do you like? What sites don’t you like?
  6. 6. Poll Questions  Do you currently have an intranet?  Do you visit the homepage of your intranet?  Do you participate in any Social Networks?
  7. 7. Scenario – CatDragged In Corp CatDragged In  Cat Supply Manufacturer that needs to manage their business documents and communicate effectively with their employees.  They currently have a SharePoint 2007 intranet that is poorly managed and often has very stale content.
  8. 8. Scenario – CatDragged In Corp CatDragged In  The           Company has the following Business Units Accounting Administrative/Executive Human Resources IT Manufacturing Project Management Office Quality Assurance Research and Development Sales and Marketing Shipping
  9. 9. Scenario – CatDragged In Corp CatDragged In  Challenges:      How to Organize their Content How to Engage their Users How to Keep their Content Fresh Geographically Divided Teams Capture and Store Documents and Knowledge in a Centralized Location
  10. 10. What Kind of Pages will I use?  Determine if you will be using Publishing Pages or Collaboration Sites  Will you Use a Custom Page Layout?  Publishing Infrastructure allows for this using Design Manager or SPD methods  Will   you be creating Custom Display Templates? Customize the way information is displayed in items like the Search Pages and some WebParts and Views Use the Design Manager, SPD or other tools to create these
  11. 11. Web Parts for Displaying Content  Video/Media  Document Libraries  Content by Search Web Part  Content Editor  Wiki Style Pages  Calendars  Announcements  Yammer
  12. 12. Getting User Attention  This is one of the bigger challenges when planning the User Experience  Need that “Squirrel” moment  Pay attention to your users demographics     Gamification Stock Ticker Weather Social
  13. 13. Ready, Set, Go Time to Design the Site
  14. 14. Develop a User Experience Plan
  15. 15. Design Methods  Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there
  16. 16. Design Methods  Evaluate Your Designs for Functionality and Content – Not Design
  17. 17. Wireframe Tools  Balsamiq   SharePoint 2013 Team Site Template from Flucidity nt-2013-balsamiq-mock-up-template/  Visio  Adobe Creative Suite
  18. 18. Create a User Experience Artifact Plan  Determine  Master Page Needs Design Manager or Custom  Determine CSS Needs  Determine if your site will be Responsive  Browsers will you target  Web Parts will you use  Images will you need  Page Layouts if Needed
  19. 19. Determine Deployment Plan  Solution   Sandboxed for Office 365 Visual Studio Full Trust for On Premises  Manual   Application SPD Browser
  20. 20. Create Design Mockups  At this stage you will want to create a design mockup  Standard Web Development principles and requirements apply at this stage  Mockups will contain the visual elements, colors and images you propose for the final solution
  21. 21. Things to Pay Attention To  Pay  Close Attention to: Navigation  Top Navigation  Quick Launch Navigation  Breadcrumbs      Ribbon Suite Bar Search Pages – Display Templates for Search Results Pages Any Web Template Changes My Sites
  22. 22. Design Mockup Sample
  23. 23. Create Customized Design Artifacts  Make use of the tool you are most comfortable with to develop your design artifacts  SharePoint 2013 Design Manager  Adobe Creative Suite  SharePoint Designer 2013  NotePad  Visual Studio  Plus Many More
  24. 24. Branded Site
  25. 25. Branded Site
  26. 26. Branded Site Artifact List  One Custom Master Page – Built in SPD – no HTML version  One Custom CSS File  Custom Images  Video Library  Corporate Announcements Library
  27. 27. Demo
  28. 28. Thank you for attending! Cathy Dew, MVP @catpaint1