studio7A Website V1: Varianten zur Auswahl

Entscheidungen Richard 11.10.2026, eingearbeitet Kontakt per Mail und Foto „Über mich“

Kontakt: kein Formular. Ein Mail-Knopf „E-Mail schreiben“ (mailto:roos@studio7a.de) in Signal, daneben die Adresse als Link, darunter die Live-Zeile „Erreichbar · schnelle Antwort“. Mobil ist der Knopf volle Breite. In allen Varianten gleich, nur die Fläche wechselt mit Frage 1.

Foto: fester Platz im Format 4:5 (Hochformat), auf dem Desktop rechts neben dem Text (320 px breit), mobil über dem Text (64 % der Breite, höchstens 260 px). Bis zur Lieferung ein neutraler Platzhalter „Foto folgt“, kein Stock- oder KI-Bild. Für das echte Foto: mindestens 1200 × 1500 px, Gesicht im oberen Drittel, ruhiger heller Hintergrund. Der Ausschnitt sitzt per object-position 50 % 30 %, damit passt es ohne Umbau.

Frage 1 Startseiten-Aufbau und Hero: Flächen gegen Linien

A · Tonale Zonen

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Wie die Brandbook-Erweiterung vom 28.06.: Abschnitte wechseln zwischen Paper, Bone und Mist, die Leistungen stehen als Kacheln, der Fakten-Strip als Bone-Zone. Hero auf Paper mit großem Giebel in Bone, Kontakt auf Ink mit Giebel in Signal.

Warm und gegliedert, aber die meisten Kontrastfälle. Der Signal-Giebel im Kontakt ist die lauteste Signal-Stelle aller Varianten. Ink-Fläche ist eine Abweichung (siehe Vorschlag 1).

B · Linien

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Alles auf Paper, Ordnung über 1-px-Linien, Fakten-Strip als Schriftfeld unter dem Hero. Hält „Linien vor Flächen“ und den Hero C („Hairlines statt Flächen“) wörtlich ein.

Ganz regelkonform, wirkt aber streng. Der Kontakt am Ende hat wenig Gewicht.

C · Linien, Kontakt auf Ink Empfehlung

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Das Gerüst aus B. Nur der Kontakt steht als Ink-Fläche, als klarer Schluss mit Mail-Knopf. Der Hero bleibt wie in Hero C auf Paper.

Eine einzige Vollfläche gibt dem Aufruf Gewicht, ohne das Linienprinzip aufzugeben. Abweichung vom Brandbook, als Vorschlag 1 benannt. Ohne Freigabe gilt B.

Frage 2 Einsatz von Signal

A · Streng

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Signal nur für Giebel (Logo, Bullets, Trenner, Prozess), Live-Punkt und Knöpfe. Kein Wort in Signal, auch „Läuft.“ steht in Ink.

Sehr ruhig. Weicht vom Hero C ab, der „Läuft“ in Signal vorsieht.

B · Ein Wort je Überschrift

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Wie A, dazu in jeder Überschrift ein Wort in Signal, bei den Ein-Wort-Titeln das ganze Wort (Brandbook-Erweiterung: „ein Wort oder eine Zeile pro Headline“).

Bei sieben Überschriften wird Blau zum Muster und verliert an Wirkung.

C · Nur Anfang und Ende Empfehlung

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Wie A, dazu Signal nur auf „Läuft.“ im Hero (wie Hero C) und auf „vorhaben“ im Kontakt. Dazwischen arbeitet nur der Giebel.

Hält „sparsam“ am klarsten ein und erfüllt Hero C.

Frage 3 Illustrationen (Stil, Einsatz)

A · Linie, v0.1 weitergeführt Empfehlung

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Die Service-Icons aus v0.1 (Bauen, Pflegen, Automatisieren, Strich 1,5 auf 48er-Raster). Jedes Motiv trägt genau einen Giebel in Signal: beim Haus das Dach, bei der Uhr die 12-Uhr-Marke (neu), bei Automatisieren wie in v0.1. Trenner wie giebel-divider.svg, Prozess als Linie mit Giebel-Knoten.

Nah an v0.1 und an der Wortmarke, nur zwei kleine Eingriffe.

B · Fläche

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Dieselben Motive als volle Formen, Giebel als gefülltes Dreieck, Prozess in Bone-Blöcken.

Kräftiger, passt eher zu Aufbau A. Das Haus wirkt gefüllt kopflastig, und das volle Dreieck ist nicht der offene Giebel der Wortmarke.

C · Nur Giebel

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Keine Service-Icons. Der Giebel erscheint nur als Bullet und Trenner, der Prozess ist mit Haarlinien gegliedert.

Minimal, erfüllt Richards Wunsch nach Illustrationen aber nur zum Teil.

Frage 4 Typografie-Skala

A · Brandbook v3

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Die Skala des Brandbooks: Display 72/68, H2 32/38, Text 15/24, Mono 11/16.

Regelkonform. Für eine Startseite mit wenig Text wirkt der Hero zurückhaltend, 11-px-Mono und 13-px-Kleintext liegen an der Lesegrenze.

B · Lesefreundlich Empfehlung

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Text 17 px, Kleintext 15 px, Mono mindestens 12 px, H2 bis 44 px, Display bis 96 px (Stufen etwa 1,25).

Besser lesbar für Verwaltungen und Organisationen. Abweichung von der Brandbook-Skala, als Vorschlag 6 benannt.

C · Plakativ (Juni-Skala)

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Text 15 px, Display bis 140 px, H2 48 px, Mono-Labels 10 px.

Große Geste, aber 10-px-Labels sind mobil kaum lesbar, und die Skala liegt weit über dem Brandbook.

Frage 5 Mobil

A · Gestapelt Empfehlung

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Menü-Knopf mit Vollbild-Menü, alles untereinander, Prozess als senkrechte Linie mit Giebel-Knoten, Foto über dem Text.

Nichts ist versteckt, die Seite ist lang, aber linear.

B · Kompakt

Vorschau öffnen · Desktop 1280 · Mobil 375

Ausschnitt

Navigation als wischbare Leiste, Prozess quer wischbar, feste Leiste unten mit Live-Zeile und Mail-Knopf.

Kürzer, aber Inhalte liegen hinter Wischgesten, und die feste Leiste verdeckt Text. Auf dem Ganzseiten-Screenshot steht sie mitten im Bild (Effekt der Aufnahme).

Prüfung Kontrast (WCAG 2.1 AA)

axe-core (WCAG 2 A/AA) bei 1280 und 375 px: alle 14 Varianten ohne Befund

Getrennt, Freigabe Richard Änderungsvorschläge fürs Brandbook

1. Ink als einzige Vollfläche (nur bei Frage 1 C oder A): Das Brandbook verbietet kontrastreiche Flächen und will Hairlines statt Flächen. Vorschlag: Ink-Fläche genau einmal je Seite, für den Abschluss-Block (Kontakt).
2. Kontrastregel für Signal festschreiben: als Textfarbe nur auf Paper, auf Ink, Bone und Mist nur ab 24 px (fett ab 19 px) bzw. grafisch. Nie für Labels oder Fließtext.
3. Mute nur auf Paper. Auf Bone und Mist wird Sekundärtext Slate. Alternative: Mute auf #606065 abdunkeln (5,22:1 auf Mist, 5,98:1 auf Paper). Das wäre eine Farbänderung.
4. Neuer Token „Paper 62 % auf Ink“ (#A0A09E, 7,42:1) für Sekundärtext auf Ink.
5. Signal nie halbtransparent (der Juni-Entwurf nutzt 6 % und 14 % als Wasserzeichen, das wirkt wie ein zweiter Blauton). Wasserzeichen wie v0.1 in Ink-Deckkraft bzw. als Bone. Accent-Ink #1D4ED8 nur für Hover von Signal-Knöpfen.
6. Typografie-Skala (nur bei Frage 4 B): Text 15 auf 17 px, Display 72 auf 96 px, H2 32 auf 44 px, Mono-Mindestgröße 12 px statt 10 bis 12.
7. Illustrationsregel: Strich 1,5 auf 48er-Raster wie v0.1, Winkel aus dem Giebel (≈ 64,7°), jedes Motiv trägt genau einen Giebel in Signal. Dafür bekommt das Pflegen-Icon eine Giebel-Marke auf 12 Uhr.
8. Signal-Wort präzisieren (nur bei Frage 2 C): „ein Wort, nur im Hero und im Kontakt“ statt „ein Wort oder eine Zeile pro Headline“.
9. Live-Punkt pulsiert nicht bei reduzierter Bewegung (prefers-reduced-motion).

Zur Kenntnis Hinweise und Annahmen

• Stand 2 (11.10.2026): Die Varianten sind auf das Outline-Dokument „Marke & Website“ (Export, Stand 28.06.) und die Illustrationen v0.1 umgestellt. Alle Texte stammen jetzt wörtlich aus Hero C und der Seiten-Copy, die Juni-Texte sind raus. Der Name „Richard Roos“ in „Über mich“ stammt aus dem Auftrag, in Outline steht dort ein Platzhalter.
• Neu sind nur Bedienungs-Beschriftungen: Knopf „E-Mail schreiben“, Kopf-Knopf „Kontakt“, Menüpunkte. Wo Outline keine Überschrift hat (Leistungen, So läuft’s, Häufige Fragen), ist der Abschnittsname die Überschrift.
• Reihenfolge: „Über mich“ steht als § 05 vor dem Kontakt (§ 06), damit der Kontakt den Abschluss bildet. In Outline ist Kontakt § 05 und „Über mich“ steht unnummeriert dahinter.
• Der Satz für Agenturen in § 01 steht in Outline kursiv. Er ist hier aufrecht als abgesetzter Absatz mit Linie gesetzt (Plex wird ohne Kursive ausgeliefert, das Brandbook will nicht kursivieren).
• „Weimar“ aus dem Juni-Entwurf ist entfallen, weil es in Outline nicht vorkommt. Ort und Impressum klärt die Projektleitung.
• Die Stimme-Regel „keine Versprechen ohne Frist“ und die Live-Zeile „ohne Zahl“ ziehen in entgegengesetzte Richtungen. Der Kontakt sagt jetzt wie Outline „ich melde mich schnell“, ohne Frist.