Zum Inhalt
TILLMANN
Für AgentenZur Homepage

Eine gemeinsame Markensprache.

Die Marke verstehen und im Alltag anwenden.
Regeln, Beispiele und Vorlagen für Sprache und Gestaltung.

Stand 28.09.2026 · Tokens 0.7.50

Die Marke in Anwendung.

tillmann.com, Startseite am Desktop: Wortmarke, Navigation, Aussage in großer Schrift, Lesetext, Pine-Button und Porträt.Dieselbe Startseite am Smartphone, 390 Pixel breit.
Websitetillmann.com · Desktop und MobilLiveWebsite-Bausteine ansehen
Handout-Cover 16:9 auf Snow: Wortmarke oben links, Rubrik Workshop-Dokumentation, Titel in Bold, Fußzone nur mit tillmann.com; Kunden- und Standfeld für diese Ansicht entfernt.
Handout-CoverGolden Sample · anonymisiert · 16:9BestätigtHandout-Vorlagen ansehen
Handout-Innenseite mit Kennzahl 6 in einer Frost-Karte, drei Erklärkarten rechts, die unterste in Pine.
Handout-SeiteGolden Sample · KennzahlBestätigtSeitenaufbau ansehen
Social-Motiv4:5 · regelgebundenes BeispielBeispielSocial-Vorlage ansehen
Story9:16 · Beispiel nach SerienprofilBeispielStory-Vorlage ansehen
BewegungSequenz · manuell startenBeispielBewegungsregeln ansehen
Die Ole Tillmann Show: Julian Teicke – Neustart für Berlin? Originalgrafik der Homepage.
PodcastDie Ole Tillmann Show · EpisodencoverLivePodcast öffnen
AI Signals: Originalgrafik des Newsletters auf der Homepage.
NewsletterAI Signals · OriginalgrafikLiveNewsletter öffnen

So arbeitest du mit dem Guide.

In vier Schritten zu einem Ergebnis, das zur Marke passt.

  1. Zielbild ansehenAnwendung und Referenz wählen, Erfolgskriterien vereinbaren.
  2. Layout aufbauenStartdatei mit Raster, Inhaltszonen und Abständen verwenden.
  3. Inhalte einsetzenText, Bilder und Logo nach den Regeln des Formats einsetzen.
  4. Prüfen und freigebenMit Referenz und Erfolgskriterien vergleichen, am Zielgerät prüfen und freigeben lassen.

Was möchtest du gestalten?

  • Websiteresponsiv · 1440 / 390 px
    Startseite von tillmann.com mit Aussage und frei sichtbarem Porträt.
    Veröffentlichte Website

    Beginne mit dem Seitenaufbau. Übernimm danach die passenden Bausteine.

  • Handout & Angebot16:9 · 1920 × 1080
    Handout mit einer Kennzahl und erklärenden Karten.
    Golden Sample · Startdatei ist ein Beispiel

    Wähle den Seitentyp, der deine Aussage am besten erklärt.

  • Bühne16:9 · 1920 × 1080
    Bühnenfolie mit Aussage und drei Karten.
    Golden Sample · Startdatei noch offen

    Eine Aussage trägt die Folie. Die Erklärung kommt von der sprechenden Person.

  • Social Feed4:5 · 1080 × 1350
    Regelgebundenes Beispiel

    Eine Aussage pro Motiv. Für einen Film gliederst du die Inhalte neu in Szenen.

  • Story & Reel9:16 · 1080 × 1920
    Serienbeispiel · keine allgemeine Reel-Vorlage

    Wähle zuerst: statische Story oder Film. Die Startdatei zeigt das Sehtipp-Profil.

  • PodcastDie Ole Tillmann Show
    Veröffentlichtes Episodencover der Ole Tillmann Show.
    Veröffentlichte Serie · Startdatei noch offen

    Orientiere dich an der bestehenden Serie, bevor du ein neues Episodencover gestaltest.

  • NewsletterAI Signals
    Veröffentlichte AI-Signals-Grafik.
    Veröffentlichte Referenz · Startdatei noch offen

    Sieh dir den bestehenden Newsletter als Referenz für die nächste Ausgabe an.

  • E-Mail-Signaturbis 360 px Breite

    Startdatei im Guide noch nicht verfügbar

    Name, Kontakt und Pflichtangaben klar ordnen. Logo und Text am Smartphone prüfen.

Weitere Hilfen

Statusangaben verstehen
  • Bestätigtaus aktiven Regeln
  • BeispielOrientierung, nicht normativ
  • Offennicht erfinden, als offen markieren
  • Liveveröffentlicht
Guide für Agenten

Regeln und Beispiele als Markdown oder strukturierte Daten.

Wofür TILLMANN steht.

Markenkern v1Richtung bestätigt am 15.08.2026Gesamtfassung noch nicht freigegeben

Handlungsfähigkeit in komplexer Veränderung.

Komplexe Veränderung so verstehen und gestalten, dass Menschen und Organisationen handlungsfähiger werden, wirksamer und effizienter handeln und ihre Erfolgswahrscheinlichkeit erhöhen.

Mission

Ole Tillmann arbeitet sich tief in reale Systeme, Organisationen und komplexe Vorhaben ein, macht die entscheidenden Strukturen sichtbar und gestaltet mit den Beteiligten Strategien, Narrative, Lernwege und funktionierende Lösungen, mit denen Menschen und Organisationen besser verstehen, entscheiden und handeln können.

Vision

Ole Tillmann wird zu einer international anerkannten Referenz für strategisches Design in komplexer Veränderung. Er verbindet strategische Tiefe, kommunikative Klarheit, visuelle Intelligenz und technologisches Verständnis zu außergewöhnlich guten, nutzbaren Systemen.

Markenversprechen

Komplexität tief verstehen. Auf den Punkt bringen. Handlungsfähigkeit gestalten. Erfolgswahrscheinlichkeit erhöhen.

Vom Ungeklärten zum Verwendbaren

  1. Erkunden

    Die ungeklärte Lage öffnen, relevante Menschen und Evidenz einbeziehen und unbekannte Zusammenhänge sichtbar machen.

  2. Verdichten

    Muster, Beziehungen und Hypothesen zu einer belastbaren Heuristik beziehungsweise einem gemeinsamen Arbeitsmodell verbinden.

  3. Systematisieren

    Das Arbeitsmodell testen und so weit wie sinnvoll in Entscheidungen, Abläufe, Artefakte, Produkte oder wiederholbare Systeme überführen.

Werte

Neugier

In neue Systeme eintauchen, Verbindungen suchen, echte Fragen verfolgen.

Grenze: Neugier ohne Auswahl erzeugt keinen Markenauftrag.

Methodik

Einen nachvollziehbaren Weg bauen, Hypothesen testen und Lernen speichern.

Grenze: Methode darf nicht zu starrer Bürokratie werden.

Klarheit

Relevanz, Struktur, Evidenz und Konsequenz sichtbar machen.

Grenze: Klarheit darf Komplexität nicht verfälschen.

Verantwortung

Quellen, Rechte, Unsicherheit, Urheberschaft und Wirkung ernst nehmen; die eigene Arbeit als Teil gesellschaftlicher, wirtschaftlicher und institutioneller Systeme begreifen; bleiben, bis es trägt.

Grenze: Verantwortung bedeutet nicht, jede Ausführung selbst zu übernehmen.

Wärme

Direkt und präzise sprechen, ohne kalt, zynisch oder statusfixiert zu werden.

Grenze: Wärme ersetzt keine Position und keine klare Grenze.

Sprache und Ton

Starke Position, offen für das bessere Argument.

So schreiben wir
KI kann Teams helfen, Informationen schneller zu ordnen und Entscheidungen besser vorzubereiten.

Aufgabe, Menschen und Nutzen benennen. Aussagen belegen, Ungewissheit sichtbar lassen.

So nicht
Revolutionäre KI maximiert garantiert Ihre Transformation.

Keine unbelegten Superlative, Wirkungsgarantien oder austauschbaren Versprechen.

Beispielsätze zur Erläuterung, keine Tagline.

Unser Ton im Detail

Ole Tillmann klingt wie ein informierter, meinungsstarker und präziser Mensch, der etwas verstanden hat und es einem anderen Menschen erklärt. Die Sprache ist schnörkellos, klar und auf den Punkt. Fundierung trägt die Aussage; Witz, Leichtigkeit und trockener Humor machen sie menschlich, ohne die Substanz zu schwächen.

Kenntnisreich und auf Augenhöhe schreiben

Ole spricht aus fundierter Kenntnis und eigener Praxis. Er erklärt Zusammenhänge so, dass intelligente Menschen ohne technischen Hintergrund folgen können. Kompetenz zeigt sich durch präzise Beobachtungen, nachvollziehbare Erklärungen und begründete Urteile; sie braucht weder Selbstauszeichnungen noch belehrende Formulierungen.

  • Fachbegriffe für die Leser erklären, ohne Ole künstlich als Anfänger darzustellen. Keine erfundene Lerngeschichte wie „Ich habe gerade erst gelernt, was Cronjobs sind“ oder „Man lernt neue Begriffe“, wenn es tatsächlich um eine neue Perspektive auf Bekanntes geht.
  • Neue Beobachtungen als Weiterdenken aus der Praxis formulieren: Was wird durch die Arbeit sichtbar, welche Verbindung lässt sich daraus ableiten und was bedeutet das konkret?
  • Auf Augenhöhe bleiben. Keine Abwertung anderer, kein „Das sollte doch jeder wissen“, keine pauschalen Überlegenheitsgesten.
  • Wissen, persönliche Erfahrung und offene Fragen sauber unterscheiden. Fachliche Sicherheit darf Unsicherheit sichtbar machen; fehlende Belege nicht mit Selbstbewusstsein ersetzen.
Aus der Praxis weiterdenken
Die Arbeit mit KI-Agenten schärft meinen Blick auf unseren Alltag. Routinen, Zuständigkeiten, Abstimmung: Vieles, was wir für Agenten ausdrücklich organisieren müssen, gehört auch zur Zusammenarbeit zwischen Menschen.

Die neue Perspektive entsteht aus eigener Arbeit.

Keine erfundene Anfängerrolle
Man lernt neue Begriffe.

Unpassend, wenn der Begriff bereits bekannt ist und sich nur der Blick darauf verändert. Fachbegriffe für die Leser erklären; die eigene Erfahrung korrekt darstellen.

Vor Abgabe prüfen: Spricht Ole hier als kenntnisreicher Praktiker? Versteht eine nicht-technische Person die Aussage beim ersten Lesen? Bleibt der Ton respektvoll und frei von erfundener Unerfahrenheit oder Überheblichkeit?

Abgeleitet aus Tone of Voice 3.5 · bestätigt am 28.09.2026.

Vollständiger Markenkern

Acht verbundene Fähigkeiten

Strategisches Design ist die übergeordnete Methode. Die Fähigkeiten greifen ineinander.

  • Strategisches Design verbindet Beteiligte, Geschäftslogik, Organisation, Kommunikation und Umsetzung.
  • Menschenzentrierte Gestaltung und Prozessmoderation erzeugen Erkenntnis, Beteiligung, Optionen und Tests.
  • Redaktionelle Intelligenz und Auftrittskompetenz verbinden Fakten, Fragen, Vorstellungskraft, Aufmerksamkeit und Präsenz.
  • Visuelle Intelligenz macht Muster, Beziehungen und mögliche Handlungen wahrnehmbar.
  • Technologisches Verständnis und Übersetzungsfähigkeit verbinden technologische Mechanismen mit Geschäfts-, Organisations- und Gesellschaftsfolgen, ohne fremde Fachexpertise zu simulieren.
  • Systematisierung und Lerndesign machen Erkenntnisse anwendbar und wiederholbar.
  • Orchestrierung, Produktion und unternehmerische Umsetzungserfahrung bringen den Entwurf bis in den realen Betrieb.
  • Produktisierung speichert bewährte Methode als Denkmodell, Vorlage, Lernprodukt oder System.
Gesellschaftliche Verantwortung

Gesellschaftliche Verantwortung gehört ausdrücklich zu Oles Selbstverständnis. Er begreift sich nicht als Solitär, sondern als Teil einer demokratischen Gesellschaft und der sozialen Marktwirtschaft in Deutschland. Entscheidungen werden deshalb auch danach beurteilt, welche Folgen sie für Menschen, Institutionen und das gemeinsame System haben.

So wird Haltung im Handeln sichtbar
Machen
Denken muss in Test, Artefakt oder Handlung führen.
Gemeinsame Gestaltung
Fachleute und Partner erhalten echte Rollen, Anerkennung und Entscheidungsräume.
Zugang
Verständlichkeit und gesellschaftlicher Zugang werden bewusst gestaltet und finanziert.
Premium
Außergewöhnliche Qualität entsteht aus Substanz, Handwerk und Wirkung, nicht aus Dekoration. Premium gilt durchgängig für Inhalt, Beratungserlebnis, Sprache, Erscheinungsbild und jedes ausgelieferte Artefakt.
Ehrlichkeit
Fakt, Lesart, Empfehlung, Entscheidung und offene Frage bleiben unterscheidbar. Wissenschaftliches Arbeiten, nachvollziehbare Quellen und journalistische Standards sind verbindliche Qualitätsmaßstäbe.
Schreibregeln
  • ohne Anlauf einsteigen,
  • konkret statt bedeutungsschwer schreiben,
  • Position beziehen und Gewissheit ehrlich markieren,
  • Verben, Akteure, Kriterien und Konsequenzen nennen,
  • Fachbegriffe unmittelbar erklären,
  • Fakten, Lesart, Empfehlung und Entscheidung trennen,
  • Rhythmus variieren und trockenen Humor beiläufig einsetzen,
  • warm sprechen, ohne Höflichkeitsfüllung oder LinkedIn-Theater.
Quelle und Freigabestand

Markenkern v1, Entwurf 3, Abschnitte 3 bis 5 und 7. Die inhaltliche Richtung wurde am 15.08.2026 bestätigt. Die Gesamtfassung ist Freigabekandidat; bis zur Freigabe gilt dieser Stand als Arbeitsgrundlage.

Eine Aussage, vier Formate.

Format
Website Bestätigt
Große Überschrift bei 1440 px · 69,1 / 70,5 px · Rand 64 px · Fläche 1440 × 900
Rolle und Rand aus dem Website-Profil.
Handout 16:9 Bestätigt
Inhaltsüberschrift · 60 / 72 px · Rand 96 px · Fläche 1920 × 1080
Rolle und Zonen aus dem Handout-Vertrag.
Social 4:5 Beispiel
Social-Überschrift · 96 px · Rand 80 px · Fläche 1080 × 1350
Größe und Rand bestätigt; Zeilenhöhe und Oberkante offen (Beispiel: 1,08 und 140).
Story 9:16 Beispiel
Display (Sehtipp-Profil) · 108 / 120 px · Rand 64 px · Fläche 1080 × 1920
Sehtipp-Profil bestätigt, gilt nicht für jede Story.

Maßstabsgetreu. Jedes Format hat eigene Rollen; nichts wird verkleinert übernommen.

Richtig: Überschrift in Regular mit gemischter Schreibung, darunter Lesetext und eine Signal-Aktion.

So

Gemischte Schreibung. Hierarchie entsteht aus Rolle und Größe.
Falsch: Überschrift, Lesetext und Aktion durchgehend in fetten Versalien.

So nicht

Keine durchgehenden Versalien in Bold.

Drei Schnitte, klare Aufgaben

Regular trägt den Lesetext.

Medium führt durch Inhalte.

Bold setzt gezielte Schwerpunkte.

Alle Rollen je Format

Website

Responsive Schriftrollen in CSS-Pixeln; Desktop und Mobil haben eigene Werte.

Desktop

Website · Desktop
RolleGröße / ZeilenhöheSchnittLaufweite
Große Überschrift · bei 1440 px69,1 / 70,5Regular (400)−0,03 em
Abschnittsüberschrift36 / 40Medium (500)−0,02 em
Kartentitel24 / 32Medium (500)0 em
Zitat36 / 48Regular (400)0 em
Lesetext18 / 28Regular (400)0 em
Einleitung20 / 32Regular (400)0 em
Rubrik12 / 20Regular (400)0,08 em
Begleittext14 / 20Regular (400)0 em
Leistungs- und Akkordeontitel20 / 28Medium (500)0 em
Redaktionelle Zwischenüberschrift24 / 32Medium (500)−0,015 em
Aktion16 / 24Medium (500)0 em
Navigation16 / 24Regular (400)0 em
Menü · erste Ebene28 / 36Medium (500)−0,02 em
Menü · zweite Ebene20 / 28Medium (500)0 em

Mobil

Website · Mobil
RolleGröße / ZeilenhöheSchnittLaufweite
Große Überschrift36 / 40Regular (400)−0,03 em
Abschnittsüberschrift28 / 32Medium (500)−0,02 em
Kartentitel24 / 32Medium (500)0 em
Redaktionelle Zwischenüberschrift20 / 28Medium (500)−0,015 em
Zitat24 / 32Regular (400)0 em
Lesetext16 / 24Regular (400)0 em
Begleittext14 / 20Regular (400)0 em
Rubrik12 / 16Regular (400)0,08 em
Aktion16 / 24Medium (500)0 em
Leistungs- und Akkordeontitel18 / 26Medium (500)0 em
Menü · erste Ebene24 / 32Medium (500)−0,02 em
Menü · zweite Ebene18 / 28Medium (500)0 em

Gemeinsame Rollen

Website · Gemeinsame Rollen
RolleGröße / ZeilenhöheSchnittLaufweite
Einstellungen14 / 20Regular (400)0 em
Quellenhinweis12 / 20Regular (400)0 em

Die große Desktop-Überschrift zeigt den Referenzwert bei 1440 px.

Handouts & Angebote

Für Handouts, Worksheets und Angebote im 16:9-Leseformat, in Exportpixeln bei 1920 × 1080. Die Inhaltsüberschrift führt durch eine Seite, die Kapitelüberschrift eröffnet einen Abschnitt.

Handouts & Angebote · 1920 × 1080
RolleGröße / ZeilenhöheSchnittLaufweite
Inhaltsüberschrift60 / 72Medium (500)−0,03 em
Kartentitel30 / 40Medium (500)0 em
Zeilentitel24 / 34Medium (500)0 em
Lesetext24 / 34Regular (400)0 em
Kapitelüberschrift96 / 104Bold (700)−0,03 em
Instagram & Social · Feed und Karussells

Für Feed-Grafiken und Karussells bei 1080 px Breite. Diese Rollen werden nicht aus den Handout-Größen verkleinert.

Social · 1080 px Breite
RolleGröße / ZeilenhöheSchnittLaufweite
Überschrift96 / offenRegular (400)−0,03 em
Lesetext28–32 / Faktor 1,2Regular (400)kein eigener Wert
Reine Text- und Zitatfolie58 / Faktor 1,2Regular (400)kein eigener Wert
Begleittext26 / offenRegular (400)kein eigener Wert
Kleiner Begleittext24 / offenRegular (400)kein eigener Wert

Die Überschrift bleibt innerhalb eines Karussells gleich groß. „Offen“ heißt: keine Zeilenhöhe festgelegt.

Stories & vertikale Videos

Ein allgemeiner Schriftvertrag für Stories und Reels ist offen. Freigegebene Serien haben eigene Profile.

Sehtipp · bestätigtes Serienprofil

Für Sehtipp- und Best-of-Storys bei 1080 × 1920 Exportpixeln; gilt nicht automatisch für jedes vertikale Video.

Sehtipp-Story · 1080 × 1920
RolleGröße / ZeilenhöheSchnittLaufweite
Display108 /120Regular (400)−0,03em
Body und Untertitel48 /72Regular (400)0
Metadaten42 /60Regular (400)0
Rubrik36 /48Regular (400)+0,08em
Quellen und Kontextlabel36 /48Regular (400)0
Gesprochenes Wort48 /72Bold (700)auf regulären Wortvorschub eingepasst

Wortbudgets

Kürzen statt verkleinern

So nicht17 WörterFüllt die Fläche, wird zum Lesetext.
So4 WörterEine Aussage, sofort erfasst.

Gleiche Rolle, 96 px. Richtwert für Social-Überschriften: höchstens 6 Wörter.

Automatisch gezählt. Die kurze Fassung ist die Markenthese, kein Slogan.

Im Film zählt auch die Zeit.

Ein Wortimpuls, eine Erklärung und eine Demo brauchen unterschiedliche Textmengen und Standzeiten. Lege zuerst die Funktion der Szene fest.

Szenen und Lesezeit planen

Budgets je Kanal

Die Textmenge folgt dem Format. Wortzahl, Zeilen und Lesezeit werden getrennt geprüft. Erst kürzen, dann aufteilen; die Schrift wird nicht verkleinert.

Website

Texte im Browser; mobile und große Ansichten prüfen.

Textbudgets · Website
TextrolleBudgetVerbindlichkeit
Überschrift, Einleitung, Karte und AktionNoch nicht festgelegtOffen
Handouts & Angebote

16:9-Leseformat; das Budget hängt vom Seitentyp ab.

Textbudgets · Handouts & Angebote
TextrolleBudgetVerbindlichkeit
Überschrift und Unterzeile zusammenHöchstens 3 Zeilen (2 + 1 oder 1 + 2)Regel
Zahlen-Bento mit acht KennzahlenHöchstens 70 Wörter. Pro Seite, einschließlich Überschrift, Unterzeile und Zahlen; ohne Fußzeile.Regel
Andere SeitentypenNoch nicht festgelegtOffen
Bühne

Sprechergeführte Folien; das Layout für die Bühne bleibt separat zu prüfen.

Textbudgets · Bühne
TextrolleBudgetVerbindlichkeit
Überschrift6 bis 11 WörterRegel
KartenNur Bezeichnungen; keine Erklärtexte.Regel
Instagram & Social · Feed und Karussells

Statische Grafiken und selbst gesteuerte Bildfolgen.

Textbudgets · Instagram & Social · Feed und Karussells
TextrolleBudgetVerbindlichkeit
ÜberschriftHöchstens 6 Wörter. Richtwert; zusätzlich den Umbruch prüfen. Vier Zeilen sind eine dokumentierte Ausnahme.Richtwert
Lesetext und BegleittextNoch nicht festgelegtOffen
Animierte Social-Kacheln

Textgeführte Kacheln, die automatisch weiterlaufen.

Textbudgets · Animierte Social-Kacheln
TextrolleBudgetVerbindlichkeit
Lesepflichtiger TextAus Wortzahl und geplanter Lesedauer ableiten. Überschrift, Erklärung und notwendige Aktion zählen mit.Zeitabhängig
Stories, Reels & Sprecherfilme

Texte im Bild und Untertitel; bestehende Serienprofile beachten.

Textbudgets · Stories, Reels & Sprecherfilme
TextrolleBudgetVerbindlichkeit
Titel, Kontext und UntertitelNoch nicht festgelegtOffen
Newsletter

Länge je Beitragsart; die Analyse des veröffentlichten Bestands steht noch aus.

Textbudgets · Newsletter
TextrolleBudgetVerbindlichkeit
Betreff, Auftakt und BeitragNoch nicht festgelegtOffen
E-Mail-Signatur

Absender, Kontakt und erforderliche Angaben.

Textbudgets · E-Mail-Signatur
TextrolleBudgetVerbindlichkeit
SignaturNoch nicht festgelegtOffen

Flächen schaffen Hierarchie.

Vier Farben, jede mit einer Aufgabe. Die Fläche bestimmt die Textfarbe.

Snow#FFFFFFText: Pine · 14,8 : 1
Hauptfläche Standard für alle Anwendungen.
Frost#F3F4F4Text: Pine · 13,4 : 1
Karte Container auf Snow, nie Vollfläche.
Pine#222925Text: Snow · 14,8 : 1
Marken-Schwarz Text auf Hell. Als Fläche: Fazit, Handlung, Entscheidung.
Signal#00FF66Text: Pine · 10,9 : 1
Akzent Anker, Aktion, benannte Signal-Flächen. Trägt Pine-Text.
Fog#E8E8E8
Haarlinie Nur Dekor. Nie Text, nie Fläche, nie einziger Hinweis.

Welche Farbe auf welcher Fläche

Vordergrund auf Fläche · Kontrast nach WCAG 2.2
FlächePineSnowSignalFog (Linie)
Snow14,8 : 1Textgleiche Farbe1,3 : 1Nur Deko-Punkt1,2 : 1Nur Linie
Frost13,4 : 1Text1,1 : 1Nicht verwenden1,2 : 1Nur Deko-Punkt1,1 : 1Nur Linie
Pinegleiche Farbe14,8 : 1Text10,9 : 1Akzent12,1 : 1Nur Linie
Signal10,9 : 1Text1,3 : 1Nicht verwendengleiche Farbe1,1 : 1Nur Linie

Text braucht eine Textrolle und mindestens 4,5 : 1; Grafik und Fokus mindestens 3 : 1. Werte abgerundet.

Derselbe Inhalt, andere Fläche

Anzeige

Was alle vier verbindet

Strategisches Design

Wir klären die Aufgabe, entwickeln eine Richtung und setzen sie um.

tillmann.com

Kontakt aufnehmen →
Hell Signal nur als Punkt.

Was alle vier verbindet

Strategisches Design

Wir klären die Aufgabe, entwickeln eine Richtung und setzen sie um.

tillmann.com

Kontakt aufnehmen →
Pine Signal für die eine Aktion.

Was alle vier verbindet

Strategisches Design

Wir klären die Aufgabe, entwickeln eine Richtung und setzen sie um.

tillmann.com

Kontakt aufnehmen →
So nicht Signal als Text und Schmuck, Fog als Text.

Text der Startseite. Offen: wann Pine Hauptfläche einer ganzen Anwendung ist.

Weitere bestätigte Farbrollen
Container- und Textstufen
TokenHexRolle
frost-betont#E7EAE8Betonte Containerstufe hell, höchstens einmal pro Gruppe.
pine-container#2C332FKartenfläche auf Pine.
pine-container-betont#39433DBetonte Containerstufe dunkel.
meta-hell#555555Meta- und Sekundärtext auf hellen Flächen: Quelle, Seitenzahl, Legende.
meta-dunkel#9BA5A0Meta- und Sekundärtext auf Pine.
subheader-dunkel#E8ECEASubheader auf Pine.
  • meta-dunkel auf pine-container-betont: 4,05 : 1, gesperrt
  • Daten- und Statusfarben gelten nur in Diagrammen und Status-Chips.
Richtig: Frost-Karte mit Überschrift, Lesetext, einer Signal-Aktion und einer zurückhaltenden zweiten Aktion.

So

Frost gruppiert. Signal markiert genau eine Aktion.
Falsch: Signal als Fläche hinter der Überschrift, als leerer Balken und auf beiden Aktionen.

So nicht

Signal nicht als Textmarker, Schmuckbalken oder für mehrere gleichrangige Aktionen.

Abstände ordnen Inhalte.

Hilfslinien einblenden
Desktop · 1440 px · Rand 64 px · Kapitelabstand 96 px
Mobil · 390 px · Rand 24 px · Kapitelabstand 64 px

Was alle vier verbindet

8

Strategisches Design

8

Wir klären die Aufgabe, entwickeln eine Richtung und setzen sie um.

Karte der Startseite: innen 24, dazwischen 8.

Demo mit Texten der Startseite und Werten der Website-Skala. Zeigt das Prinzip, keine Vorlage.

Warum Abstand Gruppen bildet

Leistungen

24

Branding & Creative Direction

24

KI & Organisationsentwicklung

24

Strategie & Ausrichtung

24

Kontakt

24

hello@tillmann.com

24

+49 30 50365923

24

Zimmerstraße 50 · Berlin

So nicht Überall 24: sechs gleiche Zeilen.

Leistungen

16

Branding & Creative Direction

16

KI & Organisationsentwicklung

16

Strategie & Ausrichtung

48

Kontakt

16

hello@tillmann.com

16

+49 30 50365923

16

Zimmerstraße 50 · Berlin

So 16 innen, 48 dazwischen: zwei Gruppen, ohne Linie.
Skala und feste Maße

Alle Abstände der Website stammen aus einer Skala. Zwischenwerte werden nicht frei gesetzt.

4 px
Feinabstufung in Bausteinen
8 px
Feinabstufung in Bausteinen
12 px
Feinabstufung in Bausteinen
16 px
Innerhalb einer Gruppe
24 px
Eng zusammengehörige Inhalte
32 px
Modulabstand
48 px
Eigenständige Inhalte
64 px
Größere Inhaltsgruppen
96 px
Kapitelabstand Desktop
Seitenrand
64 / 24 px

Desktop / Mobil

Kapitelabstand
96 / 64 px

Desktop / Mobil

Kopfzeile
72 px

Höhe

Aktion
48 px

Höhe, Radius 8 px

Trefferfläche
mind. 44 px

auch für TextLinks

Aus Punkten wird Orientierung.

Punktraster auf Pine mit verdichteten, verbundenen Inseln in abgestuften Tönen
K.7-Konstruktion aus dem bestätigten Cover, ohne Text.

Auf Pine

Abgestufte Töne bilden zusammenhängende Höhenbereiche. Das Raster bleibt fest, die Komposition variiert.

Auf Weiß

Dezent und optional. Eine oder zwei Stellen rahmen die Fläche; Texte, Karten und Aktionen erhalten echten Abstand.

Die äußerste Punktreihe bleibt frei. Keine gestreckten Punkte, keine Vier-Ecken-Schablone, keine Musterfläche direkt unter Text.

Richtig: Punktraster auf Pine mit fünf zusammenhängenden Höhenstufen, frei von Text.

So

Zusammenhängende Höhenstufen. Das Motiv bleibt ohne Text.
Falsch: gleichmäßiges Punktraster über die ganze Fläche, eine Aussage direkt darauf gesetzt.

So nicht

Kein gleichmäßiges Vollraster, kein Text direkt auf dem Muster.

Aufbau in Bewegung

Motion-Studie Eine Sekunde Aufbau, eine Sekunde Endhalt. Studie aus dem Figma-Master, keine freigegebene Animation.

Zeigen, was Menschen tun.

Vorhandene Originale nutzen und Ausschnitte bewusst wählen. Menschen und ihre Arbeit tragen die Aussage; Motiv und Kontext bleiben auch mobil erkennbar. Keine ungeprüften Stockbilder.

Richtig: Schwarzweißfoto aus einem Coaching; zwei Menschen in einer Übung, Gesichter und Bewegung vollständig im Ausschnitt.

So

Menschen und Handlung vollständig zeigen.
Falsch: derselbe Moment zu eng beschnitten; Kopf und Hände sind angeschnitten, der Zusammenhang fehlt.

So nicht

Keine Ausschnitte, die Gesichter oder Gesten abschneiden.

Bewegung erklärt Veränderung.

Bewegung erklärt einen Zustandswechsel und endet ruhig. Kein Federn, kein Nachschwingen.

Die Szene folgt dem Gedanken.

Die Funktion bestimmt die Szene. Rubrik, Überschrift und Absatz sind keine Pflichtkombination.

Szenenentwurf · schematische Beispiele, noch keine fertigen Motion-Vorlagen.

Klarheit.

Wortimpuls

Einen Gedanken hervorheben.

Der Zusammenhang wird aus der vorigen oder nächsten Szene verständlich.

Erst verstehen.
Dann entscheiden.

Aussage

Einen Gedanken verständlich formulieren.

Die Aussage funktioniert ohne zusätzlichen Absatz.

  1. Beobachten
  2. Ordnen
  3. Entscheiden

Erklärung

Einen Zusammenhang zeigen.

Ein neuer Zusammenhang nach dem anderen; räumliche Zuordnung bleibt stabil.

WertEinheit · BedeutungQuelle

Beleg

Eine Aussage nachvollziehbar machen.

Zahl, Einheit und Bezugsgröße bleiben verständlich. Keine erfundenen Zahlen.

Mehr im
Newsletter.

Abschluss

Einen nächsten Schritt anbieten.

Der nächste Schritt ist tatsächlich verfügbar und lesbar.

Karussell und Film unterscheiden
  • Karussell zum Wischen

    Die Lesenden bestimmen das Tempo. Bestehendes Karussellprofil mit seinen Seitenrollen verwenden. Keine automatische Szenendauer.

  • Karussell als Film

    Inhalte neu in lesbare Szenen gliedern. Eine volle Lesekachel nicht unverändert mit kurzer Standzeit durchrendern.

  • Kurze Story

    Wenige Gedanken nacheinander erklären. Unter einer Minute ist hier der Projektwunsch, keine Plattformgrenze.

Dieser Szenenentwurf ergänzt zeitgeführte Filme; er ersetzt nicht die Folientypen und Kopfregeln statischer Karussells. Schriftrollen, Schutzräume, Logo und Muster folgen dem gewählten Formatprofil. Neue Geometrien brauchen eine eigene Prüfung.

Lesezeit und Informationsdichte planen

Für automatisch ablaufende Textkacheln: Pflichtwörter × 60 / 200, dazu 2–3 Sekunden für Aufbau und Orientierung. Ein Planungswert, keine Garantie für Verständnis.

  • Alle notwendigen sichtbaren Wörter, Zahlen und Visual-Labels zählen. Voiceover zählt nur als sichtbarer Text, wenn es eingeblendet wird. Untertitel separat planen.
  • Aufbau und Orientierung sind im Zuschlag der Lesedauer-Regel enthalten; nicht doppelt addieren. Lange Aufbauten gesondert berücksichtigen.
  • Lesetext bleibt stabil und wird nicht durch Ausblendung oder Übergang vorzeitig unlesbar.
  • Wortzahl misst keine Diagramm- oder Demo-Komplexität. Neue Beziehungen und Blickwechsel gesondert prüfen. Keine Echtzeitbelege beschleunigen.
  • Szenen und Übergänge auf einer gemeinsamen Timeline prüfen. Bei Überschreitung Inhalte reduzieren oder aufteilen; nicht Schrift verkleinern oder Lesefenster zusammendrücken.

Pro Szene dokumentieren: Funktion, Textrollen, Pflichtwörter, Visualisierung, Aufbau, lesbarer Halt, Übergang und begründete Dauer. Danach den ganzen Film am Smartphone ohne Pause prüfen.

Szenenvarianten sind ein Entwurf, noch keine abgenommenen Golden Samples. Werte projektbezogen ausarbeiten, dokumentieren und prüfen.

Eine Sequenz im Ablauf

  1. Fokus0,0–0,3 sDer Blick findet den Ort.
  2. Aufbau0,3–1,6 sÜberschrift, dann Lesetext.
  3. Halt1,6–9,0 sSteht, bis es gelesen ist.
  4. Übergabe9,0 sAn die nächste Szene.

Beispielsequenz Phasen aus den Bildwechseln gemessen; Zeiten gelten nur hier.

Jedes Beispiel lässt sich einzeln anhalten. Bei reduzierter Bewegung startet nichts von selbst.

Sequenzen in zwei Formaten

Querformat und Hochformat mit eigenem Maßstab.

Erst die Aussage, dann das Detail.

Jede Szene zeigt einen Gedanken und steht, bis er gelesen ist.

16:9
9:16

Aus Punkten wird Orientierung.

Punkte verdichten sich zu einem Zentrum. Schematische Punktfläche, keine K.7-Konstruktion.

16:9
9:16

Flächen schaffen Hierarchie.

Erst die Aussage, dann ein kleiner Akzent. Schematisches Punktmotiv.

16:9
9:16

Ankunft bei der Marke.

Die Sequenz endet ruhig auf der Wort-Bild-Marke.

16:9
9:16
Bedienelemente: normal und reduziert

Akkordeon öffnen

Plus wird Minus, der Inhalt erscheint unter dem Titel.

Normal Weicher Übergang, danach klarer Endzustand.
Reduziert Gleicher Zustandswechsel ohne Bewegung.

Aktion unter dem Zeiger

Button und TextLink wechseln zu Signal.

Normal Weicher Übergang, danach klarer Endzustand.
Reduziert Gleicher Zustandswechsel ohne Bewegung.

Wechsel zwischen Kapiteln

Die Markierung wandert, der neue Titel ersetzt den alten.

Normal Weicher Übergang, danach klarer Endzustand.
Reduziert Gleicher Zustandswechsel ohne Bewegung.
Zeiten und Quellen

Zeiten sind Projektwerte der jeweiligen Anwendung, keine allgemeinen Tokens. Das Website-Akkordeon öffnet in 280 ms. Alle Beispiele sind native Figma-Exporte mit 30 Bildern pro Sekunde; die Bedienelemente sind auf ihre Bühne zugeschnitten.

Bausteine der Website

Eine Hauptaktion im echten Kontext

Creative Director & Strategic Advisor

Wenn es zu wichtig ist, um es dem Zufall zu überlassen.

Ich berate Führungsteams zu Strategie, Marke und KI und leite kreative Produktionen von der Idee bis zur Umsetzung.

So nicht Drei gleich laute Aktionen.

Creative Director & Strategic Advisor

Wenn es zu wichtig ist, um es dem Zufall zu überlassen.

Ich berate Führungsteams zu Strategie, Marke und KI und leite kreative Produktionen von der Idee bis zur Umsetzung.

So Eine Hauptaktion, daneben ein TextLink.

Text der Startseite, Buttons aus der Website.

Die Bausteine kommen unverändert aus der Website und sind hier bedienbar.

Button

  • 1Pine · Hauptaktion. Unter dem Zeiger Signal.
  • 2Signal · gezielt, höchstens einmal je Bereich.
  • 3Outline · zweite Aktion. Unter dem Zeiger Signal.
Zustandstafel: Primary, Signal und Outline jeweils in Ruhe, unter dem Zeiger, gedrückt mit Zeiger, gedrückt per Touch und mit Tastaturfokus als dunkler Ring.
Zustände aus der Figma-Komponente. Die Tafel verwendet das englische Beispiellabel der Komponente.

TextLink

Beschriftungen nennen das Ziel und die Handlung: „Social-Vorlage ansehen“ führt zur Vorlage, „Podcast öffnen“ zur externen Seite, „Startdatei herunterladen (SVG)“ zur Datei. Der Pfeil zeigt interne (→) oder externe (↗) Navigation. Die Trefferfläche ist mindestens 44 px hoch.

Akkordeon

Handouts & Angebote

16:9-Leseformat. Größen in Exportpixeln bei 1920 × 1080.

Titel immer sichtbar, Inhalt auf Wunsch. Inhaltsbereiche lassen sich unabhängig öffnen und vergleichen. Sie schließen erst durch erneutes Antippen. Nur das Menü begrenzt sich auf eine offene Gruppe.

Leitlinie für Aktionen in diesem Guide
  • Eine Hauptaktion je Bereich, daneben höchstens ein TextLink.
  • Outline für die zweite Aktion.
  • Signal gezielt, nicht für mehrere gleichrangige Aktionen.
  • Mobil nimmt nur die Hauptaktion die volle Breite ein.
  • Status steht am jeweiligen Beispiel. Regeln, Maße und Wortbudgets folgen innerhalb der gewählten Anwendung; ergänzende Erklärungen sind klappbar.

Gilt für den Brand Guide, keine systemweite Regel.

Aufbau der Guide-Komponenten

Anwendungsprofil für diesen Guide · im Review. Die bestehenden Website-Rollen bleiben die Grundlage.

  • Erst Überblick, dann Details: Titel, Kernaussage und kurze Prozessfolgen bleiben sichtbar. Erklärungen und Grenzen öffnen sich direkt darunter. Mehrere Inhalte dürfen gleichzeitig offen bleiben; sie schließen erst durch erneutes Antippen.
  • Tabs passen zu alternativen Ansichten, eigene verlinkte Abschnitte zu langen Referenzen. Dialoge sind für abgegrenzte Aufgaben da. Keine verschachtelten Akkordeons und keine wichtigen Regeln, die nur beim Darüberfahren sichtbar werden.
  • Zeilenumbrüche passen sich der verfügbaren Breite an: Fließtext mit ruhigen Endzeilen, Überschriften ausgeglichen. Keine gerätespezifischen harten Umbrüche im Lesetext; feste Asset-Kompositionen behalten ihre eigenen Regeln.
  • Akkordeon: Titel 18/26 px Medium, Lesetext 16/24 px Regular auf Mobil. Oben und unten 24 px, keine zusätzliche Texteinrückung.
  • Auf-/Zu-Zeichen: 24 × 26 px, Balken 14 × 2 px, 16 px Abstand zum Text. Eine Dekorlinie von 1 px trennt die Einträge.
  • Nummerierte Karte: 24 px innen, Radius 16 px, 12 px zwischen Titel und Inhalt. Nummer und Titel stehen auf einer Grundlinie.
  • Schreibbeispiel: Titel, Beispielsatz und Begründung als drei Rollen; 16 px Abstand. Die Begründung steht in 14/20 px.
  • Prozessgrafik: immer 80 × 56 px, Rahmen 1 px, Radius 4 px, Innenraster 8 px. Hilfslinien 2/2 px gestrichelt, Prüfhaken 1,5 px. Schematische Grafik, kein Golden Sample.
  • Mobil stehen Prozessgrafiken unter dem Text und werden nicht verkleinert. Menülinks haben mindestens 44 px Trefferhöhe und echte SVG-Pfeile.

Dieselben Angaben stehen unter ui_components in der Agentenfassung.

Vorlagen für jeden Kanal.

  • Handout-Cover mit Wortmarke, Rubrik, Titel in Bold und Fußzone.

    Handout-Cover

    Zweck
    Titel eines Handouts oder Angebots
    Format
    16:9 · 1920 × 1080
    Status
    Golden Sample (anonymisiert) · freigegeben 20.08.2026
    Startdatei 16:9 herunterladen (SVG)
  • Handout-Innenseite mit großer Kennzahl in einer Frost-Karte und drei Erklärkarten.

    Handout-Innenseite

    Zweck
    Eine Kennzahl erklären
    Format
    16:9 · 1920 × 1080
    Status
    Golden Sample · freigegeben 20.08.2026
    Startdatei 16:9 herunterladen (SVG)
  • Handout-Seite Jetzt seid ihr dran: große Pine-Karte mit Aufgabe, daneben drei Frost-Karten zu Zeit, Ergebnisformat und gutem Ergebnis.

    Arbeitsphase im Workshop

    Zweck
    Eine Aufgabe für Teilnehmende stellen
    Format
    16:9 · 1920 × 1080
    Status
    Golden Sample · freigegeben 20.08.2026
    Startdatei 16:9 herunterladen (SVG)
  • Bühnenfolie mit Rubrik, Aussage und drei Karten; die dritte Karte in Pine trägt den Merksatz.

    Bühne

    Zweck
    Sprechergeführte Folie
    Format
    16:9 · 1920 × 1080
    Status
    Golden Sample · freigegeben 20.08.2026
    Startdatei: noch offen. Aufbau nach dem Golden Sample.
  • Social-Motiv

    Zweck
    Eine Aussage im Feed
    Format
    4:5 · 1080 × 1350
    Status
    Beispiel · regelgebunden
    Startdatei 4:5 herunterladen (SVG)
  • Story

    Zweck
    Kurzer Hinweis im Hochformat
    Format
    9:16 · 1080 × 1920
    Status
    Beispiel nach Sehtipp-Profil
    Startdatei 9:16 herunterladen (SVG)

Startdateien: aus aktiven Werten erzeugte Beispiele mit Hilfslinien, keine kanonischen Master.

Wie eine Seite zusammenspielt

Handout-Innenseite Die Zahl, die im Raum bleiben soll, mit fünf nummerierten Stellen.
  1. Rubrik mit Signalpunkt Einziger Signal-Akzent.
  2. Aussage als Überschrift Eine pro Seite.
  3. Frost-Karte Gruppiert Zusammengehöriges.
  4. Pine-Karte Genau eine; sie trägt die Bedeutung.
  5. Fußzone tillmann.com, Quelle, Seitenzahl.

Golden Sample vom 20.08.2026, Beispieltext. Werte: Kapitel Typografie.

Richtig: dieselbe Aussage „Aus Wissen wird Wirkung.“ in 16:9 und 4:5, jeweils mit eigenem Maßstab für Schrift und Muster.

So

Jedes Format bekommt seinen eigenen Maßstab.
Falsch: das Layout unverändert ins Hochformat übernommen; die Schrift wird zu klein.

So nicht

Kein Layout in ein anderes Format skalieren.
Alle Formate und ihr Stand
Formate und ihr Stand
FormatVerwendungStand
WebsiteResponsiver Auftritt mit eigenen WebrollenHomepage ist die Referenz
Handout · 16:9Lesen und eigenständig verstehenGolden Samples vom 20.08.2026 und Startdatei
Social · 4:5 / 9:16Mobile Sequenz; Format und Textbudget prüfenRegelgebundene Beispiele und Startdateien
Bühne / MotionEntfernung, Zeit und SprecherbezugEigene Adapter; Formatfragen offen
E-Mail-SignaturAbsender in der täglichen KommunikationIn Gmail eingerichtet (27.09.2026)

Selbst prüfen.

  1. Kanal: Stimmen Format, Schriftrollen und Rand mit dem Kanal überein?
  2. Aussage: Gibt es genau eine erkennbare Hauptaussage in passender Länge?
  3. Fläche und Signal: Text in Pine oder Snow, Signal nur für eine Aktion oder einen Akzent?
  4. Marke: Originale Wortmarke mit Schutzraum, echte Schriften, keine nachgebauten Elemente?
  5. Status: Sind Beispiele als Beispiele und offene Werte als offen markiert, und ist die Freigabe getrennt geklärt?
So wird das System gepflegt

Regeln, Werte und Bausteine werden an einer Quelle gepflegt und hier automatisch angezeigt. Historische Studien bleiben als solche gekennzeichnet.

Offenes hat einen klaren Platz.

  • Logo: Schutzraum 1 C und Bildschirm-Mindestbreite 120 px sind bestätigt. Offen sind Druckmindestgröße und ein App-Icon-Profil.
  • Textmengen: Für Website, Newsletter, E-Mail und Social-Lesetext gibt es noch keine Wortbudgets.
  • Social und Story: Zeilenhöhe der Social-Überschrift und Oberkante freier Posts sind offen; ein allgemeines Story-Profil fehlt.
  • Bühne: Eine Startdatei gibt es noch nicht; das Golden Sample zeigt den Aufbau.
  • Bewegung: Zeiten gelten je Anwendung; ein allgemeiner Motion-Vertrag ist offen.
  • E-Mail: Signatur in Gmail eingerichtet. Offen ist die Prüfung im echten Dunkelmodus und in weiteren Mail-Clients.