Zum Inhalt
Hey AlbertMarke und Designsystem
Als MarkdownEnglishEN

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.

Wochenboard von Familie Sonntag auf dem Mac, Mittwoch 3. September
Das Wochenboard auf dem Mac – die Heldenansicht der Website · PNG 2880 × 1800

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 · iphone · PNG
Eingang · iphone · PNG
Taler · iphone · PNG
LenaBereich · ipad · PNG
Watch · watch · PNG
Haushalt · mac · PNG

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.
Das Jahresbuch von Familie Sonntag, aufgeschlagen
Das Jahresbuch – das eine Objekt, das wir zeigen · PNG 2246 × 1588

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/bilder liegen:
GerätPixelPunkteScreens
Mac2880 × 18001440 × 900Wochenboard, Haushalt, Safe, Anlass, Aufgaben, FamilyFeedMac
iPhone780 × 1688390 × 844Main, Eingang, Einkauf, Essensplan, Schule, Taler, …
iPad hochkant1668 × 2388834 × 1194LenaBereich, Rueckblick
Watch792 × 968396 × 484Watch

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.
Vorschaubild bg
BG · 1200 × 630
Vorschaubild da
DA · 1200 × 630
Vorschaubild de
DE · 1200 × 630
Vorschaubild en
EN · 1200 × 630
Vorschaubild es
ES · 1200 × 630
Vorschaubild fr
FR · 1200 × 630
Vorschaubild it
IT · 1200 × 630
Vorschaubild no
NO · 1200 × 630
Vorschaubild pl
PL · 1200 × 630
Vorschaubild sv
SV · 1200 × 630
Vorschaubild tr
TR · 1200 × 630

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.