Transcription
LOOK BOOKSharePointGet inspired.Discover the modernexperiences you canbuild with SharePointin Office 365.aka.ms/sharepointlookbook
Intranet homepageYour intranet homepage is the place where people in yourorganization can get informed, get inspired, and discovernews and resources.2
NEWS AND RESOURCESIntranet homepageFeaturesNews and resources are at the heart of thisattractive intranet homepage. It uses a Newscarousel layout to show large, scrollableimages, plus web parts to show images, events,files, and more.Header backgroundWebparts usedCustom logoDEC 2018Events - Compact layoutCOMING SOONSection backgroundFooterCountdown timerCOMING SOONFile viewer - PowerPoint presentationCOMING SOONNews - Carousel, Top story, List layoutsCOMING SOONHighlighted content - Recent docs, list viewQuick links - Button layout, descriptionsSites - Cards layoutStock InformationAVAILABLE VIA PNPWeather - Custom locationWorld timeEVENTSSITE HEADERJAN 2019COUNTDOWNTIMERNEWSQUICK LINKSFILE IGHTEDCONTENTSTOCKSSITES3
SOCIAL AND PERSONALIZEDIntranet homepageFeaturesPut the power of your content, people andinformation in easy reach of everyone in yourorganization. Use a distributed news systemand a variety of web parts to highlight what’shappening in your organization as well asevents and social conversations.Header backgroundWebparts usedCustom logoEvents - Compact layoutGroup Calendar - Office 365 group calendarCOMING SOONSection backgroundFooterCOMING SOONCOMING SOONHighlighted Content - Library, card viewImage - Text overlayCOMING SOONInstagramCUSTOM WEB PARTNews - Carousel, top story layoutsQuick links - List layout, iconsWEATHERSites - Card layoutSITE HEADERTwitter - Light theme, dividers displayedQUICK LINKSWeather - Custom locationSITESYammer - Group CUSTOM WEB PART4
COMPELLING AND HIGHLY VISUALIntranet homepageFeaturesHighly visual and attention-grabbing, thisexample shows the power and versatility ofthe Hero web part along with the File viewer,Embed web part, and more.Header backgroundWebparts usedCustom logoEmbed - Adobe XD prototypeEvents - Compact layoutCOMING SOONSection backgroundFooterCOMING SOONCOMING SOONFile viewer - Interactive .gltf fileHero - Full width, tile, custom image (gif)COMING SOONHero - 1 column, one layerImage - 3 column layout, full-width imageNews - Hub news layoutSITE HEADERQuick links - Button layoutTEXTSpacer - For custom paddingText - Customized RTF to create hierarchyEMBEDHEROTEXTFILE VIEWERIMAGETEXTFILE VIEWERNEWSEVENTSQUICK LINKHEROIMAGEFOOTERTEXT5
Hub sitesOrganize your intranet with hub sites. Connect related sites toroll up content and activity, and to drive consistent brandingand navigation. And because you can re-associate sites, yourintranet can respond and adapt to changes in your organization.6
MARKETINGHub siteFeaturesSharePoint Hubs let you organize your intranetand drive consistency. In this Marketing hubsite, the header, footer, and custom logo iscarried over to its associated sites.Header backgroundCustom logoFooterWebparts usedCOMING SOONCOMING SOONEmbed - Adobe XD prototypeEvents - Compact layoutHero - Full width, tile layoutCOMING SOONImage - Full widthNews - Hub news layoutSpacer - For custom paddingText - Rich text formatSITE HEADERHEROHUB NAVNEWSEMBEDTEXTEVENTSTEXTIMAGETEXTTEXT7FOOTER
HUMAN RESOURCESHub siteFeaturesBesides hub news, events, contacts andresources, this example of a Human Resourceshub site features a custom PowerApp for timeoff requests from employees.Custom logoFooterWebparts usedEvents - Compact layoutCOMING SOONFile viewer - PowerPoint presentationCOMING SOONImage - Full width, text overlayNews - Hub news layoutPeople - Compact viewPowerApp - Custom request off appQuick links - Button layout, iconsSITE NAVHUB NAVNEWSSUITE NAVEVENTSIMAGEPOWERAPPFILE VIEWERQUICK LINKSFOOTERPEOPLEQUICK LINKS8
SALESHub siteFeaturesThis Sales hub site makes it easy to discoverrelated content such as news and other siteactivities while demonstrating the commonnavigation and branding that would carryacross the associated sites.Header backgroundCustom logoWebparts usedEvents - Filmstrip layoutHighlighted content - Card layoutCOMING SOONSection backgroundFooterCOMING SOONCOMING SOONNews - Hub news layoutQuicklinks - Button layout, iconsCOMING SOONSites - Filmstrip layoutSITE NAVHUB NAVSUITE NAVQUICK LINKSEVENTSSITESNEWSACTIVITYFOOTER9
Communication sitesInform and engage people across your organization. Createvisually stunning and natively-mobile pages to share vision,news, information and resources10
REGION SPECIFICCommunication siteFeaturesCommunicating out to your organizationcan be done beautifully and effectively withCommunication sites for each region. Thisexample includes lots of visuals using Imagewebparts and section backgrounds.Header backgroundWebparts usedCustom logoImage - Full width, text overlayNews - Side by side layoutCOMING SOONSection backgroundFooterCOMING SOONCOMING SOONSpacer - For custom paddingImage - 3 column, text overlayCOMING SOONEvents - Filmstrip layoutPeople - Compact layoutQuick links - List view, iconsSUITE NAVSITE NAVIMAGENEWSIMAGEQUICK LINKSIMAGEPEOPLEIMAGE11EVENTSFOOTER
BRANDCommunication siteFeaturesCommunicating and reinforcing your brandin a highly visual way is the goal of thiscommunication site. It uses a Hero web partin a layered layout plus section backgrounds,images, and news.Header backgroundCOMING SOONHero - Layer layoutSection backgroundCOMING SOONImage - 3 column, 2/3rds columnFooterWebparts usedNews - Hub News layoutCOMING SOONQuick links - Button layoutSpacer - For custom paddingText - Customized RTF to create hierarchySITE NAVSUITE NAVHEROTEXTQUICK LINKSIMAGETEXTNEWSTEXTIMAGEQUICK LINKSIMAGETEXT12FOOTER
ONE PAGECommunication siteFeaturesWebparts usedCreate a focused training site on a single pagethat doesn’t distract by leading users away withoff-page navigation. This example also usesa Bing maps web part to provide up-to-datelocation information.FooterBing maps - Custom location, road viewCOMING SOONEvents - Filmstrip layoutHero - Tile layoutImage - Text overlayPeople - Descriptive layoutQuick links - Button layout, iconsSpacer - For custom paddingSITE NAVSUITE NAVHEROText - 2/3 column copy blockQUICK BING MAPS13
Team sitesA team site is designed for collaboration. Work together withany group–inside or outside your organization. Share files, newsand data. Customize your site with apps that power teamwork.14
HUB CONNECTEDTeam siteFeaturesAssociate your team site to a hub site, and geta consistent theme and design. This team sitealso uses the distributed new system, a teamcalendar, and a document library.Header backgroundCustom logoWebparts usedCOMING SOONFooterGroup calendar - Office 365 group calendarCOMING SOONSection backgroundDocument library - Site library, size smallCOMING SOONHero - Tile, Layer layoutsNews - List , side by side layoutsCOMING SOONPlanner - Status and member chartsQuicklinks - Tiles layout, small iconSITE HEADERSite activity - 1 column layoutHUB NAVSpacer - For custom paddingNEWSSUITE NAVTEXTText - Customized RTF for section titlesDOCUMENTLIBRARYHEROCALENDARNEWSSITE NAVQUICK LINKSHEROPLANNERACTIVITYTEXT15PLANNER
PROJECT FOCUSEDTeam siteFeaturesThis team site is designed to focus on a specificproject. It uses a Countdown web part togenerate excitement as the project launch dateapproaches along with news, events, and more.Header backgroundCOMING SOONCountdown timerSection backgroundCOMING SOONDocument library - Site library, largeWebparts usedDEC 2018Events - Compact layoutGroup calendar - Office 365 group calendarImage - 1/3 columnNews - Top story layoutPlanner - Status and member chartsQuick links - Button layout, 2 linesIMAGESITE HEADERCOUNTDOWNTIMERSUITE NAVQUICK LINKSSITE NNER16
MEET THE TEAMTeam siteFeaturesIntroduce your team with photographs andbios, along with contact information createdusing a Quick links web part in a button layout.Header backgroundCOMING SOONImage - Custom circle headshot .pngsSection backgroundCOMING SOONText - Customized RTF to create hierarchyWebparts usedQuick links - Button layout, custom imagePAGE HEADERSITE HEADERSUITE NAVTEXTQUICK LINKSIMAGEIMAGESITE NAVIMAGETEXTBRUNOQUICK LINKSTEXTIMAGETEXT17
SharePoint design guidanceDesign beautiful and performant sites,pages, and web parts with SharePointin Office 365.Inspiration and advice for site owners, authors, developers and designerson creating beautiful, accessible sites, pages, web parts and apps.Get the most our of SharePoint sites and pages, learn aboutcustomization and setting up sites for success.Leverage the power of Office UI Fabric and the SharePoint Framework tomake it easy to get started quickly in creating your next web part.aka.ms/spdesignguidance
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
