Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Hof Kommunikationsdesign mehr erfahren

Typo-Zine - Buchstabe L

Dokumentation zu Aufgaben mit dem Buchstaben L und dem Verb laugh.

Transformation

verschiedene Varianten!

Transformation_Punkt-Linie-Fläche.pdf PDF Transformation_Punkt-Linie-Fläche.pdf

Ausarbeitung einer Variante!

Ziel war es, die erste Variante so weiterzuentwickeln, dass am Ende das organische L entsteht. Die Schritte davor sollten etwas verfeinert werden.

Ausarbeitung_Varianten.jpgAusarbeitung_Varianten.jpg

Umsetzung in Figma!

Das erste Bild ist der erste Animationsversuch, bei dem ich mich in Details verloren habe. Das zweite Bild ist das vorläufige Endergebnis und das letzte Bild ist meine Idee für den Druck.

Am Anfang hatte ich das Problem, dass bei der Animation oft „Schatten“ entstanden. Bei den Punkten konnte ich das Problem lösen, indem ich die Punkte in jedem Frame gleich benannt habe. Bei den großen organischen Flächen bleibt das Problem bestehen.

Druck.pngDruck.png
Animation_1.pngAnimation_1.png
Animation_2.pngAnimation_2.png

Endergebnis!

In der weiteren Bearbeitung habe ich noch einen Schritt hinzugefügt & mit der Größe der Punkte gespielt. Am Anfang sind noch nicht alle Punkte vorhanden. Einige kommen im späteren Verlauf hinzu. Außerdem sind die Punkte unterschiedlich groß & werden erst in den folgenden Schritten einheitlich groß.

Die „Schatten“ konnte ich immer noch nicht beseitigen, aber ich konnte sie etwas abschwächen, indem ich die organischen Flächen gruppiert habe.

Das zweite Bild ist das Endergebnis für den Druck.

Animation_3.pngAnimation_3.png
Druck_2.pngDruck_2.png

Ornamente

Die Aufgabe ist mir leicht gefallen und hat Spaß gemacht. Auffällig war, dass bei den Schriften Futura & Rockwell eher geometrische und teilweise symmetrische Ornamente entstanden. Bei den Schriften Garamond & Didot wirkten die Ornamente durch die Serifen edler. Bei den Schriften Mistral & Fraktur entstanden viele unterschiedliche & kreative Ornamente.

Ornamente aus Buchstaben L.pdf PDF Ornamente aus Buchstaben L.pdf

Typografische Komposition

Die Umsetzung der Kompositionen war mit einer selbst gewählten Schriftart viel einfacher als mit der Helvetica, da die Schriftart die Wirkung des Wortes schon stark beeinflusst. Besonders bei meinem Verb „laugh“ fand ich die Verstärkung der Wirkung durch die Schriftart extrem. Ich habe relativ schnell viele passende Schriften gefunden. Bei der Helvetica war es schwieriger, die Wirkung des Wortes nur durch die Komposition zu vermitteln.

Ich hatte Probleme, die Abstände der Buchstaben in den Bögen gleichmäßig zu gestalten. Es half, jeden Buchstaben von Hand auszurichten und nicht durch das Programm.

Schritt 1!
Mein Favourite ist das erste Bild.

Designgrundlagen-1-Schritt 1 - 1.pngDesigngrundlagen-1-Schritt 1 - 1.png
Designgrundlagen-2-Schritt 1 - 2.pngDesigngrundlagen-2-Schritt 1 - 2.png
Designgrundlagen-3-Schritt 1 - 3.pngDesigngrundlagen-3-Schritt 1 - 3.png

Schritt 2!
Mein Favourite ist das letzte Bild.

Designgrundlagen-5-Schritt 2 - 2.pngDesigngrundlagen-5-Schritt 2 - 2.png
Designgrundlagen-4-Schritt 2 - 1.pngDesigngrundlagen-4-Schritt 2 - 1.png
Designgrundlagen-6-Schritt 2 - 3.pngDesigngrundlagen-6-Schritt 2 - 3.png

Schritt 3!
Mein Favourite ist das letzte Bild.

Designgrundlagen-8-Schritt 3 - 2.pngDesigngrundlagen-8-Schritt 3 - 2.png
Designgrundlagen-7-Schritt 3 - 1.pngDesigngrundlagen-7-Schritt 3 - 1.png
Designgrundlagen-9-Schritt 3 - 3.pngDesigngrundlagen-9-Schritt 3 - 3.png

Schritt 4!
Mein Favourite ist das erste Bild.

Designgrundlagen-12-Schritt 4 - 3.pngDesigngrundlagen-12-Schritt 4 - 3.png
Designgrundlagen-11-Schritt 4 - 2.pngDesigngrundlagen-11-Schritt 4 - 2.png
Designgrundlagen-10-Schritt 4 - 1.pngDesigngrundlagen-10-Schritt 4 - 1.png

Überarbeitung!

Dabei habe ich die Abstände zwischen den Buchstaben angepasst. Vor allem bei den Bögen.

Designgrundlagen-1-Schritt 1 - 1.2.pngDesigngrundlagen-1-Schritt 1 - 1.2.png
Designgrundlagen-6-Schritt 2 - 3.2.pngDesigngrundlagen-6-Schritt 2 - 3.2.png
Designgrundlagen-10-Schritt 4 - 1.2.pngDesigngrundlagen-10-Schritt 4 - 1.2.png
Designgrundlagen-11-Schritt 4 - 2.2.pngDesigngrundlagen-11-Schritt 4 - 2.2.png
Designgrundlagen-12-Schritt 4 - 3.2.pngDesigngrundlagen-12-Schritt 4 - 3.2.png

Titelseite

Das erste Bild war von Anfang an mein Favorit, weil ich sofort eine Idee für eine Startanimation hatte. Diese habe ich dann auch umgesetzt. Später ist mir aufgefallen, dass das Cover für das Thema des Zines zu schlicht war. Beim Zine konnte ich das durch eine andere Schriftart anpassen. Bei der iPad-Anwendung war das durch die Animation nicht so einfach möglich, weshalb ich es bei der ersten Variante belassen habe.

Variante 2.pngVariante 2.png
Variante 3.pngVariante 3.png
Variante 1.pngVariante 1.png
Variante 2.2.pngVariante 2.2.png

Text zu laugh

Bei dieser Aufgabe hatte ich große Schwierigkeiten mit der Schriftgröße und den Abständen. Beim Zine war es mit Adobe Illustrator etwas einfacher, da man alles einstellen konnte, aber ich habe einfach noch kein Gefühl dafür, was gut aussieht. Bei Figma war es am schwierigsten, da alles mit einzelnen Textfeldern erstellt wurde und die Abstände der Textfelder bei mir nicht stimmten.

Ipad Anwendung!

Ipad 4.pngIpad 4.png
Ipad 2.pngIpad 2.png

Zine!

Zine.pngZine.png

Piktogramme zu laugh

Diese Aufgabe ist mir sehr leicht gefallen, vor allem durch das Moodboard. So hatte ich einen Überblick, was es schon gibt und in welche Richtungen ich gehen konnte. Das einzige Problem war, dass ich Angst hatte, etwas zu kopieren, da es schon sehr viele lachende Smileys gibt. Außerdem ließen sich die Smileys für die iPad-Anwendung super animieren.

Moodboard.pngMoodboard.png

Piktogramme.pdf PDF Piktogramme.pdf

Muster

Muster.pdf PDF Muster.pdf

Das Muster auf Seite 4 gefällt mir am besten. Ich finde, es ist etwas verspielt und passt deshalb zum Thema Lachen. Außerdem hat es viele Bögen, was mich an ein Grinsen erinnert. Durch die Verwendung von Graustufen passt es zum Cover des Zines.

Ipad Anwendung

Horizontales scrollen!

Im weiteren Verlauf verworfen.

horizontal_3.pnghorizontal_3.png
horizontal_2.pnghorizontal_2.png
horizontal_1.pnghorizontal_1.png

Vertikales scrollen!

Im weiteren Verlauf verworfen.

vertikal_4.pngvertikal_4.png
vertikal_1.pngvertikal_1.png
vertikal_3.pngvertikal_3.png
vertikal_2.pngvertikal_2.png

Blättern!

Das ist es am Ende geworden. Es gibt zwei Varianten, eine nur mit weißem Hintergrund und eine mit weißem und schwarzem Hintergrund. Schwarzer Hintergrund immer dann, wenn eine neue Aufgabe beginnt. Dadurch werden die einzelnen Aufgaben noch deutlicher voneinander getrennt.

blättern_2_weiß.pngblättern_2_weiß.png
blättern_2_schwarz.pngblättern_2_schwarz.png
blättern_1_weiß.pngblättern_1_weiß.png
blättern_1_schwarz.pngblättern_1_schwarz.png

Figma - Ipad: Endprodukt

blättern_2_schwarz.pngblättern_2_schwarz.png
blättern_1_schwarz.pngblättern_1_schwarz.png

Zine

Das dritte Zine ist es dann schlussendlich geworden. Für alle Varianten wurde das zweispaltige Raster verwendet.

Bei der ersten Variante wird auf die Hervorhebung durch einen schwarzen Hintergrund verzichtet. Bei der zweiten Variante wird die Animation mit Pfeilen dargestellt, die ich aber ohne und nur mit Hilfe der Leserichtung anordnen sollte. Dies habe ich dann in der endgültigen Variante umgesetzt.

Hier hatte ich Probleme beim Drucken, weil die Abstände nie gepasst haben. Als ich es dann mit Schnittmarken ausgedruckt und zugeschnitten habe, haben die Abstände gepasst.

Zine.pdf PDF Zine.pdf

Bilder des gedruckten Zine!

1.jpg1.jpg
3.jpg3.jpg
4.jpg4.jpg
2.jpg2.jpg
5.jpg5.jpg

Fazit

Dokumentation.pdf PDF Dokumentation.pdf

Ein Projekt von

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Designgrundlagen 1

Entstehungszeitraum

Wintersemester 2024 / 2025