01.Digitales Buch

Die erste Aufgabe bestand darin, eine digitale Version unseres Lieblingsbuches zu gestalten. Wir sollten mindestens vier Screens erstellen – zwei im horizontalen Format (1024×768) und zwei im vertikalen Format (240×320). Dabei ging es nicht nur um die Darstellung des Inhalts, sondern auch darum, ein Navigationskonzept zu entwickeln, das die Erschließung des Buches erleichtert. Wichtig waren eine klare Struktur und gute Lesbarkeit. Die Aufgabe haben wir im Zweierteam bearbeitet.

Konzept

Meine Partnerin und ich haben zunächst die Aufgabe analysiert und nach einem passenden Buch gesucht, das als Grundlage für unsere digitale Version dienen könnte. Nach einer Durchsicht unserer Bücherregale haben wir uns für „Meaningful Futures with Robots – Designing a New Coexistence“ von Judith Dörrenbächer, Ronda Ringfort-Felner, Robin Neuhaus und Marc Hassenzahl entschieden. Das Buch wurde 2023 veröffentlicht und zeichnet sich durch ein modernes, stilvolles und einprägsames Design aus.

Eine der auffälligsten Eigenschaften des Buches sind die handgezeichneten Illustrationen zum Thema Robotik, die sich auf nahezu jeder Seite wiederfinden. Wir fanden diese Zeichnungen besonders spannend und entschieden, sie auch in die digitale Version zu integrieren.

Typografisch spielten die Designers des Originalbuchs mit Fließtext und Blocksatz, was wir ebenfalls in unserem Design aufgreifen wollten. Eine weitere markante Gestaltungsidee war die Verwendung eines auffälligen, computergenerierten Schriftstils bei jedem Erwähnen des Wortes human, was wir ebenfalls in unsere digitale Umsetzung übernehmen wollten.

Zunächst haben wir die wichtigsten Navigationselemente der digitalen Buchversion definiert und ihre ungefähre Platzierung festgelegt – dazu gehörten der Titel, der Haupttext und Funktionen zur Anpassung der Schriftgröße, Menu Settings und Search Bar. 

Da wir den Stil des Originals beibehalten wollten, haben wir die Buttons im Cartoon-Stil gestaltet, um die verspielte, handgezeichnete Ästhetik des Buches in die digitale Version zu übertragen.

Finale Version des Buches

Letztendlich sieht unser finales Design so aus – in der großen Version für das iPad sowie in der Watch-Version. Wir haben die originalen Farbverläufe beibehalten und die Illustrationen so angepasst, dass sie sich organisch in den Text einfügen. Außerdem haben wir intensiv an der Typografie und Textformatierung gearbeitet, um das ursprüngliche Gestaltungskonzept bestmöglich in die digitale Version zu übertragen.

02. Graphical User Interface

Für die zweite Aufgabe unseres Kurses sollten wir ein Design für eine iOS- oder Android-App erstellen, die Designer*innen im Alltag unterstützt. Die App musste nicht vollständig entwickelt werden, aber die wichtigsten Funktionen sollten gestaltet werden.

App Konzept

Gemeinsam mit meinem Gruppenpartner haben wir überlegt, welche Art von App wir erstellen möchten, und wir sind zu dem Schluss gekommen, dass die Schriftauswahl eine der großen Herausforderungen für Designer*innen ist. Deshalb haben wir entschieden, den Suchprozess zu optimieren und eine App zu entwickeln, die es ermöglicht, Schriften anhand von Fotos oder beliebten Schriftlisten zu finden.

Funktionen

Die Kernfunktionen unserer App sind die Suche von Schriften (Filters für Schrifttypen), das Hochladen von Bildern zur Schrifterkennung, eine Übersicht über beliebte und neue Schriften sowie die Möglichkeit, favorisierte Schriften zu speichern.

In unserem Design haben wir darauf geachtet, dass die App wichtige Informationen zu den Schriften bereitstellt: Name, Lizenzbeschreibung, Kaufmöglichkeit und eine intuitive Navigation, die die Nutzer*innen nicht verwirrt.

Flow-Chart

Um die Struktur der App zu definieren, haben wir zunächst einen Flowchart erstellt, der uns geholfen hat, die wichtigsten Bestandteile festzulegen. Danach haben wir mit der Umsetzung des Designs begonnen.

Farben

Nach der Analyse haben wir uns für diese Farbpalette entschieden. Als Schriftart haben wir TT Neoris Regular und Medium verwendet.

So sieht die Navigation des Apps aus:

Endergebnis

03. 1000 Worte

Für mein eigenes Projekt musste ich eine Infografik erstellen, die Regeln ohne Worte, nur mit Bildern erklärt. Ich fand es spannend, die Regeln für das Verhalten während eines Erdbebens neu zu gestalten.

Meine erste Idee war eine recht komplexe Darstellung: ein Haus, das sich sozusagen unter verschiedenen Erdschichten befindet. Auf jeder Etage des Hauses sollten die Regeln visuell dargestellt werden, die Menschen befolgen müssen, um sicher zu bleiben. Nach der ersten Besprechung wurde jedoch klar, dass die Idee zu aufwendig war und ein minimalistischerer Ansatz nötig ist.

Also habe ich eine Collage erstellt, die ich weiter mit Bildern füllen wollte. Sie war noch nicht fertig, weil ich von vorne anfangen musste. In dieser Collage wollte ich die Regeln möglichst klar darstellen. Nach der zweiten Besprechung wurde mir erneut bewusst, dass die Regeln noch klarer formuliert und die Farben überarbeitet werden müssen.

Finale Infografik

Letztendlich habe ich mich für eine Version entschieden, in der das Erdbeben, der Boden und die gebrochene Erde deutlich dargestellt sind, sodass die Regeln direkt daraus hervorgehen. 

Diese Aufgabe fiel mir schwer, und das ist nicht zu übersehen. Aber ich habe wirklich mein Bestes gegeben, damit es gut aussieht.

Insgesamt bin ich mit dem Ergebnis zufrieden und dankbar für alle Kommentare und Hilfe :)

Fazit

Zusammenfassend kann ich sagen, dass ich mit dem Kurs sehr zufrieden bin. Es war wirklich spannend, die Grundlagen des Interface-Designs kennenzulernen, da ich mich in Zukunft noch intensiver mit diesem Thema beschäftigen möchte. Ich habe viele interessante und hilfreiche Informationen bekommen, die ich in meiner weiteren Arbeit anwenden werde. Außerdem hatte ich die großartige Möglichkeit, in Teams mit kreativen Menschen zu arbeiten, mit denen wir einige ganz gelungene Projekte umgesetzt haben.

Das Einzige, was mir nicht so gut gelungen ist, war die Infografik, aber ich werde weiter daran arbeiten, meine Schwächen zu verbessern.