LOOK BOOK

SharePoint

Get inspired.
Discover the modern
experiences you can
build with SharePoint
in Office 365.
aka.ms/sharepointlookbook
 Intranet homepage
Your intranet homepage is the place where people in your
organization can get informed, get inspired, and discover
news and resources.

2
 NEWS AND RESOURCES

Intranet homepage Features Webparts used

News and resources are at the heart of this Header background Countdown timer
attractive intranet homepage. It uses a News Custom logo COMING SOON
Events - Compact layout
carousel layout to show large, scrollable
Section background File viewer - PowerPoint presentation
images, plus web parts to show images, events,
files, and more. Footer 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

SITE HEADER
EVENTS
World time

COUNTDOWN
TIMER

NEWS

QUICK LINKS

FILE VIEWER

NEWS

HIGHLIGHTED
CONTENT

WORLD WEATHER HIGHLIGHTED

CLOCK CONTENT
STOCKS

SITES

3
 SOCIAL AND PERSONALIZED

Intranet homepage Features Webparts used

Put the power of your content, people and Header background Events - Compact layout
information in easy reach of everyone in your Custom logo COMING SOON
Group Calendar - Office 365 group calendar
organization. Use a distributed news system
Section background Highlighted Content - Library, card view
and a variety of web parts to highlight what’s
happening in your organization as well as Footer Image - Text overlay
events and social conversations. Instagram CUSTOM WEB PART

News - Carousel, top story layouts

Quick links - List layout, icons
WEATHER

Sites - Card layout

SITE HEADER
QUICK LINKS
Twitter - Light theme, dividers displayed
Weather - Custom location
SITES

Yammer - Group feed

NEWS HIGHLIGHTED
NEWS CONTENT
HIGHLIGHTED
CONTENT

IMAGE
CALENDAR

TEXT IMAGE

EVENTS

IMAGE YAMMER

TWITTER FOOTER
CUSTOM WEB PART

4
 COMPELLING AND HIGHLY VISUAL

Intranet homepage Features Webparts used

Highly visual and attention-grabbing, this Header background Embed - Adobe XD prototype
example shows the power and versatility of Custom logo COMING SOON
Events - Compact layout
the Hero web part along with the File viewer,
Section background File viewer - Interactive .gltf file
Embed web part, and more.
Footer Hero - Full width, tile, custom image (gif)
Hero - 1 column, one layer
Image - 3 column layout, full-width image
News - Hub news layout
SITE HEADER

Quick links - Button layout

TEXT
Spacer - For custom padding
Text - Customized RTF to create hierarchy
EMBED

HERO
TEXT

FILE VIEWER
IMAGE

FILE VIEWER TEXT

NEWS EVENTS

QUICK LINK

HERO

IMAGE

FOOTER

TEXT

5
 Hub sites
Organize 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.

6
 MARKETING

Hub site Features Webparts used

SharePoint Hubs let you organize your intranet Header background Embed - Adobe XD prototype
and drive consistency. In this Marketing hub Custom logo COMING SOON Events - Compact layout
site, the header, footer, and custom logo is
Footer Hero - Full width, tile layout
carried over to its associated sites.
Image - Full width
News - Hub news layout
Spacer - For custom padding
Text - Rich text format
HERO
SITE HEADER

HUB NAV

NEWS

EMBED

TEXT
EVENTS
TEXT

IMAGE

TEXT
FOOTER

TEXT

7
 HUMAN RESOURCES

Hub site Features Webparts used

Besides hub news, events, contacts and Custom logo COMING SOON Events - Compact layout
resources, this example of a Human Resources Footer File viewer - PowerPoint presentation
hub site features a custom PowerApp for time
Image - Full width, text overlay
off requests from employees.
News - Hub news layout
People - Compact view
PowerApp - Custom request off app
Quick links - Button layout, icons
SITE NAV

HUB NAV

NEWS

SUITE NAV

EVENTS

IMAGE

POWERAPP

FILE VIEWER QUICK LINKS FOOTER

PEOPLE

QUICK LINKS

8
 SALES

Hub site Features Webparts used

This Sales hub site makes it easy to discover Header background Events - Filmstrip layout
related content such as news and other site Custom logo COMING SOON
Highlighted content - Card layout
activities while demonstrating the common
Section background News - Hub news layout
navigation and branding that would carry
across the associated sites. Footer Quicklinks - Button layout, icons
Sites - Filmstrip layout

SITE NAV

HUB NAV

SUITE NAV

QUICK LINKS

EVENTS SITES

NEWS

ACTIVITY

FOOTER

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

10
 REGION SPECIFIC

Communication site Features Webparts used

Communicating out to your organization Header background Image - Full width, text overlay
can be done beautifully and effectively with Custom logo COMING SOON
News - Side by side layout
Communication sites for each region. This
Section background Spacer - For custom padding
example includes lots of visuals using Image
webparts and section backgrounds. Footer Image - 3 column, text overlay
Events - Filmstrip layout
People - Compact layout
Quick links - List view, icons

SITE NAV IMAGE

SUITE NAV

NEWS

IMAGE

QUICK LINKS
IMAGE

FOOTER
PEOPLE

IMAGE EVENTS

11
 BRAND

Communication site Features Webparts used

Communicating and reinforcing your brand Header background Hero - Layer layout
in a highly visual way is the goal of this Section background Image - 3 column, 2/3rds column
communication site. It uses a Hero web part
Footer News - Hub News layout
in a layered layout plus section backgrounds,
images, and news. Quick links - Button layout
Spacer - For custom padding
Text - Customized RTF to create hierarchy
SITE NAV
SUITE NAV

HERO

TEXT

QUICK LINKS

IMAGE

TEXT

NEWS
TEXT

IMAGE
FOOTER
QUICK LINKS
IMAGE

TEXT

12
 ONE PAGE

Communication site Features Webparts used

Create a focused training site on a single page Footer Bing maps - Custom location, road view
that doesn’t distract by leading users away with Events - Filmstrip layout
off-page navigation. This example also uses
Hero - Tile layout
a Bing maps web part to provide up-to-date
location information. Image - Text overlay
People - Descriptive layout
Quick links - Button layout, icons

SUITE NAV
SITE NAV
Spacer - For custom padding
HERO
Text - 2/3 column copy block

QUICK LINKS

HERO

PEOPLE

TEXT

IMAGE

IMAGE

EVENTS
IMAGE

FOOTER

TEXT

BING MAPS

13
 Team sites
A 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.

14
 HUB CONNECTED

Team site Features Webparts used

Associate your team site to a hub site, and get Header background Document library - Site library, size small
a consistent theme and design. This team site Custom logo COMING SOON
Group calendar - Office 365 group calendar
also uses the distributed new system, a team
Section background Hero - Tile, Layer layouts
calendar, and a document library.
Footer News - List , side by side layouts
Planner - Status and member charts
Quicklinks - Tiles layout, small icon
SITE HEADER
Site activity - 1 column layout
HUB NAV
Spacer - For custom padding
NEWS
Text - Customized RTF for section titles
SUITE NAV DOCUMENT
LIBRARY
TEXT
HERO

CALENDAR

SITE NAV NEWS

QUICK LINKS

HERO

PLANNER

ACTIVITY

TEXT
PLANNER

15
 PROJECT FOCUSED

Team site Features Webparts used

This team site is designed to focus on a specific Header background Countdown timer
project. It uses a Countdown web part to Section background Document library - Site library, large
generate excitement as the project launch date
Events - Compact layout
approaches along with news, events, and more.
Group calendar - Office 365 group calendar
Image - 1/3 column
News - Top story layout
Planner - Status and member charts
IMAGE
Quick links - Button layout, 2 lines
SITE HEADER
COUNTDOWN
TIMER

SUITE NAV
QUICK LINKS

SITE NAV
EVENTS
NEWS

CALENDAR

DOCUMENT PLANNER
LIBRARY

TEXT

PLANNER

16
 MEET THE TEAM

Team site Features Webparts used

Introduce your team with photographs and Header background Image - Custom circle headshot .pngs
bios, along with contact information created Section background Text - Customized RTF to create hierarchy
using a Quick links web part in a button layout.
Quick links - Button layout, custom image

PAGE HEADER

SITE HEADER

SUITE NAV TEXT QUICK LINKS

IMAGE
IMAGE

SITE NAV

IMAGE

TEXT
QUICK LINKS BRUNO

TEXT

IMAGE

TEXT

17
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