SlideShare a Scribd company logo
1 of 40
SharePointintersection
Create Engaging Branding SharePoint Portals
and Plan for Content
Cathy Dew
catpaint1@live.com
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

2

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Introduction
 Gather Requirements









What kind of site

Scenario – CatDragged In Corporation
Organize the Site
Determine Content Needs
Design your Site
Develop
Engage Users

3

© DEVintersection. All rights reserved.
http://www.DEVintersection.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

5

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Poll Questions
 Do you currently have an intranet?
 Do you visit the homepage of your intranet?
 Do you participate in any Social Networks?

7

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Scenario – CatDragged In Corp
 The Company has the following Business Units












CatDragged In

Accounting
Administrative/Executive
Human Resources
IT
Manufacturing
Project Management Office
Quality Assurance
Research and Development
Sales and Marketing
Shipping

9

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Organizing, Managing, and Content

Developing the Plan
Organizing Chaos
 Determine the Site Structure



Questions of Content and Site Templates/Site Collections
Will it be Organizational, Functional or a Mix of Both

12

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Site Map
 CatDragged In decided to go in an Organizational Site Map with a few extra
bonus Sites that fall outside a Department
 Questions to ask:




How do your users typically find information?
How do your users typically work, who do they work with on a daily basis?

13

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
CatDragged In Site Map
 Mix of Collaboration and Publishing Site Templates
 Also has a combination of Organizational Based Sites and Specialty Sites
Home

Accounting

IT

Admin

PMO

Manufacturing

QA

HR

Sales and Marketing

R&D

14

Coffee Lounge

Shipping

University

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Navigation Needs
 Determine if you need more than just the SharePoint Navigation



Breadcrumb Navigation
Footer Navigation

 Ask the right questions about Navigation and make decisions based off
talking to End Users not just management
 Card Sorting can be a useful tool for determining Navigation

15

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
But What About the Content
 What is it that you want to put on the main pages?









News
Announcements
FAQs
Letter from the President
HR Information
Tips and Tricks
Events

16

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Who will Manage Content
 Centralized or Decentralized Management?



IT Staff will manage all is Centralized
Departments will manage their own is Decentralized

 Advantages to Decentralized




Content is Updated more Frequently
Content stays relevant to the time frame
Less overhead on IT Staff

 Disadvantages to Decentralized



Must live in the same Site Collection (unless you use a 3rd Party tool)
Training must be performed for Content Owners

17

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Where Does My Content Live?
 Determining the Content Locations is especially important for things like
Rollup Lists and Announcements.




Did you create more than one Site Collection for database size purposes
or security concerns?
Do you want it in a team site, or in a section of the main intranet, typically
publishing pages?

18

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

19

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Web Parts for Displaying Content









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

20

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

21

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Time to Design the Site

Ready, Set, Go
Develop a User Experience Plan

23

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Design Methods
 Wireframes are a great tool for separating Design and Function – start
with a basic SP site and customize from there

24

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Design Methods
 Evaluate Your Designs for Functionality and Content – Not Design

25

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Wireframe Tools
 Balsamiq



SharePoint 2013 Team Site Template from Flucidity
http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiqmock-up-template/

 Visio
 Adobe Creative Suite

26

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

27

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Determine Deployment Plan
 Solution



Sandboxed for Office 365
Visual Studio Full Trust for On Premises

 Manual Application



SPD
Browser

28

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

29

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

30

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Design Mockup Sample

31

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

32

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Branded Site

33

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Branded Site

34

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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

35

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Plan Adoption Activities

Understand Your Users
Always Know the Implications
 Each User Experience Decision has Implications and Ramifications in a
SharePoint Environment




Navigation consistency
Permissions
Site Template

37

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
User Adoption Activity Samples





Scavenger Hunts
Rewards
Searches
Attend Susan Hanley’s User Adoption Session tomorrow morning.

38

© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Demo

Demo Title
Subtitle
Questions?
Don’t forget to enter your evaluation
of this session using EventBoard!

Thank you!

More Related Content

What's hot

Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extendedD'arce Hess
 
Fulfilling the promise of Responsive Design with SharePoint 2013
Fulfilling the promise of Responsive Design with SharePoint 2013Fulfilling the promise of Responsive Design with SharePoint 2013
Fulfilling the promise of Responsive Design with SharePoint 2013Justin Sypek
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile RevolutionD'arce Hess
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutionsThomas Daly
 
SPSVB 1 7-2012 - getting started with share point branding
SPSVB 1 7-2012 - getting started with share point brandingSPSVB 1 7-2012 - getting started with share point branding
SPSVB 1 7-2012 - getting started with share point brandingThomas Daly
 
Intro to design_manager
Intro to design_managerIntro to design_manager
Intro to design_managerD'arce Hess
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your WayD'arce Hess
 
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEnhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEric Overfield
 
Responsive Design & SharePoint - Is it right for you?
Responsive Design & SharePoint - Is it right for you?Responsive Design & SharePoint - Is it right for you?
Responsive Design & SharePoint - Is it right for you?D'arce Hess
 
Getting Started with SharePoint Branding
Getting Started with SharePoint BrandingGetting Started with SharePoint Branding
Getting Started with SharePoint BrandingThomas Daly
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
 
sptc_presentation
sptc_presentationsptc_presentation
sptc_presentationD'arce Hess
 
SharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePointSharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePointEric Overfield
 
Introduction to Branding SharePoint
Introduction to Branding SharePointIntroduction to Branding SharePoint
Introduction to Branding SharePointK.Mohamed Faizal
 
Intro to Design Manager
Intro to Design ManagerIntro to Design Manager
Intro to Design ManagerD'arce Hess
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile RevolutionD'arce Hess
 
The 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePointThe 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePointEric Overfield
 
Branding Modern SharePoint
Branding Modern SharePointBranding Modern SharePoint
Branding Modern SharePointEric Overfield
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for BeginnersD'arce Hess
 

What's hot (20)

Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extended
 
Branding 101
Branding 101Branding 101
Branding 101
 
Fulfilling the promise of Responsive Design with SharePoint 2013
Fulfilling the promise of Responsive Design with SharePoint 2013Fulfilling the promise of Responsive Design with SharePoint 2013
Fulfilling the promise of Responsive Design with SharePoint 2013
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile Revolution
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutions
 
SPSVB 1 7-2012 - getting started with share point branding
SPSVB 1 7-2012 - getting started with share point brandingSPSVB 1 7-2012 - getting started with share point branding
SPSVB 1 7-2012 - getting started with share point branding
 
Intro to design_manager
Intro to design_managerIntro to design_manager
Intro to design_manager
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 
Enhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web DesignEnhance SharePoint 2013 with Responsive Web Design
Enhance SharePoint 2013 with Responsive Web Design
 
Responsive Design & SharePoint - Is it right for you?
Responsive Design & SharePoint - Is it right for you?Responsive Design & SharePoint - Is it right for you?
Responsive Design & SharePoint - Is it right for you?
 
Getting Started with SharePoint Branding
Getting Started with SharePoint BrandingGetting Started with SharePoint Branding
Getting Started with SharePoint Branding
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
sptc_presentation
sptc_presentationsptc_presentation
sptc_presentation
 
SharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePointSharePoint 2013 Design manager – from HTML to SharePoint
SharePoint 2013 Design manager – from HTML to SharePoint
 
Introduction to Branding SharePoint
Introduction to Branding SharePointIntroduction to Branding SharePoint
Introduction to Branding SharePoint
 
Intro to Design Manager
Intro to Design ManagerIntro to Design Manager
Intro to Design Manager
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile Revolution
 
The 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePointThe 2013 Design Manager - From HTML to SharePoint
The 2013 Design Manager - From HTML to SharePoint
 
Branding Modern SharePoint
Branding Modern SharePointBranding Modern SharePoint
Branding Modern SharePoint
 
Bootstrap for Beginners
Bootstrap for BeginnersBootstrap for Beginners
Bootstrap for Beginners
 

Viewers also liked

31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshots31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshotsDigital Workplace Group
 
Creating engaging web experiences with SharePoint
Creating engaging web experiences with SharePointCreating engaging web experiences with SharePoint
Creating engaging web experiences with SharePointIntergen
 
What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013Flucidity
 
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
 
10 Innovative Intranet designs in 10 minutes
10 Innovative Intranet designs in 10 minutes10 Innovative Intranet designs in 10 minutes
10 Innovative Intranet designs in 10 minutesRebecca Rodgers
 

Viewers also liked (6)

31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshots31 intranet homepage design examples, with screenshots
31 intranet homepage design examples, with screenshots
 
Creating engaging web experiences with SharePoint
Creating engaging web experiences with SharePointCreating engaging web experiences with SharePoint
Creating engaging web experiences with SharePoint
 
What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013What's New in Branding SharePoint 2013
What's New in Branding SharePoint 2013
 
Theory work.
Theory work.Theory work.
Theory work.
 
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
 
10 Innovative Intranet designs in 10 minutes
10 Innovative Intranet designs in 10 minutes10 Innovative Intranet designs in 10 minutes
10 Innovative Intranet designs in 10 minutes
 

Similar to Create Engaging Branded SharePoint Portals and Plan for Content

Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingStacy Deere
 
Power User functionality in SharePoint 2013 - SP Intersection
Power User functionality in SharePoint 2013 - SP IntersectionPower User functionality in SharePoint 2013 - SP Intersection
Power User functionality in SharePoint 2013 - SP IntersectionAsif Rehmani
 
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas InfotechKeyideas Infotech Private Limited
 
Creating a Powerful Website Presence through WordPress and Blogging
Creating a Powerful Website Presence through WordPress and BloggingCreating a Powerful Website Presence through WordPress and Blogging
Creating a Powerful Website Presence through WordPress and BloggingMTECH Internet Marketing
 
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
 
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Drupal Camp Delhi
 
Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101Kanwal Khipple
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxacademicjfurio
 
TechOut_Generalized Workflow
TechOut_Generalized WorkflowTechOut_Generalized Workflow
TechOut_Generalized WorkflowKabeed Mansur
 
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docxASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docxgalerussel59292
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingStu King
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great websiteDr. Taher Ghazal
 
What's New in Progress Sitefinity 9.2 Webinar
What's New in Progress Sitefinity 9.2 WebinarWhat's New in Progress Sitefinity 9.2 Webinar
What's New in Progress Sitefinity 9.2 WebinarProgress® Sitefinity™
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThomas Daly
 
SharePoint Governance: From Chaos to Success in 10 Steps
SharePoint Governance: From Chaos to Success in 10 StepsSharePoint Governance: From Chaos to Success in 10 Steps
SharePoint Governance: From Chaos to Success in 10 StepsJoel Oleson
 

Similar to Create Engaging Branded SharePoint Portals and Plan for Content (20)

Good vs Evil SharePoint Customizing
Good vs Evil SharePoint CustomizingGood vs Evil SharePoint Customizing
Good vs Evil SharePoint Customizing
 
Power User functionality in SharePoint 2013 - SP Intersection
Power User functionality in SharePoint 2013 - SP IntersectionPower User functionality in SharePoint 2013 - SP Intersection
Power User functionality in SharePoint 2013 - SP Intersection
 
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
 
Creating a Powerful Website Presence through WordPress and Blogging
Creating a Powerful Website Presence through WordPress and BloggingCreating a Powerful Website Presence through WordPress and Blogging
Creating a Powerful Website Presence through WordPress and Blogging
 
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
 
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
 
What is a website builder
What is a website builderWhat is a website builder
What is a website builder
 
Guide to Planning Your Next Web Project
Guide to Planning Your Next Web ProjectGuide to Planning Your Next Web Project
Guide to Planning Your Next Web Project
 
Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101Introducing Communication Sites for Communicators #spfestchi #CM101
Introducing Communication Sites for Communicators #spfestchi #CM101
 
Divi Theme Expert
Divi Theme ExpertDivi Theme Expert
Divi Theme Expert
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptx
 
TechOut_Generalized Workflow
TechOut_Generalized WorkflowTechOut_Generalized Workflow
TechOut_Generalized Workflow
 
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docxASSESSMENT BRIEF COURSE Bachelor of Business  Bachel.docx
ASSESSMENT BRIEF COURSE Bachelor of Business Bachel.docx
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
 
How to make a great website
How to make a great websiteHow to make a great website
How to make a great website
 
Website development process
Website development process Website development process
Website development process
 
What's New in Progress Sitefinity 9.2 Webinar
What's New in Progress Sitefinity 9.2 WebinarWhat's New in Progress Sitefinity 9.2 Webinar
What's New in Progress Sitefinity 9.2 Webinar
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with Bootstrap
 
SharePoint Governance: From Chaos to Success in 10 Steps
SharePoint Governance: From Chaos to Success in 10 StepsSharePoint Governance: From Chaos to Success in 10 Steps
SharePoint Governance: From Chaos to Success in 10 Steps
 
12 Phases of Web Development Life Cycle
12 Phases of Web Development Life Cycle12 Phases of Web Development Life Cycle
12 Phases of Web Development Life Cycle
 

Recently uploaded

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Recently uploaded (20)

Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

Create Engaging Branded SharePoint Portals and Plan for Content

  • 1. SharePointintersection Create Engaging Branding SharePoint Portals and Plan for Content Cathy Dew catpaint1@live.com
  • 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 2 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 3. Introduction  Gather Requirements        What kind of site Scenario – CatDragged In Corporation Organize the Site Determine Content Needs Design your Site Develop Engage Users 3 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 5. 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 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 6. 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 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 7. Poll Questions  Do you currently have an intranet?  Do you visit the homepage of your intranet?  Do you participate in any Social Networks? 7 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 8. 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 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 9. Scenario – CatDragged In Corp  The Company has the following Business Units           CatDragged In Accounting Administrative/Executive Human Resources IT Manufacturing Project Management Office Quality Assurance Research and Development Sales and Marketing Shipping 9 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 10. 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 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 11. Organizing, Managing, and Content Developing the Plan
  • 12. Organizing Chaos  Determine the Site Structure   Questions of Content and Site Templates/Site Collections Will it be Organizational, Functional or a Mix of Both 12 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 13. Site Map  CatDragged In decided to go in an Organizational Site Map with a few extra bonus Sites that fall outside a Department  Questions to ask:   How do your users typically find information? How do your users typically work, who do they work with on a daily basis? 13 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 14. CatDragged In Site Map  Mix of Collaboration and Publishing Site Templates  Also has a combination of Organizational Based Sites and Specialty Sites Home Accounting IT Admin PMO Manufacturing QA HR Sales and Marketing R&D 14 Coffee Lounge Shipping University © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 15. Navigation Needs  Determine if you need more than just the SharePoint Navigation   Breadcrumb Navigation Footer Navigation  Ask the right questions about Navigation and make decisions based off talking to End Users not just management  Card Sorting can be a useful tool for determining Navigation 15 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 16. But What About the Content  What is it that you want to put on the main pages?        News Announcements FAQs Letter from the President HR Information Tips and Tricks Events 16 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 17. Who will Manage Content  Centralized or Decentralized Management?   IT Staff will manage all is Centralized Departments will manage their own is Decentralized  Advantages to Decentralized    Content is Updated more Frequently Content stays relevant to the time frame Less overhead on IT Staff  Disadvantages to Decentralized   Must live in the same Site Collection (unless you use a 3rd Party tool) Training must be performed for Content Owners 17 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 18. Where Does My Content Live?  Determining the Content Locations is especially important for things like Rollup Lists and Announcements.   Did you create more than one Site Collection for database size purposes or security concerns? Do you want it in a team site, or in a section of the main intranet, typically publishing pages? 18 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 19. 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 19 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 20. Web Parts for Displaying Content         Video/Media Document Libraries Content by Search Web Part Content Editor Wiki Style Pages Calendars Announcements Yammer 20 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 21. 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 21 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 22. Time to Design the Site Ready, Set, Go
  • 23. Develop a User Experience Plan 23 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 24. Design Methods  Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there 24 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 25. Design Methods  Evaluate Your Designs for Functionality and Content – Not Design 25 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 26. Wireframe Tools  Balsamiq   SharePoint 2013 Team Site Template from Flucidity http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiqmock-up-template/  Visio  Adobe Creative Suite 26 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 27. 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 27 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 28. Determine Deployment Plan  Solution   Sandboxed for Office 365 Visual Studio Full Trust for On Premises  Manual Application   SPD Browser 28 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 29. 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 29 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 30. 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 30 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 31. Design Mockup Sample 31 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 32. 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 32 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 33. Branded Site 33 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 34. Branded Site 34 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 35. 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 35 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 37. Always Know the Implications  Each User Experience Decision has Implications and Ramifications in a SharePoint Environment    Navigation consistency Permissions Site Template 37 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 38. User Adoption Activity Samples     Scavenger Hunts Rewards Searches Attend Susan Hanley’s User Adoption Session tomorrow morning. 38 © DEVintersection. All rights reserved. http://www.DEVintersection.com
  • 40. Questions? Don’t forget to enter your evaluation of this session using EventBoard! Thank you!