04 · Beweis

Marke & Grafik · Kreative Demo

Marken-Case „Röstwerk“

Eine Kaffeerösterei, die es nicht gibt, mit einer Marke, als gäbe es sie: Logo, Verpackung, Website, Social-Media-Feed und Anzeigen aus einer Hand, erzählt als ein einziger Röstvorgang.

Typ
Marke & Grafik · Demo-Projekt
Rolle
Konzept, Gestaltung und Umsetzung
Live
michael-gluska.de/roestwerk
michael-gluska.de/roestwerk ansehen (öffnet in neuem Tab)
Vorschau der Demo „Röstwerk“: Farbstreifen von Grün bis fast Schwarz wie die Röststufen einer Kaffeebohne, darüber der Schriftzug „Röstwerk“, eine Risslinie, 218 Grad und drei Kaffeetüten

Ausgangslage

Marke, Website, Social Media und Werbung kommen oft von vier verschiedenen Dienstleistern. Das Ergebnis passt selten zusammen, und keiner fühlt sich für das Ganze verantwortlich.

Die Idee

Der Scroll ist die Röstung: Die Seite färbt sich von der grünen Rohbohne bis zur dunklen Röstung, ein Thermometer steigt von 20 auf 230 °C, und an den zwei „Cracks“ bricht die Schrift auf. Jede Röststufe zeigt eine Leistung, vom Logo bis zur Anzeige.

Umsetzung

  • Logo-Konstruktion, die sich mit Hilfslinien, Kreisen und Achsen selbst zeichnet, dazu Farbpalette, Schriftpaar und drei Verpackungen.
  • Shop-Mockup mit großer Typografie und Abo als Hauptprodukt, schräg im Raum, das sich beim Darüberfahren aufrichtet.
  • Endloses Band aus acht Post-Formaten für Instagram und ein Wochenplan für den Content.
  • Zwei Anzeigen zum Abstimmen: Der Besucher wählt, danach erscheinen Ergebnis und Kampagnen-Kennzahlen.
  • Plakatwand mit derselben Botschaft in drei Stilen: Schweizer Raster, Risografie und Punk-Collage.
  • Riesiger Schriftzug, der fetter wird, je näher die Maus kommt, und eine Kaffeebohne als Mauszeiger.

Datenschutz

Eine einzelne Seite ohne Formular, ohne Cookies und ohne Tracking. Schriften und Grafiken liegen auf der eigenen Domain, es werden keine fremden Server angefragt.

Stand

Fiktives Demo-Projekt: Röstwerk, Produkte, Follower und Kampagnenzahlen sind ausgedacht und auf der Seite als Beispielwerte gekennzeichnet. Aufbau und Vorgehen lassen sich auf ein echtes Unternehmen übertragen.

Technik

  • HTML, CSS, JavaScript
  • SVG-Grafik
  • Variable Fonts
  • Scroll-Dramaturgie
  • ohne Bibliotheken