How to Design Beautiful Pages

Tips on how to design your SharePoint pages.

The design of your SharePoint pages can have a huge engagement impact on the end user. If a page is easy to navigate and you can find the information you need quickly, end users are more likely to return to the site when new content is created.

In SharePoint, you have flexibility over how you can structure your pages, giving you options to use multiple columns in your layout and the ability to apply section background to break up the page content. For more guidance on the structure of your page, see: Applying Structure to a SharePoint Page (perspicuity.co.uk)

To make beautiful pages in SharePoint, the key is to be as visual as possible and to use the interactive webparts where it makes sense to as these are always more engaging than static text.

Using imagery on your pages will draw attention to that information on your page, for example - instead of sharing a static launch date, you can make use of the countdown timer component which also gives you the ability to add a background image. (below).

ProductLaunch

When you are working on all the content on your page and you have the interactive components you want to use, we also like to avoid blocks of white space where possible so you should try and align your web parts to fit the page and to fit the content next to it.

For example, if you add a News Feed web part it can display up to eight news articles, this could push the page down and display a white space underneath other web parts on the page. In this example (below) you can see the Instagram web part now has a white space underneath.

InstagramWhiteSpace

In this example the number of articles can be changed to three to fit alongside the Instagram web part or the Instagram component could be increased. This ensures that content lines up nicely on your pages and you reduce the amount of white space. 

Its also a nice experience to manage your content from left to right, starting of with the key information you want to share in the top right left as this is where users eyes naturally begin. 

InstagramWhiteSpaceRemoved

There are many templates provided online by Microsoft that can be great for inspiring new ideas on how to map out and structure your page content or get in touch with the Perspicuity team if you want some support.