Basic Interface 10|01 - Dokumentation von Greta Peukert
Dieser Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar.
Digitales Buch
Aufgabenstellung
Gestalte eine digitale Fassung Deines Lieblingsbuches.
Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch,
oder auch ein Gedichtband sein. (Keine Comics!) Die digitale
Fassung des Buches soll exemplarisch anhand von vier Screens in
zwei verschiedenen Formaten vorgestellt werden - zwei horizontale Screens im Format von 1024 x 768 Pixeln und zwei vertikale Screens im Format von 240 x 320 Pixeln. Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe.
Umsetzung
Lina Ruske und ich haben uns für das Buch „Sommerhaus, später“ von Judith Hermann entschieden. Die Autorin beschreibt in ihren Geschichten kurz und prägnant Begebenheiten des Alltags, die aber nie alltäglich sind. Es gibt immer eine unerwartete Wendung, und die Handlung spielt sich an sehr unterschiedlichen Schauplätzen ab.
Da Lina für das Buch schon einige Illustrationen gestaltet hat, wollten wir diese auch in die Gestaltung mit einbringen. Um nicht zu sehr von den Geschichten abzulenken, wählten wir ein schlichtes Layout. Die Hauptfarben sollten grau und rot sein, da sie sich in einigen Illustrationen wiederfinden. Die Navigation ist ebenfalls sehr einfach gehalten. Über das Inhaltsverzeichnis gelangt man zu den verschiedenen Kurzgeschichten, oder anderen Themen. Die Geschichten sind im Blocksatz eher links gehalten und werden im Hintergrund von den jeweiligen Illustrationen unterstützt. Um den Buchcharakter bei zu behalten, blättert man mit den Pfeilen nach links oder rechts weiter.
Bei der kleineren Version wurde die Navigation über einen Menübalken am unteren Rand geregelt. Dort sieht man wie im großen Model das Inhaltsverzeichnis, über welches man sich in die verschiedenen Geschichten navigieren kann. Erscheint eine der Kurzgeschichten, sieht man im oberen linken Bereich die dazugehörige Illustration welche man mit einem „klick“ auf die Lupe im Vollbildmodus angucken kann. Um die Geschichten zu lesen scrollt man einfach mit dem Finger nach oben. Zusätzlich gibt es im oberen Bereich, wo sich auch der Titel befindet ein kleiner Balken, der einem anzeigt, wie lang die Geschichte ist und wo man sich gerade befindet. Das Layout des „kleinen Buches“ ist ebenfalls schlicht gehalten und besteht hauptsächlich aus grau- und Rottönen.
Graphical User Interface
Aufgabenstellung
Es soll eine Augmented-Reality-Applikation für das iPhone konzipiert und gestaltet werden. Die Applikation kann gern über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens zwei Screens präsentiert werden - gern auch mehr. Inhalte des ersten Screens sind Eingaben und Einstellungen. Inhalt des zweiten ist die Übereinanderlagerung von fotografischem Bild und der Informationsebene. Im ersten Screen soll man sich also streng an die Gestaltungsrichtlinien für das iPhones halten im zweiten Screen kann man deutlicher davon abweichen. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle.
Umsetzung
Stefan Hartmann und ich haben uns ein Auto Tuning App „Cartuning“ für das iPhone ausgedacht. Wie wäre es, wenn man sein Auto ohne großen Umbau tunen könnte? Die Antwort auf diese Frage ist unser App. Stefan und ich überlegten uns eine witzige Applikation mit der man sein Auto per Kamera aufnehmen kann und sich dann seine Wunschautoteile direkt auf sein Auto ziehen kann. Auf der Startseite kann der Nutzer sich entscheiden zwischen einem Neuen Profil und einem schon erstelltem Profil. Will der Nutzer ein neues Tuningprofil erstellen, muss er zunächst sein Autotyp wählen und sich anschließend die gewünschten Teile aussuchen. Danach wird das Auto aus verschiedenen Ansichten fotografiert und die gewählten Teile werden auf das Auto gezogen. Und schon hat man sein getuntes Wunschauto. Zusätzlich erhält man alle nötigen Informationen über die Autoteile, für einen evtl. Kauf. Der Nutzer kann sein getuntes Autoprofil jederzeit speichern und bearbeiten. Im Layout ist die Applikation sehr schlicht gehalten. Die Farben sind sehr neutral, die Aufteilung der Menüpunkte sind stets einfach und klar gehalten.
Klangbild
Aufgabenstellung
Die Beziehung zwischen Klängen und Bildern ist notwendigerweise willkürlich. Es gibt kein festes Bezugssystem, das einem ermöglichen würde, ein Klangerlebnis einer räumlichen Struktur zuzuordnen. (Die einzige Ausnahme hierbei wären wohl Synästheten.) Dennoch ist die Zuordnung von Klängen zu Bildern eine der zentralen Kulturleistungen der Menschheit. Denn nur so konnten Laute aufgezeichnet und Schriften entwickelt werden. Diese Beziehung beschränkt sich aber nicht nur auf Sprache. Auch in der Musik ist die Frage nach der Notation von zentraler Bedeutung. Weiterhin gibt es auch besondere Buchstabensysteme, wie z.B. das Morse-Alphabet, bei dem die Zuordnung von akustischen und graphischen Zeichen sehr eng ist. Darüber hinaus hat die Beziehung zwischen Klang und Bild auch immer die bildende Kunst beschäftigt.
Umsetzung
Bei der Klangbildaufgabe habe ich mich für ein Basketball Spiel entschieden, da dieses viele verschiedene Geräusche zeigt. Zuerst analysierte ich die verschiedenen Töne und markierte diese auf einer Zeitleiste mit verschiedenen, aber für mich passenden Symbolen. Um alle Geräusche genau rauszuhören spielte ich die Tonspur mehrmals ab. Nun ging es daran diese gezeichnete Tonspur in ein digitales Bild umzuwandeln. Hierzu nutze ich ausschließlich Grautöne mit einem schwarzen Hintergrund. Die verschiedenen Symbole spiegeln die verschiedenen Höhen und Lautstärken der Geräusche dar. In der Aufnahme des Basketballspiels gibt es sehr hohe, wie auch tiefe Töne, welches man auf der Grafik gut erkennen kann. Es gibt Monotone Klänge, die immer wieder erscheinen, aber auch spontane Geräusche, dadurch wirkt die Grafik lebendig und nicht still stehend.
1000 Worte
Aufgabenstellung
Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden. Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens.
Umsetzung
Bei dem Thema 1000 Worte entschied ich mich für 3 verschiedene Rezepte mit Orangen. Bei den Rezepten geht es um die Herstellung von frisch gepressten Orangensaft, einer Fruchtbowle mit Orangen und Orangensirup. Um diese Rezepte ohne Worte darzustellen beschäftigte ich mich mit den Zutaten und der Herstellung und überlegte, wie ich diese einfach und verständlich darstellen kann. Mit der Hilfe von Farben und charakteristischen Formen versuchte ich jede Frucht und jeden Gegenstand verständlich zu illustrieren. Zusätzlich unterteilte ich die verschiedenen Herstellungsschritte in einzelne Spalten. Die Pfeile weisen den Weg, der Schritt für Schritt zu einem leckeren Ergebnis führen.
