Gestaltungskonzept für «Stöber- und Entdeckerformate» für VINCENT&VOLTAIRE


Ylli Loshaj

Kontext
VINCENT&VOLTAIRE
Modul
Screendesign
Semester
Wintersemester 2021/22
Studiengang
Medieninformatik Ba.

In diesem Projekt sollen für den Online-Büchershop Vincent & Voltaire Stöber- und Entdeckerformate für die Website konzipiert und designt werden. Nun fiel auf, dass es keine Verlagsübersichtsseite gibt und so sich dort eine Chance bietet, diese mit Hinblick auf Stöber- und Entdeckerformate zu gestalten.

Eine Übersichtsseite soll dem Nutzer helfen, sich ein schnelles Bild über die verschiedenen Verlage machen zu können. Damit der Nutzer auf der Seite nicht die Orientierung verliert, sieht er mit einem Blick den Verlag, einen Beschreibungstext und eine kleine Auswahl an Büchern, durch die er klicken bzw. swipen kann, ohne die Seite zu verlassen. Sollte das Interesse für ein bestimmtes Buch geweckt sein, so kann man auf das Cover-Image klicken und ein Pop-up erscheint. Dies bietet die Möglichkeit, eine Beschreibung zu dem Buch zu lesen (Desktopvariante) und man hat auch die Option, das Buch zu favorisieren und in den Warenkorb zu legen. Um das Stöberformat noch zu erweitern, kann man sich in der Pop-up-Ansicht durch weitere Bilder zu dem Buch klicken beziehungsweise darüber swipen. Durch das Scrollen und dem Pop-up-Fenster behält der Nutzer zu jederzeit den roten Faden auf der Übersichtsseite und kann sich leicht verschiedene Verlage und deren Bücher anschauen, favorisieren und in den Warenkorb legen.

Die Elemente des Patternlabs wurden weitestgehend von der Website übernommen. Eine Ausnahme ist das Abstandssystem. Um an bestehende Werte wie 15px und 23px heranzukommen, hat sich die Renard-Serie R5 mit dem Faktor 1,5 als guter Ansatz erwiesen und wurde deshalb auch verwendet. Da die Icons nicht zur Verfügung stehen, wurden Screenshots verwendet bzw. Icons nachgebaut (Pfeile). Die nachgebauten Icons sind nicht genau wie die Originalen und dienen nur als Platzhalter. Die SVG-Datei zeigt nichtvektorbasierte Grafiken (rasterisierte Bilder) zum Teil verzerrt an, deshalb gibt es noch eine PDF-Variante des Styleguides im Abgabeordner.

Style-Guide

Styleguide für das Projekt von Ylli Loshaj