In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Storytelling - Bocksbeutel
Der Bocksbeutel & seine Geschichte
©Sarah Löcker
Final entschied man sich für die Webstory zum Bocksbeutel.
Wohl kaum eine andere Weinflasche der Welt steht für so viel Geschichte und Tradition wie der Bocksbeutel. Trotz seiner merkwürdigen Form und der zum Teil umstrittenen Erscheinung hat er es geschafft: Er wurde zum Markenzeichen in fränkischen Weinregionen. Besonders interessant dabei ist sein Werdegang. In dieser Webstory können anhand beispielhafter Flaschen die Meilensteine des Bocksbeutels durchlaufen werden. Die insgesamt 11 Flaschen wurden in drei Kapitel unterteilt. Zu Beginn befasst sich der Prolog mit der Namensherkunft des Bocksbeutels. Ein Flaschendreh-Menü hilft den User*innen sich zurechtzufinden. Weitere, interessante Bocksbeutel können im Bocksbeutelkeller erkundet werden.
Der Bocksbeutel - ein Markenzeichen in fränkischen Weinregionen. Häufig rief seine merkwürdige Erscheinungsform zwiegespaltene Meinungen hervor. Bis zum ReDesign in 2015 wurde er häufig als altbacken bezeichnet und belächelt.
Viele Menschen wissen nicht, wie viel Geschichte und Tradition in der Flasche stecken und welchen Kult- und Markenwert der Bocksbeutel für Franken hat, insbesondere nach Franken kommende Gäste.
Mit der Webstory wird die interessante Geschichte des Bocksbeutels aufgerollt. Sie soll dabei helfen geschichtliche Kontexte zu erfahren und die Bedeutung und Erscheinung der Flasche für Franken besser zu begreifen. Durch eine moderne Gestaltung soll sie einen anderen, unerwarteten Blickwinkel auf den Bocksbeutel werfen und somit User*innen von der Vielfältigkeit der Flasche begeistern und auch jüngere Generationen mehr ansprechen.
Alles bezüglich Recherche, Inhalte, Daten, Quellen und Weiteres befindet sich im folgendem Figma-Dokument:
Für die Bilder der Flaschen wurde der Barockscheune in Volkach, Nähe Würzburg, ein Besuch abgestattet. Dort wurden einige Bocksbeutel (mit zeitlicher Einordnung) ausgestellt. Ich konnte Flaschen fotografieren und im Nachhinein beispielhafte Flaschen den jeweiligen Zeitabschnitten/Meilensteinen zuordnen. Weitere, außergewöhnliche Flaschen wurden am Ende für den Bocksbeutelkeller verwendet.
©Sarah Löcker
Zuerst hatte ich mir überlegt, wie die Flaschen präsentiert werden könnten. Es wurden Beispiele (insbesondere für Illustration/Collage) rausgesucht, die ich mir hätte vorstellen können. Im nächsten Schritt hatte ich beispielhafte Webseiten rausgesucht.
Zu Beginn hatte ich in Illustrator und Photoshop gearbeitet. 3D-Flaschen und eine einfache Illustration wurden entworfen.
1. Variante: Bearbeitung der Bilder mit Luminance-Effekt in Figma, Einsatz von Grün und Neongrün, große Typo, Konturen der Flaschen
2. Variante: Flaschenformen, Wechsel positiv/negativ bei Unterseiten, realgetreue Bilder, mehr Illustration
3. Variante: Wechsel vertikal und horizontal Scrolling, große Typo Bilder und 3D-Flaschen, Drahtmodelle, Wechsel light und dark Mode
©Sarah Löcker
©Sarah Löcker
Letzten Endes wurde eine Mischung aus der 1. und 3. Variante angewandt, wobei man sich für den Luminance-Stil von der 1. Variante entschied, da dieser in Kombination mit den Farben den Bocksbeutel modern macht.
Zuerst wollte man noch eine Bocksbeutelei machen. Ein passendes Filtersystem wurde ausgearbeitet. Mit Klick auf die Flaschen sollten Inhaltsseiten erscheinen. Letzten Endes entschied man sich aber doch für den linearen Verlauf. Die Bocksbeutelei taucht allerdings in Form des Bocksbeutelkellers auf, jedoch ohne Filtersystem, da dieses in Figma nie richtig funktioniert hätte.
Die Webstory wird in einen Prolog und in drei Kapitel aufgeteilt. Außerdem gibt es einen Bocksbeutelkeller und ein Flaschendreh-Menü.
Prolog: Namensherkunft
Chapter I: Die Vorreiter (1. Der Urahne, 2. Die Pilgerflasche, 3. Die Bouteille, 4. Bocksbeutel ähnliche Flasche)
Chapter II: zum fränkischen Qualitätssymbol (1. Die Steinweinflasche, 2. Die Teure, 3. Die Blüte, 4. Der Geschützte)
Chapter III: Von der Krise zum Wiederaufstieg (1. Der Uferlose, 2. Der Krisenheld, 3. Bocksbeutel PS)
Bocksbeutelkeller
Flaschendreh-Menü
©Sarah Löcker
©Sarah Löcker
Prototyp:
©Sarah Löcker
Mobile Version:
Um zu sehen, wie die Webstory in einer mobilen Variante aussehen könnte, habe ich den Prolog fürs Handy gebaut.
©Sarah Löcker
©Sarah Löcker
Ein Projekt von
Sarah Löcker
Fachgruppe
KommunikationsdesignArt des Projekts
Keine Angabe
Zugehöriger Workspace
UX- und Storytelling (KD4)Entstehungszeitraum
Sommersemester 2023