Grid

Lennie Zimmer

Auf meiner Webseite werden verschiedene Bücher präsentiert, die mit Textauszügen auf typografische Konzepte und Designprinzipien verweisen. Jedes Buch symbolisiert dabei eine einzigartige Perspektive auf die Welt der Typografie. Ein zentrales Element der Website ist der Gestaltungsraster, der bewusst auf den typografischen Raster verweist, der für die Entwicklung von Büchern und die Formatierung von Texten unabdingbar ist. Weil mit Raster-Systemen Texte übersichtlich und ansprechend arrangiert werden können, wird es auch bei der Gestaltung im Web angewandt.

Bei der Anordnung des Textes habe ich mich bewusst an der Hierarchie von Programmiersprache orientiert. Durch die Verwendung von Einzügen, die in der Programmierung verwendet werden, um die Verhältnisse von Elementen und Klassen zu definieren, stelle ich eine Verbindung zwischen Gestaltung und Coding-Prozess her. Indem ich eine Monotype-Schrift, schaffe ich eine zusätzliche Verbindung zwischen der digitalen Welt und der analogen Druckkultur. Mit meinem Projekt möchte ich das Zusammenspiel von Print und Web stärken und erweitern.

Access To Books

Johann König

Das Projekt ‹Access to Books› setzt sich mit der Zugänglichkeit von Büchern auseinander. Es geht einerseits um das Bemühen, Bücher für Leser*innen möglichst einfach und kostengünstig zur Verfügung zu stellen und andererseits darum, Websites als ein Tool zu verstehen, das gerade diesen Zugang ermöglicht.

Auch die Textsammlung beschäftigt sich im weiteren Sinne mit diesem Thema. So gibt es Texte über die historische Entwicklung der Zugänglichkeit von Büchern, Diskriminierungsformen in Büchern, Desktop-Publishing und DIY und Digitalität und Coding als Tool.

Auf der Website ‹Access to Books› können die Nutzer*innen aktiv eine Auswahl der Texte zusammenstellen, die gedruckt werden sollen. Sie dürfen also (und müssen) bewusst entscheiden, welchen Stimmen eine Bühne geboten wird. Außerdem gibt es hinter jedem Absatz die Möglichkeit, einen Kommentar zu schreiben. So lassen sich Anmerkungen und Notizen direkt im Text ergänzen.

Auch die Farben lassen sich auf der Website sowie im Print anpassen. Werden keine Farben ausgewählt, passt sich das Layout im Print an, um Kommentare und Unterüberschriften anders zu kennzeichnen. Die Broschüre ist doppelseitig auf A4 angelegt, sodass sie bequem und kostengünstig zuhause ausgedruckt werden kann.

Concepting Chaos

Amalia Gärtner

For most of my life, I considered myself a person who did not enjoy reading (at all). However, I guess it is fascinating to me to think about the ways a text can be presented. Naturally, I am more drawn to chaotic and thrilling layouts. That’s why I decided to do some research on typography theory about chaos and order. Pretty fast, I found out that if typography is too artsy, the actual content can't be delivered. Hence, I set the following goal for this project: It should be manageable to read but also have the compelling look of chaos. I experimented and tried to find a system, but nothing looked satisfying.

One day, I tried to layout some paragraphs with CSS Grid and accidentally did something that made it look good. And I thought to myself: Is this what chaos is? Something you don’t do intentionally? So I learned my lesson: You can’t control chaos. You need to embrace it. But chaos doesn’t appear out of nothing; you need to start it somehow.

I used HTML, CSS, and Paged.js as my tools, and I wanted to demonstrate the capabilities they have to offer. My website also contains pictures that pop up through the hover effect. However, you can only look at one picture at a time. If you want to see all the pictures, it’s necessary to print out the website. This effect derives from the idea that it is easy to stay online while consuming content. On websites, you can use hyperlinks or different tabs to look up a picture if you need it. In contrast to that, a book is not flexible; it’s limited to itself as soon as it’s printed. In consequence, if one must choose between a website or a book, naturally a website would be the more valuable option. Well, not in this case.

and a reader

Niklas Schönemann

«Das Lesen mag in dem Moment aufhören, wenn man die gesamte Struktur des Buches verstanden hat.» Ulises Carrión, 1975

Im Projekt ‹and a reader› wird der Begriff des Überblicks aus mehreren Perspektiven beleuchtet und gestalterisch verhandelt. Während die Website es ermöglicht, gleichzeitig mehrere Inhaltsebenen zu betrachten und zu lesen, hat die gedruckte Sammlung einen linearen Aufbau. Beide Medien umfassen die gleichen Inhalte. Die betrachtende Person entscheidet selbst, wie weit sie sowohl im Raum des Buches als auch im Raum des Internets gehen möchte. Ab wann haben wir das Gefühl, genug gesehen zu haben? Wann haben wir überblickt, was wir sehen? Muss das überhaupt als Ziel gelten?

In meinem Projekt können gleichzeitig verschiedene Inhaltsebenen, die mit spezifischen Textstellen verknüpft sind – wie Unterkapitel, Anmerkungen oder Quellenverzeichnis – um Lesetext eingeblendet werden. Dadurch wird der lesenden Person die manuelle Verknüpfung der Inhalte im Vorhinein abgenommen. Kein Blättern, keine Post-Its. Möglicherweise effizient.

Die Druckversion der Website folgt dem Gestaltungskonzept eines Buches. Es gibt eine Einleitung, ein Inhaltsverzeichnis und aufeinander folgende Textabschnitte. Nur die Gestaltung verweist an einigen Stellen auf die Gleichzeitigkeit der Dinge. Überschriften grenzen dicht an Fließtexte, überlagern sie teilweise, der Fließtext drängt sich vor die Überschrift. Ein Affront gegen die Texthierarchie. Ein Rangeln um Lesbarkeit.

Anleitung

Lege das Blatt vor dich, sodass die Ecke mit dem Print-Button oben rechts ist.
Falte die untere Hälfte des Blattes unter die obere Hälfte. Du hast nun ein DIN A4-Blatt vor dir. Der Print-Button ist weiterhin oben rechts zu sehen.
Falte die linke Hälfte unter die rechte. Der Print-Button bleibt oben rechts zu sehen.
Falte die untere Hälfte des Blattes unter die obere Hälfte. Der Print-Button bleibt oben rechts.
Falte die unten liegende Hälfte wieder zurück. Du siehst jetzt die Anleitung und oben den Print-Button.
Tacker zweimal in die mittlere Falte.
Falte das Heft wieder zusammen und leg es so vor dich, dass der Print-Button unten rechts liegt.
Schneide an der oberen und der rechten Kante jeweils einige Millimeter ab, sodass sich das Heft blättern lässt.

Handwriting as a Story

Phuong Dang

Where I grew up, learning to write was one of the earliest and highly regarded lessons. ‹Handwriting reflects character›—a proverb that every child must remember when practicing writing. This means that just by looking at someone’s handwriting, you can discern their personality. If the handwriting is neat and clean, then undoubtedly the writer is orderly and straightforward, and vice versa. This concise proverb is enough to reflect the Vietnamese way of life through writing.

In this collection, I—someone who was born and raised in Vietnam—seek the origins of the script I grew up with and still use every day. The texts are compiled from various sources and may still be incomplete, for which I ask for your understanding.

Finally, I introduce a typeface font that I designed—‹no one is writing› (English) / ‹Nét chữ nết người› (Vietnamese)—as a result distilled from the sources I provided above combined with experiences from my own life. The two stylistic sets of the typeface embody the daily struggles and thoughts within myself. Between the concept of «everything must be refined, standardized, and beautiful» (like how I was taught to write in Vietnam as a child) and the idea that «anything can be right, life is a culmination of trials and experiences» (like the process of ‹playing around› with my own portrait). I found myself in a space of combination in which I myself am like a mix, a mix of everything.

OBC-Index

Dari Danchinova

‹OBC-Index› is an interactive web compendium dedicated to the exploration and discussing graphic design. It serves as a digital index, compiling critical texts from various designers from different times, each dissecting elements of design from foundational grid systems to emergent topics like accessibility and collaboration in book design.

At its core, the platform features a word-search functionality, enabling users to discover and highlight specific themes within the texts. This search capability extends into the printed version of their findings with key terms highlighted, creating a physical manifestation of their digital research.

‹OBC-Index› brings together a wide range of ideas, creating a welcoming space for finding new information that covers many aspects of graphic design.

Querlesen

Carla Moje

Ich habe mich mit dem Lesefluss und somit auch mit den Querverweisen und der Navigation auseinandergesetzt. In unserer Sammlung sind mir Themen aufgefallen, die in mehreren Texten angesprochen werden. Deshalb habe ich ausgewählte Textpassagen zusammengestellt, die sich aufeinander beziehen und somit die Grundlage für die Querverweise bilden.

Meine Website besteht aus zwei unabhängig voneinander scrollbaren Seiten – links/schwarz und rechts/rot. Diese Einteilung nutze ich, um die zwei verschiedenen Sammlungen abzugrenzen und die Verweise hervorzuheben. Schwarz stellt dabei einen Bezug zum Haupttext her. Rot hingegen zu allen Inhalten, die sich vom Haupttext aus verlinken lassen – den spezifischen Themen, Anmerkungen und dem Literaturverzeichnis. Der Einsatz von Hyperlinks erleichtert die Navigation durch die Texte und bietet eine angenehme Abwechslung zum bekannten, endlosen Blättern durch ein Buch.

In Anlehnung an die Idee, dass jede:r in der Lage sein soll, die Website zu Hause auszudrucken, ist mein Printprodukt im gängigen A4-Format gehalten. Außerdem habe ich die Verweise statt durch unterschiedliche Farben durch verschiedene Schriftschnitte ausgezeichnet. So bleibt die Zweiteilung der Publikation mit ihren Querverweisen auch im Schwarz/Weiß-Druck sichtbar.

Impressum

Seminar: Other Books and Code

Betreuung: Prof. Heike Grebin, Jan Vincent Dufke
und Simon Thiefes

Teilnehmende: Alina Just, Amalia Gärtner, Antje Loka, Carla Moje, Dari Danchinova, Emely Farnow, Evelin Dam-Hansen, Hani Wibowo, Johann König, Lennie Zimmer, Marcel Louis, Niklas Schönemann, Phuong Dang, Vanessa Köwing

Ausstellung und Plakat: Hani Wibowo, Marcel Louis, Phuong Dang und Vanessa Köwing

Fotos: Antje Loka und Carla Moje

Lektorat: Antje Loka und Carla Moje

Website-Konzept und Gestaltung:
Dari Danchinova, Emely Farnow, Niklas Schönemann und Johann König

Print: Niklas Schönemann und Johann König

Schrift: Times New Arial by Liebermann Kiepe Reddemann

Wintersemster 2023/24

HAW Hamburg

Sehe, nicht lese

Emely Farnow

Das Internet ist ein Ort ständiger Bewegung. Websites reagieren auf Interaktionen, wie Scrollen, Klicken und Zoomen. Sie werden verkleinert, vergrößert, aktualisiert und umgebaut.

Im Gegensatz dazu steht das Buch als fertiges Produkt. Einmal gedruckt, bleibt es unverändert.

Das Projekt ‹Sehe, nicht lese› sucht nach den Schnittstellen zwischen der Flexibilität des Web und der Beständigkeit im Druck. Was erwarten wir, wenn wir eine Website besuchen? Was erwarten wir beim Aufschlagen eines Buches? Wann ist traditionelle Buchgestaltung online effektiv und wo kann ein Buch beweglich sein?

Um sich Inhalt und Umfang der Website vorstellen zu können, gelangt man zunächst zu einem Index. Dieser dient, wie in einem Buch, zur Orientierung und ist der Zugang zu den Textauszügen, die linear oder auch verschränkt gelesen werden können. Neben der Reibung zwischen Text und Bild erfährt die lesende Person auch die Reibung zwischen interaktiven und fremdgesteuerten Veränderungen.

Durch die in die Website integrierte Druckmöglichkeit wird die selbst gedruckte Publikation zu einem persönlichen Besitz, der die Website in die Realität übersetzt und sozusagen vervollständigt. Ohne Seitenzahlen und ohne Einband ist der Reader in der Reihenfolge variabel und bietet somit auch analog die Möglichkeit, die Texte individuell anzuordnen.

Ob durch Klicken oder Blättern: Selbstständiges Handeln und Entscheiden beim Lesen – trotz vorgegebener Strukturen – ermöglicht ein eigenes Erleben und Interpretieren, das das Gelesene zum Leben erweckt und zum Denken über den unmittelbaren Textinhalt hinaus anregt.

semikolon

Evelin Dam-Hansen

‹semikolon› ist ein Reader, eine Textsammlung nicht chronologisch geordneter Aufsätze. Alle Texte eint die Auseinandersetzung mit Aspekten der intermedialen Beziehungen zwischen Web- und Printmedien. Jeder Text steht für sich, verbreitet seine vielfältige Perspektive, kann und sollte aber dennoch im Zusammenhang mit den anderen gelesen werden. Untersucht wird die Beziehung zwischen analogem und digitalem Raum – zwischen Buch und Website.

Ich habe Schnittstellen und Grenzen gefunden und untersucht, inwieweit sich beide Medien kombinieren lassen. Da das Web die Möglichkeit bietet, die kuratorische Kraft einer linearen Leserichtung aufzubrechen, habe ich beide Medien auf ihre etablierten Strukturen und die innewohnenden Hierarchien untersucht.

Mit dieser Struktur habe ich experimentiert und untersucht, welche Bedeutung Hierarchien haben, wenn die chronologische Leserichtung aufgelöst wird. Mir war es wichtig, die Vieldeutigkeit der Texte zu unterstreichen, sie zu Fragmenten in verschiedenen Konstellationen werden lassen, sie mehrfach kombinieren zu können. Der Text ist nicht mehr an das statische Format gebunden, das den Inhalt in eine Form zwingt.

Ich möchte Leser:innen einladen, Texte auch nur ansatzweise oder verschränkt zu lesen, um sich von einem Gedanken zum nächsten treiben lassen zu können.

Stereo:Typo

Hani Wibowo

Typographical clichés, often unconsciously employed, can perpetuate harmful stereotypes by associating specific typefaces with certain ethnicities, thus misrepresenting entire cultures. For instance, the use of decorative or calligraphic fonts may inadvertently evoke cultural stereotypes, such as associating script fonts with Middle Eastern and Asian cultures or serif fonts with European cultures. These associations can lead to oversimplified and inaccurate portrayals marginalizing and undermining the complexity and richness of diverse cultural identities and ultimately reinforcing stereotypes.

I developed a project exploring ethnographic typography and stereotypes: This reader contains a curated selection of texts and visuals gathered from various websites and critically examines the role of typographic shortcuts in perpetuating stereotypes. By analyzing specific typefaces’ associations with ethnicities and cultures, it raises awareness of biases in typographic representation. Ultimately, it prompts reflection on typography's power to shape cultural perceptions and aims to contribute to a more nuanced understanding of cultural identities in design and daily life.

Print2Web2Print

Marcel Louis

Die altbekannte – aber über die Zeit weiterentwickelte – ‹User Experience› des Internets der Anfangsjahre bildet die visuelle Grundlage für diese Sammlung. Sie besteht aus 15 Texten, die sich vor allem mit dem Verhältnis von Web zu Print, mit den neuen Möglichkeiten des Publizierens und der Entwicklung des Buches beschäftigen.

Die Auswahl der Texte für die Printpublikation erfolgt durch das Anklicken der gewünschten Inhalte. Sie bedient sich der Möglichkeit des Internets: der unkomplizierten Auswahl von Informationen, basierend auf dem individuellen Interesse. Obwohl es sich letztendlich auf die Auswahl der enthaltenen Texte begrenzt, hat die Nutzer:in das Gefühl der aktiven Mitgestaltung der Publikation.

Die visuelle Gestaltung der Web- wie auch der Buchgestaltung orientiert sich an den vermeintlich starren Gestaltungsrastern und Regeln klassischer Buchgestaltung. Die Nutzer:in hat die Möglichkeit, eine Auswahl der Texte zu treffen, sie im A4-Format auszudrucken, gegebenenfalls zu binden und somit innerhalb von Minuten eine personalisierte Textsammlung in den Händen zu halten. Die Grenzen und Möglichkeiten beider Medien werden in einem ungewöhnlichen web2print-Produkt vereint, das das Ziel hat, den niedrigschwelligen Zugang, den das Internet bietet, auf ein Printprodukt zu übertragen.

Grid Mondrian

Antje Loka

Responsive Design trifft auf Piet Mondrian: Raster sorgen für Ordnung und Harmonie in der Gestaltung. Sie können aber auch dynamisch genutzt werden. Die Interaktion von Farbflächen, Textboxen und Weißraum, gleichmäßig oder unregelmäßig platziert, baut Spannung auf. Schwarz umrandete Textboxen beziehen sich auf die schwarzen Linien in Mondrians Flächenkompositionen. Mit Schrift gefüllt, ergeben sich schnell konsumierbare, kurze Leseabschnitte. Die Texte sind auf wesentliche Aussagen oder wichtige Zitate reduziert. So sind sie schnell zu erfassen und werden der kürzeren Aufmerksamkeitsspanne im Web gerecht. Das Layout ist flexibel: Beim Vergrößern und Verkleinern des Browserfensters ordnen sich die Flächen und Textboxen immer wieder neu an. In der Gestaltung werden nicht nur die Primärfarben Gelb, Rot und Blau, sondern auch ausschließlich rechteckige Flächen verwendet. Die gesamte Gestaltung setzt auf Abstraktion und Einfachheit: Klare Formen, Farben und große Schrift. Ein gewisser Zufall sorgt für ein wenig Chaos: das flexible Design ist nicht komplett kontrollierbar.

In der Printpublikation wird sichtbar, dass sich das responsive Design nicht einfach auf die gedruckten Seiten übertragen lässt. Die umrandeten Textboxen weichen schmaleren Kolumnen, die sich auch in einem flexiblen Raster anordnen. Unterschiedliche Schriftgrößen und Textanordnungen unterstreichen das flexible Gestaltungskonzept – auch im statischen Print.

Search and Replace

Vanessa Köwing

In vielen älteren Texten zum Thema Design finden sich fast nur Texte von oder über männliche Designer. Die häufige Wiederholung gleicher Namen und Positionen bilden den damaligen und den weitgehend noch heute bestehenden Gestaltungskanon. Diese Festschreibung der Geschichte überdeckt an vielen Stellen die Möglichkeit, den Blick auf weibliche* Gestalter*innen zu erweitern.

Das Projekt ‹Search and Replace› versucht, die vielen oft im Hintergrund stehenden Gestalter*innen sichtbar zu machen. Dazu finden sich auf der Seite mit den historischen Texten bei den Namen der männlichen Gestalter gut sichtbare Verweise auf großartige Designer*innen der jeweiligen Epoche. Über diese Verlinkung, aber auch nur durchs Lesen der zweiten, der ›‹Female Design›-Spalte, gelangt die Leser*in zu ausführlichen Texten von oder über weniger bekannte Gestalter*innen.

Die Leser*innen dieser Website können selbst entscheiden, welche Verweise ihnen besonders wichtig sind. Sie können ihre Auswahl durch An- oder Abwählen der Texte in das Printlayout übernehmen. Somit kann sich jede*r eine Broschüre individuell zusammenstellen und eine Übersicht über Gestalter*innen und deren Arbeiten ausdrucken, die sie kennenlernen möchten.