4.6 KiB
Kurzbriefing für Entwickler: 9:16 HTML-Display (CABINET Bielefeld) – Produktloop
Ziel Auf dem vorhandenen 9:16-Display (HTML/Webseite) sollen zusätzlich zu CABINET-Werbevideos produktbezogene Angebots-Slides laufen. Fokus: Abverkauf von 2 Produkten (GOYA + TANDO) in einem hochwertigen, ruhigen CABINET-Look (clean, viel Weißraum, klare Typo).
⸻
- Format & technische Vorgaben • Format: 9:16 Hochkant, 1080×1920 px (responsive skalierbar). • Safe-Area: 64 px Rand innen (keine wichtigen Inhalte außerhalb). • Loop: 4 Slides (Slide 0–3) als Rotation. • Timing: • Slide 0 (Intro): 8s • Slide 1 (GOYA Preis/Hero): 10s • Slide 2 (GOYA Details/Konditionen): 12s • Slide 3 (TANDO Preis/Hero): 10s • anschließend wieder Slide 0 • Transition: weiche Fades (0,5–0,7s), keine harten Effekte. • Assets: pro Slide 1 Hintergrundbild (Hero) + optional QR als PNG/SVG.
⸻
- Layout-Konzept (einheitlich für alle Slides)
Seitenaufbau (von oben nach unten): 1. Header: Marke + kurze Kontextzeile (z. B. „Ausstellungsware / Einzelstück“) 2. Hero: großes Bild (clean, hochwertig) 3. Bottom Area: • links: Text-/Preisblock (Produktname, Subline, Preis, ggf. UVP/Bullets) • rechts: QR-Box (CTA + QR + Kontaktzeile)
Wiederkehrende Elemente • QR-Box immer rechts unten gleich platziert. • CTA-Texte kurz und klar (z. B. „Infos & Reservierung: QR“). • Disclaimer klein: „Zwischenverkauf vorbehalten.“
⸻
- Inhalte pro Slide (finale Texte)
Slide 0 – Intro
Header links: CABINET Bielefeld Header rechts: Planung • Beratung (Zeilenumbruch möglich) + Lieferung/Montage Hero Badge/Teaser: Einzelstücke & Ausstellungsdeals – nur solange verfügbar Textblock (links unten): • Eyebrow: Heute im Fokus • Headline: Kuratiert. Hochwertig. Sofort. • Subline: Scannen Sie den QR-Code für Kontakt & Store-Infos. • Footer klein: CABINET Bielefeld – im Store ansprechen oder direkt reservieren • Disclaimer klein: Zwischenverkauf vorbehalten
QR-Box (rechts): • Titel: Kontakt & Store-Infos • Sub: QR scannen • Kontaktzeile: WhatsApp: … · Tel.: … • QR führt auf: Kontakt-/Store-Seite (URL wird geliefert)
⸻
Slide 1 – GOYA (Variante B: Preis/Hero)
Header links: CABINET Header rechts: Ausstellungsware + Einzelstück Hero Hinweis: Bild GOYA (Hero-Foto)
Textblock: • Eyebrow: Ausstellungsware • Titel: GOYA Sideboard • Subline: Marke: Sudbrock • Preis groß: 489 € • Preiszusatz: brutto • UVP-Zeile: UVP neu: 4.744 €* • Disclaimer klein: *UVP nur, sofern belegbar. Zwischenverkauf vorbehalten.
QR-Box: • Titel: Infos & Reservierung • Sub: QR scannen • Kontaktzeile: WhatsApp: … · Tel.: … • QR führt auf: GOYA-Detail/Reservierung (URL wird geliefert)
⸻
Slide 2 – GOYA (Variante B: Konditionen)
Header links: CABINET Header rechts: GOYA + Konditionen Hero Hinweis: GOYA Detail/2. Ansicht
Textblock: • Eyebrow: GOYA | Konditionen • Headline: Details auf einen Blick • Bullets: 1. Eingelagertes Einzelstück 2. Abholung: Lager Rheda-Wiedenbrück 3. Lieferung/Montage optional 4. Preis gilt ohne Lieferung/Montage 5. Deckel: Weiß matt (erneuert) • Footer: Details & Reservierung + QR scannen
QR-Box: • Titel: Details: QR scannen • Sub: Reservierung & Kontakt • Disclaimer: Zwischenverkauf vorbehalten • QR führt auf: GOYA-Detail/Reservierung (gleiche URL wie Slide 1)
⸻
Slide 3 – TANDO (Variante C: Impulskauf)
Header links: CABINET Header rechts: Nur 1× im Store + Sofort Hero Hinweis: Foto des Spiegels im Laden (TANDO)
Textblock: • Eyebrow: Nur 1× im Store • Titel: TANDO Spiegel • Subline: Ansehen & mitnehmen – heute • Preis groß: 199 € • Preiszusatz: brutto • kleine Zusatzzeile: Jetzt sichern
QR-Box: • Titel: Jetzt sichern • Sub: QR scannen oder Team ansprechen • Kontaktzeile: WhatsApp: … · Tel.: … • QR führt auf: TANDO-Detail/Info (URL wird geliefert)
⸻
- Inhalte/Logik als Konfiguration (Wunsch)
Bitte so bauen, dass Texte/QR-Links/Zeiten leicht austauschbar sind: • slides[] (JSON) mit Feldern: duration, headerLeft, headerRightLines[], heroImage, eyebrow, title, subline, price, priceNote, uvp, bullets[], qrTitle, qrSub, qrLink, contactLine, disclaimer.
⸻
- Offene Inputs vom Auftraggeber (Platzhalter) • WhatsApp Nummer / Tel. • QR-Ziel-URLs: • Kontakt/Store • GOYA Detail/Reservierung • TANDO Detail/Info • Bildassets (1080×mind. 1400 empfohlen): • GOYA Hero • GOYA Detail • TANDO im Store
Das Briefing ist so geschrieben, dass der Entwickler es direkt als HTML/CSS/JS-Slider umsetzen kann (oder in eure bestehende HTML-Playlist integrieren).