SlideShare a Scribd company logo
1 of 28
Download to read offline
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
Start at the Beginning
Gather Requirements
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

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

More Related Content

Viewers also liked

Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessKanwal Khipple
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsTom Pham
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaKanwal Khipple
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Cathy Dew
 
2016 Intranet and Digital Workplace Roadshow
2016 Intranet and Digital Workplace Roadshow2016 Intranet and Digital Workplace Roadshow
2016 Intranet and Digital Workplace RoadshowJames Robertson
 
How to Write Amazing Functional Analysis Documents for your SharePoint Projects
How to Write Amazing Functional Analysis Documents for your SharePoint Projects How to Write Amazing Functional Analysis Documents for your SharePoint Projects
How to Write Amazing Functional Analysis Documents for your SharePoint Projects GSoft
 
Step into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesStep into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
 
Designing a great SharePoint Online intranet in Office 365
Designing a great SharePoint Online intranet in Office 365Designing a great SharePoint Online intranet in Office 365
Designing a great SharePoint Online intranet in Office 365Danny Burlage
 
Introduction to SharePoint Information Architecture
Introduction to SharePoint Information ArchitectureIntroduction to SharePoint Information Architecture
Introduction to SharePoint Information ArchitectureGregory Zelfond
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaTravis Isaacs
 

Viewers also liked (11)

Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewMake SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for Business
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing Portals
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
 
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
Real World SharePoint Branding - SharePoint Online - SharePoint Saturday Sess...
 
2016 Intranet and Digital Workplace Roadshow
2016 Intranet and Digital Workplace Roadshow2016 Intranet and Digital Workplace Roadshow
2016 Intranet and Digital Workplace Roadshow
 
How to Write Amazing Functional Analysis Documents for your SharePoint Projects
How to Write Amazing Functional Analysis Documents for your SharePoint Projects How to Write Amazing Functional Analysis Documents for your SharePoint Projects
How to Write Amazing Functional Analysis Documents for your SharePoint Projects
 
Step into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniquesStep into the SharePoint branding world, tools and techniques
Step into the SharePoint branding world, tools and techniques
 
Designing a great SharePoint Online intranet in Office 365
Designing a great SharePoint Online intranet in Office 365Designing a great SharePoint Online intranet in Office 365
Designing a great SharePoint Online intranet in Office 365
 
Introduction to SharePoint Information Architecture
Introduction to SharePoint Information ArchitectureIntroduction to SharePoint Information Architecture
Introduction to SharePoint Information Architecture
 
Keynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninjaKeynote Kung-Fu: How to wireframe like a ninja
Keynote Kung-Fu: How to wireframe like a ninja
 

Recently uploaded

Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 

Recently uploaded (20)

Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 

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
  • 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
  • 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