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.
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...