One of the big changes between classic SharePoint and Modern SharePoint’s is the approach and method used to brand sites.  There are two levels of branding, one easy approach for basic branding and a more advanced feature currently needing developer skills.

This wireframe shows the areas that can be customised in red. In this example I have included a mix of layouts, the top section has two column web-part zones (66%/33%) and the lower row is using 3 columns.

Change the Look

In SharePoint Online Modern Sites, click the Cog and choose ‘Change the Look’. From here you can choose from a list of predefined themes. The colour pallet can be adjusted and you have the ability to set the background colour of the title elements.

Logo and Title

Clicking the Cog icon and choosing “Site Information” allows you to change the logo and title of a site.

It should also be noted that if the SharePoint Site is a Hub Site, the theme from Change the Look and the Logo and Title will be inherited to any connected sites.

Web-parts

Many SharePoint web-parts include layout options to future refine your designs. For example:

Hero web-part layout options

News web-part layout options

Banner images

SharePoint pages including site pages, news and events include an optional banner image. SharePoint expects these images to be 16:9 to ensure the best auto scaling. This is important when rolling up content e.g. a news post image will auto scale when displayed in a rollup web part such as the news or highlighted content web-parts.

SPFx Application Customizer

Microsoft provides the ability to customise the header and footer areas of Modern SharePoint using the SharePoint Framework (SPFx). This approach also allows for custom CSS files that can over-ride the out of the box style sheet to do things like changing the web-part title styles.

The SharePoint Starter Kit provides examples of how to do this.

Inspiration

If you’re looking for design ideas, take a look at the Microsoft Ignite 2018 Modern SharePoint Look Book full of banding and layout examples.

Before you settle on a design, play with the web-parts and layouts. Microsoft provides a range of web-part and layout options that make it easy to create a visually appealing site. They also make it more difficult to create truly one off designs. Don’t try to fight it!