In the first semester, I did a lot of research on minimalist and maximalist design characteristics. As for the second semester the plan is to experiment in this field, I thought about something:
I will choose a product, for example Carrot juice and then crate a minimalist as well as maximalist design for it (according to what I’ve learned) The aim for it is not to be perfect but rather the process behind it.
As for the carrot juice, creating a minimalist design was fairly easy. A lot of ideas came immediately to my mind, and I knew exactly in which direction I want to go. But, for the maximalist design, it was very different. I hand no idea how to do it. I’ve made a lot of drafts, but they all turned out wrong.
Now I’m thinking: Are there products which can’t be advertised in a maximalist way? Is carrot juice to pure, clean, and organic to be advertised in a maximalist way?
Ich bekam die Anfrage für die Website eines Unternehmens Fotos vom Büroleben zu machen. Es war mein erstes größeres Shooting ohne weitere beteiligte Leute aus meiner Branche.
Die Fotos mussten als erstes mal inhaltlich zum Thema der Seitenstruktur passen. Also habe ich hier wie üblich einen Shootingplan und ein Moodboard ausgearbeitet. Dafür war es notwendig ordentlich zu recherchieren, weil ich manche Tätigkeiten des Unternehmens – aufgrund der noch nicht fertigen Website – mir recht unklar waren. Es ist ein Unternehmen für Beratung. Hier war dann klar: Die Fotos müssen hell und freundlich sein. Sie dürfen nicht zu streng aussehen, aber müssen Kompetenz vermitteln. Viele lächelnde Gesichter, ruhige Kompositionen. Ich wollte mich zuerst für warme Farben entscheiden. Aufgrund des CD der Firma blieb ich aber bei kühl – neutral.
Meine Vorgehensweise in etwa:
Zeitplan
Moodboard
Recherche/Rücksprache
Shootingplan
Equipmentplan
Statistenplan
Shooting
Aussortieren
Nachbearbeiten
Was was das Outcome meines Experiments zur Bildwahrnehmung: Was passiert denn mit einem Bild auf einer Website? Welchen Unterschied macht die Position?Gerade auf einer Website ist besonder wichtig, wohin ein Bild den Blickfokus lenkt. Bei Fotos, auf denen Köpfe alle nach rechts gedreht sind, verläuft der Blick der Betrachtenden automatisch nach rechts. Will ich das denn hier überhaupt? Diese Folusgeschichte hätte ich besser nutzen können.
Die abgebildeten Personen lenken den Blick der Betrachter:innen auf den “Fragen?”-Button
Die abgebildeten Personen lenken den Blick der Betrachter:innen auf den Text darunter
Bilder mit viel Weiß und nur einem klaren Objekt statt zu viel Tumult gefielen dem Kunden immer am Besten. Auf einem Websitefoto sollte nicht zu viel am Bild passieren. Es ist besser, wenn es nur die Atmosphöre unterstützt anstatt abzulenken.
Oft besser Atmosphäre einfangen anstatt mit konkreter Abbildung abzulenken.
Es viel mir leicht, lächelnde Gesichter einzufangen, die beim Betrachten ein positives Gefühl erwecken sollen. Schwierig wurde es aber bei Unterthemen, die sich um z.B. Arbeitsverlust oder andere Schicksalsschläge dreht. Hier ist nicht sinnvoll fröhliche Personen abzubilden. Nachdem das Unternehmen nur eigene Angestellte und keine fremden Models auf der Website haben wollte, war dementsprechend schwer, ein ernstes bis betrübtes Gesicht vorzutäuschen. Das hat in diesem Projekt so nicht gut funktioniert.
Zu Betrachter:innen gewandte lächende Person VS. weggedrehte neutrale Person erzielen ein ganz anderes Feeling.
Statt traurigen Personen am Bild wurden schließlich neutrale Bilder verwendet.
Ich habe noch viel Luft nach Oben was Bildbearbeitung angeht. Während ich hier nur eine grundsätzliche Korrektur der Bildeinstellungen vorgenommen habe, könnte ich in Zukunft deutlich mehr Stimmung herausholen.
Wie schon in den letzten Blogposts klar wurde, beeinflussen Farben die Stimmung die wir aus einem Design herauslesen. Diese Stimmung kann passend zum Design und der gewollten Stimmung sein, oder auch etwas ganz anderes vermitteln als wir eigentlich wollen. Mit einem Experiment habe ich nun versucht mit Farben verschiedene Stimmungen zu erzeugen. Dazu habe ich ein Magazinlayout gewählt. Der Artikel behandelt das Thema “Regen bei Nacht” (Quelle: https://www.carpediem.life/31993/regen-bedeutung-2/). Man könnte also mithilfe des Designs nun versuchen, diese Stimmung einzufangen. Das habe ich in einem ersten Versuch ausprobiert. Durch die dunkelblaue Farbwelt könnte die richtige Stimmung vermittelt werden, eine nächtliche, ruhige Stimmung.
(Illustration: Kathrin Honesta, Text: RED)
passende Stimmung durch Farbgebung
Wir das ganze umgefärbt und das mit schwarzer Farbe, kann eine ganz andere Stimmung erzeugt werden. Es wird vielleicht noch immer ein Gefühl von “Nacht” vermittelt. Hier sind die Farben aber zu kräftig gewählt. Das helle weiß auf dunklem schwarz (was im Druck nochmal anders wirken würde) bildet einen zu starken Kontrast und lässt nicht mehr wirklich Platz für das eigentliche Thema.
schwarz/weiß
Schließlich könnten auch ganz andere Farben verwendet werden, die zunächst gar nichts mit dem Thema zu tun haben. In diesem Beispiel habe ich eine Version mit lila/rosa Tönen ausprobiert. In diesem Fall tragen die Farben nicht wirklich zu einer Stimmung bei. Im Gegenteil wirkt das Design so eher unrund und nicht passend, anstatt das gegensätzliche Stimmungen erzeugt werden.
andere Farben erzeugen andere Eindrücke
Als Fazit kann mal also sagen, dass mit den Farben durchaus Thematiken unterstützt werden können, um so ins Thema einzuführen und schon mal eine Grundstimmung herzustellen. Wird das nicht gemacht, geht zwar an Inhalt nichts verloren, an Stimmung jedoch schon. Das ist ungefähr das gleiche, wie an einem heißen Sommertag im Liegestuhl einen Tee zu trinken und im Winter unter der kuschligen Decke ein kühles Getränk mit Eiswürfel zu trinken. Funktioniert zwar aber passt irgendwie nicht ganz zusammen. Ähnlich scheint es im Design zu sein. Emotionales Design und Storytelling sind zwar für den Content oft nicht notwendig, tragen aber einen großen Beitrag zu Stimmungen und der Erfahrung bei.
Nach dem Experiment mit emotional Branding möchte ich mich in diesem Eintrag noch mal genauer dem Thema “Storytelling in Bildern” widmen. Also wie Bilder Geschichten erzählen können ohne dabei Wörter zu benutzen.
Das Interpretieren von Bildern und deren Emotionen ist sehr subjektiv und verschiedene Bilder können verschiedene Geschichten beschreiben. Emotionen sind dabei ein wichtiges Mittel um Geschichten und deren Inhalt zu formen. Ob eine Person im Bild traurig ist oder glücklich, kann schließlich eine ganze Handlung verändern.
Wie schon in einem letzten Artikel beschrieben kann eine chronologische Abfolge in Bildern sehr wichtig für das Storytelling sein. Durch Bewegung können so unterschiedliche Sequenzen entstehen und Bilder erzählen eher Geschichten als sehr statische Bilder. Auch das wollte ich in weiteren kleinen Beispielen ausprobieren.
Im Park gibt es immer viel Bewegung, die nur festgehalten werden muss. In den Bildern (Abb. 1) wurde explizit versucht die Bewegung festzuhalten und zu verstärken. Im Vergleich zu statischen Bildern von Personen, Tieren oder anderen bewegenden Objekten regen diese Bilder wahrscheinlich eher zu Geschichten an. Verstärkt man die Bewegung dann noch mit Illustrationen oder ähnlichem kann diese noch klarer in den Vordergrund gerückt werden. Im Vergleich dazu sieht man in Abb. 2 ähnliche Bilder die aber sehr statisch sind und so weniger Bewegung zeigen. Ob diese Bilder jetzt im Vergleich zu den Bildern mit mehr Bewegung weniger Storytelling beinhalten ist schwierig zu beantworten, aber persönlich sprechen mich statische Bilder häufig nicht so sehr an, wie Bilder in denen Bewegung vorkommt. In manchen dieser statischen Bilder war es auch schwierig keine Bewegung zu fotografieren, bzw. häufig beinhalten auch diese Bilder Bewegung, nur nicht so deutlich.
Quellen:
Li, N., Liu, B., Han, Z., Liu, Y. S., & Fu, J. (2019, June). Emotion reinforced visual storytelling. In Proceedings of the 2019 on International Conference on Multimedia Retrieval (pp. 297-305).
Lim, H., & Childs, M. (2020). Visual storytelling on Instagram: branded photo narrative and the role of telepresence. Journal of Research in Interactive Marketing.
Nun ist die Schrift The Minimalist soweit ausgestaltet, um deutsche und englische Texte setzen zu können. Sie verfügt über Versalien und Gemeine des lateinischen Alphabets, über die deutschen Umlaute und das scharfe ß, den Zahlensatz von 0 bis 9 sowie die Basis der notwendigen Interpunktionszeichen.
Gedanken zur Gestaltung
Das geometrische System, das der Schrift zugrunde liegt, besteht aus Rechtecken sowie Kreisen, Halb- oder Viertelkreisen mit bestimmten Breiten. Mit diesen Formen ließ sich der Großteil der Buchstaben problemlos und kohärent zeichnen. Herausforderungen waren zuerst alle Buchstaben, die eine Diagonale aufweisen – doch auch hier wurden für A, W und Y Lösungen gefunden, die mit Rechtecken und Kreisausschnitten funktionieren. Diagonalen wurden deshalb tatsächlich nur für Z und V benötigt. Diese wurden in Relation an die Strichstärke von Geraden und Kreisen angepasst. Neben den Diagonalen bricht auch das S aus dem geometrischen Baukastensystem aus. Hier wurde der Radius des Kreises zwar für die Form der versalen S-Bögen verwendet, jedoch der Schwung frei gezeichnet. Dass V, Z und S das starre System brechen, tut der Schrift jedoch gut – es belebt sie. Für A und H gibt es jeweils zwei unterschiedliche Balkenhöhen, für F, E, L und P jeweils eine eckige Variante als Basis und eine runde Variante als Open-Type-Feature.
Das Spacing
Buchstaben zu zeichnen ist bei der Schriftgestaltung nur die halbe Miete. Schon während der Gestaltung sollte an das Spacing gedacht und ansatzweise passende Werte eingetragen werden. „Spacing“ bezeichnet den Abstand zwischen den einzelnen Glyphen. Hierfür legt man einen bestimmten Abstand jeweils vor und nach dem Zeichen fest. D.h. der Abstand, der auf ein Zeichen folgt, ergibt zusammen mit dem Abstand vor dem nächsten Zeichen den Gesamtabstand. Um die richtigen Werte für das Spacing zu finden, geht man zunächst bei den Versalien von H und O aus. H steht stellvertretend für alle geraden Buchstaben, O für alle runden. Wichtig ist hier, dass die Schrift immer denselben Grauwert aufweist. Egal, ob Geraden aufeinander folgen oder Rundungen oder diese sich abwechseln. Zudem verträgt eine geometrische Hairline-Schrift wie The Minimalist auch einen größeren Zeichenabstand. Sie darf ruhig luftig sein. Hat man für H und O optimale Abstände gefunden, kann man diese auf die anderen Buchstaben übertragen. Beispiel: Bei einem D wird das Spacing des H für die linke Seite übernommen und das Spacing des O für die rechte Seite. Auch hier gibt es natürlich wieder Ausnahmen: Offene Buchstaben wie C, T oder S müssen jeweils in Relation zu den anderen eigens gespaced werden. Am besten übernimmt man jedoch die festgelegten Werte zunächst für alle Buchstaben und arbeitet dann direkt im Textmodus von Glyphs, gibt unterschiedliche Buchstabenkombination ein und passt die Werte wiederum durch Doppelklick auf ein Zeichen an. Die zuvor beschriebene Vorgangsweise wendet man nicht nur bei den Versalien an, sondern auch bei den Gemeinen. Auch hier sucht man sich zwei Buchstaben, die stellvertretend für gerade und runde Formen stehen und deren Spacing gut auf andere übertragen werden kann. In der Folge muss auch das Spacing für die Zahlen und die Interpunktionszeichen vorgenommen werden. Da The Minimalist über relativ „runde“ Geraden und relativ „gerade“ Rundungen verfügt, weichen die Spacingwerte gar nicht so sehr voneinander ab. Es fanden sich relativ schnell stimmige Werte sowohl für die einzelnen Buchstaben und Zahlen als auch die Interpunktionszeichen. Ein Glück, denn Spacing kann durchaus einen langen Atem benötigen!
Beim Spacing geht man in der Regel von zwei Buchstaben aus, die für die Gruppe der geraden und jene der runden exemplarisch sind. Bei den Versalien sind das H und O.
Der Charakter von „The Minimalist”
Die Schrift hat zugleich harmonische und exzentrische Züge. Sie ist eine Display-Font, die in großen Größen ab circa 20 Punkt verwendet werden sollte, da sie bei Fließtexten in kleineren Schriftgrößen schwer lesbar ist. Inspiriert ist die Schrift natürlich zunächst vom ausgehenden Signage, das im vorhergehenden Blogbeitrag gezeigt wurde. Ihr Charakter soll aber auch Eleganz und Simplizität vereinen – wie es Coco Chanel tat. Dieser Vergleich mag anmaßend klingen, soll es aber nicht. The Minimalist versucht nicht, sich an den Großen da draußen zu messen. Ganz im Gegenteil: Die Schrift ist eine Hommage an die Inspiration und das Sich-Ausprobieren. Hätte sich Gabrielle Chanel nicht am Schneidern versucht, wäre sie niemals als Coco in die Geschichte eingegangen. Chanel war eine Rebellin, die zu dem stand, was sie war und vor allem, was sie sein wollte. The Minimalist soll genau dieses Gefühl vermitteln: Es geht nicht darum, sich im Opulenten zu wälzen, sich üppig zu schmücken, sondern vielmehr sich auf das Essentielle zu beschränken. Die Qualität über die Quantität stellen und dabei das Schöne am Wenigen – am Minimalistischen – erkennen. Die langen Geraden des Lebens wollen mit den vielen Rundungen, ob hoch oder tief, verbunden werden. Auf Chichi wird gerne verzichtet. Manchmal fällt man, wie das s, dabei auch aus der Reihe. Aber auch das ist völlig okay.
The Minimalist ist auch eine Hommage an Gabrielle Chanel, die Eleganz und Simplizität zu vereinen vermochte. Wenn nur die Linie bleibt, kann das auch aussehen wie diese Schrift: The Minimalist.
I am going to kick off with a phrase from Viktor Baltus, he is a typography guru who gives very interesting talks and online classes, and in it’s last course he mentioned something, which describes my topic very well:
“Everyone can look at a laid outspread and judge if it’s professionally done, it’s harder to quantify that professionalism. Why do some layouts work and others do not? And more importantly, how can you recreate that professionalism?– Viktor Baltus
This semester I want to focus on designing layouts, and how style changes are perceived by the audience,I will also include a lot of typography and compositions.
“A grid is only useful if it is derived from the material it is intended to handle.” – Derek Birdsall
The secret to professional-looking designs lies in the arrangement of visual elements and how they are positioned in relation to each other. It’s a combination of layout and grids. The words layout and grid are related but are different things. The layout is the overall way of presenting your text and images and includes things like size and product. Grids are the backbone of a layout and are used to create the hierarchs of your text, images, and other visual elements. So in this post I played a lot with different grids and created random layouts out of it. Following I am going to list some of the most common grids which are used as a base to create layouts out of it.
Gutenberg Grid
Golden Ratio
Fibonacci Sequence
Fibonacci Sequence as a Grid
Rabatment Composition
Not every design needs a perfect Golden ration of 1:1.61. A lesser known composition method can often replace this theory and is called Rabatment. Rabatment is a composition method that consist of overlapping squares in a horizontal or vertical rectangle, regardless of the dimensions. When you overlap two Rabatment squares in a rectangle, they create another rectangle. We call this secondary Rabatment.
In layouting, this method can help you align columns and images for structured look. Following there will be shown how this grid can be applied.
Rules of third Rules of third can be used to align elements to either the lines or the cross sections for a better composition. Because we’re so familiar with perceiving the world this way, looking at a layout which is in line with the Rule of Third is often pleasing to the eye.
Gestalt Theory
Besides all the mentioned mathematical and optical composition theories there is an another theory: Gestalt, the psychological theory behind compositions.
Simplicity
The theory of simplicity states that forms are easiest perceived in its simplest form. We see this clearly when looking at typography: Letters that are grouped together form words; letters that are separated on your artboard are more actively perceived as single shapes. A good layout design makes use of simplicity to balance the components on your artboard.
Figure Ground
The figure and ground theory will help you make your layout more dimensional. The so-called „figure“ is often perceived by the mind as the focused object white the „ground“ is automatically placed in the background. A figure doesn’t have to be an actual figure, it simply indicates the text, image, or another object that the observer should pay most attention to. The ground frames this element so it stands out more. Keep in mind that convex elements are often perceived as figures while concave elements are often perceived as ground elements.
Proximity and similarity
Elements that stand in close proximity to each other are often perceived as being from the same group. This does not only apply to columns or images but also to elements that have a similar shape, color, direction, or font size. When designing a layout, for instance, a music program with lots of information about the music, times, and musicians, it will help the viewer better understand the structure if items about the same event or grouped together or when all times are displayed in a timeline.
Symmetry
Design elements that are symmetrical are perceived as part of the same group. We can see this in the layout of spreads, where the right page is mirrored copy of the left. This can also be applied to the layout of elements that have the same value in terms of importance.
Continuity
Design elements that are aligned with each other are. perceived as being from the same group. The example above has letters of the title missing, but because they are placed in line with the beginning of the word, we can extend the word easily in our mind. The sam theory can be applied to placing the columns on different fields of the modular grid, forming a structure the viewer can follow.
Connectedness
Connecting elements like lines, dots, and shapes are perceived as connected. A good example of this theory can be found in the layouts of infographics, flowcharts, or timelines, where arrows, lines, and dots help connect one topic to the next.
As seen, there are endless possibility to make layouts based on grids.
So I wanna end this post with a phrase from Massimo Viglenni: „Styles come and go. Good design is a language, not a style“
Wie im vorherigen Beitrag beschrieben, widmet sich dieses Type Design-Experiment der Gestaltung einer Schrift auf Basis eines bestehenden Schriftzugs, dessen Ursprung jedoch unbekannt ist. In diesem Beitrag möchte ich die Vorgehensweise der Gestaltung der ersten Buchstaben beleuchten.
Gemeinsame Formen erkennen und nachzeichnen
Zuerst habe ich das Bild auf einer Illustrator-Zeichenfläche platziert und die Formen nachgezogen (siehe Abb. 1). Da die Buchstaben aus einfachen Geraden und regelmäßigen Bögen bestehen, versuchte ich, alle Lettern des Wortes „lyric“ mit einem Rechteck bzw. Halbkreis nachzuzeichnen. Diese beiden Formen zog ich dann als Basis für alle weiteren Formen heran. Dass die Schrift eine Hairline werden sollte, ergab sich natürlich aus dem bestehenden Schriftzug.
Abb. 1 // Formen im Illustrator
Um ein Gespür für die angedachte Formensprache zu entwickeln, wechselte ich die digitale Software gegen Bleistift und Papier und fing an, Buchstaben zu skizzieren – soweit wie möglich immer aus Geraden in 90°-Winkeln und Bögen bestehend (siehe Abb.2 und Abb. 3). Für den Großteil der Versalien sowie Gemeinen funktionierte dieser Ansatz überraschend gut, sodass bald viele Buchstaben des Alphabets ihre Form erhielten. Als schwierig entpuppten sich vor allem jene Buchstaben, die Diagonalen enthielten – X, Y, W, Z – sowie auch S und K, jeweils als Groß- und Kleinbuchstaben, da diese das grafische System sprengten und nach alternativen Formen verlangten, die mit den bereits bestehenden trotzdem harmonierten. Als die Skizzen für Versalien und Gemeine soweit standen, wechselte ich wieder an den Laptop, in die Type Design-Software Glyphs.
Abb. 2 // Erste Skizzen des Alphabets mit Bleistift und Papier
Erste Buchstaben in Glyphs
Da die Glyphen in Glyphs auf quadratischen Zeichenflächen von 1000px x 1000px angelegt werden, hatte ich auch die Zeichenflächen im Illustrator bereits in diesen Größen festgelegt. So musste ich die Formen, die ich zunächst im Illustrator gezeichnet hatte, in Glyphs nicht mehr skalieren. Die Klein- und Großbuchstaben waren in Glyphs bereits angelegt. So kopierte ich jeweils die Formen für l, y, r, i und c in die dafür vorgesehenen Felder. Ich startete mit dem l, bestehend aus einem Rechteck und einem Halbkreis. Ich schob die Formen dabei lediglich ineinander und wandelte sie nicht in eine durchgehende Form um. Dies ermöglichte mir die weitere flexible Verwendung der beiden Formen für alle anderen Buchstaben. Obwohl es sich in diesem Fall um eine Grotesk handelt, beschloss ich, die Oberlänge der Gemeinen höher zu setzen als die Höhe der Versalien – eigentlich etwas, das vor allem bei Serifenschriften der Fall ist. Bei Sans Serif-Schriften kann darauf verzichtet werden. Da meine Schrift aber einem sehr strikten grafischen System zugrunde liegt, wollte ich bewusst Akzente setzen, die für Lebendigkeit im Schriftbild sorgen.
Schritt für Schritt zeichnete ich mit den Formen die weiteren Buchstaben des Wortes „lyric“ und legte bereits an dieser Stelle für alle Buchstaben ein Spacing fest, das in etwa passen konnte (siehe Abb.3 bis Abb. 8). Auch wenn es an dieser Stelle noch nicht möglich war, ein finales Spacing vorzunehmen, war es mir wichtig, bereits hier für einen Rhythmus zwischen den Buchstaben zu sorgen, der die Luftigkeit der entstehenden Hairline-Schrift spiegelte. Kontrollieren konnte ich dies durch das Text-Werkzeug in Glyphs, mit dem man sogleich die ersten gezeichneten Buchstaben tippen und gegebenenfalls auch im Vergleich zu den anderen Buchstaben Korrekturen an den Glyphen vornehmen kann. Welche genauen Werte für das Spacing notwendig sein würden, konnte ich jedoch erst auf Basis mehrerer Buchstaben feststellen.
Abb.3 bis Abb. 8 // Die ersten Buchstaben der Hairline-Schrift in Glyphs
Weitere Schritte
Bis zum nächsten Beitrag möchte ich alle Versalien sowie Gemeinen, Umlaute und teilweise Interpunktionen gezeichnet haben und diese präsentieren. Im Zuge dessen werde ich auch das Spacing vornehmen – und je nach Bedarf das Kerning gewisser Buchstabenpaare.
Formen werden bestimmten Bedeutungen zugeschrieben, die sich in etwaigen Kulturkreisen unterscheiden. Stickereien können dabei diese Kulturkreise beschreiben. Gerade in den slawischen Völkern, sind geometrische Formen tief verwurzelt und können in verschiedenen Abwandlungen anders interpretiert werden. Eine der größten Hürden in der Komposition von Ornamenten, ist die präzise Verarbeitung. Es reichen wenige Millimeter an Abweichung, um das gesamte Muster zu zerstören. Viele Jahre an Erfahrung und Übung sind nötig, um exakte Sticktechniken perfekt zu beherrschen. Durch die heutige Technologie, ist es uns möglich eine Annäherung zu dieser erstrebenswerten Perfektion zu gelangen, denn was die menschliche Hand nicht zu 100% schafft, ersetzt eine Maschine.
In diesem Experiment wurden in zwei verschiedenen Programmen getestet, in wie weit ein Ornament perfekt generiert werden kann. Das Ornament besteht aus einem Quadrat, dass mittig positioniert ist und aus vier halbierten Quadraten, die dieses umkreisen. Der Abstand zwischen dem mittigen Quadrat und seinen halbierten Quadraten, beträgt die Breite der Linien.
1. Adobe Illustrator
Als Communcation Designer, ist die Verwendung von Adobe Illustrator gang und gäbe. Tatsächlich besitzt das Programm einige Lücken was die präzise Ausführung des Ornaments betraf. Viele die Illustrator verwenden, kennen das Problem: das Programm, schafft es nicht genau zu zeichnen. Digital kann das Ornament zwar exakt aussehen, würde dieses aber gedruckt werden, kann das Programm nicht garantieren, dass es nicht zu leichten Abweichungen kommt. Wenn wir sehr nahe an das Ornament heranzoomen, kann eine Abweichung erkannt werden, die sich sehr schwer korrigieren lässt.
2. Processing
Abhilfe hier kann tatsächlich das Programm Processing schaffen. Durch Coding können mathematisch exakte Formen konstruiert werden. Dafür wurde ein Code generiert, der sich in allen möglichen Maßen abändern lässt. Lediglich die Werte im Code müssen ausgetauscht werden. Die Form bleibt jedoch bestehen.
for (int i = 0; i <= 3; i++) { rect(0-50, 0+200, -25, -100); rect(0-50, 0+100, 125, 25); rect(0+50, 0+100, 25, 100); rotate(radians(90)); }
Welche Methode für das generieren von geometrischen Formen genutzt wird, ist besonders eine Entscheidung der eigenen Fähigkeiten und Präferenzen. Nicht jeder kann Codieren und das Erlernen davon, kann auf den ersten Blick sehr abschreckend wirken. Nichts desto trotz, ermöglicht Coding genaueres Arbeiten und kann so für bestimmte Projekte, für die es wirklich auch Sinn macht, genutzt werden.
In diesem Blogbeitrag möchte ich allgemeine Learnings bezüglich emotional Design in der Praxis festhalten. Durch ein erstes Experiment in dem ich emotional Design auf Social Media angewandt habe – bzw. versucht habe einen Instagram Account emotionaler zu designen wurden einige grundlegende Konzepte für emotionales Design bestätigt. Zumindest für mich. Durch das Explorieren, ob man einen Feed für ein wenig emotionales Thema emotionalisieren kann, konnte ich einiges Lernen.
Farben erzeugen Stimmung
Klar ist, dass Farben gewisse Stimmungen erzeugen können, das ist nichts Neues. Aber gerade für emotionales Design kann diese Tatsache genutzt werden, um die richtigen Farben für die richtige Stimmung auszuwählen. Ich hab mich für den Instagram Account für die Getreidemühle dazu entschieden mit warmen, pastelligen Tönen zu arbeiten, die aus der Natur inspiriert sind. Zum einen schafft das Verbundenheit zum Thema, zum anderen wird eine frische, sommerliche, fröhliche Stimmung ausgelöst. In den Farben wird die Natur, das Getreide und Wärme aufgegriffen, was einen Feed stimmiger machen kann, als hätte ich dunkle, knallige Farben gewählt. Je nach Farbwahl entsteht also ein anderes Gesamtbild, und somit eine andere Stimmung. Deswegen sind Farben für emotionales Design also auf jeden Fall entscheidend.
Bilder sorgen für Authentizität
Die Auswahl der Bilder kann entscheidend sein. Vergleichen wir Stock Bilder und natürliche, authentische Bilder. Stock Bilder wirken oft sehr gestellt, oder eingefroren in der Bewegung. Es herrscht wenig Dynamik und Freiraum in den Bildern, weshalb auch weniger eine Geschichte durch ein Bild erzählt wird. Werden hingegen Bilder gewählt, die Bewegung enthalten, die nicht gestellt oder perfekt sind, kann eher Authentizität vermittelt werden und die Bilder erzählen Geschichten oder vermitteln Stimmungen. Oftmals ist es nicht möglich, dass jedes Bild Bewegung enthält oder eine Geschichte erzählt, wie ich in meinem Experiment gemerkt habe. Gerade dann ist es wichtig, dass die Bilder eine einheitliche Farbwelt besitzen und zueinander passen und stimmig sind. Wie schon bei den Farben erwähnt – das Gesamtbild ist entscheiden für die Stimmung die vermittelt wird.
Verschiedene Ästhetiken
In den letzten Recherchen hab ich mir immer wieder die Frage gestellt, wie wirklich emotionales Design in der Praxis aussehen kann. Wie kann emotionales Design über reine Ästhetik, Farbwelt und Bildwelt hinausgehen um Stimmung zu vermitteln und Menschen positive oder negative Emotionen zu vermitteln. Dazu habe ich noch keine richtige Lösung oder Anleitung gefunden, aber vermutlich ist es für den Anfang wichtig, dass all diese Teilbereiche zusammenspielen und ein einheitliches, stimmiges Gesamtbild zu schaffen, um den noch einen Schritt weiter zu gehen, um mit Storytelling, Wording etc. ein emotionales Bild zu kreieren. Als kleines zusätzliches Experiment habe ich also unterschiedliche Ästhetiken im Design ausprobiert, weil ich mich gefragt habe ob auch diese verschiedene Stimmungen vermitteln können. Zum einen das Logo, wie es schon feststand. Zum anderen ein sehr florales, verspieltes, feminines Logo, was auf den ersten Blick wenig zum eigentlichen Thema und zu der Firma passt. Trotzdem ist der Versuch interessant, denn vermutlich könnten so ganz unterschiedliche Zielgruppen angesprochen werden, je nach dem wie das Corporate Design aussieht oder wie Verpackungen gestaltet sind. Auch das ist interessant zu bedenken, dass Design immer an die Zielgruppe angepasst sein muss, und so entweder funktionieren kann oder nicht. Genauso ist es mit emotionalen Design. Das kann nur funktionieren, wenn Designs an die Zielgruppe abgestimmt sind und an deren Verständnis von Ästhetik, ansonsten wird man diese Gruppe nicht erreichen.
Auf Basis einer Wortmarke soll eine gesamte Schrift entstehen
Mit meinem letzten Blogbeitrag habe ich den aktuellen Zeichensatz meines ersten Type Design-Experiments vorgestellt – der Variable Font „Play“. Auch wenn für „Play“ noch viel Muse und Zeit aufgebracht werden müsste, um daraus eine wirklich solide Variable Font zu machen, habe ich beschlossen, dieses erste Experiment vorerst abzuschließen, da ich noch weiter in der Schriftgestaltung experimentieren möchte.
Ausgangspunkt zum zweiten Experiment
Als zweites Type-Experiment möchte ich eine weitere, dieses Mal jedoch statische Schrift gestalten. Unter der Anleitung des Lehrbeauftragten der FH Joanneum Daniel Perraudin habe ich mich auf die Suche nach Straßenschildern in Graz sowie einzelnen Wortabbildungen im World Wide Web begeben, die mich zur Gestaltung einer Schrift inspirieren würden. Die Idee dabei ist, nur ein Wort, bestehend aus wenigen Buchstaben, zu finden, die wiederum die Grundlage für eine gesamte neue Schrift bilden. Im besten Fall sollte es sich dabei um Custom Logos, also speziell gezeichnete Wortmarken, handeln, damit die daraus entstehende Schrift neue Züge aufweist und keine Kopie einer bereits bestehenden Schrift wird. Natürlich ist es schwierig, eine völlig neue Schrift zu gestalten, die sich von der bestehenden Fülle an Schriften völlig abhebt. Dies ist hier auch nicht der vorrangige Anspruch. Vielmehr geht es in diesem Projekt darum, sich mit der Form einiger weniger gegebener Buchstaben eingehend zu befassen, diese zu analysieren und ihren gemeinsamen Charakter herauszufiltern. Von diesen inhärenten Merkmalen ausgehend bzw. ableitend, sollen dann alle fehlenden Zeichen des Alphabets (Versalien und Gemeine) sowie auch Interpunktionszeichen und Zahlen gezeichnet werden.
Herausforderungen des Projekts
Die größte Herausforderung liegt im Herausfiltern der Eigenschaften und der Ableitung signifikanter Merkmale für ein grafisches System, das auf den restlichen Zeichensatz anzuwenden ist. In der Gestaltung einer Schrift geht es nicht nur um das Zeichnen einzelner Buchstaben, sondern vor allem auch um ihre Verwandtschaftsbeziehung. Höhen und Breiten, Rundungen und Stämme stimmen zwischen Buchstaben ähnlicher Form überein, damit die Schrift als einheitlich wahrgenommen wird. Darüber hinaus gilt es auch für das Spacing der Buchstaben sowie das Kerning einzelner Buchstabenpaare eine Einheitlichkeit zu finden, die den Satz homogen wirken lässt. Um diese Homogenität möglichst effizient zu erzielen, startet man in der Regel mit der Gestaltung jener Buchstaben, aus denen möglichst viel abzuleiten ist: dem kleinen n für die Gemeinen (x-Höhe, Kontrast und Bogenrundung) sowie H und O für die Versalien (Stamm bzw. Bogenrundung und dessen Übertretung der Grundlinie und Versalhöhe). (Vgl. Grabner: 2018, 30–41) Da im vorliegenden Projekt bereits Buchstaben gegeben sind, gilt es nun umgekehrt von diesen ausgehend einzelne Details abzuleiten und wiederum eine konstante Linie zu entwickeln.
Vorlage für die Schriftentwicklung
Nachfolgend zeige ich die Abbildung, die als Grundlage für die Schrift dienen wird.
Abb.1 Eine Wortmarke an einer Mauer als Basis für eine neue Schrift
Das Bild zeigt ein Logo als Signage an einer Betonmauer und stammt aus dem Internet. Es handelt sich dabei um eine sehr reduzierte Groteskschrift. Die Einfachheit der Schrift sagt dabei jedoch wenig bis nichts über die Schwierigkeit der Schriftgestaltung aus. Groteskschriften mögen einfacher in ihrer Form scheinen als Serifen-Schriften, jedoch verzeiht die Gestaltung keine Makel:
„Schriftgestalter bemerken schnell, dass sich die Fehlertoleranz bei diesen Schriften jedoch verringert. Wo das menschliche Auge nicht durch Details wie Serifen geleitet wird, fällt der kleinste Fehler in der Proportion, im Grauwert oder in der Balance sofort ins Gewicht und wird wahrgenommen.“ schreibt Valentina Grabner (2018:31) in ihrer Masterarbeit zur Entwicklung ihrer Schrift Diva Olivia. Oder kurz: „Schlichte Eleganz macht die meiste Arbeit.“ so Karen Cheng (2014:114).
Warum gerade diese Wortmarke?
Zugegeben: Es gäbe in Graz eine Vielzahl an alten Wortmarken an Hausfassaden, Tür- oder Geschäftseingängen, die ebenso gut Ausgangspunkt dieses Projektes sein hätten können. Warum also ein Bild aus dem Internet? Ich wollte schlicht nicht „irgendein“ Logo heranziehen, sondern eine Wortmarke, die ich selbst als überaus ansprechend und ästhetisch empfinde. Viele der alten Wortmarken, die ich auf einem Spaziergang durch Graz fand, waren üppig gestaltet, laut und schrill oder mit Schnörkel verziert. Mich selbst zieht es jedoch immer zur reduzierten Gestaltung. Ich stelle mir oft die Frage: Was kann meine Gestaltung noch entbehren? Was braucht sie eigentlich nicht, um trotzdem vollends das zu kommunizieren, was sie soll? Ganz im Sinne von Antoine de Saint-Exupéry, der sagte: „Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen, sondern wenn man nichts mehr weglassen kann.“ Was der Schriftsteller in seinen nur 44 Lebensjahren erkannte, ist zu einer leitenden Denke vieler heutiger Designer:innen geworden. Dem Maximalismus steht der Minimalismus gegenüber, der Reduktion und Simplizität zu seinem Leitbild erklärt hat.
Der Designer Ken’ya Hara strebt mit seinem Gestaltungsansatz über diesen westlichen Minimalismus noch hinaus und folgt dem japanischen Konzept des „kanso“: „[Japanese Design is]fundamentally different from the European version of simplicity because Japanese minimalist design was not the result of pursuing the most rational, functional design.“, so Hara. Er führt weiter aus: “For the Japanese, it was a conscious, strategic materialization of nothing-ness. It was a careful process of eliminating each and every excessive frill in order to create an empty vessel, at once a vacuum but with a powerful center of gravity, toward which people’s consciousness and creativity would be drawn.” Er nennt diese Art des Gestaltens aus diesem Grund nicht Minimalismus, sondern „kanso“, was auf Japanisch so viel bedeutet wie „keine Rüschen, einfach und rein„ oder emptiness“, also Leere.
Haras Vorstellung geht dabei weit über die erleichternde Reduktion auf das Wesentliche hinaus. Er bringt sein Konzept mit einem ökonomischen Vorteil in Verbindung, der die Zukunft maßgeblich beeinflussen soll:
He [Ken’ya Hara ] believes that locally unique aesthetics such as [the Japanese] “emptiness” can be critical economic resources to elevate our future beyond today’s materialistic society created by the globalized economy. He reminds us that “aesthetics” – our own ability to find beauty, excellence and happiness through our own senses and behaviors – has always been the third “hidden” button, after natural resources and resources, that we push to advance technology and quality of life, especially in Japan. We just forgot the importance of aesthetics as we busied ourselves in the game of economic efficiency. Now it is time to shift our focus towards aesthetics, suggests Hara, now that the ROI of efficiency-driven economic system is rapidly diminishing and our world is starting to suffer from its side effects such as resource constraints and climate change. Hara believes that by letting our world compete based on aesthetics, not the GDP, we could re-define affluence and happiness. (vgl. Fuji: 2017)
Hara propagiert also einen Paradigmenwechsel. Nach der Ausbeutung natürlicher und vom Menschen erzeugter Ressourcen zum Zwecke des technologischen Fortschritts sollen nun lokale Ästhetik-Konzepte wie das japanische „Kanso“ genützt werden. Nicht durch ein Immer-mehr, Immer-größer, Immer-schneller, sondern durch ein System des wertschätzenden Wettbewerbs ästhetischer Konzepte könnten nachhaltiges Glück und nachhaltiger Reichtum erreicht werden.
Geprägt von Haras Gedanken hat sich meine Suche nach einer geeigneten Wortmarke als Basis für eine Schrift sehr an feinen Formen und Linien orientiert, die Buchstaben nur soweit zeichnen wie es nötig zu sein scheint. Ich frage mich: Mit wie wenigen Strichen kann eine Schrift auskommen und trotzdem spannend bleiben? Jedenfalls möchte ich meiner Schrift Raum zum Atmen und Spielraum für Interpretation geben. Während sich andere Schriften vielleicht an den gestalterischen Merkmalen vergangener Kunstepochen orientieren oder ein ganz bestimmtes Gefühl erzeugen sollen, möchte ich meiner Schrift möglichst viel „Leere“ schenken. Ihre Herkunft und ihr Charakter sollen nicht in, sondern zwischen den Zeilen gelesen werden.
Quellenverzeichnis
Cheng, Karen. Anatomie der Buchstaben. Basiswissen für Schriftgestalter. 2. Auflage. Mainz: Verlag Hermann Schmidt, 2013
Fuji, Mihoyo. Kenya Hara and the aesthetics of “emptiness” [online]. 17.02.2007. In: zero = abundance. design your own happiness. Letzter Zugriff am 24.04.2022. Verfügbar über: https://www.interactiongreen.com/kenya-hara/
Grabner, Valentina. Diva Olivia. Ein Werk über eine Schrift, welche die Theorie sucht und scharfsinnig, elegant in die Welt hinausruft, unv. MA. Fachhochschule Joanneum, 2018.
Abb.1: Eine Wortmarke an einer Mauer als Basis für eine neue Schrift. Quelle: Pinterest / Urheber anonym
