SharePoint LookBook

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


images, plus web parts to show images, events, File viewer - PowerPoint presentation

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



World time
EVENTS
SITE HEADER


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
SUITE NAV IMAGE





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



SITE NAV Spacer - For custom padding
SUITE NAV
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


Quick links - Button layout, 2 lines
IMAGE


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