zurück

zurück

Der Einzig Andere Verlierer
In dieser Geschichte geht es um das Gewinnen und Verlieren. Doch ob der Gewinner wirklich gewonnen hat und der Verlierer das schlechtere Los gezogen hat wird erst am Ende klar. Für die Umsetzung wurde Adobe Muse benutzt mit dem Plugin Scroll Effects. Das statische Comic wurde so mit Hilfe digitaler Medien animiert und in Bewegung gebracht.

Plugin:
Scroll Effects

Entwickler:
Soner Aktas, Simon Weckbach

Zur Website

Mustermaker
Durch die Buchstaben, die fünf Mal das Wort "Muster" ergeben und sich frei auf der Seite bewegen lassen (durch draggable.js), können verschiedene Muster und Formen gelegt werden. Oberhalb gibt es zwei kleine Symbole, Fragezeichen und kreisender Pfeil, die durch das Hovern mit dem Mauszeiger diesen in einen Erklärungstext verwandeln.

Plugin:
Changing Cursor

Entwickler:
Selina Pusch

Zur Website

404 Lupe
Mach dich auf die Suche nach dem Fehler! Bei diesem Projekt haben wir die Funktion vom Plugin "FitText", Texte beim Skalieren der Größe des Browserfensters anpassen, genutzt, um die Eigenschaften einer Lupe darzustellen. Und das bezogen auf das Thema 404 Error.

Plugin:
FitText

Entwickler:
Lucas Hesse, Simon Schüßler, Mikolai Mera

Zur Website

Tahiti Memphis
What about pattern?! When we heard that our concept had to include pattern, our first thought was to base our design on Memphis - one of the biggest groups of Italian designers founded by Ettore Sottsass in 1981 in Milan. This iconic post-modernist design style is characterised by a lot of colours, textures, patterns, forms and elements which are combined together in a playful way. These designers were rule-breakers. We decided to use the parallax plug-in to create a mock-up for a potential online catalogue page for one of the Memphis style furniture products - the Tahiti lamp - which includes the details of the product, the price and the link to the actual online store. When the user scrolls down the page, the elements of the lamp are floating and moving over the word ‘M-E-M-P-H-I-S’ overlay which reveals different patterns that refer to the Memphis style. When the user reaches the bottom of the page, the floating elements disappear to reveal the actual product and it’s details.

Plugin:
Parallax Scrolling

Entwickler:
Irene Canovi, Lois Vergel, Sara El Abed

Zur Website

This is just an Error
Mithilfe des SmoothScrolling.js Plugins wurde die "Verarbeitung" von Code durch das langsame runterscrollen simuliert, der angeblich den entstanden 404 Error fixen soll nur leider jedoch ohne Erfolg.

Plugin:
Smooth Scrolling

Entwickler:
Selina Pusch

Zur Website

Einheitsbrei Locher
Stück für Stück - Klick für Klick - weg vom Einheitsbrei. Zu viele Websiten sehen gleich aus, zu viele austauschebare Templates, welche sich ähnlen. Ohne Konzept und Idee. Löcher dich durch die schlechten Websiten, um zu sehen was dich abseites des Einheitsbrei erwartet.

Plugin:
/

Entwickler:
Lucas Hesse, Simon Schüßler, Mikolai Mera

Zur Website

Muster legen
Ursprünglich wollten wir verschieden farbige Flächen aufbauen, welche in Größe und position veränderbar sind. Leider funktioniert Gridster nicht ohne zusätzliche Software. Somit verwendeten wir drag and drop, um ein Muster nachzulegen.

Plugin:
Gridster

Entwickler:
Miriam Müller, Claudia Herz

Zur Website

Spam Explorer
Explore the Spam! Mithilfe vom Plugin "ScrollPath", mit dem sich ein Pfad generieren lässt, den man entlangscrollt, haben wir das Thema des Spams, seiner Eindringlichkeit und Allgegenwärtigkeit im Internet, illustriert.

Plugin:
jQuery Scroll Path

Entwickler:
Lucas Hesse, Simon Schüßler, Mikolai Mera

Zur Website

Rotate
Zum Thema "musterhaft" haben wir ein reales Foto von einem Steinboden animiert. Mit dem Plugin JQueryRotate kann man einzelne Bilder mit verschiedenen Geschwindigkeiten und in unterschiedliche Richtungen drehen lassen. Wir haben die verschiedenen Steinkreise ausgeschnitten und einzeln animiert. Hierbei kam es zu einigen komplikationen alle Bilder ¸bereinander darzustellen, doch letztendlich hat auch das funktioniert.

Plugin:
jQueryRotate

Entwickler:
Soner Aktas, Simon Weckbach

Zur Website

Spamchart
Jeder von uns bekommt unzählige Spammails am Tag. Diese Webseite zeigt in Form von Tabellen eine gute übersicht über die täglichen Mails. Als Anreiz haben wir in unsere eigenen Spam Ordner geschaut und uns fiktive Werte ¸berlegt wie so eine Tabelle gefüllt sein könnte. Es wird die Anzahl der Spam Mails pro Monat und pro Wochentag angegeben.

Plugin:
Chart.js

Entwickler:
Soner Aktas, Simon Weckbach

Zur Website

Spiced Ham
Bei dem Thema SPAM haben wir uns an die Herkunft des Begriffs orientiert - dem Dosenfleisch SpicedHam aus England. Im Hintergrund ist ganzflächig Text zu sehen, der den Begriff SPAM erklärt und sich bei Skalierung der Seite, proportional anpasst. Die Masse an Text/Typografie symbolisiert die Masse, die wir heutzutage mit SPAM verbinden. Um den Bezug zum Essen herzustellen, soll direkt der Satz „taste the spam“ ins Auge fallen. Dahinter versteckt ist ein Bild von dem Dosenfleisch SPAM, dass der User durch das Plugin 3D Shading Box entdecken kann.

Plugin:
3D Shading with Box-Shadows

Entwickler:
Claudia Herz, Miriam Müller

Zur Website

Astronaut
Dies ist eine kreative Alternative einer 404 Webseite. Inspiriert wurden wir durch das Werk "Per Anhalter duch die Galaxie - Das Restaurant am Ende des Universums". Mit dem Plugin textillate.js haben wir den Schriftzug animiert und ein GIF eines Astronauten eingefügt.

Plugin:
textillate.js

Entwickler:
Soner Aktas, Simon Weckbach

Zur Website

Fehlermeldung
Dieses PlugIn lässt verschiedene Dialogfelder erscheinen. Idee war es, den User in die Irre zu führen. Die Seite zeigt eine Fehlermeldung, wie wir sie alle kennen. Die Felder Wieso? Weshalb? Warum? scheinen eine Antwort für das Problem zu haben. Doch eigentlich führen sie nur noch mehr in die Irre. Sobald in den vielen Download Dateien das richtige HTML gefunden wurde, war das Arbeiten mit dem Plugin relativ einfach. Die Texte in den Dialogfeldern konnten dann im passenden jQuery bearbeitet werden.

Plugin:
alertifyjs

Entwickler:
Miriam Müller, Claudia Herz

Zur Website

Brei
Das Thema „Web ist Einheitsbrei“ haben wir ganz wörtlich genommen. Es soll eine spielerische Website sein, auf der man verschiedene Plugins ausprobieren kann. Eine Website, die eine Anspielung auf unser Web und seine Bestandteile sein soll. Aus welchen Zutaten besteht der Brei? Aus welchen Plugins besteht unser Web?

Plugin:
alertifyjs

Entwickler:
Claudia Herz, Miriam Müller

Zur Website

404 you got lost!
Our main idea is to illustrate a spaceship getting lost in space; just like how a user can get lost in the world wide web. Typically, the web site hosting server will generate a plain "404 Not Found" web page when a user attempts to follow a broken or dead link. In order to make this page more exciting, we came up with the concept of a ‘black hole’ where the user, or the astronaut, falls into the black hole and there is no chance to find them anymore - YOU ARE LOST! We illustrated this by using the ‘Pin It’ plug-in on the spaceship and having the user click to scroll down the page with the background illustration changing to make it seem like the spaceship is taking off from the ground, flying in the atmosphere and then into the universe. However, at a certain point, the rocket bumps in to a black hole, and it disappears into another dimension.

Plugin:
jQuery.Pin

Entwickler:
Irene Canovi, Lois Vergel, Sara El Abed

Zur Website

Fliegenklatsche
Fange die Fliegen! Hier haben wir uns in abstrakter Weise mit dem Thema musterhaft auseinandergesetzt und es, unter Nutzung des Plugins "CaptionHoverEffects " ,das verschiedene 3D Animationen bietet, in einem kleinen Spiel dargestellt: Man muss "musterhaft", die Fliege mit der Fliegenklatsche treffen.

Plugin:
Caption Hover Effects

Entwickler:
Lucas Hesse, Simon Schüßler, Mikolai Mera

Zur Website