View
3
Download
0
Category
Preview:
Citation preview
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
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
Recommended