Vinothek
Webdesign eines Onlineshops
Erstellen eines Corporate Designs
Konzeption der Marke Vinothek
Projektübersicht
Die Aufgabe unseres Projektteams bestand darin, einen Onlineshop zu realisieren. Dabei übernahmen wir Aufgaben wie die Planung, Umsetzung bis hin zur Optimierung der Website. Bei der Umsetzung legten wir großen Wert auf ein ansprechendes Design und eine benutzerfreundliche Oberfläche. Ein weiterer wichtiger Punkt war die Festlegung auf ein bestimmtes Thema.
Das Thema Wein empfanden wir als sehr ansprechend, unter anderem aufgrund des regionalen Faktors von Wein aus Baden-Württemberg.
Als das Thema stand, beschlossen wir auf dem Onlineshop verschiedene Qualitätsweine aus unterschiedlichen Ländern und Regionen anzubieten. Dabei beschränkten wir uns auf Weine aus Deutschland, Frankreich und Italien. Zunächst war der Plan, einen bestehenden Online-Shop eines regionalen Händlers in Absprache mit diesem zu überarbeiten. Im Laufe unserer Recherche kam die Idee auf, eine eigene, fiktive Weinmarke zu kreieren. Wir entwickelten daraufhin ein eigenes Logo, entwarfen Etiketten und erstellten Stück für Stück die Website.
Als Tools nutzen wir Figma für die Ideensammlung und WIX für das Erstellen und Veröffentlichen der Website.
Es folgten erste Entwürfe der Website. In dieser Phase legten wir Wert darauf, dass die Entwürfe auf Grundlage der eigens entwickelten Corporate Identity entstehen. Daraufhin wurden diese Entwürfe weiter entwickelt, bis schlussendlich die Website der Vinothek fertig war.
Konzeption
Die Konzeption startete mit der Ideenfindung für den Namen der Marke. Nach gründlicher Überlegung entschieden wir uns für den Namen Vinothek, welcher aus dem italienischen Wort für Wein und dem Wort Videothek zusammengesetzt ist.
Nachdem der Name für die Marke stand, wurden gemeinsam verschiedene Logos erstellt. Wir entschieden uns für ein reduziertes Design der Wortmarke mit einer Weinflasche als Wiedererkennungswert.
Folgend setzten wir uns an die Struktur des Shops. Es wurden Skizzen der Website erstellt. Hierfür ließen wir uns bei bestehenden Seiten inspirieren. Basiselemente wie Website-Header und -Footer die in dieser Phase entstanden wurden fast 1 zu 1 für die erstellte Website übernommen.
Corporate Design
Da unser Team bis zum Bearbeiten des Projekts wenig Erfahrung mit der Erstellung von Corporate Designs hatte, entschieden wir uns für reduzierte, einfache Basisfarben und eine prägnante Akzentfarbe, welche die Farbe von Wein symbolisierte.
Diese Akzentfarbe wurde auch im Markenlogo eingesetzt und agiert dort als Eye-Catcher.
Zuletzt erstellten wir ein Template für die Etiketten der Weine, die in unserem Onlineshop angeboten werde
Webdesign
Der Header besteht aus unserem Logo und einer einfachen Navigation der primären Seiten. Durch die rote Akzentfarbe wird signalisiert, auf welcher Seite man sich momentan befindet. Beim Navigationspunkt “Shop” werden durch einen Hovereffekt auch die Shopseiten unserer verschiedenen Länder angezeigt. Beim Footer haben wir uns für einen dreigeteilten Aufbau entschieden. Im ersten Element findet man das Markenlogo und die Adresse. In der Mitte finden sich Quicklinks der einzelnen Seiten, um eine schnellere Navigation zu ermöglichen. Im rechten Element befinden sich unsere Kontaktmöglichkeiten sowie der erstellte Instagramaccount @aalenervinothek.
Die Hauptseite des Shops ist der Willkommens-Screen. Dort ist das Logo zu sehen, welches vor einem Video einer Weinrebe lebendiger erscheinen soll. Durch einen “Jetzt einkaufen”-Button kann man sofort zu den Produkten navigieren.
Scrollt man nach unten, findet man bereits einen kleinen Auszug aus dem Sortiment der Vinothek, gefolgt von einer kleinen Vorstellung des Shops. Dies soll den Kunden organisch in den Onlineshop leiten. Abschließend werden auf der Hauptseite einige Impressionen gezeigt.
In der Shopübersicht befindet sich ein kurzer Informationstext, welcher dem Kunden einen Einblick darüber gibt, wie die Marke Vinothek ihre Produktauswahl treffen soll. Darunter sieht man die drei Weinregionen, aus der die Vinothek ihren Wein bezieht. Diese leiten direkt zu den jeweiligen Regionen weiter. Zusätzlich werden unterhalb der Regionsübersicht alle angebotenen Produkte aufgelistet.
In der jeweiligen Länderansicht gibt es einen Einblick in das jeweilige Land und was dessen Regionen auszeichnet. Direkt daneben bekommt der Kunde anhand einer Karte ein Gefühl dafür, wo diese Regionen liegen. Darunter werden die Weine des jeweiligen Landes aufgeführt.
Auf den Produktseiten wird über die Herkunft und Geschmacksnuancen der Weine informiert. Hier können die Weine dem Warenkorb hinzugefügt werden, um diese schlussendlich zu erwerben. Unter der Produktinfo befinden sich zusätzlich Informationen zur Rückgabe und Rückerstattung sowie zur Versandrichtlinie. Diese können bei Bedarf ausgeklappt werden.
Der Warenkorb, der über den Header aufgerufen werden kann, wird auf der rechten Seite der Website eingeblendet und kann durch die Call-To-Action “Warenkorb ansehen“ geöffnet werden. Aufgrund der Erstellung einer fiktiven Marke und dem Fakt, dass auf der Website keine Produkte bestellt werden können, funktioniert der Bestellprozess natürlich nicht.
Auf der “Über uns”-Seite wird das Team genauer vorgestellt. Außerdem finden Kunden hier die Werte, auf die die Marke aufgebaut wurde. Die Marke soll sich durch eine direkte Kommunikation zu den Weingütern von der Konkurrenz abheben. Durch einen Button kann man direkt zu unserer Kontaktseite gelangen.
Bei der Kontakt-Seite war uns besonders wichtig, diese auf das Wesentliche zu beschränken. Deshalb haben wir uns entschieden, im oberen Block der Website unsere Kontaktdaten inklusive unserer Adresse zu nennen. Zur besseren Veranschaulichung des Firmenstandorts ist dieser auch kartografisch durch ein Google-Maps-Element dargestellt. Durch Scrollen gelangt man außerdem zu einem Kontaktformular, durch welches man einfach Kontakt aufnehmen kann.
Als letzten Schritt wurde die Struktur der mobilen Ansicht angepasst. Die Navigation im Header wurde durch ein Burger-Menü ersetzt. Ein zusätzlicher Button, zum Scrollen an den Seitenanfang wurde hinzugefügt und die Inhalte des Footers wurden stark reduziert.