Save Klaus Visuelle Artikel

Emphasis

like with text

Bold

and italic

Visuelle Hierarchy die konzeptionelle Hierarchie des Inhalts

Priorisieren was auf die Seite kommt, Hierarchie daraus bauen

DVE = extreme focal point

Contrast helps it stand out

Similarity and Cont

Ordnung schaffen

Emphasis =

Variety =

Unity =

Typo

nicht zu viele Unterschiedliche Schriften, die in der visuellen Hierarchie gleichzeitig um die Aufmerksamkeit und Blick konkurrieren. Das schafft Verwirrung.

.. Nicht ins Chaos, Komplexität, Struktur .-> siehe Stacey Matrix

Annahmen die ich setze sind:

• Design soll nicht überfordern, für Verwirrung sorgen

Die Regeln darf man bewusst brechen.

Klarheit, Struktur, Ordnung und Interesse

Führung

Zusammenspiel

Abstand, Weißraum

Rhythmus, Trennungen

Gruppierungen (Nähe, Ähnlichkeit, interpretieren Fortsetzungen

Emphasis, Subordination

Was ist untergeordnet?

Gute Metaphern:

Vordergrund, Hintergrund

Wer ist Hauptdarsteller und wer Nebendarsteller?

Um Emphasis zu setzen gibt es viele Gestaltungsmöglichkeiten. Emphasis ist immer relativ zu was noch im Rahmen / Bild ist. Ein dominantes Element auf einer Website oder einem Screen kann aus dem Kontext gerissen untergehen.

Erfüllt diese Abweichung / Gleichheit einen Sinn? Verglichen mit den anderen Alternativen?

Unity and Variety

Fließtext

Angenehme Textgröße

Zeilenabstand

Bei dicken

Gestaltungsprinzipien:

Hier sind einige Gestaltungsprinzipien die miteinander in wechselwirkung treten

Aufmerksamkeit lenken

Leserichtung (wichtig bei F/Z, etc.) – gibt einen kulturell geprägten Rahmen damit unsere Gestaltung funktional bleibt.

LTR und oben nach unten; anderen Kulturen anders

Blickführung

zwei einfache Schemata: F und Z

oft beim Blog nach F- Blickführung Schema, nicht Z

bei Infografiken

Klare visuelle Hierarchie

D.h. kein Element komkurrieren miteinander

Bauchgefühl

immer mit dabei

Raster

Rhythmus

Weißraum

Akzente

Monotonie vs

.. zwischen welchen Polaritäten bewegen wir uns?

.. Konvention und innovation? — bereits erlerntes/erwartetes vs neu erlernen

Lesbarkeit:

Beschränkungen:

so wenig wie möglich Alliniierungkanten

iterativ überarbeiten bis nicht mehr langweilig aussieht.

Basics, die dafür sorgen,

Regeln brechen für Aufmerksamkeit.

Lesbarkeit

Kein Schwarz auf weiß. leicht grauer hintergrund mit nicht komplett schwarzer schrift ist oft angenehmer zu lesen.

---

Häufige Fehler

• Verwenden

Etwas entwerfen, um verstanden zu werden
Übermäßig komplex

Grundlegende Richtlinien

• Verwenden Sie ein dominantes visuelles Element und eine klare Hierarchie von visuellen Schwerpunkten, damit der Blick geführt wird – klassisch heißt das: Hauptüberschrift am größten, folgende Überschriften kleiner werdend
• im Idealfall
• Leserichtung beachten – eine Hauptausrichtung, maximal zwei

… Zum Hervorheben bestimmter Inhalte ist weniger oft mehr:

• Schlüsselbegriffe und -phrasen entweder fett ODER kursiv setzen
• eine Hauptfarbe, maximal zwei
• eine Hauptschriftart, maximal zwei
• Wenn Sie Kontraste verwenden, sollten Sie auf offensichtliche Unterschiede achten
• ob Schriftstil, Größe oder Farben
• Erstellen Sie ein Thema oder einen Stil und wiederholen Sie ihn

Regeln für Anfänger
Später können Sie diese biegen und dehnen

Visuelles Gewicht

im Idealfall unterstützt die visuelle Hierarchie die inhaltliche Hierarchie

Um das umzusetzen und zu überprüfen:

Was steht an erster, was an zweiter Stelle?

Wer ist Hauptdarsteller, wer Nebendarsteller?

Was steht im Vordergrund, was eher Hintergrund?

Aufmerksamkeit wird durch die geleitet.

nicht zu viele Unterschiedliche Schriften, die in der visuellen Hierarchie gleichzeitig um die Aufmerksamkeit und Blick konkurrieren. Das schafft Verwirrung.

Wenn Sie zu viele Ablenkungen schaffen, lenken Sie die Leute nur vom Design ab, anstatt sich mit der Kommunikation zu beschäftigen.

Halten Sie es einfach:
Text linksbündig
text Blocksatz bei dem keine Löcher zw. Worten entstehen (ab … Anschläge / Zeichen auf der Tastatur)

serifenlose Schriftarten

sehr fette und dekorative Überschriften, größere Buchstabenabstände für bessere Lesbarkeit.

Denken Sie daran, dass der Text wahrscheinlich auch auf dem Handy gelesen wird, also

Kontrast Text zu Hintergrund nicht zu extrem -schwarz auf weiß- wählen. Angenehmer für die Augen, wenn der Text nicht ganz schwarz und der Hintergrund leicht gräulich ist

Hervorhebung

Übersetzt mit www.DeepL.com/Translator (kostenlose Version)