Abläufe und Zahlen.
Acht Muster für Prozesse und sechs für Diagramme, Statistiken, Tabellen und Schaubilder. Jeweils im Querformat für Präsentationen und im Hochformat für Konzepte und Angebote.
Bisher.
- Alles wiegt gleich. Ein Kickoff sieht aus wie drei Monate Umsetzung.
- Kein Wer, kein Wann. Zuständigkeit und Dauer stehen, wenn überhaupt, im Fließtext.
- Keine Abzweigung, keine Runde. Wenn-dann und Korrekturschleifen passen nicht in einen Stapel.
- Farbe ohne Aufgabe. Türkis, Koralle, Gelb stehen für Phasen, auch wenn der Ablauf gar keine Phasen hat.
Formen zeigen was, Farben zeigen wie weit.
Formen aus den Grundformen der Design DNA (element_circle, element_square in assets/grafiken). Farbrollen wie in ui-system.md: Türkis erledigt, Gelb weiter, Koralle Achtung. Farbe steht nie allein, der Status steht immer auch in Mono daneben.
Ein gelber Punkt.
- Der Punkt am Satzende. Unsere Ein-Wort-Headlines enden mit einem gelben Punkt. Ein Ablauf endet genauso: mit einem gelben Punkt hinter dem letzten Schritt.
- Ohne Rand. Alle Schritte haben einen schwarzen Rand, das Ergebnis als einziges nicht. So hebt es sich ab, ohne schwerer zu werden.
- Gelb gehört dem Ergebnis. Damit es keine zweite gelbe Bedeutung gibt, wird „läuft“ zum halb gefüllten türkisen Kreis. Türkis zeigt den Fortschritt: halb läuft, voll erledigt.
- Etwas größer als ein Schritt. Faktor 1,2. Ohne Rand wirkt der Punkt sonst kleiner als die Kreise davor.
Ein Raster für jeden Schritt.
- Marker IBM Plex Mono, Caption-Größe, versal. Nummer, Zeit, Rolle, Status.
- Name Funnel Display 600, Subhead-Größe. Ein bis drei Wörter, höchstens zwei Zeilen.
- Erklärung Funnel Sans 300, 85 % der Body-Größe. Ein Satz, höchstens drei Zeilen.
- Abstände immer gleich: ein fester Schritt zwischen den Zeilen-Rollen, keine Einzelabstände. Nebeneinander stehende Schritte teilen sich ein Zeilenraster: Namen, Erklärungen und Marker stehen auf einer Höhe, auch wenn ein Text länger ist. Beschriftungen hängen an der Kante, die von der Linie weg zeigt, und wachsen von ihr weg.
- Prüfung Jede Fläche wird automatisch auf Überlagerungen von Text, Formen und Linien und auf Höhensprünge in Zeilen geprüft. Jede neue Fläche muss die Prüfung ohne Treffer bestehen.
Welches Muster passt?
Mischformen sind erlaubt: Ein Zeitplan kann Bahnen haben, ein Gleis eine Weiche. Dann gelten die Regeln beider Muster.
Gleis.
FürGeradlinige Abläufe mit drei bis sieben Schritten, ohne Abzweig.
Nicht fürAbläufe mit Entscheidungen oder Wiederholungen.
- Eine Linie, Kreise als Stationen, ein eigenes Zeichen fürs Ergebnis.
- Status über die Füllung des Kreises, zusätzlich in Mono.
- Quer: links nach rechts. Hoch: oben nach unten.
In fünf Etappen online.
In fünf Etappen online.
Eine Linie, fünf Stationen, gelesen von oben nach unten. Im Hochformat hat jede Station Platz für zwei, drei Sätze.
Schichten.
FürAbläufe, bei denen jeder Schritt auf dem vorigen aufbaut und ohne ihn nicht geht.
Nicht fürSchritte, die parallel laufen könnten.
- Quer als Treppe, hoch als Stapel.
- Linien nur als Trenner: quer senkrecht, hoch waagerecht. Den Rest trägt die Fläche.
- Im Hochformat wird von unten gelesen. Die Nummern sagen es.
Jede Stufe steht auf der vorigen.
Jede Stufe steht auf der vorigen.
Im Hochformat wird die Treppe zum Stapel. Gelesen wird von unten nach oben, jede Schicht liegt auf der darunter.
Schleife.
FürWiederkehrende Runden: Korrekturen, Freigaben, Sprints, Reportings.
Nicht fürEinmalige Abläufe. Jede Schleife braucht einen Ausgang.
- Pfeile nur hier, weil die Richtung sonst offen ist.
- Der Rückweg ist koralle, der Ausgang türkis.
- In der Mitte steht, was die Runde begrenzt.
Bis es passt.
inklusive
Entwurf. Wir zeigen einen Stand, keinen Endstand.
Feedback. Sie sammeln die Anmerkungen gebündelt, aus allen Abteilungen.
Korrektur. Wir arbeiten alles in einem Durchgang ein. Das ist der koralle Rückweg.
Bis es passt.
inklusive
Entwurf. Wir zeigen einen Stand, keinen Endstand.
Feedback. Sie sammeln die Anmerkungen gebündelt, aus allen Abteilungen.
Korrektur. Wir arbeiten alles in einem Durchgang ein. Das ist der koralle Rückweg.
Weiche.
FürAbläufe mit Wenn-dann: Prüfungen, Zuständigkeiten, Sonderfälle.
Nicht fürMehr als zwei Weichen auf einer Fläche. Dann aufteilen.
- Raute für die Frage.
- Ja-Ast türkis, Nein-Ast koralle, beide zusätzlich in Mono beschriftet.
- Äste laufen wieder zusammen, wenn das Ergebnis dasselbe ist.
Erst suchen, dann konzipieren.
Erst suchen, dann konzipieren.
Warum diese Weiche. Creative Strategy ist die Basis jeder Kundenarbeit. Bevor wir ein Konzept schreiben, suchen wir die bestehende Strategie: zuerst im Kanal des Kunden, dann bei den Kundenstrategien. Gibt es keine, wird keine erfunden.
Bahnen.
FürAbläufe mit mehreren Beteiligten, die sich Arbeit übergeben: Kunde, Beratung, Kreation, Technik.
Nicht fürAbläufe, in denen eine Person alles macht.
- Eine Bahn pro Rolle, Namen in Mono am Rand.
- Jeder Bahnwechsel ist eine Übergabe und damit sichtbar.
- Der erledigte Weg ist türkis.
Wer macht wann was.
Wer macht wann was.
Zeitplan.
FürAbläufe mit Wochen, Terminen, Meilensteinen. Angebote, Projektpläne.
Nicht fürAbläufe ohne verbindliche Zeiten. Ein Zeitplan verspricht Termine.
- Balken nach Status: erledigt, läuft, geplant.
- Ergebnisse in eigener Zeile.
- Hoch bleibt der Plan quer, darunter die Erklärung.
Zwölf Wochen, ein Plan.
Zwölf Wochen, ein Plan.
Konzept, Woche 1–3. Seitenstruktur, Inhalte, Zuständigkeiten.
Design, Woche 3–6. Startseite und Musterseiten, zwei Korrekturrunden. Endet mit der Designfreigabe.
Umsetzung, Woche 6–10. Programmierung, Inhalte einpflegen.
Test, Woche 10–11. Geräte, Browser, Weiterleitungen. Dann online.
Zoom.
FürAbläufe, die für eine Seite zu groß sind. Erst die Übersicht (Gleis), dann eine Seite pro Etappe.
Nicht fürKurze Abläufe. Drei Schritte brauchen keine drei Folien.
- Das Mini-Gleis oben zeigt, wo man im Ablauf ist.
- Jede Detailseite fragt dasselbe: was passiert, was gibt es, was brauchen wir.
- Große Ziffer statt Kasten.
Design.
Wir gestalten Startseite und zwei Musterseiten. Alles Weitere leitet sich daraus ab.
Klickbare Entwürfe für Desktop und Smartphone.
Texte und Bilder aus dem Konzept, gebündeltes Feedback.
Design.
Hier entscheidet sich, wie die Seite aussieht. Wir gestalten wenige Seiten gründlich statt viele halb.
Wir gestalten Startseite und zwei Musterseiten. Alles Weitere leitet sich daraus ab.
Klickbare Entwürfe für Desktop und Smartphone.
Texte und Bilder aus dem Konzept, gebündeltes Feedback.
Erzählt.
FürAbläufe im Fließtext von Konzepten und Angeboten, wo sie gelesen und nicht gescannt werden.
Nicht fürAbläufe, die man auf einen Blick erfassen muss.
- Große Ziffern, Ein-Wort-Headline mit gelbem Punkt.
- Die Ziffer trägt den Status als Unterstrich.
- Dauer in Mono unter jedem Schritt.
So entsteht Ihr Film.
So entsteht Ihr Film.
Für Konzepte und Angebote, in denen der Ablauf Teil des Textes ist. Große Ziffern, Ein-Wort-Headlines, ein Faden.
Flächen.
IdeeDie Seite selbst teilt mit. Eine Farbfläche trennt Titel und Ablauf, zeigt eine Rolle oder macht den Status zur Fläche.
NeuBisher steht alles auf Offwhite, Farbflächen gibt es nur als Phasentrenner.
- Fläche teilt, Linie verbindet.
- Eine Farbfläche pro Seite, angeschnitten bis an den Rand.
- Türkis und Koralle als Fläche, Gelb nie. Gelb bleibt der Punkt.
- Text auf Fläche immer schwarz.
In fünf Etappen online.
Wir sind in Woche 5. Konzept steht, das Design läuft.
Erst suchen, dann konzipieren.
Creative Strategy ist die Basis jeder Kundenarbeit. Bevor wir ein Konzept schreiben, suchen wir die bestehende Strategie.
Wo Koralle ist, sind Sie dran.
Wo Koralle ist, sind Sie dran.
So entsteht Ihr Film.
Konzept und Storyboard, von Ihnen freigegeben.
Zwei Drehtage bei Ihnen im Betrieb.
Die Rohfassung liegt bei Ihnen. Zwei Korrekturrunden.
Fassungen für Website, Social Media und Messe.
Design.
Hier entscheidet sich, wie die Seite aussieht. Wir gestalten wenige Seiten gründlich statt viele halb.
Wir gestalten Startseite und zwei Musterseiten. Alles Weitere leitet sich daraus ab.
Klickbare Entwürfe für Desktop und Smartphone.
Texte und Bilder aus dem Konzept, gebündeltes Feedback.
Acht Regeln für Abläufe.
- Eine Leserichtung.Quer von links nach rechts, hoch von oben nach unten. Ausnahme Schichten, und dann sagen es die Nummern.
- Höchstens sieben Stationen pro Fläche.Bei mehr wird gezoomt: Übersicht, dann eine Seite pro Etappe.
- Farben haben Aufgaben.Türkis zeigt Fortschritt (halb läuft, voll erledigt), Koralle zeigt, wo der Kunde dran ist oder korrigiert wird, Gelb das Ergebnis. Was geplant ist, bleibt Offwhite mit schwarzem Rand.
- Gelb sparsam.Gelb gehört dem Ergebnis, sonst nichts im Diagramm. Der gelbe Punkt der Ein-Wort-Headline zählt nicht mit.
- Keine Kästen um Schritte.Linie und Form tragen die Struktur, Text steht frei daneben.
- Pfeile nur, wo die Richtung offen ist.In Schleifen und auf Rückwegen. Ein Gleis braucht keinen.
- Drei Schriftrollen, eine Höhe.Marker, Name, Erklärung, immer in dieser Reihenfolge. Nebeneinander stehen gleiche Rollen auf einer Linie, die längste Spalte bestimmt die Zeile.
- Farbe nie allein.Status, Ja und Nein stehen zusätzlich in Mono. Wer schwarz-weiß druckt, liest den Ablauf trotzdem.
Zahlen.
Dieselbe Sprache für Diagramme, Statistiken, Tabellen und Schaubilder. Die Farben behalten ihre Aufgaben aus den Abläufen: Türkis für das Eigene und das Gute, Koralle für Abweichung und Achtung, Gelb für den einen Punkt, auf den es ankommt.
Fokus statt bunt.
Was der Farbtest sagt.
- Türkis und Koralle bleiben auch bei Rot-Grün-Schwäche unterscheidbar (Abstand 12,4, Ziel ab 8). Für normale Augen klar getrennt (32,8).
- Zu hell für Schrift. Auf Offwhite hat Türkis nur 1,85 : 1 Kontrast, Koralle 2,74 : 1. Deshalb nie Text in diesen Farben, nie als dünne Linie. Werte stehen schwarz neben der Fläche.
- Schwarz als Grundton. Schwarz ist im Test keine Kategorie-Farbe. Es trägt Linien, Achsen und alles, was nicht im Fokus steht, als Schwarz 30 %.
- Abstufungen für Mengen (Heatmaps, Karten): Schwarz 30, 47, 66 und 100 %. Gleichmäßig in der Helligkeit, keine eigene Grautabelle.
Kennzahl.
FürWenn eine Zahl die Aussage ist. Berichte, Startfolien, Zusammenfassungen.
Nicht fürVergleiche zwischen vielen Werten. Dann Balken.
- Zahl in Funnel Display, Bezeichnung und Veränderung in Mono.
- Die Grafik zählt mit: Quadrate für Mengen, Kreise für Anteile von 100.
- Verhältnis immer als grauer Umriss (das Ganze) und Füllung (der Teil).
Der September in vier Zahlen.
Der September in vier Zahlen.
Balken.
FürVergleiche zwischen Dingen: Kanäle, Produkte, Regionen. Auch Abweichungen nach oben und unten.
Nicht fürVerläufe über Zeit. Dann Linie.
- Der graue Umriss ist das Ganze, die Füllung der Anteil.
- Fokus statt bunt: eine Füllung Türkis, der Rest Schwarz 30 %.
- Abweichung: Türkis mehr, Koralle weniger, Mitte als Haarlinie.
Jede vierte Anfrage kommt über Empfehlung.
Messe verliert, Fachportale legen zu.
Veränderung zum Vorjahreszeitraum. Rechts von der Mitte mehr, links weniger. Türkis heißt mehr, Koralle heißt weniger, die Zahl steht immer dabei.
Verlauf.
FürEntwicklungen über Zeit: Besuche, Anfragen, Umsatz pro Monat.
Nicht fürZwei Größen mit verschiedener Einheit in einem Bild. Nie zwei Y-Achsen.
- Fläche statt Linie: das Vorjahr grau, der Zuwachs türkis obendrauf.
- Ein Rückgang wäre koralle.
- Der aktuelle Stand ist der gelbe Punkt.
Seit dem Relaunch wächst der Abstand.
Seit dem Relaunch wächst der Abstand.
Lesart. Die graue Fläche ist das Vorjahr, die türkise Fläche darauf der Zuwachs. Bis April ist sie kaum zu sehen, ab dem Relaunch wird sie jeden Monat breiter.
Anteile.
FürWie sich ein Ganzes aufteilt und wie sich das verschiebt: Budgets, Kanäle, Zielgruppen.
Nicht fürMehr als fünf Teile. Keine Torten, keine Donuts.
- 100 Quadrate je Ganzes, jedes Quadrat 1 %.
- Gefüllt ist Marke, grauer Umriss ist der Rest.
- Was zum Ziel fehlt, steht als Satz darunter.
Auf dem Weg zu 60 : 40.
Auf dem Weg zu 60 : 40.
Warum 60 : 40. Langfristig wirkt Werbung, die eine Marke aufbaut, stärker als reine Abverkaufswerbung. Als Faustregel gilt ein Verhältnis von etwa 60 zu 40 zwischen Marke und Performance.
Tabelle.
FürWenn genaue Werte zählen: Reports, Angebote, Vergleiche mit vielen Spalten.
Nicht fürEine Aussage, die man sehen soll. Dann ein Diagramm daneben.
- Kopf in Mono, Linien nur waagerecht als Haarlinie.
- Zahlen rechtsbündig mit gleich breiten Ziffern.
- Mini-Balken in der Zelle und Status mit Punkt und Wort.
Suchanzeigen bringen die günstigsten Klicks.
| Kanal | Impressionen | Klicks | CTR | Kosten in Euro | Ziel |
|---|---|---|---|---|---|
| Suchanzeigen | 48.200 | 2.410 | 5,0 % | 3.120 | erreicht |
| Social Ads | 185.300 | 2.040 | 1,1 % | 1.960 | erreicht |
| Display | 210.500 | 1.260 | 0,6 % | 1.480 | unter Ziel |
| Video | 96.400 | 580 | 0,6 % | 890 | erreicht |
| Fachportale | 22.800 | 310 | 1,4 % | 1.150 | läuft noch |
| Gesamt | 563.200 | 6.600 | 1,2 % | 8.600 |
Suchanzeigen bringen die günstigsten Klicks.
| Kanal | Klicks | CTR | Kosten in Euro | Euro je Klick | Ziel |
|---|---|---|---|---|---|
| Suchanzeigen | 2.410 | 5,0 % | 3.120 | 1,29 | erreicht |
| Social Ads | 2.040 | 1,1 % | 1.960 | 0,96 | erreicht |
| Display | 1.260 | 0,6 % | 1.480 | 1,17 | unter Ziel |
| Video | 580 | 0,6 % | 890 | 1,53 | erreicht |
| Fachportale | 310 | 1,4 % | 1.150 | 3,71 | läuft noch |
| Gesamt | 6.600 | 1,2 % | 8.600 | 1,30 |
Empfehlung. Display bleibt unter Ziel. Wir verschieben im Oktober einen Teil des Display-Budgets zu den Suchanzeigen und prüfen nach vier Wochen.
Schaubild.
FürPositionierungen, Portfolios, Matrizen. Wo etwas steht und wohin es soll.
Nicht fürExakte Messwerte. Ein Schaubild zeigt Lage, keine Genauigkeit.
- Achsen als Haarlinie durch die Mitte, Pole in Mono.
- Andere Marken als offene Kreise, die eigene Türkis.
- Ziel als gelber Punkt, Pfeil nur für die Bewegung.
Oben links ist noch frei.
Wo wir stehen. Fünf Anbieter in der Region, drei davon wirken austauschbar. Oben links ist Platz.
Wo wir hinwollen. Eigenständig werden, ohne die regionale Verankerung aufzugeben.
Oben links ist noch frei.
Wo wir stehen. Fünf Anbieter in der Region, drei davon wirken austauschbar. Oben links ist Platz.
Wo wir hinwollen. Eigenständig werden, ohne die regionale Verankerung aufzugeben.
Acht Regeln für Zahlen.
- Erst die Aussage.Die Headline sagt, was die Zahl bedeutet. „Jede vierte Anfrage kommt über Empfehlung“, nicht „Anfragen nach Kanal“.
- Fokus statt bunt.Eine Reihe in Farbe, der Rest in Schwarz 30 %. Höchstens zwei Farben pro Diagramm.
- Farben behalten ihre Aufgabe.Türkis das Eigene und das Gute, Koralle Abweichung nach unten und Achtung, Gelb ein einziger Punkt: Ziel oder aktueller Stand.
- Werte stehen dabei.Am Balkenende, am Linienende, im Segment. Farbe allein trägt keine Information.
- Umriss und Füllung.Jedes Verhältnis zeigt das Ganze als grauen Umriss und den Teil als Füllung, beim Balken, beim Kreis und beim Quadrat. Verläufe als Fläche. Kein 3D, keine Torten, eine Y-Achse.
- Jede Form zählt.Kein Punkt und keine Linie ohne Aufgabe. Gitter und Achsen nur als Haarlinie, wenn sie beim Ablesen helfen.
- Ecken 0, Lücke statt Rahmen.Segmente trennt eine 2 px breite Offwhite-Lücke, kein Strich drumherum.
- Zahlen richtig setzen.Große Kennzahlen in Funnel Display, Tabellenzahlen rechtsbündig mit gleich breiten Ziffern, Quelle in Mono darunter.