Web­design

Webdesign
Semester 4, 2021

miiim: online-encyclopedia about memes
with Lydia Bindel and Vivian Piel

"Respect the memes" – initially meant rather jokingly, this claim nevertheless developed into our mission statement during the design process. Memes are hardly taken seriously by a broad section of the population and are labelled as trash. We think that this should change. Although memes are the opposite of serious, they now carry weight in the everyday lives of many people. Memes show where the problems of society are. Memes are a channel to process anger, memes go viral, influence and have power. That is why we are paying attention to this very topic in our design project. The overall theme of the course web design was "joy and pleasure."

Did you know that the first expectation-vs-reality meme dates back to 1920? Or that the first viral GIF from 1996 showed a creepy baby dancing awkwardly? Or that Pepe, the green, innocent meme frog, is being misused as a hate symbol by conservative right-wingers in the U.S.? Well, we didn't know that either. That's why we created "miiim - The Meme Encyclopedia". Our mission is to create a well-structured, easy-to-understand meme site that offers added value to users of all ages. Be it to inform, to browse or just to have fun and pass time.

This teaser video clip gives you a short overview over the contents of our meme website.

slider1 slider2 slider3 slider4 slider5
Homepage

Users are welcomed on the start page by a selection of well-known memes. A click on a single image leads to the respective encyclopedia entry. The salon hanging of the meme pictures is intentionally remotely reminiscent of an art exhibition without appearing too trashy. After all, the memes should be presented appropriately on our website. Although this topic is hardly associated with seriousness, the internet phenomena has evolved to probably the most significant of its time. They are used and loved especially by young internet users, which is why they will hardly lose their popularity in near future.
Knowledge

The knowledge page offers users general information about the history of memes and other interesting articles. For example, users can learn more about the first known memes, such as the Dancing Babyy GIF that went viral.
Feed

In the browse feed, users can scroll through dozens of memes. With the filter functions, the memes can be sorted by category or alphabetically, for example. With a toggle switch, the titles of the memes can be displayed. This function is not activated at the beginning, because many users recognize memes only by the meme picture and not by the title. Users can click on the meme of interest to get to an article about the history of the meme, known variants and controversies.
Dictionary

In the glossary you can find terms that are often used in memes. You can either search for letters or enter the whole word in the searchbar. When the word is found, it is highlighted in yellow and a click on the term opens a pop-up window, which presents the user more information and examples of use of the chosen word.
About miiim

About miiim explaind, why we decided to dedicate half a year on creating a meme encyclopedia and what's up with our word mark miiim.
zurück
weiter
Process

Initial sketches were created using the Figma online tool. Although many different sketches were developed in the beginning, it was clear that our meme page should have a dark, sleek look. We were inspired by various online collections of art museums. After all, our selected memes should be presented in a "dignified" manner according to their influence.
Structure

In order to be able to implement the Figma prototype in HTML and CSS accordingly, we already considered the container structure of HTML code in Figma. We chose a flexible layout that allows a lot of leeway and provides the most appropriate framework framework for each content. Thus, our text-image blocks can be used in three different variants.
Font Styles

Five different font styles are used for our website. Open Sans Condensed Bold is used in 72 px and a bright yellow, which is our accent color. Normal body text is displayed in Open Sans Regular in 16 px, with extra line spacing for better readability on electronical devices.
Details

Last but not least, the details of the website were optimized, for example the arrangement and usability of the filter buttons or the arrangement of the Pertersburg hanging on the homepage. The latter caused us some difficulties, finally we solved the problem with the help of a Metafizzy plugin.
zurück
weiter

Conclusion

In the glossary, we defined about 50 terms paradicmatically, just as we implemented four articles paradicmatically. These include the Blinking White Guy, Pepe the Frog, the Lip Bite Meme and My Brain Is Full Of Fuck. – so there is still a lot of space for more. We hope to be able to fill our encyclopedia bit by bit with more and more informative articles and that the site can go online properly in the future (if possible without bugs and with improved scripts).

The website prototype can be visited → here. Please note: The website is in German and moreover just a prototype, which means, that we did not design it completely responsive and there are still many, many bugs. Nevertheless... have fun!

Design and Contents: Antonia Götz, Lydia Bindel und Vivian Piel
Video: Lydia Bindel
Code: Antonia Götz
Documentation: Vivian Piel
Images: Know Your Meme