Ventana – Interactive Shop Window – Bachelor Project

Today, retail stores are finding themselves in a fierce competition with e-commerce stores. By bringing the latest technologies to these physical locations, Ventana is trying to provide a solution to this problem. Installed in the shop‘s window, Ventana enables passing potential customers to interact with a digital representation of the store‘s inventory. Now, well informed, the customer is more likely to enter the shop.
Ventana is designed to allow the presentation of any kind of information. It could be used to present fashion, jewelry or a restaurants menu. For our purposes Ventana is showing two products thematizing the US city New York. By the mere presence in front of the window a user can navigate and interactively experience the digital space.
The non-stop availability of the stores inventory breaks the boundaries between the digital and the real world and has the potential to attract many more customers. And as touch-less sensors become more affordable we will see many more applications of this kind, which will open up a range of completely new possibilities. Kinect, for example, would allow us to determine a customers body size and use it as a filter on the inventory and thus tailoring the information to the users needs.


Read more »

Color Browse – iPhone App

Color Browse is an iPhone application that allows you to easily discover the huge archive of the poster collection of the University of the Arts Zürich. As the average user is rarely familiar with the exact artist names or other search criteria, I decided to pursue an approach that let’s the user sample a color to discover posters containing mainly that sampled color. This approach makes it possible to surf endlessly through the posters and discover new posters and artists at the same time. If a user is interested in a poster he then can retrieve more information about it. Using the iPhones touch screen the user can move his finger over the surface of a displayed poster and a display shows the color currently below the finger. When the user removes the finger the color is selected and a new poster is loaded that has an average color value of the selected color.

Read more »

Website for Sridhanwantari published

Together with my company Cubera Solutions GmbH I published a new client website. It was our first project together with our new graphic designer and friend Michèle Gnos. Building this website with her was a good and successful experience.
The website is about Ayurveda therapy in Indonesia, a special therapy for many different problems.

Read more »

WUZU 2010 – The Ice Jewelry Project

About WUZU10

WUZU is a long-term collaborative program between the Jiangnan University and the Industrial Design department of the Zurich University of the Arts (ZHDK). Alternating every year, one university hosts a joint international summer school. Since its inception in 2004, the WUZU program has stated an example of successful collaboration between Chinese and European universities.
This years WUZU 2010 program was organised by the School of Design at the Jiangnan University in China.

The Subject was “YOU•WU”. The program started in June 2010, when 11 students and 2 professors from the ZHDK had the opportunity to fly to China and meet their educational partners; 20 students and 4 professors from the Jiangnan University. Together they conceived and designed a product that will be exhibited in September in the pavilion “Basel Geneva Zurich” at the Expo in Shanghai.
Read more »

Migros Terra Suisse – Who Is Muh

The last couple of weeks I had the possibility to work for Jung von Matt, one of the leading advertisement agencies in Europe. I worked on different small projects but mainly on the Migros Terra Suisse Microsite “Who is Muh”.

What is “Who is Muh”?
“Who is Muh” is an interactive platform for the Migros brand Terra Suisse. This interactive site shows different animals from the Terra Suisse program and explains what each animal does and how the animals are being treated and raised by their farmers.

Read more »

NOMA-HILFE CD-ROM

Lately I came across an old project I build back in 2008. It‘s not the latest project but for some of you it might be quite interesting to see what I worked on quite some time ago. The project NOMA was a CD-ROM for the Noma-Hilfe Schweiz  which helps poor people with NOMA. I worked on this project because I think its very important for people to know what NOMA  is and how we can help people with NOMA.

Read more »

WUZU 2009 – Industrial Design with Chinese Students

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”.

Read more »

Superball – Second Life Spiel

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.

Second Life Superball Spielfeld 3

Das Spielfeld inkl. Tore:

Read more »

LichtON – Lichtsteuerungssoftware

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.

LichtOn Startscreen

Startscreen

LichtON Kartenübersicht

Kartenübersicht

LichtOn Dokumentation (PDF 2.3MB)

SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/

User Centered Design – TouchPanel Applikation

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.

Paperprototyp

Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.

Usertest Prototyp

Prototyp Test

Usertest Prototyp

Prototyp Test

UCD Website Prototyp

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

Advanced Interfaces

Advanced Interfaces Plakat

Advanced Interfaces Plakat

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)

ReDesigning Standards – CeDe.ch

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.

CeDe Redesign

Projekt Webseite: http://cede.michaelfretz.ch

Web Interfaces – rum.Pirat

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.

Webinterface rum.Pirat

Webseite für die Verlängerung der Räume mit geöffneter Hilfe.

Webinterface rum.Pirat

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

Interface Dynamics

New HTC Interface von Michael Fretz

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.

New HTC Interface von Michael Fretz

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.

New HTC Interface von Michael Fretz

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.. :-)

Magazin Illustration

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.

Magazin Titelseite

Magazin 2-3 Seite

Magazin 3-5 Seite

Magazin 6-7 Seite

Handrendering

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.

Handrenderingübung 01

Am zweiten Tag des Kurses galt es auf einen Würfel mit Zylindern zu zeichnen.

Handrenderingübung

Auch eine Legofigur hat den Weg auf ein Blatt von mir gefunden. Mit den grössen Verhältnissen bin ich aber nicht sehr zufrieden.

Handrenderingübung

Mein USB Stick welcher ich für die Übung mit den verschiedenen Obferlächen benutzt habe.

Handrendering

Ein Farbstiftspizer in einer Explosionszeichnung welche die verschiedenen Teile aufzeigen soll.

Handrenderingübung

Ein weiterer USB Stick mit einer glänzigen Oberfläche und Schatten.

Illustration zu “Wenn Fliegen schleichen”

zeitwahrnehmung.jpg

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

Modul Farbmethodik

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.

Farbmethodik Farbanalyse 3D Model

3D – Farbwürfel welcher ich in Adobe Illustrator erstellt habe

Farbmethodik Farbanalyse

Foto und Transformation welche ich für den 3D Würfel verwendet habe.

Farbmethodik Farbwürfel

Farbwürfel mit kalten und warmen Farben.

Farbmethodik Farbtiefen

Farbtiefenanalyse
Download Farbmethodik PDF (3.6MB)

Modul Bildschirmtyografie

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.

Link (6.6MB)

Bildschirmtypo

Bildschirmtypo

Bildschirmtypo

Fotoalbum Florida

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.

floridabuch_printscreen_2.jpg

floridabuch_printscreen_1.jpg

floridabuch_printscreen_3.jpg
Zum Downloaden einfach auf den jeweiligen Namen klicken

Peru (noch nicht online)

Florida (PDF 2.5MB)

Older Posts »