Use SharePoint 2013 Tools to Customize the Look of Your Intranet

Cathy Dew

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

Gather Requirements

Start at the Beginning

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

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?

Poll Questions Do you currently have an intranet? Do you visit the homepage of your intranet? Do you participate in any Social Networks?

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

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

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

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

Web Parts for Displaying Content Video/Media Document Libraries Content by Search Web Part Content Editor Wiki Style Pages Calendars Announcements Yammer

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

Time to Design the Site

Ready, Set, Go

Develop a User Experience Plan

Design Methods Wireframes are a great tool for separating

Design and Function – start with a basic SP site and customize from there

Design Methods Evaluate Your Designs for Functionality and

Content – Not Design

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

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

Determine Deployment Plan Solution

Sandboxed for Office 365 Visual Studio Full Trust for On Premises

Manual Application SPD Browser

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

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

Design Mockup Sample

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

Branded Site

Branded Site

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

Demo

Thank you for attending!

Cathy Dew, MVP@catpaint1

www.sharepointcat.com