Connect with us

UX/UI & Webdesign

Design verpflichtet! › PAGE online


Warum digitale Inklusion keine Kür mehr ist – und was das mit Gestaltung zu tun hat

Unser neuer Impuls zum Thema »Barrierefreiheit und Design« zeigt, wie Gestalter:innen Barrieren abbauen können – und warum sie es müssen.

Design gestaltet Realität. Nicht nur ästhetisch, sondern ganz konkret im Alltag: Wer kann ein digitales Produkt bedienen und wer nicht? Wer fühlt sich gesehen und wer bleibt außen vor? Barrierefreiheit im Web ist kein Nice-to-have, sondern eine Frage von Teilhabe und Gerechtigkeit. Und: eine kreative Herausforderung, die Gestaltung neu denkt. Inklusiv, mit Weitblick und Haltung.

Unser neuer Impuls zum Thema »Barrierefreiheit und Design« zeigt, wie Gestalter:innen Barrieren abbauen können – und warum sie es müssen.

Barrierefreiheit: Vom Buzzword zur Pflicht

In der Architektur seit Jahrzehnten Standard, im digitalen Raum lange vernachlässigt: Barrierefreiheit. Dabei ist das Web kein Sonderfall. Auch hier muss gelten, dass alle Menschen Zugang haben. Spätestens mit dem neuen Barrierefreiheitsstärkungsgesetz, das 2025 stufenweise greift, ist klar: Digitale Produkte müssen inklusiver werden. Nicht irgendwann, sondern jetzt.

Für die Designbranche bedeutet das: handeln.

Denn Gestaltung entscheidet darüber, ob Websites, Apps, Services und Interfaces für alle Menschen nutzbar sind oder nicht. Dabei geht es nicht nur um Menschen mit dauerhaften Behinderungen, sondern auch um temporäre Einschränkungen, verschiedene Endgeräte, Altersgruppen oder neurodiverse Nutzungsweisen. Barrierefreies Design ist gutes Design – für alle.

Gestaltung mit Verantwortung

Die Web Content Accessibility Guidelines (WCAG) geben seit über 20 Jahren die Standards für barrierefreie UX und UI vor. Trotzdem begegnen uns auf vielen Websites vermeidbare Fehler (oder Ignoranz?). Dabei erhöht Barrierefreiheit die Usability für alle. Ob Lesbarkeit, Navigation oder Kontraste: Was inklusiv gestaltet ist, wirkt sich positiv auf das gesamte Nutzungserlebnis aus.

Design trägt hier Verantwortung, aber auch enormes Potenzial. Wie der Designforscher Tom Bieling sagt:

»Wenn Normvorstellungen durch Design mitkonstruiert werden, bedeutet das im Umkehrschluss auch, dass sie sich durch Design dekonstruieren lassen.«

Barrierefreies Design kann diskriminierende Strukturen aufbrechen und neue Realitäten schaffen.

Balkendiagramm: Die häufigsten WCAG-Fehler auf den 1.000.000 wichtigsten Homepages weltweit. Die Fehler und ihre Häufigkeiten sind: Kontrastfehler (79,1 %), fehlende Alt-Texte (55,5 %), fehlende Label (48,2 %), leere Links (45,4 %), leere Buttons (29,6 %) und fehlende Spracheinstellung (15,8 %).
Das Diagramm zeigt die prozentuale Häufigkeit der Zugänglichkeitsfehler auf den 1.000.000 wichtigsten Homepages weltweit. Quelle: The WebAIM Million 2025 report /

Nicht über Betroffene reden. Mit ihnen gestalten

Inklusion beginnt nicht mit Personas, sondern mit echter Teilhabe. Menschen mit Behinderung sollten nicht erst am Ende des Prozesses auftauchen, sondern von Anfang an einbezogen werden, als Expert:innen ihrer eigenen Erfahrung.

Barrierefreiheit wird einfacher, wenn Teams vielfältiger sind, sei es in Perspektiven, Hintergründen oder Erfahrungen. Ein Beispiel aus unserem Special: Unser Impuls-Keyvisual stammt von Justus Steinfeld, der als Fotograf und 3D-Designer mit Sehbehinderung arbeitet. Wie er gestaltet – und was ihn antreibt – lest ihr im Artikel.

Barrierefreiheit & Design: Die Impuls-Themen im Überblick

Überblick: Digitale Barrierefreiheit: Für ALLE soll es sein! | Interview: »Visual Inclusivity profits everyone, it’s never just about one community« | How-to: Webdesign: Barrierefrei in 3 Monaten| Case: Nutzbarkeit überzeugt: Radio im »Einfach-Modus« | Background: Inclusive Design: Darauf kommt es an! | Workflow: Wie der 3D-Artist Justus Steinfeld seine Sehbehinderung zur Superpower macht | Behind the cover: »Das andere Sehen kann neue Türen öffnen« | Service: Tipps & Schriften für barrierefreie Texte



Source link

Weiterlesen
Kommentar schreiben

Leave a Reply

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

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

UX/UI & Webdesign

Schwachstellen bei Onlineshops – und Verbesserungstipps › PAGE online


Zeigt Verständnis für die jeweils andere Disziplin! Das ist nur einer der Tipps, um Onlineshops zu verbessern. PAGE hat vier Fragen an einen Experten gestellt.

Schwachstellen bei Onlineshops – und Verbesserungstipps › PAGE online
André Roitzsch, CEO bei SHOPMACHER / Foto © SHOPMACHER

Manchmal gibt es Verzögerungen oder Probleme in der Zusammenarbeit zwischen Development und Design. Das trifft häufig zu, wenn Teams neue Onlineshops entwickeln und gestalten.

Aber die Hindernisse lassen sich überwinden. Am besten ist es, wenn Designer:innen und Entwickler:innen von Beginn an darauf achten und miteinander kommunizieren.

PAGE hat André Roitzsch, CEO bei SHOPMACHER, dazu vier Fragen gestellt.


1. Was sind Ihrer Ansicht nach die größten Problematiken in der Zusammenarbeit zwischen Entwicklung und Design für Onlineshops?

André Roitzsch: Eines der zentralen Probleme in der Zusammenarbeit zwischen Design und Entwicklung liegt im sequentiellen Vorgehen: Wenn zunächst das Design vollständig ausgearbeitet, freigegeben und anschließend in die technische Umsetzung überführt wird, treten an der Stelle dann häufig Schwierigkeiten auf. Denn Designer:innen sind sich nicht immer der technischen Einschränkungen des gewählten Shopsystems bewusst. So entstehen gestalterische Vorgaben, die zwar aus Designperspektive sinnvoll und attraktiv sind, deren Umsetzung jedoch technisch unnötig komplex oder aufwändig ist.

Auf der anderen Seite fehlt es Entwickler:innen mitunter an Verständnis dafür, welche »kleinen« Abweichungen vom Design vertretbar wären, ohne das gestalterische Gesamtkonzept zu unterlaufen. In solchen Fällen sind zusätzliche Abstimmungen erforderlich – bis hin zur erneuten Freigabe durch das Design-Team, was Zeitverzug und Reibungsverluste zur Folge hat.

Doch auch vom anderen Ende her gedacht, ist es häufig eine Einbahnstraße: Wenn technische Konzepte vorab entwickelt und anschließend an das Corporate Design »angepasst« werden sollen, können gestalterische Korrekturen erhebliche Zusatzaufwände in der Entwicklung verursachen – insbesondere dann, wenn diese nachträglich eingebracht werden und ursprünglich nicht eingeplant waren.

2. Wie kann man hinsichtlich der genannten Punkte Verbesserungen erzielen?

Die effektivste Lösung liegt in einer echten, kollaborativen Entwicklung von Gestaltung und Umsetzung – idealerweise von Beginn an im engen Schulterschluss.

Design und Entwicklung sollten sich nicht als nachgelagerte Prozessschritte verstehen, sondern als parallele, miteinander verzahnte Disziplinen.

Darüber hinaus ist eine realitätsnahe Datenbasis essenziell. In der Konzeptionsphase wird meist mit idealisierten Musterdaten gearbeitet – was zu ästhetisch ansprechenden, aber nicht immer realitätsnahen Ergebnissen führt. Sobald reale Produktdaten aus Drittsystemen ins Spiel kommen, zeigen sich schnell Inkonsistenzen, die sowohl das Design als auch die technische Struktur belasten. Ein gemeinsames Verständnis für Datenherkunft, -struktur und -logik hilft, hier frühzeitig gegenzusteuern.

3. Haben Sie Alltagstipps in puncto UX- und UI Design für Designer:innen in Unternehmen, die Onlineshops betreiben?

Ein bewährtes Mittel ist der regelmäßige Austausch in praxisnahen Workshops, um das UX gemeinsam mit den Designpartnern zu entwickeln und umzusetzen. In diesen operativen Formaten können potenzielle Konfliktstellen frühzeitig identifiziert und gemeinsam tragfähige Lösungen entwickelt werden.

Ein weiterer Erfolgsfaktor ist ein sauberes, verständlich dokumentiertes Datenmodell.

Gerade im Commerce-Umfeld ist es entscheidend zu verstehen, dass die gestalterische Arbeit zu einem großen Teil in der Visualisierung von Daten besteht. Wer die Struktur, Herkunft und Verarbeitung dieser Daten kennt, gestaltet fundierter und effizienter.

Zudem ist technisches Grundverständnis bei Designer:innen von großem Vorteil – insbesondere Kenntnisse in HTML, CSS und idealerweise auch grundlegendes Verständnis für JavaScript. In unserem Onboarding-Prozess legen wir daher Wert darauf, dass Designer:innen eigenständig mit Shop- oder Redaktionssystemen arbeiten, Templates anlegen und Seiten aufbauen. Das praktische Erleben technischer Möglichkeiten und Grenzen fördert nicht nur das Verständnis, sondern erhöht auch die Qualität der späteren Designvorgaben.

4. Haben Sie Tipps für Entwickler:innen?

Auch auf Entwicklerseite gilt: Verständnis für die jeweils andere Disziplin ist essenziell. Es reicht nicht, sauberen Code zu schreiben – entscheidend ist, wie dieser im Frontend wirkt. Entwickler:innen sollten regelmäßig ihre Ergebnisse im Browser überprüfen und mit dem ursprünglich geplanten Design abgleichen.

Ein gutes Auge für Gestaltung – zumindest in Grundzügen – gehört zur Kompetenz eines Frontend-Entwicklers. Wer Abweichungen erkennt, visuelle Details ernst nimmt und konstruktive Alternativen vorschlägt, trägt maßgeblich zu einer hohen User Experience bei – ohne die technische Effizienz aus dem Blick zu verlieren.



Source link

Weiterlesen

UX/UI & Webdesign

Stephen Smith › PAGE online


PAGE gefällt …: Illustrationen von Stephen Smith, der in besten Farben und abstrakten Formen von Städteliebe und KI erzählt und davon, wie man mit den Händen sieht. Und das so umwerfend, dass gestalten eine Monografie über ihn herausgebracht hat.

Stephen Smith › PAGE online

Name Stephen Smith / Neasden Control Centre

Location South West, England

Web www.neasdencontrolcentre.com

Start Ich habe in den 90er-Jahren an der University of the West of England in Bristol meinen Bachelor in Illustration gemacht und anschließend meinen Master in Illustration und Design an der University of Brighton. Und dort unter George Hardie und John Vernon Lord abgeschlossen. Einer meiner ersten Jobs war die Illustration eines Plattencovers für Jon Kennedy bei Red Design in Brighton. 2003 veröffentlichte der Verlag Gestalten eine Monografie über das Neasden Control Centre – der Rest ist Geschichte …

Stil Chaotisch und sehr hands-on mixed media Collagen

Lieblingsmotive Ich habe kein Lieblingsmotiv und auch keine Lieblingsfarbe, aber ich arbeite sehr gerne mit Schwarz-Weiß-Kontrasten, die meine Ästhetik prägen. Mein Ziel ist immer, eine chaotische, aber schöne Komposition zu schaffen, die grafisch wirkt und zum Nachdenken anregt.

Technik Zeichnen, Collage und Malerei

Inspiration Ich bin stark von Musik und von der DIY-Szene inspiriert.

Kunden Nike, Squarespace, It’s Nice That, Warby Parker, Kiehl’s, Google etc

Agent kombinatrotweiss.de/en

English version below

Stephen Smith, Cover-Illustration für das Magazin Ed., zwei schwarze und zwei goldene Hände vor rotem Hintergrund, die jeweils ein Auge halten
Cover-Illustration für Ed.
Stephen Smith, Illustration für das Buchcover »Divertimento« von Julio Cortazar
Illustration für das Buchcover »Divertimento« von Julio Cortazar
Stephen Smith, Mural am Royal William Yard
Royal William Yard Mural
Stephen Smith, Beispielseite für ein Squarespace Sketchbook
Squarespace Sketchbook

 

Name Stephen Smith / Neasden Control Centre

Location South West, UK

Web adress www.neasdencontrolcentre.com

Start I graduated from the University of the West of England (BA Illustration) in Bristol in the 90’s and then went onto complete a masters at the University of Brighton (MA Illustration and Design) under George Hardie and John Vernon Lord. One of my first jobs was to illustrate a sleeve for Jon Kennedy with Red Design in Brighton. In 2003 the publisher Gestalten published a monograph on Neasden Control Centre the rest is history…

Style Chaotic and very hands on mixed media process collage

Favourite motifs I don’t have a favourite motif or colour but I love working with black and white space and my aesthetic feeds off this. My aim is always to create a messy but beautiful composition that is thought provoking and graphic.

Technique Drawing, collage and painting

Inspiration I’m heavily inspired by music and DIY scenes.

Clients Nike, Squarespace, It’s Nice That, Warby Parker, Kiehl’s, Google etc

Agent kombinatrotweiss.de/en

Das könnte dich auch interessieren



Source link

Weiterlesen

Beliebt