Grundlagen
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.
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.

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.
Alle Screens zum Herunterladen, als PNG in voller Auflösung:
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.
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.

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.
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/bilderliegen:
| 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.











Alt-Texte
Jedes Bild hat einen Alt-Text. Er sagt, was das Bild zeigt, nicht wie schön es ist.
Zeichnungen, die nur schmücken, bekommen alt="". Ein Screen sagt immer etwas, er bekommt immer einen Text.





