Markenwebsite mit Online-Shop
AGUA DURA
)
AGUA DURA ist ein Orangenaperitif nach dem Vorbild von Agua de Valencia, mit und ohne Alkohol. Wir haben die Markenwebsite mit Online-Shop entwickelt. Sie erklärt das Ritual „zwei Cero, ein Dura“ auf einen Blick und führt von jeder Sorte direkt in den Warenkorb.
- Leistungen
- Webdesign & Entwicklung
- E-Commerce & Shopsysteme
- Website
- agua-dura.com ↗
01Ausgangslage
AGUA DURA bringt einen Orangenaperitif in drei Sorten auf den Markt: Cero ohne Alkohol, Dura mit 12 % vol. und Mixto als fertigen Hausmix für die Gastronomie. Hinter der Marke steht ein Ritual zum Teilen. Zwei Flaschen Cero und eine Flasche Dura ergeben den gemeinsamen Mix.
Die Website sollte dieses Prinzip in wenigen Sekunden verständlich machen. Sie sollte die Valencia-Stimmung der Marke transportieren und Cero, Dura sowie das Kombipaket direkt verkaufen. Weil Dura Alkohol enthält, gehört eine Altersabfrage dazu.
)
)
02Lösung
Wir haben eine Markenwebsite mit integriertem Shop gebaut: Payload CMS für die Inhalte, Next.js im Frontend und Stripe für die Zahlungen. Farben, Schriften und Illustrationen kommen direkt vom Etikett: Creme, Blau, Sonnengelb und die Azahar-Blüte.
Hero
Im Mittelpunkt steht die Flasche in 3D, umgesetzt mit Three.js. Sie entsteht direkt im Browser aus ihrem Umriss, mit Glas, Etikett, Schraubverschluss und Wassertropfen. Die Überschrift „In voller Blüte.“ liegt hinter der Flasche und bricht sich im Glas. Beim Scrollen dreht sich die Flasche einmal, zeigt ihr Rückenetikett und wandert zur Seite, wo der Text mit dem Button erscheint. Ohne WebGL zeigt die Seite stattdessen ein Foto der Flasche.
Produktkarten
Jede Sorte hat ihre eigene Farbe. Fährt man mit der Maus über eine Karte, wächst hinter der Flasche eine gezeichnete Orangenblüte. Gleichzeitig wird aus der Preisangabe ein Warenkorb-Button. So kommen Besucher ohne Umweg von der Übersicht in den Kauf.
)
Mixstudio
Das Mixstudio ist ein kleiner Rechner. Besucher stellen ein, wie viele Flaschen Cero und Dura auf dem Tisch stehen. Das Glas füllt sich im passenden Verhältnis und die Seite zeigt den Alkoholgehalt des Mixes. Schnellwahlen für Cero pur, den 2:1-Mix und Dura pur machen den Unterschied sofort sichtbar.
Dazu kommen Altersabfrage, Cookie-Einstellungen, ein FAQ-Bereich und ein Newsletter mit datenschutzfreundlichem Spamschutz. Auf dem Smartphone stehen Karten und Mixstudio untereinander, alle Funktionen bleiben erhalten.
)
)
03Ergebnis
AGUA DURA hat eine Website, die das Produkt erklärt und verkauft. Das Ritual „zwei Cero, ein Dura“ zieht sich durch die ganze Seite: Hero, Produktkarten, Mixstudio und die Anleitung zum Servieren. Jede Sorte hat eine eigene Shop-Seite mit Warenkorb. Ein Projekt aus unseren Bereichen Webdesign & Entwicklung sowie E-Commerce & Shopsysteme.
)
)
Technologien
Womit wir es gebaut haben.
Payload CMSOpen Source auf eigenen Servern in der EU, die Grundlage unserer Plattform Rocketsite.
Next.jsUnser Framework für schnelle Websites, Shops und Web-Anwendungen.
StripeZahlungen mit Karte, EPS und mehr direkt in Ihrem eigenen Checkout.
Three.jsFür 3D im Browser, etwa Produkte, die sich beim Scrollen drehen.
)
)
)