PrestaShop – für Kaffeegenossenschaft Café Chavalo eG
5. Februar 2021, Typografie, Webdesign
Der neue Onlineshop der Kaffee-Genossenschaft Café Chavalo ist veröffentlicht!
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.
PrestaShop für Café Chavalo, die Startseite:
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.
Der Online-Shop
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.
Einzelansicht eines Artikels
Content mit neuer Struktur
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.
Umap – geografische Visualiserung der Produzenten und der Verkäufer
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.
Grafiken und Tabellen in Zahlen und Fakten
Um die Arbeit der Redakteure zu erleichtern, wurden alle typografischen Elemente, wie z.B. auch die Tabellen, im CSS konfiguriert.
Kurz und genau
Firma: Café Chavalo eG, Leipzig
{Webadresse: Café Chavalo: https://segelkaffee.de (demnächst wieder: https://cafe-chavalo.de/)} Diese Webseite nutzt inzwischen ein anderes Shopsystem.
Arbeitspunkte:
Webdesign: Typografie, UI-Design, UX-Design, Modifikation des Themes von PrestaShop, Design-Programmierung, Einbindung Umap (Ladenliste und Der Weg unseres Kaffees)
Illustrationen: Icon Geschmacks-Button, Kaffeeblätter, Grafik Der Weg unseres Kaffees, Icon für Socialmedia im Footer, Grafiken in Zahlen und Fakten
Foto-Optimierung: alle Artikelbilder wurden für die Webdarstellung optimiert, Logos eingebunden