Kontext

Assets sind andere visuelle Elemente, die sich nicht in Kategorien einordnen lassen, wie Farben, Schriftarten usw. Das können z.B. Bilder oder Logos sein

Startbildschirmbild

Hier kannst du den gesamten sicheren Bereich nutzen, um ein beliebiges Bild deiner Wahl zu zeigen. Da die Komponenten über dem Bild die Sichtbarkeit auf kleineren Geräten erschweren können, empfehlen wir dir keine Texte innerhalb des Bildes zu platzieren.

Die Figma-Vorlage dazu findest du hier.

Anforderungen:

• Seitenverhältnis: 16:10
• Bildgröße: 2880x1800 px
• Maximale Größe: 1mb
• Bildformat: JPG
• Dateiname: home_background

Logo

Das Logo ist das Symbol für deine Marke. Er wird meist in der Kopfzeil verwendet

Anforderungen

• Sicherer Bereich: 150x48px SVG, 300x96px PNG und JPG
• Maximale Größe: 128kb
• Maximale Breite: 150px
• Bildformat: Empfohlen SVG, PNG und JPG
• Dateiname: brandname_logo

Logos – Dos und Don‘ts

Das solltest du tun:

• Richte das Logo am linken Rand aus
• Behalte die Breite bei

Das solltest du lassen:

• Lasse an den Seiten keinen freien Raum

Das Logo kann oben oder unten einen Abstand haben; es wird automatisch auf eine maximale Breite des Containers positioniert.

Die Figma-Vorlage dazu findest du hier.

Symbole

Symbole für Bestellarten

Diese Symbole dienen als Platzhalter für jede Bestellart, die ein Standort hat. Erstelle ein Symbol für jede Bestellart, die deine Marke abdeckt. Sie werden auf der Homepage verwendet.

Die Figma-Vorlage dazu findest du hier.

Anforderungen:

• Seitenverhältnis: 1:1
• Bildgröße: 48x48 px
• Maximale Größe: 128kb
• Bildformat: SVG
• Dateiname: order_type_name_icon

Andere Assets

Favicon

Das Favicon ist ein Element, das mit einer Webseite verbunden ist. Viele verwenden ein Favicon als optische Erinnerung an die Webseite in den Registerkarten eines Browsers.

Die Figma-Vorlage dazu findest du hier.

Anforderungen: 

• Seitenverhältnis: 1:1
• Bildgröße: 144x144px
• Maximale Größe: 128kb
• Dateiformat: SVG, PNG, JPG
• Dateiname: favicon

Standort-Pins

Da der untere Pin den genauen Koordinatenpunkt anzeigt, sollte das Asset immer an der unteren Kante des Containers befestigt sein. Verwendung: Adressbuch-Karte, Lieferdetails, Lieferverfolgung.

Die Figma-Vorlage dazu findest du hier.

Anforderungen:

• Bildgröße: 56x64px
• Dateiformat: SVG
• Dateiname: user_location_pin, venue_open_pin, venue_closed_pin

Standort-Pin

Dieses Asset zeigt die Koordinaten des Standorts auf der Karte. Das Asset muss zwei separate Bilder/Varianten haben:

• Standort geöffnet: Asset, das während der Öffnungszeiten des Standorts angezeigt wird
• Standort geschlossen: Asset, das außerhalb der Öffnungszeiten angezeigt wird oder wenn ein Standort aus irgendeinem Grund nicht in Betrieb ist

Benutzerstandort

Asset, das zur Anzeige der Koordinaten verwendet wird. Zeigt den Standort des Benutzers auf einer Karte an, entweder wenn der Benutzer seinen Standort über den Browser angibt oder wenn er manuell eine Adresse aus der Sucheingabe auswählt.

Angebots-/(Coupon)symbol

Wenn deine Marke Angebote oder Promotions konfiguriert hat, aber nicht über Loyalty verfügt, solltest du auch ein Angebotssymbol bereitstellen, das auf der Speisekartenseite angezeigt wird.

Die Figma-Vorlage dazu findest du hier.

Anforderungen:

• Bildgröße: 48x48 px
• Dateiformat: SVG
• Dateiname: coupon.svg