SharePoint Modern Site Strategies: Designing Pages (Part 3)

Posted by Adam Krueger on January 3, 2019

Welcome to Part 3 (and the final part) of our blog post series where I’m going to provide an overview of 55360812_sSharePoint Modern site layouts and outline a strategy for building effective landing and content pages. In this post, we’re going to bring it all together and talk through each of the section layout options, explaining the benefit of each and giving sample use cases.

As a reminder, Part 1 gave a high-level overview of the platform. We charted the evolution from SharePoint Classic sites and outlined some key concepts for building pages in SharePoint Modern Sites.

In Part 2, we stepped back from the specifics of the platform and instead focused on the facets of an effective page design strategy. 

Using SharePoint Section Layouts
Let’s think through each of the section layouts, their benefits and shortcomings, along with section layoutsan example use case or two. There aren’t any hard-and-fast rules on which you should use where, so use the guide below to get your design strategy juices flowing.  

It's also important to consider that, because Modern Site webparts are responsive, they have different presentations depending on the width of their column., For example, you won’t want to use the hero web part in a 33% width column unless you’re comfortable with only utilizing its carousel view.

Full-width column

This first option is currently only available for communication sites. Your out-of-the-box webpart options are limited to an image or a hero (one of my favorite out-of-the-box web parts, by the way).

When to use: the full-width column is particularly useful for a page header or section break. Additionally, custom webparts like the message bar we developed can take advantage of the real estate.

When not to use: As mentioned above, you’re limited to a couple of out-of-the-box webparts currently. Any custom webparts developed for this section layout need to be able to size appropriately.

Usage Examples

  • One of those most obvious uses would be at the top of the page. A hero is a great way to highlight key content or announcements with the Hero web part.
    full width column

 

  • An image can be used to divide a longer landing page into various sections
  • As part of Withum’s intranet (OneWindow Workplace), we've developed a Message Bar that spans the top of the page, announcing to the user any urgent updates.

    Message Bar

One column

A single column serves as a great way to showcase your content.

When to use: either for the benefit of larger format content, like an image or video, or to spotlight key content or functionality.

When not to use: when content isn’t of primary importance or there is a benefit of maintaining proximity with supporting content or functionality.

Usage Examples:

  • Your recent or trending documents (using the Highlighted Content web part) could benefit from the full-width treatment.

    Single Column
  • A full-width link bar can function as your supplementary navigation while creating a break in your page content.
  • An important video or infographic could benefit from the visual prominence.
  • The Yammer webpart benefits from the width of a single column and sits nicely under your news and announcements, creating center for site communications.

One-third left/right column

The one-third column layout allows you to create a sense of primary and supporting content.

When to use: when you want to create a relationship between primary and supplementary content or when you want to create a “sidebar” for the page.

When not to use: when content elements are of equal importance.

Usage Examples: 

  • A large highlighted content web part on the left displays trending content across various document libraries, while a small Quick links web part links to key documents (balancing organic and procured content).
  • A People web part in a right sidebar can list your site's team members or owners.
  • A small image on the right or left along with a larger block of text is a great way to introduce your department site.
    using example

Two columns

The two-column layout gives equal prominence to both columns. This allows you to display complementary content in parallel.

When to use: when you have complementary elements of equal prominence or larger format supporting content.

When not to use: when you want to highlight the importance of key elements over supporting content.

Usage Examples:

  • Your department announcements live in the left column with department events in the right.
    two columns

  • Your Site Activity in the left column is accompanied by Recent documents in the right.

Three columns

Three columns offer maximum information density, meaning no content gets top billing but also no content benefits from a full-width layout.

When to use: when you have the need to show a maximum amount of content in a relatively condensed space or show multiple pieces of complimentary content. 

When not to use: when some of your content would benefit from a larger format or when there is a hierarchy of key and supporting content.

Usage Examples:

  • Multiple Quick Links webparts with different titles create a categorized or task-oriented supplementary navigation.
    three columns
  • Multiple Highlighted content webparts allow you to create a dashboard of site content consumption.
  • A hero webpart living alongside a news and events webpart functions as a showcase of your most important updates.
  • Training videos can be laid out in multiple columns under headers creating the sense of a curriculum.

Bringing It All Together
SharePoint Modern Sites are a powerful platform for communication and collaboration and Microsoft is constantly improving the experience of site administration and content consumption. With a working understanding of the platform and a basic page design strategy, your ability to create compelling landing and content pages will empower your intranet to be more usable, useful, and ultimately adoptable.

Have questions on SharePoint Modern Sites? Set up a time to chat with our experts - contact us today. 

Topics: Office 365

Adam Krueger

Adam Krueger is the UX Team Leader at Withum. He has over 12 years of UX design and front-end development experience. Adam is passionate about his role in creating highly functional, enjoyable business applications and advocating for user-centered design practices.

Leave a Comment: