Woher das Profil kommt, die stärkste Quelle zuerst
Eine schwächere Quelle füllt nur, was eine stärkere offengelassen hat, und die Markenseite zeigt, welche Quelle jedes Feld gesetzt hat.
| Quelle | Was Demander liest |
|---|---|
| Ihre Anpassungen | Was Sie auf der Markenseite festlegen, hat Vorrang vor jeder Quelle, und jedes Feld lässt sich auf den Wert seiner Quelle zurücksetzen |
| Designsystem | W3C Design Tokens und Tokens-Studio-JSON; eine Datei oder URL mit CSS Custom Properties (globals.css, shadcn-HSL-Werte, Tailwind v4 @theme); veröffentlichte Figma-Styles, dazu lokale Variablen mit Figma Enterprise; hochgeladene Schriften (TTF, OTF, WOFF, WOFF2) und Logos (SVG, PNG, JPEG, WebP) |
| Referenzbilder | Ihre eigenen Anzeigen, Brand Sheets und Screenshots (PNG, JPEG oder WebP, je bis zu 10 MB, 24 pro Workspace). Die Farbpalette wird aus den Pixeln gemessen und den Rollen zugeordnet. Mit aktivierter KI wertet ein Vision-Modell die vier neuesten Bilder nach Eckenradius, Button-Stil, Dichte, Ausrichtung, Schreibweise der Überschriften, Bildsprache und Schriftcharakter aus und rät nie einen Schriftnamen |
| Website | Wird bei jedem Produkt-Crawl gelesen und immer dann, wenn Sie auf „Website neu einlesen“ klicken: die Stylesheets der Startseite, ausgewertet so, wie ein Browser sie anwendet |
| Standard | Schlicht und neutral: Weiß, fast Schwarz, rechtwinklige Ecken, eine serifenlose Systemschrift, keine Dekoration |
Was Demander von Ihrer Website liest
-
Stichproben der Seite
Die Startseite wird auf Stichproben reduziert: Fließtext, Überschriften h1 bis h3, die auffälligsten Buttons, Karten, Abschnitte, der Hero-Bereich, der Header und ein Link im Inhalt, jeweils mit ihren Klassen und übergeordneten Elementen.
-
Die Stylesheets
Stylesheets derselben Website, Asset-Hosts von Website-Baukästen und Google Fonts, wobei Importe bis zu zwei Ebenen tief verfolgt werden: höchstens 12 Stylesheets, je 1,5 MB und insgesamt 4 MB, innerhalb von 25 Sekunden, alles über denselben abgesicherten Client wie beim Crawler.
-
Eine kleine Kaskade
Spezifität, Vererbung, Variablen mit Fallbacks, calc(), Layer, Media Queries und Verschachtelung werden für diese Stichproben ausgewertet. Regeln für Hover, Fokus und Dark Mode zählen nicht.
-
Farben nach Rolle
Aus benannten Custom Properties, Hintergrund und Text des primären Buttons, den Farben des Fließtexts, der Linkfarbe, theme-color und der Häufigkeit jeder Farbe. Jede Rolle erhält eine Kontrastprüfung: Text 4,5:1, abgeschwächter Text 3:1, Text auf der Primärfarbe 3:1.
-
Schrift, Form und Layout
Die Schriftfamilien für Überschriften und Fließtext mit Schriftstärke, Schreibweise, Laufweite, Zeilenhöhe und Größenabstufung; Schriftdateien aus @font-face oder Google Fonts. Radius (Pill-Form wird erkannt) und Stil der Buttons, Radius und Rahmen der Karten, Trennlinien zwischen Abschnitten, Schatten, Innenabstände der Abschnitte und die Ausrichtung des Hero-Bereichs.
-
Logo und Bilder
Ein Inline-SVG oder das Bild im Header, SVG bevorzugt. Das Open-Graph-Bild sowie Hero- und Feature-Bilder, jeweils als Foto, Screenshot oder Illustration eingeordnet.
Regeln für jedes Creative
-
01
Farben nach Rolle
Hintergrund, Fläche, Text, abgeschwächter Text, Primärfarbe, Text auf Primärfarbe, Akzent und Rahmen. Jede Textfarbe hält auf ihrem Untergrund einen Kontrast von mindestens 4,5:1, und Schwarz oder Weiß erfüllen das immer.
-
02
Formen, wie Ihre Marke sie zeichnet
Eckige Marken bleiben eckig, und Pill-Formen erscheinen nur bei Marken, die sie verwenden. Der Call-to-Action folgt Ihrem Button-Stil und fehlt in Bildern für Paid Social, wenn die Plattform ihren eigenen Button einblendet.
-
03
Dekoration nur, wenn Sie sie verwenden
Trennlinien und Schatten erscheinen nur, wenn Ihre Website sie verwendet. Keine Blob-Formen, Kreise, Akzentbalken oder großen Anführungszeichen, und keine Wörter, die Sie nicht selbst geschrieben haben.
-
04
Echte Textmessung
Text wird mit den Glyphenbreiten der Schrift gemessen, in der er gerendert wird, zwischen Wörtern umbrochen (bei Chinesisch und Japanisch zwischen Zeichen), eher verkleinert, als dass ein Wort abgeschnitten wird, und nur im äußersten Fall gekürzt.
-
05
Nur Ihre Bilder
Nur das Logo und die Bilder aus Ihrem Profil oder Ihren Uploads. Aus SVG-Logos werden vor dem Zeichnen Skripte und externe Verweise entfernt, und ein dunkles Logo auf dunklem Untergrund erhält eine Hinterlegung.
Acht Layouts
| Layout | Was es macht |
|---|---|
| Editorial | Große Schrift und großzügige Ränder |
| Poster | Eine Aussage, die das ganze Format füllt |
| Produkt | Ihr Screenshot oder Foto steht im Vordergrund |
| Split | Bild und Text oder die beiden Seiten eines Vergleichs in zwei Markenfarben |
| Zahl | Eine einzelne Zahl, groß gesetzt |
| Testimonial | Ein Zitat in schlichter Schrift, ohne Anführungszeichen als Grafik |
| Liste | Nummerierte oder einfache Punkte |
| Logo minimal | Ihr Logo und sehr wenig sonst |
Das Layout richtet sich nach dem Inhalt (eine Statistik bekommt das Layout „Zahl“, ein Zitat das Layout „Testimonial“) und nach den Merkmalen Ihrer Marke, wechselt innerhalb der Creatives einer Kampagne und ist nie eines, das ein Bild oder Logo braucht, das Sie nicht haben. Folien in Dokumenten und Videoszenen wissen, ob sie Titelseite, Hauptteil oder Abschlussseite sind.
Schriften
Renderer brauchen die Schriftdatei selbst. Demander holt sie aus Ihren Uploads (WOFF und WOFF2 werden intern dekodiert), aus den @font-face-Regeln Ihrer Website oder anhand des Familiennamens von Google Fonts. Lässt sich nichts laden, verwendet Demander eine Systemschrift derselben Gattung (Liberation, DejaVu oder Noto), und die Markenseite weist darauf hin. Schriften werden nur verwendet, um Ihre eigenen Creatives zu rendern.
Jede Änderung am Profil erhöht seine Versionsnummer, und die Version ist Teil des Cache-Schlüssels jedes Renderings. Eine neue Farbe oder Schrift zeichnet Ihre Creatives deshalb neu, ohne dass jemand es anstoßen muss.
Die Markenseite
Sie zeigt das aufgelöste Profil mit der Quelle jedes Felds, die Farbrollen mit ihren Kontrastprüfungen, Live-Proben Ihrer Schriften, Merkmale von Form und Layout, das Logo auf dem Hintergrund und auf der Primärfarbe, Ihre Referenzbilder mit ihren gemessenen Paletten und eine Leiste Ihrer Creatives, die sich neu lädt, wenn sich das Profil ändert. Dort finden Sie auch den Import des Designsystems, den Upload von Schriften und Logos und „Website neu einlesen“.
Ein einzelnes Creative kann trotzdem von der Marke abweichen: Der Editor im Creative Studio setzt Anpassungen pro Creative, Karte, Folie oder Szene, jeweils mit der Möglichkeit, auf die Markenwerte zurückzusetzen.
Häufige Fragen
Brauche ich ein Designsystem oder eine Figma-Datei?
Nein. Ihre Website wird beim ersten Crawl gelesen, und das reicht für den Start. Eine Token-Datei, eine Figma-Datei oder Referenzbilder machen das Profil genauer und haben Vorrang vor dem, was die Website geliefert hat.
Was ist, wenn die Farben unserer Website zu wenig Kontrast haben?
Jede Farbrolle wird beim Einlesen geprüft, und jede Textfarbe in einem Creative muss auf ihrem Untergrund 4,5:1 erreichen. Fällt eine Markenfarbe durch, wählt der Renderer eine andere Ihrer Farben, die den Wert erreicht, oder Weiß bzw. fast Schwarz.
Nutzen Landingpages und der gehostete Blog dasselbe Design?
Ja. Landingpages werden aus dem Profil mit Ihren Schriften, Farben, Ecken, Buttons und Ihrem Logo gerendert. Der gehostete Blog verwendet Ihre Markenschriften und Markenfarben, ersatzweise die Farben, die auf Ihrer Website gefunden wurden.
Was liest der Figma-Import?
Veröffentlichte Styles und ihre Werte über einen Personal Access Token, dazu lokale Variablen, wenn Sie Figma Enterprise nutzen. Lehnt Figma die Anfrage nach den Variablen ab, wird das auf der Markenseite vermerkt, und die Styles werden trotzdem verwendet.