use sharepoint 2013 tools to customize the look of your intranet
DESCRIPTION
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.TRANSCRIPT
![Page 1: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/1.jpg)
Use SharePoint 2013 Tools to Customize the Look of Your Intranet
Cathy Dew
![Page 2: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/2.jpg)
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
![Page 3: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/3.jpg)
Gather Requirements
Start at the Beginning
![Page 4: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/4.jpg)
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
![Page 5: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/5.jpg)
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?
![Page 6: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/6.jpg)
Poll Questions Do you currently have an intranet? Do you visit the homepage of your intranet? Do you participate in any Social Networks?
![Page 7: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/7.jpg)
Scenario – CatDragged In Corp 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.
CatDragged In
![Page 8: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/8.jpg)
Scenario – CatDragged In Corp 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
CatDragged In
![Page 9: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/9.jpg)
Scenario – CatDragged In Corp 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
CatDragged In
![Page 10: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/10.jpg)
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
![Page 11: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/11.jpg)
Web Parts for Displaying Content Video/Media Document Libraries Content by Search Web Part Content Editor Wiki Style Pages Calendars Announcements Yammer
![Page 12: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/12.jpg)
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
![Page 13: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/13.jpg)
Time to Design the Site
Ready, Set, Go
![Page 14: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/14.jpg)
Develop a User Experience Plan
![Page 15: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/15.jpg)
Design Methods Wireframes are a great tool for separating
Design and Function – start with a basic SP site and customize from there
![Page 16: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/16.jpg)
Design Methods Evaluate Your Designs for Functionality and
Content – Not Design
![Page 17: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/17.jpg)
Wireframe Tools Balsamiq
SharePoint 2013 Team Site Template from Flucidity
http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up-template/
Visio Adobe Creative Suite
![Page 18: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/18.jpg)
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
![Page 19: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/19.jpg)
Determine Deployment Plan Solution
Sandboxed for Office 365 Visual Studio Full Trust for On Premises
Manual Application SPD Browser
![Page 20: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/20.jpg)
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
![Page 21: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/21.jpg)
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
![Page 22: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/22.jpg)
Design Mockup Sample
![Page 23: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/23.jpg)
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
![Page 24: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/24.jpg)
Branded Site
![Page 25: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/25.jpg)
Branded Site
![Page 26: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/26.jpg)
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
![Page 27: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/27.jpg)
Demo
![Page 28: Use SharePoint 2013 Tools to Customize the Look of Your Intranet](https://reader035.vdocuments.net/reader035/viewer/2022070313/554b9f4ab4c905b8618b491c/html5/thumbnails/28.jpg)
Thank you for attending!
Cathy Dew, MVP@catpaint1
www.sharepointcat.com