Use SharePoint 2013 Tools to Customize the Look of Your Intranet

1. Use SharePoint 2013 Tools to Customize the Look of Your Intranet Cathy Dew

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  www.sharepointcat.com

3. Start at the Beginning Gather Requirements

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. 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. Poll Questions  Do you currently have an intranet?  Do you visit the homepage of your intranet?  Do you participate in any Social Networks?

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. 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. 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. 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. Web Parts for Displaying Content  Video/Media  Document Libraries  Content by Search Web Part  Content Editor  Wiki Style Pages  Calendars  Announcements  Yammer

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. Ready, Set, Go Time to Design the Site

14. Develop a User Experience Plan

15. Design Methods  Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there

16. Design Methods  Evaluate Your Designs for Functionality and Content – Not Design

17. Wireframe Tools  Balsamiq   SharePoint 2013 Team Site Template from Flucidity http://flucidity.azurewebsites.net/2013/02/sharepoi nt-2013-balsamiq-mock-up-template/  Visio  Adobe Creative Suite

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. Determine Deployment Plan  Solution   Sandboxed for Office 365 Visual Studio Full Trust for On Premises  Manual   Application SPD Browser

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. 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. Design Mockup Sample

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. Branded Site

25. Branded Site

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. Demo

28. Thank you for attending! Cathy Dew, MVP @catpaint1 www.sharepointcat.com