In this article you will find:
Purpose
This document establishes a shared understanding with partners of best
practices for branding and user-interface design of Microsoft 365 sites built
with LiveTiles Intranet Enterprise.
Part 1: Microsoft 365 Best Practices
LiveTiles recommends following the official Microsoft guidance for SPO branding
available at Branding guidance for SharePoint Online portals
Don’t
▪ Override branding of the Microsoft 365 suite bar
▪ Implement custom branding by using custom master pages
▪ Use poor quality iconography and imagery that impacts quality perception
Do
▪ Apply a custom Microsoft 365 organization theme in the M365 Admin Center
▪ Apply a custom SPO color scheme matching LiveTiles branding with SharePoint site theming
▪ Apply standard SharePoint site branding e.g. custom logo
▪ Create branding for Mega Menu, Everywhere panel in the Design & Branding module
▪ Use high quality iconography and imagery to improve quality perception
Part 2: Aesthetic Standards for LiveTiles Features
Once you have applied basic branding elements to your site and achieved a custom color palette with SharePoint site theming you are ready to brand LiveTiles elements and ensure that they align.
Covered in this guide:
▪ Mega Menu
▪ Everywhere panel
▪ Web part branding with custom CSS classes
▪ Iconography
Example of custom theme for out-of-the-box elements designed to work with
LiveTiles elements including the Mega
Menu and Everywhere panel
Mega Menu
▪ Use high quality PNG/SVG transparent iconography linking to site home
▪ Use appropriate mouse over highlight colors to ensure text is easily read
▪ Use appropriate font sizes for menu items at levels 1,2,3 and avoid excess blank space
Everywhere Panel
▪ Apply a panel and mouseover highlight color that fits well with the Mega Menu color
▪ Use Microsoft Fluent UI iconography built into the Everywhere module
▪ Use iconography that is thematically tied to the content behind each linked item
Web Part Custom Styling
▪ Use the Design & Branding module to define custom CSS classes
▪ Use the Webpart class field in web part setting to apply the style
▪ Ensure custom branding aligns well with out-of-the-box web part styles
Iconongraphy
▪ Do Use high quality Microsoft Fluent UI iconography built into LiveTiles modules and various
out-of-the-box SharePoint web parts e.g. quick links
▪ Don’t use inconsistent images and graphics that may have nontransparent backgrounds
that won’t render well on the link background
Working with the Design & Branding Module
The Design & Branding module is the LiveTiles Intranet’s design engine used supplement what can be achieved with out-of-the-box SPO site theming and is primarily used to brand elements including the Mega Menu, Everywhere panel and custom web parts. For assistance with configuring this module, please contact your local Presales or CSM resource for training.
Comments
0 comments
Please sign in to leave a comment.