Designing SharePoint Extended Headers

designing-sharepoint-extended-headers

So it turns out Extended Headers from SharePoint are a new favourite feature for me when designing and delivering Modern Intranets. This was a feature that was available through code changes and master page updates in SharePoint 2010 and classic experience, and it was something that was definitely missing on the latest platform, until now.

As I have recently been putting together a variety of differing corporate design samples, I thought that it would be a good idea to blog about some ideas of different styles that can be achieved within this space.

Before continuing it is important to understand that I am experienced working technically, and consulting, on SharePoint (and have done for many years), but only really utilise image manipulation software at a hobbyist level. So no art or digital marketing degree learning being displayed here! However, on the plus side I would hope that this can showcase that anyone can create their own stylish designs with a little bit of trial and error.

Now on to the examples . . .

Image Sizing

All imagery is created based on the following sizes;

  • Extended header logo (square): 64x64px
  • Extended header logo (rectangle): 300px x 64px
  • Background image: 1680 x 96px

Plain Colour

When choosing a colour for a website I will likely be utilising what is already made available either within a clients brand guidelines or from their existing external websites. This provides me with the options when creating a Modern Theme via the Microsoft Fluent UI Theme Designer;

Option 1: Generate a theme using a single primary colour, and accept the differing shades provided by the Theme Designer.

Option 2: Complete option 1, then modify the specific Primary Colour Attribute to allow for a two colour effect.

Within all examples I have utilised Option 2 and have used dark orange and dark blue (apologies to any colour experts who may disagree with the naming of these!), that allows me to have two different colours surrounding the Extended Header Section.

The availability of the Extended Header, allows for another colour or tone (black/white) to be introduced, through simply creating an image to the right size and scale that is filled with the selected colour.

I always look to Google to assist with the introduction of additional colours, if designing a site from scratch. A simple search of the applicable hex colour code, in this case #c36b00 provide a number of sites that can advise on additional colours to help generate a theme based on colour wheel theories. This site is an example; #c36b00 hex color (colorhexa.com) and provides a few alternate colour combinations.

Within the examples below, you can see that the use of bold colour creates a bright and engaging header, but can also become a little too much unless best practice colour design is followed. However, introducing a tone like White can still create an attractive extended header, and allow for the two tone approach to remain intact.

As each site requires its own imagery to be uploaded as an Extended Header, an approach could be taken to utilise colour to define location within an Intranet e.g. departmental colours.

No alt text provided for this image
No alt text provided for this image
No alt text provided for this image
No alt text provided for this image

Patterns and Shapes

Another option is to create a patterned background through the use of differing shapes. These can either be created through purchase of an existing patterned image or through the creation of one by utilising shape and colour.

The “Bubble” example was created through the use of filled and outlined circles, of differing sizes – these were then scattered across the banner in no particular order. The circles were also placed slightly outside of the image on occasions to give the impression that they would continue past their perimeter. This could work with different kinds of standard shapes, multiple shapes and/or abstract shapes.

No alt text provided for this image

The “Diagonal Stripe” example was a simple recolouring of a black and white pattern, to allow for alternating colours. Imagery like this could also be rotated to change the angle of the lines.

No alt text provided for this image

The “Diamond” example was initially going to be similar to the “Bubble” (and still could be made in that style), however I liked them being aligned and alternating (filled vs outlined). A simple copy and paste of filled and outlined shapes aligned against my selected background colour provided this quick to design header. Once again other shapes could be used in this fashion.

No alt text provided for this image

The final pattern example is a little more abstract, and comes from an available background image. A Google search for images that are “Large”, defined as desktop wallpapers and available via Creative Commons work best. When copying this image, I had it set to the max width of 1680px and then was able to move the image up and down (as the height was much greater than 96px) which gave me multiple different effects, allowing for one image to produce multiple banners. As all SharePoint Sites required their own Extended Header to be uploaded, then there is the possibility of having each sites image being slightly different if using this approach.

No alt text provided for this image

Silhouettes & Opacity

My next set of headers were put together through the use of layering silhouette images against my chosen background colour.

The “Sky Line” example joins together a few different images (London, Dubai and New York) to produce a custom cityscape that appears to grow out of the dark blue navigation bar. This could be adjusted to fill the banner width, be centralised or start from the left with the logo on the right – so once again many options are available. This style of banner could definitely be used to represent a global organisation, or could use a different skyline for different location sites.

No alt text provided for this image

The “Branches” example uses silhouettes once again, but treats these a little bit more like the shapes and patterns that were demonstrated earlier. These begin to grow from outside of the image perimeter. In this example the layers are at 25% opacity, which makes them subtle.

No alt text provided for this image
No alt text provided for this image

Silhouettes could be made of all sorts of shapes or objects, so could be a very easy approach to bring your brand into your design e.g. electrical wiring, construction materials/vehicles or scientific DNA strands etc…

Full Photography

A full photograph appears to be the simplest form of extended header to use, however this is not the case. Due to the limited height of the banner, it is very difficult to scale an image and select the correct area of it to create an interesting header. During a lot of my attempts it was difficult to visualise what the actual image was meant to be, and the impact of the photo was lost as you would end up seeing only limited part e.g. the tips of a tree.

In the examples below I have used a black & white photo (simply saturated within an image manipulation tool) as well as a coloured photo, so the difference can be seen.

No alt text provided for this image
No alt text provided for this image

There is nothing wrong with a full photo banner, but SharePoint allows for a number of other ways to display imagery on the site in a larger and more attractive fashion. Therefore, I would not anticipate using photography in this area frequently, but that is a matter of opinion.

Partial Photography

An area where I believe images do work well, is when they are put together with another design. Through the use of layering within an image manipulation tool, you are able to show parts of images amongst your selected colour theme.

The “Birds” example makes use of the aforementioned “Diagonal Stripe” banner, but has had 2 strips cut from the image in multiple locations. This provides an area to display different imagery which would relate to an organisations brand or vertical. In this scenario multiple photographs of birds have been used, that actually enable other colours to be placed in the banner – I now have blacks, reds, blues, yellows, greens and much more through photography. Perhaps each section could display a specific product that your organisation sells e.g. Car Models.

No alt text provided for this image

The next couple of examples uses the same premise, with elements of a pattern (in this case the “Diamond” banner) being cut away to expose an image in the background. This differs slightly as it combines the use of a full photo as opposed to multiple images.

In this style I have been able to give users a glimpse of a sunset or the sea. I also felt that these worked well as the images selected brought through differing shades of the core colour, so I had the orange of the sunset or the blue of the ocean.

No alt text provided for this image
No alt text provided for this image

Banner Slicing

A final set of banners that were created look as if they have had a slice removed from them. This has then provided space for a logo, without it impacting, or being impacted by, other patterns/images that are to be used.

The designs were created through a simple layering of shapes, sizes and rotated as necessary. Then a recolouring of each half of the banner provides the required effect. In the first example below the use of a triangle provides our diagonal cut, versus the second example that uses a circle to provide a curved cut out. Abstract shapes would also work if required.

No alt text provided for this image
No alt text provided for this image

The next set of examples use the same diagonal cut, but illustrate how photography or patterns could sit alongside the logo. In this case the logo sits in lots of white space so that it is easily readable, but the impact of a well designed banner is not lost.

No alt text provided for this image
No alt text provided for this image

Conclusion

To conclude, the Extended Header is a simple element of SharePoint to configure but provides endless opportunities to add some additional flair to your Intranet. The creation of these images also only require limited knowledge of image manipulation tools to achieve, however if you are lucky enough to have in house designers then they could look even better!

The header is the first part of a SharePoint Site that is seen, and will usually remain for all connected sites in an Intranet (sites associated to a Hub site), so it is important to take the time to make this interesting, attractive and engaging. This could be through design or through dynamically making updates. How would the site look if it used a sunny banner in summer and a snowy banner in winter?

Finally for those who are interested; at the time of writing GIFs would work within this banner until the page was refreshed. A similar issue happened when the Extended Header was first released, so I am hopeful that animated headers will be available in the near future (I hope Microsoft are reading this!).

Please reach out if you have any questions.

For further details about The Hub then please click the following link: THE HUB INTRANET and why not reach out to us for a live demonstration.

Please contact us to discuss how we can help you in your next step in your IT & Microsoft 365 journey.