Digitales Buch

Aufgabe

Bei der ersten Aufgabe digitalisieren wir ein konventionelles Buch. Die Vorgabe über das Format ist jeweils horizontal 1024 × 768 px und einmal vertikal 240x320 px. Durch diese Aufgabe soll man Folgendes lernen: die richtige Entscheidung für Screen-Typographie treffen zu können richtiges Layout für kleinen und großen Screen, z.B Zeilenabstand, Bildanteil... selben Inhalt von großem Format auf kleines Format übertragen guter Umgang mit Sketch

Auflösung

Buchauswahl

Wir haben uns für das Buch Potsdam-Geschichte entschieden, es ist ein relatives altes Buch und sieht schlecht designed aus, wir möchten dem Buch ein neues Image geben, außerdem ist das Buch ein Reiseguide Buch, wir wollen schicke und schicke Funktion hinzufügen, aktuelle Karte und Location.

Typographie

für die Typographie haben wir uns für Young Serif für Titeltext entschieden, die Typografie hat schöne stroke und ist ziemlich rund, welche dem Buch einen eleganten Charakter verleihen kann. Für den restlichen Text sind mit Proxima Nova, welche keine decorative stroke und ein hoch x height hat, damit die Lesebarkeit bei kleinem Screen garantiert werden kann.

Layout auf kleinem Format

Beim großen Format haben wir zwei Kolumnen, rechts ist der Text und Links ist die aktuelle Location und Karte des Orts, die Location und Karte wird nur gezeigt, wenn man auf das Karten Icon klickt, sonst sieht das Buch wie ein konventionelles Reisebuch aus. Beim Kleinformat gibt es nur eine Kolumne, über die Größe der Typographie haben wir lange diskutiert, denn wenn die Typo zu groß ist dann gibt es bei jeder Zeile nur sehr wenige Wörter, wenn sie zu klein ist, dann wird die Lesbarkeit beeinflusst. Außerdem haben wir die Bilder reduziert, damit auf jeder Seite mehr Inhalt angezeigt werden kann.

Klangbild

Aufgabe

Bei der zweiten Aufgabe sollen wir einen akustischen Klang in Bild umsetzen, Bzw. Visualisieren von einem Soundtrack. Prof. Müller hat uns ein Video gezeigt worin jedes Sound-Signal durch ein Objekt präsentiert wird.ich haben Klang 02. als Aufgabe bekommen, in dem Klang ist das Geräusch auf der Straße dominant und kann man bei Sekunde 30 ein vorbeifahrendes Auto hören, und nachher die Geräusche der Autotür, welche beim Zuklappen der Autotür erzeugt werden.

Herausforderung bei dieser Aufgabe besteht darin: - Akustische Signale sind sehr abstrakt und wir müssen sie in konkrete Form umsetzen. - die Forme sollen nicht nur ästhetisch sein, sondern auch die Eigenschaft jede Art Geräusch repräsentieren kann. - Unter den Geräuschen gibt es Hierarchie, Z.B sind die Hintergrundgeräusche immer sehr dominant,es gibt auch zusätzliche Geräusche, welcher nur ab und zu erscheinen, die Hierarchie soll auch durch die Visualisieren dargestellt werden. - die Veränderung jedes Geräusches ist auch anders, mache ändern sich nur bei Frequenz und manchen sind bei Lautstärke.

Auflösung

Hierarchie

Ich habe alle Elemente in einem Kreis aufgebaut, das Hintergrundmuster in dem Kreis steht für das Hintergrundgeräusch, das Muster ändert sich schnell je nach der Frequenzveränderung des weißen Rauschen auf der Straße, die Veränderung der Muster ist random und schnell, wie das Straßen-Geräusch.

Lautstärkeveränderung

Das Geräusch eines vorbeifahrenden Autos habe ich mit Transparenz bearbeitet, der Ausfall der Farbe steht für die Entfernung des von dem Automotor erzeugten Geräusches.

Vibration des Sounds

Mit dem Kringel um dem Kreis habe ich das Auto Tür Geräusch darstellt, es sieht aus wie Kringel auf einer Wasseroberfläche, wenn man Wasser in ein Gefäß schüttet, damit man die kurze Vibration des Geräusches mitbekommen kann.

Graphical User Interface

Die Aufgabe 3 besteht darin, dass wir eine Inspirations App aufbauen sollen, womit sich Künstler inspirieren lassen können. Ziel der Aufgabe ist, ein Blick über die GUI Sprache zu haben, wie man sie verwenden und auf welche Stelle der Apps sollen sie angeordnet werden. Prof. Müller hat uns ,,Human Interface Guidelines” Guide für Anfänger empfohlen, was viel geholfen hat und ich habe dadurch gelernt, dass die Gestalter die Tastatur und Bars nicht nach eigener Bevorzugung sondern nach bestimmer Regel aufbauen sollen. Für uns ist es am Anfang ziemlich schwierig, die Standard App zu kriegen, wir haben die search bar und Navigation Bar nicht an die richtige Stelle gesetzt und die Karte die wir benutzen ist auch nicht standard, unsere Idee ist zwar gut aber die erste Umsetzung wird stark kritisiert, nachher haben wir die App komplett neu aufgebaut und uns streng an die Regel gehalten. Ich muss zugeben, dass eine App aufzubauen viel komplizierter ist, als ich dachte, selbst wenn wir als Anfänger nicht über Logik hinter den Tabs überlegen müssen, allein die richtige GUI Sprache zu kriegen ist auch nicht einfach, die häufig verwendete Functions bei Apps haben schon standard icons, man kann nur die benutzen, und selbst erfundene icons können meistens nur zur Verwirrung führen. die Stelle von Toolbar und Tabbar bleiben bis heute noch ein Mythos für mich.

1000 Worte

Aufgabe

bei der Aufgabe 1000 Worte sollen wir einen Prozess ohne Worte beschreiben. Technische Prozeduren und Industrie Verarbeitungsprozesse werden vom Prof. Müller empfohlen.

Herausforderung bei der Aufgabe ist - geeignetes und machbares Thema auszuwählen. - eigene bildliche Sprache entwickeln, welche für die Zuschauer auch verständlich ist. - die Reihenfolge von Erzählung der Geschichte aufzubauen. - Selektion und Betonung über die Information, wie viele Details soll ich bei meinem Schaubild behalten, damit die Informationen übertragen werden können und die Zuschauer können auch die gezeigten Objekte oder Aktion erkennen. Es soll weder zu konkret noch zu abstrakt sein. - Mit statischen Bilder dynamischen Zustand darzustellen, z.B die mechanische Bewegung der Maschine, die Drehung der Objekte, oder den Lauf der Zeit. - Scope Probleme, welche Schritte soll man detaillierte zeigen und welche soll man überspringen, damit der ganze Prozess klar ist und das große Image nicht verloren geht.

Auflösung

Themaauswahl

die Themenauswahl hat sehr lang gedauert, ein interessantes Thema finde ich schwierig zu visualisieren, das für mich machbare Thema finde ich nicht spannend genug. ich habe am Ende den Prozess von Papermaking als Thema ausgewählt, der Prozess ist kompliziert genug und es ist auch die Vier Erfindungen von China, welche ich auch interessant finde.

Betonung der wichtigen Information

ich habe das Schaubild nur mit einer sehr einfachen Linie gezeigt, Werkzeug nur mit schwarzen Linien und für Material habe ich Farbe verwendet, damit sie Schwerpunkt des ganzen Bildes sein können.

Selection über die Information

ich habe außerdem den Bearbeitungsprozess detailliert gezeigt und den Vorbereitungsprozess nur global gezeigt.

Visualisierung der Auflösungsprozess

Die Auflösung der Materialien im Wasser ist ein Schwerpunkt für mich, ich habe lange überlegt und dann mit einer Lupe gearbeitet.

Fazit

Der Kurs ist sehr intensiv und umfangreich, wir haben durch den Kurs einen runden Einblick auf Interfacedesign gehabt. Durch eigene Projekte kann man sehr viel lernen, was man beim Buch lesen nicht lernen kann. Der Arbeitsprozess ist auch spannend, die letzte Arbeit kann total anders als die erste Idee sein, man lernt im Prozess durch eigenes Nachdenken und die Vorschläge des Professoren und Studienkommilitonen, auf die seine eigene Idee zu verzichten oder zu verbessern. Ich habe auch dadurch viel gelernt, die Arbeit der anderen zu analysieren und zu kritisieren. Ich mag jedes Projekt von diesem Kurs, nur ist es ein bisschen Schade weil wir für jedes Projekt nur quasi drei Wochen Zeit haben, es ist leider zu kurz um ein Thema tiefgehend zu bearbeiten, ich habe in den Ferien deswegen noch ein paar Bücher gelesen, um ein besseres Verständnis zu den Themen wie Screen Typographie und GUI zu erhalten, als eine Anfängerin gibt es tatsächlich noch viel zu lernen.