Présentation des thèmes

Comprendre la création de thèmes Jutro

Les thèmes Jutro sont un mécanisme qui permettent aux concepteurs et aux développeurs d'appliquer la marque d'un client à l'interface utilisateur d'une application Jutro. La création de thèmes Jutro utilise des jetons de conception pour définir les décisions de création de thèmes spécifiques. Les jetons de conception sont ensuite transformés en variables que l'application peut utiliser.

Il existe de nombreux types de décisions de conception que les concepteurs doivent prendre en compte. Voici quelques-uns des plus importants :

• Couleurs
• Polices/Typographie
• Espacement
• Ombres
• Rayon de bordure

Un exemple de changement global serait de remplacer la famille de polices par défaut Source Sans Pro de Jutro par Roboto de Google. Il suffit de modifier la valeur du jeton de conception associé à la famille de polices :

{
  jds:
    {
      "font-family":
        { "heading": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for headings" },
          "label": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for label text" },
          "body": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for body text" },
          "monospace": { "type": "fontFamilies", "value": "'Roboto'", "description": "Global font-family for monospace text" }
        },
      }
    }

Une fois que la modification de la valeur du jeton de conception est transformée en variable CSS correspondante, cela modifie la police dans l'ensemble de l'application. En revanche, une modification au niveau du composant impliquerait de modifier la taille de police d'un certain type de bouton, sans affecter les jetons globaux.

Analyser une conception

Lors de la création de thèmes avec Jutro, un client Guidewire est généralement impliqué. Les concepteurs d'expérience utilisateur contribueront dans une certaine mesure, qu'ils soient internes ou externes à Guidewire. Selon les besoins de conception de ce client, voici quelques-uns des scénarios que vous pouvez rencontrer :

• Ils ont un modèle et veulent le transformer en modèle Jutro
• Ils ont d'anciennes conceptions qu'ils souhaitent mettre à niveau
• Ils disposent d'un guide de marque/système de conception à partir duquel ils aimeraient que nous travaillions
• Ils partent de zéro et veulent que Guidewire dirige le travail de conception (rare)

Dans la plupart de ces cas, vous devez analyser les conceptions du client et extraire la marque et le style de ces sources multiples.

Voici quelques-uns des principaux éléments à prendre en compte pour analyser une conception :

Options globales

• Couleurs
• Polices/Typographie
• Espacement
• Ombres
• Rayon de bordure

Détails du style

• En-tête : couleur, logo, remplissage, taille
• Couleur d'arrière-plan du corps
• Couleur d'arrière-plan de fiche (le cas échéant)

• Polices : variables de couleur Text-1 et Text-2, tailles
• Boutons : couleur d'arrière-plan, couleur du texte, remplissage des 3 types de boutons

• Entrées : couleur d'arrière-plan, bordure, taille du texte, poids et couleur, espace entre l'étiquette et l'entrée, remplissage et taille du champ de saisie

• Lien : couleur (si différente de la marque 1)

Il s'agit des principaux éléments de style d'une conception. Si vous pouvez extraire ces styles des sources de conception de votre client et les répliquer dans vos conceptions, vous aurez fait la majeure partie du travail.

Examiner un document de marque

L'examen d'un document de marque, d'un guide de style ou d'un système de conception suit un processus similaire à celui décrit ci-dessus. Toutefois, au lieu d'analyser une page entièrement conçue, vous examineriez les modèles et les composants utilisés pour créer cette page.

Cela implique d'examiner chaque option dans le cadre d'un composant conçu. L'avantage de travailler avec un système de conception ou un guide de style est que vous aurez accès à des informations détaillées sur l'utilisation correcte de ces styles.

Concevoir avec Jutro

La conception avec Jutro comprend les étapes générales suivantes :

1. Choisissez votre plan

2. Choisissez votre disposition

3. Conception à l'aide de composants Jutro

4. Obtenez la liste des jetons de conception à partir du concepteur d'expérience utilisateur et appliquez des styles en obtenant les fichiers de thème via le processus de transformation des jetons de conception en variables CSS.