DIGITALES BUCH

Aufgabe

Es sollte eine digitale Fassung eines Buches dargestellt werden.
Die Darstellung sollte exemplarisch anhand von mindestens vier Screens in zwei verschiedenen Formaten dargestellt werden.
Screenvorgabe 1: Querformat, 1024 x 768 px (XGA)
Screenvorgabe 2: Hochformat, 240 x 320 px (QVGA)

Die Screens sollten allerdings nicht nur die Inhalte des Buches wiedergeben, sondern ebenfalls ein Navigationskonzept beinhalten, mit der Inhalte des Buches erschlossen werden können.

Lesbarkeit und Klarheit der Darstellung waren die wichtigen Kriterien bei der Bearbeitung der Aufgabe.

Konzept

Wir haben uns für die Buchreihe „Der Wüstenplanet“ (eng. Dune) entschieden. Zunächst ging es für uns darum, ein Design-Konzept zu entwickeln, welches beide Screengrößen abdeckt und wirkungsvoll ist.

erste Entwürfe

Nach der ersten Konsultation haben wir uns für das Thema des Weltraums und den Linien entschieden, die die Wüste darstellen. Nun bestand die Schwierigkeit darin, Text und Bilder zu kombinieren, sowie die richtige Schrift für den Fließtext zu finden. Viele Schriften sind nicht gut gehinted, weshalb diese bei einer kleinen Screengröße und hohem Zoom bis zur Unkenntlichkeit verschwimmen. Am Ende haben wir uns hier für die „Inter“ entschieden, eine sehr solide und oft gebrauchte Schrift im Bereich von Bildschirmen.

Beim großen Screen hatten wir wenig Probleme, hier war das Layout schnell gefunden und wir hatten einige Ideen dieses in verschiedenen Screens darzustellen. Ebenfalls hatten wir uns für eine Kapitelübersicht als Main-Navigation entschieden, um ebenfalls die Reise, die im Buch beschritten wird, darzustellen.

Querformat, 1024 x 768 px (XGA)

Die Schwierigkeit bestand nun darin, dieses Konzept gekonnt auf die kleine Screengröße anzuwenden.

Die Besonderheit bei unserem Design ist die Verstellbarkeit des Modus, wir haben zum einen den Dark-Mode und zum anderen den Light-Mode, je nach Präferenz. Hier sieht man die Stärke unseres Designs, da unser Layout in beiden Modi funktioniert. Reflektiert betrachtet empfinden wir den Dark-Mode allerdings als etwas passender, thematisch sowie visuell.

Hochformat, 240 x 320 px (QVGA)

Übersicht über die Entwicklung des digitalen Buches „DUNE“

DIE APP

Aufgabe

Es sollte eine App für iOS oder Android entwickelt werden, die Designer in ihrer alltäglichen Arbeit unterstützt. Die App sollte fokussiert sein und nicht allzu komplex werden.

Hier sollten wir am Ende eine statische Screen-Sequenz präsentieren. Zusätzlich zu dem sollten wir einen Programmablaufplan (Flow-Chart) zu unserer App vorstellen.

Konzept

Eine App, die Designschaffende unterstützt – Wie cool wäre es, man ist in der Stadt unterwegs, sieht ein cooles Graffiti, Blumen nebeneinander und sonst jegliche Kombination aus Farben, die einen inspiriert – und mit nur ein paar Klicks hat man seine persönliche Farbpalette, die man auch noch in Adobe weiterverwenden kann? Genau aus dieser Idee ist unsere App „Pipettchen“ entstanden. In unserer App kann man ein Foto aufnehmen oder ein bereits Vorhandenes hochladen und dieses in Bezug auf dessen Farben analysieren und diese als Farbpalette abspeichern und in seine CreativeCloud hochladen.

Diese App haben wir für iOS entwickelt.

1. Entwurf

Im ersten Entwurf ging es lediglich darum, für uns zu visualisieren, was möchten wir überhaupt machen und welche Funktionen sind essenziell für unsere App.

2. Entwurf

Im zweiten Entwurf hatten wir dann auch unseren App-Namen gefunden und eine grobe Farborientierung. Hier sind bereits erste Screens entstanden, wie die Main-Navigation mit Tab-Bar, die Fotofunktion, die Palettenübersicht, sowie die Accountübersicht. Diese waren nun der Ausgangspunkt für weitere Entwicklungen.

3. Entwurf

Zur Weiterentwicklung haben wir uns nun die Frage gestellt, was ist die Hauptfunktion unserer App? – Wo soll der User starten? – Hier haben wir uns Shazam als Vorbild genommen. Bei Shazam liegt die Hauptnutzung darin, ein Lied, welches derzeit spielt, schnell zu erkennen und zu finden. Bei Pipettchen soll man Farben, die man gerade sieht schnellstmöglich in eine Palette verwandeln können, daher haben wir uns für die Kamerafunktion als Startscreen entschieden, damit der User ohne Zeitverlust die Farben im Bild festhalten kann. In diesem Entwurf haben wir uns dann das erste Mal intensiver mit dem Look von iOS beschäftigt, den Schritt von Entwurf 2 zu Entwurf 3 sieht man daher in Bezug auf Look-A-Like deutlich.

Weiterhin sind wir tiefer in die konzeptionelle Arbeit gegangen und haben genau aufgelistet, was für Screens unsere App eigentlich benötigt und welche Schritte man bis zur fertigen Palette überhaupt gehen muss. Auch haben wir weitere Funktionen ergänzt, wie z.B. das Bearbeiten einer Palette oder die Anpassung der Profildaten.

Eine Schwäche des dritten Entwurfs ist jedoch die noch sehr große Lücke zwischen unserem Design und dem Style von iOS. Viele Buttons und Funktionen haben weder die richtige Position auf dem Bildschirm, noch die richtige Größe oder Optik.

Bis zum FINALEN ENTWURF

In den weiteren Schritten bis zum finalen Ergebnis haben wir uns vor allem mit den Guidelines von iOS beschäftigt, da dieser Punkt sich während der weiteren Entwicklung weiterhin als größte Schwäche des Designs darstellte. Durch die Bereitstellung von Apple-Designelementen auf Figma konnten wir dann jedoch Step-by-Step unsere App ausbauen, verändern und teilweise auch Screens verwerfen bzw. komplett umstrukturieren.

Eine große Veränderung gab es dann nochmal in dem grundsätzlichen Aufbau unserer App, durch den Denkanstoß „Was will eure App denn? Es geht um Farbpaletten oder nicht?“ haben wir den Startscreen so angepasst, dass man nun mit der Übersicht der Farbpaletten starten und sich hier entscheiden kann, eine neue anzulegen. Möchte man eine Neue hinzufügen kommt man nun zuerst auf die Galerie und hat hier die Möglichkeit ein Bild auszuwählen oder ein neues aufzunehmen. Daraufhin vergibt man einen Namen für die Palette und kann dann Farbfelder hinzufügen. Danach gelangt man zum ausgewählten Bild und kann mit Hilfe einer Pipette die gewünschte Farbe extrahieren. Mit dem Tool „Rastern“ kann man die Auflösung des Bildes minimieren und Farben werden gemischt und zusammengefasst, dies macht die Auswahl der Farben leichter bzw. simplifiziert das Bild und den Prozess stark. Nach Beendigung der Farbauswahl kann man nun die Palette speichern oder Farben konkret anpassen in Bezug auf Helligkeit, Sättigung und Dynamik.

Danach gelangt man wieder zur Palettenübersicht, bei der man Paletten löschen, neuanlegen oder bearbeiten kann. Ebenfalls haben wir die Profilansicht erweitert und angepasst.

Flowchart

Fazit

Am Ende sind wir sehr zufrieden mit dem Ergebnis, anfangs hätten wir nicht gedacht, wie viele Details es benötigt, um an iOS heranzukommen, ebenfalls ist uns auch eine gewisse Inkonsistenz bei iOS aufgefallen, was die Entwicklung des Designs etwas erschwert hat, da selbst bei Applegeräten, die Richtlinien nicht immer strikt verfolgt werden. Wenn wir auf den Anfang der App zurückschauen, sehen wir, wie wenig iOS drinsteckt und wie sehr wir uns weiterentwickelt haben.

Übersicht in Figma über die Entwicklung von „Pipettchen“ (GUI)

FAZIT (GRUPPENARBEIT)

Unsere Gruppenarbeit lief sehr gut. Obwohl wir beide das erste Mal Figma benutzt haben, hat die Kommunikation und die Zusammenarbeit über Figma sehr gut funktioniert. Nach dem ersten Projekt, welches in der Gruppe bereits gut lief, haben wir uns für eine weitere Zusammenarbeit bei der zweiten Aufgabe entschieden. Wir konnten uns stets gutes Feedback zu unseren Ideen geben und haben konstruktiv zusammengearbeitet. Ein sehr ähnlicher Anspruch an die Qualität hat uns sehr geholfen, ein Projekt am Ende zu erhalten, mit dem wir beide zufrieden sind.

1000 WORTE

Aufgabe

Hier sollten wir eine komplexe Regel bzw. ein komplexes Regelwerk aussuchen und in einer Informationsgrafik darstellen. Die Darstellung durfte keinerlei Text enthalten. Die Regeln sollten hierbei möglichst deutlich, klar und prägnant kommuniziert werden.

Empfohlen waren hier Spiel- oder Verhaltensregeln.

UNO von Jannes

Für die Regelerklärung ohne Worte habe ich mich für das Gesellschaftsspiel Uno entschieden. Das Prinzip von Uno ist recht geläufig, ist es Dir lieber Lesender das nicht, schau einfach weiter unten, da erkläre ich das Prinzip ganz ohne Worte.

1. Entwurf

Im ersten Entwurf hatte ich zwei Ideen, zum einen die Spielansicht mit anderen Spielern am Tisch, die zweite Idee war eine Art Verlauf, welche Karten auf welche folgen können und welche nicht. Die zweite Idee habe ich allerdings verworfen, sie war ein spannender Ansatz und wahrscheinlich als Ergänzung eine schöne Erweiterung, allerdings hat diese wenig bis gar nicht den Spielverlauf erklärt und ebenfalls schnell verwirrend, vor allem für Spieler, die Uno zum ersten Mal spielen.

2. Entwurf

Hier habe ich mich der Weiterentwicklung meiner ersten Idee gewidmet. Im Vergleich zur ersten Idee ist hier bereits einiges passiert. In der Weiterentwicklung ging es bei mir zunächst darum mein Schaubild zu vereinfachen, d.h. die vielen Pfeile in den verschiedenen Farben zu entfernen und den farbigen Hintergrund ebenfalls zu verändern, um den Hauptfokus auf die Karten zu legen und dem Betrachter das Gefühl von Ruhe und Aufgeräumtheit zu vermitteln. Mein erster Ansatz wollte bereits zu viel auf einmal erklären, daher habe ich dieses um gleich sieben weitere Schritte ausgebaut.

In den ersten vier horizontalen Abschnitten erkläre ich den Spielverlauf. Im ersten Teil haben wir die Ausgangssituation, die Uhr stellt die Richtung des Spielverlaufs dar, sowie die Anzahl der Karten, die jeder Spieler auf der Hand hat. Durch Transparenzen wir verdeutlicht, welche Karten man im aktuellen Spielzustand legen kann; veranschaulicht wird dies ebenfalls im zweiten Teil. Im dritten Teil ist das Spiel bereits im Gange und die Regel zum Sieg wird in den letzten beiden Teilen gezeigt.

Im unteren Teil der Infografik werden dann noch die vier Sonderkarten erklärt.

Finales Ergebnis

Vom ersten bis zum zweiten Entwurf ist ja bereits viel passiert, vor allem viel Gutes, nun ging es für mich in die Detailarbeit. Der Hintergrund war vom Kontrast noch zu dominant, weshalb das Grau ein leichteres Grau mit einem sanften Blaustich wurde, ebenfalls benutze ich das flächige Grau nun auch um Zusammenhänge darzustellen, somit werden die ersten Teile auf einem grauen Feld dargestellt, da dies der Spielverlauf ist und die Sonderkarten erhalten jeweils ein eigenes Feld. Die Transparenzen, sowie die aufgefächerten Handkarten wurden nun durch eine übersichtlichere und ruhigere Darstellung ersetzt, nun sieht man anhand von Pfeilen oder Kreuzen, ob eine Karte gelegt werden kann oder nicht.

FAZIT - 1000 Worte

Anfangs dachte ich, warum ich nur Uno ausgewählt hatte, da es mir zunächst als sehr komplizierte Aufgabe erschien, die ganzen Regeln in prägnanter Form und ohne Worte darzustellen. Doch nach einer intensiven Konzeptionsphase bin ich dann doch erstaunt, welches Ergebnis ich erzielen konnte, vor allem nach den Konsultationen und den daraus resultierenden Vereinfachungen des Schaubilds haben mich begeistert.

DAME von Tamara

Ich wollte die Regeln des Spiels „Mühle“ visualisieren. Ich habe das Spiel immer mit meinem Opa gespielt und finde, dass es eins der unterschätztesten Strategiespiele ist.

Bei meinem ersten Entwurf ist mir aufgefallen, wie komplex die Darstellung werden kann, spätestens bei der Möglichkeit zu springen ab 3 Spielfiguren.. Die Entwicklung und gleichzeitig die Vereinfachung meiner „Spielanleitung“ lässt sich sehr gut von meinem ersten Entwurf zum finalen Ergebnis erkennen.

1. Entwurf

finales Ergebnis

KURSFAZIT Jannes

Der Kurs hat mir neue Seiten und die Liebe zum Detail im Bereich Interface aufgezeigt. Der Umgang mit Schrift am Bildschirm sowie Navigationselementen und deren Einsatz – mit welcher Präzision diese eingesetzt werden müssen, um ein funktionierendes und verständliches Interface zu schaffen. Vor allem begeistert hat mich die Aufgabe der App-Entwicklung, da man hier in selbstständiger Arbeit und engfolgenden Konsultationen seine App kritisch betrachtete und sich das Konzept stets im Prozess befand. Hier habe ich gelernt, wie wichtig Details für eine realistische und betriebssystemnahe Umsetzung eines Designs sind.

Kursfazit Tamara

Dieser Kurs war mein erster Berührungspunkt mit dem Interfacedesign und hat mich vor viele Herausforderungen und Fragen gestellt, die ich davor immer als gegeben oder selbstverständlich gesehen habe. Plötzlich musste ich mich damit auseinander setzen, ob die Schriftarten lesbar sind, die Bildschirmgrößen und die Darstellung berücksichtigen und mich fragen wie eine gute Navigation durch eine App funktioniert. Am meisten hat mich deshalb die Gestaltung der eigenen App begeistert, diese immer benutzerfreundlicherer zu gestalten. Auch die Übung die wir dazu vorher gemacht hatten und bei welcher wir uns erinnern sollten, wie eine App aufgebaut ist die wir oft benutzen, fand ich sehr interessant und hat mir gezeigt, wie selbstverständlich für uns Interfacedesign ist und was ein gutes von einem unverständlichen unterscheidet.