Digital Media Design

Digital Media Design ist ein Modul, das ich in meinem Medien- und Kommunikationsinformatik-Studium im ersten Semester belege. Dabei erlernt man vor allem den Umgang mit Medien, besonders im Bereich Design und dem Umgang mit entsprechenden Adobe-Programmen.

Bisher habe ich Erfahrungen mit Adobe Illustrator und Adobe InDesign gesammelt.

Ich werden diesen Beitrag im Laufe des Wintersemesters 2021/22, also bis Februar 2022 immer wieder aktualisieren und damit auf dem aktuellen Stand halten.

Alle Themen:

Interface Design

Bei dieser Aufgabe ging es darum, die generelle Zusammensetzung eines Interface kennenzulernen und dabei erste Versuche mit Adobe Illustrator zu starten.

Dafür habe ich mir Interfaces herausgesucht, die sich mit einfachen Formen stilisiert nachbilden lassen.

Firefox

Wenn man sich diese Illustrationen anschaut, stellen sicher viele fest, dass wir nicht einmal die Details des Interface benötigt, um dieses zu erkennen. Die stilisierten Formen reichen aus, damit wir die Applikation erkennen.

Anschließend habe ich mir die Interfaces noch einmal vorgenommen und eine eigene Illustration zusammengestellt. Dafür sollte man je eine Farbe für bestimmte Teile des Interface festlegen. Zum Beispiel dunkelgrau für die Texte, türkis für Knöpfe, blau für Informationen und grün für Bilder. Dabei bin ich bei der Farbgebung mit wenigen Farben in Variationen – also größtenteils blau – vorgegangen, sodass das Bild am Ende harmonisch aussieht.

Dann werden alle drei Dateien in eine neue kopiert und dort dupliziert und skaliert, sodass ein volles Bild entsteht. Die Bilder um 30 Grad gedreht. Zum Schluss wird ein Text eingefügt, mit der am wenigsten verwendeten Farbe unterlegt.

Meine Illustration

Geräusche darstellen

Diese Aufgabe ist nicht unbedingt einfach, dafür aber herausfordernd und interessant. Es geht dabei darum, sich bestimmte Geräusche anzuhören und dann darzustellen, was man gehört hat. In Schwarz-Weiß. Man kann also besonders kreativ mit den Werkzeugen von Illustrator spielen und auch mal die Effekte ausprobieren.

Farbe

Jeder kennt diese Farbräder aus dem Kunstunterricht. Man hat gelb, rot und blau, dazwischen deren Mischfarben orange, violett und grün und außer herum eventuell noch weitere Mischfarben.

Bei der Illustration über die Werkzeuge und das Arbeiten mit Adobe Illustrator, habe ich damit angefangen, meine Grafiken auf einem dunklen Hintergrund in 5 Graustufen darzustellen.

Graustufen

Für eine monochromatische Darstellung habe ich mir verschiedene Blautöne herausgesucht und die einzelnen Grautöne durch das entsprechende Blau getauscht.

Monochromatisch

Zudem habe ich eine mehrfarbige Version erstellt.

Mehrfarbig

Dabei kann man harmonisierende Farben gut mit Adobe Color abstimmen und verschiedene Farbschemen ausprobieren.

Typografie

Typografie beschäftigt sich mit der Gestaltung von Schrift, also verschiedenen Schriftarten. Schriften haben ihre eigenen Merkmale und Unterschiede, wie die Stärke der Striche, Serifen, und so weiter. Um die unterschiedlichen Lettern der Schriftarten zu vergleichen, wird ein Buchstabe gewählt – hier das R. Dann wird der Buchstabe in den verschiedenen Schriftarten mit nur 30% Deckkraft in Adobe Illustrator übereinander gelegt. Dadurch kann einen “durchschnittlichen” Buchstaben aus den Gemeinsamkeiten erstellen und gleichzeitig die Besonderheiten erkennen.

Illustration Typografie

In Adobe InDesign sollte speziell zu einer Schriftart ein Layout erstellt werden. Ich habe mich für die Source Sans Serif entschieden. Dementsprechend habe ich das gesamte Layout in Source Sans Serif beziehungsweise in den verschiedenen Schnitten der Schrift verfasst.

Dafür habe ich zunächst Informationen über Paul D. Hunt (Quelle: Adobe Fonts), den Typografen, der die Schriftart erfunden hat, und über die Schriftart selbst gesammelt und mit in die Spalten des Layout geschrieben.

Zudem habe ich alle Schriftschnitte ausprobiert und aufgeführt, aber auch an passenden Stellen eingesetzt.

Außerdem habe ich mir die Form und Charakteristiken der einzelnen Lettern, den Groß- und Kleinbuchstaben und auch den Ziffern, angesehen und mit den Sonderzeichen, also Schriftsymbolen und Buchstaben anderer Sprachen experimentiert.

Zuletzt habe ich die einzelnen Buchstaben b und g groß aufgezogen und mit einer geringen Deckkraft als grafisches Element in den Hintergrund eingefügt. Passend zum Thema Typografie habe ich ein Zitat von Mark Twain eingefügt, leider habe ich kein Zitat von Paul D. Hunt oder ein Zitat über die Source Sans Serif im Internet gefunden.

Mein fertiges Layout der Source Sans Serif

Illustration zum Thema Corona

Nachdem wir uns nun schon seit fast 2 Jahren in einer Pandemie befinden, wird es Zeit, eine eigene Illustration zu diesem Thema zu schaffen. Ich habe mit hierfür die Top 10 Länder Europas bezüglich der Impfquote herausgesucht.

Dabei werden die gerundeten Werte der vollständig Geimpften Bürger in Prozent (%) angegeben. Die Säulen habe ich mit stilisierten Spritzen veranschaulicht. Leer aussehende Stellen wurden mit ein paar vereinfachten Viren gefüllt. Zuletzt ist der Titel mit den kleinen Cartoons noch etwas freundlicher gestaltet.

Meine Illustration zur Impfquote in Europa

Layout Design einer Zeitschrift

Ich habe mich für das Design einer Wissenschaftszeitschrift entschieden.

Deswegen habe ich ein Layout mit 3 Spalten erstellt, das lediglich in schwarz und blau gehalten ist. Passend zu einem Wissenschaftlichen Artikel habe ich eher schlichte, saubere Schriftarten gewählt. Die Überschrift ist daher in Arial, die Unterüberschrift in Bahnschrift und der Text in Blender Pro (TT). Die Paragraphen enthalten einen Platzhaltertext, den Adobe InDesign selbst erstellen kann. Dieser ist entsprechend eines Wissenschaftartikels im Blocksatz, letzte Zeile linksbündig formatiert.

Zudem ist ein Bild (Quelle: Deutschlandfunk Kultur) eingesetzt worden, dass einem typischen Foto vom wissenschaftlichen Arbeiten entspricht, worauf man also in dem Fall eine Hand im Handschuh sieht, die mit einer Pipette eine Petrischale bearbeitet.

Layout einer Wissenschaftzeitschrift

App Icon Design

Ich habe ein App Icon für eine Pflanzenbestimmungsapp designed. Vorgabe war, dass die Funktion der App, also, dass man ein Foto von einer Pflanze macht, die dann mit Hilfe von Bilderkennung, identifiziert wird, erkennbar ist. Dabei habe ich die Lifestylevariante gewählt, sodass das Icon auch die Leute anspricht, die sich nicht intensiv oder wissenschaftlich mit Pflanzen beschäftigen, sondern spontan ein Foto einer Pflanze schießen.

Zuerst habe ich mir die Icons ähnlicher Apps angesehen. Dabei ist mir aufgefallen, dass viele Pflanzenbestimmungsapps mit P beginnen und dieses dann auch auf ihrem Icon haben. Viele verwenden auch die vier Ecken einer stilisierten Kamera als Rahmen um das P oder eine Blume. Apps, die sich mit Pflanzen beschäftigen sind grün gehalten.

Zuletzt habe ich ein Dokument für eine Präsentation meines App Icons zusammengestellt. Diese enthält das Logo, sowohl in Farbe als auch in Schwarz-Weiß, eine Darstellung in verschiedenen Größen, Anwendungsbeispiele des Logos und eine Erklärung des Konzepts.

Die Präsentation des App Icons

Diese Anwendungsbeispiele lassen sich mit Xcode herstellen. Dafür habe ich das App Icon bei einem Projekt eingesetzt und einen Screenshot des Simulators gemacht. Natürlich kann man für diesen Zweck auch Mock-Ups aus dem Internet verwenden.

Fotobearbeitung

Zu Digital Media Design gehört natürlich auch Fotobearbeitung, vor allem mit Photoshop. Dabei sind besonders Gesichter interessant. Dafür habe ich ein Portrait von unsplash heruntergeladen.

Unsplash hat dabei den Vorteil, dass man alle Bilder frei herunterladen und benutzen darf, zu nicht kommerziellen und kommerziellen Zwecken. Dabei ist keine Genehmigung erforderlich.

Hier das unbearbeitete Portrait:

Nach der Retusche:

Und zu guter Letzt noch mit einem Look darauf:

Animation Bouncy Ball

Gegen Ende des Semesters habe ich meine erste Animation mit Adobe XD gemacht. Ein kleiner Flummiball mit einem süßen Gesicht. Die Animation hat die hier typischen 25 Frames pro Sekunde mit einer Länge von insgesamt 3 Sekunden.

Animation vom App Icon

Nach meinen ersten Erfahrungen mit Adobe XD beim Animieren des Bouncy Ball, habe ich mein eigenes App Icon animiert. Diese Animation hat ebenfalls die hier üblichen 25 Frames pro Sekunde und läuft insgesamt 6 Sekunden. Den Ton dazu habe ich von freesoundslibrary.com heruntergeladen (dies ist der Sound “Blackcap Song“).