Excerpt from: Working without grids
Martin Lorenz, 2021
Even if you want to work without grids, you still need visual systems. Grids are one of the most helpful inventions since communication designers had to design more than one deliverable. By limiting the options where to place text or images and in which size, so much time has been saved. Apart from being an efficient design tool, they also establish a comprehensible order that makes reading easier. Having said that, you are not obliged to use them.
F.1
A visual system is nothing eise than a set of rules, an instruction manual for humans and/or machines. By inventing rules, similar to the ones on the left, you can design processes that lead to distinctive visual identities. The instructions you are giving are actually code that can be executed by humans (usually slowly) or by machines (usually more quickly). When you let these rules be executed by machines instead of humans, you gain a lot of new possibilities. Not just that your design can become more complex, you can instruct any machine that is manageable with code. Even a remote-controlled spray can installation, drone, or car can be used to visualize the applications of your system.
But not everything programmable needs to be executed by machines. The imperfection coming from humans can create interesting details a machine would avoid. Suprematism, Constructivism, and De Stijl would have been extremely boring if not painted by humans but printed by machines. Executing programs by humans also have a collaborative dynamic that can add interesting interpretations within the parameters of the rules.
We see and remember only the things that make sense to us. Based on our experience some things appear to be comprehensible and some don’t. Not everything that is logical to us is logical to someone eise, because the other person has different experiences in life. The more people with different backgrounds we want to reach, the more universal the language we use has to be. Maths and physics are such universal languages. lt you show a person from the other side of the world an animation using physics, this person will intuitively understand it because they’ve lived with the same physics on the same earth.
D.1_D.3_D.4
1. Jürg Lehni programmed a tool to spray paint vector images to walls. He called his machine “Hektor”. The perfection of vectors and the imperfection of the spray paint create an interesting contrast and a distinctive visual language that could serve as a visual identity.
2. Studio Moniker’s “Conditional Design” workshops are a good example for programmed design, executed by humans. They imposed on themselves rules, which they then executed together. The execution of Sol le Witt’s murals come to mind also, who instructed his assistants how to draw his huge murals with tiny pencils. From far the murals appear to be perfect, but from close you notice the imperfection of the human stroke.
Which advantages does using a grid have?
While you do not need a grid, this book is full of them because grids make it easier to determine the positions and sizes of the assets. Just as the assets can react to formats, grids can also adapt to different formats by repeating or distorting its modules.
Designing with grids has several advantages:
1. Structure
Grids create a comprehensible visual structure that can help to distinguish different information types from each other. For example, three columns can be used for three different languages or the top row can always be used for headings.
2. Aesthetics
Grids can create the feeling of order and harmony, but also of dynamism. Through the interaction between positive and negative spaces or the irregular and regular placement of elements tension can be built up.
3. Efficiency
At first glance, grids look like more work for the de signer. In fact, they save us a lot of work. By reducing the options for positioning assets, the number of decisions to be made when designing is also reduced. If, in addition to the grid, you have found a system for distributing the various types of information, you only have to make a manageable number of design decisions on each page. With a book of 48 pages or more, you will quickly see how much time this saves you.
B.2_E.4
4. Harmony
After a number of pages you will also see that the design decisions influenced by the grid make the book a harmonious whole, even if each page looks different you will always notice the underlying logic.
5. ldentification
In the context of this book the possibility of creating a recognizable visual language with grids is very interesting. If the grid, and / or the system on how to apply the assets on the grid, is distinctive it serves as an identifiable design element.
6. Instructions / Design Manual
The description of how something is designed is often disregarded as a non-essential part of the design process. I consider it as one of the most important phases. If a system is easy to understand and apply it will most likely be used for a long time. If a system is highly complex and there is a human applying it, it will most likely be wrongly interpreted.
A grid helps to visualize rules. Everybody understands what it means to divide the width of the format by ten and use a tenth of the format as a space around an object, as shown on the left page. The modules resulting from the division of the format help to define position and size of objects and spaces and the best thing about them, they are scalable and adapt to the size of the format.
At the risk of mentioning the obvious, I would like to point out that there is a difference between graphic and typographic grids and that these must be coordinated with each other. While typographic grids need space in between columns and rows, also called gutter, graphic grids can work perfectly without the gutter. In fact, they are easier to manage and calculate without the gutter. When working with graphic-heavy visual systems I usually start with a graphic grid and place a typographic grid inside the sections which have text. If I am working on a book or any other text-heavy application I start with the typographic grid and place the graphic grid inside of the modules of the typographic grid. Another option would be to place a format-spanning typographic grid on top of a graphic grid, but to this date design software does not make this easy.
How to create a grid with different geometric forms?
Reset
Forget about the software you are working with and the possibilities they offer you at the moment, and you will see that you are very limited and that there are countless other ways to develop grids. You only need to look at centuries old Islamic patterns. These seemingly complex patterns are based on simple grids based on different geometric shapes and their intelligent use. Even the much simpler posters for Musica Viva by Josef Müller-Brockmann, designed on a grid rotated by 45 degrees, look very innovative for a today’s designer adapted to today’s software. Not to mention Müller-Brockmann’s circular grids. All of these are quite complicated to realize with today’s software.
Starting Points
Begin your experiments with alternative grid systems with a geometric shape that is not the rectangle. For example, take a triangle or hexagon and put them together. Use the resulting characteristics to design shapes and patterns, but also to design or arrange fonts.
Adaptation
Today’s software favors the grid based on horizontal and vertical guidelines. Adapting the grid based on other shapes is complicated. This is why in this book I have worked with triangles, pentagons, and hexagons that fit into a rectangular grid.
How to use grids?
There are different ways to use a grid. You can generate shapes by filling modules or their outline. You can also use the module or outline to align text or graphics. The more unusual the grid and its use is the better it serves as a distinctive visual identity. These couple of options give you already sheer unlimited possibilities. You can repeat the modules and use them to create larger patterns, lines, frames, or labels, depending on the need of each deliverable. Adjusting the complexity of the grid needs to be dependent on content and scale of the deliverable. Simple solutions are better suited for small applications. The larger the format, the more complex you can get.
Auszug aus: Arbeiten ohne Raster
Martin Lorenz, 2021
Auch wenn man ohne Raster arbeiten möchte, braucht man visuelle Systeme. Raster sind eine der hilfreichsten Erfindungen, seit Kommunikationsdesigner mehr als eine Vorlage entwerfen müssen. Durch die Einschränkung der Möglichkeiten, wo und in welcher Größe Text oder Bilder platziert werden können, wurde viel Zeit gespart. Abgesehen davon, dass sie ein effizientes Gestaltungsmittel sind, schaffen sie auch eine nachvollziehbare Ordnung, die das Lesen erleichtert. Dennoch ist man nicht verpflichtet, sie zu verwenden.
F.1
Ein visuelles System ist nichts anderes als ein Regelwerk, eine Gebrauchsanweisung für Menschen und/oder Maschinen. Durch das Erfinden von Regeln, ähnlich denen auf der linken Seite, können Sie Prozesse entwerfen, die zu unverwechselbaren visuellen Identitäten führen. Die Anweisungen, die gegeben werden, sind eigentlich ein Code, der von Menschen (normalerweise langsam) oder von Maschinen (normalerweise schneller) ausgeführt werden kann. Wenn man diese Regeln von Maschinen anstelle von Menschen ausführen lässt, ergeben sich viele neue Möglichkeiten. Nicht nur, dass das Design komplexer werden kann, man könnte jede Maschine anweisen, die sich mit Code steuern lässt. Sogar eine ferngesteuerte Spraydosenanlage, eine Drohne oder ein Auto kann verwendet werden, um die Anwendungen des Systems zu visualisieren.
Aber nicht alles, was programmierbar ist, muss von Maschinen ausgeführt werden. Die Unvollkommenheit, die vom Menschen ausgeht, kann interessante Details hervorbringen, die eine Maschine vermeiden würde. Suprematismus, Konstruktivismus und De Stijl wären extrem langweilig gewesen, wenn sie nicht von Menschen gemalt, sondern von Maschinen gedruckt worden wären. Die Ausführung von Programmen durch Menschen hat auch eine kollaborative Dynamik, die interessante Interpretationen innerhalb der Parameter der Regeln hinzufügen kann.
Wir sehen und erinnern uns nur an die Dinge, die für uns Sinn machen. Aufgrund unserer Erfahrung erscheinen uns manche Dinge verständlich und manche nicht. Nicht alles, was für uns logisch ist, ist auch für jemand anderen logisch, denn die andere Person hat andere Lebenserfahrungen. Je mehr Menschen mit unterschiedlichen Hintergründen wir erreichen wollen, desto universeller muss die Sprache sein, die wir verwenden. Mathematik und Physik sind solche universellen Sprachen. Wenn Sie einer Person am anderen Ende der Welt eine Animation zeigen, die Physik verwendet, wird diese Person sie intuitiv verstehen, weil sie mit der gleichen Physik auf der gleichen Erde gelebt hat.
D1._D.3_D.4
1. Jürg Lehni programmierte ein Gerät, mit dem er Vektorbilder an Wände sprühen konnte. Er nannte seine Maschine "Hektor". Die Perfektion der Vektoren und die Unvollkommenheit der Sprühfarbe schaffen einen interessanten Kontrast und eine unverwechselbare Bildsprache, die als visuelle Identität dienen könnte.
2. Die "Conditional Design"-Workshops von Studio Moniker sind ein gutes Beispiel für programmiertes Design, ausgeführt von Menschen. Sie haben sich selbst Regeln auferlegt, die sie dann gemeinsam ausgeführt haben. Man denke auch an die Ausführung der Wandbilder von Sol le Witt, der seine Assistenten anleitete, seine riesigen Wandbilder mit winzigen Bleistiften zu zeichnen. Aus der Ferne wirken die Wandgemälde perfekt, aber aus der Nähe erkennt man die Unvollkommenheit des menschlichen Strichs.
Welche Vorteile hat die Verwendung eines Rasters?
Auch wenn Sie kein Raster benötigen, ist dieses Buch voll davon, denn Raster erleichtern die Bestimmung von Positionen und Größen. So wie der Inhalt auf Formate reagieren können, können sich auch Raster an verschiedene Formate anpassen, indem sie ihre Module wiederholen oder verzerren.
Das Entwerfen mit Rastern hat mehrere Vorteile:
1. Struktur,
Raster schaffen eine verständliche visuelle Struktur, die helfen kann, verschiedene Informationstypen voneinander zu unterscheiden. Zum Beispiel können drei Spalten für drei verschiedene Sprachen verwendet werden oder die oberste Zeile kann immer für Überschriften verwendet werden.
2. Ästhetik
Raster können das Gefühl von Ordnung und Harmonie, aber auch von Dynamik vermitteln. Durch das Zusammenspiel von positiven und negativen Räumen oder die unregelmäßige und regelmäßige Anordnung von Elementen kann Spannung aufgebaut werden.
3. Effizienz
Auf den ersten Blick sehen Raster nach mehr Arbeit für den Zeichner aus. Tatsächlich ersparen sie uns aber eine Menge Arbeit. Durch die Verringerung der Möglichkeiten zur Positionierung von Elementen verringert sich auch die Anzahl der Entscheidungen, die bei der Gestaltung zu treffen sind. Wenn Sie zusätzlich zum Raster ein System für die Verteilung der verschiedenen Informationstypen gefunden haben, müssen Sie auf jeder Seite nur noch eine überschaubare Anzahl von Gestaltungsentscheidungen treffen. Bei einem Buch mit 48 oder mehr Seiten werden Sie schnell sehen, wie viel Zeit Sie dadurch sparen.
B.2_E.4
4. Harmonie
Nach einigen Seiten werden Sie auch feststellen, dass die durch das Raster beeinflussten Gestaltungsentscheidungen das Buch zu einem harmonischen Ganzen machen, auch wenn jede Seite anders aussieht, wird man immer die zugrunde liegende Logik erkennen.
5. ldentifikation
Im Zusammenhang mit diesem Buch ist die Möglichkeit, mit Rastern eine erkennbare visuelle Sprache zu schaffen, sehr interessant. Wenn das Raster und / oder das System, wie der Inhalt auf dem Raster angewendet wird, unverwechselbar ist, dient es als identifizierbares Gestaltungselement.
6. Anleitung / Design-Handbuch
Die Beschreibung, wie etwas gestaltet wird, wird oft als unwesentlicher Teil des Gestaltungsprozesses vernachlässigt. Ich betrachte sie als eine der wichtigsten Phasen. Wenn ein System einfach zu verstehen und anzuwenden ist, wird es höchstwahrscheinlich lange Zeit genutzt werden. Wenn ein System hochkomplex ist und von einem Menschen angewandt wird, wird es höchstwahrscheinlich falsch interpretiert werden.
Ein Raster hilft bei der Visualisierung von Regeln. Jeder versteht, was es bedeutet, die Breite des Formats durch zehn zu teilen und ein Zehntel des Formats als Raum um ein Objekt zu verwenden, wie auf der linken Seite gezeigt. Die Module, die sich aus der Teilung des Formats ergeben, helfen dabei, die Position und Größe von Objekten und Räumen zu definieren, und das Beste an ihnen ist, dass sie skalierbar sind und sich an die Größe des Formats anpassen.
Auch auf die Gefahr hin, das Offensichtliche zu erwähnen, möchte ich darauf hinweisen, dass es einen Unterschied zwischen grafischen und typografischen Rastern gibt und dass diese aufeinander abgestimmt sein müssen. Während typografische Raster einen Abstand zwischen den Spalten und Zeilen benötigen, der auch als Zwischenraum bezeichnet wird, können grafische Raster auch ohne Zwischenraum funktionieren. Sie sind sogar einfacher zu handhaben und zu kalkulieren, wenn kein Zwischenraum vorhanden ist. Wenn ich mit
Wie kann man ein Raster durch verschiedene geometrischen Formen erstellen?
Zurück zum Beginn
Vergessen Sie die Software, mit der Sie arbeiten, und die Möglichkeiten, die sie im Moment bietet, und Sie werden sehen, dass Sie sehr eingeschränkt sind und dass es unzählige andere Möglichkeiten gibt, Raster zu entwickeln. Man muss sich nur die jahrhundertealten islamischen Muster anzusehen. Diese scheinbar komplexen Muster basieren auf einfachen Rastern, die auf verschiedenen geometrischen Formen und deren intelligentem Einsatz beruhen. Selbst die viel einfacheren Plakate für Musica Viva von Josef Müller-Brockmann, die auf einem um 45 Grad gedrehten Raster basieren, sehen für einen heutigen Designer, der sich an die heutige Software angepasst hat, sehr innovativ aus. Ganz zu schweigen von den kreisförmigen Rastern von Müller-Brockmann. All dies ist mit der heutigen Software recht kompliziert zu realisieren.
Ausgangspunkte
Beginnen Sie Ihre Experimente mit alternativen Systemen mit einer geometrischen Form, die nicht das Rechteck ist. Nehmen Sie zum Beispiel ein Dreieck oder ein Sechseck und setzen Sie sie zusammen. Nutzen Sie die daraus resultierenden Merkmale, um Formen und Muster zu entwerfen, aber auch um Schriften zu entwerfen oder anzuordnen.
Anpassung
Heutige Software bevorzugt das Raster auf der Grundlage von horizontalen und vertikalen Leitlinien. Die Anpassung des Rasters auf der Grundlage anderer Formen ist kompliziert. Deshalb habe ich in diesem Buch mit Dreiecken, Fünfecken und Sechsecken gearbeitet, die in ein rechteckiges Raster passen.
Wie verwendet man Raster?
Es gibt verschiedene Möglichkeiten, ein Raster zu verwenden. Man kann Formen erzeugen, indem Module ausgefüllt werden, oder deren Umrisse.
Man kann das Modul oder den Umriss auch zum Ausrichten von Text oder Grafiken verwenden. Je ungewöhnlicher das Raster und seine Verwendung sind, desto besser dient es als unverwechselbare visuelle Identität. Diese paar Optionen ergeben bereits schier unbegrenzte Möglichkeiten. Man kann die Module wiederholen und sie zur Erstellung größerer Muster, Linien, Rahmen oder Beschriftungen verwenden, je nach den Anforderungen der einzelnen Arbeitsergebnisse. Die Komplexität des Rasters muss vom Inhalt und dem Umfang des Dokuments abhängen. Einfache Lösungen sind für kleine Anwendungen besser geeignet. Je größer das Format, desto komplexer können Sie werden.