LOOK BOOK

SharePoint

Get inspired. Discover the modern experiences you can build with SharePoint in Office 365.aka.ms/sharepointlookbook

2

Intranet homepageYour intranet homepage is the place where people in your organization can get informed, get inspired, and discover news and resources.

3

Webparts used

Countdown timer

Events - Compact layout

File viewer - PowerPoint presentation

News - Carousel, Top story, List layouts

Highlighted content - Recent docs, list view

Quick links - Button layout, descriptions

Sites - Cards layout

Stock Information AVAILABLE VIA PNP

Weather - Custom location

World time

NEWS AND RESOURCES

SITE HEADER

NEWS

NEWS

WORLDCLOCK

WEATHER

STOCKS

EVENTS

COUNTDOWNTIMER

QUICK LINKS

FILE VIEWER

HIGHLIGHTEDCONTENT

HIGHLIGHTEDCONTENT

SITES

Intranet homepageNews and resources are at the heart of this attractive intranet homepage. It uses a News carousel layout to show large, scrollable images, plus web parts to show images, events, files, and more.

Features

Header background

Custom logo COMING SOON

Section background

Footer

4

Webparts used

Events - Compact layout

Group Calendar - Office 365 group calendar

Highlighted Content - Library, card view

Image - Text overlay

Instagram CUSTOM WEB PART

News - Carousel, top story layouts

Quick links - List layout, icons

Sites - Card layout

Twitter - Light theme, dividers displayed

Weather - Custom location

Yammer - Group feed

SOCIAL AND PERSONALIZED

Intranet homepagePut the power of your content, people and information in easy reach of everyone in your organization. Use a distributed news system and a variety of web parts to highlight what’s happening in your organization as well as events and social conversations.

Features

Header background

Custom logo COMING SOON

Section background

Footer

SITE HEADER

NEWSNEWS

CALENDAR

WEATHER

QUICK LINKS

SITES

HIGHLIGHTEDCONTENT

HIGHLIGHTEDCONTENT

TEXT

IMAGE

IMAGE

IMAGE

EVENTS

TWITTER

YAMMER

FOOTER

CUSTOM WEB PART

5

Intranet homepageHighly visual and attention-grabbing, this example shows the power and versatility of the Hero web part along with the File viewer, Embed web part, and more.

COMPELLING AND HIGHLY VISUAL

Features

Header background

Custom logo COMING SOON

Section background

Footer

Webparts used

Embed - Adobe XD prototype

Events - Compact layout

File viewer - Interactive .gltf file

Hero - Full width, tile, custom image (gif)

Hero - 1 column, one layer

Image - 3 column layout, full-width image

News - Hub news layout

Quick links - Button layout

Spacer - For custom padding

Text - Customized RTF to create hierarchy

SITE HEADER

HERO

HERO

TEXT

TEXT

TEXT

TEXT

EMBED

FILE VIEWER

FILE VIEWER

QUICK LINK

IMAGE

IMAGE

NEWS EVENTS

FOOTER

6

Hub sitesOrganize your intranet with hub sites. Connect related sites to roll up content and activity, and to drive consistent branding and navigation. And because you can re-associate sites, your intranet can respond and adapt to changes in your organization.

7

HUB NAV

SITE HEADERHERO

NEWS

EVENTS

EMBED

TEXT

TEXT

TEXT

TEXT

IMAGE

FOOTER

Hub siteSharePoint Hubs let you organize your intranet and drive consistency. In this Marketing hub site, the header, footer, and custom logo is carried over to its associated sites.

MARKETING

Webparts used

Embed - Adobe XD prototype

Events - Compact layout

Hero - Full width, tile layout

Image - Full width

News - Hub news layout

Spacer - For custom padding

Text - Rich text format

Features

Header background

Custom logo COMING SOON

Footer

8

Hub siteBesides hub news, events, contacts and resources, this example of a Human Resources hub site features a custom PowerApp for time off requests from employees.

HUMAN RESOURCES

Features

Custom logo COMING SOON

Footer

Webparts used

Events - Compact layout

File viewer - PowerPoint presentation

Image - Full width, text overlay

News - Hub news layout

People - Compact view

PowerApp - Custom request off app

Quick links - Button layout, icons

SUITE NAV

HUB NAV

SITE NAV

NEWS

EVENTS

FILE VIEWER

IMAGE

QUICK LINKS

QUICK LINKS

POWERAPP

PEOPLEFOOTER

9

Hub siteThis Sales hub site makes it easy to discover related content such as news and other site activities while demonstrating the common navigation and branding that would carry across the associated sites.

SALES

Features

Header background

Custom logo COMING SOON

Section background

Footer

Webparts used

Events - Filmstrip layout

Highlighted content - Card layout

News - Hub news layout

Quicklinks - Button layout, icons

Sites - Filmstrip layout

ACTIVITY

SUITE NAV

HUB NAV

SITE NAV

NEWS

EVENTS

QUICK LINKS

SITES

FOOTER

10

Communication sitesInform and engage people across your organization. Create visually stunning and natively-mobile pages to share vision, news, information and resources

11

Communication siteCommunicating out to your organization can be done beautifully and effectively with Communication sites for each region. This example includes lots of visuals using Image webparts and section backgrounds.

REGION SPECIFIC

Features

Header background

Custom logo COMING SOON

Section background

Footer

Webparts used

Image - Full width, text overlay

News - Side by side layout

Spacer - For custom padding

Image - 3 column, text overlay

Events - Filmstrip layout

People - Compact layout

Quick links - List view, icons

SUITE NAV SITE NAV IMAGE

IMAGE

IMAGE

IMAGE

NEWS

EVENTS

QUICK LINKS

PEOPLE FOOTER

12

Communication siteCommunicating and reinforcing your brand in a highly visual way is the goal of this communication site. It uses a Hero web part in a layered layout plus section backgrounds, images, and news.

BRAND

Webparts used

Hero - Layer layout

Image - 3 column, 2/3rds column

News - Hub News layout

Quick links - Button layout

Spacer - For custom padding

Text - Customized RTF to create hierarchy

Features

Header background

Section background

Footer

SUITE NAV

SITE NAV

TEXT

HERO

NEWS

QUICK LINKS

IMAGE

TEXT

TEXT

TEXT

QUICK LINKS

IMAGE

IMAGE FOOTER

13

Communication siteCreate a focused training site on a single page that doesn’t distract by leading users away with off-page navigation. This example also uses a Bing maps web part to provide up-to-date location information.

ONE PAGE

Webparts used

Bing maps - Custom location, road view

Events - Filmstrip layout

Hero - Tile layout

Image - Text overlay

People - Descriptive layout

Quick links - Button layout, icons

Spacer - For custom padding

Text - 2/3 column copy block

Features

Footer

SUITE NAVHERO

SITE NAV

HERO

TEXT

QUICK LINKS

PEOPLE

IMAGE

IMAGE

IMAGE

EVENTS

BING MAPS

TEXT

FOOTER

14

Team sitesA team site is designed for collaboration. Work together with any group–inside or outside your organization. Share files, news and data. Customize your site with apps that power teamwork.

15

Team siteAssociate your team site to a hub site, and get a consistent theme and design. This team site also uses the distributed new system, a team calendar, and a document library.

HUB CONNECTED

Webparts used

Document library - Site library, size small

Group calendar - Office 365 group calendar

Hero - Tile, Layer layouts

News - List , side by side layouts

Planner - Status and member charts

Quicklinks - Tiles layout, small icon

Site activity - 1 column layout

Spacer - For custom padding

Text - Customized RTF for section titles

Features

Header background

Custom logo COMING SOON

Section background

Footer

SUITE NAV

HUB NAV

SITE HEADER

TEXT

TEXTPLANNER

PLANNER

ACTIVITY

SITE NAV

HERO

HERO

NEWS

NEWS

QUICK LINKS

CALENDAR

DOCUMENTLIBRARY

16

Team siteThis team site is designed to focus on a specific project. It uses a Countdown web part to generate excitement as the project launch date approaches along with news, events, and more.

PROJECT FOCUSED

Webparts used

Countdown timer

Document library - Site library, large

Events - Compact layout

Group calendar - Office 365 group calendar

Image - 1/3 column

News - Top story layout

Planner - Status and member charts

Quick links - Button layout, 2 lines

Features

Header background

Section background

SUITE NAV

SITE HEADER

SITE NAV

NEWS

IMAGE

COUNTDOWNTIMER

QUICK LINKS

CALENDAR

EVENTS

TEXT

PLANNER

PLANNERDOCUMENTLIBRARY

17

Team siteIntroduce your team with photographs and bios, along with contact information created using a Quick links web part in a button layout.

MEET THE TEAM

Webparts used

Image - Custom circle headshot .pngs

Text - Customized RTF to create hierarchy

Quick links - Button layout, custom image

Features

Header background

Section background

SUITE NAV

SITE HEADER

SITE NAV

PAGE HEADER

IMAGE

TEXT

TEXT

TEXT

TEXT

IMAGE

IMAGE

IMAGE

BRUNO

QUICK LINKS

QUICK LINKS

SharePoint design guidance

Design beautiful and performant sites, pages, and web parts with SharePoint in Office 365.Inspiration and advice for site owners, authors, developers and designers on creating beautiful, accessible sites, pages, web parts and apps.

Get the most our of SharePoint sites and pages, learn about customization and setting up sites for success.

Leverage the power of Office UI Fabric and the SharePoint Framework to make it easy to get started quickly in creating your next web part.

aka.ms/spdesignguidance