Theming-Übersicht

Grundlegende Informationen zu Jutro-Theming

Jutro-Theming ist ein Mechanismus, der es Designern und Entwicklern ermöglicht, das Branding eines Kunden auf die Benutzeroberfläche einer Jutro-App anzuwenden. Jutro-Theming verwendet Design-Token, um die spezifischen Theming-Entscheidungen zu definieren. Die Design-Token werden dann in Variablen umgewandelt, die von der Anwendung verwendet werden können.

Es gibt viele Arten von Designentscheidungen, die Designer berücksichtigen müssen. Zu den wichtigsten gehören:

• Farben
• Schriftarten/Typografie
• Abstände
• Schatten
• Rahmenradius

Ein Beispiel für eine globale Änderung wäre das Ersetzen der Standardschriftartenfamilie Source Sans Pro von Jutro durch Roboto von Google. Dazu ändern Sie lediglich den Wert des Design-Tokens, das der Schriftfamilie zugeordnet ist:

{
  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" }
        },
      }
    }

Sobald die Änderung im Wert des Design-Tokens in die entsprechende CSS-Variable umgewandelt wurde, wird die Schriftart in der gesamten Anwendung geändert. Eine Änderung auf Komponentenebene würde hingegen eine Änderung der Schriftgröße für einen bestimmten Schaltflächentyp beinhalten, ohne dass sich dies auf die globalen Token auswirkt.

Analysieren eines Designs

Am Theming mit Jutro ist in der Regel ein Guidewire-Kunde beteiligt. UX-Designer werden in irgendeiner Form dazu beitragen, unabhängig davon, ob sie intern oder extern für Guidewire tätig sind. Abhängig von den Designanforderungen dieses Kunden sind dies einige der Szenarien, die auftreten können:

• Sie haben ein Design und wollen es an Jutro anpassen
• Sie haben alte Designs, die sie aktualisieren möchten
• Sie haben ein Markenleitfaden/Designsystem, an dem wir uns orientieren sollen.
• Sie fangen bei Null an und möchten, dass Guidewire die Designarbeit übernimmt (selten)

In den meisten dieser Fälle müssen Sie die Designs des Kunden analysieren und die Marke und den Stil aus diesen verschiedenen Quellen extrahieren.

Einige der wichtigsten Punkte, auf die Sie bei der Analyse eines Designs achten sollten, sind:

Globale Optionen

• Farben
• Schriftarten/Typografie
• Abstände
• Schatten
• Rahmenradius

Stildetails

• Kopfzeile – Farbe, Logo, Füllung, Größe
• Hintergrundfarbe des Textes
• Hintergrundfarbe der Karte (falls zutreffend)

• Schriftarten – Farbvariablen Text-1 & Text-2, Größen
• Schaltflächen – Hintergrundfarbe, Textfarbe, Füllung bei allen 3 Schaltflächentypen

• Eingaben – Hintergrundfarbe, Rahmen, Textgröße, -gewicht und -farbe, Abstand zwischen Beschriftung und Eingabe, Auffüllung und Größe des Eingabefeldes

• Verknüpfung - Farbe (falls abweichend von Marke-1)

Dies sind die wichtigsten Stilelemente in einem Design. Wenn Sie diese Stile aus den Designquellen Ihres Kunden extrahieren und in Ihren Entwürfen wiedergeben können, haben Sie den größten Teil der Arbeit bereits erledigt.

Überprüfung eines Markendokuments

Die Überprüfung eines Markendokuments, eines Styleguides oder eines Designsystems folgt einem ähnlichen Prozess wie der oben beschriebene. Anstatt jedoch eine vollständig gestaltete Seite zu analysieren, würden Sie die Muster und Komponenten untersuchen, die zum Erstellen dieser Seite verwendet werden.

Das bedeutet, dass Sie jede Option als Teil einer Designkomponente betrachten müssen. Der Vorteil der Arbeit mit einem Designsystem oder Styleguide ist, dass Sie Zugang zu detaillierten Informationen über die korrekte Verwendung dieser Stile haben.

Designen mit Jutro

Das Designen mit Jutro besteht aus den folgenden übergeordneten Schritten:

1. Wählen Sie Ihren Grundriss

2. Wählen Sie Ihr Layout

3. Gestalten Sie mithilfe der Jutro-Komponenten

4. Erhalten Sie die Design-Token-Liste vom UX-Designer und wenden Sie Stile an, indem Sie die Theme-Dateien durch den Transformationsprozess von Design-Token in CSS-Variablen erzeugen.