LOOK BOOK SharePoint

1 LOOK BOOKS harePointGet inspired. Discover the modern experiences you can build with SharePoint in Office homepageYour intranet homepage is the place where people in your organization can get informed, get inspired, and discover news and usedCountdown timer DEC 2018 Events - Compact layoutFile viewer - PowerPoint presentationNews - Carousel, Top story, List layoutsHighlighted content - Recent docs, list viewQuick links - Button layout, descriptionsSites - Cards layoutStock Information AVAILABLE VIA PNPW eather - Custom locationWorld time JAN 2019 NEWS AND RESOURCESSITE HEADERNEWSNEWSWORLDCLOCKWEATHERSTOCKSEVE NTSCOUNTDOWNTIMERQUICK LINKSFILE VIEWERHIGHLIGHTEDCONTENTHIGHLIGHTEDCONTE NTSITESI ntranet 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 background COMING SOONC ustom logo COMING SOONS ection background COMING SOONF ooter COMING SOON4 Webparts usedEvents - Compact layoutGroup Calendar - Office 365 group calendarHighlighted Content - Library, card viewImage - Text overlayInstagram CUSTOM WEB PARTNews - Carousel, top story layoutsQuick links - List layout, iconsSites - Card layoutTwitter - Light theme, dividers displayedWeather - Custom locationYammer - Group feedSOCIAL AND PERSONALIZEDI ntranet homepagePut the power of your content, people and information in easy reach of everyone in your organization.

2 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. FeaturesHeader background COMING SOONC ustom logo COMING SOONS ection background COMING SOONF ooter COMING SOONSITE HEADERNEWSNEWSCALENDARWEATHERQUICK LINKSSITESHIGHLIGHTEDCONTENTHIGHLIGHTEDC ONTENTTEXTIMAGEIMAGEIMAGEEVENTSTWITTERYA MMERFOOTERCUSTOM WEB PART5 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 AND HIGHLY VISUALF eaturesHeader background COMING SOONC ustom logo COMING SOONS ection background COMING SOONF ooter COMING SOONW ebparts usedEmbed - Adobe XD prototypeEvents - Compact layoutFile viewer - Interactive .gltf fileHero - Full width, tile, custom image (gif)Hero - 1 column, one layerImage - 3 column layout, full-width imageNews - Hub news layoutQuick links - Button layoutSpacer - For custom paddingText - Customized RTF to create hierarchySITE HEADERHEROHEROTEXTTEXTTEXTTEXTEMBEDFILE VIEWERFILE VIEWERQUICK LINKIMAGEIMAGENEWSEVENTSFOOTER6 Hub sitesOrganize your intranet with hub sites.

3 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 NAVSITE HEADERHERONEWSEVENTSEMBEDTEXTTEXTTEXTTEX TIMAGEFOOTERHub 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 usedEmbed - Adobe XD prototypeEvents - Compact layoutHero - Full width, tile layoutImage - Full widthNews - Hub news layoutSpacer - For custom paddingText - Rich text formatFeaturesHeader background COMING SOONC ustom logo COMING SOONF ooter COMING SOON8 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 RESOURCESF eaturesCustom logo COMING SOONF ooter COMING SOONW ebparts usedEvents - Compact layoutFile viewer - PowerPoint presentationImage - Full width, text overlayNews - Hub news layoutPeople - Compact viewPowerApp - Custom request off appQuick links - Button layout.

4 IconsSUITE NAVHUB NAVSITE NAVNEWSEVENTSFILE VIEWERIMAGEQUICK LINKSQUICK LINKSPOWERAPPPEOPLEFOOTER9 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. SALESF eaturesHeader background COMING SOONC ustom logo COMING SOONS ection background COMING SOONF ooter COMING SOONW ebparts usedEvents - Filmstrip layoutHighlighted content - Card layoutNews - Hub news layoutQuicklinks - Button layout, iconsSites - Filmstrip layoutACTIVITYSUITE NAVHUB NAVSITE NAVNEWSEVENTSQUICK LINKSSITESFOOTER10 Communication sitesInform and engage people across your organization. Create visually stunning and natively-mobile pages to share vision, news, information and resources11 Communication siteCommunicating out to your organization can be done beautifully and effectively with Communication sites for each region.

5 This example includes lots of visuals using Image webparts and section SPECIFICF eaturesHeader background COMING SOONC ustom logo COMING SOONS ection background COMING SOONF ooter COMING SOONW ebparts usedImage - Full width, text overlayNews - Side by side layoutSpacer - For custom paddingImage - 3 column, text overlayEvents - Filmstrip layoutPeople - Compact layoutQuick links - List view, iconsSUITE NAVSITE NAVIMAGEIMAGEIMAGEIMAGENEWSEVENTSQUICK LINKSPEOPLEFOOTER12 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 usedHero - Layer layoutImage - 3 column, 2/3rds columnNews - Hub News layoutQuick links - Button layoutSpacer - For custom paddingText - Customized RTF to create hierarchyFeaturesHeader background COMING SOONS ection background COMING SOONF ooter COMING SOONSUITE NAVSITE NAVTEXTHERONEWSQUICK LINKSIMAGETEXTTEXTTEXTQUICK LINKSIMAGEIMAGEFOOTER13 Communication siteCreate a focused training site on a single page that doesn t distract by leading users away with off-page navigation.

6 This example also uses a Bing maps web part to provide up-to-date location PAGEW ebparts usedBing maps - Custom location, road viewEvents - Filmstrip layoutHero - Tile layoutImage - Text overlayPeople - Descriptive layoutQuick links - Button layout, iconsSpacer - For custom paddingText - 2/3 column copy blockFeaturesFooter COMING SOONSUITE NAVHEROSITE NAVHEROTEXTQUICK LINKSPEOPLEIMAGEIMAGEIMAGEEVENTSBING MAPSTEXTFOOTER14 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 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 CONNECTEDW ebparts usedDocument library - Site library, size smallGroup calendar - Office 365 group calendarHero - Tile, Layer layoutsNews - List , side by side layoutsPlanner - Status and member chartsQuicklinks - Tiles layout, small iconSite activity - 1 column layoutSpacer - For custom paddingText - Customized RTF for section titlesFeaturesHeader background COMING SOONC ustom logo COMING SOONS ection background COMING SOONF ooter COMING SOONSUITE NAVHUB NAVSITE HEADERTEXTTEXTPLANNERPLANNERACTIVITYSITE NAVHEROHERONEWSNEWSQUICK LINKSCALENDARDOCUMENTLIBRARY16 Team siteThis team site is designed to focus on a specific project.

7 It uses a Countdown web part to generate excitement as the project launch date approaches along with news, events, and FOCUSEDW ebparts usedCountdown timer DEC 2018 Document library - Site library, largeEvents - Compact layoutGroup calendar - Office 365 group calendarImage - 1/3 columnNews - Top story layoutPlanner - Status and member chartsQuick links - Button layout, 2 linesFeaturesHeader background COMING SOONS ection background COMING SOONSUITE NAVSITE HEADERSITE NAVNEWSIMAGECOUNTDOWNTIMERQUICK LINKSCALENDAREVENTSTEXTPLANNERPLANNERDOC UMENTLIBRARY17 Team siteIntroduce your team with photographs and bios, along with contact information created using a Quick links web part in a button THE TEAMW ebparts usedImage - Custom circle headshot .pngsText - Customized RTF to create hierarchyQuick links - Button layout, custom imageFeaturesHeader background COMING SOONS ection background COMING SOONSUITE NAVSITE HEADERSITE NAVPAGE HEADERIMAGETEXTTEXTTEXTTEXTIMAGEIMAGEIMA GEBRUNOQUICK LINKSQUICK LINKSS harePoint design guidanceDesign beautiful and performant sites, pages, and web parts with SharePoint in Office and advice for site owners, authors, developers and designers on creating beautiful, accessible sites, pages, web parts and the most our of SharePoint sites and pages, learn about customization and setting up sites for the power of Office UI Fabric and the SharePoint Framework to make it easy to get started quickly in creating your next web