Copyright

©Irina Maslennikova

Die erste Aufgabe war, ein Buch für die Veröffentlichung auf digitalen Geräten in den Auflösungen 1024 x 768 Pixel (XGA) und 240x320 Pixel (QVGA) gestalterisch aufzubereiten.

Wir entschieden uns für einen Textausschnitt aus dem Buch „Haben oder Sein“ von Erich Fromm. Dabei handelt es sich um ein populäres, gesellschaftskritisches Sachbuch aus dem Jahre 1976, dessen Inhalt klar, sachlich und nüchtern vermittelt wird. Einzig aus diesem Grund wollten wir uns bei der grafischen Ausgestaltung auf die zur Verfügung stehenden Typografische Elemente konzentrieren und sämtliche Navigations- und Interaktionselemente unaufdringlich und schlicht gestalten und anordnen.

Zur Gestaltung des Layouts:

Schrift

Das Auswählen der Schrift gestaltete sich als eine Herausforderung, denn keiner von uns konnte sich auf Anhieb die Frage beantworten, welche Schrift unserem gewählten Klassiker mit noch immer aktuellem Inhalt gerecht werden kann? Wer sich mit dem Inhalt des Buches befasst, stellt schnell fest, dass etliche Thesen aus geraumer Zeit auf das aktuelle Miteinander übertragen werden können. Diese Tatsache sollte auch bei der Wahl unserer Schriften anklang finden.

„Klassik meets Moderne“ sollte sollte das Ergebnis unserer Suche werden.

Die Wahl für den Fließtext fiel auf Kokila von Microsoft. Diese Serifenschrift hat eine klassische, traditionelle Anmutung, sie wirkt verlässlich, beständig und human. Für die Überschriften wählten wir The Serif, ebenfalls eine Seriefenschrift. Sie hat einen interlektuellen, modernen, sachlichen Charakter. In ihrer Kombination ergaben die Beiden ein harmonisches Bild.

Farbe

Bevor wir mit der Gestaltung loslegten, machten wir uns auf die Suche nach einer Farbkombination, die dem Inhalt keine bestimmte Note verleihen würde, dennoch aber die Übersichtlichkeit des Layouts unterstützt. (…)

Zum Aufbau

Öffnet man das Buch befindet man sich beim Inhaltsverzeichnis. Von dort aus gelangt man entweder durch einmaliges Tippen auf das gewünschte Kapitel oder durch Klicken auf den sich unten befinden Button (Kreiskontur) zum Vorwort bzw. dem zuvor gesetzten Lesezeichen.

Die Navigationselemente im Lesetext: der Scroll-Balken und die hauchdünne Linie am rechten Rand, die als Sammelordner aller markierten Textzeilen dienen, erfüllen nicht nur einen funktionalen Zweck Durch ihre bleibende Präsenz geben diese Navigationselemente dem Layout eine visuellen Rahmen und einen Anhaltspunkt der das Design nicht kippen lässt.

Tippt man einmal auf den Fließtext, erscheint die Seitenzahl auf der Navigationslinie. Dieser verweist auf die Seitenzahl wie sie im Buch(!) vorzufinden ist. Durch das Markieren eines Textabschnittes öffnet sich der Notizbereich, indem wichtige Zitate und Textausschnitte gesammelt werden können. Durch eine integrierte Wischfunktion (nach links: öffnet Notizen; nach rechts: schließt Notizen) können die Vermerke jederzeit ein- und ausgeblendet werden. Möchte der User wissen „wo“ sich die markierten Stellen im Text befinden, tippt man zweimal auf den Fließtext. So werden die ausgewählten Zeilen in Form von Markierungen und Zeilenangaben, die sich am rechten Rand des Scroll-Balkens befinden sichtbar. Möchte der User wieder zurück zum Inhaltsverzeichnis, so muss der oben platzierte Button (Kreiskontur) angetippt werden. Der selbe Button navigiert den sich im Inhaltsverzeichnis befindenden User zur aktuellen Textseite (siehe Zeile 3 - Zum Aufbau).

Mini-Mobile-Variante – 240x320 Pixel

„Viel Inhalt, wenig Platz!“

Bei der Mini-Mobile-Variante war unser Vorgehen nicht ganz so strukturiert wie bei ihrem großen Vorgänger. Bei den ersten beiden Anläufen versuchten wir die Screens der 1024 x 768 Pixel Variante eins zu eins auf die 240x320 Pixel Variante zu transformieren. Doch bei einem solchen Größenunterschied erwies sich dieses Vorgehen als zunehmend uneffektiv, da es an allen Ecken und Kanten zu Platzproblemen kam. Nach und nach versuchten wir der Misere zu entkommen und tasteten uns, trotz beschränkter Möglichkeiten, an eine benutzerfreundliche, aber dennoch konvergierende 240x320 Pixel Version heran.

Zum Aufbau

Die wichtigen Informationen, wie die Seitenzahl inklusive markierten Zeilen, die Notizfunktion und der Zurück-Button sollten optisch nicht vom Inhalt ablenken. Dennoch aber eine Form und Größe besitzen, um aus Sicht der Benutzerfreundlichkeit gute Arbeit zu leisten.

Der Startscreen ist auch hier das Inhaltsverzeichnis. Jeder Screen ist mit zwei Navigationselementen, die sich immer unten rechts befinden belegt. Die beiden Elemente unterscheiden sich durch eine dezente Farbabstufung, bilden jedoch eine optische Fläche. Im Inhaltsverzeichnis kann man zu „Lesezeichen“ oder „Zitate“ navigieren. Die einzelnen Kapitel können über den „Lesezeichen“-Button oder das einfache Klicken auf das jeweilige Kapitel erreicht werden. Befindet man sich inmitten des Fließtextes, hat nun die vordefinierten rechte Fläche die Aufgabe wieder zum Inhaltsverzeichnis zurückzuführen. Kurz – Im Inhaltsverzeichnis navigiert der rechte Button zum Lesezeichen; im Kapitel hingegen navigiert der rechte Button zum Menü. Der beständige „Notizen“-Button ermöglicht – wie in der 1024 x 768 Pixel Variante – auf die markierten Zeilen zuzugreifen und sich einen Überblick zu verschaffen. Markiert wird im selben Verfahren wie beim großen Format auch. Über längeres anvisieren der zu markierenden Zeile wird ein Startpunkt gesetzt, mit dem Lösen des Fingers hingegen der Endpunkt. Aufgrund der Formatgröße entschieden wir uns dafür die Markierfunktion mit einem zusätzlichen Zoomeffekt zu belegen (siehe Screen 7).

Es sollte eine Brainstorm-App für das iPhone realisiert werden. Die App soll also eine Gruppe von Designern / Entwicklern bei der Generierung von Ideen und Entwürfen unterstützen. Die genauen Funktionalitäten konnten in der Konzeptphase entwickelt werden. Das Ganze durfte über das technisch Machbare hinausgehen - der Fokus lag auf der Ausgestaltung des User-Interfaces.

Das Ziel war, einen iOS 8-konformen und gleichzeitig individuellen Entwurf zu erarbeiten. Es sollte die standardisierte iOS 8-GUI eingesetzt werden - mit einer persönlichen Note. Die Entwürfe sollten 375 x 667 Pixel groß sein. Zusätzliche Wireframes sollten den Programmablaufplan verdeutlichen.

Ideenfindung/ Konzept:

Brainstormings und Mindmaps sind oft die ersten Wege zu einer Idee, einem Konzept oder einem Projekt. Beide Kreativitätstechniken leben von dem Zusammentragen möglichst vieler, unterschiedlicher Gedanken und Ideen. Aber wie soll das funktionieren, wenn die Mitdenkenden nicht am gleichen Ort sitzen und wenn die Kreativität durch abstrakte Benutzeroberflächen auch irgendwie eingeschränkt wird?

Als erstes haben wir Research betrieben und uns viele schon vorhandene Brainstorm Apps angeschaut. Unsere Favoriten haben wir uns als App runtergeladen und ausprobiert. Am besten gefiel uns popplet wegen der simplen Handhabung und der Übersichtlichkeit.

IDEALOG ist ein Social-Media-Mindmapping-Tool. Die Mindmaps werden online erstellt und sind für Mitglieder live sichtbar. Als Admin erstellt man ein Projektthema (in unserem Beispiel Campus Ambulanz). Es wird eine kurze Beschreibung bzw. Aufgabenstellung verfasst, damit eingeladene Teilnehmer über die Thematik informiert sind. Dazu werden Unterthemen und ihre Labelfarbe festgelegt an denen die Mitglieder nachher weitere Begriffe anknüpfen können, z.B. Technik - blau. Wenn das Projekt erstellt und die Teilnehmer eingeladen werden, kann der Admin weitere Admins bestimmen. Nur Admins dürfen neue Labelfarben erstellen, damit es nicht zu unübersichtlich wird.

Man erstellt einen neuen Container in dem man auf einem der Punkte an dem aktiven Container drückt. Es entsteht direkt eine Verbindung zu dem Hauptcontainer und man gelangt in den Bearbeitungsmodus. Nun hat man die Möglichkeiten die Labelfarbe zu bestimmen, einen neuen Begriff, einen Kommentar oder eine Bemerkung hinzuzufügen, und Bilder oder Videos hoch zu laden. Wenn man ein Beitrag kommentiert hat, erscheint oben an den Container ein Ausrufezeichen. Sobald ein neuer Container von den Mitgliedern erstellt wurde, macht er sich durch eine pulsierende Animation bemerkbar.

Auf der unteren Navigationsleiste sind zwei Buttons. Auf der linken Seite befindet sich ein Icon für Mitglieder, dort kann man die sich persönlich per Anruf oder Nachricht an sie wenden. Auf der rechten Seite kommt man zum Protokoll, hier kann man den Verlauf nachvollziehen und auch eigene Bemerkungen hinzufügen.

Copyright

©Irina Maslennikova

https://freemusicarchive.org/music/Castello_di_Trokai/X-LION_1007/ALLBIOM_1370

Copyright

©Irina Maslennikova

Wie könnte man Sound visuell darstellen? Dabei gehe ich nicht von animierten Bildern aus, sondern versuche mich am Objekt. Durch ständiges wiederholen und analysieren der Klänge entstehen assoziative Bilder im Kopf. Die Stimmung, das Tempo und die Tonlage versuche ich in eine angemessenen Formensprache zu übersetzen. Es entsteht eine Dreidimensionale Illustration.

Ein Bild sagt mehr als 1000 Worte.

Wie stellt man einen komplexen Sachverhalt ohne Text dar? Ich habe mich an einer Anleitung zu Origami falten versucht und dabei das Programm Illustrator besser kennen gelernt.

Ich faltete und faltete um den Ablauf richtig nach vollziehen zu können. Ich beobachtete die fertigen Objekte und studierte die Formen, um es illustrativ nach zu ahmen. Besonders tricky waren die perspektivischen Verkürzungen, das brachte mich zum verzweifeln.

Obwohl das in keinem Fall meinem eigentlichen Stil ähnelt, bin ich mit dem Ergebnis recht zufrieden.