Connect with us

UX/UI & Webdesign

So strukturierst du Texte am besten


Mit einer Typographischen Hierarchie bestimmst du, wie die Nutzer die Informationen auf deiner Website aufnehmen, verarbeiten und behalten.

Ob in Büchern, Zeitschriften, auf Plakaten oder Websites: Tagtäglich wirst du mit Texten konfrontiert. Dabei fällt es dir bei einigen Texten leichter Informationen zu erfassen als bei anderen. Woran liegt das?

Die Typographische Hierarchie ist der Schlüssel dafür, wie du Informationen aus Texten aufnimmst, verarbeitest und behältst. Und das geht nicht nur dir so: Auch für die Nutzer deiner Website ist ausschlaggebend, wie du die Texte deiner Website gestaltest und organisierst.

Aber was genau verbirgt sich eigentlich hinter dem Begriff „Typographische Hierarchie“? Und warum ist sie so entscheidend für ein effektives Design?

In diesem Artikel erfährst du, was eine Typographische Hierarchie ist, welche Elemente sie beinhaltet und wie du sie auf deiner Website einsetzen kannst.

Was ist eine Typographische Hierarchie?

Du kannst die Typographische Hierarchie als ein Konzept des Graphikdesigns verstehen. Es hilft dir dabei, alle Informationen in deinem Design zu organisieren, sodass es für deine Nutzer leichter wird, die Bestandteile deines Textes nach Wichtigkeit zu identifizieren und zu verstehen. Mit dieser Anordnung hast du einen großen Einfluss auf das, was vom Leser wahrgenommen wird. Aber was bedeutet das genau für dich?

Stell dir vor, du hast zwei Textblöcke: In einem schreibst du alles in der gleichen Schriftgröße, ohne erkennbare Struktur oder Hervorhebungen, während im anderen Titel, Untertitel und Fließtext klar voneinander abgesetzt sind. Der Unterschied? Im zweiten Fall wurde mit der Typographischen Hierarchie gearbeitet, die es dir ermöglicht, sofort zu erkennen, worum es geht und welche Informationen die wichtigsten sind.

Folgende Faktoren eines Textes sind dafür ausschlaggebend:

  • Schriftart
  • Schriftgröße
  • Schriftfarbe
  • Schriftschnitt
  • Platzierung von Absätzen
  • Zeilenabstand
Typographische Hierarchie: So strukturierst du Texte am besten 1Typographische Hierarchie: So strukturierst du Texte am besten 1
Die Typographische Hierarchie im Webdesign.

Dieses Verfahren unterteilt Informationen nach ihrer Wichtigkeit durch den Einsatz verschiedener Gestaltungselemente wie Schriftgröße, -stärke und -farbe. Die wichtigsten Informationen oder Überschriften werden oft größer und fett gedruckt gestaltet, um die Aufmerksamkeit auf sich zu ziehen, während der Fließtext in einer kleineren, leichter lesbaren Schriftart präsentiert wird. Diese Strukturierung hilft nicht nur dabei, den Inhalt übersichtlicher zu gestalten, sondern beeinflusst auch das Leseverhalten und die Informationsaufnahme.

Ein weiterer wesentlicher Faktor der Typographischen Hierarchie ist die Anordnung der Texte. Wichtige Informationen werden an prominenter Stelle platziert, um sicherzustellen, dass sie vom Betrachter sofort wahrgenommen werden. Dies kann durch zentrierte Ausrichtung, Platzierung am Seitenanfang oder durch besondere Hervorhebungen geschehen. Das Layout einer Website sollte daher auf keinen Fall dem Zufall überlassen werden. Viele Unternehmen sehen eine perfektionierte Texthierarchie heutzutage als wichtiges Marketingelement an.

Was sind die Elemente der Typographischen Hierarchie?

Jetzt fragst du dich, welche Elemente die Lesbarkeit eines Textes beeinflussen können. Um eine klare und ansprechende Botschaft zu vermitteln, ist es essenziell, diese Elemente geschickt einzusetzen. Eine Hierarchie hilft dir, den Inhalt so zu strukturieren, dass Leser intuitiv verstehen, wo sie anfangen und anschließend weiterlesen sollen.

Hier sind die Schlüsselelemente, die du berücksichtigen solltest:

Größe

Die Schriftgröße ist oft der erste Anhaltspunkt für Designer. Größere Schriftarten signalisieren Wichtigkeit und werden für Titel und Überschriften verwendet, während kleinere Schriftarten für den Fließtext und Nebeninformationen genutzt werden.

Typographische Hierarchie: So strukturierst du Texte am besten 2Typographische Hierarchie: So strukturierst du Texte am besten 2

Groß-/Kleinschreibung

Die Verwendung von Großbuchstaben in Überschriften und Zwischenüberschriften ist eine einfache Methode, um verschiedene Textabschnitte voneinander abzuheben. Allerdings sollte mit Großschreibung im Fließtext sparsam umgegangen werden. Wenn dein gesamter Text in Großbuchstaben erscheint, kann er schwer leserlich erscheinen oder sogar negativ aufgefasst werden.

Typographische Hierarchie: So strukturierst du Texte am besten 3Typographische Hierarchie: So strukturierst du Texte am besten 3

Farbe

Farbliche Anpassungen sind ein mächtiges, oft unterschätztes Werkzeug zur Etablierung einer Hierarchie. Durch den Einsatz von Farbtonvariationen kannst du die Informationsebenen effektiv differenzieren.

Typographische Hierarchie: So strukturierst du Texte am besten 4Typographische Hierarchie: So strukturierst du Texte am besten 4

Fettungen

Durch die Verwendung von fetteren oder dünneren Schriftarten kannst du eine visuelle Hierarchie schaffen, die selbst Laien sofort erkennen.

Typographische Hierarchie: So strukturierst du Texte am besten 5Typographische Hierarchie: So strukturierst du Texte am besten 5

Stil

Stilistische Variationen innerhalb einer Schriftart, wie kursiv oder fett, dienen dazu, bestimmte Elemente hervorzuheben oder einen einzigartigen visuellen Ton zu setzen.

Abstand

Gezielter Weißraum verbessert nicht nur die Klarheit des Textes, sondern baut auch eine effektive Typographische Hierarchie auf. Sowohl der Zwischenwort- als auch der Zeilenabstand sind dabei entscheidend.

Kontrast

Nicht nur Farbkontraste, sondern auch Kontraste in Schriftgröße, -gewicht und -stil sind wichtig, um verschiedene Textabschnitte hervorzuheben.

Position

Die Positionierung von Textelementen definiert ihre Rolle und Bedeutung innerhalb der Hierarchie. Zentrierter Text oder außergewöhnlich platzierte Zitate können Aufmerksamkeit erregen und die Wichtigkeit signalisieren.

Diese Elemente zusammen schaffen eine übersichtliche Informationsstruktur, durch die du deine Leser führen kannst. Jedes Element trägt dazu bei, die Lesbarkeit und das Verständnis deines Designs zu verbessern, indem es eine klare, visuelle Anleitung bietet, welche Informationen zuerst gelesen werden sollen und wie die Leser durch den Inhalt navigieren können.

Die typografische HierarchieDie typografische Hierarchie
Die typografische Hierarchie im Überblick

Wie erstelle ich eine Typographische Hierarchie auf meiner Website?

Eine Typographische Hierarchie auf deiner Website zu erstellen, beginnt mit einem klaren Verständnis deiner Inhalte und dem, was du kommunizieren möchtest.

Für eine gute Texthierarchie ist es entscheidend, dass du die verschiedenen Elemente kennst, weißt, auf welchen Ebenen sie sich bewegen und wie du das Leserverhalten damit beeinflusst. Bevor du Texte auf deiner Website einsetzt, solltest du dir also Gedanken darüber machen, welche Informationen du vermitteln möchtest und wie du diese rüberbringen willst.

Zuerst definierst du die verschiedenen Ebenen deiner Information:
Überschrift, Zwischenüberschriften und Fließtext.

Webtypografie für anspruchsvolle DesignsWebtypografie für anspruchsvolle Designs

An erster Stelle deiner Hierarchie steht die Überschrift, die groß, fett und auffällig sein sollte, um die Aufmerksamkeit der Leser auf sich zu ziehen und sie zum Weiterlesen zu animieren. Du kannst auch mit der Schriftfarbe variieren. Die Schriftgröße sollte mindestens doppelt so groß wie die des Fließtextes sein, wobei ein zusätzlicher Zeilenabstand die Lesbarkeit verbessert. Wähle eine klare, wirkungsvolle Schriftart und halte den Kopfzeilentext prägnant.

Zwischenüberschriften dienen auf zweiter Ebene als Verbindung zwischen der Überschrift und dem Fließtext. Sie schaffen Kontext und können die Überschrift im Detail ausführen. Auch sie sollten sich visuell von der Überschrift sowie vom Fließtext absetzen. Ihre Schriftgröße sollte mindestens 1,5-mal größer als die des Fließtextes sein. Du kannst sie etwas fetter gestalten, aber weniger dominant als die Überschrift.

Erst dann steht der Fließtext – auch wenn er den Großteil der Informationen trägt. Die vorgelagerten Ebenen sind allerdings wichtig, um die Leser erstmal in den Text zu ziehen und ihnen immer wieder Einstiegsmöglichkeiten zu bieten.

Priorität hat in deinem Fließtext die Lesbarkeit!

Readability TypografieReadability Typografie
Die Typographische Hierarchie im Einsatz – Texte werden strukturiert, übersichtlich und lesbar.

Die Schriftgröße sollte auf allen Bildschirmen und Geräten gut lesbar sein (mindestens 16, besser 18 px). Eine klare, einheitliche Schriftart und hoher Farbkontrast zum Hintergrund verbessern die Zugänglichkeit.

Farben, Gewichtungen und Stilvariationen kannst du nutzen, um wichtige Punkte hervorzuheben oder Links zu kennzeichnen. Spacing, also der bewusste Einsatz von Abständen zwischen Buchstaben, Wörtern und Absätzen, verbessert die Lesbarkeit und trägt zur visuellen Trennung der verschiedenen Ebenen bei.

Typographische Hierarchie: So strukturierst du Texte am besten 6Typographische Hierarchie: So strukturierst du Texte am besten 6

Werde bei der Schriftart nicht zu experimentierfreudig:
Verschiedene/zu viele Schriftarten auf einer einzigen Website können schnell unprofessionell aussehen.

Erfahre hier mehr über Typografie und visuelle Hierarchie:
Visuelle Hierarchie: So gelingt dir ein ansprechendes Design
Designkontraste: So lenkst du die Aufmerksamkeit deiner Nutzer
Typografie verstehen & gestalten
13 einfache Methoden für besondere typografische Highlights

Deswegen lohnt sich das Augenmerk auf Typographie

Die Anwendung einer hierarchischen Typographie auf deiner Website oder in deinem Designprojekt lohnt sich aus mehreren Gründen. Zunächst verbessert sie die Lesbarkeit und Verständlichkeit deiner Inhalte. Durch klare Abstufungen zwischen Überschriften, Zwischenüberschriften und Fließtext können Besucher die Struktur deiner Informationen intuitiv erfassen. Das hilft ihnen, schneller zu den gesuchten Inhalten zu gelangen und diese effektiver zu verarbeiten.

Eine typographisch gut durchdachte Website steigert zudem die Benutzerfreundlichkeit. Sie leitet die Besucher nahtlos durch die Seite, betont wichtige Informationen und fördert eine positive Nutzererfahrung. Dies kann die Verweildauer auf der Seite erhöhen und die Absprungrate verringern.

Nicht zuletzt kann ein übersichtlicher Text, in welchem typographische Elemente gezielt eingesetzt worden sind, den Leser lenken und sogar beeinflussen. Allein deswegen ist diese Praktik auch aus marketingtechnischen Gründen sehr wertvoll.



Source link

Weiterlesen
Kommentar schreiben

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

UX/UI & Webdesign

Koto rebranded Lyft › PAGE online


Lyft war seit jeher das leuchtend pinke Anti-Uber. Jetzt aber ist der Fahrdienst-Vermittler von Studio Koto mit seinem ersten Rebranding seit mehr als 10 Jahren versehen worden. Das wirkt sehr fein und setzt dennoch entscheidende Akzente.

Das könnte dich auch interessieren



Source link

Weiterlesen

UX/UI & Webdesign

AI, soziale Verbindungen, Influencing › PAGE online


Auch wenn die Mittelschicht verhalten konsumiert, gibt es Chancen für Marken. Dafür muss man sich die Bereiche näher anschauen, in die aktuell gerne investiert wird. Hier gibt es einige Impulse.

AI, soziale Verbindungen, Influencing › PAGE online
Deckblatt Consumer Trends Report 2025 / Warc / GWI

Kluft zwischen Armen und Reichen, Künstliche Intelligenz, Social Media, Influencing, Freizeit und Gesundheit … Alles hängt miteinander zusammen, wenn es um die zukünftigen Consumer Trends geht.

Warc hat sich das Verhalten von Verbraucher:innen genau anschaut und die Ergebnisse im Report festgehalten. Es wurden einige spannende Take-aways identifiziert, die es in sich haben – und einen starken Fokus auf AI legen. Die sozialen Verbindungen bleiben dabei aber nicht auf der Strecke!

Weniger Geld, weniger Kaufkraft

Wer viel Geld hat, gibt auch viel aus. Die weniger gut betuchten Menschen halten sich eher zurück. Und ein für Marken nicht gutes Zeichen ist, dass die ärmeren Konsument:innen mittlerweile lieber weniger Geld für günstigere Markenprodukte ausgeben, als etwas mehr Geld in die Hand zu nehmen, um ihnen altbekannten Marken, die aber etwas teurer sind, treu zu bleiben. Das waren 55 % der Befragten. Das heißt im Umkehrschluss aber auch, dass Menschen mit geringem Einkommen eher bereit sind, Marken zu wechseln – eine Chance zum Wachsen für kleinere Brands?

Vertrauen in Influencer:innen & AI-Agenten

Interessant ist auch, dass neben der AI-Entwicklungen Influencing und Content Creators in Social Media weiterhin sehr relevant sind. Verbraucher:innen informieren sich laut Report sehr stark in den sozialen Netzwerken und Kanälen – und kaufen dann auch, 47 % kaufen aufgrund von Influencer:innen-Empfehlungen. Dieser Trends setzt sich also fort, aber Konsument:innen müssen heutzutage aufpassen, denn manchmal verbirgt sich hinter einer Produktbewertung oder -information nur KI-Fake.

Anknüpfend daran kommt der Report dann auch aufs Thema Künstliche Intelligenz und die Nutzung von Agenten. Der zukünftige Umgang und die Nutzung damit wird als Paradigmenwechsel im Bereich AI User Experience bezeichnet.

Gründerin und Chef-Analystin von Sonata Insights, Debra Aho Williamson, kommentiert:

»Bald werden die Verbraucher:innen nicht einmal mehr eine KI-Plattform aufsuchen müssen, um das zu erledigen, was sie normalerweise tun. Stattdessen werden sie einen KI-Agenten damit beauftragen, eine Aufgabe in ihrem Namen auszuführen, und die Ergebnisse werden ihnen einfach geliefert.«

Soziale Verbindungen offline stärken!

Neben AI und Influencing – also dem ganzen digitalen Bereich – achten Menschen aber auch verstärkt auf Gesundheit und Wohlbefinden. Das heißt, sie investieren mehr und gerne in Brands, die beispielsweise gesunde Lebensmittel oder Nahrungsergänzungsmittel anbieten. Das könnte bedeuten, dass Foodbrands Aufschwung bekommen.

Aber auch Freizeitaktivitäten wie Brettspiele, Festivals und Events sind vor allem bei den jungen Generationen beliebt. Offenbar – so der Report – besteht der Wunsch, sich neben dem Digitalen wieder mehr offline zu connecten. Stichwort: soziale Kontakte pflegen.

Marken können darauf reagieren, indem sie beispielsweise erlebnisorientierte Aktivitäten wie Pop-ups, Workshops und Festivals schaffen. Auch für Agenturen könnte der Trend interessant sein, wenn Unternehmen in diesen Bereichen Kreativaufträge vergeben möchten.

Im Report gibt es dazu diesen Impuls:

»Die Identifizierung dieser neuen Räume und deren Einbindung in Touchpoint-Strategien kann dazu beitragen, die Sichtbarkeit und die mentale Verfügbarkeit der Marke zu steigern. Eine Zusammenarbeit mit strategischen Partnern wie sozialen Clubs und Plattformen kann helfen, die Reichweite der Marke zu vergrößern.«

Das Reporting basiert auf GWI-Umfragen in 54 Märkten, kombiniert mit WARCs eigenen Untersuchungen, Fallstudien und Analysen.



Source link

Weiterlesen

UX/UI & Webdesign

Alles so schön zentrisch hier! – Was bedeutet „optische Mitte“, und welche Gestaltungsgrundlagen kommen heutzutage im Kommunikations- und Informationsdesign zur Anwendung?


Optische Mitte, Symmetrie, Asymmetrie und Achsen sind in der Gestaltung elementare Gestaltungsprinzipien. Diese beeinflussen maßgeblich, inwieweit wir Objekte, Zeichen und Designs als harmonisch, ausgewogen und ästhetisch ansehen, auch ob wir jemand anderen als schön empfinden.

Schönheit liegt im Auge des Betrachters, heißt es. Eine Redewendung, die einen Trugschluss birgt: die Existenz von objektiven Kriterien und übergreifenden, universellen Maßstäben wird dabei ausgeblendet. Ästhetik ist nicht völlig relativ. Welche Rolle hierbei Symmetrie spielt, auch welche wahrnehmungspsychologische Faktoren im Design im Zusammenhang mit der optischen Mitte und im Hinblick auf das Empfinden von Ausgewogenheit einen Einfluss haben, darum soll es in diesem Artikel gehen.

Der nachfolgende Text verhält sich asymmetrisch, gemessen an Normen der heutigen Informationsgesellschaft, denn er ist unüblich lang. Ein gewisses Durchhaltevermögen wird dem Leser also abverlangt, vor allem ein scharfer Blick. Bevor wir uns mit konkreten Designs beschäftigen, ist es notwendig zunächst die Gestaltungsgrundlagen zu kennen und zu verstehen.

Symmetrie

Warum ist Symmetrie wichtig? Symmetrie entspricht einer klaren, einfachen Struktur, die das Gehirn leichter verarbeitet und als angenehm empfindet. Symmetrische Formen und Zeichen interpretieren wir als Ordnung, Stabilität und Ruhe, auch als Gesundheit (Biologie). Bei der Einteilung von Flächen in links, rechts, oben, unten und mittig spielt die selbst-bezogene Raumvorstellung des Menschen eine wesentliche Rolle. „Der Mensch macht sich selbst zum Maß seiner Wahrnehmung“ 1. Wir empfinden Symmetrie als harmonisch, da diese auf uns selbst verweist und uns als Individuum bestätigt (Abb. Mensch als Bezugspunkt).

Wenn im Design, in der Grafik, in der Fotografie Objekte als zentrisch dargestellt werden sollen, ist die mathematische Symmetrie nicht entscheidend. Vielmehr geht es in der Gestaltung darum, einen visuellen Eindruck von Symmetrie zu erzeugen. Entscheidend ist, wie es wahrgenommen wird, nicht wie es ist. Was als symmetrisch, harmonisch und ausgewogen wahrgenommen wird, ist verschieden. Auch das Empfinden der optischen Mitte ist individuell verschieden.

Optische Mitte

Eine optische Mitte ist keine objektive Größe, sondern ein wahrnehmungspsychologischer Kompromiss, der für möglichst viele Menschen eine ausgewogene, harmonische Wirkung erzeugen soll. Es geht bei der Bestimmung der optischen Mitte um eine Lösung, die konsensfähig ist.

Im Kommunikations- und Informationsdesign wird empfohlen, wichtige Gestaltungselemente eher an der optischen Mitte als an der geometrischen Mitte zu platzieren, um so ein harmonisch ausgewogenes Gesamtbild zu erzeugen. Je nach Objekt und Format können optische Mitte und geometrische Mitte identisch sein (Beispiel Zielscheibe) – in vielen Fällen jedoch unterscheiden sich diese.

Die optische Mitte betrifft beide Achsen, die horizontale wie die vertikale, jedoch nicht im gleichen Maße. In Bezug auf die vertikale Achse müssen Objekte häufiger händisch positioniert werden. Dies hat wahrnehmungspsychologische Gründe.

Geometrische Mitte versus optische Mitte
Geometrische Mitte versus optische Mitte

In der vertikalen Achse gilt:

Geometrisch mittig platzierte Objekte wirken in einem umgebenden Format (A4, Smartphone im Porträtmodus, u.a.), als seien sie aus der Mitte nach unten verschoben, obwohl sie geometrisch perfekt zentriert sind.

Je höher das Format, um so stärker der Effekt.

Der wahrnehmungspsychologische Grund hierfür ist folgender: Das menschliche Orientierungssystem nutzt die Schwerkraftrichtung als Hauptbezugspunkt im Raum. Da Schwerkraft immer nach unten wirkt, sind wir evolutionär darauf geprägt, den unteren Bereich als den stabilen Boden wahrzunehmen. Wissenschaftler vermuten, dass die Gravitation auch der Grund dafür ist, weshalb wir die Länge von vertikalen Objekten grundsätzlich überschätzen (Horizontal-vertikal Täuschung).

In der horizontalen Achse gilt:

Geometrisch zentrisch platzierte Objekte können, je nach Form, in einem umgebenden Format so wirken, als seien sie aus der Mitte verschoben, obwohl sie geometrisch perfekt zentriert sind. Ein geometrisch zentrisch platziertes Dreieck in einem Kreis wirkt optisch nach links verschoben (siehe Abb. unten). In diesem konkreten Fall wird die optische Ausrichtung dadurch erleichtert, dass sich der Mittelpunkt des gleichseitigen Dreiecks sehr leicht durch das Einzeichnen von Winkelhalbierenden ermitteln lässt (blaue Linien). Da die Kreisfläche nach oben und unten begrenzend wirkt, ist der so ermittelte Mittelpunkt des Dreiecks im Prinzip gleichbedeutend mit der optischen Mitte.

Das Dreieck links wirkt, obwohl geometrisch zentriert, optisch nach links verschoben. Das Dreieck rechts wirkt optisch mittig und harmonisch
Das Dreieck im linken Kreis wirkt, obwohl geometrisch zentriert, optisch nach links versetzt. Das Dreieck im rechten Kreis wirkt hingegen harmonisch positioniert

Außerdem gilt für beide Achsen:

Je unregelmäßiger die Form des Objektes, umso stärker der Effekt. Das menschliche Auge tut sich sehr schwer, wenn es darum geht, bei unregelmäßigen Objektformen die exakte Mitte zu finden. Ein achsensymmetrisches Objekt erfordert bei der Gestaltung in der Regel eine geringere Verschiebung, mitunter keine.

Eine Headline, die in Versalien gesetzt ist, bedarf in der Regel, bedingt durch die geringere Unregelmäßigkeit von Versalien, auch einer geringeren Verschiebung als eine Headline, die in Gemischtschreibweise gesetzt ist.

Das umgebende Format beeinflusst die Wahrnehmung des Objektes. Wie auch andere umgebende Objekte die Wahrnehmung eines Objektes beeinflussen (Ebbinghaus’sche-Täuschung).

Dasselbe Objekt kann in Abhängigkeit vom Hintergrund heller oder dunkler erscheinen (Simultankontrast), und somit den Effekt ebenfalls beeinflussen. Innerhalb der Gestaltpsychologie ist dokumentiert, dass bei der Perzeption von grafischen Zeichen und Symbolen viele verschiedene Faktoren und Gestaltgesetze eine Rolle spielen.

Soweit die Gestaltungsgrundlagen. Nachfolgend wird auf die unterschiedlichen Designdisziplinen eingegangen.

Schriftgestaltung

In der Typographie gibt es unzählige Methoden und Techniken, um auf mikro- und makrotypographischer Ebene für ein harmonisches Schriftbild zu sorgen: Überhang (Overshoot), Unterschneidung (Kerning), Ligaturen, Laufweite, Strichstärkenkontrast, Inktrap, und vieles mehr. So werden beispielsweise vertikale Striche (Stems) oft minimal dicker gestaltet als die horizontalen Striche (Bars), damit beide optisch gleich kräftig wirken. Im Typolexikon und unter typografie.info wird in aller Ausführlichkeit auf die vielen Facetten der Schriftgestaltung eingegangen. Kurt Weidemann hat die Vertikalen im Logo der Deutschen Bahn minimal dicker angelegt als die Horizontalen. Die Grundlage hierfür bildet auch in diesem Fall die Gestaltpsychologie.

Doch Logogestaltung ist eine eigene Designdisziplin. Es wäre ein Fehler, wie es KI-Sprachmodelle vielfach tun, wie sich im Rahmen der Recherche zu diesem Artikel gezeigt hat, Bedingungen, Regeln, Anforderungen und Ziele aus einem Teilbereich in einen anderen zu übertragen. Auch deshalb, weil KI-Sprachmodelle wie ChatGPT, GoogleGemini und Perplexity nach wie vor sehr viel Unsinn produzieren, wodurch sie entscheidend zur Verbreitung von Desinformation beitragen, soll mit diesem Artikel der Versuch der Klarstellung unternommen werden.

Denn es ist so: Während bei der Gestaltung von Schriftzeichen die harmonische Eingliederung in ein Alphabet, in ein Font-System im Vordergrund steht, liegt der Fokus bei der Gestaltung eines Logos auf dessen individuellem Ausdruck. Im Kontext Logodesign spielen Prägnanz, Individualität, Emotionalisierung und Story-Telling eine viel größere Rolle. Mit dem Design eines Logos sind ganz andere Ziele verknüpft.

Typologos wie jene von Coca-Cola oder Tempo sind mehr als ein reiner Textkorpus. Ein Typologo hat eine über das geschriebene Wort hinaus gehende semiotische Bedeutung – es repräsentiert etwas: eine Marke. Logos haben eine kommunikative Qualität. Sie werden (von der Erstwahrnehmung einmal abgesehen) weniger wie ein Wort gelesen, sondern mehr wie ein bildhaftes Zeichen erfasst und wahrgenommen, zumeist flüchtig, als Repräsentant einer Marke.

Um die Unterschiedlichkeit der Disziplinen an einem konkreten Beispiel zu veranschaulichen: Bei der Wortmarke des finnischen Glasherstellers Iittala ließen sich die Zeichenzwischenräume unter dem Gesichtspunkt der Schriftgestaltung zweifellos harmonisieren. Doch eben jene unregelmäßigen, geradezu verstörend unruhig wirkenden Zeichenzwischenräume sind es, die der Wortmarke Unverwechselbarkeit verleihen, und die den künstlerischen Anspruch der Marke Iittala artikulieren, und diesen im Visuellen bestätigen. So wie in der Musik eine Pause einem Ton Ausdruckskraft verleiht, ist es im Design der Zwischenraum, der einem Zeichen (Linie, Buchstabe, Farbfläche, u.a.) Geltung und Bedeutung verschafft.

Das bewusste Spiel mit Unregelmäßigkeiten wie auch die gezielte Asymmetrie können in der Gestaltung ungemein effektvoll sein, im Design ebenso wie in der Architektur oder in der Kunst. So wie die ineinander gelegten Hände des Arnolfini-Brautpaares (Jan van Eyck, 1434), leicht rechts der Mittelachse versetzt, Spannung erzeugen und die Aufmerksamkeit des Betrachters auf sich ziehen. Auch das von Paula Scher im Jahr 1995 entworfene Plakat „The Public Theater“ ist deshalb besonders aufmerksamkeitsstark, weil die Gestaltung den gezielten Bruch mit traditionellen Gestaltungsprinzipien wie Symmetrie, Goldener Schnitt, Raster und Achsen beschreibt und dabei tradiertes Harmonieverständnis auf die Probe stellt.

Unregelmäßigkeiten und Asymmetrien im Logodesign

Auch andere namhafte Grafikdesigner, etwa Saul Bass oder Paul Rand, haben für ihre Designs oft asymmetrische Kompositionen gewählt. Das Logo von Continental Airlines (Saul Bass, 1968) besteht nicht, wie so viele andere Airline-Logos, aus einem Kreis als Grundform, sondern aus einer Ellipse. Zudem ist die Bildmarke nicht achsensymmetrisch, obwohl sie dem Anschein nach so wirkt.

Auch Paul Rand, der unter anderem Logos für IBM, UPS und ABC entworfen hat, stattete 1959 das Logo von Westinghouse Electric (Abb. unten links) mit mehreren Unregelmäßigkeiten aus: der Ring ist auf der linken Seite dicker; zudem sind die An- und Abstriche im W minimal verschoben. Das Zeichen ist also nicht zu 100 Prozent achsensymmetrisch.

100 Prozent achsensymmetrisch ist auch die Sirene im Starbucks-Logo nicht (Abb. oben rechts). Die Kontur der Nase unterscheidet sich minimal links- und rechtsseitig der Mittelachse. Verleiht die rechtsseitig längere Schattenkontur der Figur eine natürlichere Anmutung, ein menschlicheres Antlitz? Würden einheitliche Schattenkonturen die Qualität und den Ausdruck des Zeichens verschlechtern? Dies mag jeder für sich bewerten.

Zwei Logos mit versteckten, kaum wahrnehmbaren Unregelmäßigkeiten. Inwieweit derlei Unregelmäßigkeiten dafür sorgen können, dass eine Form einen harmonischeren Ausdruck erhält, ist fraglich. Hinzu kommt, dass die Details schon bei der üblichen Darstellungsgröße eines Logos (App-Symbol, Website, Briefpapier) kaum zur Geltung kommen.

Auch bei dem kürzlich hier im dt vorgestellten Logo der Verbraucherzentrale wurde die Binnenform, das V, absichtlich leicht nach rechts verschoben (siehe Logo-Konstruktion). Die Anpassung diene, so die Erklärung seitens der Verbraucherzentrale, der „optischen Zentrierung in der Gesamtkombination mit der Wortmarke“. Der Umstand, dass das verschobene V auch in der alleinstehenden Verwendung der Bildmarke beibehalten wird, begründet die Pressestelle der Verbraucherzentrale damit, dass „die Bildmarke insbesondere im digitalen Einsatz (z. B. in Social Media) häufig zusammen mit Text dargestellt“ wird. Die leichte Verschiebung unterstütze demnach auch dort die visuell ausgeglichene Gesamtwirkung. Doch kann ein Design dies leisten? Die Begründung ist wenig plausibel.

Aufgrund der hohen Anzahl von Medienanwendungen, Touchpoints und Anwendungskontexten, die im Rahmen von Markenkommunikation heutzutage bestehen, lassen sich die zahlreichen Kombinationen, bestehend aus Logo plus Textumfeld, unmöglich in der beschriebenen Weise harmonisieren. In einigen Fällen ist die „Verbraucherzentrale“-Wortmarke rechts der Bildmarke platziert, mal steht der Name darunter, mal ist der Name einzeilig, mal zweizeilig, mal in schwarz gehalten, mal in weiß (siehe Screen). Zudem sind Abstände, Farbschemata und Typographie unterschiedlich. All diese Bedingungen können darüber hinaus durch Anwender individuell angepasst werden (Schriftgrößen, Dark-Mode, Zoom, etc.).

Diese Unterschiedlichkeit und Varianz gilt es bei der Gestaltung von Logos sicherlich im Hinterkopf zu haben. Allerdings ist es weder technisch möglich diese Varianz auszugleichen, quasi über eine Art Framework, das eine adaptive, kontextsensitive Bildmarke passend zum Umfeld ausspielt –, noch gibt es ein Design, das über eine derartige Qualität verfügt, dass es diese Varianz ausgleichen könnte. Kein wie auch immer manipuliertes Logodesign vermag diese Varianz zu harmonisieren. Design kann vieles leisten, doch nicht alles.

Tatsächlich sind gestalterisch in dieser Weise frisierte Logos verbreiteter als man annehmen könnte. Beispielsweise ist auch das Volkswagen-Logo 2 nicht zu 100 Prozent achsensymmetrisch. Auch an der Target-Bildmarke, im Prinzip eine 100 Prozent symmetrische Form, wurde Hand angelegt und die Symmetrie moduliert (Abb. unten). Wer das Bullseye richtig ins Visier nimmt, wird erkennen: dies ist gar kein Kreis!

Die Verschiebungen sind minimal. Beim VW-Logo ist der Ring auf der linken Seite etwas stärker, dafür sind die Anstriche von V und W etwas dünner. Beim Target-Logo sind der weiße Ring und die rote Kreisfläche innen minimal seitlich verschoben und verbogen.

Auch vom Mercedes-Stern sind Logoversionen in Umlauf, bei denen Stern- und Ringform in ähnlicher Weise seitlich verschoben dargestellt sind. Im Brand-Design-Hub von Mercedes wie auch im Webauftritt unter mercedes-benz.de ist ein 100 Prozent achsensymmetrisches Stern-Signet hinterlegt – auf mehreren Facebook-Profilen sowie im Geschäftsbericht 2024 kommt hingegen eine Version mit minimal verschobenen Zacken zum Einsatz. Erst in stark vergrößerter Darstellung sind die Abweichungen zu erkennen. An dieser Stelle muss betont werden, dass es sich hierbei keinesfalls um eine Art von Darstellungsfehler oder technischem Defekt handelt, verursacht durch Bildkompression oder Dateikonvertierung. Die Logos wurden mit Absicht in der dargestellten Form gestaltet.

Schön zentrisch, schön symmetrisch

Um zu verstehen, was es mit derlei Unregelmäßigkeiten innerhalb von Bildmarken auf sich hat, müssen wir auf den oben genannten Aspekt zurückkommen: Wir empfinden Symmetrie als harmonisch. Doch 100 Prozent perfekte Symmetrie kann auch unheimlich wirken, bezogen auf den menschlichen Körper und das Gesicht. Im Rahmen von anatomischen Studien wurde festgestellt: je symmetrischer ein Körper aufgebaut ist, desto positiver wird dieser bewertet 3. Als schön und gesund wird angesehen, wer ein möglichst symmetrisches Gesicht hat. Auffällige Asymmetrien werden als Zeichen von Erkrankung gedeutet. Perfekte Symmetrie gibt es in der Anatomie allerdings nicht.

Und dieser Aspekt spielt in unterschiedliche Designdisziplinen mit hinein, die Natur gewissermaßen zum Vorbild nehmend. Das Ergebnis sind mikroskopisch kleine Abweichungen, die das Gesamtbild einer als symmetrisch angesehenen Form in positiver Weise unterstützen sollen. Das menschliche Gehirn sucht nach Mustern, und ist in der Lage fehlende Elemente imaginär zu ergänzen – so können wir Konturen sehen, wo keine sind (Scheinkonturen). Paul Rand, einer der einflussreichsten und profiliertesten Gestalter seiner Zeit, war zudem der Meinung, dass eine perfekte Symmetrie zu offensichtlich wäre 4.

Dahinter steht eine Designphilosophie, die nach Rands Verständnis dem Betrachter ein „intellektuelles Vergnügen“, eine Art ästhetische Befriedigung bietet. Otl Aicher, der nicht nur ein akribischer, detailversessener Gestalter war sondern darüber hinaus als Designtheoretiker in der Entwicklung des modernen Designs in Deutschland eine Schlüsselrolle einnimmt, hat ebenfalls an die unter seiner Leitung entstandenen Werke eine philosophische Dimension geknüpft, auch eine moralische. Aicher bezeichnete Symmetrie als „Syntax der Macht“, in Anspielung auf die Architektur von Repräsentationsbauten, wie jene des Weißen Hauses.

Menschen haben unterschiedliche Vorstellungen davon, was ästhetisch, schön, harmonisch ist. Die Wissenschaft kann bestimmte Muster und Faktoren identifizieren, die bei der Wahrnehmung von Designs eine Rolle spielen. Doch inwieweit eine solche von Gestalterhand herbeigeführte Symmetriemodulation einen positiven Effekt auf die Wahrnehmung eines Logos hat, dürfte schwierig zu ermitteln sein. Hinzu kommt, dass die benannten wahrnehmungspsychologische Faktoren innerhalb der Designwelt unterschiedlich, teils gegensätzlich ausgelegt und interpretiert werden. Im Westinghouse-Logo ist der Ring links dicker, während die Ringdicke bei VW und Target in der Höhe variiert.

Vielleicht, so eine These, hat man in den 1960er-, 1970er-Jahren, in einer Zeit, in der die Disziplinen Branding und Corporate Design immer noch in den Kinderschuhen steckten, namhaften Gestaltern mehr Vertrauen und Glauben geschenkt. Design ist heute demokratischer – Wissen und Werkzeuge sind jederzeit verfügbar. Zudem sind die Anforderungen im Bereich der Markenkommunikation heute wesentlich komplexer. Hersteller, die falsche Versprechen machen, bekommen den Zorn der Internetgemeinde zu spüren. Wenn ein Unternehmen im Leitbild Werte wie Integrität, Ehrlichkeit, Transparenz, Klarheit und Authentizität betont, dann braucht es heute mehr denn je ein visuelles Erscheinungsbild, das dieses Selbstbild auch bestätigt. Daher gilt für Marken: „Macht euch ehrlich!“ 5.

Das von Anton Stankowski gestaltete Logo der Deutschen Bank, der „Schrägstrich im Quadrat“, ist ehrlich, echt, frei von Verformungen und Verschiebungen. Die streng geometrische Konstruktion visualisiert einen damit einhergehenden Anspruch: Präzision. Ein Zeichen, das nach wie vor funktioniert.

Das Kranich-Signet der Lufthansa, im Jahr 1918 von Otto Firle erdacht und zuletzt von der Münchner Agentur Martin et Karczinski überarbeitet, ist, anders als die Binnenfläche im VW-Logo, auch im mathematischen Sinne ein Kreis. Der Kranich umgebende Ring verfügt über eine gleichmäßige Stärke. Auch der Ring im Logo des Chemiekonzerns Bayer und die Audi-Ringe sind gleichmäßig. Das von Thomas Miller in den 1950er-Jahren entworfene Logo von Motorola ist ebenso zu 100 Prozent achsensymmetrisch wie die von William Golden 1951 gestaltete CBS-Bildmarke. Auch auf die kreisrunden Logos von Bosch, Yamaha und vielen anderen Marken trifft dies zu.

Informationsdesign

Auch im Informationsdesign ist Symmetrie bedeutsam. Achsen- und punktsymmetrisch gestaltete Verkehrszeichen sorgen dafür, dass wir die entsprechenden Informationen schnell und eindeutig erkennen. Ein intellektuelles Vergnügen muss die Betrachtung eines Einbahnstraßenschildes nicht bereiten.

Im Flaggendesign sind Formen, die nur dem Anschein nach symmetrisch sind, völlig unüblich. Symmetrie ist bei Flaggen laut North American Vexillological Association (NAVA) kein absolutes Muss, wird jedoch häufig als unterstützendes ästhetisches Element genutzt. Gutes Flaggendesign ist vor allem simpel und klar. So wie die südkoreanische Nationalflagge (Taegeuk), deren Konstruktion einem strengen symmetrischen Prinzip folgt. Beides, Flaggen und Verkehrszeichen, sind so gestaltet, dass diese aus der Entfernung und in unterschiedlicher Ausrichtung gut erkennbar sind. Kriterien, die auch im Logodesign relevant sind.

Flagge Südkorea – symmetrische Konstruktion, Quelle: Wikipedia, Ersteller Ksiom
Flagge Südkorea – symmetrische Konstruktion, Quelle: Wikipedia, Ersteller Ksiom

Doch Unregelmäßigkeiten und Asymmetrien finden sich auch in der Welt des Informationsdesigns, so zum Beispiel in den GHS-Gefahrenkennzeichen („Globally Harmonized System of Classification and Labelling of Chemicals“), die seit 2012 in Europa als Kennzeichnung für alle gefährlichen Chemikalien Pflicht sind.

Grafische Objekte wie Flamme, Totenkopf und Ausrufezeichen sind im roten Korpus in Form einer Raute nicht nur leicht aus der Mittelachse nach rechts versetzt, ihre Form selbst ist ebenfalls asymmetrisch. Inwieweit die für die Gestaltung verantwortlichen Personen auch in diesem Fall eine harmonischere Gesamtwirkung verfolgen, ist nicht bekannt. Auch in diesem Fall ist der Versatz gezielt herbeigeführt, und nicht etwa ein Darstellungsfehler.

 

Als Maßstab für gutes Design können diese Zeichen kaum gelten, ganz unabhängig von ihrer schlechten Darstellungsqualität. Zudem sind die Objekte wie der Totenschädel im GHS06-Piktogramm viel zu weit oben platziert, als dass diese als mittig im Rautenkorpus wahrgenommen werden könnten. Der Kopf sitzt schlichtweg zu weit oben, lässt sich, bedingt durch die Knochen, in dieser Form auch nicht mittig positionieren.

Auch das Deutsche Institut für Normung e. V. (DIN), unter anderem verantwortlich für die Gestalt der Sicherheitszeichen, ist, was die Ausrichtung der grafischen Objekte betrifft, kein verlässlicher Maßstab und Orientierungspunkt. Zu inkonsistent ist die Gestaltung der Zeichen.

Zeichen wie das für „Sammelstelle“ (E007) oder jenes für Augenschutz (M004) sind zu 100 Prozent achsensymmetrisch; hier sind die Objekte zentrisch platziert. Wohingegen in Zeichen mit gleicher Machart, wie beim „Atemschutz“-Zeichen (M017), Objekte von der Mittelachse rechts verschoben abgebildet werden. Eben für jene Zeichen der ISO-Norm ISO 7010 bestehen dezidierte gestalterische Vorgaben, um so das perzeptuelle Erleben der Sicherheitszeichen zu optimieren. Auch die Einheitlichkeit der Gestaltung soll so gewährleistet werden. Doch wie sich zeigt, gelingt dies nicht immer.

Symbole & Piktogramme

Die von der Designorganisation AIGA herausgegebenen „Symbolzeichen“ sind in dieser Hinsicht konsistent, auch sonst ist gestalterische Qualität besser. Wie viele der über 8 Millionen Icons auf thenounproject.com mit einer Scheinsymmetrie ausgestattet sind, wäre mal interessant zu wissen. Vielleicht mag sich ein KI-Modell der Sache annehmen. Jedenfalls ist diese Art der Verformung von Piktogrammen völlig üblich, auch im Kontext User Interface ist diese keine gängige Praxis.

Markenlogos und Symbole haben als Bedingung gemein, dass sie in zigtausend unterschiedlichen Anwendungskontexten funktionieren müssen. So wie das vom britischen Künstler und Designer Gerald Holtom im Jahr 1958 entworfene „CND-Symbol“ (Campaign for Nuclear Disarmament), allgemein als „Peace-Zeichen“ bekannt. Jeder Mensch, der es einmal gesehen hat, kann das Symbol aus der Erinnerung nachzeichnen. Selbst mit einem einfachen Flachpinsel aus dem Baumarkt oder einer Sprühdose lässt sich das Symbol in sekundenschnelle auf Pappschild, Transparent, T-Shirt und Beutel übertragen.

CND / Peace Symbol, Quelle: cnduk.org, Grafik: dt
CND / Peace Symbol, Quelle: cnduk.org, Grafik: dt

Die Größe der Winkel, die Breite der Striche oder der Grad der Symmetrie sind dabei ebenso nachrangig wie eine exakte Linienführung des Kreises. Ein Kind kann mit Fingerfarben das Zeichen auf Papier malen – und jeder erkennt es. Die Qualität des Zeichens besteht in der Einfachheit der Struktur, in der Symmetrie der Form. Ein pures, ungeschöntes, dabei ästhetisches, langlebiges, nicht-artifizielles Design.

Konzeptionelle Reinheit und Minimalismus sind auch im Logodesign gefragt. „Im Design sollte man keine Angst vor den allereinfachsten Lösungen haben, wenn sie die Sache treffen“, schreibt Aicher in „Die Welt als Entwurf“ 6. Die Welt ist ohnehin kompliziert genug. ☮

Wer es bis zu dieser Stelle des Artikels geschafft hat, sieht Logodesign und verwandte Gestaltungsdisziplinen womöglich mit anderen Augen. Die Dinge sind zuweilen nicht so wie sie scheinen. Visuelle Gestaltung ist zudem nicht allein eine Frage des persönlichen Geschmacks. Viele Designprinzipien fußen auf wissenschaftlichen Erkenntnissen. Vielleicht kann dieser Artikel dazu beitragen etwas mehr Licht in die optische Mitte zu führen. Das würde mich freuen. Wie immer gilt im dt: Kommentare, Anregungen und Ergänzungen sind sehr willkommen.

Fußnoten

  1. Monika Heimann, Michael Schütz: Wie Design wirkt – Psychologische Prinzipien erfolgreicher Gestaltung. Rheinwerk Verlag, 2016
  2. Beim Volkswagen-Logo wurde, nachdem es 2019 öffentlich präsentiert und eingeführt wurde, der Strichstärkenkontrast zwischen „VW“ und dem umgebenden Ring nachträglich durch die verantwortlichen Designer angepasst und verringert, siehe dt-Beitrag
  3. Vera Spillner: Symmetrische Schönheit, spektrum.de
  4. Maria Popova, Thoughts on Design: Paul Rand on Beauty, Simplicity, the Power of Symbols, and Why Idealism Is Essential in Creative Work, The Marginalian
  5. Lucas von Gwinner, Dirk von Gehlen: Macht Marke – Orientierung, Sinn, Vertrauen. Wie Kreative Zukunft gestalten, Verlag Hermann Schmidt, 2024
  6. Otl Aicher, Die Welt als Entwurf, Ernst & Sohn, 1991



Source link

Weiterlesen

Beliebt