Bausteine
Jedes gestaltete Teil von SuccessionOne, einzeln und beschriftet. Wenn dir etwas nicht gefällt, ist der Name unter dem Teil die kürzeste Art, es mir zu sagen — ein Klick darauf legt ihn in die Zwischenablage.
Alle Werte kommen aus einer einzigen Datei, der tokens.css. Ändern wir dort das Violett, ändert es sich überall gleichzeitig — auf dieser Seite, auf der Startseite, im Ratgeber. In keiner Komponente steht eine Farbe als Zahl. Genau deshalb sind Änderungen hier billig und später auf der fertigen Seite nicht teurer.
Farben
Violett trägt, Gelb handelt. Gelb liegt ausschließlich auf Dingen, die angeklickt werden oder auf etwas hinweisen — nie großflächig. Sobald Gelb zur Fläche wird, verliert es genau die Wirkung, wegen der wir es haben.
Marke
Der tragende Ton. Flächen, Schaltflächen, dunkle Streifen.
Aufgehellt. Fokusrahmen und Verläufe.
Nur für die Hauptaufforderung und Hinweise.
Beim Darüberfahren, eine Spur heller.
Schrift auf Gelb. Nicht --ink: dunkler, damit der Kontrast sitzt.
Flächen
Grundfläche der Seite. Nicht ganz Weiß, damit weiße Karten sich abheben.
Karten und Kästen.
Gedämpfte Streifen, um Sektionen zu trennen.
Trennlinien und Rahmen.
Anfang des dunklen Verlaufs.
Mitte.
Ende.
Schrift
Überschriften und wichtiger Text. 16,8:1.
Fließtext und Vorspann. 7,8:1.
Nur Bildunterschriften und Beiläufiges. 4,0:1 — für Fließtext zu wenig.
Zielgruppen
Vier Töne, einer je Zielgruppe. Jeder existiert doppelt: ein heller für Flächen und ein dunklerer fürs Lesen. Der Fläche-Ton allein reicht für Schrift nicht aus.
Nachfolgende — Fläche.
Nachfolgende — Schrift. 7,5:1.
Abgebende — Fläche.
Abgebende — Schrift. 5,9:1.
Dienstleister — Fläche.
Dienstleister — Schrift. 4,9:1.
Matching — Fläche.
Matching — Schrift. 5,3:1.
Schrift
Zwei Familien: Libre Franklin für Überschriften, Inter für alles zum Lesen. Beide liegen als Datei im Projekt und werden vom eigenen Server geliefert — beim Aufruf der Seite geht keine Anfrage an Google. Alle Größen wachsen mit dem Fenster mit, deshalb springt zwischen zwei Gerätebreiten nichts.
Nachfolge, die passt
--size-display38 → 56px
Überschrift eins
--size-h130 → 50px
Überschrift zwei
--size-h228 → 46px
Überschrift drei
--size-h322 → 28px
Überschrift vier
--size-h418 → 23px
Vorspann. Die Zeile unter einer Überschrift, die erklärt, worum es geht — größer als Fließtext, aber ruhiger.
--size-lead16 → 19px
Fließtext. Sechzehn Pixel, Zeilenhöhe 1,65. Die Zeilenhöhe ist bewusst großzügig: Wer über die Übergabe seines Lebenswerks liest, liest langsam.
--size-body16px
Kleintext für Hinweise unter Formularfeldern
--size-small15px
Übertitel über einer Überschrift
--size-eyebrow12,5px
Sektionskopf
Der Anfang jeder Sektion: Übertitel, Überschrift, Vorspann. Es gibt genau dieses eine Bauteil dafür — deshalb fangen alle Sektionen gleich an, und eine Änderung am Rhythmus ändert sie alle auf einmal. In der zugehörigen CSS-Datei steht bewusst keine einzige freie Zahl.
Die Abstände wachsen nach unten: Übertitel und Überschrift gehören eng zusammen und lesen sich als eine Einheit, der Vorspann ist schon eine eigene Aussage, und was darunter folgt, ist ein neuer Gedanke.
So arbeiten wir
Nachfolge ist kein Verkauf, sondern eine Übergabe
Zwischen dem ersten Gedanken und der Unterschrift liegen im Mittel drei bis fünf Jahre. Wir begleiten diese Zeit, statt nur ein Inserat zu schalten.
Ohne Vorspann verkleinert der Kopf seinen Abstand nach unten von selbst. Der volle Abstand wirkt hier zu groß — auch das ist eine Entscheidung, die nicht in jeder Sektion neu getroffen werden soll.
Häufige Fragen
Was als Kind übergeben wird, steht unter dem Vorspann und bekommt seinen eigenen Abstand. Mittig eignet sich für Sektionen, die für sich stehen — nicht für solche, neben denen eine Abbildung liegt.
Erstgespräch
Reden wir darüber, bevor Sie sich entscheiden
Vierzig Minuten, unverbindlich, ohne Unterlagen.
Auf Dunkel wechselt der Übertitel von Violett auf Gelb — die eine Stelle, an der Gelb nicht handelt, sondern hinweist.
Diskretion
Ihr Name steht nirgends, bevor Sie ihn freigeben
Die Gegenseite sieht Branche, Größenordnung und Region. Genug, um zu wissen, ob sich ein Gespräch lohnt — zu wenig, um Sie zu erkennen.
Die Ebene ist die Gliederung — eine Vorlesehilfe springt daran entlang, und eine übersprungene Ebene ist ein Fehler. Die Größe ist das Aussehen. Meistens gehören sie zusammen; getrennt werden sie nur, wenn etwas tief in der Gliederung steht und trotzdem groß aussehen soll.
Steht als h3 im Dokument, sieht aus wie h2
Schaltflächen
Vier Formen, drei Größen. Pro Bildschirmabschnitt gibt es genau eine gelbe — sie ist die Aufforderung, um die es dort geht. Steht ein Ziel dabei, entsteht im Hintergrund ein Link statt eines Knopfes; das merkt man mit der Maus nicht, mit der Tastatur und mit einer Vorlesehilfe sehr wohl.
Gelb fordert auf, Violett führt weiter, Umriss ist die leise Alternative daneben, Weiß gibt es nur auf dunklem Grund.
Groß für die Hauptaufforderung, mittel überall sonst, klein in Karten und Listen.
Die Zeichen kommen aus Phosphor. Ein Pfeil nach rechts heißt „es geht weiter“, nicht „hier klicken“ — deshalb steht er hinter dem Text, nicht davor.
Ausgegraut und nicht anklickbar. Sparsam einsetzen: Eine Schaltfläche, die nichts tut, erklärt nicht, warum.
Unterhalb von 520 Pixeln läuft die Schaltfläche über die ganze Breite — am Telefon ist das die bequemste Trefferfläche. Am Schreibtisch sieht man hier keinen Unterschied.
Karten
Der abgesetzte Kasten. Kommt im Entwurf in fast jeder Sektion vor — Vorteile, Stimmen, Netzwerk, Finanzierung — und ist genau deshalb ein Bauteil. Innenabstand, Radius und Rahmen sind absichtlich nicht einstellbar: Wären es fünf einzelne Kästen, hätten sie in einem halben Jahr fünf verschiedene Innenabstände.
Flach liegt auf der Fläche, erhaben schwebt darüber, Umriss ist die leiseste Form, und Dunkel gibt es für eine einzelne hervorgehobene Karte in einer hellen Reihe.
Der Regelfall. Feiner Rahmen, kein Schatten.
Für Karten, die aus einer Reihe herausstechen sollen.
Ohne Füllung. Gut auf weißem Grund.
Eine je Reihe, nicht mehr.
Das Anheben beim Darüberfahren ist ein Versprechen: Hier passiert etwas, wenn du klickst. Eine Karte, die sich hebt und nichts tut, ist ein Versprechen, das die Seite nicht hält.
Fahr mit der Maus darüber.
Bleibt liegen, weil sie nirgends hinführt.
Für kleine Kacheln — eine Zahl mit einer Zeile darunter, ein Logo, ein Etikett. Damit ist die Auswahl beim Innenabstand auch schon zu Ende.
Jahre bis zur Übergabe
Übergaben bis 2029
findet keine Nachfolge
Etiketten
Beschriften, ohne zu handeln. Ein Etikett ist nie anklickbar — sobald es das wäre, gehörte es zu den Schaltflächen. Die vier Zielgruppen haben jeweils ihren eigenen Ton, damit man in einer gemischten Liste auf einen Blick sieht, wer wer ist.
Neutral ist die Voreinstellung. Gelb hebt eine Zeile aus einer Liste heraus und verträgt keine Wiederholung — zwei gelbe Etiketten nebeneinander heben nichts mehr hervor.
Flächen und Ränder
Wie stark etwas abgerundet ist und wie weit es über dem Grund zu schweben scheint. Beides trägt Bedeutung: Je größer die Fläche, desto größer der Radius, und je wichtiger etwas ist, desto deutlicher der Schatten.
Jeder Schatten trägt einen hauchfeinen Rahmen als zweite Schicht mit sich. Ohne den verschwindet eine weiße Karte auf hellem Grund, sobald jemand seinen Bildschirm dunkler stellt.
Abstände und Breiten
Der unsichtbare Teil. Abstände entscheiden mehr über den Eindruck einer Seite als Farben — was zusammengehört, steht dicht beieinander, und zwischen zwei Themen liegt Luft. Alle Werte wachsen mit dem Fenster mit; die Spanne steht jeweils dahinter.
Voll ist die Regel, schmal für ruhigere Sektionen, lesbar für alles, was am Stück gelesen wird — etwa Beiträge im Ratgeber. Ab etwa 75 Zeichen je Zeile verliert das Auge beim Zeilensprung die Spur.
- 980px
- Zwei Spalten werden zu einer, die Navigation klappt zusammen.
- 820px
- Tablet hochkant.
- 520px
- Schmale Telefone.
Der Entwurf hat sieben Umbruchpunkte, historisch gewachsen. Beim Portieren übernehmen wir sie erst 1:1 — dann ist jede Abweichung zum Entwurf eindeutig ein Fehler und keine Absicht. Erst danach fassen wir sie in einem eigenen Durchgang zu diesen drei zusammen.
Sektionsgründe
Der waagerechte Streifen ist der einzige Baustein, der über die ganze Fensterbreite geht. Fünf Gründe stehen zur Wahl. Sie wechseln sich ab, damit beim Herunterscrollen ein Rhythmus entsteht — zwei gleiche Gründe hintereinander verschmelzen zu einem langen Block.