Le blog francophone consacré
aux technologies Esri

L'écosystème dévelopeur ArcGIS s'enrichit du Calcite Design System !


Depuis plusieurs années, les concepteurs et les développeurs d'applications d'Esri collaborent sur un système de design à utiliser sur l'ensemble des produits et des sites web de la plateforme ArcGIS pour offrir une expérience utilisateur unifiée. Ce dernier s'appelle le "Calcite Design System". Aujourd'hui, Esri publie une première version (en beta) de Calcite et offre ainsi à la communauté des développeurs un outillage entièrement intégrée au site développeurs ArcGIS. En utilisant Calcite, les développeurs peuvent créer des expériences utilisateurs magnifiques, conviviales, réactives et cohérentes avec les autres applications ArcGIS et tout ça avec un minimum d'effort. Calcite intègre les meilleures pratiques de conception, des icônes, des jeux de couleurs et, surtout, une large bibliothèque de composants web d'interface utilisateur tels que des boutons, des panneaux, des accordéons, des alertes et bien d'autres. Calcite gère également le positionnement, l'espacement et la mise en page en responsive design des composants de vos applications pour obtenir un aspect net et réactif sur toutes les tailles d'écran.



Intégration avec l'écosystème ArcGIS

Ce système de conception est né d'une collaboration entre les équipes de conception et de développement d'Esri pour créer une norme visuelle unifiée et répondant à un niveau excellence en terme d'expérience utilisateur. À l'aide de cet ensemble partagé de ressources et de directives, les équipes peuvent créer des expériences Esri cohérentes et adaptées pour les produits de la plateforme ArcGIS et les projets réalisés par les services professionnels Esri.

Au fur et à mesure que ce système de conception évoluait et s'améliorait, Esri réalisé qu'il pouvait offrir un véritable intérêt pour la communauté des développeurs. En plus de créer plus rapidement des applications plus belles, les développeurs ont la possibilité de créer une expérience produit cohérente en utilisant les modèles et les meilleures pratiques intégrées nativement dans ArcGIS. Le tout, en présentant bien entendu leur propre branding et leur propre style. Par conséquent, nous avons mis à disposition les ressources de conception et de développement du système de conception via le site ArcGIS Developers.

Le nouveau Map Viewer utilise Calcite

Une application web personnalisée qui utilise Calcite


Construire son interface utilisateur avec les composants Web

Les développeurs peuvent créer leurs applications web à l'aide d'une collection de plus de 50 composants d'interface utilisateur qui constituent les éléments de base de toute application web. Ils ont tous les caractéristiques suivantes:

  • Souple: Ils sont flexibles car ils peuvent être configurés de différentes manières (par exemple, des boutons à bordures carrées ou arrondies).
  • Réactif: Les composants de l'interface utilisateur ont des options de dimensionnement et d'autres caractéristiques adaptatives pour coller au mieux aux tailles d'affichage.
  • Localisable: Ils prennent en charge la localisation dans différentes langues de gauche à droite et de droite à gauche. Les propriétés de texte peuvent être définies pour n'importe quel paramètre régional.
  • Indépendant du framework JS utilisé: Parce qu'ils sont construits sur des normes de composants web, ils sont indépendants du framework JavaScript utilisé afin que les développeurs puissent les utiliser dans l'outillage JavaScript de leur choix. Pour les utiliser, ils ne nécessitent rien de plus que du JS / HTML / CSS.
  • Accessible: Chacun des composants est soumis à des tests d'accessibilité réguliers et formalisés pour s'assurer qu'ils peuvent être facilement utilisés par n'importe quel public.
  • Implémentent les thèmes: Les développeurs peuvent appliquer un thème clair ou sombre, ou définir leur propre thème personnalisé pour correspondre à leur branding.



Personnaliser vos composants web pour correspondre à votre propre branding

Les thèmes vous permettent d'intégrer votre propre style ou le branding de votre entreprise dans votre application.

Par défaut, les composants de l'interface utilisateur utiliseront la palette de couleurs, la police et la forme du composant ArcGIS. Si vous souhaitez adapter l'apparence à vos préférences, vous pouvez facilement personnaliser les composants de différentes manières:

  • Thème clair/sombre. À l'aide d'une seule propriété, vous pouvez configurer tous les composants pour utiliser un thème sombre ou clair, tous deux conçus pour l'accessibilité. Les thèmes sombres et clairs styliseront tous les composants et leurs états (survolés, sélectionnés, etc.) pour bien s'afficher dans le thème choisi.
    Mon application personnalisée avec le thème clair
    Mon application personnalisée avec le thème sombre


  • Couleurs. À l'aide des variables de couleur des composants, vous pouvez configurer le jeu de couleurs dans votre application. Par exemple, la définition du CSS suivant donnera à tous les composants une couleur verte avec une couleur d'état de survol légèrement plus sombre:






  • Forme du composant. Vous pouvez configurer la forme de certains composants de l'interface utilisateur; par exemple, choisissez d'utiliser un style de bouton arrondi.

  • Typographie. Si vous souhaitez utiliser une police spécifique, vous pouvez l'appliquer à l'ensemble de l'application ou individuellement à travers les composants.



De la conception à l'application grâce aux kits d'interface utilisateur

Si vous travaillez avec une équipe de conception pour créer d'abord la partie UI, ou même si vous concevez et développez l'application vous-même, vous pouvez choisir d'utiliser des outils de conception et d'y référencer le kit d'interface utilisateur du Calcite Design System. Ainsi, vous pourrez glisser-déposer facilement des composants dans la page de conception de votre projet d'interface utilisateur. Avec cette première version, seul Sketch est pris en charge, mais Esri travaille à ajouter la prise en charge de Figma et Adobe XD plus tard cette année.

Référencement du kit UI Calcite dans Sketch (MacOS)

Dans le kit d'interface utilisateur, vous trouverez des versions symbolisées de tous les composants Web, composants calcite, couleurs, icônes et polices qui font partie du système de conception. Au fur et à mesure que vous construisez vos conceptions dans Sketch, les développeurs pourront les implémenter dans le code.

Insertion de composants web de Calcite dans Sketch

Vous découvrirez ici comment utiliser le kit d'interface utilisateur pour concevoir votre application dans Sketch.



Librairies d'icônes

Un autre point important de Calcite c'est la fourniture d'une large librairie d'icônes. L'équipe d'icônes et d'illustrations d'Esri maintient une collection d'icônes pour l'ensemble des produits. Vous avez désormais accès à ces icônes pour les utiliser librement dans l'interface utilisateur de votre application ou les utiliser dans les symbologies de vos cartes.

Calcite comprend deux bibliothèques principales: calcite-ui-icons et calcite-point-symbols. Toutes les icônes sont disponibles en SVG et sont associées à des balises afin que les utilisateurs puissent facilement trouver les icônes fonctionnelles ou cartographiques qu'ils recherchent. Vous pouvez parcourir les deux bibliothèques d'icônes à l'aide de la page des icônes.


calcite-ui-icons

Une collection de plus de 700 icônes d'interface utilisateur monochromes destinées à être utilisées en dehors d'une carte. Ils représentent des fonctions logicielles pour les interfaces utilisateurs d'applications web ou natives. Ces icônes représentent des concepts simples évitant toute complexité inutile et sont implémentées avec une seule couleur de remplissage. Construit à 16px, 24px et 32px avec un contour principal de 1px. Ces icônes sont également implémentées en tant que composant d'icône dans la bibliothèque de composants de calcite.


calcite-point-symbols

Une collection de plus de 700 icônes de symboles ponctuels monochromes à utiliser sur les cartes. Construit à 13px, 17px et 21px. Construirts sur une grille de pixels en nombre impairs signifie qu'ils peuvent être centrés horizontalement et verticalement.



Palettes de couleurs

Les couleurs d'Esri utilisent peu des couleurs fortes et mettent plutôt l'accent principal sur la couleur bleue principale de la marque. Les couleurs proposées sont conçues dans un souci d'accessibilité lors de la création de la bibliothèque de composants. De plus, les thèmes clairs et sombres ont été conçus pour passer le rapport de contraste d'accessibilité WCAG AA.



Démarrer avec le Cacite System Design System

Tout ce dont vous avez besoin pour commencer est disponible sur le site web des développeurs ArcGIS. Vous y trouverez des ressources telles que les directives de conception, les meilleures pratiques (à faire et à ne pas faire), les instructions pour le référencement ou la copie des ressources, la documentation et la référence sur l'API des composants. Très intéressant également, vous trouverez une interface interactive pour la configuration des composants et pour tester la flexibilité de ses propriétés, le thème clair/sombre et la disposition de droite à gauche dans le cadre de la localisation. Lorsque vous ajusterez les boutons et les propriétés des composants, vous pourrez copier le code de ce que vous avez modifié et le coller directement dans votre application.



Le futur...

Calcite est actuellement en version beta, n'hésitez pas à l'essayer et à partager vos commentaires avec nous via l'espace dédié sur Esri Community.

Calcite est un système de conception évolutif. Comme pour les autres systèmes de conception modernes, le système de conception d'Esri évolue constamment avec l'avancement des technologies ArcGIS, les outils disponibles pour le développement web et les technologies sous-jacentes. Étant donné qu'Esri dépend fortement de ce système de conception Calcite pour créer l'expérience utilisateur des produits, la bibliothèque de composants continuera de croître et de bénéficier d'améliorations.

Au-delà du web, bien que les composants d'interface utilisateur actuels soient limités à la plateforme web, Esri prévoit d'étendre Le Calcite Design System pour prendre en charge davantage de plateformes. Ceci étant dit, les applications créées avec d'autres technologies que HTML/CSS/JavaScript peuvent déjà bénéficier de nombreuses ressources de ce système de conception telles que les directives de conception, la bibliothèque d'icônes et les couleurs.

A vous de jouer et n'hésitez pas à me faire part de vos réalisations...






Partager cet article:

Rejoindre la discussion

    Les commentaires à propos de cet article: