Ein Design erstellen
Sie beginnen damit, eine vorhandene Story zu duplizieren und ein neues Design zu erstellen, mit dem Sie die Story stylen können.
- Melden Sie sich bei ArcGIS StoryMaps mit Ihrem ArcGIS-Organisationskonto an.
Hinweis:
Wenn Sie über kein Organisationskonto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.
- Öffnen Sie die Story Smoke on the Horizon.
- Scrollen Sie durch und lesen Sie den Inhalt.
Die Story enthält eine Karte, Fotos, Text, Schaltflächen und Links zu Datenquellen. Sie erstellen eine Kopie davon. Sie sind dann Besitzer der Kopie, die Sie bearbeiten können.
- Klicken Sie auf dem Menüband auf die Schaltfläche Weitere Aktionen und dann auf Story duplizieren.
- Klicken Sie im Fenster Diese Story duplizieren auf Ja, duplizieren.
- Löschen Sie den Text (Kopie) aus dem Titel, damit nur Smoke on the Horizon verbleibt.
Die Story verwendet derzeit das Standarddesign mit weißem Hintergrund, dunkelgrauem Text und blauen Akzenten. Diese Farben passen nicht zur Story. Der Rauch von Waldbränden erzeugt eine dunkle, dunstige und bedrohliche Stimmung. Die Karte und die Fotos in der Story unterstützen diese Stimmung, nicht aber das Design. Sie suchen nach einem anderen Design.
- Klicken Sie auf dem Menüband auf Design.
- Klicken Sie im Bereich Design unter Design auf die Option Mesa.
- Scrollen Sie durch die Story, um die Änderungen zu überprüfen.
Das Design Mesa passt besser zu den Farben der Story als das Standarddesign Summit, aber die Stimmung, die es erzeugt, ist hell und klar. Sie erstellen ein individuelles Design, um die Story rauchiger, düsterer und ein wenig unheilvoll erscheinen zu lassen.
- Klicken Sie auf den Link Eigene Designs verwalten.
- Klicken Sie auf die Schaltfläche Neues Design.
- Klicken Sie im Bereich Startpunkt auswählen auf Obsidian und dann auf Auswählen.
Wenn Sie ein Design als Ausgangspunkt auswählen, werden die Farben, Schriftarten und anderen Merkmale des Designs als Ausgangspunkt in den Editor geladen. Da Sie sich für eine dunklere, rauchiger wirkende Story entschieden haben, sind der dunkle Hintergrund und die roten Akzentfarben von Obsidian ein guter Ausgangspunkt für die Arbeit.
- Löschen Sie im seitlichen Bereich Unbenanntes Design und geben Sie Smoke ein.
Schriftarten und Farben auswählen
Als Nächstes wählen Sie Schriftarten und Farben, die einen ernsten Tenor unterstreichen. Sie übernehmen Farben von der Karte und den Fotos, die bereits in Ihrer Story vorhanden sind, und stellen sicher, dass diese Farben den Richtlinien für Barrierefreiheit hinsichtlich des Kontrastverhältnisses entsprechen.
- Blenden Sie im seitlichen Bereich den Bereich Farben ein, und klicken Sie auf das Menü Hintergrundfarbe.
- Löschen Sie #0e1116, und geben Sie #272520 ein.
Die Hintergrundfarbe der Seite ändert sich in Dunkelbraun. Diese Farbe entspricht der Hintergrundfarbe (die Farbe des Ozeans) in der Vorhersagekarte für den Rauch.
Tipp:
Sie können Erweiterungen für Ihren Webbrowser installieren, mit denen Sie die Hexadezimalwerte von Farben in Karten, Fotos und anderen Grafiken ermitteln können. Eye Dropper ist ein Beispiel für eine solche Erweiterung.
- Aktivieren Sie für Kopfzeilenfarbe die Option Designfarben verwenden.
Sie legen diese Eigenschaft später im Abschnitt Typologie fest. Wenn Sie diese Option aktivieren, können Sie diese Farben in diesem Abschnitt weiter anpassen.
- Klicken Sie auf das Menü Akzentfarbe. Wählen Sie in der Liste Grundfarben die orangefarbene Option, oder geben Sie #C86624 ein.
- Scrollen Sie durch die Beispiel-Story, um zu sehen, wo orangefarbene Akzente angezeigt werden.
Die Akzentfarbe wirkt sich auf Schaltflächen, Links, Trennlinien und Zitate aus. Orange wird mit Feuer in Verbindung gebracht, passt also zum Thema Ihrer Story.
- Blenden Sie den Abschnitt Typografie ein.
Schriftarten haben einen Charakter. Sie versuchen, mit diesem Design einen ernsthaften Tenor zu unterstreichen, daher sollten Sie jede Schriftart vermeiden, die zu lässig, verspielt oder dekorativ aussieht. Die Schriftart Charter BT hat einen formellen Charakter und passt daher gut zu Ihrem Design. Viele der in diesem Menü verfügbaren Schriftarten könnten ebenfalls geeignet sein, so dass die Wahl der Schriftart weitgehend vom Geschmack abhängt. Denken Sie bei der Auswahl von Schriftarten daran, woran Sie sich bei den jeweiligen Schriftarten erinnern. Eine Schriftart, die an eine Hochzeitseinladung, ein Kinderbuch oder ein Online-Spiel erinnert, ist vielleicht nicht die beste Wahl für eine Story über den Rauch eines Waldbrandes. Eine Schriftart, die an offizielle Dokumente erinnert, ist besser geeignet.
Die Schriftart Charter BT, die derzeit für den Titel verwendet wird, ist eine gute Option für eine amtlich wirkende Schriftart, Sie behalten Sie deshalb bei.
- Klicken Sie für Titel und Überschriften auf das Farbmenü. Geben Sie #A6671B ein.
Der Titeltext ändert sich in eine gelb-orange Farbe, die von einem der Fotos in Ihrer Story übernommen wurde.
Neben dem Farbmenü wird ein Warnsymbol angezeigt. Es zeigt an, dass der Kontrast zwischen Text- und Hintergrundfarbe zu gering ist, sodass der Text schwer lesbar ist.
- Klicken Sie im Fenster der Farbauswahl auf den Pfeil neben Nicht lesbar.
Die Informationen in diesem Abschnitt geben Aufschluss darüber, wie gut sich die Textfarbe vom Hintergrund abhebt. Die angegebenen Zahlen sind Kontrastverhältnisse. Ein Kontrastverhältnis gilt als lesbar, wenn es die in den WCAG 2.1 AA-Leitlinien festgelegten Schwellenwerte erreicht. In diesem Fall hebt sich die Farbe Orange gut vom Hintergrund ab, nicht aber vom sekundären Hintergrund.
Die sekundäre Hintergrundfarbe ist eine hellere Version der braunen Hintergrundfarbe. Sie wird automatisch generiert und kann nicht konfiguriert werden. Sie machen die Farbe Orange heller, damit sie vor beiden Hintergründen lesbar ist.
- Bewegen Sie den Kreis im Feld der Farbauswahl ein wenig nach oben und nach links. Sie können aber auch #BC7F38 eingeben.
Die Zahlen für das Kontrastverhältnis werden grün angezeigt, sodass ein ausreichender Kontrast zu den beiden Hintergrundfarben besteht.
Die Warnungen zum Kontrast sollten nicht ignoriert werden. Auch wenn Sie den Titel in der von Ihnen gewählten Farbe problemlos lesen können, ist dies für andere Menschen möglicherweise nicht möglich. Die Beachtung der Warnhinweise ermöglicht es Ihnen, eine barrierefreie Story zu erstellen.
Für die Absätze wählen Sie die gleiche Schriftart wie für den Titel und die Überschriften. In der Kartografie wird oft empfohlen, nur eine oder zwei Schriftarten zu verwenden, da es einfacher ist, eine Karte mit wenigen Elementen attraktiv und effektiv zu gestalten als mit vielen. Sie befolgen diese Empfehlung auch für Ihr Design, verwenden in Ihrer Story jedoch nur eine Schriftart.
- Wählen Sie für Absatz die Schriftart Charter BT.
Indem Sie in Ihrem Design nur eine Schriftart verwenden, haben Sie mehr Spielraum für farbliche Variationen.
- Ändern Sie für Absatz die Farbe in #C8BEA4.
Diese Farbe ist eine hellere Version der Titelfarbe. Sie ist nicht so stark gesättigt, was sie rauchiger wirken lässt und zum Design der Story passt. Zudem ist sie heller, was den Kontrast zum Hintergrund erhöht. Je kleiner der Text ist, desto wichtiger wird der Kontrast für die Lesbarkeit.
- Legen Sie für Untertitel die Farbe #B5ADB7 fest, ein blasses, nicht gesättigtes Violett.
Die drei Textfarben wurden von einem der in der Story enthaltenen Fotos inspiriert.
Die Übernahme von Farben aus Fotos und Grafiken ist eine zuverlässige Methode für die Entwicklung eines Farbschemas. Diese Farben helfen dabei, den Tenor der Story anhand des Farbtons der Fotos festzulegen. Die Textfarben Orange und Gelb entsprechen ebenfalls der Symbolisierung der Karte.
Es sind nicht genau die gleichen Farben, aber sie sind einander ähnlich genug, damit die Story stimmig wirkt.
Die blasse Violett sieht auf dem braunen Hintergrund gut aus, aber wird nur an wenigen Stellen überhaupt verwendet. Vielleicht möchten Sie diese Farbe auch an anderen Stellen wiederverwenden. Sie werden sie als optionale Akzentfarbe festlegen, damit Sie später darauf zugreifen können.
- Scrollen Sie im seitlichen Bereich nach oben. Klicken Sie im Abschnitt Farben unter Optionale Akzentfarben auf das erste Farbmenü und legen Sie die Farbe #B5ADB7 fest.
Diese Farbe wird nicht sofort auf alle Story-Elemente angewendet, aber sie ist später im Story Builder verfügbar.
Weitere Design-Elemente festlegen
Als Nächstes ändern Sie das Aussehen von Schaltflächen und Links im Design.
- Blenden Sie die Abschnitte Farben und Typografie aus und den Abschnitt Schaltflächen ein.
Die Story des Beispiels springt an die Stelle, an der sich die Beispielschaltfläche befindet.
Die Schaltfläche sieht in Orange sehr auffällig aus. Für manche Storys sind auffällige Schaltflächen angebracht. So sollte zum Beispiel eine Schaltfläche, die zum Handeln auffordert, sehr gut sichtbar sein. In Ihrer Story möchten Sie jedoch nicht, dass die Schaltflächen vom Text des Absatzes ablenken, also ändern Sie sie in eine weniger auffällige Farbe, die weniger Aufmerksamkeit erregt.
- Aktivieren Sie im seitlichen Bereich das Kontrollkästchen Benutzerdefinierte Farbe verwenden.
- Legen Sie die Farbe auf #776f5b fest.
Die grau-braune Farbe hat einen ähnlichen Farbton wie der Text der Story. Es ist ein matter Farbton, der die Aufmerksamkeit nicht vom Text ablenkt und hell genug vor dem Hintergrund ist, um den Kriterien der Barrierefreiheit zu entsprechen.
Um den Farbkontrast zu erhöhen und die Lesbarkeit zu verbessern, wurde der Text der Schaltflächen von Schwarz auf Weiß geändert. Außerdem legen Sie die Schaltfläche auf ein eckiges Format fest, um sie besser an der geraden Linie auszurichten, die das Design für den Zitatblock verwendet.
- Klicken Sie unter Schaltflächen auf den ersten Schaltflächentyp mit den eckigen Ecken.
- Blenden Sie den Abschnitt Links ein, und wählen Sie die zweite Option.
Die orangefarbene Akzentfarbe war zu auffällig für die Schaltflächen, scheint aber für das Unterstreichen von Links geeignet zu sein, so dass Sie sie nicht durch eine benutzerdefinierte Farbe ersetzen.
- Blenden Sie den Abschnitt Trennlinien ein. Wählen Sie unter Position die letzte Option aus.
Die Beispieltrennlinie erstreckt sich über die gesamte Breite der Story.
Es gibt weitere Optionen für Zitate und Grundkarten. Da beides in Ihrer Story nicht vorkommt, werden Sie diese Elemente nicht anpassen.
Das Design veröffentlichen
Sie veröffentlichen das Design und geben es frei, damit Sie es auf Ihre Story anwenden können.
- Scrollen Sie durch die Beispiel-Story, und überprüfen Sie das Design.
Es zeigt ein sachliches und formelles Aussehen, und die Farben passen zum Design von Waldbränden und Rauch.
- Klicken Sie auf dem Menüband auf Veröffentlichen.
Sie planen, die Story von Smoke on the Horizon mit der Öffentlichkeit zu teilen, also muss das Design auch öffentlich freigegeben werden. Andernfalls sehen Benutzer, die keinen Zugriff auf das Design haben, die Story mit dem Standarddesign.
- Wählen Sie unter Freigabeebene festlegen die Option Alle (öffentlich) aus.
- Aktivieren Sie unter Erweiterte Optionen das Kontrollkästchen Duplizierung zulassen.
Diese Option ermöglicht es Ihnen, eine Kopie Ihres Designs zu erstellen und es später zu ändern.
- Klicken Sie auf Freigeben.
Das Design auf die Story anwenden
Als Nächstes wenden Sie Ihr Design an und überprüfen, wie es sich auf das Aussehen und die Stimmung Ihrer Story auswirkt. Sie setzen eine der Farben des Designs außer Kraft.
- Kehren Sie zur Browser-Registerkarte mit Ihrer Story zurück. Optional können Sie die Registerkarte mit Ihrem Design schließen.
Hinweis:
Wenn Sie zuvor die Registerkarte mit Ihrer Story geschlossen haben, melden Sie sich bei Ihrem ArcGIS-Konto an. Klicken Sie auf der Registerkarte Inhalt auf das ArcGIS StoryMaps-Element Smoke on the Horizon. Klicken Sie auf Story bearbeiten.
- Klicken Sie auf dem Menüband auf Design.
- Scrollen Sie zum unteren Ende des Bereichs Design, und klicken Sie auf Eigene Designs durchsuchen.
- Klicken Sie in der Design-Galerie auf die Kachel Smoke.
Das Design wird auf die Story angewendet.
- Schließen Sie den Bereich Design, und scrollen Sie durch die Story, um zu sehen, wie sie mit dem neuen Design angezeigt wird.
Der Hintergrund der Karte fügt sich nahtlos in den Hintergrund der Story ein, und der Text und die Akzentfarben passen zu den Fotos und der Karte.
- Scrollen Sie bis zum Ende der Story.
In der ersten Zeile des Quellennachweises wird die Farbe Orange für Titel und Überschriften verwendet.
Sie haben diese Farbe im Hinblick auf einen größeren Text gewählt und bevorzugen eine Farbe mit höherem Kontrast für diese kleinere Schrift. Sie setzen das Design außer Kraft und wählen eine andere Farbe.
- Markieren Sie die Textzeile, die mit This story was created for beginnt.
- Klicken Sie in dem angezeigten Menü auf die Schaltfläche Farbe.
Unter Empfohlen sind vier Farben aufgeführt. Hierzu zählen auch die Titel- und Akzentfarben, die Sie in Ihrem Design festgelegt haben.
- Klicken Sie unter Empfohlen auf das blasse Violett. Vergewissern Sie sich, dass der Farbkontrast als Lesbar aufgeführt ist.
Die Farbe des Textes ändert sich in Violett.
Die Story veröffentlichen
Zum Abschluss veröffentlichen Sie die Story und geben sie für die Öffentlichkeit frei.
- Klicken Sie auf dem Menüband auf Vorschau anzeigen.
- Klicken Sie auf Ja, Vorgang fortsetzen.
- Scrollen Sie durch die Story, um sie zu überprüfen.
- Klicken Sie auf der Werkzeugleiste der Vorschau auf die Schaltfläche Vorschau schließen.
- Klicken Sie auf dem Menüband auf Veröffentlichen.
- Wählen Sie unter Freigabeebene festlegen die Option Alle (öffentlich) aus.
- Klicken Sie auf Freigeben.
Ihre Story ist fertig. Dank Ihres benutzerdefinierten Designs hat es einen zum Thema passenden Ton und eine entsprechende Stimmung. In diesem Lernprogramm haben Sie Folgendes gelernt:
- Erstellen eines benutzerdefinierten Designs, das den richtigen Akzent für Ihre Story festlegt
- Erstellen einer konsistenten und kohärenten Atmosphäre durch die Verwendung von bereits in der Story vorhandenen Farben
- Auswählen von Farben, die den Richtlinien für Barrierefreiheit entsprechen
Weitere Lernprogramme finden Sie in der Lernprogrammgalerie.