Screendesign für Header eines Magento 2 Online-Shops
Für einen Magento 2 Shop soll der Headerbereich neu gestaltet werden.
Dazu liegen erste grobe Designentwürfe vor (siehe Anhang).
Der Headerbereich umfasst folgenden Elemente:
– die komplette oberen Leiste mit dem Hinweistext “Angebot nur für Gewerbetreibende” und der Bereich rechts mit den einzelnen Verlinkungen (Mein Konto, Warenkorb usw.)
– Platzhalter für Logo
– Sucheingabefeld und Suchbutton
– Hauptnavigationsleiste (inaktiv und aktiver Menüpunkt)
Dieser Headerbereich soll ein modernes und schlichtes Layout erhalten, welches aktuellen Trends im Web-Screendesign folgt.
Als Beispiele könnten hier die Header von www.zalando.de, www.aboutyou.de oder www.birkenstock.de genannt werden, an denen man sich orientieren kann.
Es soll jedoch keine Kopie der Header der genannten Seiten sein. Eigene ideen sollten eingebracht werden und sich in das vorhandene Layout einfügen.
Wichtig ist die Platzierung und Darstellung der Icons und Links im Header. Hierbei ist darauf zu achten, dass noch verschiedene Icons bzw. Links hinzukommen könnten.
Benötigtes Screendesigns:
Benötigt wird jeweils ein Screendesign für den Header für folgende Web-Ansichten:
1) Desktop Ansicht
2) RWD Ansicht Tablet IPad (quer und hochkant)
3) RWD Smartphone IPhone 7 Ansicht (quer und hochkant)
Farben
Vorzugsweise sollten die folgenden Farben verwendet werden:
weiss: #ffffff
blau: #3497cf
dunkelgrau: #666666
hellgrau: #a7a7a7;
Icons
Bei Verwendung von Icons sollte die OpenSource Variante von Font Awesome 5.x verwendet werden.
Erläuterungen zu den angehängten Screens:
Infos zu Screen 1: 01-kunde-nicht-angemeldet.jpg
Links oben steht ein Hinweis für welche Zielgruppe das Angebot gilt (hier nur Gewerbetreibende da B2B Shop)
Die Auswahl “B2B+B2C” kann für die Layouterstellung ignoriert werden.
Das Icon mit der Weltkugel und die Abkürzung “DE” ist der Sprachumschalter des Shops.
Das kleine Pulldown unter “Mein Konto” soll alle relevanten Links und Anmeldemöglichkeiten beim aufklappen anzeigen. In diesem Screen ist der User noch nicht angemeldet.
Der “Warenkorb” zeigt in Klammern die Anzahl der Positionen im Warenkorb an. Hier wird keine Summenanzeigen gewünscht. Zudem soll hier beim drüberfahren eine Warenkorbvorschau angezeigt werden (siehe Beschreibung unten).
Die Suchleiste sollte ausreichend groß gestaltet werden.
Infos zu Screen 3: 02-kunde-angemeldet-box-mein-konto.jpg
Screen 2 zeigt den aufgeklappten Bereich für “Mein Konto”. Hier soll der Benutzername und deren E-Mail angezeigt werden.
Anders als hier abgebildet, soll die Unternehmensauswahl (Dropdown Ihr aktuelles Unternehmen) nicht in der Box erscheinen, sondern müsste z.B. in die obere Leiste integriert werden. Hier sind wir für andere Ideen aber offen. Diese Unternehmens-Auswahl erscheint erst, wenn ein User sich angemeldet hat.
In der Box sollen neben Benutzername und E-Mail noch weitere Verlinkungen angezeigt werden. Hierzu gehören z.B. ein Link zur Konto-Übersicht, Schnellbestellung etc.
Zusätzlich müssen noch die beiden Links “Preise ausblenden” und “Abmelden” angezeigt werden. Diese sollen sich farblich / optisch von den anderen Links in der Box unterscheiden.
Auch diese Darstellung sollte so kompakt wie möglich designed werden.
Infos zu Screen 2: 03-kunde-angemeldet-box-warenkorb.jpg
Screen 3 zeigt die Vorschau des Warenkorbs. Dabei sollen (wie abgebildet) verschiedene Warenkorb-Aktionen direkt anklickbar sein, sowie eine scrollbare Vorschau der im Warenkorb befindlichen Artikel.
Gerade diese Ansicht sollte so kompakt wie möglich gestaltet werden, damit die genannten Infos Ihren Platz finden.
Die Aktionsbuttons unten müssen auch nicht blau sein und können ggf. verkleinert werden. Der Button “Warenkorb ansehen und bearbeiten” sollte optisch / farblich hervorgehoben werden.