Dans ce guide, nous vous proposons toutes les informations et les astuces nécessaires pour concevoir une Digital Workplace moderne, au design attrayant, sur laquelle vos employés prendront plaisir à naviguer !

 

🚨 Veuillez noter que les informations fournies dans l'exemple ci-dessous sont à jour jusqu'à la date de publication, mais elles ne prennent pas en compte les éventuelles mises à jour ultérieures de Microsoft. Comme les logiciels et les services de Microsoft sont sujets à des mises à jour fréquentes, nous vous recommandons de consulter régulièrement le site web de Microsoft ou de vérifier les mises à jour via les canaux officiels pour vous assurer d'obtenir les informations les plus récentes et les plus précises.

 

Thème de site

Choisir le thème de site

1. Cliquez sur l'icône en forme de roue crantée en haut à droite de votre écran, puis sélectionnez Modifier l'apparence
2. Ensuite, cliquez sur Thème et choisissez le thème souhaité
3. Vous voyez immédiatement le rendu avec le nouveau thème sur votre site
4. Le thème ne doit avoir aucune erreur et n'oubliez pas d'enregistrer votre choix 

 

💡Et si vous essayiez le thème sombre ?

L'utilisation d'un thème sombre sur une application est de plus en plus répandue. Il présente plusieurs avantages et peut être bénéfique pour certains utilisateurs. Voici quelques-uns des intérêts d'un thème sombre :

1. Réduction de la fatigue oculaire : Les thèmes sombres réduisent la quantité de lumière émise par l'écran, ce qui peut aider à réduire la fatigue oculaire, en particulier lors d'une utilisation prolongée, en particulier dans des environnements faiblement éclairés.

2. Amélioration du confort visuel : Pour certaines personnes, un thème sombre est plus agréable et confortable à regarder, car il diminue l'éblouissement et le contraste trop élevé, ce qui peut être bénéfique en particulier dans des environnements sombres.

3. Économie d'énergie : Un thème sombre peut contribuer à économiser la batterie de l'appareil mobile et à réduire la consommation d'énergie au global.

4. Mise en valeur du contenu : Dans certaines applications, un thème sombre peut aider à mettre en valeur le contenu principal, en le faisant ressortir sur un fond sombre, ce qui peut rendre l'expérience utilisateur plus immersive et captivante.

Créer un thème de site

Il est possible de créer un nouveau thème de site qui viendra s'ajouter à ceux disponibles sur votre SharePoint.

Voici comment procéder :

1. Rendez-vous sur le site Fluent UI Theme Designer de Microsoft 
2. Créez votre thème en utilisant le panneau de gauche et intégrez les couleurs suivantes de votre choix :
   • Couleur Primaire
   • Couleur du Texte
   • Couleur de Fond
     
     Ces trois champs accepte n'importe quelle valeur valide pour la propriété css color.
     Exemple : dans la capture d'écran rgb(135, 100, 184) ou #323130 ou white sont possibles.
3. Exportez le thème créé au format PowerShell en cliquant sur le bouton "Exporter le thème" en haut à droite de l'écran.
   
4. Récupérez le thème au format PowerShell en copiant tout le texte.
   

Importez le thème sur SharePoint Online :

Voici la procédure étape par étape pour intégrer un thème graphique SharePoint custom JSON en utilisant PowerShell :

Prérequis :

• Assurez-vous que vous disposez des droits d'administration SharePoint.
• Vous devez avoir SharePoint Online Management Shell installé sur votre ordinateur.

Étapes pour intégrer un thème graphique personnalisé SharePoint :

1. Ouvrez SharePoint Online Management Shell :
   Lancez l'application "SharePoint Online Management Shell" sur votre ordinateur.
   
   
   
   A partir de maintenant, sauf indication contraire, toute commande est à exécuter dans SharePoint Online Management Shell.

2. Donner un nom à votre thème via la commande suivante :$ThemeName = "[Nom_Theme]"Remplacer [Nom_Theme] par le nom de votre thème

3. Indiquez si votre thème est un thème sombre ou pas :
   Si votre thème est clair, alors saisissez le code suivant :

   $IsInverted = $False

   Si votre thème est sombre, alors saisissez le code suivant :

   $IsInverted = $True

4. Définissez la palette en collant le code PowerShell généré plus haut via la commande suivante :
   

   $ThemePalette = [Coller votre thème PowerShell ici]

   ⚠️Attention à bien valider la saisie en appuyant sur la touche Entrée après avoir coller le code.
   
   Exemple :
   

   $ThemePalette = @{
   >> "themePrimary" = "#8764b8";
   >> "themeLighterAlt" = "#f9f8fc";
   >> "themeLighter" = "#e9e2f4";
   >> "themeLight" = "#d7c9ea";
   >> "themeTertiary" = "#b29ad4";>> "themeSecondary" = "#9372c0";>> "themeDarkAlt" = "#7959a5";
   >> "themeDark" = "#664b8c";
   >> "themeDarker" = "#4b3867";
   >> "neutralLighterAlt" = "#f8f8f8";
   >> "neutralLighter" = "#f4f4f4";
   >> "neutralLight" = "#eaeaea";
   >> "neutralQuaternaryAlt" = "#dadada";
   >> "neutralQuaternary" = "#d0d0d0";
   >> "neutralTertiaryAlt" = "#c8c8c8";
   >> "neutralTertiary" = "#a19f9d";
   >> "neutralSecondary" = "#605e5c";
   >> "neutralSecondaryAlt" = "#8a8886";
   >> "neutralPrimaryAlt" = "#3b3a39";
   >> "neutralPrimary" = "#323130";
   >> "neutralDark" = "#201f1e";
   >> "black" = "#000000";
   >> "white" = "#ffffff";
   >> }}

5. Indiquer l'url du site d'administration Sharepoint via la commande suivante :

   $SiteAdminUrl = "[URL_du_site_admin_SharePoint]"

   Remplacer [URL_du_site_admin_SharePoint] par l'url du site admin SharePoint de votre tenant.
   Celui-ci doit être de la forme suivante : https://[nom_de_votre_tenant]-admin.sharepoint.com
   Exemple :

   $SiteAdminUrl = "https://mytenant-admin.sharepoint.com"

6. A ce moment du code, votre shell devrait ressembler à ceci :
   

7. Connectez-vous à SharePoint Online en entrant la commande suivante pour vous connecter à SharePoint Online en tant qu'administrateur :

   Connect-SPOService -Url $SiteAdminUrl
   

   Une popup Microsoft va alors s'afficher vous invitant à rentrer vos identifiants de connexion :
   

8. Ajouter votre thème personnalisé au catalogue de thèmes de votre tenant via la commande suivante :

   Add-SPOTheme -Identity $ThemeName -Palette $ThemePalette -IsInverted $IsInverted
   

9. Vous pouvez à présent retrouver votre thème personnalisé directement depuis un site SharePoint en cliquant sur la roue crantée, puis Modifier l'apparence puis Thème puis Thèmes de l'entreprise.
   

Après avoir suivi ces étapes, le thème graphique personnalisé sera importé et appliqué au site SharePoint spécifié. Les éléments visuels tels que les couleurs, les polices et autres personnalisations du thème seront appliqués à votre site, lui donnant ainsi l'apparence souhaitée.

N'oubliez pas de tester le thème sur un site de test avant de l'appliquer à un site en production pour vous assurer que tout se passe comme prévu.

Thème de site personnalisé

Afin que votre site SharePoint s'adapte à votre charte graphique, il est possible de créer un thème personnalisé avec plusieurs couleurs en utilisant un JSON modifiable. Il est possible de créer un fichier JSON en partant de 0, ou de modifier un fichier JSON créez à partir du Fluent de Microsoft présenté plus haut.

Lorsque vous modifiez un thème graphique SharePoint custom en JSON, il est essentiel de suivre certaines consignes et la documentation Microsoft Thèmes de site SharePoint : schéma JSON pour vous assurer que les modifications sont appliquées correctement et que le thème reste cohérent et fonctionnel. Voici quelques consignes importantes à respecter :

1. Respecter le format JSON : Assurez-vous que votre fichier de thème graphique custom est un fichier JSON valide. Un JSON mal formaté peut entraîner des erreurs lors de l'importation ou de l'application du thème.

2. Utiliser des propriétés valides : Assurez-vous que vous utilisez uniquement des propriétés de thème valides et supportées par SharePoint. Les propriétés non prises en charge peuvent être ignorées ou entraîner des résultats inattendus.

3. Vérifier la compatibilité : Assurez-vous que votre thème custom est compatible avec la version de SharePoint que vous utilisez. Certaines propriétés de thème peuvent être spécifiques à une version de SharePoint et ne fonctionneront pas correctement dans d'autres versions.

4. Tester sur un site de test : Avant d'appliquer le thème à un site en production, testez-le sur un site de test. Cela vous permettra de vérifier si les modifications s'appliquent correctement et s'il n'y a pas d'erreurs ou de conflits avec d'autres personnalisations.

5. Sauvegarder le thème d'origine : Avant de modifier un thème custom existant, assurez-vous de sauvegarder le thème d'origine au cas où vous auriez besoin de revenir en arrière.

6. Garder la cohérence visuelle : Lorsque vous apportez des modifications, assurez-vous de conserver la cohérence visuelle dans l'ensemble du thème. Les couleurs, les polices et les styles doivent être choisis de manière à s'harmoniser avec l'apparence générale du site SharePoint.

7. Éviter les propriétés en conflit : Assurez-vous que les propriétés de thème que vous définissez ne sont pas en conflit les unes avec les autres. Par exemple, si vous définissez une couleur de texte et une couleur de fond contradictoires, cela peut rendre le contenu illisible.

8. Penser à l'accessibilité : Assurez-vous que le thème modifié est accessible aux utilisateurs ayant des besoins spécifiques, comme les utilisateurs malvoyants. Choisissez des couleurs et des polices faciles à lire et assurez-vous que le contraste est suffisant.

Vous pouvez ensuite importer votre thème en suivant la procédure dans le paragraphe précédent.

Structurer votre page

La structuration d'une page en web design est un élément crucial pour offrir aux utilisateurs une expérience fluide, intuitive et agréable.

Une page web bien structurée permet de communiquer efficacement avec les utilisateurs en organisant le contenu de manière claire et cohérente. Tout d'abord, une bonne structuration facilite la navigation et l'accès à l'information recherchée. En disposant judicieusement les éléments de la page, tels que les menus, les titres et les sections, les utilisateurs peuvent rapidement repérer les informations pertinentes, ce qui améliore leur satisfaction et les incite à utiliser plus souvent votre Digital Workplace.

Utilisation des différentes sections

• Varier les sections

Variez les types de sections pour mettre en place une première structure et faciliter la lecture pour vos utilisateurs.

• Section pleine largeur

La section pleine largeur occupe toute la largeur de l'écran : 

Ce type de section ne peut utiliser que certains composants natifs et Jint : 

Bannière Focus Applications - Obsolète Trombinoscope Actualités Mes abonnements Gestion des connaissances - Obsolète Sur le même sujet Lanceur communautaire Recherche - Obsolète

Aide à la contribution Actualités - Obsolètes Mur de réseaux sociaux Focus Beta Profil Nouveaux arrivants Anniversaires professionnels Bouton d'action Évènements Mes applications Répertoire de sites

 

Cas d'usage section pleine largeur

• Bandeau en haut de page ou bas de page pour afficher vo contenus media ou contenu visuel
• En milieu de page, ce type de section casse généralement la structure visuelle

 

• Section verticale

La section verticale affecte toute la page et permet d'afficher tous les composants Jint et natifs SharePoint.

 

Cas d'usage section verticale

• Pages collaboratives pour afficher les informations de l'utilisateur (Mails, tâches, réunions, profil...)
• Page où vous souhaitez condenser l'information

Thèmes de section et designer

Créez de la structure en changeant les thèmes et les types de section afin de créer plusieurs zones visuelles différentes dans la page. Le secret pour apporter de la structure au premier coup d'œil de votre page ? La couleur !

 

Astuces Alternez les espaces en fond clair et sombre pour délimiter les zones Utilisez des couleurs ou images de textures, de motifs pour rendre la page plus consistante Éviter la fatigue visuelle de l'observateur

 

• Trames d'arrière-plan de section

SharePoint propose automatiquement 4 trames d'arrière-plan de section entièrement gérées sur les dernières versions des composants Jint.

• Couleur et image en fond avec le designer

Utilisez le composant designer pour appliquer une couleur ou une image en fond de section : Article composant Designer

 

Astuce pour l'image de fond Privilégiez l'ajustement en hauteur de l'image et prévoyez de la marge ("fond perdu") sur vos images pour gérer le responsive.

 

Créer de la continuité

Afin de créer de la continuité dans vos pages, la structure ne doit pas aller à l'encontre de l'harmonie de la page.

Pour cela, veillez à :

• Conserver les mêmes couleurs;
• Utiliser des motifs fluides ou des dégradés de couleurs pour faire la transition entre les zones sombres et claires.

Aligner les composant

Il est important d'aligner visuellement les composants pour aider l'œil à lire la page de manière fluide. En effet, un problème d'alignement attirera l'œil et interrompera la lecture du contenu.

Pour cela, nous vous recommandons d'utiliser les tailles standards de Jint afin de garantir l'alignement des composants, et d'utiliser le composant Designer pour rectifier les écarts des composants que vous ne pouvez pas aligner, comme les composant natif SharePoint par exemple.

Design avancé

Pour aller plus loin dans le design de votre Digital Workplace, vous pouvez modifier les gouttières et les espacements des sections à l'aide du composant Designer.

 

Modifier les gouttières et les espacements des sections

Grâce au composant Designer, vous pouvez agir sur les tailles et espacements des composants et sections. Ainsi, vous pourrez créer une page plus aérée avec plus d'espaces entre les éléments ou au contraire condenser l'information pour rendre la page plus intense.

 

Points de vigilance concernant le responsive

• Les modifications de marges doivent être raisonnables afin que l'affichage soit compatible avec l'affichage sur mobile.
• La taille des colonnes change avec la taille de l'écran
• L'organisation des colonnes des sections change aussi en fonction de la taille disponible

Exemple : en tablette ou mobile, les trois colonnes d'une section seront affichées en pleine largeur l'une en dessous de l'autre plutôt que côte à côte. Limitez donc les effets de superposition entre des sections multicolonnes.

 

Superposer les éléments

Grâce au composant Designer, vous pouvez superposer les éléments à l'aide de marges négatives pour créer des mises en pages plus avancées.

 

Voici un exemple de superposition de section :

 

 

Voici le paramétrage qui a permis de réaliser cette superposition :

La superposition est constituée de 3 sections :

• La première qui correspond à la section de fond bleu à laquelle on ajoute de la marge interne en bas de la section pour permettre à la seconde section de la superposer
• La seconde qui comporte la barre de recherche et le cadre fuschia à laquelle on retire de la marge en haut de la section en appliquant une marge négative pour venir en superposition de la première
• la troisième blanche avec le dégradé bleu à laquelle on retire une marge correspondant à : [hauteur de la 2ème section] - [la marge négative appliquée à la second section] pour que la troisième section s'ajuste sous la première section. On ajoute aussi une marge interne correspondant cette même valeur afin que les composants de la troisième section ne vienne pas écraser la seconde section.

 

 

Avec toutes ces astuces et fonctionnalités, vous pourrez concevoir une Digital Workplace unique et conviviale pour vos utilisateurs. Si besoin, n'hésitez pas à solliciter votre intégrateur pour vous accompagner dans vos démarches !