1. Arbeitstitel und Titelbild
Der Bocksbeutel & seine Geschichte
2. Grundideen
Final entschied man sich für die Webstory zum Bocksbeutel.
3. Kurzbeschreibung Projekt
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.
4. Ausgangssituation, Problem, Lösung
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.
5. Recherche, Inhalte, Daten & Quellen
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.
6. Storylines & Spannungsbogen
7. Moodboards
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.
8. Skizzen, erste Layouts, erste Prototypen
Zu Beginn hatte ich in Illustrator und Photoshop gearbeitet. 3D-Flaschen und eine einfache Illustration wurden entworfen.
9. Designvarianten
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
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.
10. Finales Design
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ü
11. Finaler Prototyp
12. Styleguide
13. Screencast
Prototyp:
Mobile Version:
Um zu sehen, wie die Webstory in einer mobilen Variante aussehen könnte, habe ich den Prolog fürs Handy gebaut.
14. Präsentationsvideo
15. Ausstellungssituation
