Aufgabe

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 wichtigen Kriterien bei der Bearbeitung der Aufgabe.

Die Aufgabe soll in Zweierteams bearbeitet werden.

Vorlage Für diese Aufgabe wurden wir in Zweierteams eingeteilt. Die Einteilung durch Prof. Boris Müller ergab Zozek Germiany als Teampartner. Zusammen entschieden wir uns für eine Kochbuchreihe und speziell für die Ausgabe „Kochen mit Kräutern“ von Anne Wilson.

Zuerst analysierten wird das Kochbuch und stellten fest, dass es keine Struktur besitzt. Es gab kein Inhaltsverzeichnis oder eine besondere Reihenfolge der Rezepte. Die Rezepte sind in drei Schwierigkeitsstufen eingeteilt, wobei es in dieser Ausgabe nur Rezepte der Stufe 1 und 2 gab. Der Aufbau der einzelnen Rezepte war hingegen mehr oder weniger identisch und variierte nur in der Anzahl der Schritte und Fotos.

Umsetzung Leider hat die Zusammenarbeit mit Zozek nicht geklappt und wir haben jeweils eine eigene Version erstellt.

Copyright

©Ben Schmitt

Bei dieser Aufgabe stand unter anderem die Lesbarkeit der Schrift im Vordergrund. Daher habe ich mich zu Beginn mit einer Schriftrecherche befasst und verschiedene Schriften ausprobiert. Im Verlauf der Aufgabe habe ich die Schrift mehrmals gewechselt und mich am Ende für die Ubuntu entschieden. Sie ist modern, besitzt sehr viele Schriftschnitte und ist für den Bildschirm optimiert. Als Auszeichnungsschrift für Überschriften habe ich die PT Serif verwendet.


Copyright

©Ben Schmitt

Der Startscreen besteht aus zwei Bereichen, links der Navigationsbereich und rechts die Rezeptvorschau. Der Benutzer hat in der Navigation die Möglichkeit, die Rezepte nach seinen Vorlieben zu filtern, wodurch eine Rezept-Liste entsteht, die in drei weitere Bereiche unterteilt ist. Aus dieser Liste wählt der Benutzer ein Rezept aus und erhält sofort auf der rechten Seite eine Rezeptvorschau, inklusive Bild, Zutatenliste, Kochdauer und Personenanzahl. Durch die Listennavigation und die Rezeptvorschau kann der Benutzer sich sehr schnell das passende Rezept aussuchen. Um sich ein Rezept anzeigen zu lassen, drückt der Benutzer auf den grünen Pfeil oder schiebt die Rezeptvorschau nach links, wodurch die Anleitung erscheint.


Copyright

©Ben Schmitt

In der Rezeptansicht hat sich die Vorschau nach links verschoben und die Anleitung eingeblendet. Durch klicken auf einen Schritt in der Anleitung oder ein Foto, werden die Fotos vergrößert und der aktuelle Schritt hervorgehoben. Es war mir wichtig, dass kein Inhalt gescrollt werden muss, dadurch könnten Zutaten beim Einkaufen vergessen werden, weil sie nicht dargestellt werden. Zusätzlich könnte während des Kochens das Berühren mit schmutzigen Fingern verringert werden, da nicht gescrollt werden muss. Wenn die Zutatenliste einmal länger sein sollte, wird das Bild verkleinert und dieses durch einen Klick vergrößert.


Copyright

©Ben Schmitt

Das digitale Buch hat ein einheitliches Erscheinungsbild. Die Farben sind dabei an die Natur angelehnt und entsprechen dem Buchthema „Kräuter“. Zusätzliche Funktionen sind eine abhängige Zutatenliste von der Personenanzahl, welche über + und – geändert werden kann. Außerdem kann für seine Lieblingsrezepte ein Lesezeichen erstellen.


Copyright

©Ben Schmitt

An die Version für den kleinen Bildschirm stellte ich die gleichen Ansprüche. Leider sind nicht alle umsetzbar – z.B. ist es nicht möglich, ohne Scrollen auszukommen. Das Erscheinungsbild, die Funktionen und die Navigation sollten aber identisch sein, damit der Benutzer sich so einfach zurecht finden kann, wie in der großen Version.


Aufgabe

Es soll ein Brainstorm-App für das iPhone realisiert werden. Das App soll also eine Gruppe von Designer / Entwicklern bei der Generierung von Ideen unterstützen. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden.

Die Applikation kann unter Umständen über das technisch Machbare hinausgehen - wichtiger ist die Ausgestaltung des User-Interfaces. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr.

Das Ziel ist, einen möglichst iPhone-konformen Entwurf zu erarbeiten. Daher soll weitesgehend die standardisierte iPhone-GUI eingesetzt werden. Die Entwürfe sollen 320 x 480 Pixel groß sein - ob horizontal oder vertikal spielt dabei keine Rolle. Zusätzlich zur GUI soll ein Programmablaufplan (Flowchart) skizziert werden.

Umsetzung Als erstes habe ich mich damit auseinandergesetzt, was Brainstorming bedeutet und worin die Vor- und Nachteile bestehen. Dabei habe ich mir überlegt, wie ich das klassische Brainstorming in der Gruppe auf das Smartphone übertragen kann.

Bei der Recherche stellte sich heraus, dass das klassische Brainstorming mehrere Schwächen hat.

1. Die Gruppenmitglieder blockieren sich gegenseitig, weil nur eine Person zur Zeit reden kann.
2. Meinungen und Äußerungen beeinflussen die anderen Teilnehmer
3. Die Teilnehmer können oder wollen ihre Meinung nicht frei äußern, z.B. weil der Chef oder Vorgesetzte mit im Raum sitzt.

Diese Probleme wollte ich mit meiner Brainstorming-App lösen.

Die App-Idee besteht darin, einer MindMap-App eine Benutzerverwaltung zu geben, in der die Benutzer zur Ideenfindung eingeladen werden und anonym die MindMap bearbeiten. Die anderen Teilnehmer wissen nur wie viele Personen teilnehmen, aber nicht wer. Bearbeitet werden können bestehende MindMaps oder der Benutzer beginnt mit einer neuen leeren MindMap.

Bei der Bearbeitung der Aufgabe war das Ziel, einen „iPhone-konformen Entwurf“ zu entwickeln. Daher habe ich mich zu Beginn mit den Richtlinien für Entwickler bei Apple informiert und im Internet zu diesem Thema recherchiert. Die Richtlinien seitens Apple sind dabei sehr klar, eindeutig und verständlich, wie man eine App fürs iPhone gestalten soll.

Bei meinem Entwurf habe ich mir die Freiheit genommen, ein eigenes Farbklima zu erstellen und auf die Standart-Elemente von iOS zu übertragen. Dadurch entsteht eine eigenständige App, die aber trotzdem eindeutig als iPhone-App wiedererkennbar ist. Die Anordnung, die Bezeichnung und Struktur der Elemente entsprechen den iOS-Richtlinien. Die wichtigsten Elemente habe ich immer orange hervorgehoben.

Im zweiten Screenshot ist die Hintergrundfarbe im Kontrast zu den Eingabefeldern zu dunkel. Ein hellerer Hintergrund würde aber nicht mehr zum dunkelblau passen.


Es soll eine akustische Begebenheit (kein Musikstück!) in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Einzige Einschränkung: es soll keine Bildschirmorientierte Lösung entwickelt werden. Falls möglich soll die akustische Begebenheit aufgezeichnet und auch präsentiert werden.

Umsetzung Beim Klangbild habe ich mich für einen Ausschnitt eines Urwaldgeräusches entschieden. Es besteht aus verschiedenem Vogel-Gezwitscher und Affengeschrei. Durch die ganze Aufnahme zieht sich ein Grundgeräusch in Form von Grillengezirpe. Ich habe bei der Aufnahme nur die ersten 1.15 min betrachtet.

Das Problem bei diesen Klängen bestand darin, dass sie ausgesprochen kurz und meistens kürzer als eine Sekunde lang sind. Dafür kamen einzelne Klänge mehrmals vor und konnten Gruppen zugeordnet werden.

Daher entschied ich mich, zunächst alle Klänge auf einer Zeitleiste zu erfassen. Das Programm Audacity war hierfür sehr gut geeignet. Ich habe mir den Sound bis zu 50 Mal angehört und jedes Geräusch markiert. Das hilfreiche an dieser Herangehensweise dabei ist, das Audacity die Markierungen in einer Textdatei exportieren kann. Diese enthält alle Zeitpunkten, die man dann z.B. in Processing auslesen und verarbeiten kann.

Herausgekommen ist dabei folgendes:




Das Klangbild, welches sich aus diesen Daten ergibt, besteht aus Halbkreisen, deren Durchmesser dem Abstand zwei gleicher Klänge entspricht. Die Linien im Hintergrund entsprechen Klängen, die keiner Gruppe eindeutig zugeordnet werden können. Die Farbwelt ist dem Dschungel nachempfunden. Zudem habe ich mich entschieden, Halbkreise oben und unten anzuordnen. Dadurch lassen sich die einzelnen Klänge besser nachvollziehen.


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.

Die Aufgabe soll in Zweierteams bearbeitet werden.

Diese Aufgabe habe ich mit zusammen mit Lennart Hildebrandt bearbeitet.

Ideenfindung Zum ersten Treffen präsentierten wir mehrere Ideen, unter anderem zum Naturschutz und unserem abschließenden Thema: „der Strassenfeger“, Berlins soziale Straßenzeitung. Bei unseren Ideen war es uns wichtig, etwas Gemeinnütziges, Brauchbares zu entwerfen.

Besuch Straßenfeger Bei unserer Recherche über den Strassenfeger fanden wir sehr viele Informationen auf der Internetseite des Strassenfegers und in Zeitungsartikeln. Am informativsten war der direkte Kontakt mit der Redaktion und der Besuch des Strassenfegers. Details und Besonderheiten haben wir nur im direkten Gespräch erfahren. Der Besuch beim Strassenfeger war auch ausschlaggebend für unsere optische Umsetzung als handgezeichnete Variante. Diese wirkt persönlicher und direkter, genauso wie der Strassenfeger und seine Redakteure, Verkäufer und Menschen.

Technik Die handgezeichnete Variante ist sehr aufwendig. Zuerst haben wir beide zusammen die einzelnen Symbole entwickelt und gezeichnet. Anschließend diese gescannt am Computer zusammen gesetzt und den Entwurf ausgedruckt. Den Ausdruck hat Lennart anschließend komplett mit durchsichtigem Zeichenpapier abgepaust. Dieser Schritt war nötig, um einen einheitlichen Zeichenstil und gleiche Strichstärke zu erhalten. Zum Schluss wurde wieder alles gescannt am Computer zusammengesetzt und gefärbt. Trotz des großen Aufwands und technischer Probleme hat diese Arbeitsweise uns beiden sehr viel Spaß gemacht und wir sind beide sehr zufrieden mit dem Ergebnis.

Ohne Worte Unser Ziel war es, ein Plakat zu entwerfen, welches ohne Erklärung auskommt. Problematisch war es dabei, eindeutige Icons für die unterschiedlichen Personen zu finden. Welches Symbol steht z.B. für einen Obdachlosen, einen Arbeitslosen oder armen Menschen, ohne diesen zu diskriminieren. Unser erster Entwurf hat sich im Test mit Testpersonen leider als absoluter Reinfall herausgestellt. Sowohl unsere Symbole, als auch die Struktur haben nicht funktioniert. Anschließend haben wir unsere Symbole und unsere Struktur komplett überarbeitet. Der anschließende Test funktionierte sowohl bei der Testperson als auch in der Abschlusspräsentation im Kurs.