Last summer I had the change to be part of an international project at the university of the arts with Chinese students. In the project WUZU 2009 we worked in mixed groups of Chinese and Swiss students on Industrial Design projects. The topic was “Food and Drink”.
Im vierten Semester besuchten wir das Modul “Design Studio II Interaction in virtual environments” bei Max Moswitzer. Es galt ein Interaktives Objekt in Second Life zu erstellen. Zusammen mit Jonas Kaufmann und Gabriel Süss haben wir ein kleines Spiel in Second Life programmiert. Unsere Anwendung Superball, ist ein kleines Game in Second Life welches ähnlich wie ein Fussballspiel funktioniert. Im Gegensatz zu einem normalen Fussballspiel ist unser Spielfeld rund und hat leicht abgerundetete Wände. Auch der Ball fliegt nicht immer so wie man dies eigenltich erwartet.
Das Spielfeld inkl. Tore:
Der Hintergrund
Dieses Projekt hat in Zusammenarbeit mit der Nimbus-Group in Stuttgart stattgefunden. Dort befindet sich auch das Nimbus Mock-Up, ein Simulationsbereich, auf welchem auf über 1500m2 die Produkte von Nimbus präsentiert werden. In Zusammenarbeit mit GIRA wurde für das Mock-Up ein Gebäudesteuerungssystem installiert, über welches primär das Licht der gesamten Ausstellungsfläche geregelt werden kann. Diese Steuerung wird mittels eines Touchscreens bedient, welchem unser Interesse galt.
Das Ziel
Das Ziel des Projekts war die Entwicklung eines Navigationskonzepts und die Gestaltung eines entsprechenden GUI‘s für den Touchscreen. Damit sollte vor allem sämtliches Licht im ganzen Mock-Up gesteuert werden können. Das heisst, vom ganzen Stockwerk über einzelne Räume bis hin zu einzelnen Leuchten sollte die Lichtstimmung detailliert regelbar sein. Optional war auch die Steuerung weiterer Komponenten wie Audioquellen, Jalousien etc. denkbar. Das GUI sollte zudem an das CorporateDesign von Nimbus angepasst werden und sich gut ins Mock-Up einfügen. Und zu guter letzt gilt es auch noch zu erwähnen, dass die beste Arbeit prämiert wurde: für jeden Gewinner gab es eine Nimbus Leuchte “Line Z”.
Projekt
Das Projekt LichtOn baut auf eine simple Bedienung, auf die Einfachheit des An/Aus eines Lichtschalters. Der Fokus unserer Arbeit liegt in der Schlichtheit und Usability des Programms. So zeigt sich beispielsweise der Startscreen auch gern schlicht, mit nichts weiter als einigen wählbaren Voreinstellungen in Form von simplen Buttons, welche mit einem einzigen Klick das ganze Mock-Up auf die gewünschte Helligkeit einstellen.
Die Hauptnavigation befindet sich diskret am unteren Bildschirmrand. Das Konzept sieht ausserdem als wichtigen Punkt vor, dass bei jedem Schritt nur die Interaktionselemente sichtbar sind, welche gerade benutzt werden können oder sonst von Bedeutung sind, indem sie beispielsweise auf etwas hinweisen. So werden die Elemente im Bild auf ein Minimum reduziert und die Übersichtlichkeit und Bedienbarkeit auf ein Maximum angehoben.
Grafisch ist unser Design den von der Firma Nimbus vermittelten sinnlichen Erfahrungen angepasst. Die verschiedenen Elemente sind in ihrer milchglasig/metallischen Erscheinung der Konnotation der beiden meist genutzten Materialien von Nimbus angepasst.
Startscreen
Kartenübersicht
LichtOn Dokumentation (PDF 2.3MB)
SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/
Im Modul User Centered Design haben wir uns mit einer Applikation befasst, welche auf einem Touchscreen installiert ist.
Konzept und Idee:
Ein Touchscreen für ex libris Filialen zur Vor-Ort-Bestellung von Produkten aus dem Internet: www.exlibris.ch
Fokus haben wir bei unserem Prototyp auf die Sparte Musik gelegt – natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bücher, Videospiele, usw. … zu erweitern.
Während des ganzen Entwicklungsprozesses haben wir regelmässig Testbenutzer in das Projekt einbezogen.
Zu Beginn haben wir einen Paper-Prototyp entwickelt.
Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.
Prototyp Test
Prototyp Test
Printscreen der Touchscreen Applikation
Im Hintergrund unserer Applikation verwendeten wir das PHP Last.FM API von matto1990.com. Mit Hilfe dieser Applikation konnten wir die Daten von Last.FM abfragen und für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich für das Anzeigen der Daten und die Animationen eingesetzt wurde. Auch mit Javascript haben wir eine Tastatur entwickelt, welche auf dem Touchpanel eingesetzt wurde. Da wir eine Art Template verwendet haben konnten in unserer Entwicklungsphase mehrere Designs gleichzeitig auf der Applikation verwenden und diese mit einem JumpMenu einfach
umschalten.
URL zur Demo: http://ucd.michaelfretz.com
Download Dokumentation :Dokumentation (PDF 2.7MB)
Download: Keynote Präsentation (ZIP 2MB)
Team: Christoph Brandin, Liliane Krauss, Michael Fretz
Zusammen mit Nino Cometti und Philippe Meier habe ich am Ende des zweiten Semesters einen MP3 Player gestaltet. Der ganze Player soll aus einem elastischen Display bestehen, Lyrics anzeigen und einfach zu bedienen sein.
Plakat als PDF (1.8MB)
Präsentation als PDF (5.8MB)
Projekt von Michael Fretz und Gabriel Süss im Modul «ReDesigning Standards».
Die umfangreiche Analyse des bestehenden Webauftritts von CeDe.ch, die Umfragen und die Gespräche mit verschiedenen Personen haben uns dazu bewegt, eine grafische Neugestaltung der Webseite von CeDe.ch zu erstellen. Das Angebot wurde aufgeräumt, weniger relevante Informationen weggelassen, die Anordnung verbessert und aufs Wesentliche reduziert. Neue Funktionen wurden keine hinzugefügt, lediglich die schon vorhandenen Informationen und Funktionen neu organisiert. Mit diesen Anpassungen sollte eine Verbesserung des Handlings des Webshops von CeDe.ch erreicht werden.
Projekt Webseite: http://cede.michaelfretz.ch
ZIEL
An der ZHdK mit einer Webapplikation eine Dienstleistung zu vereinfachen.
KONZEPT
Sinn und Ziel eines web-basierten Auftrages für eine verlängerte Raumbelegung ist es, das alte, (Gelbe-) Papierzettel-System an der ZHdK abzulösen. Der momentan vorhandene Zettel soll durch ein ähnlich aufgebautes Web-Formular ersetzt werden. Dies vor allem aus dem Grund, dass es oft zeitlich nicht möglich ist eine Raumverlängerung einzugeben. Auch der Weg um Raumverlängerungen zu beantragen kann gespart werden da die Räume ortsunabhängig eingegeben werden können.
Momentane Situation
Um eine Raumbelegungsanzeige ausfüllen zu können, muss sich ein Student im Hauptgebäude momentan ins Erdgeschoss begeben, um bis 17.00 Uhr ein solches Papierformular auszufüllen, was oft aus Zeitmangel ein Problem darstellt.
Da viele andere Dienste wie z. B. Bücherbestellungen auch bereits in eine digitale Form überführt wurden, erscheint es nur logisch, diese Dienstleistung ebenfalls zu digitalisieren. Die Vorteile für Nutzer währen vielfältig: es kann ein Raum bei Bedarf (auch ohne den Unterricht vor 17.00 Uhr zu verlassen) verlängert werden, und dies auch, wenn sich der Student nicht in demselben Gebäude befindet, in welchem er ein Zimmer verlängern möchte. Durch die eindeutige Identifikation mittels ITZ-Login kann exakt ermittelt werden, wer genau den Raum reserviert hat. Die für Raumreservationen zuständige Person muss sich nicht mit diversen “Zetteln“ herumschlagen, sondern erhält auf digitalem Weg eine geordnete Liste aller zur reservierenden Zimmer, welche ohne grossen Aufwand an weitere Personen wie z. B. Securitas weitergeleitet werden kann. Zudem wären Listen aller in ZHdK-Gebäuden reservierten Räume in digitaler (per Email versendbarer Form) bereits von Beginn des Prozesses an verfügbar.
Webseite für die Verlängerung der Räume mit geöffneter Hilfe.
FAZIT
Abschliessend könnte man sagen, dass wir mit unserem Projekt sehr zufrieden sind. Anfängliche Schwierigkeiten mit Wordpress wurden relativ schnell behoben. Wir haben alle viel gelernt, wie man beispielsweise seine eigenen Ideen im Team besprechen und argumentieren kann. Technisch haben wir uns weiter entwickelt und Wordpress als etwas grösseres als nur ein Blogsystem kennen gelernt.
Falls das Projekt weiter entwickelt werden darf, müssten wir noch ein paar Dinge anpassen. Zum einen würden wir das Raumerfassungsscript selber programmieren und nicht auf das TDO Mini Form zurück greifen. Dies hätte den Vorteil, dass wir die Daten in einer eigenen Tabelle in der Datenbank speichern können, welche besser auf unsere Bedürfnisse angepasst ist. Weiter würden wir eine Möglichkeit einbauen, um Raumreservationen nach Datum anzuzeigen. Eine Druckansicht für den Hausdienst wäre auch noch in Planung.
Webseite zum selber ausprobieren: rum.Pirat
rum.Pirat Dokumentation (PDF 2.3MB)
Screencast:
Web Interfaces / Information Architecture
Dozent: Dipl. Des. Stefano Vannotti
Studenten: Michael Fretz | Raphael Habbegger | Tobias Koller | Philippe Meier
GUI des Adressbuchs
Das Adressbuch basiert auf einer Art Laufrad und einer Schnellwahl über Buchstaben auf der oberen Seite des Mobiltelefons. Das Laufrad kann mittels eines verschiebens der Schaltflächen mit dem Finger bewegt werden. Je nachdem wie schnell die Bewegung ist läuft das Laufrad schneller oder weniger schnell und rastet jeweils ein wenn das Laufrad kurz vor dem Stillstand und eine Schaltfläche im Vordergrund liegt.
Der Übergang zum SMS wird dann über ein Überblend Effekt gelöst.
Von Laufrad aus kann jeweils der Kontakt im Vordergrund angerufen beziehungsweise eine SMS gesendet werden.
Mit der „zurück“ Taste kommt man wieder eine Ebene zurück.
GUI der SMS Eingabe
Die SMS Eingabe erfolgt über eine QWERTZ Tastatur. Wird ein Buchstabe gedrückt wird der Button grösser und der Buchstabe wird auf dem Textbereich dargestellt.
Neben den Buchstaben werden noch alle Zahlen angezeigt.
Die Buttongrösse der einzelnen Tasten habe ich auf einem iPod Touch getestet. Die einzelnen Tasten sind zwar relativ klein, ich bin aber der Meinung das diese dennoch von der Grösse her funktionieren. Für das HTC Handy auf welchem der Prototyp läuft sind die Tasten relativ klein.
Die Space Taste ist die grösste Taste da diese relativ oft verwendet wird.
Farblich habe ich das ganze GUI dunkel gehalten. Dies mit dem Gedanken das viele Portable Geräte über einen Akku mit Strom versorgt werden und dieser dadurch weniger belastet wird.
Film über die Funktionsweise
PS: Falls noch jemand ein Smartphone gratis abzugeben hat auf dem ich zukünftige Systeme testen kann, würde ich mich sehr darüber freuen.. :-)
Für einen fiktiven Beitrag für das Tagesanzeiger Magazin haben wir im Kurs Medien und Illustration 9 Bilder erstellt. Anhand eines Textes welcher uns vorlag galt es, die Wohnung zu gestalten. Als erstes haben wir in einem 3D Programm den Grundriss nachgebaut und anschliessend angefangen die Wohnung zu planen. Wir suchten Gegenstände und Fotos im Internet. Die gefundenen Objekte haben wir anschliessend abgezeichnet bzw. verfremdet. Unser Ziel war es die Wohnung anhand der Beschreibung nach zu bauen, diese aber dennoch nicht Fotorealistisch zu erstellen. Eine Art Comichafte Art haben wir durch die schwarzen Randlinien dargestellt. Farblich haben wir nurelemente hervorgehoben welche für uns auch von Bedeutung waren
Die Arbeit, die eigentlich in einer 4er Gruppe gelöst werden musste, haben Mario von Rickenbach (Webseite) und ich alleine durchgeführt. Die Zusammenarbeit hat sehr gut funktioniert und wir sind mit dem Resultat der Arbeit zu frieden.
Hier noch die einzelnen Seiten.
Im Modul Handrendering haben wir die grundlegenden Kenntnisse im perspektivischen Zeichnen mit Kugelschreibern erlernt. Ich hatte bis zu diesem Zeitpunkt noch keine Erfahrungen gesammelt mit Freihandzeichnen dieser Art was dies zu einer anstrengenden aber sehr Interessanten Aufgabe gemacht hat.
Am zweiten Tag des Kurses galt es auf einen Würfel mit Zylindern zu zeichnen.
Auch eine Legofigur hat den Weg auf ein Blatt von mir gefunden. Mit den grössen Verhältnissen bin ich aber nicht sehr zufrieden.
Mein USB Stick welcher ich für die Übung mit den verschiedenen Obferlächen benutzt habe.
Ein Farbstiftspizer in einer Explosionszeichnung welche die verschiedenen Teile aufzeigen soll.
Ein weiterer USB Stick mit einer glänzigen Oberfläche und Schatten.
Als kleine Photoshopübung habe ich im Modul “Medien und Illustration” für den Text “Wenn fliegen schleichen” eine kleine Illustration erstellt. Der Text handelt über die unterschiedliche Zeitauffassung in unterschiedlichem Alter oder Gesundheitszustand. Mit meinem Bild wollte ich aufzeigen wie unterschiedlich doch die Zeit vergehen kann. Manchmal rast sie an uns vorbei und dennoch gibt es Tage da will Sie nicht umgehen.
Quelle der verwendeten Bilder: pixelio.de
Letzte Woche hatten wir das Vergnügen neben dem Modul Bildschirmtypografie auch noch unsere Arbeiten zum Thema Farbmethodik abzuschliessen. Einen kleinen Auszug möchte ich hier aufzeigen. Die fertige Arbeit als PDF findet man wie gewohnt am Ende dieses Eintrags.
3D – Farbwürfel welcher ich in Adobe Illustrator erstellt habe
Foto und Transformation welche ich für den 3D Würfel verwendet habe.
Farbwürfel mit kalten und warmen Farben.
Farbtiefenanalyse
Download Farbmethodik PDF (3.6MB)
Heute war Abgabe vom Modul Bildschirmtypografie.
Ich empfand das Modul als sehr interessant. Leider konnte ich nicht immer die gewünschte Zeit aufbringen um jedes Arbeit so zu gestalten wie ich es mir eigentlich vorgestellt habe. Wie Jan Schibli in seinem halbjährlichen Kolumne in der Zeitschrift Schiblianer immer so schön schreibt:”Die Freuden und Leiden eines Jungunternehmers…”
Ich möchte euch hier einen kleinen Auszug aus meiner Dokumentation zeigen.
Selbstverständlich könnt Ihr auch das ganze PDF herunterladen.
Im Sommer 2006 war ich mit Dominik Brumm in Peru und Florida. Jetzt habe ich beide Fotobücher fertig.
Selbstverständlich will ich euch diese Arbeiten nicht vorenthalten.
Die beiden Bücher habe ich jeweils während eines Kurses an der HGKZ bzw. ZHdK erstellt.
Ich danke Samuel Marty für die Unterstützung während des Peru Buchs und Daniel Volkart für seine Inputs während des Florida Buchs.
Zum Downloaden einfach auf den jeweiligen Namen klicken
Peru (noch nicht online)
Heute haben wir unsere erste Arbeit im Modul Digital Design Element abgegeben.
Ziel dieses Kurses war es neue Zeichen zu finden und daraus am Schluss eine Animation zu erstellen.
Einen Auszug möchte ich hier zeigen:
Die ganze Doku findet man hier-> (10MB)
Viele Menschen leben und arbeiten in der Stadt. Doch viele sind einsam. – Einsam obwohl sie jeden Tag vielen Mitmenschen begegnen.
Dies wollte ich aufzeigen mit meinen Abschlussprojekt des Photoshopquartals bei Ida Zängerle . Das Foto zeigt das Central in Zürich an dem täglich tausende Personen verkehren. Ich habe 120 Fotos an einem Nachmittag gemacht, alle bewegten Objekte entfernt und nur eine einzelne Person im Bild gelassen.
Bild grösser anschauen ->
Letzte Woche war unser letzter Tag im Kurs Entwurf und Interaktion. Hier noch unser Fazit. Die Komplette Arbeit als PDF findet man am Ende dieses Eintrages
Fazit
Arbeitsprozess und Gruppendynamik
Anfänglich sollten wir einen urbanen Ort aussuchen, der rege belebt ist und durch seine Attraktoren und Distraktoren auffällt. Schrittweise haben wir den ausgewählten Standort analysiert und eine Intervention ausgearbeitet.
Durch die Höhen und Tiefen des gruppenorientierten Gestaltungsprozesses, haben wir viel über das Arbeiten im Team und über das Kombinieren unserer individuellen gestalterischen Potenziale gelernt.
Zurückblickend auf das Seminar fällt die Gewichtung dieser Arbeit auf den Arbeitsprozess und nicht auf das Endresultat selbst. Schlüsse und Zielsetzungen Ziel war es, sich den verborgenen Qualitäten bewusst zu werden. Des weiteren sollten die verschiedenen Bewegungsebenen sichtbar gemacht werden. Anhand diesen Vorgaben haben wir verschiedene Interventionen entworfen.
Die unterschiedlichen Ideen haben wir ausgewertet, neu zusammengestellt und auf das Wesentliche reduziert. Gefragt war eine Lösung, die durch ihre Einfachheit die alltäglichen Passanten erreicht. Unsere Lösung haben wir aufgrund von diversen Erkenntnissen während des Arbeitsprozesses erarbeitet. Unsere Idee bestand darin, diesen Raum den Menschen näher zu bringen, durch Verdeutlichung der bestehenden Objekte. Unsere Intervention hat die Menschen erreicht, indem diese mit ihren Blicken den Verbindungslinien folgten. Für Zukünftige Projekte würden wir gleich zu Beginn mehr auf die Aufgabenstellungen eingehen, anstatt uns von konkreten Ideen leiten zu lassen.
Photoshop hat seit CS3 Animationen gelernt. Grund genug dies ein wenig genauer unter die Lupe zu nehmen.
Die Sache ist im Grunde genommen recht simpel und intuitiv. Einfach ein Bild mit mehreren Ebene erstellen und “Extras – > Animationen” öffnen. Die gewünschten Ebenen beliebig lange ein- und ausblenden und als Film abspeichern.
Hier ein kleines Beispiel…
Im Rahmen des Photoshop Moduls Digitale Bildwelten habe ich eine kleine ICH Welt erschaffen.
Mit dieser kleinen Arbeit wollte ich wiedermal verschiedene Werkzeuge in CS3 testen. Aus mehreren Fotos habe ich jeweils mich ausgeschnitten und wieder als ein Bild zusammen gefügt. Für die Fotoarbeit hatte ich leider kein Stativ zur Verfügung was mir den Standpunkt der Kamera einschränkte.
Hier noch das fertige Bild.
Um den Standort genauer kennen zu lernen und eine Intervention direkt am Objekt planen und veranschaulichen zu können, bauten wir ein stark vereinfachtes Model aus Karton.
Mit Hilfe unseres 3D Objekts erkannten wir unseren Ort als eigenständige, kleine Welt in welche man eintritt und wieder austritt. Unsere Hypothese ist das die meisten Autofahrer und Passanten diesen speziellen Ort durchfahren ohne diesen Ort wirklich wahrzunehmen.
Mit unserer ersten Intervention versuchten wir herauszufinden ob wir die Personen subtil darauf hinzuweisen können, dass sie kurzeitig eine eigene Welt durchfahren.
Ideen welche auch den ganzen Durchgang als Aquarium darstellten wurden laut. Zumal Shell auf deutsch auch Muschel heisst.
Intervention Testlauf
Mit Karton und Spraydosen ausgerüstet sind wir zur Hardau gefahren.
Zuerst beobachteten wir die Reaktionen der Passanten auf einen Postkartenspender in der Durchgangspassage. Leider haben alle Passanten diesen ignoriert.
Als zweiten Schritt haben wir mit den Begriffen „Eintauchen“ und „Auftauchen“ gespielt. Zu unserem erstaunen brachten die Autofahrer unserer Intervention ein grosses Interesse entgegen. Die triviale visualisierte Botschaft der beiden Begriffe regten die Personen sichtlich zum nachdenken an. Leider konnten wir Gedanken der einzelnen Personen nicht auswerten.