As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.

1. Designing for the
Office 365
Experience
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. Agenda
 Office
365 Options for Branding
 Choosing Options
 Customizing Master Pages

Design Manager
 Custom
Composed Looks
 Create Packages
 Deploy and Apply

4. Public or Intranet?
 SPO



– Public Facing
Composed Looks
Custom Master/Custom CSS
Custom Page Layouts
 Intranet



Composed Look
Custom Master Page
Custom CSS

5. Picking the Right Option
 Composed
Looks
 Design Manager
 Custom Master/CSS/Page Layouts
 Device Channels

6. Composed Looks
 New





“Themes” for SharePoint 2013
Master Page
Color Palette
CSS
Font Palette
Background Image

7. Predefined Options

8. Customize a Predefined
Option

9. Create Your Own Custom
Look

10. Create Composed Look
 Must





HTML file
.Master file
Preview File
Spcolor file
Spfont file
 Can

have:
have:
Background Image

11. Create Custom Composed
Look

12. Where to put files

13. Custom Composed Look

14. Create Custom Everything
 Use
the Design Manager to import an HTML site
into SharePoint and apply it

15. Import HTML Site

16. Process to import HTML

17. Edit your Custom Master Page
 HTML

file editing
Through your desired
program
 Dreamweaver

in this demo
Map drive to your
machine
 Or
open Windows Explorer View

18. Master Page Gallery

19. Tips for Custom Master Page
 If
working with HTML file… Don’t touch the
.master file

Editing the .master will invalidate the HTML file

20. Make use of Preview Pages
 Create
a couple custom Preview Pages of
different site types.

Allows you to view your branding with content
from different sites and pages.

21. Sample Preview Page

22. HTML Code Snippets
•
•
•
Customize
the
Look/Colo
r/Behavior
Copy the
HTML
Snippet
Paste into
HTML file in
desired
location

23. Look for Additions to HTML
 On
import the Design Manager will insert some
<div>s to contain content and the head tags for
SharePoint


Ribbon
MainContentPlaceholder

24. Inserted HTML

25. Customize Master Page
In this demo we will add a code snippet to the
master page HTML file for our HTML converted file.
We will show the file in the Preview page.

26. Publish & Apply Custom
Master
 In
order to apply the custom designs you have
created with publishing and the design
manager

Publish all files
 CSS
 Page
Layouts
 Master Pages (HTML only)
 Apply

the Master Page from the List
Publishing only

27. Where to put files

28. Create Custom CSS
 Reference
a Custom CSS file with your Custom
Master Page

<link href="style.css" rel="stylesheet" type="text/css"
/>

29. 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;
}

30. How to apply in O365
 Solutions



are still the best
Apps can be created to house your branding
Visual Studio
Design Manager
 Package

your Design
Add to the Solution Gallery
 Apply
to Multiple Site Collections

31. Package Designs

32. Solution Gallery
 Upload
and Activate

33. Customize a Master & Page
Layout with Design Manager
& Tool of Your Choice
Master pages, custom CSS, code snippets and
more…

34. Thank you for
attending!
Cathy Dew, MVP
@catpaint1
www.sharepointcat.com