Rund und Bunt Webshop

Visual Identity und ein individuell entwickelter Webshop für eine Frankfurter Pizzeria mit eigenem Lieferservice

  • Website
  • Branding
  • Handel
Ein iPhone und ein iPad zeigen unterschiedliche App-Screens des Rund-und-Bunt-Shops: Das iPhone zeigt die Startseite mit Logo, Begrüßung und Kategorie-Icons. Das iPad zeigt die Artikelseite einer Pizza mit Auswahl von Boden und Belag.

SCOPE

Basierend auf dem bestehenden Logo soll eine neue Visual Identity entstehen, die die Marke Rund und Bunt in allen Medien konsistent repräsentiert. Als Basis entsteht ein eigener Webshop mit Bestellprozess, der Farb- und Typografiesystem definiert.

Der Rund-und-Bunt-Shop auf Smartphone und Tablet: das runde Logo auf kräftigem Pink, eine grüne Sprechblase, die auf der neuen Website begrüßt, vier Kategorie-Icons und darunter eine Reihe Pizzen.
Shop-Startseite, Smartphone und Tablet
Die Seite „Wir sind Pizza Rund & Bunt“ auf Laptop, Tablet und Smartphone – dieselbe Überschrift und derselbe Fließtext, der über die drei Breiten von drei Spalten auf eine umbricht.
Ein Layout über drei Breiten
Drei Tablets aus dem Bestellprozess: ein Raster von Pizzen mit Preis und Auswahl-Button, eine Artikelseite mit Auswahl von Pizzaboden und Füllung samt laufender Zwischensumme, und der Warenkorb mit drei Positionen kurz vor der Bestellung.
Stöbern, konfigurieren, bestellen
Die Sitemap als Knotendiagramm: der Weg vom Öffnen der Seite über die Cookie-Einwilligung und die Startseite zu Artikeldetail, Warenkorb, Checkout und Statusseite, mit den Rechtsseiten als eigenem Zweig und Anmerkungen an den bedingten Schritten.
Sitemap
Der User Flow „Bestellung aufgeben“ als Diagramm: der Weg vom Aufruf der Website über Abholung oder Lieferung, Artikeldetail, Optionen, Warenkorb und Checkout, mit farbigen Pfaden für Abbruch und erfolgreichen Abschluss.
User Flow: Bestellung aufgeben
Ein Schriftmuster von Rubik Black, schwarz auf Gelb: ein deutscher Pangramm-Satz groß gesetzt, das Versalalphabet, Ziffern und Satzzeichen, ausgewiesen als Schrift für Überschriften.
Rubik Black — Überschriften
Ein Schriftmuster von Space Grotesk, schwarz auf Gelb: derselbe Pangramm-Satz in Regular und Bold, das Alphabet in Groß- und Kleinbuchstaben, Versal- und Mediävalziffern sowie Satzzeichen, ausgewiesen als Schrift für Texte und Ziffern.
Space Grotesk — Texte und Ziffern
Die beiden Schriften kombiniert auf Gelb: „Wir sind Pizza Rund & Bunt“ groß in Rubik Black über zwei Spalten Fließtext in Space Grotesk.
Die Kombination im Einsatz
Die Primärpalette als sechs hohe Farbstreifen, jeder mit seinem Namen beschriftet: kohle in Fast-Schwarz, rote beete in Pink, mais in Gelb, avocado in Grün, reflex in Blau und tomate in Rot.
Primärpalette
Die Sekundärpalette als sechs hohe Farbstreifen, jeder mit seinem Namen beschriftet: mozzarella in Cremeweiß, erdbeereis in Rosa, banane in Aprikose, rucola in dunklem Oliv, wasser in blassem Flieder und karotte in Orange.
Sekundärpalette
Ein Komponentenblatt auf Grau: Eingabefelder in leerem, gefülltem und fehlerhaftem Zustand, Mengenwähler, Checkboxen und Radiolisten, Einkaufstaschen-Icons mit Artikelzahl, die Kategorieleiste in Pink und Gelb, ein Umschalter für Abholung oder Lieferung, und farbige Karten für jede Stufe einer Bestellung von der Bestätigung bis zur Auslieferung.
Komponenten-Set
Die vier Kategorie-Icons – Pizza, Pasta, Salate und Getränke – als Teller von oben gezeichnet, groß mit ihren Beschriftungen und noch einmal als fixierte Navigationsleiste auf einem Smartphone.
Kategorie-Icons und fixierte Navigation

Verwandte Projekte