5/13/2018 12:00 AM BRK2393 What’s new and what's coming for branding and organizing your SharePoint sites Denise Trabona Principal Design Manager SharePoint.

5/13/ :00 AM BRK2393 What’s new and what's coming for branding and organizing your SharePoint sites Denise Trabona Principal Design Manager SharePoint Design Team Microsoft @DeniseTrabona Melissa Torres Senior Program Manager SharePoint Experiences Team Microsoft @meltorac © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Agenda   Objectives Session flow Branding and Theming SharePoint
5/13/ :00 AM Agenda Session flow Branding and Theming SharePoint hub sites Summary   Objectives Help you brand SharePoint modern pages, lists and libraries Help you organize across a set of sites and showcase content Learn the principles and best practices we employ Interested in branding on classic SP? Check out Ignite 2016 BRK3025 BrandingSPClassic © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Branding & Theming 5/13/2018 12:00 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What’s in a brand identity?
5/13/ :00 AM What’s in a brand identity? A toolbox of marketing and communication methods that help distinguish a company from competitors and create a lasting impression in the minds of customers. –Wikipedia © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Why is it important in your intranet?
5/13/ :00 AM Why is it important in your intranet? Mock in progress @Janet Consistently applied, these elements reinforce your brand Gives users confidence Creates authentic, authoritative and cohesive content Mock in progress @Janet © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

How will SharePoint help you integrate your brand?
5/13/ :00 AM How will SharePoint help you integrate your brand? Logos Navigation Theming (color & font) Page designs (content structure) Site designs & extensibility Mock in progress @Janet Consistent: Logo representation Navigation Page & site designs Theming © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Logos & Navigation 5/13/2018 12:00 AM

Three tiers of branding and navigation
5/13/ :00 AM Three tiers of branding and navigation Organization logo + nav Logo graphic + link Nav bar background color Set in 0365 Admin Center Hub logo + nav Logo graphic + link Nav bar background color 3 tiers of navigation Site logo + nav Logo graphic + link Hover card Navigation (either horizontal or left) © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM Theming Out of the box Custom from Change the look Custom during site creation © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Out-of-the-box theming
5/13/ :00 AM Out-of-the-box theming © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint theming: customer feedback
5/13/ :00 AM SharePoint theming: customer feedback What informed our direction: Customer survey 1:1 lab studies with site owners Discussions with SharePoint admins What we learned: Color, font, layout Polished & professional presentation Easy to apply and repeat Consistency is paramount “Theme, to me, refers to a design structure and color scheme that may (or may not) also convey a specific idea or purpose of a SharePoint site.” “It's important to make the site look polished and match company branding so people feel comfortable there and continue to want to use it.” “I think the included themes are a good start, but ... I wish there were a bigger selection of them. I wish they were more customizable, and could be saved, exported, and reused on other sites.” “Consistency to the corporate brand has been the driver both at this company and every large enterprise I've been part of.” © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint theming pillars
5/13/ :00 AM SharePoint theming pillars Professional Modern, organized, clean Showcases enterprise content Reflects industry or vertical © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM SharePoint theming pillars Professional On Rails Modern, organized, clean Showcases enterprise content Reflects industry or vertical Consistent & coherent application of brand elements Curated options for employees Works at various scopes © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM SharePoint theming pillars Professional On Rails Efficient and smart Modern, organized, clean Showcases enterprise content Reflects industry or vertical Consistent & coherent application of brand elements Curated options for employees Works at various scopes Provide the right themes during site provisioning Applies to all modern sites Mobile-ready © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM SharePoint theming pillars Professional On Rails Efficient and smart Accessible Modern, organized, clean Showcases enterprise content Reflects industry or vertical Consistent & coherent application of brand elements Curated options for employees Works at various scopes Provide the right themes during site provisioning Applies to all modern sites Mobile-ready Out-of-the-box themes meet the latest accessibility standards Guidelines for creating accessible custom themes © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Out-of-the-box themes 5/13/2018 12:00 AM

Out-of-box themes Great looking, accessible out-of-the box themes
5/13/ :00 AM Out-of-box themes Great looking, accessible out-of-the box themes 6 light themes, 2 dark themes Customize to any of 120 color combinations © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Out-of-the-box theming: primary colors
5/13/ :00 AM Out-of-the-box theming: primary colors Chosen from an accessible color palette 5 warm, 5 cool & 2 neutral selections Code Title Day Time BRK2241 Learn how to make SharePoint accessible and inclusive Today 4:30 pm © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Out-of-the-box theming: accent colors
5/13/ :00 AM Out-of-the-box theming: accent colors Analogous Complementary Neutral © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Additional Change the look updates
5/13/ :00 AM Additional Change the look updates Support for custom themes that represent your brand Ability to disable the out-of-the-box SharePoint themes © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint custom theming: variable looks
5/13/ :00 AM SharePoint custom theming: variable looks Medium information density Visual content display Liberal use of bold color palettes Full-bleed (edge-to-edge) color backgrounds Custom fonts © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM SharePoint custom theming: variable looks Lighter information density Highly visual content display Softer color palettes Theme-colored text & accents Tinted section backgrounds Custom fonts © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM SharePoint custom theming: variable looks Higher information density Detailed/data-rich content display Color in left nav More reserved use of color Custom fonts © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Applying custom themes to existing sites 5/13/2018 12:00 AM

Custom theming via Change the look
5/13/ :00 AM Custom theming via Change the look Support for custom themes unique to your brand Great looking, accessible custom themes Ability to disable the out-of-the-box SharePoint themes © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Custom theme builder tool
5/13/ :00 AM Custom theme builder tool New, easy-to-use tool to generate theme files for your organization Hosted on Fabric web site: Code Title Day Time BRK3354 Using custom themes and designs to standardize the creation of clean, functional SharePoint sites Tuesday 3:15pm – 4:00pm © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Page designs and themes with site designs & extensibility
5/13/ :00 AM Page designs and themes with site designs & extensibility © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Page designs (content structure)
5/13/ :00 AM Page designs (content structure) Code Title Day Time BRK3226 Create beautiful, fast, interactive pages in SharePoint: Deep dive with the product team Today 12:30 pm © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Site designs Microsoft Ignite 2016 5/13/2018 12:00 AM
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Applying custom themes to new sites via site designs
5/13/ :00 AM Demo Applying custom themes to new sites via site designs © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Custom theming via site design
5/13/ :00 AM Custom theming via site design Custom themes & more can be applied during site creation Set via a site design © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM Extensibility Themes will also be able to used beyond a site design package, and utilized by extensions Embedded PowerApp form Custom-themed web part © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint design documentation
5/13/ :00 AM SharePoint design documentation The design documentation provides context and design guidance so you can better: Customize SharePoint Design responsive web parts Use themes and colors Design for accessibility (coming soon) © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Fabric design documentation
5/13/ :00 AM Fabric design documentation Official front-end framework for building experiences that fit seamlessly into SharePoint and all of Office and Office365 Helpful resources and code for common components and styling Code Title Day Time BRK3227 Office UI Fabric behind the scenes: How open source is changing design and engineering in Office Today 4:30 pm © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint hub sites 5/13/2018 12:00 AM

Opportunity Customers want to organize sites into groupings that
5/13/ :00 AM Opportunity Benefits Giving Campaign Facilities Customers want to organize sites into groupings that Make it easier for users to discover and recall related content Apply common controls and branding Establish common admin policies HR Benefits planning Special Project New hires Rewards Student Research Senior Quests Travel Programs Comms Special interest Kids © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/ :00 AM team sites SharePoint hub sites hub site Brings together related team sites and communication sites Roll up of news and site activity Search across related sites for content Cross-site navigation Consistent look-and-feel across sites Admins create, site owners adopt and use communication sites © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Associating a site to a hub 5/13/2018 12:00 AM

Associating a site to a hub
5/13/ :00 AM Associating a site to a hub Site owner controlled Available via site information or site creation Works on all site templates Limited to only 1 hub Cross-site Navigation Displays on all modern pages Not editable on associated sites Theming Synced from the hub site Enforcement controlled by hub site owner © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Hub site News roll up View and create associated sites
5/13/ :00 AM Hub site News roll up News posts display source site Configuration options control what sites roll up View and create associated sites Displays list of associated sites Affordance to create sites automatically joined See activity from across the hub Graph insights show the most relevant activity Search across the hub Surfaces results of content just from the hub © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Creating hubs Hub creation is IT-controlled Hubs are scoped
5/13/ :00 AM Creating hubs Hub creation is IT-controlled Ensures hubs are meaningfully scoped Prevents proliferation of too many hubs Hubs are scoped Site owners only see hubs they’re allowed to join Supports approval process Hubs don’t nest © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Hub site: Setting it up 5/13/2018 12:00 AM

Demo Managed metadata 5/13/2018 12:00 AM

Setting up the hub site Make this a hub site! Hub site information
5/13/ :00 AM Setting up the hub site Make this a hub site! Any site can become a hub site Hub site information Hub site owner manages the hub’s settings such as enforcing the theme, requiring approval, etc. Cross-site navigation Hub logo represents the hub’s identity Up to 3 levels of curated nodes Works with managed metadata © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

A dynamic, ever-changing digital workplace
Microsoft Build 2017 5/13/ :00 AM Acquired sales Travel innovation Vendor agreements Customer connections Company-wide Legal portal Travel Programs Sales Quarterly reports Regional sales Cultural Eco Expense tracker Adventure Benefits planning Records center Big wins Customer Event planning Regional partner outreach Benefits Recognition & rewards New hires EMEA Policies HR EMEA sales Hub site Communication site Team site Partner solution Custom portal key © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

A dynamic, ever-changing digital workplace
Microsoft Build 2017 5/13/ :00 AM Acquired sales Travel innovation Vendor agreements Customer connections Company-wide Legal portal Travel Programs Regional sales Sales Quarterly reports Cultural Eco Expense tracker EMEA sales Adventure Benefits planning Records center Big wins Customer Event planning Regional partner outreach Benefits New hires EMEA Policies HR Recognition & rewards Hub site Communication site Team site Partner solution Custom portal key © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo Reorganizing your sites 5/13/2018 12:00 AM

SharePoint hub sites on the go
5/13/ :00 AM SharePoint hub sites on the go Available in the SharePoint Native Apps Fully responsive – everything works in mobile browsers © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Building blocks of the intranet
5/13/ :00 AM Building blocks of the intranet Hub sites Navigation Search Look-and-feel Rollup Team sites Communication sites Custom apps Publishing sites © Microsoft Corporation. All rights reserved.

Branding Hub sites 3 tiers of logos and navigation
5/13/ :00 AM Branding Hub sites 3 tiers of logos and navigation Theming that is professional, on rails, efficient & smart and accessible Page designs to provide unique content structure Page designs & theming can be part of a site design, and applied during site creation Links related sites Roll up of news and activity Search across related sites Cross-site navigation Consistent look-and-feel Admins create, site owners adopt and use Early 2018 © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Roadmap This week Late 2017 Q1-Q2 2018
Central gallery to host custom themes for entire organization PowerShell commands to manage and hide out-of-box themes Custom theme builder Late 2017 Accent colors Change the look panel updates Q1-Q2 2018 Section & header background colors Custom fonts SharePoint hub sites

Key topic breakouts below and the full listing of 70+ sessions at
Learn more Key topic breakouts below and the full listing of 70+ sessions at Code Title Day Time Pillar BRK3354 Using custom site themes and designs to standardize the creation of great looking, functional SharePoin sites Tuesday 3:15PM–4:00PM Extend and develop BRK3226 Create beautiful, fast, interactive pages in SharePoint: Deep dive with the product team Wednesday 12:30PM-1:45PM Inform & Engage People BRK2241 Learn how to make SharePoint accessible and inclusive 4:30PM-5:15PM BRK3227 Office UI Fabric behind the scenes: How open source is changing design and engineering in office BRK4031 Building the Modern SharePoint Experience: Best Practices from Microsoft for developing with SPFx Friday BRK2224 Transform business process with SharePoint, PowerApps, and Flow for biz apps, forms, and automation 10:45AM-12:00PM Transform Business Process

Please evaluate this session
Tech Ready 15 5/13/2018 Please evaluate this session From your Please expand notes window at bottom of slide and read. Then Delete this text box. PC or tablet: visit MyIgnite Phone: download and use the Microsoft Ignite mobile app Your input is important! © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Sneak Peek Prototype: Future of theming 5/13/2018 12:00 AM

Future of theming: Demo Recap
5/13/ :00 AM Future of theming: Demo Recap Callout key elements through the use of accent colors. Highlight different content through the use of shades and tints with color emphasis Choose from an assortment of curated, high quality fonts giving you countless ways to define your brand. © Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/13/2018 12:00 AM BRK2393 What’s new and what's coming for branding and organizing your SharePoint sites Denise Trabona Principal Design Manager SharePoint.

Similar presentations

Presentation on theme: "5/13/2018 12:00 AM BRK2393 What’s new and what's coming for branding and organizing your SharePoint sites Denise Trabona Principal Design Manager SharePoint."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

5/13/2018 12:00 AM BRK2393 What’s new and what's coming for branding and organizing your SharePoint sites Denise Trabona Principal Design Manager SharePoint.

Similar presentations

Presentation on theme: "5/13/2018 12:00 AM BRK2393 What’s new and what's coming for branding and organizing your SharePoint sites Denise Trabona Principal Design Manager SharePoint."— Presentation transcript:

Similar presentations

About project

Feedback