Mit dem Design Builder kannst du deine Journeys individuell gestalten und diesen somit ein einzigartiges Design verleihen. Wie genau der Design-Builder funktioniert kannst du in diesem Artikel nachlesen.

Übersichtsseite des Design Builders

Sobald du dich in epilot eingeloggt hast, findest du den Design-Builder unter der Kategorie "Konfiguration" im Navigationsmenü. 

Mit einem Klick auf das Design-Builder-Symbol öffnet sich zunächst einmal eine Übersichtsseite, auf der alle von dir angelegten Designs im Rahmen einer Tabelle angezeigt werden. In den einzelnen Spalten kannst du folgende Informationen zu den jeweiligen Designs direkt einsehen: 

• Marke, die diesem Design zugeordnet ist
• Name des Designs
• Name der Person, die das Design angelegt hat
• Datum, an dem das Design erstellt wurde
• Für welche Strecke(n) das Design verwendet wird  

Sofern du ein Design bearbeiten möchtest, genügt ein einfacher Klick auf die entsprechende Zeile. Für den Fall, dass du ein Design löschen möchtest, musst du nur auf das "Mülleimer"-Symbol klicken. Das Symbol findest du innerhalb der Tabelle auf der rechten Seite der einzelnen Einträge. Beachte hierbei allerdings, dass du ein Design nur löschen kannst, wenn dieses (noch) nicht in Benutzung ist.   

Neues Design erstellen 

Sofern du ein neues Design anlegen möchtest, klickst du einfach auf "Erstelle Design" in der oberen rechten Ecke der Übersichtsseite. 

Aufbau des Vorschau-Fensters

Im Folgenden erscheint nun innerhalb des linken Fensters eine Vorschau der konfigurierbaren Strecke. Außerdem kannst du mit einem Klick auf das "Desktop"- bzw. "Smartphone"-Symbol prüfen, wie die jeweiligen Designs auf den entsprechenden Geräten aussehen würden. 

Sofern du dem Design einen Namen zuordnen möchtest, klickst du einfach auf das Feld "Design-Name" und trägst den gewünschten Titel in das Textfeld ein. 

Unter dem Punkt "Design Informationen" kannst du zudem noch einmal nachschauen, wer das entsprechende Design angelegt hat, wann dieses erstellt wurde und welchen Strecken das Design zugeordnet ist. Dies geht allerdings nur, wenn du ein bereits vorhandenes Design bearbeitest. Beim Erstellen eines neuen Design sind die "Design Informationen" nicht abrufbar. 

Unterhalb des Vorschau-Fensters findest du die einzelnen Seiten der jeweiligen Strecke. So kannst du dich bei der visuellen Anpassung einer Strecke flexibel durch die unterschiedlichen Seiten klicken und direkt nachschauen, wie sich deine Design-Anpassungen auf die gesamte Strecke auswirken.

Design der Strecke im Einstellungsmenü anpassen

Neben dem Vorschau-Fenster findest du auf der rechten Seite das Menü "Einstellungen". Hier kannst du die von dir ausgewählte Strecke im Rahmen von vier unterschiedlichen Komponenten flexibel gestalten. 

Navigationsleiste

Im Reiter "Navigationsleiste" kannst du diese nach Belieben farblich gestalten und ein Logo hochladen. Ersteres war in der alten Version des Design-Builders noch nicht möglich. Um die Farbe der Leiste anzupassen, klickst du einfach auf den Punkt "Optik". Zu dem kannst du jetzt auch die Höhe der Navigationsleiste und Anordnung des Logos anpassen. 

Hier bestimmt du zunächst einmal die Farbdefinition. Du hast die Auswahl zwischen "HEX" und "RGB". Im nächsten Schritt trägst du den Wert, sowie die Transparenz (in Prozent) der gewünschten Farbe ein. Sofern dir allerdings nur ein Wert aus dem Farbbereich "CMYK" zur Verfügung steht, musst du diesen in einen "HEX"- oder "RGB"-Wert umwandeln und in den Design Builder einfügen.    

Falls du ein Logo innerhalb der Navigationsleiste einfügen möchtest, klickst du auf "Logo" und lädst das von dir gewünschte Logo hoch. 

Die Anpassung der Navigationsleiste ("Optik"+"Logo") wirkt sich auf die folgenden Elemente innerhalb der finalen Journey aus: 

Beispiel - Tarifauswahl  

Hintergrund

Im nächsten Schritt hast du die Möglichkeit, sowohl die Hintergrundfarbe der gesamten Strecke als auch der jeweiligen Karten innerhalb der Strecke anzupassen. Hierfür musst du lediglich auf den Punkt "Hintergrund" klicken. 

Unter "Hintergrundfarbe" kannst du bestimmen, wie der Hintergrund der Strecke farblich aussehen soll. Wie auch schon bei der Gestaltung der Navigationsleiste musst du hierbei den "HEX"- oder "RGB"-Wert der Farbe eintragen und die Transparenz (in Prozent) angeben.

Beispiel - Tarifauswahl  

Vollkommen neu hingegen ist die Option "Papierhintergrund", in der du die Farbe der einzelnen Karten anpassen kannst. Diese Neuerung hilft dir dabei, deine Strecken noch vielfältiger und ansprechender zu gestalten.     

Beispiel - Zahlungsmethoden  

Farben

Während du in der alten Version des Design-Builders nur eine einzelne Farbe für das Design deiner Strecken auswählen konntest, hast du nun die Möglichkeit, fünf unterschiedliche Farben zu konfigurieren:

Primärfarbe: Die Primärfarbe hat Einfluss auf das farbliche Design der Buttons, Symbole und der Fortschrittsanzeige. 

Beispiel - Tarifauswahl

Beispiel - Angabe des Kunden

Sekundärfarbe: Die Sekundärfarbe hingegen bestimmt über den unteren Abschnitt der Produktbilder innerhalb des Tarifauswahl-Fensters oder eben Bonus-Banner, wenn diese nicht explizit in der Sektion “Gutschein” geändert werden. 

Beispiel - Tarifauswahl  

Fehlermeldung: In diesem Feld kannst du die Farbe der Fehlermeldungen innerhalb einer Strecke anpassen. 

Rahmen: Hier kannst du die Farben für Rahmen in der Journey wählen

Beispiel - Tarifauswahl  

Trennlinien: Hier kannst du die Farben für die Trennlinien, die zum abgrenzen von Abschnitten in der Journey genutzt werden können, wählen. 

Gutschein

Hier kannst du alle Farbeinstellung vornehmen die für Gutscheine, Boni oder sonstige Aktion verwendet werden soll. 

Beispiel - Tarifauswahl  

Typographie 

Wie der Name bereits verrät kannst du hier die Farbe und Form der textlichen Inhalte anpassen.

Unter "Optik" wählst du zunächst einmal eine Primärfarbe aus. Diese hat Einfluss auf die Überschriften und Preise. 

Beispiel - Tarifauswahl 

Im nächsten Schritt geht es darum, eine Sekundärfarbe auszuwählen, die über die Farbe des Fließ-, sowie Eingabetextes bestimmt. 

Beispiel - Tarifauswahl 

Farbe der Überschrift: Hier kann die Farbe der Überschrift geändert werden. 

Beispiel - Tarifauswahl 

Link Farbe: Hier kann die Farbe für vorhandene Links in der Journey angepasst werden. Zu dem kann auch noch die Farbe gewählt werden die beim Hover über den Link erscheinen soll. 

Beispiel - Zusammenfassung 

Unter der Option "Schrift" hingegen kannst du die Schriftart deines Designs anpassen. Hierbei hast du zwei Möglichkeiten: 

1. Du wählst eine der im Design-Builder integrierten Schriftarten aus. 

   

2. Du lädst eine eigene Schriftart hoch. Achte hierbei nur darauf, dass die entsprechende Datei das Format "WOFF", "WOFF2", "TTF" oder "EOT" besitzt. 
   

   

   Nachdem du eine oder mehrere Schriften hochgeladen hast, musst du die gewünschte Schrift nur noch über die Klappliste auswählen. Außerdem werden die von dir hinzugefügten Dateien unterhalb des Hochladen-Fensters angezeigt.    

Sobald du ein Design erstellt oder bearbeitet hast, musst du auf den "Speichern"-Button klicken. Erst dann werden deine Einstellungen übernommen. Sofern du den Design-Builder verlässt, ohne deine Änderungen zuvor abzuspeichern, werden deine Anpassungen nicht in das jeweilige Design integriert.

Form

Hier kannst du den Radius bzw. Abrundungen deiner Formen bestimmen. 

Beispiel - Auswahl von Blöcken 

Ein Radius von 0 bedeutet das keine Abrundung vorliegt.

Eingabefelder

Hier kannst du alles einstellen rund um Eingabefelder

Beispiel - Angabe des Kunden 

Mit Randradius kannst du wieder kannst du hier wieder die Form der Eingabefelder anpassen und auch die Höhe verändern. Mit der Variante kannst du bestimmen wie bzw. wohin die Beschreibung des Eingabefeldes erscheinen soll und wie das Eingabefeld aussieht im generellen. 

Schaltflächen

Hier kannst du alles einstellen rund um Schaltflächen. Besondere Funktion ist hier der “Linear Gradient”. Du kannst jetzt die Schaltflächen mit Farbverlauf gestalten. 

Beispiel - Verfügbarkeit

Komponenten

Hier kannst du alles einstellen rund um Kopierten, wie Karte, Dropdown oder Schalter. Besondere Funktion ist hier der “Linear Gradient”. Du kannst jetzt die Komponenten wie Karte mit Farbverlauf gestalten. 

Beispiel Karte - Verfügbarkeit

Beispiel Dropdown - Angabe des Kunden

Beispiel Schalter - Block

Beispiel Kontrollkästchen - Block

Beispiel Datumsfeld - Zusammenfassung

Beispiel Chip

Bestätigung deines erstellten Designs

Nachdem du alle von dir gewollten Änderungen an dem Design vorgenommen hast kannst du nun dein Design speichern. Falls der Design-Builder hier noch Schwierigkeiten mit dem Kontrast oder der Barrierefreiheit feststellt wirst du darüber informiert und kannst Änderungen entweder selbst oder mit dem “Automatisch beheben” Button.

Nachdem du ein neues Design erstellt und gespeichert hast, erscheint im Anschluss eine Meldung, die deine Änderungen bestätigt.