Introduction

Cet article vous présente les principales options de personnalisation graphique de vos composants Jint, et comment les utiliser !

Entête et titre

Nos composants comportent un entête, qui peut être obligatoire pour certain composant. Cet entête apparait si vous avez besoin d'un des éléments le constituant.

L'entête est constitué de deux éléments :

• Un titre du composant que vous pouvez personnaliser.
  Le titre est aussi personnalisable en style pour les composants suivant : Actualités, Mes Abonnements, Événements, Mes Applications, Mes Mails, Mes réunions, Mes tâches, Anniversaires professionnels, Nouveaux arrivants, Profil, Résultat de Recherche, Mur des réseaux sociaux.

• De boutons d'action située à droite, qui différent en fonction des composants.

Nos conseils : 

Personnalisez les titres de vos composants afin d'expliciter l'usage de l'espace et du composant que vous avez placé et paramétré.

Taille

Vous choisissez parmi 3 tailles de composants Petit, Moyen ou Grand, ou personnalisez la taille du composant en ajoutant la quantité de pixels sous "Personnaliser".

Jint propose trois tailles standards de composant, qui vous permettent d'aligner vos composants pour créer un design uniforme et cohérent sur l'ensemble de vos pages.

En fonction de la valeur de la hauteur, l'affichage du composant s'adaptera en modifiant le design et les informations présentées pour vous garantir des composants toujours bien organisés et lisibles.

Mettre une hauteur personnalisée

Images

Nos composant vous proposent d'intégrer des images dans vos composants pour personnaliser votre site, lui donner du caractère et de la substance.

Intégrer une image

En cliquant sur "Sélectionner une image" vous ouvrez l'expérience de sélection des images.

Vous avez trois options de chargement d'image :

• Fichiers récents : l'onglet permet de sélectionner une image parmi les images récemment modifiées en fonction des résultats de recherche.
• Banque d'image : l'onglet utilise les services cognitifs de Bing pour rechercher des images
• OneDrive : accédez à votre OneDrive pour télécharger une image
• Site : naviguer à travers les ressources du site SharePoint actuel pour utiliser une image précédemment téléchargée
• Importer : l'onglet permet de télécharger un fichier à partir de votre poste de travail. Le fichier est automatiquement chargé parmi les Assets du site SharePoint.

Ajuster l'image

Vous disposez de plusieurs options pour ajuster l'image à votre composant

Sélection du ratio : Lorsque le format de l'image est libre, vous pouvez définir son format afin de le contraindre et d'uniformiser votre design. Activer le bouton "affichage en mode portrait" permet d'inverser les ratios.

Sélection du remplissage : Lorsque l'image est contrainte par le ratio ou par l'espace dans lequel elle est placée, vous pouvez ajuster le remplissage pour choisir comment faire apparaitre l'image

• Remplir : automatiquement ajuster l'image pour qu'elle remplisse tout l'espace disponible. L'option remplir va adapter automatiquement à la hauteur ou à la largeur en fonction de l'espace disponible et du format de l'image
• Adapter à la largeur : ajuste la taille de l'image pour que toute la largeur de l'image soit visible. Les bords latéraux de l'image correspondront à la zone d'affichage de l'image
• Adapter à la hauteur : ajuste la taille de l'image pour que toute la hauteur de l'image soit visible. Les bords verticaux de l'image correspondront à la zone d'affichage de l'image

Et vous pouvez ensuite ajuster la position de l'image avec le sélecteur suivant :

L'option "Personnalisé vous permet de renseigner en CSS la valeur background-position de l'image. Plus d'information sur background-position.

Exemple de positionnement avec la valeur "25% 50%"

Arrondis

Le paramètre "Arrondis" vous permet de sélectionner la forme de la bordure du composant. Vous pouvez choisir entre les paramètres suivants : Semi-arrondi, Arrondi et Rond. Vous pouvez également la personnaliser vous-même en ajoutant le rayon de l'arrondis en pixels.

Nos conseils :

Les arrondis en design d'interface utilisateur permettent de :

1. Adoucir l'apparence de l'interface utilisateur.

2. Créer une hiérarchie visuelle en mettant en évidence les éléments clés.

3. Faciliter la navigation en créant des boutons facilement identifiables.

4. Réduire la fatigue visuelle en adoucissant les bords de l'interface utilisateur.

Voici quelques points clés à garder à l'esprit lors de l'utilisation d'arrondis :

1. Utilisez les arrondis avec parcimonie - trop d'arrondis peuvent donner à l'interface utilisateur une apparence enfantine ou peu professionnelle.

2. Soyez cohérent - utilisez des arrondis cohérents à travers toute l'interface utilisateur. Cela aidera à créer une expérience utilisateur cohérente et intuitive.

3. Pensez à la taille des arrondis - la taille des arrondis peut avoir un impact sur l'apparence globale de l'interface utilisateur. Les arrondis plus grands peuvent aider à adoucir l'apparence de l'interface utilisateur, tandis que les arrondis plus petits peuvent donner une apparence plus nette.

Ombres

Ajoutez un effet d'ombre à vos composants en activant "Activer l'ombre" et choisissez entre une ombre Légère, Normal et Forte.

  Profil avec une ombre "forte"                           Profil avec une ombre "légère"

Nos conseils :

L'ajout d'ombres peut donner de la profondeur et de la dimension à une interface utilisateur. Voici quelques points clés à garder à l'esprit lors de l'utilisation d'ombres :

1. Utilisez des ombres subtiles - les ombres trop prononcées peuvent distraire les utilisateurs et les empêcher de se concentrer sur le contenu.

2. Soyez cohérent - utilisez des ombres cohérentes à travers toute l'interface utilisateur. Cela aidera à créer une expérience utilisateur cohérente et intuitive.

3. Pensez aux éléments flottants - les éléments flottants, tels que les boutons ou les cartes, peuvent bénéficier de l'ajout d'ombres pour créer une apparence plus réaliste.

4. Utilisez des ombres pour hiérarchiser les éléments - les ombres peuvent aider à guider l'œil de l'utilisateur vers les éléments les plus importants ou pertinents.

Couleurs

Les composants Jint vous propose de personnaliser la couleur de certains éléments. Vous avez accès à un sélecteur de couleur Jint :

1. Vous avez le choix entre sélectionner les couleurs du thème graphique de votre SharePoint pour rester dans la charte de votre page, ou utiliser une couleur personnalisée si vous avez un besoin précis
2. Sur certain élément, il est possible d'opter pour un dégradé de couleur linéaire plutôt qu'une couleur unie. Vous pouvez alors définir les deux couleurs, la position de départ et l'angle du dégradé
3. Le sélecteur de couleur remonte automatiquement certaine couleur de votre thème :
   • Primaire
   • Secondaire
   • Tertiaire
   • Blanc
   • Neutre alternatif : Fond léger
   • Neutre primaire : Fond sombre
   • Accentuation
4. Il est possible d'ajuster la transparence de la couleur appliquée si vous avez une image, un couleur ou une texture en fond à faire apparaitre.

Dégradé de couleur personnalisé

Nos conseils :

Ajuster les couleurs est primordial pour créer de la cohérence et de la lisibilité dans vos espaces de travail numérique. Voici quelques conseils :

• Considérez le thème graphique de votre site SharePoint et essayez de rester dans sa palette de couleurs. Cela contribuera à maintenir la cohérence et la cohésion de votre site, ce qui peut améliorer l'expérience utilisateur et aider les utilisateurs à identifier votre marque.

• Cependant, si vous avez un besoin spécifique, comme l'alignement avec les directives de marque de votre entreprise, vous voudrez peut-être utiliser une couleur personnalisée. Dans de tels cas, assurez-vous que la couleur que vous choisissez complète le thème existant et ne heurte pas d'autres éléments de votre page.

• Utilisez des couleurs pour créer une hiérarchie visuelle : Utilisez des couleurs pour mettre en évidence les éléments clés de l'interface utilisateur, tels que les boutons d'appel à l'action, les liens importants et les zones de contenu.

• Les gradients de couleur permettent d'ajouter de la profondeur et de la texture à une page, pour la rendre plus attirante pour l'œil. C'est un excellent moyen de réaliser des transitions d'une zone de la page vers l'autre tout en douceur sans agresser l'œil.

Audience

Définissez l'audience de votre composant afin de le rendre visible à une population spécifique !

• Sélectionnez un ou plusieurs groupes Entra ID comme audience du composant
• Seules les personnes appartenant à moins l'un des groupes pourront voir les composants
• Le composant n'apparaîtra pas pour les autres utilisateurs