SlideShare a Scribd company logo
1 of 47
Download to read offline
Make it Look Not
Like SharePoint
Cathy Dew
SPS Nashville
June 2015
Speaker Bio
Cathy Dew
 Consultant at Planet Technologies
 Graphic Designer, Consultant and SharePoint MVP
 Over 8 years of SharePoint
branding experience
 Author: SharePoint 2010: Six in One
 catpaint1 on Twitter
 www.sharepointcat.com
Agenda
 Design
 Develop
 Deploy
Create the Design
Question, Map, Illustrate
Define Use Cases
 Understand what the purpose is for the site
 Build Use Cases and Flow Patterns for these
 Work with Team Members
 Submit an Expense Report
 Get Up to Date Information and News
 Find People
Begin to Plan
 Start to sketch the requirements into a design
 Focus on Functionality and Content
 Understand what you need
Build Your Team
 Stakeholder
 Project Manager
 End User/Power User
 Designer
 Developer
 IT Pro
 QA
Define Your Options
 Design Manager
 Device Channels
 Responsive/Adaptive
 Hybrid
Understanding Navigation
 How many clicks is too many for your users?
 How will Users get around your sites?
 Top Navigation Fly Outs
 Custom Breadcrumbs
 Quick Launch
 Custom Navigation
 Search
Early Sketches
Figuring out flow of user
movement and Navigation
Design Methods
Wireframes are a great tool for separating Design
and Function – start with a basic SP site and
customize from there
Evaluate Your
Designs for
Functionality &
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
Axure
Home Page
Wireframe
Top Navigation with Drop
Downs
Define Custom
Solutions
Map out Functional and Layout
Requirements for Custom
Solutions
Requirement Creep
 Don’t forget that requirement creep is what we
are trying to get away from, but will always
happen to some extent.
 The more you gather, analyze and present the
easier it is to avoid this
 But don’t get stuck in constant requirement
gathering only cycle
Defining Design
Develop
Don’t be afraid, just jump in – Said the spider to the
fly
Creating Assets
 Custom Master Pages
 Responsive and Team
 Custom CSS Files
 Custom JavaScript Files
 Custom Apps
Master Pages
 Customizations that apply across all sites
Page Layouts
Edit your Custom Master Page
 HTML file editing
 Through your desired
program
 Tips: Map drive to your
machine
 Or open Windows
Explorer View
Master Page Gallery
Create Custom CSS
 Make a Huge Visual Impact with CSS
 Reference your CSS file with your Custom Master
 <SharePoint:CssRegistration Name="<%
$SPUrl:~sitecollection/Style Library/verisk/css/CustomBrand.css
%>" runat="server" after="SharepointCssFile"/>
Take it Further with CSS
 With the Color Palette you can use the palette
colors in your Custom CSS files
{
/* [ReplaceFont(themeFont:”title”)] */ font-family:
“Segoe UI Light”, “Segoe UI”, “Segoe”,
Tahoma,Helvetica,Arial,sans-serif;
/* [ReplaceColor(themeColor: “SiteTitle”)] */
color:#005050;
}
Unchain Your Designs
 SharePoint 2013 Supports CSS 3.0 and HTML 5
 You will see errors in SharePoint Designer
 Add Links in Master Page
 Add Link in CEWP, Alternate
CSS URLs
 Bootstrap and other Frameworks
can be applied
Responsive CSS Media Query
 Responsive Design can be achieved with CSS
Media Queries
 @media screen and (min-width: 1024px)
 Asks 2 questions of the browser
 Media type (screen)
 Query – in parenthesis feature
and value
Working with JavaScript
 Adding JavaScript and Jquery references can
extend your sites further
 JavaScript injection can help to customize even
further (think Suite Bar in O365)
JavaScript Locations
 To be accessible by all sites in the Site
Collection:
 Create a JavaScript library in the Style Library
 Create a JavaScript library in the Master Page
Gallery
 For use in a specific site
 Create a JavaScript library anywhere in the site
Reference JavaScript
 Custom App
 Script Editor Web Part
 Content Editor Web Part
 Custom Page Layout
 Custom Master Page
Deploy
Get in there darn cat…
Applying Branding
 Publishing Infrastructure
 Site Settings
 SharePoint Designer
 Good for Development
Environments
Simple Dev Application
 Publishing – Alternate CSS URL
 Sandboxed Solutions
 Design Manager Created
 SharePoint Designer Created
 Visual Studio Created
Solution Gallery
 Upload and Activate
Full Trust Solutions
 SharePoint 2013 On Premises
 Full Control of Files and Application
 Best Method still for On Premises
 Gives Greatest Control
Apps
 Create an App to Deploy Branding
 SharePoint 2013 On Premises or SharePoint Online
 Make use of Online Samples
https://github.com/OfficeDev/PnP/tree/dev/Samples/Branding.ApplyBranding
How Apps Work
Basic App Structure
Using Powershell
 Add and Install Solutions
add-spsolution (resolve-path .solutionname.wsp)
install-spsolution -identity [name of file
w/o suffix] -gac -webapplication [url of
web application]
Other Useful Powershell
Use Powershell to reset Master Page
Customizations to Default Master Pages
$w = get-spweb [http://your_site_url]
$w.MasterUrl = "/_catalogs/masterpage/seattle.master"
$w.CustomMasterUrl = "/_catalogs/masterpage/seattle.master"
$w.Update()
Customizing with Powershell
 Change the Word SharePoint in the Suite Bar to
your own Text
$webApp = Get-SPWebApplication http://urlhere
$webApp.SuiteBarBrandingElementHtml = “Your Text Goes
Here”
$webApp.Update()
*SharePoint 2013 On Premises Only
Future of Branding
 Microsoft is moving away from heavy UX
customizations
 CSS and JavaScript are the areas to invest in
 Designers are becoming Developers – Apps are
the future
 Office 365 – Constant Changes
 Plan for updates with new feature releases
 Plan for not getting new features if you do choose
to customize the master page
Questions
43 SharePoint Saturday Atlanta43 |SharePoint Saturday Atlanta
44 SharePoint Saturday Atlanta44 |SharePoint Saturday Atlanta
45 SharePoint Saturday Atlanta45 |SharePoint Saturday Atlanta
46 SharePoint Saturday Atlanta46 |SharePoint Saturday Atlanta
 5 Seasons Brewery (North)


directly in front of brewery
 See the SPSATL Website
for more info and directions
Join us for SharePint sponsored by
Thank you for
attending!
Cathy Dew, MVP
@catpaint1
www.sharepointcat.com

More Related Content

What's hot

Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your WayD'arce Hess
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile RevolutionD'arce Hess
 
Intro to design_manager
Intro to design_managerIntro to design_manager
Intro to design_managerD'arce Hess
 
sptc_presentation
sptc_presentationsptc_presentation
sptc_presentationD'arce Hess
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutionsThomas Daly
 
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
 
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
 
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
 
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
 
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
 
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
 
Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Stefan Bauer
 
Branding Modern SharePoint
Branding Modern SharePointBranding Modern SharePoint
Branding Modern SharePointEric Overfield
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013Thomas Daly
 
Intro to Design Manager
Intro to Design ManagerIntro to Design Manager
Intro to Design ManagerD'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
 
Introduction to Branding SharePoint
Introduction to Branding SharePointIntroduction to Branding SharePoint
Introduction to Branding SharePointK.Mohamed Faizal
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile RevolutionD'arce Hess
 

What's hot (20)

Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile Revolution
 
Intro to design_manager
Intro to design_managerIntro to design_manager
Intro to design_manager
 
sptc_presentation
sptc_presentationsptc_presentation
sptc_presentation
 
Developing branding solutions
Developing branding solutionsDeveloping branding solutions
Developing branding solutions
 
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
 
Branding 101
Branding 101Branding 101
Branding 101
 
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
 
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
 
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
 
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
 
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?
 
Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016Branding Deployment in Office 365 and SharePoint 2013/2016
Branding Deployment in Office 365 and SharePoint 2013/2016
 
Branding Modern SharePoint
Branding Modern SharePointBranding Modern SharePoint
Branding Modern SharePoint
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
 
Intro to Design Manager
Intro to Design ManagerIntro to Design Manager
Intro to Design Manager
 
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
 
Introduction to Branding SharePoint
Introduction to Branding SharePointIntroduction to Branding SharePoint
Introduction to Branding SharePoint
 
The Mobile Revolution
The Mobile RevolutionThe Mobile Revolution
The Mobile Revolution
 

Viewers also liked

Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaKanwal Khipple
 
IBM quarterly financials infobomb
IBM quarterly financials infobombIBM quarterly financials infobomb
IBM quarterly financials infobombMartin Hingley
 
How to use a SharePoint Team Site effectively for Collaboration
How to use a SharePoint Team Site effectively for CollaborationHow to use a SharePoint Team Site effectively for Collaboration
How to use a SharePoint Team Site effectively for CollaborationBenjamin Niaulin
 
SharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersWendy Neal
 
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims AuthenticationSharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims AuthenticationBrian Culver
 
How We Did It - GreatAmerica's Nontraditional Site Structure
How We Did It - GreatAmerica's Nontraditional Site StructureHow We Did It - GreatAmerica's Nontraditional Site Structure
How We Did It - GreatAmerica's Nontraditional Site StructureWendy Neal
 
Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...
Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...
Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...John Ferringer
 
Office 365 for IT Pros - SPS Michigan 2012
Office 365 for IT Pros - SPS Michigan 2012Office 365 for IT Pros - SPS Michigan 2012
Office 365 for IT Pros - SPS Michigan 2012John Ferringer
 
IndyPASS - Can SharePoint and SQL Server Find Wedded Bliss?
IndyPASS -  Can SharePoint and SQL Server Find Wedded Bliss?IndyPASS -  Can SharePoint and SQL Server Find Wedded Bliss?
IndyPASS - Can SharePoint and SQL Server Find Wedded Bliss?John Ferringer
 
After the Dust Settles - What to do with SharePoint Once You Go Live
After the Dust Settles  - What to do with SharePoint Once You Go LiveAfter the Dust Settles  - What to do with SharePoint Once You Go Live
After the Dust Settles - What to do with SharePoint Once You Go LiveJohn Ferringer
 
Ascension Health SharePoint Summit 2013 - Windows Server 2012 and PowerShell...
Ascension Health SharePoint Summit 2013 -  Windows Server 2012 and PowerShell...Ascension Health SharePoint Summit 2013 -  Windows Server 2012 and PowerShell...
Ascension Health SharePoint Summit 2013 - Windows Server 2012 and PowerShell...John Ferringer
 
SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...
SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...
SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...John Ferringer
 
SharePoint 2010 Team Site Overview
SharePoint 2010 Team Site OverviewSharePoint 2010 Team Site Overview
SharePoint 2010 Team Site OverviewIvor Davies
 
How to create user friendly, engaging share point sites (no coding needed!)
How to create user friendly, engaging share point sites (no coding needed!)How to create user friendly, engaging share point sites (no coding needed!)
How to create user friendly, engaging share point sites (no coding needed!)Wendy Neal
 
Wireframing and design short course
Wireframing and design short courseWireframing and design short course
Wireframing and design short coursecarishurd
 
Things you shouldn't do with SharePoint
Things you shouldn't do with SharePointThings you shouldn't do with SharePoint
Things you shouldn't do with SharePointPerttu Tolvanen
 
What The Wireframe?
What The Wireframe?What The Wireframe?
What The Wireframe?Jason Robb
 
Share point saturday edmonton 2016 designing team sites
Share point saturday edmonton 2016   designing team sitesShare point saturday edmonton 2016   designing team sites
Share point saturday edmonton 2016 designing team sitesMark Morris CBA CPM
 
Create your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsCreate your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsEric Overfield
 

Viewers also liked (19)

Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
 
IBM quarterly financials infobomb
IBM quarterly financials infobombIBM quarterly financials infobomb
IBM quarterly financials infobomb
 
How to use a SharePoint Team Site effectively for Collaboration
How to use a SharePoint Team Site effectively for CollaborationHow to use a SharePoint Team Site effectively for Collaboration
How to use a SharePoint Team Site effectively for Collaboration
 
SharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non Designers
 
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims AuthenticationSharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
SharePoint Saturday Houston: SharePoint 2010 Extranets & Claims Authentication
 
How We Did It - GreatAmerica's Nontraditional Site Structure
How We Did It - GreatAmerica's Nontraditional Site StructureHow We Did It - GreatAmerica's Nontraditional Site Structure
How We Did It - GreatAmerica's Nontraditional Site Structure
 
Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...
Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...
Everybody Lies: Troubleshooting SharePoint with House MD - SharePoint Saturda...
 
Office 365 for IT Pros - SPS Michigan 2012
Office 365 for IT Pros - SPS Michigan 2012Office 365 for IT Pros - SPS Michigan 2012
Office 365 for IT Pros - SPS Michigan 2012
 
IndyPASS - Can SharePoint and SQL Server Find Wedded Bliss?
IndyPASS -  Can SharePoint and SQL Server Find Wedded Bliss?IndyPASS -  Can SharePoint and SQL Server Find Wedded Bliss?
IndyPASS - Can SharePoint and SQL Server Find Wedded Bliss?
 
After the Dust Settles - What to do with SharePoint Once You Go Live
After the Dust Settles  - What to do with SharePoint Once You Go LiveAfter the Dust Settles  - What to do with SharePoint Once You Go Live
After the Dust Settles - What to do with SharePoint Once You Go Live
 
Ascension Health SharePoint Summit 2013 - Windows Server 2012 and PowerShell...
Ascension Health SharePoint Summit 2013 -  Windows Server 2012 and PowerShell...Ascension Health SharePoint Summit 2013 -  Windows Server 2012 and PowerShell...
Ascension Health SharePoint Summit 2013 - Windows Server 2012 and PowerShell...
 
SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...
SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...
SharePointCincy 2014: On-Premises, Office 365, or Dedicated Hosting - Which t...
 
SharePoint 2010 Team Site Overview
SharePoint 2010 Team Site OverviewSharePoint 2010 Team Site Overview
SharePoint 2010 Team Site Overview
 
How to create user friendly, engaging share point sites (no coding needed!)
How to create user friendly, engaging share point sites (no coding needed!)How to create user friendly, engaging share point sites (no coding needed!)
How to create user friendly, engaging share point sites (no coding needed!)
 
Wireframing and design short course
Wireframing and design short courseWireframing and design short course
Wireframing and design short course
 
Things you shouldn't do with SharePoint
Things you shouldn't do with SharePointThings you shouldn't do with SharePoint
Things you shouldn't do with SharePoint
 
What The Wireframe?
What The Wireframe?What The Wireframe?
What The Wireframe?
 
Share point saturday edmonton 2016 designing team sites
Share point saturday edmonton 2016   designing team sitesShare point saturday edmonton 2016   designing team sites
Share point saturday edmonton 2016 designing team sites
 
Create your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page LayoutsCreate your own SharePoint Master Pages and Page Layouts
Create your own SharePoint Master Pages and Page Layouts
 

Similar to Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew

Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013Thomas Daly
 
SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...
SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...
SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...Marc D Anderson
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Thomas Daly
 
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007Chandima Kulathilake
 
Schaeflein Dev409 Enterprise Branding Using Site Definitions
Schaeflein Dev409 Enterprise Branding Using Site DefinitionsSchaeflein Dev409 Enterprise Branding Using Site Definitions
Schaeflein Dev409 Enterprise Branding Using Site Definitionsmferraz
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Thomas Daly
 
Empowering Business Users with Flexible SharePoint Customization
Empowering Business Users with Flexible SharePoint Customization Empowering Business Users with Flexible SharePoint Customization
Empowering Business Users with Flexible SharePoint Customization D'arce Hess
 
Blooming SharePoint Design
Blooming SharePoint DesignBlooming SharePoint Design
Blooming SharePoint DesignKathy Hughes
 
Getting Started with Site Designs and Site Scripts - SPSChi
Getting Started with Site Designs and Site Scripts - SPSChiGetting Started with Site Designs and Site Scripts - SPSChi
Getting Started with Site Designs and Site Scripts - SPSChiDrew Madelung
 
SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016Sonja Madsen
 
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 Evan Mullins
 
Branding SharePoint 2013
Branding SharePoint 2013Branding SharePoint 2013
Branding SharePoint 2013NIFTIT
 
SPSNL18 New era of customizing site provisioning - Olli Jääskeläinen
SPSNL18 New era of customizing site provisioning - Olli JääskeläinenSPSNL18 New era of customizing site provisioning - Olli Jääskeläinen
SPSNL18 New era of customizing site provisioning - Olli JääskeläinenOlli Jääskeläinen
 
No Code Sharepoint Solutions
No Code Sharepoint SolutionsNo Code Sharepoint Solutions
No Code Sharepoint SolutionsChris Riley ☁
 
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts Knut Relbe-Moe [MVP, MCT]
 
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019Getting Started with Site Designs and Site Scripts - NACollabSummit 2019
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019Drew Madelung
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013Khoa Quach
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your WayD'arce Hess
 

Similar to Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew (20)

Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
 
SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...
SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...
SharePointFest Konferenz 2016 - Alternative Approaches to Solution Developmen...
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013
 
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
UX01 Customization Tour Of SharePoint - APAC Conference Sydney - 2007
 
Schaeflein Dev409 Enterprise Branding Using Site Definitions
Schaeflein Dev409 Enterprise Branding Using Site DefinitionsSchaeflein Dev409 Enterprise Branding Using Site Definitions
Schaeflein Dev409 Enterprise Branding Using Site Definitions
 
Developing Branding Solutions for 2013
Developing Branding Solutions for 2013Developing Branding Solutions for 2013
Developing Branding Solutions for 2013
 
Empowering Business Users with Flexible SharePoint Customization
Empowering Business Users with Flexible SharePoint Customization Empowering Business Users with Flexible SharePoint Customization
Empowering Business Users with Flexible SharePoint Customization
 
Blooming SharePoint Design
Blooming SharePoint DesignBlooming SharePoint Design
Blooming SharePoint Design
 
Getting Started with Site Designs and Site Scripts - SPSChi
Getting Started with Site Designs and Site Scripts - SPSChiGetting Started with Site Designs and Site Scripts - SPSChi
Getting Started with Site Designs and Site Scripts - SPSChi
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Web Designing
Web Designing Web Designing
Web Designing
 
SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016SharePoint Framework SPS Madrid 2016
SharePoint Framework SPS Madrid 2016
 
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017 So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
So, You Wanna Dev? Join the Team! - WordCamp Raleigh 2017
 
Branding SharePoint 2013
Branding SharePoint 2013Branding SharePoint 2013
Branding SharePoint 2013
 
SPSNL18 New era of customizing site provisioning - Olli Jääskeläinen
SPSNL18 New era of customizing site provisioning - Olli JääskeläinenSPSNL18 New era of customizing site provisioning - Olli Jääskeläinen
SPSNL18 New era of customizing site provisioning - Olli Jääskeläinen
 
No Code Sharepoint Solutions
No Code Sharepoint SolutionsNo Code Sharepoint Solutions
No Code Sharepoint Solutions
 
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
How to build a Project Hub with Hubsites and Sitedesign and Sitescripts
 
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019Getting Started with Site Designs and Site Scripts - NACollabSummit 2019
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 

Recently uploaded

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
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
 
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
 
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
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
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
 
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 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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Recently uploaded (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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
 
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™
 
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
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).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...
 
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 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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 

Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy Dew

  • 1. Make it Look Not Like SharePoint Cathy Dew SPS Nashville June 2015
  • 2. Speaker Bio Cathy Dew  Consultant at Planet Technologies  Graphic Designer, Consultant and SharePoint MVP  Over 8 years of SharePoint branding experience  Author: SharePoint 2010: Six in One  catpaint1 on Twitter  www.sharepointcat.com
  • 4. Create the Design Question, Map, Illustrate
  • 5. Define Use Cases  Understand what the purpose is for the site  Build Use Cases and Flow Patterns for these  Work with Team Members  Submit an Expense Report  Get Up to Date Information and News  Find People
  • 6. Begin to Plan  Start to sketch the requirements into a design  Focus on Functionality and Content  Understand what you need
  • 7. Build Your Team  Stakeholder  Project Manager  End User/Power User  Designer  Developer  IT Pro  QA
  • 8. Define Your Options  Design Manager  Device Channels  Responsive/Adaptive  Hybrid
  • 9. Understanding Navigation  How many clicks is too many for your users?  How will Users get around your sites?  Top Navigation Fly Outs  Custom Breadcrumbs  Quick Launch  Custom Navigation  Search
  • 10. Early Sketches Figuring out flow of user movement and Navigation
  • 11. Design Methods Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there Evaluate Your Designs for Functionality & Content – NOT Design
  • 12. 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 Axure
  • 14. Define Custom Solutions Map out Functional and Layout Requirements for Custom Solutions
  • 15. Requirement Creep  Don’t forget that requirement creep is what we are trying to get away from, but will always happen to some extent.  The more you gather, analyze and present the easier it is to avoid this  But don’t get stuck in constant requirement gathering only cycle
  • 17. Develop Don’t be afraid, just jump in – Said the spider to the fly
  • 18. Creating Assets  Custom Master Pages  Responsive and Team  Custom CSS Files  Custom JavaScript Files  Custom Apps
  • 19. Master Pages  Customizations that apply across all sites
  • 21. Edit your Custom Master Page  HTML file editing  Through your desired program  Tips: Map drive to your machine  Or open Windows Explorer View
  • 23. Create Custom CSS  Make a Huge Visual Impact with CSS  Reference your CSS file with your Custom Master  <SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/verisk/css/CustomBrand.css %>" runat="server" after="SharepointCssFile"/>
  • 24. Take it Further with CSS  With the Color Palette you can use the palette colors in your Custom CSS files { /* [ReplaceFont(themeFont:”title”)] */ font-family: “Segoe UI Light”, “Segoe UI”, “Segoe”, Tahoma,Helvetica,Arial,sans-serif; /* [ReplaceColor(themeColor: “SiteTitle”)] */ color:#005050; }
  • 25. Unchain Your Designs  SharePoint 2013 Supports CSS 3.0 and HTML 5  You will see errors in SharePoint Designer  Add Links in Master Page  Add Link in CEWP, Alternate CSS URLs  Bootstrap and other Frameworks can be applied
  • 26. Responsive CSS Media Query  Responsive Design can be achieved with CSS Media Queries  @media screen and (min-width: 1024px)  Asks 2 questions of the browser  Media type (screen)  Query – in parenthesis feature and value
  • 27. Working with JavaScript  Adding JavaScript and Jquery references can extend your sites further  JavaScript injection can help to customize even further (think Suite Bar in O365)
  • 28. JavaScript Locations  To be accessible by all sites in the Site Collection:  Create a JavaScript library in the Style Library  Create a JavaScript library in the Master Page Gallery  For use in a specific site  Create a JavaScript library anywhere in the site
  • 29. Reference JavaScript  Custom App  Script Editor Web Part  Content Editor Web Part  Custom Page Layout  Custom Master Page
  • 30. Deploy Get in there darn cat…
  • 31. Applying Branding  Publishing Infrastructure  Site Settings  SharePoint Designer  Good for Development Environments
  • 32. Simple Dev Application  Publishing – Alternate CSS URL  Sandboxed Solutions  Design Manager Created  SharePoint Designer Created  Visual Studio Created
  • 34. Full Trust Solutions  SharePoint 2013 On Premises  Full Control of Files and Application  Best Method still for On Premises  Gives Greatest Control
  • 35. Apps  Create an App to Deploy Branding  SharePoint 2013 On Premises or SharePoint Online  Make use of Online Samples https://github.com/OfficeDev/PnP/tree/dev/Samples/Branding.ApplyBranding
  • 38. Using Powershell  Add and Install Solutions add-spsolution (resolve-path .solutionname.wsp) install-spsolution -identity [name of file w/o suffix] -gac -webapplication [url of web application]
  • 39. Other Useful Powershell Use Powershell to reset Master Page Customizations to Default Master Pages $w = get-spweb [http://your_site_url] $w.MasterUrl = "/_catalogs/masterpage/seattle.master" $w.CustomMasterUrl = "/_catalogs/masterpage/seattle.master" $w.Update()
  • 40. Customizing with Powershell  Change the Word SharePoint in the Suite Bar to your own Text $webApp = Get-SPWebApplication http://urlhere $webApp.SuiteBarBrandingElementHtml = “Your Text Goes Here” $webApp.Update() *SharePoint 2013 On Premises Only
  • 41. Future of Branding  Microsoft is moving away from heavy UX customizations  CSS and JavaScript are the areas to invest in  Designers are becoming Developers – Apps are the future  Office 365 – Constant Changes  Plan for updates with new feature releases  Plan for not getting new features if you do choose to customize the master page
  • 43. 43 SharePoint Saturday Atlanta43 |SharePoint Saturday Atlanta
  • 44. 44 SharePoint Saturday Atlanta44 |SharePoint Saturday Atlanta
  • 45. 45 SharePoint Saturday Atlanta45 |SharePoint Saturday Atlanta
  • 46. 46 SharePoint Saturday Atlanta46 |SharePoint Saturday Atlanta  5 Seasons Brewery (North)   directly in front of brewery  See the SPSATL Website for more info and directions Join us for SharePint sponsored by
  • 47. Thank you for attending! Cathy Dew, MVP @catpaint1 www.sharepointcat.com