# Bildsprache

> Das Produkt ist das Motiv. Echte Screens von Familie Sonntag auf flachen Rahmen, Tuschezeichnungen mit genau einem gelben Akzent, ein einziges Foto. Dazu, wie Screenshots entstehen und welche Dateien die Website braucht.

Quelle: https://brand.heyalbert.family/bildsprache/ · Hey Albert Marke und Designsystem

Unsere Bilder sind ruhig und warm. Papier statt Glas. Keine Verläufe, keine Schatten, Haarlinien. Wir zeigen, was Hey Albert tut, und behaupten es nicht.

## Das Produkt ist das Motiv

Das echte Wochenboard mit zwei offenen Sachen und einem Vorschlag überzeugt mehr als jeder Satz über „Übersicht“. Deshalb ist unser wichtigstes Bild ein Screen von Familie Sonntag.

![Wochenboard von Familie Sonntag auf dem Mac, Mittwoch 3. September](https://brand.heyalbert.family/bilder/screens/Wochenboard.png)

*Wochenboard · mac · 2880 × 1800 px*

Screens stehen auf flachen Geräterahmen:

- **Ohne Glanz.** Keine Spiegelung, keine Perspektive, kein 3D.
- **Angeschnitten** statt schwebend gedreht.
- **Ein Gerät, eine Aussage.** Ein Stapel aus Mac und iPhone zeigt, dass es überall dieselben Dinge sind.

![Main](https://brand.heyalbert.family/bilder/screens/Main.png)

*Main · iphone · 780 × 1688 px*

![Eingang](https://brand.heyalbert.family/bilder/screens/Eingang.png)

*Eingang · iphone · 780 × 1688 px*

![Taler](https://brand.heyalbert.family/bilder/screens/Taler.png)

*Taler · iphone · 780 × 1688 px*

![LenaBereich](https://brand.heyalbert.family/bilder/screens/LenaBereich.png)

*LenaBereich · ipad · 1668 × 2388 px*

![Watch](https://brand.heyalbert.family/bilder/screens/Watch.png)

*Watch · watch · 792 × 968 px*

![Haushalt](https://brand.heyalbert.family/bilder/screens/Haushalt.png)

*Haushalt · mac · 2880 × 1800 px*

Alle Screens zum Herunterladen, als PNG in voller Auflösung:

- [Screens von Familie Sonntag (PNG)](https://brand.heyalbert.family/downloads/hey-albert-screens.zip)

## Zeichnung

Alles, was kein Screen ist, ist eine eigene Zeichnung: flache Tusche, Monolinie, runde Enden. Darin genau **ein** gelber Akzent, als Fläche, nie als Schrift.

- Motive sind echte Situationen: der Flur um 7:38, der Turnbeutel am Haken, der Esstisch am Sonntag, das Auto, der Supermarkt.
- Wohnungen sind bewohnt, nicht aufgeräumt. Wer eine makellose Küche zeigt, spricht nicht mit unserer Familie.
- Kinder **tun** etwas: abhaken, eintragen, mitentscheiden. Sie werden nie betreut gezeigt.
- Die Personenfarben sind auch die Farben der Zeichnungen. Wer Anna kennt, erkennt ihre Farbe wieder.

> **Offen: Die Zeichnungen gibt es noch nicht**
>
> Die Homepage hat drei Plätze für Tuschezeichnungen. Sie sind mit dem Bauteil `Bildplatz` markiert, bis die Zeichnungen existieren. Ein Stockbild oder ein erzeugtes Bild ersetzt sie nicht.

## Ein Foto, ein Objekt

- **Genau ein echtes Foto:** der Gründer, im Abschnitt „Wer dahinter steht“. Sonst keine Fotos von Menschen.
- **Ein physisches Objekt:** das gedruckte Jahresbuch, aufgeschlagen, von oben.

![Das Jahresbuch von Familie Sonntag, aufgeschlagen](https://brand.heyalbert.family/bilder/screens/Jahresbuch.png)

*Jahresbuch · objekt · 2246 × 1588 px*

## Albert als Figur

Albert ist im Bild ein Zauberer, im Ton der Family Manager. Er ist eine Tuschezeichnung, kein Maskottchen. Er erscheint sparsam:

- klein im Kopf der Website, beim Schritt „Sagen“, im Kinderbereich;
- im Onboarding, in leeren Zuständen, in Briefings, in der Sonntagsrunde, im Jahresbuch.

Nie erscheint er in Listen, Tabellen, im Safe, bei Finanzen, auf Systemflächen, beim Preis, bei Fragen oder bei Vertrauen.

## Was wir zeigen und was nie

**Wir zeigen**

- echte Screens von Familie Sonntag auf flachen Geräterahmen
- flache Tuschezeichnung mit genau einem gelben Akzent
- genau ein echtes Foto: der Gründer
- ein physisches Objekt: das gedruckte Jahresbuch

**Wir zeigen nie**

- Kindergesichter
- Stockfotos
- KI-erzeugte Bilder
- Glanz, Perspektive, 3D-Geräte
- Karussell, Autoplay-Video
- echte Familiendaten

Dazu, aus der Marke:

- Keine erschöpften Eltern und keine Zettelberge. Wir verkaufen kein Problem.
- Keine Bildschirme ohne Zusammenhang.
- Keine Menschen, die aufs Telefon starren, während jemand redet.
- Keine Fortschrittsbalken, Ranglisten oder fremden Taler-Stände, auch nicht als Dekoration.

> **Offen: Fotos von Kindern**
>
> `docs/21-marke-und-stimme.md` (I.7) erlaubt echte Kinder mit widerruflicher Zustimmung und sagt „Im Zweifel zeichnen wir“. Das Designsystem und `regeln.json` schließen Kindergesichter aus und erlauben nur ein Foto, das des Gründers. Bis zur Entscheidung gilt die strengere Regel: keine Kindergesichter.

## Screenshots herstellen

Jeder Screen zeigt Familie Sonntag in ihrer Woche: Mo 1. bis So 7. September, heute ist Mittwoch, der 3. Nie eine echte Familie, nie echte Namen, nie echte Adressen.

- **Inhalt:** eine ehrliche Woche. Zwei Sachen ohne Zuständigen, ein Vorschlag von Albert. Ein Board ohne Offenes wirkt gestellt.
- **Modus:** hell. Der dunkle Modus nur, wo er selbst das Thema ist.
- **Statusleiste:** keine fremde Statusleiste als Imitat auf Mockups.
- **Größen** in doppelter Auflösung, wie sie in `apps/site/bilder` liegen:

| Gerät | Pixel | Punkte | Screens |
|---|---|---|---|
| Mac | 2880 × 1800 | 1440 × 900 | Wochenboard, Haushalt, Safe, Anlass, Aufgaben, FamilyFeedMac |
| iPhone | 780 × 1688 | 390 × 844 | Main, Eingang, Einkauf, Essensplan, Schule, Taler, … |
| iPad hochkant | 1668 × 2388 | 834 × 1194 | LenaBereich, Rueckblick |
| Watch | 792 × 968 | 396 × 484 | Watch |

## Dateien für die Website

- **Quelle:** PNG in voller Auflösung in `apps/site/bilder/`. Sie bleiben als Rückfall und für Vorschaubilder.
- **Ausgeliefert:** AVIF, mit WebP als Rückfall, je in 480, 720, 1080 px und voller Breite. Erzeugt mit `python3 tooling/bilder-optimieren.py`, das nur neu rechnet, wenn das PNG jünger ist.
- **Erstes Bild** einer Seite ohne Einblendung und vorgeladen, damit es schnell steht.
- **Vorschaubilder** für geteilte Links: 1200 × 630 je Sprache, erzeugt mit `tooling/og-bilder.py`.

| Sprache | Datei |
| --- | --- |
| bg | https://brand.heyalbert.family/bilder/og/og-bg.png |
| da | https://brand.heyalbert.family/bilder/og/og-da.png |
| de | https://brand.heyalbert.family/bilder/og/og-de.png |
| en | https://brand.heyalbert.family/bilder/og/og-en.png |
| es | https://brand.heyalbert.family/bilder/og/og-es.png |
| fr | https://brand.heyalbert.family/bilder/og/og-fr.png |
| it | https://brand.heyalbert.family/bilder/og/og-it.png |
| no | https://brand.heyalbert.family/bilder/og/og-no.png |
| pl | https://brand.heyalbert.family/bilder/og/og-pl.png |
| sv | https://brand.heyalbert.family/bilder/og/og-sv.png |
| tr | https://brand.heyalbert.family/bilder/og/og-tr.png |

## Alt-Texte

Jedes Bild hat einen Alt-Text. Er sagt, was das Bild zeigt, nicht wie schön es ist.

> **So**
>
> „Wochenboard von Familie Sonntag auf dem Mac. Freitag, 16:40: Die Fahrt zum Handball hat noch keinen Fahrer.“

> **Nicht so**
>
> „Screenshot“, „Bild“, „Hey Albert App Dashboard“, ein leerer Alt-Text bei einem Bild, das etwas aussagt.

Zeichnungen, die nur schmücken, bekommen `alt=""`. Ein Screen sagt immer etwas, er bekommt immer einen Text.