Online-Shop Webseite: Café Chavalo eG, 2021

11. Februar 2021, Webdesign
Screenshot-Startseite-Prestashop-Cafe-Chavalo-Segelkaffee-20210128 Screenshot-Shop-Kaffee-kaufen-Prestashop-Cafe-Chavalo-Segelkaffee-20210128 Screenshot-Schnellansicht-Segelkaffee-Prestashop-Cafe-Chavalo-Segelkaffee-20210128 Screenshot-Contentseite-UeberCafeChavalo-Prestashop-Cafe-Chavalo-Segelkaffee-20210128 Screenshot-Contentseite-Die-Wege-unseres-Kaffees-Prestashop-Cafe-Chavalo-Segelkaffee-20210128

About

Der Online-Shop der Kaffeegenossenschaft wurde komplett überarbeitet, die Usabillity gestärkt und durch das responsive Design für alle Ausgabegeräte optimiert.

Durch eine optimierte Strukturierung, vereinfachte Nutzerführung und typografische Konfigurationen entstand eine Webseite, die den heutigen und zukünftigen Anforderungen gerecht wird. Zur Präsentation habe ich die bisherige und die neue Webseite gegenübergestellt. Grundsätzliche Layouts konnten und sollten übernommen werden, durch typografische Eingriffe können Überschriften und Texte optisch ansprechender dargestellt werden. Die Menüleiste im Header ist fixiert, die Auswahl von Shop über Kaffee kaufen oder den Informationen Über Café Chavalo, sowie der Warenkorb sind einfach und schnell nutzbar.

Der PrestaShop besteht aus einem Shopteil und dem Content. Die Startseite beinhaltet die Elemente einer Landingpage. Der Grad der Verlinkungen innerhalb der Webseite hat sich wesentlich erhöht, jedes Element verweist auf Shop- oder Contentseiten, ein Beispiel: Die Seite Kaffee kaufen wird über fünf Verlinkungen erreicht, ebenso der Content Über Café Chavalo.

Im Shop wird die Navigation über das Menü unterhalb des Sliders und über die Schnellansicht geführt. Jeder Artikel ist so in zwei Ansichten ansteuerbar. Dies sind generelle Elemente von PrestaShop, die für Café Chavalo an das Gestaltungskonzept angepasst wurden.

Einige Elemente sind nicht im Standardtheme vorgesehen und wurden programmiert.

Besonderheiten der Webseite

Eine wichtige Aufgabe bei der Umgestaltung der Webseite war der Aufbau der Contentseiten mit dem existierenden Grid Layout, der Standard des Classic Themes der PrestaShop-Software. Zum Editieren der Seiten wurde das JS-Werkzeug Codemirror.js eingesetzt (https://codemirror.net/). Die Nutzung von zusätzlichen datenintensiven Plugins konnte so vermieden werden.

Externe Quellen nutzen: Die zwei Einbindungen (Der Weg unseres Kaffees und Ladenliste) des Werkzeugs Umap werden erst mit Bestätigung des Users aktiviert. Die Möglichkeit sich direkt auf der OpenStreetmap zu informieren, wird jeweils unter dem Element als Link angeboten.

Um die Arbeit der Redakteure zu erleichtern, wurden alle typografischen Elemente, wie z.B. auch die Tabellen, im CSS konfiguriert.

Zusätzlich zum Webdesign entwarf ich folgende Elemente: Icon Geschmacks-Button, Kaffeeblätter, Grafik: Der Weg unseres Kaffees, Icon: für Socialmedia im Footer, Grafiken in Zahlen und Fakten

Webadresse: https://segelkaffee.de