DAS ERGEBNIS

Folgendes Layout ist für den Print- und Online-Artikel entstanden, festgehalten in einer schriftlichen Dokumentation.
Den Verlauf des gesamten Gestaltungsprozesses in Blogform findet sich hier.

FINALLY!

Nach kleineren Anpassungen an den Reinzeichnungen und Dokumentation konnte ich endlich die PDFs und das verpackte InDesign für die finale Abgabe generieren!

Es ist geschafft!

ENDSPURT

Jetzt, da ich meine Reinzeichnung fertig habe, fehlt nur noch die Dokumentation. Auch hier versuchte ich, ein ästhetisches und leserfreundliches Layout zu kreieren. Hier einige Einblicke:

REINZEICHNUNG – ONLINE

Auch von meinen Online-Formaten musste ich noch die finalen Layouts machen. Diese unterscheiden sich leicht von meinen ersten Entwürfen. Ich bin dem Rat von Andreas gefolgt und habe meine Printlayout-Idee auch auf dem Desktop umgesetzt. Das Desktop-Layout ist nun nicht mehr einspaltig – wie zu Beginn angedacht – sondern weist ebenfalls drei Spalten auf. Beim Mobile bin ich meinem ersten Entwurf aber treu geblieben und habe mich für einen Ein-Spalter entschieden.

Im Gegensatz zum Print dürfen wir online eine Farbe benutzen – zum Auszeichnen eines typographischen Elementes. Ich habe das Dunkelrot aus meinem Bild aufgenommen und beim Zitat eingesetzt. So sticht die typographische Andersartigkeit noch mehr hervor, wirkt aber trotzdem harmonisch, da die Farbe im Layout bereits vorkommt. Eine Herausforderung bei den Online-Layouts fand ich, die richtige Schriftgrösse festzulegen. Kurz im Input der Dozenten nachgeschlagen, fand ich die Empfehlung, dass Auszeichnungen nicht grösser als 24pt und Lesegrössen nicht grösser als 14pt sein sollten. Das habe ich mehr oder weniger so umgesetzt, jedoch nach Gefühl noch angepasst, indem ich mir die Desktop-Ansicht als PDF angeschaut und die Mobile-Ansicht zugeschickt habe.

REINZEICHNUNG – PRINT

Bei der Reinzeichnung möchte ich versuchen, dem klassischen Gestaltungsprozess zu folgen, den Andreas und Vera in einer ihrer Präsentationen angesprochen haben:

Grundsätzlich besteht der Gestaltungsprozess aus dem Entwerfen und Umsetzen. Das Entwerfen habe ich mit den Sketches und ersten kurzen Entwürfen auf InDesign bereits getan.

Bei der Reinzeichnung möchte ich nun noch den definitiven Raster festlegen. Dazu befolge ich folgende Schritte:

1. Format festlegen
Dies haben die Dozenten ja bereits für mich erledigt.

2. Ränder definieren
Mein Layout lebt unter anderem von Fliesstext, Seitenzahl und Bild, welche alle bis ganz an den Rand meines Dokumentes laufen. Daher macht es wenig Sinn, dem Dokument einen Ränder zu geben.

3. Aufteilen in Spalten und Zeilen
Da mein Layout primär durch den Fliesstext vertikal unterteilt ist, werde ich Spalten festlegen, jedoch keine Zeilen. Damit das Layout aber auch horizontal harmonisch wirkt, werde ich manuell eingesetzte Hilfslinien einsetzen – z.B. den Head auf die Höhe des Bildes setzen (Magenta-Hilfslinie), den Teasertext auf Höhe des Textes auf der zweiten Seite ansetzen (orange Hilfslinie). Diese klar definierten Höhen sind mir wichtig, weil ich finde, dass meine gewählte Schrift, die Flattersätze und die unregelmässig angeordneten Textblöcke zu bereits genug Unruhe führen. Dem möchte ich so entgegenwirken.

Letztendlich habe ich mich für viele schmale Spalten entschieden (so wie mir das Vera bei ihrem ersten Feedback geraten hat). So kann ich meine unregelmässig angeordneten Textblöcke spielerisch, nach Lust und Laune anordnen. In hoffentlich schönem Zusammenspiel mit dem Weissraum.

4. Bespielen der Konstruktion
Meine Konstruktion kann ich mit diesem festgelegten Raster auf verschiedene Arten bespielen.

So viel zur Arbeit an meiner Reinzeichnung. Wie man vielleicht bemerkt, haben sich seit meinem vorletzten Blogpost die Flattersätze verändert. Ich habe sie manuell ausgearbeitet. Ich bin jedoch noch nicht zufrieden und werde innerhalb der Reinzeichnung noch etwas herumpröbeln.

STYLISH!

Ich befinde mich langsam auf der Zielgeraden und befasse mich nun mit der Reinzeichnung. Ich möchte nebst einem Raster auch Paragraph- und Character-Styles definieren. Obwohl ich bereits vor dem Studium intensiver mit InDesign gearbeitet habe, kamen Paragraph- und Character Styles bei mir nie zum Einsatz. Darum bilde ich mich mit einem Lynda-Video kurz weiter. Hier kurze Definitionen der Paragraph- und Character-Styles und wofür sie gut sind.

Paragraph Styles
«Through the use of styles the designer can create a look for a certain class of paragraph and then consistently apply that look to other paragraphs of the same type with a single click. Thereafter, changes to the appearance of type can be made by editing the definition of the paragraph style.»

Character Styles
«Character styles are used to make an exception within a paragraph, most typically for movie titles and book titles and other types of emphasis like that. With character styles, formats can be controlled through the character style definition, so if I wanted to switch from italic to bold, I would just edit the style definition. And that’s going to update wherever it’s been used.»

Man hat sogar die Möglichkeit, den Styles eigene Shortcuts zu hinterlegen. Das macht die Arbeit an einem grösseren Projekt mit vielen verschiedenen Paragraph-Styles bestimmt einfacher.

Wie ich mein neugewonnenes Wissen über Styles in meinem eigenen Projekt anwende, werde ich am Beispiel meiner Reinzeichnung dokumentieren.

THE MEANING BEHIND IT

Before you even read it, you have sensibility and spirit. And that, if you combine that with a meaning, then that’s spectacular.

– Paula Scher –

Inspiriert von Paulas Worten (siehe auch meinen früheren Post «Inspirieren lassen») ging ich an die Überarbeitung meines Textes über Punk. Schliesslich soll sich auch der Inhalt des Textes optimal in das Layout integrieren. Oder vielleicht mehr noch: Eine spektakuläre Wirkung haben!

Das Resultat ist ein Essay über das Comeback von «Punk» in der Fashionwelt, wie auch einige Worte zu mir als Redakteurin des Artikels. Wie der Text (ohne Beschrieb zur Redakteurin) sich im momentanen Layout verhält, siehe unten:

Der Text verhält sich momentan ziemlich gut. Wir werden es jedoch erst sehen, wenn ich die Flattersätze noch manuell bearbeiten.

INSPIRIEREN LASSEN

Nach intensiver Arbeit an meinem Blog und den Layouts fand ich, war die Zeit reif, sich kurz etwas zurückzulehnen. Netflix sei Dank ist das ja nicht  so schwierig. Erstaunlicherweise schien genau das mich wieder etwas zu inspirieren und mir Freude an der Typographie zu bereiten! Ich schaute nämlich eine Folge von «Abstrakt: Design als Kunst» über die wohl einflussreichste Grafik Designerin der Welt: Paula Scher (die Folge findet man auch auf Vimeo).

Vor allem ihre Arbeit für das Public Theater und die Atlantic Theater Company in New York sind legendär. Was sie selbst über ihre Arbeit sagt:

«I think you should develop a visual language. You don’t need to see the logo to know what it is. You should be as powerful, visible, understandable, recognizable as anything in town.»

– Paula Scher –

Paula Schers Arbeit erschuf den beiden Theatern eine ganz eigene visuelle Sprache, die sogar in den vollen und lauten Strassen New Yorks unverkennbar erscheint.

Inwiefern mich dieser kleiner Exkurs bei meinen eigenen Layouts weiterbringt, weiss ich noch nicht – aber spannend war es auf jeden Fall! Und wie das Paula Scher zu Beginn eines Workflows ausdrücken würde:

«Oh my god, how am I going to solve this problem?»
Then, you walk up the stairs, go into the ladies’ room, put on your lipstick and figure it out.

– Paula Scher –

DER DRITTE ENTWURF

Wie im vorherigen Post bereits angetönt, musste noch eine weitere Layoutidee her. Mein dritter Entwurf sieht folgendermassen aus.

 

 

Bei meiner dritten Layoutidee wollte ich unbedingt Schrägen und Überlappungen einbauen. Damit sich die Schrägen mit dem Fliesstext vereinbaren liessen, musste ich einen Blocksatz anwenden. Der Fliesstext wird jedoch mit rechtsbündigen Zitaten etwas aufgebrochen. Das – in den Text hineinragende – Bild durfte das Leseerlebnis nicht allzu fest erschweren, darum arbeite ich da mit einer Transparenz. Der ausgebleichte Look finde ich aber ganz passend und unterstreicht die «Punk»-Thematik.

Bei der Schrift wollte ich – ähnlich wie bei der zweiten Layoutidee – etwas Schlichtes. Es durfte aber gerne etwas moderner sein. Vor allem war mir wieder wichtig, dass ich genügend Schriftschnitte zur Verfügung hatte. So dass ich die Kontraste wieder etwas auf die Spitze treiben konnte. Schliesslich fiel meine Wahl auf den Font «Khand» mit Schriftschnitten von «light» bis «bold».

Diese Layoutidee weist eher wenig Weissräume auf. Auch überzeugen mich die Schrägen nicht so ganz. Im Printlayout passt sich der Text relativ gut an diese an. In den Online-Layouts ist diese Umsetzung aber eher schwierig. Ich werde mich vermutlich gegen diese Reinzeichnung entscheiden.

FEEDBACK 02

Auch bei Andreas kam mein erster Layoutentwurf gut an.
Allgemein arbeite ich sehr harmonisch mit den ausgewählten Fonts.

Wie ich bereits selber spürte, kann der Fliesstext beim Layout noch etwas kleiner sein – 10pt kann ich gut noch bis zu 8pt verkleinern.

Da ich einen Artikel innerhalb eines Magazins layoute, macht es wenig Sinn, dass der «Runnig Head» auf das Thema des Artikels angepasst ist. Mein Anarchie-Zeichen sollte ich also besser etwas schlichter und sauberer gestalten.

Den «Head» könnte man jedoch noch etwas «punkiger» gestalten – z.B. im Stil von ausgeschnittenen und zusammengeklebten Buchstaben.

Den «Teasertext» könnte ich vielleicht noch etwas näher an den Rand der Seite setzen, so dass dieser etwas aus dem Raster fällt.

So sieht meine vorläufige Umsetzung des Feedbacks aus und stellt mein Entwurf der Layoutidee dar. Weitere Anpassungen nehme ich dann bei der Reinzeichnung vor. Was ich bei der Reinzeichnung nicht vergessen möchte, ist das manuelle Ausarbeiten der Flattersätze – das mache ich aber erst, wenn ich meinen definitiven Text eingefügt habe.

Auch für das Desktop- und Mobile-Format hat mir Andreas einen Vorschlag gemacht. Beim Desktop könnte ich ruhig meinem Printlayout treu bleiben und die Spalten beibehalten. Mobile würde sich dann – wie von mir bereits angedacht – einfach responsive in einer Zeile anordnen.

Zum zweiten Layoutentwurf meint Andreas, dass dies als Entwurf völlig reicht.
Ich muss also nun noch einen dritten Layoutentwurf gestalten, die Reinzeichnung vom ersten Layoutentwurf und die Dokumentation machen. Was ich bisher bei den Online-Entwürfen noch vernachlässigt habe: den Einsatz einer Farbe zum Auszeichnen eines typographischen Elementes (eine Vorgabe des Semestercases).

Für den dritten Layoutentwurf habe ich bereits etwas angedacht. Ich möchte mit Schrägen arbeiten.

Wohin das genau noch führen wird, werden wir dann sehen …