Details zum Design-Paket

Sie haben sich für ein Premium Paket bei Shopgate entschieden? Dann übernimmt Shopgate für Sie das Design Ihrer nativen Apps und der mobilen Webseite - ohne Zusatzkosten.  

In diesem Artikel erhalten Sie alle notwendigen Informationen über das Designpaket von Shopgate.

 

 

Was Ihr Designpaket beinhaltet

In Ihrem Design Paket ist ein versierter 4-Stunden Design Service* inbegriffen, den Sie von Ihrem Shopgate Design Team erhalten. Dies entspricht der durchschnittlichen Zeit, die wir benötigen um das Design zu erstellen und in Absprache mit Ihnen eine Korrekturrunde vorzunehmen.

* Wenn Sie mehr Unterstützung wünschen, nehmen Sie bitte Kontakt mit unserem Sales Team auf, um eine Kostenschätzung zu erhalten.

 

Allgemein wird Ihr Shop Design in 2 zusammenfassenden Schritten erstellt: Layout-& Farbservice und Grafik Service.

Layout- & Farbservice

Ihr Layout- & Farbservice beinhaltet:

 Mobile Website  iOS und Android Apps
Shop Logo auf Smartphone und Tablet Webseite Shoplogo in allen Smartphone und Tablet Apps
Hintergrund und allgemeines Farbtheme Hintergrund und allgemeines Farbtheme 
Farbanpassungen für 29 individuelle Elemente? Farbanpassungen für 5 individuelle Elemente?
Startseite Layout via Widget System? Startseite Layout via Widget System?
Verlinken der Startseiten-Grafiken zu gewünschten Zielseiten? Verlinken der Startseite-Grafiken zu gewünschten Zielseiten?
Einbettung von Kampagnen und Werbegrafiken auf der Startseite Kampagnen und Werbegrafiken auf der Startseite
Andere Banner, Slider, Produkthighlight, etc.. Andere Banner, Slider, Produkthighlight, etc.
    Startbildschirm-Icon für alle Smartphones und Tablets 
    App Icon für das Einreichen im Appstore & Google Playstore 
    App Ladebildschirme für alle Smartphones und Tablets
    AppStore Screenshots für alle Smartphones und Tablets 
    Feature Image für den PlayStore

Grafikservice

Ihr Grafikservice beinhaltet:

Instandhaltung und Organisieren Ihrer Design-Grafiken auf unserem Cloud Server.
Hochladen aller Design-Grafiken in Ihren mobilen Shop.
Einreichen aller Design-Grafiken zum iOS App Store und Google Play Store.
Skalieren Ihrer Logo-Grafiken für verbesserte visuelle Eindrücke (auf Anfrage).
Bearbeitung, Anpassung und Verbesserung Ihres App Icons (auf Anfrage) Was ist das?
Bearbeitung, Anpassung und Verbesserung des Ladebildschirms Ihrer App (auf Anfrage).
Bearbeitung, Anpassung und Verbesserung der Android Feature Grafiken (auf Anfrage).
Einstellung der Hintergrundfarbe (einfach oder Farbverlauf) und/oder Bilder in App Grafiken (auf Anfrage). 
Hinzufügen von Elementen, wie Slogan oder Produktbilder zu einer spezifischen Grafik (auf Anfrage).
Shopgate kann KEIN neues Logo oder Icon für Sie komplett neu gestalten. 
Shopgate kann NICHT die Farbe der Schrift auf Textelementen ändern (Suche, Menüleiste, Produktbeschreibungen etc.)
Shopgate kann KEIN Hintergrundbild zu Ihrer mobilen Webseite hinzufügen
Shopgate kann KEINE Spezialeffekte unter Verwendung von Javascript Codes in Ihre Startseite implementieren.

 

Übermitteln Sie uns Ihre Wünsche & Grafiken

Ihr Input und Mitwirken ist essentiell um ein gelungenes Shop-Design für die mobile Webseite und die Apps für Sie zu erstellen! Lesen Sie bitte die nächsten 2 Kapitel (Layout & Farben und Grafik: Elemente in das Design einbetten) und senden Sie uns Ihre Grafiken zu.

Um das unten gezeigte Mail-Template zu nutzen, klicken Sie bitte auf die Email Adresse, um eine vorausgefüllte Email zu öffnen oder kopieren Sie den Betreff und den Inhalt manuell in Ihren externen Email Account. 

In welchem Format sollten Grafiken bereitgestellt werden?
Wie sollten Dateien am Besten für Shopgate bereitgestellt werden?

An: support-us@shopgate.com (Für US Shops)
support-de@shopgate.com (Für europäische Shops)
Betreff: Design Paket: Layout Präferenzen & Grafiken (Anhang)
Textkörper:

Hallo Shopgate,

im Folgenden finden Sie die Anfrage für das Layout meines mobilen Shops:

Teil 1: Layout & Farben

 Das gewünschte Layout entspricht dem Typ: z.B. Modern.
 Details über das Layout der Startseite: z.B. 5 Grafiken werden benötigt. Das oberste Bild sollte Bild Nr./Name sein (Anhang)...Zwei Bilder in der zweiten Reihe sollten diese sein ....
 Farbtheme: z.B. Gelb 
 Hauptakzent: #FFFF00 
Schriftart und Schriftfarbe innerhalb der Grafiken (kann NICHT für die Textelemente innerhalb der mobilen Website und App übernommen werden)
 Unsere Corporate Design Guidelines finden Sie unter diesem Link (oder im Anhang), falls gewünscht.

 Teil 2: Grafiken

 Ändern Sie bitte diese Grafiken: z.B. App-IconLadebildschirm, etc.
 Zusätzliche Anfragen und Kommentare, falls notwendig.

 

Die folgenden Grafiken sind an diese Email angehängt: 

 Logo Elemente: Shop-Logo, App-Icon, Ladebildschirm, Android Feature Image, etc.
 Grafiken für das Startseiten-Layout.
 Alle Graphiken in EPS Format oder besser in Auflöserate.
 Corporate Design Guidelines in PDF oder Bildformat, falls nötig. 
 Zusätzliche Grafiken, falls nötig.

 

Layout & Farben: Get that Look you want!

Bevor Shopgate mit Ihrem Mobile Shop Design beginnt, zeigen Wir Ihnen einige sehr gelungene Beispiele unserer Händler. Schauen Sie sich diese Designs genau an und notieren Sie sich Elemente, die Sie sich für das Design Ihres mobilen Shops wünschen. 

Ihr Look-book

Was ein fantastisches Design ausmachen kann, zeigen wir Ihnen an den folgenden Beispielen, die wir für Sie zusammengestellt haben.

Per Klick auf die einzelnen Layouts, können Sie die entsprechende mobile Seite des Shops öffnen. Um die die Apps zu besuchen öffnen Sie bitte die Links mit einem mobilen Endgerät.
Aktiv / Sportlich Slider und Kategorieliste Mosaik

 

Slider und Grid  Showroom Individuell

 

Modern Elegant Attraktiv

 

Wählen Sie Ihr Layout

Mit dem Startseiten Widget System haben Sie unbegrenzte Möglichkeiten, das für Ihren mobilen Shop passende Design zu finden! Unten zeigen wir Ihnen 24 verschiedene Layouts, die Sie inspirieren werden. Bitte teilen Sie uns per Email mit, welches Layout Sie favorisieren, wie Shopgate dieses Layout konkret anwenden soll und welche Grafiken Sie verwenden möchten.  

Um die Grafiken für Ihre Startseite an Shopgate zu übermitteln, wechseln Sie bitte in den Abschnitt Layout Element.

 

Theme und Farben festlegen

Bei Shopgate bieten wir 10 verschiedene Farbthemes für Ihre mobile Webseite und die Apps an. Diese Themes verleihen Ihrem mobilen Shop nicht nur den Hauptakzent, sondern bieten sorgfältig ausgewählte Farben für 29 weitere Elemente auf Ihrer mobilen Webseite und 5 in Ihren Smartphone Apps mit dem neuesten iOS8 Layout. Diese Farben können mit dem exakten Farbcode vollkommen auf Ihre Wünsche angepasst werden. So kann die Individualität Ihres Shops bestens hervorgehoben werden.

Dieser Prozess lässt sich besonders gut mittels der nachfolgenden Tabelle zeigen. Um uns dabei zu unterstützen, Ihr gewünschtes Layout so exakt wie möglich zu erstellen, teilen Sie uns bitte Ihre Wünsche mit: Ihre Auswahl eines Farbthemes und Hauptfarbe (in Hex Code), die Sie in Ihrer mobilen Seite und den Apps nutzen wollen. Falls mehrere Farben angefordert bzw. bereitgestellt werden, teilen Sie uns bitte mit, welche Farbe an welcher Stelle eingesetzt werden soll (siehe Tabelle unten).

Schritt 1. Wählen Sie ein Farbtheme Schritt 2. Verfeinerung mit Hex Code

Blau

Grün

Rot

Gelb

Hex Codes (z.B. #0b8137, #FFFFFF) werden verwendet, um die Farben einzelner Elemente in Ihrer mobilen Website und in den Smartphone Apps zu verfeinern. Die Farben beinhalten: 

 

Mobile Website:

Prmärfarben
Globale Variablen
Buttons
Formulare
Header & Footer
Breadcrumb
Produktliste
Suchleiste
Kategorieliste
Produktdetail-Seite
Warenkorb

 

Smartphone App (iOS 8 Layout):

Header Startseite Abgrenzungen
Inhaltsfarbe
Badge Farbe
Schlüsselfarbe 

 

Weiter Details finden Sie in Ihrem Shopgate Merchant Admin unter Design > Theme

Melone

Orange

Pink

Flat

Dark

Bright

   

 

Grafik: Elemente in das Design einbetten

Shop Logo 

Ihr Markenlogo ist das wichtigste grafische Element. Bitte stellen Sie die folgenden Grafiken bezüglich Ihres Logos zur Gestaltung Ihrer mobilen Webseite und die Apps zur Verfügung. Weitere Informationen zu speziellen Größen, finden Sie im Abschnitt über die Richtlinien für die Grafikauflösung.

Shop Logo

Anzeige Dieses Logo wird im Header Abschnitt auf Ihrer mobilen Webseite und in den Apps angezeigt.
Elementgröße Allgemein sollte ein Header-Logo die Größe von mindestens 640 × 140 Pixel oder größer in diesem Verhältnis für die mobile Webseite und 920 × 210 Pixel oder größer in diesem Verhältnis für die Tablet Apps haben.
Unser Grafik- Service

Skaliert Ihr Logo auf Anfrage für eine bessere bzw. nahtlose Anordnung in Ihrem Header. 
Upload Ihres Logos in Ihren mobilen Shop. 

 

App Icon

Anzeige

Dieses Icon repräsentiert Ihre Apps im iOS App Store und im Google Play Store.

Nachdem die App heruntergeladen wurde, wird dieses Icon auf dem Homebildschirm der iOS- oder Android Smartphones angezeigt. 

Elementgröße Dieses Icon sollte eine Größe von 1024 × 1024 Pixel oder größer (in diesem Verhältnis) haben. 
Unser Grafik- Service

Skaliert Ihr Icon für die verbesserte Einbettung, falls notwendig.
 Erstellt ein Icon, das nur die grafischen Elemente Ihres Logos nutzt. Was ist das?
 Bestimmt auf Anfrage die Hintergrundfarbe (einfach oder im Farbverlauf).
 Bestimmt auf Anfrage das Hintergrundbild.
✘ Wir können KEIN neues Icon komplett neu für Sie erstellen. 

 

Ladebildschirm

Anzeige Dieses Bild wird angezeigt, wenn Ihre App auf einem iOS oder Android Gerät geöffnet wird.
Elementgröße Die Größe eines Ladebildschirms variiert bezüglich der Auflösungsrate des entsprechenden Endgeräts. Allgemein sollte ein Ladebildschirm die Größe von 1600 × 2560 Pixel oder größer im Verhältnis für den Portraitmodus und 2560 × 1600 Pixel oder größer im Verhältnis zum Landschaftsmodus, haben.
Unser Grafik- Service

 Bestimmt auf Anfrage die Hintergrundfarbe (einfach oder im Farbverlauf).
 Platziert auf Anfrage das Hintergrundbild.
 Fügt Elemente ein wie Ihren Slogan und Grafiken eines Produkts.  

 

Android Feature Image

Anzeige Dieses Bild wird als Feature Image in der Vorschau des Google Playstores angezeigt.  
Elementgröße Die Größe des Ladebildschirms variiert in Bezug auf die Auflösung und dem Verhältnis des jeweiligen genutzten Endgeräts. Grundsätzlich sollte ein Ladebildschirm die Größe von 1024 × 500 Pixel oder größer in diesem Verhältnis haben.
Unser Grafik-Service

 Bestimmt auf Anfrage die Hintergrundfarbe (einfach oder im Farbverlauf).
 Platziert das Hintergrundbild auf Anfrage. 
 Fügt auf Anfrage Elemente ein wie den Slogan und Grafiken eines Produkts.

 

Layout Elemente

In Ihrem Design-Paket, gestalten wir die Startseite Ihrer mobilen Webseite und Apps auf Ihre Anfrage hin (siehe Layout der Startseite). Das wird im Shopgate Widget-Sytem anhand der Startseite vorgenommen. Lassen Sie es uns bitte wissen, welche Grafikelemente wir für das Layout verwenden sollen und wo wir diese genau platzieren sollen.

Wenn Sie zusätzliche Grafiken für Ihr Homepage Layout verwenden möchten, hängen Sie diese Dateien bitte an die Email an Shopgate an. Zum Beispiel: 

  • Zusätzliche Produktbilder
  • Existierende Slider
  • Spezielle Kategorien
  • Individuelle Produkte
  • Werbe- / Kampagnen

Ihre Design Manager sind außerdem erfahren in der Einbettung eines HTML Codes, falls gewünscht. Beachten Sie aber bitte, dass die Gestaltung Ihres Startseiten-Layouts unter Verwendung eines Javascript Codes NICHT in Ihrem Design-Paket inbegriffen ist.  

 

Ihre Design-Richtlinien

Wenn Ihr Shop eine Corporate Design Richtlinie hat, der wir folgen sollen, stellen Sie uns diese bitte im PDF-Format oder per Link zum Download zur Verfügung. Dazu gehören auch bestimmte Schriftarten und/oder Farbcodes (z.B. #FF000) in Ihren Logo-Grafiken und Regelungen für die Anzeige Ihrer Logo-Grafiken (z.B. verschiedene Versionen, Abstand zur Umgebung, etc.)

 

Frequently Asked Questions

Was ist das Layout Widget-System für die Startseite?

Das Layout Widget-System für die Startseite dient bei Shopgate zur Gestaltung und Organisation der Startseite eines mobilen Shops.

Mithilfe dieses Systems, können ansprechende Banner, Slider, Kategorien, Produkte und Werbeaktionen auf der Startseite der mobilen Webseite und der Apps mit nur kleinem Aufwand erstellt werden. 

Dieses System zeichnet sich durch eine einfache Drag-n-Drop Funktion für das nahtlose (re-)organisieren der Elemente auf der Startseite des Shops aus. Auf diese Weise kann mit den verschiedenen Layouts experimentiert werden, um einen raschen Wechsel der Szenerie zu erstellen, falls nötig (Halbjahres-Sale, Weihnachten, etc.).

 

Wohin kann ein Link auf der Startseite verbinden?

Grafiken die über das Shopgate Layout Widget-System auf der Startseite angeordnet werden, können auf eine Seite oder Service verlinkt werden, wie in der Übersicht angegeben: 

In App oder mobile Website
Produktseite Kategorieseite Startseite Warenkorb
Favoritenliste Meine Bestellungen Mein Konto CMS Seite
Versandbestimmungen Zahlungshinweise  Gutschein-Seite  Gutschein zum Warenkorb hinzufügen 
Suchergebnisse AGB Rückgaberecht Impressum
Extern
Telefonnummer anrufen  Email senden Externer Link  

 

Was ist der App Icon Anpassungs-Service?

Wir empfehlen Ihnen ein App Icon mit einem klaren Grafikelement (wenig bis kein Text) für eine bessere App ASO (App Store Optimization). Dies führt allgemein betrachtet zu "mehr potentiellen Kunden" in den Apps, mit denen Produkte verkauft werden. Auch Ihr Shopname muss nicht zwingend in das Icon eingebunden werden - Ihr App Icon wird immer zusammen mit dem Appnamen und/oder Appbeschreibung angezeigt. 

Shopgate hilft Ihnen gerne bei der Erstellung eines ASO-verbesserten App Icons von Ihrem existierenden Icons oder Logos. Zum Beispiel können wir Texte und Grafiken von Ihrem Icon erstellen oder unter Verwendung Ihres Logos ein Icon erstellen. 

  Logo/Icon von Ihnen bereitgestellt Icon von Shopgate generiert

Logo mit klarer Grafik (Empfohlen)

Wir können ein Icon mit den am meisten charakterisierenden grafischen Elementen von Ihrem Logo erstellen. 

Logo mit Text

Wir werden Ihr Logo nur verwenden, um ein Icon in der korrekten Größe zu erstellen. 

Weitere Tipps für das AppStore optimierte Icon können im Artikel App Store Optimization: Wie Ihre Apps besser gefunden werden in unserem Support Center gefunden werden.

 

In welchem Format sollten Grafiken zur Verfügung gestellt werden?

 EPS Format

Wir bitten Sie darum, uns alle Grafiken im EPS Format bereitzustellen, um das beste visuelle Ergebnis zu erzielen.

 Hochauflösende Grafiken

Wenn dies keine Option für Sie ist, stellen Sie bitte alle Grafiken in der höchst möglichen Auflöserate bereit.

Prüfen Sie bitte Ihre Grafik Auflösungs-Richtlinien, bevor Sie uns Dateien im Bildformaten zusenden.

CorelDraw Format

Senden Sie uns bitte KEINE Grafiken im CorelDraw Format. Wenn Sie dieses Programm verwenden, müssen die gewünschten Grafiken zuerst als EPS Dateien exportiert werden. 

 Niedrigauflösende Grafiken

Für den Fall, dass Sie nicht-vektorierte Grafiken für Shopgate bereitstellen, müssen wir im Rahmen Ihres gebuchten Pakets (bzw. des Zeitfensters von 4-Stunden) jene Zeit vom Zeitkontingent abziehen, die es in Anspruch nimmt, die Dateien in das erforderliche Format zu formatieren.

 

Wie Sie diese Dateien am besten für Shopgate bereitstellen 

 Dropbox
  • Stellen Sie bitte alle Grafiken in einem separaten Ordner zur Verfügung.
  • Erteilen Sie Shopgate Zugriffsrechte zum Download des Ordners.
 Email
  • Senden Sie uns alle Grafiken komprimiert in einer Datei.
  • Markieren Sie jede Grafik mit einem passenden Titel, um Missverständnisse zu vermeiden. 

 

Wie viele Updates können pro Jahr angefragt werden?

Wir können Ihre Grafiken in Ihren Apps bis zu 4 Mal pro Jahr* auf Anfrage hin aktualisieren. Für die Anfrage eines Grafik-Updates lesen Sie bitte die Hilfestellungen im Artikel Update Ihrer Apps anfragen.

* Das beinhaltet nicht Systemupdates die durch Shopgate eingeleitet werden.

 

Zusätzliche Quellen

Auflösungsrichtlinien für Logo-Grafiken

In dieser Übersicht finden Sie alle relevanten Größen und Auflöseraten für Ihre Grafiken: 

Mobile Website

Header Logo

= 640 x 140 px

Apps App Icon

= 1024 x 1024 px

Tablet Header Logo

= 920 x 210 px

Feature Image
Android Play Store

= 1024 x 500 px

Ladebildschirme

iOS:
iPhone 4S
iPhone 5
iPhone 6
iPhone 6+
iPad

Android:
Smartphone
Tablet 

 


= 640 x 960 px
= 640 x 1136 px
= 750 x 1334 px
= 1242 x 2208 px
= 2048 x 1536 px


= 1600 x 2560 px
= 2560 x 1600 px

  

Grafiken für den Download bereitstellen

In dieser Übersicht finden Sie eine Zusammenstellung von Grafiken, die Sie herunterladen können. Die Dateien helfen Ihnen bei der Erstellung notwendiger Designelemente in der richtigen Größe. Klicken Sie rechts auf die entsprechende Datei um diese herunterzuladen. 

Mobile Website

Header Logo

mobile_header_logo.psd

Apps App Icon

app_icon_1024px.psd

Tablet Header Logo

tablet_header_logo.psd

Feature Image
Android Play Store

featureimage_playstore.psd

Ladebildschirm

iOS:
iPhone 4S
iPhone 5, 6, 6+
iPad

Android:
Smartphone
Tablet 

 


iPhone_loadingscreen_4s.psd
iPhone_loadingscreen_5_6_6plus.psd
iPad_loadingscreen.psd


android_loadingscreen_phone.psd
android_loadingscreen_tablet.psd

 

DIY: Ihr mobiler Shop

Sie interessieren sich dafür, wie wir das Design Ihres mobilen Shops erstellen? Dann besuchen Sie unser Support Center:

App Store Optimization: Die Sichtbarkeit Ihrer Apps steigern
 Layout für Apps und die mobile Seite gestalten

 

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich