Styleguide
Source of truth of this template.
Headings
Heading Jumbo
Heading Jumbo
Heading Jumbo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Paragraphs & Links

Paragraph-bigger

Paragraph

Paragraph-de-emphasized

Paragraph-smaller

Paragraph-tiny

Label
A text link
Buttons & Form Elements
Rich Text Element

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • The rich text element allows you to create and format headings
  • Headings, paragraphs, blockquotes, figures, images, and figure captions
  • A rich text element can be used with static or dynamic content.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  1. Kenne deine Zielgruppe.

    Sei dir bewusst für wen du die Daten aufbereitest – auf welchem Wissenstand sind die Personen, welche Kennzahlen sind wichtig und wie geschult ist die Zielgruppe im Umgang mit Daten? Es ist immer empfehlenswert zu Beginn ein klares Ziel zu definieren, was mit der Visualisierung erreicht werden soll.


  2. Struktur bringt’s, die magische Sieben. 


    Bunte und grelle Farben, Hintergrundbilder, überladene Tooltips und ein kleiner Roman. 
Wenn man mal so richtig in Fahrt kommt möchte man oft am liebsten alle Optionen nutzen, um das Dashboard so informativ und toll wie möglich zu gestalten. Da passiert es leicht, dass wir außer Acht lassen was überhaupt effektiv von unserem Gehirn verarbeitet werden kann.
    
Die Kapazitäten sind nämlich begrenzt. Hier kommt das Prinzip der magischen Sieben ins Spiel. Es besagt, dass unser Auffassungsvermögen es maximal schafft sieben Informationseinheiten gleichzeitig zu verarbeiten. Mehr sollte also auch nicht auf unser Dashboard.


  3. Achtung vor der Minimalismus-Falle.  

    
Überfüllte Dashboards sind also unübersichtlich, verwirrend und damit am Thema vorbei. 
Wer jetzt innerlich den Radiergummi ansetzt und denkt Achsen-Beschriftungen, Währungen, Titel oder sonstige Beschreibungen sind überflüssig, der schafft vermutlich ein ansehnliches Dashboard in Sachen Design. Ein informativer Mehrwert geht aber ziemlich sicher verloren. 
Der Mittelweg macht es also.
    

Tipp: Zu Beginn erst mal sämtliche Designelemente, Labels, etc. ausblenden. Das hilft dabei, den Blick für das Wesentliche zu schärfen. Danach Schritt für Schritt die Elemente durchgehen und notwendige beziehungsweise unterstützende Informationen hinzufügen. Für Farben gilt: so wenig wie möglich, so viel wie nötig.

  4. Auf die Form kommt es an.


    Der Kernpunkt einer aussagekräftigen Visualisierung ist natürlich die richtige Darstellungsform.
 Die Auswahl hierbei richtet sich danach, welche Daten und wieviele unterschiedliche Variablen dargestellt werden sollen. Die beliebtesten Diagramme und wofür sie geeignet sind haben wir hier zusammengefasst.

  5. Nicht in die Irre führen. 


    Sollen Daten operativ genutzt werden, ist Qualität und Vertrauen das Um und Auf. 
Daher ist es zum einen wichtig, zu Beginn alle Werte auf ihre Plausibilität zu prüfen und so sicher zu stellen, dass die Zahlen korrekt sind. 
Zum anderen ist es wesentlich bei der Darstellung gegebenenfalls vertrautenschaffende Elemente wie Quellenangaben oder einen Zeitstempel für die letzte Datenaktualisierung zu ergänzen. Vor allem aber sollten Achsen immer gleichmäßig skaliert sein, andernfalls werden Vergleiche schnell irreführend.