Thesis

Abgabelink:

https://queercode.webflow.io/

Bachelorpräsentation

···································

· Oktober ·

In der Woche bis zum 21 Oktoberr habe ich insbesondere mit dem Buch The Big LGBTQ+ Historybook nach Symbolen und Zeichen gesucht. Diese wurden dann vorerst auf Good Notes in eine Tabelle übertragen.

Im weiteren Verlauf will ich diese Tabelle übertragen, nach Wichtigkeit ordnen und mit weiteren Quellen ergänzen.

Kick Off Präsentation: 

Figma 

Notion Tabelle 

Queer Code Tabelle

In der Woche bis zum 28. Oktober habe ich meine Recherche verfeinert und in Notion Übertragen, dabei habe ich wie bei der händischen in verschiedene Kategorien wie Zeit, Wer (Label oder Person) Zeichenart und was der genaue Inhalt ist unterteilt. 

Die Recherche dieser Inhalte bezog sich hauptsächlich auf das The LGBTQ + History Book; Queer von Gammerl, Queere Männlichkeiten, aber auch Inhalte aus Videos wie dem der National Gallery of Scotland „The Queer Code: Secret Languages of LGBTQ+ Art“.

Vorbereiten von Referenzprojekt Vorstellung 

Golden Circle

Recherche

In der Recherchephase habe ich mich des Weiteren auch viel in die Semiotik eingelesen, um nachvollziehen zu können, wie man dies an Nutzer*innen der Website kommunizieren will. Außerdem musste ich selbst tiefer in die Materie einsteigen, um eine schlüssige Einordnung meiner Zeichen zu gewährleisten.

Zudem habe ich mich viel mit Sicherheit befasst, mein eigentliches Vorhaben Moderne Zeichen einzuschließen würde nur klappen, wenn ich einen Digitalen Safe Space kreiere. Dazu habe ich mir viele Texte und Bücher eingelesen und Webseiten analysiert. Da dies eine weitere Anwendung bräuchte, liegt der Fokus im Verlauf des Projektes auf der Aufbereitung der historischen queeren Zeichen.

· November ·

Moodboard

Für das Moodboard habe ich zwei Varianten erstellt. Eine die in einem retro Illustrationsstil wäre und eine, die Fotografisch und im Risografie-Stil ist. Die illustrative Variante wirkte aber schnell kindisch und könnte die Ernsthaftigkeit des Themas mindern, weshalb ich mich für die Riso Variante entschieden hab. Dies würde die geschichtliche Ebene meines Projektes reflektieren. Um dies in der gesamten Gestaltung widerzuspiegeln, sollte ich weitere Gestaltung auch historisch zitieren können. Weshalb ich mir im weiteren Schritt viele Medien im queeren Kontext angeschaut und analysiert habe, um den Stil fassen zu können.

Sinus Milieus

Historisches Moodboard

Die Historischen Referenzen, hier insbesondere auf Schrift bezogen waren viel aus den 90ern und aus dem Deutschen Raum. Um dies zeitlich und örtlich auszuweiten, habe ich weitere Materialien genutzt wie das Buch Queer X Design, eine Zine mit dem Titel queer typography, Materialien aus dem Queeren Archiv München und einem Flickr Ordner der LSE Library. 

Die Wahl der Schrift kam dann erst durch die Historischen Inspirationen, vorher wollte ich eine Variable Font oder ein Font die Zensiert wie die https://www.thepolitetype.com/  da sie den Safe Space Aspekt aufgreifen würde. Dadurch dass ich aber den Fokus auf die Historie hab, hat die Analyse der damaligen Materialien mehr Durchblick und Charakter verschaffen.

· Storyline ·

Hier habe ich die grundlegende Vorgeschichte in einem Spannungsbogen aufgeteilt. Für die einzelnen Zeichen habe ich alles in ein Ordnungssystem gegliedert.

Wireframes

· Inspiration ·

Um mein Ziel der Interaktivität herüberzubringen, habe ich bei einigen Webseiten Module analysiert, um sie gegebenenfalls zu implementieren.

· Dezember ·

Designvarianten

Anfangs habe ich viel versucht, mit Light Mode zu gestalten. Hier wirkte aber alles eher fehl am Platz und die Farben vom Riso strahlten nicht so stark. Hier habe ich mich aber auch noch sehr am Wireframe orientiert. Mit der Integration von einem Darkmode und freierer Platzierung den Elementen und Papierelementen wirkte alles stimmiger, weshalb ich dieses Design im folgenden weiter ausbaute und übernahm.

Prototyp 

Der Prototyp wurde in Figma angefertigt, ist jedoch nicht scroll und klickbar, weil ich den Prototyp nur als Guide für Webflow nutzte. Ich wusste hier würde ich die Zeit eher benötigen, um Animationen auszuarbeiten. 
Der Link zum Figma Board ist:
https://www.figma.com/design/oipzcAQ9Gtl6tO1wSarEVW/Bachelor-Queer-Code?node-id=680-4083&t=Mh66BMuLhEx4ODM9-1

Risofilter 

Um den Risoeffekt auch im digitalen hinzubekommen, habe ich erst probiert ihn anhand von YouTube-Videos zu rekreieren. Dies erwies sich aber doch als recht aufwendig, weshalb ich mir dann den Super Riso von Braken geholt habe. Die vorgefertigten Styles habe ich dann mit der Schwarz, weiß Korrektur verbessert, um verschiedene Farben den Risofarben zuzuteilen. Bei schwarzweißen Bilden habe ich mit dem Farbenauswahlwerkzeug die Mitteltöne und Dunklentöne getrennt. Zwar erzeugte diese Methode manchmal auch nicht eine sofortige Lösung, aber sie Stile von dem Filter waren einheitlicher und kräftiger. 
Für die Zeichen stellte ich diese frei und nutzte außerdem einen Rand von 10 px in meinem Weißton, um einen Freiformsticker zu imitieren.

Styleguide

Webflow - Anfänge

Bei den Anfängen von Webflow habe ich einige Animationen ausprobiert, die Farben des alten Risofilters und die Qualität waren aber nicht ausreichend, weshalb ich die Animationen insbesondere mit den Flaggen im Verlauf erneuerte.

···································

· Januar ·

Webflow:

Im Januar setzte ich meine Website in Webflow um. Hier probierte ich viel herum mit Animationen. Ich arbeitete vor allem mit While Scrolling into view, um Interaktivität in die Seite allein durch die Scrollbewegung zu kriegen. Außerdem Fertigte ich abwechselnde Sections die Horizontal Scrollen und auch mal Unter oder über anderen Elementen auftauchen. 

Auch geklickt sollte durch paar Module werden wie das Tabmodul und dem Flaggen und Symbol Slider.

CMS

Um in mein Projekt eine große und erweiterbare Vielfalt an Zeichen zu integrieren, wollte ich ein Content-Management-System integrieren. Das Webflow Interne CMS hat Vor- und Nachteile, so kann man bei einer Basic Site nur 2 CMS Listen haben und den Custom Code nicht danach Exportieren. Trotzdem hat es die Integration und ist mit Plugins wie Finsweet erweiter und anpassbar. Das Anlegen der Liste hat Zeit in Anspruch genommen, während ich es anfangs Händisch gemacht habe, entdeckte ich die Funktion von CSV Dateien. Deshalb beschloss ich meine Notiontabelle in eine CSV Datei zu übertragen, hierfür nutze ich erst Excel. Das übertragen auf Webflow dieser Datei war jedoch schwieriger, da es meine Optionen wie beim Label nicht als Option auf Webflow übernahm. Ich musste Sachen anpassen, wobei es keine Rechtschreibfehler gab. Erst beim Einbetten der Tabelle in Google Spreadsheets und Numbers hat es nach einigen Anläufen geklappt. 

Für den Filter nutzte ich schlussendlich Finsweet, hatte aber erst Jetboost ausprobiert, hier waren die Filtermöglichkeiten aber eingeschränkter. Außerdem schreckte mich ab, dass man dies direkt mit der Webflowseite verknüpft, bei Finsweet arbeitet man hingegen mit Code. Wenn man dies auf mehrere Reiter im Filter übertragen hat, ist es nach einer Weile leichter. 

Auch beim Template musste ich erstmals verstehen, dass man den Content der Seite nicht auf dem Template, sondern in der Tabelle einträgt. Anfangs habe ich also immer wieder nur das Template geändert und die Hochgeladenen Inhalte überschrieben. Nach dieser Erkenntnis war es aber eine Erleichterung nicht unzählige Unterseiten zu erstellen 

Auch wenn ich viel Zeit am Anlegen vom CMS gearbeitet hab, hat es sich gelohnt, weil dies im Arbeitsalltag eine große Rolle Spielt, die sich in anderen Programmen bestimmt ähnlich verhält.

· Februar ·

Ausstellungssituation:

Für die Werkschau habe ich eine minimalistische Ausstellungssituation geplant, der Fokus soll auf der Website und dem gelernten Inhalt liegen, weshalb ich mich gegen ein Poster entschieden habe. 

Das Besorgen von frischen Pflanzen hat sich zu der Jahreszeit als schwierig erwiesen. Nachdem ich einige Läden durchsucht habe, fand ich getrockneten Lavendel, dieser war angesprüht in einem Magenta-Lilaton, was zwar nicht dem der Website entspricht, aber durch den Duft bringt er mehr Charme als künstliche Pflanzen.

Printprodukte:

Um die Relevanz von Print zu verdeutlichen und mit einem kleinen humorvollen Touch auf die Website aufmerksam zu machen habe ich Sticker und Postkarten gestaltet, die an der Werkschau in meiner Archivbox erhältlich sind.

Leider konnte man die Sticker nicht auf dem Plotter schneiden, ich vermute weil das A4 Papier zu klein ist, weshalb ich diese per Hand auschneiden muss.

Präsentationsvideo

Screencast

Exposé