Visulingua
Dieses Projekt entstand als Abschlussarbeit von der Kunstschule Wandsbek 2020.
Im weiteren Verlauf wird eine Anmeldung (links) oder eine Registrierung durchgeführt (rechts).
Nun kann die Sprache und die Schwierigkeitsstuffe gewählt werden. Der Fortschrittsbalken zeigt an, wie viele Übungen bereits absolviert wurden.
Übungen sind in Themen unterteilt. Themenbereiche können für eine bessere Übersicht individuell auf- und zugeklappt werden.
In Grün dargestellt sind die absolvierten Übungen. Noch ausstehende Übungen hingegen bleiben grau.
Es ist nicht zwingend erforderlich, die Übungen der Reihe nach zu absolvieren, wird aber empfohlen.
Links dargestellt ist eine Score-Übersicht. Mit jeder absolvierten Übung sammelt der Lernende Experience-points und kann seinen persönlichen Score so in die Höhe treiben.
Rechts sieht man ein Ranking aller Nutzer. Die Nutzer mit den aktuell besten Scores stehen weiter oben. So bleibt man beim Lernen motiviert, die Mitlernenden zu überholen.
Natürlich dürfen die Einstellungen nicht fehlen.
Es gibt einen eigenen Bereich für die persönlichen Daten (links) und einen Bereich für die App-Einstellungen (links).
Robo
Dein persönliche Haushaltsgehilfe ganz nach deinen Wünschen zusammengestellt!
In diesem Baukasten kannst du ganz einfach zusammenklicken, welche Funktionen dein Robo mitbringen soll. So kann er dich optimal unterstützen!
(Thema: Webdesign, entstanden mit Adobe XD und Illustrator. Robo-Teile in Cinema4D entstanden)
Über das Dropdown-Menü gelangt man zum Warenkorb, dem Profil und dem Merkzettel.
Mit einem Wisch nach Links oder Rechts können die unterschiedlichen Kategorien des Robos konfiguriert werden.
Zu jedem Artikel gibt es eine Infoseite mit den Funktionen (rechts).
Auch die Farbe kann individuell angepasst werden (links).
In der 3D-Ansicht kannst du dir deinen Robo ganz genau anschauen. Entspricht er neben deinen funktionalen auch deinen optischen Ansprüchen?
Links: Auswahl der Kategorien für den Start der Konfiguration.
Rechts: Willkommenstext und „How to use“.
Blattis
„Kampfansage“ ist im als Vertiefung im Bereich HTML und CSS entstanden. Ziel dieser Übung war es, eine Website einzurichten, die den Leser auf eine Geschichte mitnimmt und am Ende über einen Call-to-action-Button auf eine Verkaufsseite zu leiten. Dabei sollte das Produkt der Verkaufsseite und das Thema der Website zusammenpassen.
Zwei Völker lebten in Frieden: Die Blattis, die sehr naturverbunden waren und die Grauis, die den technischen Fortschritt liebten.
(Beide Figuren bewegen sich. Animationen können auf der Portfolioseite unter Animationen angesehen werden.)
Doch der Frieden hielt nicht ewig. Die Grauis fühlten sich von den Blattis betrogen und fingen Streit an.
(Eine HTML und CSS Übung zum Thema DIV-Boxen, Hintergründe und Ebenen sowie statische und dynamische Elemente.)
Ein Krieg zwischen beiden Seiten. Für welche entscheidest du dich?
Wähle deine Waffe!
(Eine Übung für HTML und CSS zum Thema Opacity und OnKlick-Verhalten:
Die gewählte Waffe wird auf 100% opacity gesetzt, während die anderen beiden Waffen auf geringerer Deckkraft bleiben).
Der Krieg scheint zu Gunsten der Grauis entschieden zu werden!
(Im Blauen Kasten bewegen sich Speere zwischen den Gegnern hin und her. Eine Übung zum Thema CSS-Animationen.)
Doch die Blattis haben eine Geheimwaffe!
(Beim Herunterscrollen formt sich das grüne Schutzschild um den Blatti.)
Durch ihre Geheimwaffe siegen die Blattis!
(Beim Hovern mit der Maus über die blaue Fläche kippt diese leicht nach links. Sie ist gleichzeitig ein Link zu einer Amazon-Produktseite für Vertikalbegrünung)
Winter
Der Wandsbeker Winterzauber ist ein alljährliches Spektakel. Als Übung für Webdesign wurde die originale Website überarbeitet.
Links der finale Entwurf, entstanden mit Photoshop und Illustrator.
Jeans
Klare Kanten und eine reduzierte Farbpalette sorgen für einen übersichtlichen und hochwertigen Shop.
Deadpool
In diese Gruppenarbeit ist viel Liebe für Details geflossen.
Ziel dieser Übung war es, einen neuen Kinofil unserer Wahl anzuteasern.