In this guide, we provide you with all the information and tips needed to design a modern Digital Workplace with an attractive design that your employees will enjoy navigating!

 

🚨 Please note that the information provided in the example below is current as of the publication date, but it does not account for any subsequent updates from Microsoft. Since Microsoft's software and services are subject to frequent updates, we strongly advise you to regularly check Microsoft's website or official channels for updates to ensure you have the most current and accurate information.

 

Site Theme

Choosing a Site Theme

1. Click on the gear-shaped icon in the upper right corner of your screen, then select "Edit Appearance."
2. Next, click on "Theme" and choose the desired theme.
3. You will immediately see the result with the new theme on your site.
4. Don't forget to save your choice.

💡 How about trying the dark theme?

The use of a dark theme in an application is becoming increasingly popular. It offers several advantages and can be beneficial for some users. Here are some of the benefits of a dark theme:

• Reduced Eye Strain: Dark themes reduce the amount of light emitted by the screen, which can help reduce eye strain, especially during prolonged use and in low-light environments.

• Improved Visual Comfort: For some people, a dark theme is more pleasant and comfortable to look at because it reduces glare and excessive contrast, which can be especially beneficial in dark environments.

• Energy Savings: A dark theme can contribute to saving the battery of mobile devices and reduce overall power consumption.

• Highlighting Content: In some applications, a dark theme can help highlight the main content by making it stand out against a dark background, which can make the user experience more immersive and engaging.

Creating a Site Theme

It is possible to create a new site theme to add to those available on your SharePoint. Here's how:

1. Visit the Microsoft Fluent site.
2. Create your theme using the left panel and include the following customizable colors of your choice:
   • Primary Color
   • Text Color
   • Background Color
     
3. Export the created theme in PowerShell format by clicking the "Export Theme" button in the top right corner of the screen. Retrieve the theme in JSON format.
   
   
4. 
5. Importing the Theme on SharePoint Online

Here is the step-by-step procedure for integrating a custom JSON SharePoint graphic theme using PowerShell:

Prerequisites:

• Ensure that you have administrative rights on the SharePoint site.
• You must have SharePoint Online Management Shell installed on your computer.

Steps to integrate a custom JSON SharePoint graphic theme:

1. Open SharePoint Online Management Shell:

   • Launch the "SharePoint Online Management Shell" application on your computer.
2. Define your color palette by using the JSON previously generated earlier in the script below :
   

   #Define the color palette
   
   $ThemePalette = @{ [Paste your JSON Theme Here]}

   example :
   

   #Define the color palette
   
   $ThemePalette = @{
   
   "themePrimary" = "#00d492";
   
   "themeLighterAlt" = "#f3fdfa";
   
   "themeLighter" = "#d0f8eb";
   
   "themeLight" = "#a9f2db";
   
   "themeTertiary" = "#5ce5b9";
   
   "themeSecondary" = "#1ad99c";
   
   "themeDarkAlt" = "#00be82";
   
   "themeDark" = "#00a16e";
   
   "themeDarker" = "#007751";
   
   "neutralLighterAlt" = "#f8f8f8";
   
   "neutralLighter" = "#f4f4f4";
   
   "neutralLight" = "#eaeaea";
   
   "neutralQuaternaryAlt" = "#dadada";
   
   "neutralQuaternary" = "#d0d0d0";
   
   "neutralTertiaryAlt" = "#c8c8c8";
   
   "neutralTertiary" = "#ae9e9e";
   
   "neutralSecondary" = "#938181";
   
   "neutralPrimaryAlt" = "#796767";
   
   "neutralPrimary" = "#0f0b0b";
   
   "neutralDark" = "#443636";
   
   "black" = "#2a2020";
   
   "white" = "#ffffff";
   
   }

3. Connect to SharePoint Online. In SharePoint Online Management Shell, enter the following command and press "Enter" to connect to SharePoint Online as an administrator:
   powershell

    Connect-SPOService -Url https://yoursite.sharepoint.com
   

   Replace "https://yoursite.sharepoint.com" with the URL of your SharePoint site.

4. Import the custom JSON graphic theme: a. Use the "Add-SPOTheme" command to import the custom JSON graphic theme:

   powershell
    Add-SPOTheme -Identity "Custom_Theme_Name" -Palette $ThemePalette -IsInverted $False

   Replace "Custom_Theme_Name" with the name you want to give your custom theme.

5. Apply the theme to the SharePoint site. You can now find your theme from the "Modify appearance" panel: "Theme" on SharePoint sites.

After following these steps, the custom JSON graphic theme will be imported and applied to the specified SharePoint site. Visual elements such as colors, fonts, and other theme customizations will be applied to your site, giving it the desired appearance.

Remember to test the theme on a test site before applying it to a production site to ensure everything works as expected.

Custom Site Theme

To make your SharePoint site align with your brand, you can create a custom theme with multiple colors using an editable JSON. You can create a JSON file from scratch or modify a JSON file created using Microsoft Fluent, as discussed earlier.

When modifying a custom JSON SharePoint graphic theme, it is essential to follow specific guidelines and the Microsoft documentation on SharePoint Site Themes: JSON Schema to ensure that the modifications are applied correctly, and the theme remains consistent and functional. Here are some important guidelines to follow:

1. JSON Format: Ensure that your custom graphic theme file is a valid JSON file. Poorly formatted JSON can lead to errors when importing or applying the theme.

2. Use Valid Properties: Make sure you use only valid theme properties supported by SharePoint. Unsupported properties may be ignored or result in unexpected outcomes.

3. Check Compatibility: Ensure that your custom theme is compatible with the version of SharePoint you are using. Some theme properties may be specific to a SharePoint version and may not work correctly in other versions.

4. Test on a Test Site: Before applying the theme to a production site, test it on a test site. This allows you to verify that the modifications are applied correctly and that there are no errors or conflicts with other customizations.

5. Backup the Original Theme: Before modifying an existing custom theme, make sure to back up the original theme in case you need to revert.

6. Maintain Visual Consistency: When making modifications, ensure that visual consistency is maintained throughout the theme. Colors, fonts, and styles should be chosen to harmonize with the overall look of the SharePoint site.

7. Avoid Conflicting Properties: Ensure that the theme properties you set do not conflict with each other. For example, setting conflicting text and background colors can make the content unreadable.

8. Consider Accessibility: Make sure the modified theme is accessible to users with specific needs, such as visually impaired users. Choose colors and fonts that are easy to read and ensure there is sufficient contrast.

You can then import your theme by following the procedure discussed in the previous section.

Structuring Your Page

In web design, structuring a page is a crucial element to provide users with a smooth, intuitive, and enjoyable experience.

A well-structured web page allows for effective communication with users by organizing content in a clear and consistent manner. First and foremost, good structuring facilitates navigation and access to the desired information. By judiciously arranging page elements such as menus, headers, and sections, users can quickly locate relevant information, which improves their satisfaction and encourages them to use your Digital Workplace more often.

Using Different Sections

• Diversify the Sections

Vary the types of sections to establish an initial structure and facilitate reading for your users.

• Full-Width Section

The full-width section occupies the entire screen width:

This type of section can use only specific native components and jint.coponents:

Banner Focus Applications (Obsolete) Directory News My Subscriptions Knowledge Management (Obsolete) Related Topics Community Launcher Search (Obsolete)

Contribution Help News (Obsolete) Social Media Wall Focus Beta Profile Newcomers Professional Anniversaries Action Button Events My Applications Site Directory

Use Case for Full-Width Section

• Banner at the top or bottom of the page to display media content or visual content.
• In the middle of the page, this type of section generally breaks the visual structure.

 

• Vertical Section

The vertical section affects the entire page and allows you to display all Jint and native SharePoint components.

Use Case for Vertical Section

Collaborative pages to display user information (emails, tasks, meetings, profile, etc.). Pages where you want to condense information.

Section Themes and Design

Create structure by changing themes and section types to create multiple different visual areas on the page. The secret to providing structure at a glance for your page? Color!

 

Tips Alternate light and dark backgrounds to delineate areas. Use colors or images of textures, patterns to make the page more consistent. Avoid visual fatigue for the observer.

 

• Section Background Patterns

SharePoint automatically provides 4 fully managed section background patterns on the latest versions of jint.coponents.

• Color and Image Background with the Designer

Use the designer component to apply a color or image as the background for a section: Designer Component Article

 

Background Image Tip Prefer adjusting the height of the image and provide margin ("bleed") on your images for responsive design.

 

Creating Continuity

To create continuity on your pages, the structure should not undermine the page's harmony.

To achieve this, ensure:

• Consistent colors are maintained.
• Use fluid patterns or color gradients to transition between dark and light areas.

Aligning Components

It is essential to visually align the components to help the eye read the page smoothly. Alignment issues will attract the eye and disrupt content readability.

Therefore, we recommend using Jint standard sizes to ensure component alignment and using the Designer component to correct any misalignment of components that cannot be aligned, such as native SharePoint components, for example.

Advanced Design

To go further in designing your Digital Workplace, you can modify section gutters and spacing using the Designer component.

Modifying Section Gutters and Spacing

With the Designer component, you can adjust component and section sizes and spacing. This allows you to create a more open page with more space between elements or, conversely, condense information to make the page more intense.

Responsive Design Considerations

• Margin modifications should be reasonable to ensure compatibility with mobile display.
• Column sizes change with screen size.
• The arrangement of section columns also changes based on available space.

For example, on a tablet or mobile device, the three columns in a section will be displayed one below the other, rather than side by side. Therefore, limit overlapping effects between multi-column sections.

Overlaying Elements

With the Designer component, you can overlay elements using negative margins to create more advanced layouts.

Here's an example of section overlay:

The overlay consists of 3 sections:

1. The first corresponds to the blue background section, to which we add internal margin at the bottom of the section to allow the second section to overlay it.
2. The second section contains the search bar and the fuchsia frame, from which we remove top margin by applying a negative margin to overlap the first section.
3. The third section is white with a blue gradient, from which we remove a margin corresponding to [height of the second section] - [the negative margin applied to the second section] so that the third section adjusts under the first section. We also add internal margin corresponding to the same value to prevent components in the third section from overlapping the second section.

With all these tips and features, you can design a unique and user-friendly Digital Workplace for your users. If needed, don't hesitate to engage your integrator to assist you in your endeavors!