1. Aufgabe: Pixel Initialien gestalten
Nach einer kurzen Präsentation über die Unterschiede von Type Design, Typographie und Kaligraphie/Lettering durften wir uns an unseren eigenen Initialien in 16x16 Pixel versuchen.
erste Hausaufgabe: 16x16 Initialien entwerfen und mit dem Grit auf ein Blankopapier kopieren.
verbesserte Version
Hier die digitale Version meiner Initialien:
ich habe das Format für jeden Buchstaben auf 16x16 begrenzt und erneut gestaltet.
2. Aufgabe: Fontstruct Alphabet entwickeln
Wir haben uns weiter mit dem Entwickeln von einer eigenen Font beschäftigt und dafür die Website fontstruct.com benutzt.
Das designen mit Pixeln find ich persönlich sehr ästhetisch und ich werde definitiv mehr Schriften und Buchstaben mit fontstruct erstellen, weil mir der Prozess sehr gefallen hat. Ich hatte zuerst eine ganz simple Font, inspiriert an den analogen Lettern, aber bin dann nach drei Anläufen zu diesem Ergebnis gekommen und sehr zufrieden.
leider habe ich es nicht geschafft mein Alphabet zu beenden, weil ich an 3 verschiedenen gearbeitet habe. Hier ist der letzte Stand:
3. Aufgabe: Screenshot Story
Nach der Präsentation unserer FontStruct Alphabete und der Screenshot stories gab es einen kleinen Vortrag zu Schriftarten.
Als Hausaufgabe sollten wir mithilfe vom Fontsinuse.com eine aus 20 slides bestehende screenshot story entwickeln.
3. Aufgabe: subtitles
Die erste “mittlere” Aufgabe: typographic subtitle story
Mit einem Film unsere Wahl sollten wir nun Untertitel gestalten. Dafür konnten wir auf z.B auf opensubtitles.org zurückgreifen. Wir sollten eine interessante Szene wählen und zunächst im Format 1920x1080px gestalten. Nur weiße Schrift auf schwarzem Grund (keine anderen Farben) und nur eine Schrift (aus fine Fonts), aber wenn vorhanden mehrere Schnitte (bold/italic etc.).
Die Struktur der Untertitel muss erhalten bleiben.
Ich hatte zuerst mit Konsole Regular gestaltet, was mir aber im laufe des Semesters nicht mehr gefallen hat. Nach all dem Input über Typografie, habe ich mich dazu entschieden, mit der Font zu arbeiten, die ich auch für meine Figma-Website benutzt habe (Fugit, von Denis Grauel), da ich diese bereits gut kennengelernt habe.
Ich habe die Subtitles im Querformat für die Abschlusspräsentation überarbeitet. D.h. ich habe die Zeilenabstände angepasst (körning) und die Apostrophe verbessert, bzw. versucht mich an alle Regeln des Type Designs, die wir gelernt haben, zu halten.
Hier ist das Ergebnis (mit Schnittmarken, damit man das Format erkennen kann):
4. Aufgabe: subtitles ins Hochformat "übersetzen"
Hier ist einmal die erste Version der Zwischenpräsentation und die überarbeitete Version der Abschlusspräsentation:
5. Zwischenpräsentation
im Rahmen der Zwischenpräsentation zum 14.05. sollten wir unsere bisherigen Ergebnisse in eine Vorlage einfügen und präsentieren.
6. Aufgabe: Figma Website
Wir bekamen eine kleine EInleitung in das Programm: Figma.
Damit sollten wir unsere nächste Aufgabe gestalten. Wir sollten ein von uns ausgesuchtes Filmskript in eine Website übersetzen, bzw. typographisch gestalten. Mit dem Vorwissen aus den subtitle stories und dem neuen Input über das Programm, begannen wir zuerst eine Mobile Website aufzuziehen.
Immer wieder haben wir uns in kleinen Gruppen über unseren Stand ausgetauscht und uns so Verbesserungsvorschläge und andere Tipps eingeholt. Ich persönlich hatte besonders Probleme mit der einheitlichen Gestaltung und damit, Überblick zu bewahren. Da mein ausgesuchtes Skript von „Moonrise Kingdom“ keine einzelnen Szenen hat, sondern nur „Auf- und Abgänge“ fiel es mir zunächst schwer, passende Passagen zu finden, die sich typografisch gut und übersichtlich gestalten lassen.
Ich hab mich dann für „Szenen“ entschieden, die aufeinander folgen und so eine abgeschlossene Story bilden können um dem Chaos entgegen zu wirken.
Dabei habe ich darauf geachtet den Hauptprotagonisten „Sam“, immer rechtsbündig auftauchen zu lassen, sei es indem was er tut, als auch seine Dialoge.
Der Rest findet links statt.
Bei der ersten Szene, die ich mir ausgesucht habe, gibt es keinen Dialog. Bei der typografischen Gestatung des Fließtextes habe ich mir vorgenommen bestimmte Passagen durch variierende Textgrößen hervorzuheben, genau so aber auch zu verbergen. Zuerst hatte ich auch mit Illustrationen gearbeitet, um die Szene auszuschmücken, aber diese hat es letztendlich gar nicht gebraucht (später in der Desktop-Version habe ich sie allerdings beibehalten).
Außerdem habe ich durch Zeilenabstände versucht den Text zu teilen, so dass der Leser beim Lesen ein stimmiges Bild verfolgen kann, ohne überfordert zu werden. Ich habe mit viel Weißraum gearbeitet und versucht den Text dynamisch, passend zum Geschehen im Skript, fließen zu lassen.
Hier der erste Draft, noch mit Menue und Illustrationen:
Als nächstes sollten wir auch eine Desktop-Version erstellen.
Bei meinem Konzept der Rechts- bzw. Linksbündigkeit, musste ich nun einiges verändern um den gewünschten Effekt trotzdem zu erziehlen.
Ich habe die Absätze verändert, da die Zeilen sonst zu lang und zu unleserlich wurden.
Von der Rechtsbündigkeit bei Sam bin ich ebenfalls abgekommen. Stattdessen habe ich ihn stark eingerückt.
Nachdem ich meinen Stand der Klasse präsentiert hatte und einiges an Feedback bekommen hatte, habe ich folgendes überarbeitet:
- Illustrationen rausgenommen und wenn möglich durch typografische Elemente ersetzt
- Zeilenabstand und Absätze deutlicher gemacht, bzw. das Chaos bewältigt
- die Eigennamen nochmal vergrößert 45p (Fließtext ist 25p)
- Apostrophe korrigiert
Abschlussergebnis der Figma Projekte:
Ich fand die Arbeit mit Figma teilweise echt mühselig, obwohl ich mir für die Gestaltung echt Zeit gelassen habe um das Programm richtig zu verstehen.
Ich habe mir außerdem noch YouTube Videos angeschaut, aber letztendlich nicht das gestalten können, was ich im Kopf hatte.
Um den groben Ablauf für die Gestaltung einer Website zu verstehen finde ich das Programm echt gut, aber wenn Prototype und oder das Positionieren von Testteilen nicht klappt ist es sehr deprimierend.
Trotzdem hab ich viel aus dem Prozess mitgenommen, vor allem wenn es um die Grundregeln der Gestaltung geht, wie z.B. Abstände, Weißraum und Rahmen oder Links/Menü-Design.
7. Abschlusspräsentation
Hier das PDF meiner Abschlusspräsentation
Auf der WERKSCHAU haben wir unsere Subtitles im Querformat gezeigt. Eigentlich wollten wir auch unsere Figma Projekte präsentieren, was aber leider kurzfristig nicht mehr geklappt hat,
8. Fonts In Use Article
die letzte Aufgabe bestand darin, die Website über die wir bereits unser Referat gehalten haben zu analysieren und einen Fonts in Use Artikel zu verfassen. Die fertigen Artikel sollten dann veröffentlicht werden.
Ich habe mir einen eigenen Account auf der Seite erstellt und an meiner Veröffentlichung gearbeitet. Hier sind zwei Screenshots:
https://fontsinuse.com/uses/59309/tromso-kunstforening-website
Die Analyse der Website hat mich besonders begeistert, da ich früher schon auf Tumblr eigene Blogs mit HTMLL und CSS erstellt habe. Die Arbeit mit Codes hätte mich persönlich noch einmal mehr interessiert, aber die Schriftarten herauszufinden und den Hintergrund zu ergründen bzw. den Einsatz auf der Website einzuordnen war auch sehr lehrreich.
Als Abschluss nochmal einen Artikel über den Schrifteinsatz schreiben zu müssen fand ich sehr passend für den Kurs.
