In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Dokumentation zu den Übungen des Kurses, sowie Dokumentation zum Semesterprojekt mit dem Song „Touch The Sky“ von Julie Fowlis.
Die Aufgabe bestand darin, eine selbst gewählte Sequenz grafisch zu notieren. Grundsätzlich fand ich die Aufgabe einfach, aber das Zählen, wie oft eine Tonfolge hintereinander auftritt, bereitete mir irgendwann große Schwierigkeiten. Außerdem ist mir aufgefallen, dass je mehr man sich auf eine bestimmte Tonfolge konzentrierte, die Töne, die nur einmal vorkamen, in den Hintergrund traten und man sie nicht mehr wahrnahm.
Als wir dann Farben verwenden durften, fand ich das hilfreich, da man durch Verläufe und Transparenz bestimmte Töne besser darstellen konnte. Die Auswahl der Farben war schwieriger, da ich bei diesem Song nur verschiedene Grautöne im Sinn hatte. Deshalb entschied ich mich schließlich für dunkle Braun-, Blau- und Grüntöne. Sie spiegeln den technischen und industriellen Charakter des Liedes gut wider.
Sequenz: 0:17–0:50
Die Aufgabe bestand darin, eine selbst gewählte Sequenz unseres Liedes zu notieren. Das war für mich schon ziemlich schwierig. Das Schwierige war, die verschiedenen Instrumente herauszuhören, die dann verschiedene Töne erzeugen. Wenn man das verstanden hatte, war es relativ einfach, das grafisch darzustellen.
Im Gegensatz zur Notation von Alva Noto musste ich meine Vorgehensweise jedoch komplett umstellen. Dort bin ich Ton für Ton vorgegangen und habe für jeden Ton ein neues Symbol eingeführt. Hier bin ich dagegen Instrument für Instrument vorgegangen und habe jedem Instrument ein Symbol gegeben. Anschließend habe ich versucht, die Melodien der einzelnen Instrumente durch Höhe, Tiefe und Dicke darzustellen. Bei dieser Aufgabe haben mir einerseits Notenblätter geholfen, um zu sehen, wer wann spielt. Andererseits habe ich mir Videos von anderen Interpretationen angesehen, um ein Gefühl dafür zu bekommen, was die einzelnen Instrumente spielen.
Ausschnitt aus der Notation!
Bei dieser Aufgabe sollten wir einen Ausschnitt unserer Notation in Form einer Collage darstellen. Das grüne Rechteck zeigt den von mir gewählten Ausschnitt.
©Laura Beier
handgefertigte Collage!
Am Anfang war ich etwas überfordert, aber als ich einen Plan hatte, ging es. Es hat nur viel Zeit gekostet, die einzelnen Elemente auszumessen, auszuschneiden, zu arrangieren und aufzukleben. Am Ende finde ich das Ergebnis gut, vor allem weil es der ursprünglichen Notation sehr nahe kommt.
©Laura Beier
digitalisierte Collage!
Der Digitalisierungsprozess war relativ einfach, vor allem weil ich mich mit Illustrator inzwischen etwas besser auskenne. Was mir noch einmal bewusst wurde, war, wie „unsauber“ ich gearbeitet habe. Zum Beispiel sollten die Rechtecke schon geometrisch sein, waren es aber durch das Ausschneiden mit der Schere gar nicht, was mir erst beim Digitalisieren so richtig aufgefallen ist. Dadurch haben jetzt alle digitalen Elemente einen handgezeichneten Touch, was nicht der Fall wäre, wenn ich es gleich digital gemacht hätte.
©Laura Beier
Der Anfang war etwas schwierig, aber nachdem ich die groben Themen gefunden hatte, war es einfach, sie immer weiter zu verfeinern.
Mein Hauptthema ist jetzt der kulturelle und historische Kontext des Liedes. Dabei lasse ich die Themen weg, die sich mit den Themen der anderen überschneiden, wie z.B. Instrumente, Sprache, Beziehung zu Großbritannien. Mein kleines Thema sind die rothaarigen Menschen.
Song!
Ziel war es, ein Moodboard zu unserem Song zu erstellen.
Wenn ich das Lied gehört habe, hatte ich immer bestimmte Bilder im Kopf, die ich dann zusammengetragen habe. Genauso war es mit den Farben.
Die Farbe Lila habe ich ausgewählt, weil ich eine Farbe haben wollte, die sich von den anderen abhebt und sich nicht auf den Film bezieht. Auf vielen Bildern habe ich schottisches Heidekraut gesehen, weshalb ich Lila in die Farbpalette aufgenommen habe.
©Laura Beier
Kultur & Geschichte!
Hier sollte ein Moodboard zu unserem Story-Thema entstehen. Ich habe zwei Varianten erstellt, da ich die erste im späteren Verlauf noch einmal überarbeitet habe. Mir ist aufgefallen, dass ich bei dem Moodboard sehr dunkel und düster unterwegs war. Da das überhaupt nicht zum Song passt, habe ich bei meiner Story darauf geachtet, das anders zu machen.
Die Farben habe ich gewählt, weil ich das Lied sofort mit Natur verbinde. Deshalb sind die Hauptfarben grün und blau. Dann habe ich noch mit verschiedenen Farbharmonien experimentiert, um noch ein bisschen Kontrast zu bekommen. Natur, Freiheit & die Instrumentierung des Songs ist ja sehr facettenreich und das soll durch die Kontrastfarben deutlich werden. Trotzdem sollten die Farbtöne relativ ähnlich sein und aus vielen Facetten (Helligkeit) bestehen, da dies meiner Meinung nach die Natur am besten darstellt. Außerdem wollte ich die Farben etwas dezenter halten, auch wenn das Lied sehr fröhlich wirkt. Da zur schottischen Natur eher dunklere Töne passen. Außerdem beschreibt der Text eher die typisch schottische Natur, die eher kalt und neblig ist. Zudem verbinde ich Freiheit auch immer mit Rebellion und dazu passen meiner Meinung nach keine hellen, leuchtenden Farben.
Allerdings muss ich sagen, dass diese ersten Farbpaletten sehr dunkel waren. Es war gut, später noch einmal hellere Varianten zu erstellen. Zudem haben wir einige dunkle Farbtöne beibehalten, wodurch der oben beschriebene Vibe nicht verloren gegangen ist.
©Laura Beier
Diese hellere Farbpalette haben wir in der Gruppe gemeinsam erstellt. Dafür haben wir hauptsächlich von jedem etwas aus seinen erstellten Farbpaletten herausgenommen und zusammengefügt.
Auf Basis dieser gemeinsamen Farbpalette haben wir die Farben beim Erstellen des Styleguides noch einmal überarbeitet. Die Styleguides sind weiter unten zu finden.
©Laura Beier
Das Ziel bestand darin, erste Cover-Ideen zu entwickeln, wobei der Fokus auf der Typografie und nicht auf der Gestaltung lag.
Für den Titel „Touch the Sky“ habe ich einmal Cormorant Garamond mit Corinthia und einmal Cinzel Decorative mit Cormorant Garamond kombiniert. Die zweite Version gefällt mir deutlich besser. Cinzel Decorative passt meiner Meinung nach perfekt zu dem Lied, da sie durch die Serifen frei, lebendig und sprunghaft wirkt und mich die Schrift generell an Gälisch erinnert. Corinthia erinnert mich an die Violine im Song, ist mir aber für ein Cover etwas zu viel. Cormorant Garamond macht als Titel zu wenig her, passt aber gut als Untertitel, da die Schrift schlicht und gleichzeitig edel wirkt, was zur Überladenheit des Songs passt. Außerdem hebt sie sich gut vom Titel ab und unterstreicht so dessen Bedeutung. Raleway habe ich auch gewählt, weil sie eine ähnliche Wirkung wie Cormorant Garamond hat, aber besser lesbar ist.
Die 3 helleren Varianten basieren auf der Farbpalette, die wir als Gruppe gemeinsam erstellt haben.
Weitere Cover-Ideen sind unter „Layout-Varianten” zu finden. Dies sind die tatsächlichen Cover, wobei einige Ideen auf den oben gezeigten basieren.
©Laura Beier
Wir haben gemeinsam in der Gruppe 3 verschiedene Styleguides erstellt. Dabei sind die Farbpaletten und die Schriftkombinationen auf einem Blatt separat zu betrachten. Die Farbpaletten sind also nicht den Schriftkombinationen zugeordnet.
Auf Basis der gemeinsam in der Gruppe erstellten Farbpalette haben wir zunächst eine erste Farbvariante erstellt. Anschließend haben wir verschiedene Farbharmonien ausprobiert. Unter anderem eine monochrome. Am Ende hat uns die letzte Farbpalette dann am besten gefallen.
Wir haben die Farbpalette noch um Blautöne erweitert und uns dann endgültig für diese entschieden. Ebenso haben wir uns für die Amoria als Überschrift entschieden. Für den Fließtext und die Unterüberschrift suchten wir eine Schrift, die wie die Montserrat aussieht, aber eine ähnliche Laufweite wie die Raleway hat. Dabei sind wir auf die Poppins gestoßen, für die wir uns schließlich entschieden haben. Vor allem, weil sie sehr gut lesbar ist.
©Laura Beier
©Laura Beier
Die Schriftarten und deren Einstellungen basieren auf dem finalen Styleguide. Dies sind zwei Beispielseiten, bei denen ich einmal mit einem 2-Spalten-Raster und einmal mit einem 3-Spalten-Raster gearbeitet habe.
Im Dokument habe ich mit einem 6-Spaltenraster mit 5mm Spaltenabstand gearbeitet, weil man damit sehr flexibel ist und man daraus leicht ein 2- & 3-Spaltenraster wie auf den Musterseiten machen kann.
Allgemeine InDesign Einstellungen:
- Format 21 x 28 cm
- Anschnitt 3 mm
- Satzspiegel oben 20mm, unten 25mm, innen 20mm, außen 20mm
- 6 Spalten
- Spaltenabstand 5mm
- Grundlinienraster an Seitenkante ausgerichtet
Moodboard!
Die Fotoserie soll sich mit dem Thema Hexen in Verbindung mit Luft und Himmel beschäftigen. Dabei sollen der Hexenbesen und das Fliegen thematisiert werden. Außerdem wollte ich diese Themen zusätzlich in einen modernen Kontext stellen.
©Laura Beier
erste Bilder!
Einige Bilder waren mir zu grün, weshalb sie nicht zu der Stimmung passten, die ich im Kopf hatte. Deshalb habe ich einen Filter darüber gelegt. Dann war ich mir unsicher, ob die Bilder zu monochrom sind. Am Ende habe ich diese Bilder wegen dem Grün-Problem verworfen.
weitere Bilder!
Da mir noch Bilder fehlten und die Farbstimmung der vorhandenen Bilder größtenteils nicht passte, habe ich neue Bilder gemacht.
Dabei bin ich auch mehr vom Thema Hexen weggegangen und habe mich eher den Elementen Feuer und Himmel in Verbindung mit Hexen zugewendet.
Für das Magazin habe ich ein Kapitel (S. 18-27) bestehend aus Kapiteltrenner, Story, freiem Beitrag und Fotostrecke gestaltet. Zusätzlich habe ich das Inhaltsverzeichnis (S. 4-5) und das Cover gestaltet. Anschließend habe ich alles zusammengefügt und exportiert.
Am Anfang hing ich bei dem Cover zu sehr an meinen ersten Entwürfen fest. Es hat mir geholfen, noch einmal freier an die Sache heranzugehen, nachdem ich mir einige Inspirationen angeschaut hatte. Letztendlich ist es doch eine verbesserte Variante der ersten Idee geworden.
Für das Inhaltsverzeichnis habe ich gemeinsam mit den anderen aus der Gruppe Inspirationen herausgesucht. Aus jeder dieser Inspirationen habe ich eine Idee herausgenommen und diese dann kombiniert. Das sah auch schon nach dem ersten Versuch sehr gut aus, sodass ich nur noch Kleinigkeiten verbessert habe.
Wir haben gemeinsam in der Gruppe ein Konzept für den Kapiteltrenner entworfen und dieses umgesetzt. Deshalb gibt es dazu auch keine Varianten. Beim nächsten Mal haben wir uns gegenseitig unsere Kapiteltrenner gezeigt und uns für den entschieden, bei dem uns die Abstände am besten gefallen haben. Alle anderen haben ihre Abstände dann entsprechend angepasst.
Die Story fiel mir am Anfang sehr schwer, da ich keinen guten Stil gefunden hatte. Nach der ersten Feedback-Runde habe ich dann aber die Arbeiten der anderen gesehen. Da ihr Stil ziemlich einheitlich war und nur meiner herausfiel, habe ich mich an ihrem Stil orientiert.
Außerdem hatte ich am Anfang noch eine Illustration drin, da ich dachte, dass wir unbedingt eine brauchen. Die habe ich später entfernt. Zudem hatte ich auch noch einen Infokasten eingefügt. Die anderen wollten diese Idee aufgreifen, was aber dann niemand gemacht hat. Da ich auch ziemliche Schwierigkeiten hatte, diesen grafisch einzufügen, habe ich ihn schließlich rausgeworfen.
Die Story war von Anfang an sehr gut, weshalb es dazu keine Varianten gibt. Die anderen haben sich dann an meinem Stil orientiert, sodass am Ende alle Storys ähnlich aussahen.
Bei der Fotostrecke hatte ich große Probleme, da erst die Fotos nicht gepasst haben und dann die Anordnung nicht frei genug war. Schlussendlich bin ich damit immer noch nicht so ganz zufrieden, aber es hat einfach die Zeit gefehlt.
Beim Setzen mit Flattersatz hatte ich einige Schwierigkeiten. Es ist irgendwie unmöglich, alle Aspekte hundertprozentig umzusetzen. Schlussendlich habe ich so lange herumprobiert, bis ich meiner Meinung nach den besten Mittelweg gefunden habe.
Im großen und ganzen kam ich auch gut mit den Zusammenfügen und Exportieren zurecht. Es war nur nervig dass dann immer mal noch Änderungen kamen (falsche QR-Codes) und ich dann alles noch mal exportieren musste. Außerdem war es sehr hilfreich das Mathias Knoch uns die Preflight Funktion gezeigt hat, wodurch ich im Dokument noch einige Fehler gefunden habe, die mir sonst entgangen wären.
Anfangs hatten wir Probleme mit unserer Schriftart für den Fließtext, da diese nur bei Adobe kostenlos verfügbar ist. Wir haben dann eine kostenlose Schriftart gefunden und heruntergeladen, die aber nur einen Bruchteil der Schriftschnitte enthält.
©Laura Beier
Link zur Figma Seite!
Das ist ein gemeinsamer File unserer Gruppe.
Link zum Prototypen!
Wireframes!
Wir haben ein Raster 6 Spalten mit 120 Margin und 20 Gutter verwendet.
©Laura Beier
Konzeption der Animation!
Als Ausgangsbasis habe ich das Zitat vom Kapiteltrenner sowie die Gesangslinie aus der Notation genommen. Erste Skizzen oder Varianten habe ich tatsächlich gar nicht erstellt. Stattdessen habe ich mir für jede Zeile des Zitats überlegt, was sie aussagt und wie ich sie darstellen möchte. Dann habe ich für jede Zeile ein Zeitfenster von fünf Sekunden gewählt und einfach angefangen zu arbeiten. Wichtig war mir nur, dass sich die Linie wie ein roter Faden durch die gesamte Animation zieht und dass sie immer im Mittelpunkt steht.
Der Plan in meinem Kopf:
- „Where dark woods hide secrets“
- Bäume die etwas verdecken (zb. den Text)
- „And mountains are fierce and bold“
- die Linie soll Berge bauen
- „Deep waters hold reflections“
- die Linie soll in Wasser verschwinden / soll sich im Wasser spiegeln
- „Of times lost long ago“
- die Linie soll sich auflösen
- „I will hear their every story“
- Ausklang, wo nur die Linie zu sehen ist, aber dünner & freier
Animation!
Die Erstellung der Animation fiel mir ziemlich leicht. Da sie auf den Kapiteltrennern basieren sollte, hatte man eine gute Ausgangsbasis, was Farben usw. anging. Ich habe mich dann an meinem Zitat orientiert und zu jeder Zeile eine Szene erstellt. Das Ganze war allerdings ziemlich zeitintensiv.
©Laura Beier
Fertige Online-Anwendung!
©Laura Beier
Die Präsentation ist als Datei im Workspace abgelegt und auf dem Miro-Board zu finden.
Ein Projekt von
Laura Beier
Fachgruppe
KommunikationsdesignArt des Projekts
Keine Angabe
Zugehöriger Workspace
Designgrundlagen 2Entstehungszeitraum
Sommersemester 2025