Web­design

Webdesign
Semester 4, 2021

miiim: Online-Lexikon über Memes
mit Lydia Bindel und Vivian Piel

"Respektiert die Memes" – anfangs eher scherzhaft gemeint, entwickelte sich dieser Claim dennoch im Laufe des Gestaltungsprozesses zu unserem Leitbild. Memes werden von einem breiten Teil der Bevölkerung kaum ernst genommen und als Trash abgespeichert. Wir finden, das sollte sich ändern. Denn obwohl Memes das Gegenteil von seriös sind, haben sie mittlerweile Gewicht im Alltag vieler Menschen. Memes zeigen auf, wo die Probleme der Gesellschaft liegen, Memes sind ein Kanal, um Ärger zu verarbeiten, Memes gehen viral, beeinflussen und haben Macht. Deswegen schenken wir genau diesem Thema in unserem Gestaltungsprojekt Aufmerksamkeit. Das übergreifende Thema des Kurses Webgestaltung lautete "Freude und Genuss".

Wusstest du, dass das erste Expectation-vs-Reality-Meme aus dem Jahr 1920 stammt? Oder, dass das erste virale GIF von 1996 ein creepy Baby zeigte, dass awkward durch die Gegend tanzt? Oder dass Pepe, der grüne, unschuldige Meme-Frosch, von konservativen Rechten in den USA als Hasssymbol missbraucht wird? Tja, wir wussten das auch nicht. Deswegen riefen wir „miiim – Das Meme-Lexikon“ ins Leben. Wir haben es uns zur Aufgabe gemacht haben, eine gut strukturierte, leichtverständliche Memeseite zu gestalten, die User:innen aller Altersklassen einen Mehrwert bietet. Sei es zum Informieren, zum Stöbern oder einfach zum Spaß haben und Zeit vertreiben.

Das Teaservideo gibt einen kurzen Überblick über den Umfang unserer Memeseite.

slider1 slider2 slider3 slider4 slider5
Startseite

User:innen werden auf der Startseite von einer Auswahl an bekannten Memes begrüßt. Ein Klick auf ein einzelnes Bild führt zum jeweiligen Lexikoneintrag. Die Salonhängung der Memebilder soll absichtlich entfernt an eine Kunstausstellung erinnern, ohne zu trashig zu wirken. Denn die Memes sollen auf unserer Webseite angemessen präsentiert werden. Obwohl mit diesem Thema wohl kaum Seriösität assoziiert wird, sind die Internetphänomene zum wahrscheinlich bedeutendsten seiner Zeit herangewachsen. Vor allem von jungen Internet-User:innen werden sie genutzt und geliebt, weswegen sie in Zukunft kaum an Popularität verlieren werden.
Wissensseite

Auf der Wissensseite werden die User:innen allgemeine Informationen über die Geschichte der Memes und weitere interessante Artikel präsentiert. So erfahren User:innen beispielsweise mehr über die ersten bekannten Memes, wie das viral gegangenene Dancing-Baby-GIF.
Stöberfeed

Im Stöberfeed können User:innen durch dutzende Memes scrollen. Mit den Filterfunktionen lassen sich die Memes nach Kategorien einordnen oder beispielsweise alphabetisch sortieren. Mit einem Toggleswitch lassen sich die Titel der Memes anzeigen. Diese Funktion ist extra zu Beginn nicht aktiviert, da viele User:innen selbst bekannte Meme nur am Meme-Bild erkennen und nicht am Titel. Beim Klick auf das Meme des Interesses gelangen User:innen zu einem Artikel, der über die Geschichte des Memes, bekannte Varianten und Kontroversen berichtet.
Glossar

Im Glossar findet man Begriffe, die oft in Memes verwendet werden. Man kann entweder nach Buchstaben suchen oder das ganze Wort in der Suchzeile eingeben. Wenn das Wort gefunden wurde, wird es gelb hervorgehoben und durch einen Klick auf das Wort öffnet sich ein Pop-Up Fenster, durch welches die User:innen weitere Informationen und Anwendungsbeispiele zu dem Wort bekommt.
Über miiim

Über miiim erklärt, warum wir uns dazu entschlossen haben, eine Memeseite zu gestalten und wie unsere Wortmarke “miiim” entstanden ist.
zurück
weiter
Prozess

Erste Entwürfe wurden der Einfachheit halber mithilfe des Online-Tools Figma umgesetzt. Obwohl anfangs zahlreiche unterschiedliche Skizzen entwickelt wurden, stand schnall fest, dass unsere Meme-Seite einen dunklen Look bekommen sollte. Wir ließen uns dabei von verschiedenen Onlinesammlungen von Kunstmuseen inspirieren. Schließlich sollten unsere ausgewählten Memes ihres Einflusses entsprechend "würdevoll" präsentiert werden.
Struktur

Um den Figma-Prototyp in HTML und CSS entsprechend umsetzen zu können, bedachten wir schon in Figma den Containeraufbau im Code. Wir entschlossen uns für ein flexibles Layout, das viel Spielraum ermöglicht und für jeden Content den passenden Rahmen bietet. So können unsere Text-Bild-Blöcke in drei verschiedenen Varianten genutzt werden.
Schriften

Für unsere Webseite werden fünf verschiedene Schriftschnitte verwendet. Sie Open Sans Condensed wird plakativ in 72 px und einem knalligen Gelb verwendet, das unsere Akzentfarbe bildet. Normaler Fließtext wird in der Open Sans Regular in 16 px dargestellt, der Zeilenabstand wurde für bessere Lesbarkeit im Web extra erhöht.
Feinheiten

Zu guter Letzt wurden die Details der Webseite optimiert, so beispielsweise die Aufreihung und Bedienbarkeit der Filter-Buttons oder die Anordnung der Pertersburger Hängung auf der Startseite. Letztere brechte uns einige Schwierigkeiten, schließlich lösten wir das Problem mithilfe eines Metafizzy Plugins.
zurück
weiter

Fazit

Im Glossar definierten wir beispielhaft etwa 50 Begriffe, genauso wie wir beispielhaft vier Artikel umsetzten. Darunter befindet sich der Blinking White Guy, Pepe der Frosch, das Lip Bite Meme und My Brain Is Full Of Fuck – da ist also noch ganz viel Platz für mehr. Wir hoffen, unser Lexikon Stück für Stück mit immer mehr informativen Artikeln füllen zu können und die Seite zukünftig (wenn möglich ohne Bugs und mit verbesserten Scripten) richtig online gehen kann.

Der Website-Prototyp kann → hier besucht werden. Kleiner Disclaimer vorneweg: Es ist ein Prototyp, der deswegen nicht voll responsive gelayoutet wurde und noch einige Bugs beinhaltet. Trotzdem... Viel Spaß!

Design und Inhalte: Antonia Götz, Lydia Bindel und Vivian Piel
Video: Lydia Bindel
Code: Antonia Götz
Dokumentation: Vivian Piel
Bilder: Know Your Meme