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 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/

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)

Digital Design Elements 1 – Zeichenlehre

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:
digitaldesignelements011.gif

digitaldesignelements021.gif

digitaldesignelements031.gif

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Die ganze Doku findet man hier-> (10MB)

Entwurf und Interaktion

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.

Download PDF (2,4MB)

Digitale Bildwelten

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.
Michael auf Treppe

Material Filtern

Nachdem alle ihre Fotoserie gezeigt haben bekamen wir unsere nächste Aufgabe. Wir sollten Filter setzen. Es galt Handlungsräume aufzuzeigen, Leerräume zu finden, verschiedene Abläufe darzustellen und Objekte herauszuheben. Menschen sollen visuell gekennzeichnet werden und Formen gefunden und markiert werden.
Deshalb verbrachten wir den ganzen Nachmittag vor dem Computer bzw. im Computerraum.
Wir versuchten auf möglichst unterschiedliche Arten die Voraussetzungen zu erfüllen.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Aktivität
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Umrisse von hellen Flächen

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Helle Farben zum Beispiel Gelb hervorgehoben

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Bewegungsfelder angezeigt. rot solche die stehen, gruen solche die in bewegung sind.

Design a change – Alltag beobachten, entwerfen und verändern

Am letzen Donnerstag haben wir mit dem neuen Modul Entwurf und Interaktion gestartet. Unsere Dozenten sind Stefano Vannotti und Raphael Perret. Folgende Ziele wurden uns gleich zu Beginn bekannt gegeben:
– Erproben eines exemplarischen Designprozesses
– Erkennen, erproben und weiterentwickeln von individuellen Vorgehensweisen
– Auswahl eines Arbeitsfeldes
– Entwickeln von Fragestellungen und Lösungsthesen
– Entwerfen von Designlösungen
– Implementierung und Anwendung
– Reflektion und Vermittlung

Was sich jetzt auf den ersten Blick als ein wenig verwirrend und nichts sagend daher kommt ist im Grunde ein alltäglicher Prozess. Eine Idee muss entworfen werden, danach eine Interaktion im Entwurf entwickeln und die fertige Interaktion muss danach im öffentlichen Raum getestet und die Reaktionen der Passanten aufgezeichnet werden.

Als Ausgangspunkt unserer Arbeit mussten wir eine Situation in der Stadt Zürich finden. Touristischenbilder oder Bahnhöfe waren nicht erlaubt. Um einen geeigneten Platz zu finden hatten wir einen Nachmittag Zeit. In unserer vierer Gruppe, welche aus Alain, Klaas, Nino und mir besteht, beschlossen wir uns in den 13er zu steigen und richtig Sihlcity zu fahren. Ein paar Stationen vorher sind wir ausgestiegen und zu Fuss weiter gelaufen. An verschiedenen Plätzen machten wir Fotos, Studierten die Bewegungsabläufe der einzelnen Personen und suchten daraus Bewegungsvektoren.
An 10 verschiedenen Plätzen machten wir das. So kam es, dass wir einmal Quer von Bahnhof Enge bis zum Escherwisplatz gelaufen sind. Hier sind unsere 10 Fotos für welche wir uns am Schluss entschieden haben.

Entwurf und Interaktion Bild 5

Entwurf und Interaktion Bild 6

Entwurf und Interaktion Bild 7

Entwurf und Interaktion Bild 8

Entwurf und Interaktion Bild 9

Entwurf und Interaktion Bild 1

Entwurf und Interaktion Bild 2

Entwurf und Interaktion Bild 3

Entwurf und Interaktion Bild 4

Entwurf und Interaktion Bild 10

Adobe Illustrator Kurs Tag 5

Auch der letzte Tage des Illustrator Kurses zeige uns auf das dieses Programm sehr viel bietet.

Wie schon in den Tagen davor beschäftigten wir uns wieder mit Flächen erstellten aber auch Hilfslinien haben wir aus den verschiedensten Formen kreiert.

Aus fertigen Mustern erstellte ich eigene Pinsel was eine lustige, wenn auch meiner Meinung nach nicht sehr nützliche Art ist Bilder zu erstellen. Vielleicht werde ich ja irgendwann ein praktisches Beispiel erstellen können… :-)

Die verschiedenen Farbsysteme und Farbpaletten standen auch noch auf dem Programm.

Sticker

Am Nachmittag haben wir noch einige Übungen gemacht mit Schriften konvertieren und diese Anschliessend zu vektorisieren. Diese Funktion sehe ich als eine sehr nützliche Funktion da für Logos und dergleichen dies meist benötigt wird.

Sticker Spörri

Die Tagesaufgabe war aber eine andere. Wir erstellten Stickers welche wir später druckten. Ich entschloss mich dazu meine Vorhandenen Bilder in Sticker umzuwandeln.

Sticker Michael

Mit meinem Ergebnis bin ich zufrieden und freue mich schon auf das nächste mal wenn ich etwas mit Adobe Illustrator erstellen kann.

Sticker

Older Posts »