Das Auge

Das Auge ist mit unter das wichtigste Werkzeug eines Designers. Unsere Arbeit beschäftigt sich mit der Thematik des Auges. Dabei stand die Anwendung, die Interaktion und die Vermittlung des Inhaltes stehts im Vordergund.

IPad_Auge

Die Aufgabe

Die Aufgabe bestand darin, ein geschlossenes System zu gestalten, dass dem Benutzer den jeweiligen Inhalt vermittelt. Dazu sollte ein Konzept entwickelt werden, dass sowohl gestalterisch, sowie auch gedanklich am Thema orientiert ist. Durch die Variantenbildung in der Gestaltung und die passende Wahl des Mediums, sollte eine ästhetische Vermittlung der Inhalte erreicht werden.

 

Navigation

Navigation

 

Bei der Navigation galt es ein übersichtliches, funktionales und minimalistisches System zu schaffen, dass dem Benutzer möglichst einfach und intuitiv durch die verschiedenen Kapiteln führt. Unsere ersten Ideen waren noch etwas zu weit entfernt von einem simplem System, im laufe der Variation kristalisierte sich jedoch eine Navigation heraus, die es ermöglicht einen Überblick zu geben, welche Inhalte in den jeweiligen Kapiteln vermittelt werden. Es ist möglich in der Grundnavigation jeden Inhalt jederzeit anzuwählen, außerdem erlaubt es dem Benutzer auch ganz einfach mehr über das Thema zu erfahren und tiefer zu gehen, sowie in einem Kapitel einfach weiter zu schalten. Die folgenden Beispiele zeigen die Entwicklung unserer Variationen. Hierbei ist der Inhalt nebensächlich.Diverse Konzepte wurden ausprobiert, um den Inhalt der Navigation so zu gestalten, dass stehts ersichtlich ist, wo sich der user im Moment befindet. Der Teil indem man sich befindet, wurde immer farblich oder durch Graustufen hervorgehoben, der Inhalt der in diesem Moment nicht wichtig ist, wird vergraut. Links sieht man den Popup bzw. das hochgehen der Navigation wenn man die Maus darüber gewegt. Der Inhalt wird in den Hintergrund verschoben, die Navigation zeigt die vier Kapitel an, grau werden die Bereiche dargestellt die man erkunden kann, weiß der Inhalt, indem man sich befindet. Das ganze wurde durch eine Suchleiste ergänzt.

 

Layout

Das schlichte und informationsbezogene Layout war uns immer als Ziel gesteckt. In zahlreichen Versuchen das Layout stimmig, ästhetisch und funktional zu parametrisieren, versuchten wir erst durch Kästchen den Inhalt einzugrenzen. Da das nicht der richtige Weg war und die abgerundeten Ecken, gestalterisch nicht passten, gingen wir dazu über die Textfelder und den Inhalt mit horizontalen Linien einzugrenzen, ihn aber noch genügend Freiraum zu geben. Eine Variation des Textfeldes, indem wir den Text in einem Kapitel links, im anderen rechts positionieren, ist auch vorhanden.

Mit den Pfeilen oben kann man im Kapitel einen Schritt weiter gehen, die Pfeile in der nähe des Textfelden, sind für die Vertiefung und das weiterlesen der Thematik vorhanden.

 

Illustrationen

Das schlichte und informationsbezogene Layout war uns immer als Ziel gesteckt. In zahlreichen Versuchen das Layout stimmig, ästhetisch und funktional zu parametrisieren, versuchten wir erst durch Kästchen den Inhalt einzugrenzen. Da das nicht der richtige Weg war und die abgerundeten Ecken, gestalterisch nicht passten, gingen wir dazu über die Textfelder und den Inhalt mit horizontalen Linien einzugrenzen, ihn aber noch genügend Freiraum zu geben. Eine Variation des Textfeldes, indem wir den Text in einem Kapitel links, im anderen rechts positionieren, ist auch vorhanden.

Mit den Pfeilen oben kann man im Kapitel einen Schritt weiter gehen, die Pfeile in der nähe des Textfelden, sind für die Vertiefung und das weiterlesen der Thematik vorhanden.

Wahrnehmung Zapfen

 

Umsetzung

Hier einige Beispiele für die Screens die wir für die Umsetzung in Flash Catalyst und Flash verwendet haben. Ausserdem ein kleiner Screencast, die komplette Anwendung wird nachgereicht.

 

Grüner Star WeitsichtigkeitAnatomie ZiliarmuskelLinse