Design Guidelines

18.6.1. Design Guidelines#

Farben#

Das Farbschema basiert auf dem Solarized-Farbschema von Ethan Schoonover. Es ist ein Farbkonzept für Texteditoren und Benutzeroberflächen und basiert auf einer bewusst reduzierten, harmonischen Farbpalette mit definierten Kontrastverhältnissen und unterstützt einen Hell- und Dunkelmodus (Light mode, Dark mode).

Eigenschaften

  • 16 gezielt abgestimmte Farben

  • Einheitliche Farblogik (Farben haben feste semantische Rollen)

  • Gleiche Palette für Light- und Dark-Modus (nur invertiert genutzt)

  • Fokus auf reduzierte Helligkeitskontraste statt reiner Schwarz-Weiß-Kontraste

Vorteile

  • Reduzierte Augenbelastung bei längerer Bildschirmarbeit

  • Gute Lesbarkeit durch ausgewogene Kontrastverhältnisse

  • Flexibler Wechsel zwischen Light- und Dark-Mode

Zusätzlich wurde die Farbpalette um Farben für spezielle Anwendungen ergänzt (Ergänzungsfarben). Diese sollen nur unter bestimmten Umständen zum Einsatz kommen.

Tab. 165 Solarized-Farben (+ Ergänzungsfarben)#

Farbton

Vorschau

RGB (dezimal)

HEX

CMYK

Anmerkungen

Base03

0, 43, 54

#002b36

1.00, 0.21, 0.00, 0.79

Hintergrund dunkel (Primär)

Base02

7, 54, 66

#073642

0.91, 0.18, 0.00, 0.74

Hintergrund dunkel (Kontrast)

Base01

88, 110, 117

#586e75

0.25, 0.07, 0.00, 0.54

Text auf hellem Hintergrund

Base00

101, 123, 131

#657b83

0.23, 0.06, 0.00, 0.49

Standardtext

Base0

131, 148, 150

#839496

0.13, 0.03, 0.00, 0.41

Sekundärer Text

Base1

147, 161, 161

#93a1a1

0.09, 0.00, 0.00, 0.37

Text auf dunklem Hintergrund

Base2

238, 232, 213

#eee8d5

0.00, 0.03, 0.10, 0.07

Hintergrund hell (Kontrast)

Base3

253, 246, 227

#fdf6e3

0.00, 0.03, 0.10, 0.01

Hintergrund hell (Primär)

Yellow

181, 137, 0

#b58900

0.00, 0.25, 1.00, 0.29

Gedämpftes Gelb

Yellow-Bright

255, 234, 0

#ffea00

0.00, 0.08, 1.00, 0.00

Ergänzung. Highlight

Yellow-Custom

241, 196, 15

#f1c40f

0.00, 0.18, 0.94, 0.06

Ergänzung. Kräftige Zwischenstufe

Orange

203, 75, 22

#cb4b16

0.00, 0.63, 0.89, 0.20

Warnfarbe

Red

220, 50, 47

#dc322f

0.00, 0.77, 0.79, 0.14

Alarm

Custom-1

148, 38, 0

#942600

0.00, 0.75, 1.00, 0.42

Ergänzung. Dunkler Rotton

Magenta

211, 54, 130

#d33682

0.00, 0.74, 0.38, 0.17

Akzent

Violet

108, 113, 196

#6c71c4

0.45, 0.42, 0.00, 0.23

Sekundärakzent

Blue

38, 139, 210

#268bd2

0.82, 0.34, 0.00, 0.18

Primärfarbe

Blue-Light

227, 242, 251

#e3f2fb

0.10, 0.04, 0.00, 0.02

Heller Hintergrund

Cyan

42, 161, 152

#2aa198

0.74, 0.00, 0.06, 0.37

Info

Green

133, 153, 0

#859900

0.13, 0.00, 1.00, 0.40

Status (gedämpft)

Green-Bright

0, 200, 83

#00c853

1.00, 0.00, 0.58, 0.22

Ergänzung. Aktiver Status

Schriftarten#

Als Basisschriftart kommt die Lexend-Schriftfamilie zum Einsatz.

Lexend ist eine moderne Sans-Serif-Schriftfamilie, die gezielt zur Verbesserung der Lesbarkeit entwickelt wurde, indem sie auf Erkenntnissen der Lesbarkeitsforschung basiert und die visuelle sowie kognitive Verarbeitung von Text optimiert.

Sie wurde von Dr. Bonnie Shaver-Troup (Educational Therapist und Begründerin des Lexend-Projekts) gemeinsam mit dem Typedesigner Thomas Jockin entwickelt. Die Entwicklung begann aus der Forschung zur Leseflüssigkeit heraus und wurde später in Zusammenarbeit mit Google Fonts als frei verfügbare Schriftfamilie umgesetzt.

Eigenschaften

  • Variable Buchstabenabstände und Proportionen

  • Große x-Höhe und offene, gut unterscheidbare Zeichenformen

  • Klare Differenzierung ähnlicher Glyphen (z. B. l, I, 1)

  • Mehrere Varianten mit unterschiedlicher Laufweite (z. B. Deca, Mega, Zetta)

  • Optimiert für Bildschirmdarstellung

Lesbarkeit

Die Lesbarkeit wird durch mehrere typografische Mechanismen verbessert. Größere Buchstabenabstände reduzieren das visuelle „Verschmieren“ von Zeichen und erleichtern die Orientierung im Text. Offene Formen und eine große x-Höhe verbessern die Erkennbarkeit einzelner Buchstaben. Gleichzeitig sorgt die geringere visuelle Dichte für weniger „Textblock-Effekt“ und eine bessere Strukturwahrnehmung.

Auf kognitiver Ebene führt dies zu stabileren Fixationen, weniger Rücksprüngen im Text und insgesamt flüssigerem Lesen. Die visuelle und mentale Belastung beim Lesen wird dadurch reduziert.

Vorteile

  • Erhöhte Lesegeschwindigkeit und besseres Textverständnis

  • Reduzierte visuelle Ermüdung

  • Verbesserte Lesbarkeit bei langen Texten und auf Bildschirmen

  • Besonders geeignet für Personen mit Dyslexie oder erhöhter visueller Belastung

Weiterführende Links

Synopsis

Lexend zielt nicht auf typografische Eleganz, sondern auf maximale Lesbarkeit und kognitive Entlastung.

Grafiken und Abbildungen#

  • Für eigens angefertigte schematische Abbildungen gilt der Scribble-Notes-Stil mit klaren, handgezeichnet wirkenden Konturen und einer sachlichen, reduzierten Darstellung. Die zeichnerische Gestaltung darf die fachliche Genauigkeit nicht beeinträchtigen.

  • Anatomische, physiologische und technische Darstellungen müssen fachlich korrekt sein und die wesentlichen Zusammenhänge eindeutig wiedergeben. Vereinfachungen müssen als schematische Darstellung erkennbar bleiben und dürfen keine sachlich falschen Aussagen vermitteln.

  • Alle selbst gestalteten Grafiken verwenden die oben dokumentierte erweiterte Solarized-Farbpalette. Zusätzliche Farben werden nicht ohne ausdrückliche Festlegung eingeführt.

  • Texte, Beschriftungen und neutrale Konturlinien verwenden Solarized Base1 (#93a1a1). Base1 ist von Base01 (#586e75) zu unterscheiden.

  • Farben aus der Akzentpalette kennzeichnen fachlich relevante Unterschiede, Strukturen, Zuordnungen oder Hervorhebungen und werden innerhalb einer Abbildung konsistent verwendet. Beschriftungen und zugehörige Markierungslinien oder Klammern können bei einer bewusst farbcodierten Hervorhebung dieselbe Akzentfarbe erhalten.

  • Farbliche Unterschiede sollen nach Möglichkeit auch anhand von Beschriftungen, Linienformen oder anderen Merkmalen nachvollziehbar sein. Die Aussage einer Grafik darf nicht ausschließlich von der Unterscheidung ähnlicher Farben abhängen.

  • Beschriftungen sind grundsätzlich deutschsprachig und verwenden die fachlich korrekte Terminologie des Kompendiums. Als Schriftart wird Lexend verwendet. Die Schrift muss in der vorgesehenen Darstellungsgröße lesbar bleiben.

  • Der Hintergrund ist vorzugsweise transparent. Wenn ein deckender Hintergrund aus inhaltlichen oder gestalterischen Gründen notwendig ist, wird eine passende Hintergrundfarbe aus der Solarized-Palette verwendet.

  • Die Grafiken werden bevorzugt als PNG bereitgestellt. Ein Vektor- oder Zeichenstil schreibt kein SVG als Veröffentlichungsformat vor.

  • Das Seitenverhältnis beträgt nach Möglichkeit 16:9. Andere Seitenverhältnisse sind zulässig, wenn der Inhalt – insbesondere bei hohen oder schmalen Motiven – in 16:9 nicht zweckmäßig dargestellt werden kann.

  • PNG-Grafiken erhalten eine Mindestbreite von 1 341 Pixeln. Höhere Auflösungen sind zulässig, sofern Seitenverhältnis, Lesbarkeit und Bildinhalt erhalten bleiben.

  • Motiv, Beschriftungen, Markierungen und wichtige Linien dürfen nicht abgeschnitten oder durch den Bildrand verdeckt werden. Die Abbildung muss sowohl in HTML als auch in der mittels LuaLaTeX erstellten PDF-Ausgabe gut lesbar sein.

  • Diese Regeln gelten projektweit für neu erstellte Grafiken. Spezifische Vorgaben für einzelne Abbildungen, etwa eine bestimmte anatomische Ansicht, ein Kurvenverlauf oder die Farbgebung einzelner Markierungen, gelten nur für die jeweils betreffende Abbildung.

Die in der Farbtabelle aufgeführten Bezeichnungen und Hexwerte sind verbindlich. Text-light ist eine zusätzliche Bezeichnung für Base00 (#657b83), Text-dark für Base1 (#93a1a1). Die unter den Farben dokumentierte Ergänzung Blue-Light (#e3f2fb) bleibt Bestandteil der Designpalette.