Eine Website kann technisch hervorragend funktionieren und trotzdem unangenehm zu benutzen sein.

Sie kann in weniger als einer Sekunde laden, aber niemand erkennt, wo er klicken soll.

Sie kann großartige Inhalte enthalten, aber durch schlechte Typografie kaum lesbar sein.

Sie kann professionelle Fotos besitzen, die trotzdem nicht zur Botschaft der Seite passen.

Oder sie sieht auf einem großen Monitor beeindruckend aus und wird auf einem Smartphone nahezu unbenutzbar.

Design ist deshalb weit mehr als Dekoration.

Es beeinflusst, wie Informationen wahrgenommen, verstanden und benutzt werden.

Bei Casiopeya behandeln wir Design und Medien deshalb nicht als Sammlung wechselnder Stiltrends.

Wir möchten verstehen, warum Gestaltung funktioniert.

Warum sind manche Seiten sofort übersichtlich?

Warum ermüdet ein Text nach drei Absätzen?

Warum wirkt ein Button klickbar?

Warum fällt ein bestimmtes Element zuerst ins Auge?

Warum sieht ein Foto professionell aus?

Warum wird ein Video riesig, obwohl die sichtbare Qualität kaum besser wird?

Und wie lassen sich Gestaltung, Technik und Nutzerbedürfnisse miteinander verbinden?

Gestaltung beginnt mit einer Aufgabe

Bevor eine Farbe, Schrift oder Bildsprache gewählt wird, sollte eine einfachere Frage beantwortet werden:

Was soll dieses digitale Produkt leisten?

Eine Nachrichtenseite besitzt andere Anforderungen als ein Onlineshop.

Eine Portfolioseite andere als eine Behördenwebsite.

Ein Wissensportal andere als eine Landingpage für ein einzelnes Produkt.

Die Gestaltung sollte diese Aufgabe unterstützen.

Ein Design kann optisch beeindruckend sein und funktional trotzdem scheitern.

Ein wesentlich schlichteres Layout kann dagegen hervorragend funktionieren, weil Besucher sofort verstehen, was sie tun können.

Deshalb beginnen wir nicht mit:

Welche Farbe gefällt mir?

Sondern mit:

Was soll der Nutzer hier erreichen?

Design ist Kommunikation

Jede Gestaltung vermittelt Informationen.

Eine große Überschrift sagt:

Das ist wichtig.

Ein Button sagt:

Hier kannst du etwas tun.

Ein Abstand sagt:

Diese Inhalte gehören nicht unmittelbar zusammen.

Eine gemeinsame Hintergrundfläche sagt:

Diese Elemente bilden eine Gruppe.

Ein Foto kann Vertrauen, Stimmung oder Kontext erzeugen.

Selbst eine leere Fläche kommuniziert.

Sie gibt Elementen Raum und hilft dabei, Zusammenhänge sichtbar zu machen.

Design ist deshalb eine Form von Sprache.

Nur besteht sie nicht ausschließlich aus Wörtern.

Menschen lesen eine Website nicht wie ein Buch

Bei einem Buch beginnen die meisten Leser oben auf Seite eins und lesen weiter.

Auf einer Website passiert häufig etwas anderes.

Menschen:

überfliegen,

springen,

suchen Orientierungspunkte,

lesen Überschriften,

beachten Bilder,

scrollen,

kehren zurück.

Eine gute digitale Gestaltung berücksichtigt dieses Verhalten.

Sie stellt Informationen so dar, dass jemand schnell erfassen kann:

Wo bin ich?

Was geht es hier?

Was ist wichtig?

Wo finde ich mehr?

Was kann ich tun?

Damit beginnt bereits User Experience.

Design & Medien besteht aus mehreren Disziplinen

Für Casiopeya teilen wir diesen Wissensbereich zunächst in fünf große Themenfelder.

Design & Medien
│
├── Webdesign
├── UX & Usability
├── Farben & Typografie
├── Bilder & Fotografie
└── Video

Diese Bereiche überschneiden sich bewusst.

Typografie ist Teil von Webdesign.

Fotografie beeinflusst UX.

Video besitzt technische Auswirkungen auf Performance.

Farben betreffen gleichzeitig Markenwirkung und Barrierefreiheit.

Die Trennung hilft vor allem dabei, Wissen übersichtlich aufzubauen.

Webdesign verbindet Inhalt und Oberfläche

Webdesign beschäftigt sich mit der sichtbaren Gestaltung einer Website.

Dazu gehören beispielsweise:

Layout,

Navigation,

Abstände,

Elementgrößen,

Buttons,

Formulare,

Responsivität,

visuelle Hierarchie.

Webdesign ist damit nicht einfach:

Eine Website hübsch machen.

Eine gut gestaltete Seite hilft dem Nutzer, den Inhalt zu verstehen.

UX betrachtet die gesamte Nutzungserfahrung

UX steht für User Experience.

Dabei geht es nicht ausschließlich darum, ob ein Button schön aussieht.

Die Frage lautet vielmehr:

Wie erlebt ein Mensch den gesamten Prozess?

Beispielsweise beim Kauf eines Produkts:

Produkt finden
↓
Informationen verstehen
↓
Variante auswählen
↓
in Warenkorb legen
↓
Bestellung abschließen
↓
Bestätigung erhalten

Jede dieser Stufen kann gut oder schlecht funktionieren.

UX betrachtet den gesamten Weg.

Usability betrachtet Benutzbarkeit

Usability lässt sich vereinfacht als Gebrauchstauglichkeit verstehen.

Kann ein Nutzer eine Aufgabe:

effektiv,

verständlich,

mit vertretbarem Aufwand

erledigen?

Ein Formular kann wunderschön gestaltet sein.

Wenn niemand erkennt, welches Feld verpflichtend ist, besitzt es ein Usabilityproblem.

Ein Menü kann minimalistisch aussehen.

Wenn Besucher die Navigation nicht finden, hilft der schöne Minimalismus wenig.

Design muss benutzbar bleiben.

Schönheit und Funktion sind keine Gegensätze

Manchmal entsteht der Eindruck:

Entweder eine Website sieht gut aus oder sie ist praktisch.

Das ist eine falsche Gegenüberstellung.

Gute Gestaltung kann gleichzeitig:

ästhetisch,

verständlich,

funktional

sein.

Problematisch wird es erst, wenn ein visueller Effekt wichtiger wird als die Aufgabe.

Eine Schrift kann wunderschön sein.

Wenn niemand längere Texte damit lesen möchte, ist sie als Fließtext ungeeignet.

Eine Animation kann beeindruckend sein.

Wenn sie bei jedem Scrollen den Nutzer ausbremst, wird sie zum Hindernis.

Eine Fotografie kann spektakulär sein.

Wenn sie die eigentliche Information überdeckt, erfüllt sie vielleicht nicht ihre Aufgabe.

Visuelle Hierarchie ordnet Information

Nicht jedes Element einer Seite sollte gleich stark wirken.

Wenn alles wichtig aussieht, ist nichts wichtig.

Eine gute visuelle Hierarchie unterscheidet beispielsweise:

Seitentitel
↓
Hauptüberschrift
↓
Abschnittsüberschrift
↓
Fließtext
↓
Zusatzinformation

Dafür können verwendet werden:

Größe,

Gewicht,

Farbe,

Abstand,

Position,

Kontrast.

Ein Leser erkennt dadurch bereits beim Überfliegen, wie der Inhalt aufgebaut ist.

Größe erzeugt Aufmerksamkeit

Ein großes Element fällt meistens stärker auf als ein kleines.

Das klingt banal.

Trotzdem wird diese einfache Regel häufig übertrieben.

Wenn:

Überschrift,

Button,

Werbebanner,

Navigation,

Hinweisbox

gleichzeitig sehr groß sind, konkurrieren sie.

Gute Gestaltung verteilt Aufmerksamkeit bewusst.

Kontrast trennt Elemente

Kontrast kann durch:

Helligkeit,

Farbe,

Größe,

Form,

Schriftgewicht

entstehen.

Ein Button hebt sich vom Hintergrund ab.

Eine Überschrift unterscheidet sich vom Fließtext.

Ein Hinweisblock wird visuell von normalem Inhalt getrennt.

Kontrast hilft dabei, Unterschiede sichtbar zu machen.

Zu wenig Kontrast macht alles ähnlich.

Zu viel Kontrast macht alles laut.

Weißraum ist kein verschwendeter Platz

Leere Fläche wird im Design häufig als Whitespace bezeichnet.

Sie muss nicht tatsächlich weiß sein.

Gemeint ist Raum zwischen Elementen.

Zum Beispiel:

zwischen Überschrift und Absatz,

zwischen Karten,

zwischen Bild und Text,

zwischen Navigation und Inhalt.

Dieser Abstand hilft dem Auge zu erkennen, welche Dinge zusammengehören.

Abstand kann Beziehungen ausdrücken

Nehmen wir:

Überschrift

Absatz

Wenn der Abstand zwischen Überschrift und Absatz klein ist, wirken beide verbunden.

Wenn zwischen zwei Absätzen deutlich mehr Raum liegt, entsteht eine neue Gruppe.

Gestaltung kann damit Information strukturieren, ohne ein zusätzliches Wort zu verwenden.

Mehr Inhalt bedeutet nicht bessere Raumnutzung

Eine Website muss nicht jeden freien Pixel füllen.

Besonders bei komplexen Informationen kann ausreichend Raum die Verständlichkeit deutlich erhöhen.

Das gilt auch für mobile Geräte.

Ein kleiner Bildschirm braucht nicht automatisch kleinere Abstände.

Oft braucht er gerade eine klarere Trennung der Elemente.

Raster bringen Ordnung

Viele Designs basieren auf einem unsichtbaren Raster.

Elemente richten sich an gemeinsamen Linien aus.

Beispielsweise:

| Textspalte | Bildspalte |
| Textspalte | Bildspalte |
| Textspalte | Bildspalte |

Dadurch entsteht visuelle Ordnung.

Ein Raster muss für Besucher nicht sichtbar sein.

Sie nehmen jedoch wahr, wenn Elemente ständig leicht gegeneinander verrutschen.

Konsistenz macht Oberflächen leichter verständlich

Wenn derselbe Elementtyp überall ähnlich aussieht, muss der Nutzer ihn nur einmal lernen.

Beispielsweise:

Primärer Button immer gleich.

Links immer erkennbar.

Infoboxen einheitlich gestaltet.

Überschriften folgen denselben Größen.

Das reduziert kognitive Arbeit.

Jede Ausnahme sollte deshalb einen Grund besitzen.

Responsive Design gehört heute zum Grundprinzip

Websites werden auf sehr unterschiedlichen Geräten angezeigt.

Zum Beispiel:

Smartphone,

Tablet,

Notebook,

großer Monitor.

Eine starre Gestaltung für eine einzelne Bildschirmgröße ist deshalb kaum sinnvoll.

Responsive Design passt das Layout an den verfügbaren Raum an.

Das bedeutet nicht einfach:

Desktopseite kleiner machen.

Häufig muss sich die Anordnung tatsächlich verändern.

Eine dreispaltige Seite wird mobil nicht einfach gequetscht

Auf einem großen Monitor könnte ein Layout lauten:

Navigation | Inhalt | Zusatzinformationen

Auf dem Smartphone kann daraus werden:

Navigation
↓
Inhalt
↓
Zusatzinformationen

Die Informationshierarchie bleibt.

Die Darstellung verändert sich.

Responsive Design ist deshalb stärker eine Layoutlogik als eine bloße Größenanpassung.

Mobile First ist eine Denkweise

Bei Mobile First wird eine Gestaltung zunächst für kleinere Bildschirme gedacht und anschließend erweitert.

Der Vorteil:

Man muss früh entscheiden, was wirklich wichtig ist.

Auf einem großen Desktop kann man leicht zehn Dinge gleichzeitig anzeigen.

Auf einem Smartphone ist der Platz begrenzt.

Das zwingt zur Priorisierung.

Mobile First bedeutet deshalb nicht:

Desktop ist unwichtig.

Es bedeutet:

Beginne mit den Kernfunktionen und erweitere anschließend.

Breakpoints sollten zum Layout passen

Responsive Websites verwenden häufig sogenannte Breakpoints.

An bestimmten Bildschirmbreiten verändert sich das Layout.

Man könnte beispielsweise definieren:

klein
→ eine Spalte

mittel
→ zwei Spalten

groß
→ drei Spalten

Die exakten Grenzen sollten nicht nur danach gewählt werden, welche bekannten Geräte existieren.

Sinnvoller ist:

Wann funktioniert das aktuelle Layout nicht mehr gut?

Dann braucht es eine Anpassung.

Webdesign und Performance hängen zusammen

Eine visuell aufwendige Website kann technische Kosten verursachen.

Zum Beispiel durch:

große Hintergrundvideos,

zahlreiche Webfonts,

riesige Bilder,

JavaScript-Animationen,

Slider,

externe Bibliotheken.

Das bedeutet nicht, dass Design minimalistisch sein muss.

Aber gestalterische Entscheidungen besitzen technische Folgen.

Ein schöner Effekt ist nicht kostenlos.

Jede Ressource muss übertragen und verarbeitet werden

Ein Bild muss geladen werden.

Eine Schriftdatei ebenfalls.

JavaScript muss heruntergeladen und verarbeitet werden.

Ein Video benötigt noch wesentlich mehr Daten.

Damit verbindet sich Design unmittelbar mit unserem Web-&-WordPress-Bereich.

Bilder für Websites optimieren, Caching einfach erklärt und Core Web Vitals verstehen behandeln genau diese technische Seite.

Gute Gestaltung berücksichtigt Ladezeit von Anfang an

Performance sollte nicht erst ganz am Ende erfolgen:

Design fertig
↓
Seite 15 MB groß
↓
jetzt irgendwie schneller machen

Besser:

Designidee
↓
technische Kosten bedenken
↓
geeignete Umsetzung wählen

Beispielsweise:

Braucht die Hero-Section wirklich ein Video?

Oder reicht ein starkes Bild?

Brauchen wir fünf Schriftfamilien?

Muss jede Karte eine Animation besitzen?

Soll dieses Bild wirklich in 6.000 Pixel Breite ausgeliefert werden?

Solche Entscheidungen sparen spätere Optimierung.

UX beginnt vor dem ersten Klick

Ein Nutzer erlebt eine Website bereits im Suchergebnis.

Der Seitentitel erzeugt eine Erwartung.

Die Beschreibung ebenfalls.

Danach wird geklickt.

Wenn die Zielseite vollkommen anders aussieht oder etwas anderes anbietet als erwartet, entsteht sofort Reibung.

UX beginnt deshalb nicht erst bei einem Button.

Sie umfasst den gesamten Erwartungs- und Nutzungspfad.

Navigation beantwortet die Frage „Wo kann ich hin?“

Eine gute Navigation muss nicht jedes Dokument anzeigen.

Sie sollte die wichtigsten Wege sichtbar machen.

Für Casiopeya könnte die Hauptnavigation beispielsweise nur die großen Bereiche zeigen:

Wissen
Magazin
...

Innerhalb von Wissen:

Web & WordPress
KI & Automatisierung
Design & Medien
Sicherheit & Datenschutz

Die detaillierte Navigation passiert anschließend auf Hub-Seiten.

Das reduziert Komplexität.

Mega-Menüs können helfen – oder überfordern

Bei sehr großen Websites können umfangreiche Menüs sinnvoll sein.

Sie zeigen viele Bereiche gleichzeitig.

Das Problem:

Wenn 80 Links ohne klare Gruppierung angezeigt werden, entsteht keine Orientierung.

Ein gutes großes Menü braucht deshalb:

klare Gruppen,

überschaubare Begriffe,

visuelle Hierarchie.

Die Zahl der Optionen allein erzeugt noch keine gute Navigation.

Breadcrumbs zeigen den Kontext

Breadcrumbs können beispielsweise lauten:

Wissen
→ Design & Medien
→ Webdesign
→ Responsive Design

Sie zeigen:

Wo befindet sich die Seite innerhalb des Wissenssystems?

Das ist besonders bei tiefen Informationsarchitekturen hilfreich.

Dabei muss die URL selbst nicht dieselbe komplette Hierarchie enthalten.

Wie wir unter URL-Struktur richtig planen gesehen haben, können Navigation und URL unterschiedliche Aufgaben erfüllen.

Buttons sollten wie Buttons aussehen

Das klingt trivial.

Trotzdem werden moderne Designs manchmal so reduziert, dass klickbare Elemente kaum noch erkennbar sind.

Ein interaktives Element sollte eine klare Affordance besitzen – also Hinweise darauf geben, wie es benutzt werden kann.

Ein Button kann beispielsweise durch:

Form,

Kontrast,

Beschriftung,

Position

als Aktion erkennbar werden.

Wenn Nutzer erst ausprobieren müssen, ob etwas klickbar ist, wurde ihnen unnötige Arbeit übertragen.

Link oder Button?

Beide werden häufig optisch ähnlich gestaltet.

Ihre Aufgabe ist jedoch etwas unterschiedlich.

Ein Link führt typischerweise zu einem anderen Inhalt oder Ort.

Ein Button löst eher eine Aktion aus.

Zum Beispiel:

Link:
Mehr über Caching erfahren

Button:
Datei hochladen

Eine klare Unterscheidung verbessert Verständlichkeit und Barrierefreiheit.

Formulare sind kleine Anwendungen

Ein Kontaktformular wirkt simpel.

Tatsächlich enthält es viele UX-Entscheidungen.

Zum Beispiel:

Welche Felder sind notwendig?

Welche optional?

Wie werden Fehler angezeigt?

Wann wird validiert?

Was passiert nach dem Absenden?

Ist klar, warum bestimmte Informationen benötigt werden?

Ein schlechtes Formular kann Nutzer verlieren, obwohl der Rest der Website hervorragend ist.

Weniger Felder sind häufig angenehmer

Ein Unternehmen möchte natürlich möglichst viele Informationen sammeln.

Der Nutzer möchte möglichst wenig eingeben.

Hier entsteht ein Interessenkonflikt.

Die beste Frage lautet:

Welche Information brauchen wir wirklich zu diesem Zeitpunkt?

Alles andere kann möglicherweise später gefragt werden.

Jedes zusätzliche Pflichtfeld erhöht Aufwand.

Fehlermeldungen sollten erklären, was zu tun ist

Schlecht:

Fehler 472.

Besser:

Bitte gib eine gültige E-Mail-Adresse ein.

Noch besser:

Die Meldung steht direkt beim entsprechenden Feld.

UX bedeutet häufig, Fehler nicht nur technisch festzustellen, sondern Menschen beim Beheben zu helfen.

Gute UX berücksichtigt Fehler

Ein Nutzer klickt versehentlich.

Eine Verbindung bricht ab.

Ein Formular enthält einen Fehler.

Eine Datei ist zu groß.

Ein Login funktioniert nicht.

Solche Situationen gehören zum normalen Betrieb.

Eine gute Oberfläche behandelt sie nicht als Ausnahme, die niemand sehen darf.

Sie erklärt:

Was ist passiert?

Was kann der Nutzer jetzt tun?

Barrierefreiheit gehört zu gutem Design

Digitale Gestaltung sollte nicht davon ausgehen, dass jeder Mensch:

perfekt sieht,

perfekt hört,

eine Maus benutzt,

kleine Schrift problemlos erkennt,

schnelle Animationen verträgt.

Barrierefreiheit versucht digitale Angebote so zu gestalten, dass sie von möglichst vielen Menschen benutzt werden können.

Das betrifft unter anderem:

Kontraste,

Tastaturbedienung,

semantische Struktur,

Alternativtexte,

Untertitel,

Formulare,

Fokuszustände.

Barrierefreiheit verbessert häufig die allgemeine UX

Ein gut lesbarer Kontrast hilft nicht nur Menschen mit Sehbeeinträchtigung.

Er hilft auch jemandem:

bei hellem Sonnenlicht,

auf einem schlechten Display,

mit müden Augen.

Untertitel helfen nicht nur gehörlosen Menschen.

Sie helfen auch jemandem, der ein Video ohne Ton ansehen möchte.

Barrierefreies Design ist deshalb nicht bloß eine Sonderversion für wenige Nutzer.

Viele Maßnahmen verbessern das Produkt insgesamt.

Farbe sollte niemals allein Bedeutung tragen

Beispielsweise:

grün = erfolgreich
rot = Fehler

Wenn ausschließlich die Farbe den Zustand unterscheidet, kann das für Menschen mit Farbsehschwächen problematisch sein.

Besser:

✓ Erfolgreich

⚠ Fehler

zusätzlich zur Farbe.

Information wird damit über mehrere Signale transportiert.

Farben erzeugen Stimmung und Orientierung

Farben besitzen sowohl funktionale als auch emotionale Wirkung.

Sie können:

Bereiche unterscheiden,

Aufmerksamkeit lenken,

Markenidentität erzeugen,

Zustände anzeigen.

Aber die Vorstellung:

Blau bedeutet immer Vertrauen.

oder:

Rot macht Menschen automatisch aggressiv.

ist zu simpel.

Farbwirkung hängt auch ab von:

Kontext,

Kultur,

Kombination,

Sättigung,

Helligkeit.

Ein einzelner Farbton besitzt keine universelle psychologische Bedeutung.

Ein Farbsystem ist besser als zufällige Farben

Eine Website sollte nicht für jedes Element spontan eine neue Farbe wählen.

Sinnvoller ist ein System.

Beispielsweise:

Primärfarbe
Sekundärfarbe
Hintergrund
Text
dezenter Text
Erfolg
Warnung
Fehler

Dann können diese Rollen konsistent verwendet werden.

Das erleichtert:

Design,

Entwicklung,

spätere Änderungen.

Kontrast ist wichtiger als die absolute Farbe

Dunkelgrauer Text auf weißem Hintergrund kann hervorragend lesbar sein.

Hellgrauer Text auf weißem Hintergrund nicht.

Die Frage lautet deshalb nicht nur:

Welche Farbe?

Sondern:

Wie unterscheidet sie sich vom Hintergrund?

Kontrast gehört gleichzeitig zu:

Lesbarkeit,

Barrierefreiheit,

visueller Hierarchie.

Dark Mode ist mehr als Farben invertieren

Ein dunkles Farbschema lässt sich nicht einfach erzeugen durch:

weiß → schwarz
schwarz → weiß

Bilder, Schatten, Akzentfarben und Kontraste wirken auf dunklem Hintergrund anders.

Auch die gefühlte Helligkeit eines Displays spielt eine Rolle.

Ein gutes Dark-Mode-Design braucht deshalb ein eigenes Farbsystem.

Typografie beeinflusst fast jeden Text

Eine Website kann die besten Inhalte besitzen.

Wenn die Typografie schlecht ist, werden sie weniger gern gelesen.

Typografie umfasst beispielsweise:

Schriftfamilie,

Schriftgröße,

Zeilenhöhe,

Zeilenlänge,

Gewicht,

Abstände.

Jede dieser Eigenschaften beeinflusst Lesbarkeit.

Eine Schrift muss zur Aufgabe passen

Eine dekorative Schrift kann hervorragend für eine kurze Überschrift funktionieren.

Für einen 4.000-Wörter-Ratgeber wäre sie möglicherweise anstrengend.

Eine technische Monospace-Schrift eignet sich perfekt für Code.

Für normale Fließtexte ist sie meist weniger angenehm.

Deshalb gibt es nicht:

die beste Schrift.

Es gibt eine passende Schrift für eine bestimmte Aufgabe.

Serif und Sans Serif sind keine Qualitätsklassen

Serifenschriften besitzen kleine Abschlussstriche an Buchstaben.

Sans-Serif-Schriften nicht.

Beide können hervorragend lesbar sein.

Die alte einfache Regel:

Serif nur Print, Sans Serif nur Bildschirm

ist längst zu grob.

Moderne Displays und hochwertige Fonts ermöglichen beides.

Wichtiger sind:

Schriftqualität,

Größe,

Kontrast,

Abstände,

Einsatzbereich.

Schriftgröße sollte nicht mit Zoom verwechselt werden

Ein Nutzer kann theoretisch zoomen.

Das ist kein Grund, Text standardmäßig zu klein darzustellen.

Fließtext sollte bequem lesbar sein, ohne dass der Leser zuerst seine Browseransicht korrigieren muss.

Besonders mobile Geräte machen das offensichtlich.

Eine winzige Desktopschrift wird auf einem Smartphone nicht besser.

Zeilenlänge beeinflusst Lesekomfort

Sehr breite Textblöcke führen dazu, dass die Augen nach jeder Zeile einen langen Weg zurücklegen müssen.

Sehr schmale Textspalten erzeugen dagegen ständig neue Zeilen.

Ein angenehmes Leselayout sucht einen Mittelweg.

Deshalb nimmt ein guter Artikel auf einem riesigen 32-Zoll-Monitor nicht zwangsläufig die komplette Bildschirmbreite ein.

Freier Raum kann die Lesbarkeit verbessern.

Zeilenhöhe gibt Text Luft

Zu enge Zeilen wirken gedrängt.

Zu große Abstände können die Verbindung zwischen Zeilen verlieren lassen.

Die passende Zeilenhöhe hängt unter anderem von:

Schrift,

Schriftgröße,

Zeilenlänge

ab.

Auch Typografie sollte deshalb als System betrachtet werden.

Nicht als Sammlung einzelner Werte.

Mehr Schriftarten bedeuten selten mehr Qualität

Eine Website verwendet:

eine Schrift für Überschriften,

eine andere für Fließtext,

eine dritte für Navigation,

eine vierte für Buttons,

eine fünfte für Zitate.

Das kann funktionieren.

Häufig entsteht daraus aber visuelles Chaos.

Eine oder zwei gut gewählte Familien reichen für viele Websites vollkommen aus.

Variation kann anschließend über:

Größe,

Gewicht,

Kursiv,

Spacing

entstehen.

Webfonts besitzen technische Kosten

Eine externe Schrift muss geladen werden.

Mehrere Schriftschnitte bedeuten mehrere Dateien.

Das kann die Ladezeit beeinflussen.

Deshalb ist Typografie gleichzeitig eine Performanceentscheidung.

Eine Website braucht vielleicht:

Regular,

Medium,

Bold.

Sie braucht nicht automatisch:

100,

200,

300,

400,

500,

600,

700,

800,

900

für jede Schriftfamilie.

Systemfonts können eine hervorragende Lösung sein

Eine Website muss nicht zwingend eine besondere Webfont laden.

Moderne Betriebssysteme besitzen sehr brauchbare Systemschriften.

Ein Systemfont-Stack kann Vorteile haben:

keine zusätzliche Schriftdatei,

schnelle Darstellung,

vertraute Optik,

gute Betriebssystemintegration.

Das ist besonders interessant, wenn Geschwindigkeit und funktionale Klarheit wichtiger sind als eine sehr spezifische Markenästhetik.

Bilder erfüllen unterschiedliche Aufgaben

Ein Bild kann:

Information erklären,

Atmosphäre schaffen,

ein Produkt zeigen,

eine Person zeigen,

einen Prozess visualisieren,

Aufmerksamkeit erzeugen.

Deshalb sollte vor der Auswahl gefragt werden:

Welche Aufgabe übernimmt dieses Bild?

Wenn die Antwort lediglich lautet:

Da war noch Platz,

ist es möglicherweise unnötig.

Dekoratives Bild und Informationsbild sind verschieden

Ein dekoratives Bild erzeugt Stimmung.

Ein Diagramm vermittelt Information.

Ein Produktfoto zeigt Details.

Ein Screenshot erklärt eine Bedienoberfläche.

Diese Bildtypen brauchen unterschiedliche Entscheidungen.

Zum Beispiel beim Alternativtext.

Ein rein dekoratives Bild muss nicht denselben Informationsgehalt beschrieben bekommen wie ein Diagramm.

Eigene Fotografie kann Vertrauen erzeugen

Ein echtes Foto eines:

Produkts,

Teams,

Betriebs,

Arbeitsprozesses

kann Informationen vermitteln, die ein generisches Stockfoto nicht besitzt.

Das bedeutet nicht, dass jedes Stockfoto schlecht ist.

Es bedeutet nur:

Authentizität kann einen realen Informationswert besitzen.

Ein echtes Foto zeigt:

So sieht es tatsächlich aus.

Stockfotos können sinnvoll sein

Stockfotografie ist hilfreich, wenn:

kein eigenes Motiv verfügbar ist,

ein allgemeines Konzept illustriert wird,

professionelle Qualität benötigt wird.

Problematisch wird sie, wenn Bilder austauschbar wirken.

Das klassische Symbolfoto:

Menschen im Anzug zeigen auf einen Laptop und lachen gleichzeitig

kommuniziert möglicherweise wenig über den tatsächlichen Inhalt.

Ein Bild sollte nicht nur visuell füllen.

KI-Bilder schaffen eine neue Möglichkeit

Generative Bildmodelle können Illustrationen erzeugen, die speziell zum Inhalt passen.

Das ist besonders interessant für:

abstrakte Themen,

individuelle Illustrationsstile,

Motive, die schwer fotografierbar wären.

Damit entsteht eine starke Verbindung zu unserem Bereich KI & Automatisierung.

Gleichzeitig müssen Fragen zu:

Qualität,

Konsistenz,

Kennzeichnung,

Rechten,

Authentizität

berücksichtigt werden.

Dafür werden wir eigene Artikel aufbauen.

Ein Bild muss technisch zur Website passen

Eine 8.000 × 5.000 Pixel große Fotodatei kann großartig aussehen.

Wenn sie auf der Website nur mit:

800 × 500 Pixel

dargestellt wird, ist die vollständige Originalgröße meist unnötig.

Unter Bilder für Websites optimieren behandeln wir deshalb:

Abmessungen,

Dateigröße,

Kompression,

WebP,

AVIF,

responsive Images,

Lazy Loading.

Design und Technik treffen hier unmittelbar aufeinander.

Auflösung und Dateigröße sind nicht dasselbe

Ein Bild kann große Abmessungen besitzen und trotzdem relativ gut komprimiert sein.

Ein anderes besitzt kleinere Abmessungen, aber eine riesige Datei.

Deshalb sollten mehrere Eigenschaften getrennt betrachtet werden:

Pixelmaße
Dateiformat
Kompression
Bildinhalt
Dateigröße

Ein Screenshot verhält sich anders als ein Foto.

Ein Logo anders als eine Landschaft.

Das richtige Format hängt vom Bildtyp ab.

Vektorgrafik und Pixelbild sind unterschiedliche Werkzeuge

Ein Foto besteht typischerweise aus Pixeln.

Ein Logo oder Icon kann als Vektorgrafik vorliegen.

Vektoren lassen sich mathematisch skalieren, ohne auf dieselbe Weise unscharf zu werden.

Deshalb eignet sich SVG beispielsweise hervorragend für viele:

Logos,

Icons,

einfache Illustrationen.

Für eine komplexe Fotografie wäre SVG dagegen meist nicht das passende Format.

Screenshots sind Informationsmedien

Ein guter Screenshot sollte nicht einfach den gesamten Bildschirm zeigen, wenn nur ein kleiner Bereich relevant ist.

Hilfreich können sein:

Ausschnitt,

Markierung,

Pfeil,

kurze Beschriftung.

Das Ziel lautet:

Der Leser soll sofort erkennen, was er ansehen soll.

Eine technische Anleitung mit unkommentierten Vollbildscreenshots kann genauso verwirrend sein wie ganz ohne Bilder.

Bildkomposition kann gelernt werden

Fotografie wirkt häufig intuitiv.

Trotzdem helfen einige grundlegende Prinzipien.

Zum Beispiel:

Was ist das Hauptmotiv?

Wo befindet es sich im Bild?

Welche Linien lenken den Blick?

Was befindet sich im Hintergrund?

Welche Perspektive wird verwendet?

Woher kommt das Licht?

Diese Fragen verbessern sowohl echte Fotografie als auch KI-generierte Bilder.

Denn auch ein Bildgenerator braucht gestalterische Entscheidungen.

Licht verändert Bilder stärker als viele Kameraspezifikationen

Dasselbe Motiv kann völlig anders wirken bei:

hartem Mittagslicht,

weichem Fensterlicht,

Gegenlicht,

Abendlicht.

Deshalb beginnt gute Fotografie nicht bei der Megapixelzahl.

Sie beginnt häufig bei:

Licht,

Motiv,

Perspektive.

Technik hilft anschließend, diese Entscheidung umzusetzen.

Smartphones sind längst ernsthafte Kameras

Für viele Webanwendungen reicht ein modernes Smartphone vollkommen aus.

Besonders wenn das Bild später nur in begrenzter Größe auf einer Website erscheint.

Eine große Kamera kann Vorteile bieten.

Aber:

schlechte Komposition

bleibt schlechte Komposition,

egal wie teuer die Kamera ist.

Für digitale Selbstmacher ist deshalb grundlegendes Fotografiewissen häufig wertvoller als sofort neues Equipment.

Video verbindet viele Medienformen

Video kann gleichzeitig enthalten:

Bild,

Bewegung,

Sprache,

Musik,

Texteinblendungen.

Dadurch besitzt es eine hohe Informationsdichte.

Es erzeugt allerdings auch deutlich höhere technische Anforderungen.

Ein Video muss:

aufgenommen,

geschnitten,

komprimiert,

gespeichert,

übertragen,

abgespielt

werden.

Auflösung sagt nicht alles über Videoqualität

Ein Video kann 4K sein und schlecht aussehen.

Ein anderes kann in Full HD sehr hochwertig wirken.

Qualität hängt auch ab von:

Bitrate,

Codec,

Licht,

Kamera,

Bewegung,

Kompression.

Die Auflösungszahl allein ist kein vollständiges Qualitätsmaß.

Was ist ein Codec?

Video enthält enorme Datenmengen.

Deshalb wird es komprimiert.

Ein Codec beschreibt, wie Video beziehungsweise Audio codiert und decodiert werden.

Unterschiedliche Codecs können bei vergleichbarer wahrgenommener Qualität sehr unterschiedliche Dateigrößen erzeugen.

Das ist besonders für Webvideo wichtig.

Eine kleinere Datei bedeutet:

weniger Übertragungsvolumen,

schnelleren Start,

geringere Serverlast.

Container und Codec sind nicht dasselbe

Eine Videodatei kann beispielsweise die Endung:

.mp4

besitzen.

MP4 ist dabei ein Containerformat.

Innerhalb davon kann Video mit unterschiedlichen Codecs gespeichert sein.

Das ist ähnlich wie bei einem Ordner:

Der Behälter sagt noch nicht vollständig, was darin liegt.

Diese Unterscheidung hilft, viele Video-Kompatibilitätsprobleme zu verstehen.

Selbst hosten oder Videoplattform?

Ein Video kann direkt auf dem eigenen Server liegen.

Oder über einen spezialisierten Videodienst eingebunden werden.

Beide Varianten besitzen Vor- und Nachteile.

Eigenes Hosting bedeutet mehr Kontrolle.

Es bedeutet aber auch:

Speicher,

Bandbreite,

Transcoding,

Streaming,

Player

selbst zu berücksichtigen.

Eine Videoplattform nimmt viel davon ab.

Dafür entsteht eine Abhängigkeit vom Anbieter.

Autoplay sollte sehr bewusst eingesetzt werden

Ein automatisch startendes Video kann Aufmerksamkeit erzeugen.

Es kann aber auch:

Daten verbrauchen,

ablenken,

Performance verschlechtern,

Menschen irritieren.

Besonders Ton sollte nicht überraschend automatisch starten.

Auch hier gilt:

Eine technische Möglichkeit ist noch keine gestalterische Empfehlung.

Untertitel verbessern Zugänglichkeit und Nutzung

Untertitel sind wichtig für gehörlose und schwerhörige Menschen.

Sie helfen aber auch:

in öffentlichen Verkehrsmitteln,

im Büro,

bei schlechter Audioqualität,

beim Lernen einer Sprache.

Damit sind Untertitel ein gutes Beispiel für eine Maßnahme, die Barrierefreiheit und allgemeine Nutzerfreundlichkeit gleichzeitig verbessert.

Motion Design sollte Information unterstützen

Animationen können zeigen:

Ein Menü öffnet sich.

Eine Karte wurde verschoben.

Ein Prozess läuft.

Ein Element gehört zu einem anderen.

Bewegung kann also funktional sein.

Problematisch wird sie, wenn Animation hauptsächlich demonstriert:

Schau, was technisch möglich ist.

Eine Animation braucht wie jedes andere Designelement eine Aufgabe.

Bewegung kann Menschen belasten

Manche Menschen reagieren empfindlich auf starke Animationen oder parallaxartige Bewegungen.

Moderne Systeme bieten deshalb Einstellungen wie reduzierte Bewegung.

Gute Websites können solche Nutzerpräferenzen berücksichtigen.

Das zeigt erneut:

Design ist nicht nur Geschmack.

Es besitzt körperliche Auswirkungen.

Designsysteme bringen Konsistenz in größere Projekte

Eine kleine Website kann viele Designentscheidungen spontan treffen.

Bei einem größeren Projekt führt das schnell zu Inkonsistenz.

Ein Designsystem kann beispielsweise definieren:

Farben,

Typografie,

Abstände,

Buttons,

Formulare,

Karten,

Hinweise.

Dann entstehen wiederverwendbare Komponenten.

Designregel
↓
Komponente
↓
wiederholte Verwendung

Das erleichtert sowohl Gestaltung als auch Entwicklung.

Ein Designsystem ist mehr als eine Komponentenbibliothek

Eine Sammlung fertiger Buttons ist hilfreich.

Ein echtes Designsystem enthält zusätzlich Regeln:

Wann wird welcher Button verwendet?

Welche Hierarchie besitzt er?

Wie verhält er sich mobil?

Welche Zustände gibt es?

Wie sieht der Fokuszustand aus?

Das Ziel ist nicht nur einheitliches Aussehen.

Es ist einheitliches Verhalten.

WordPress-Themes sind Designsysteme in kleiner Form

Ein gutes WordPress-Theme definiert bereits viele Grundlagen:

Schriftgrößen,

Farben,

Layouts,

Abstände,

Templates.

Unter WordPress-Themes verstehen haben wir gesehen, dass Themes weit mehr sind als ein dekorativer Anstrich.

Mit modernen Block-Themes und theme.json können viele globale Designregeln zentral definiert werden.

Damit entsteht eine direkte Verbindung zwischen Webdesign und WordPress-Architektur.

Page Builder lösen Designprobleme – und erzeugen neue

Page Builder ermöglichen komplexe Layouts ohne tiefes Programmierwissen.

Das ist ein großer Vorteil.

Gleichzeitig können sie dazu verleiten:

für jeden Abschnitt neue Abstände,

Farben,

Schriftgrößen

individuell festzulegen.

Dann entsteht keine Designsprache mehr.

Ein guter Page-Builder-Workflow nutzt deshalb globale Regeln, wo immer möglich.

Freiheit braucht Einschränkungen

Ein Redakteur braucht vielleicht:

drei Überschriftgrößen,

zwei Buttonvarianten,

vier sinnvolle Spaltenlayouts.

Wenn das System stattdessen anbietet:

137 Farben,

24 Schatten,

80 Animationen,

beliebige Schriftgrößen,

entsteht theoretisch mehr Freiheit.

Praktisch wird konsistentes Design schwieriger.

Gute Systeme begrenzen bewusst.

Templates reduzieren wiederkehrende Entscheidungen

Ein Artikeltemplate kann definieren:

Titelbereich,

Inhaltsbreite,

Bilddarstellung,

Autorinformation,

Navigation.

Dann muss ein Redakteur nicht für jeden Beitrag erneut das Layout erfinden.

Das erhöht:

Konsistenz,

Geschwindigkeit,

Qualität.

Templates sind deshalb ein wichtiges Werkzeug für skalierbares digitales Design.

Design muss auch ohne Designer weiterfunktionieren

Eine Website lebt oft viele Jahre.

Neue Inhalte kommen hinzu.

Andere Menschen arbeiten daran.

Ein gutes Design sollte deshalb Regeln besitzen, die auch später noch verstanden werden können.

Wenn jeder neue Artikel ein individuelles Kunstwerk benötigt, skaliert das System schlecht.

Ein guter Rahmen ermöglicht Kreativität innerhalb klarer Grenzen.

Medien brauchen einen Workflow

Auch Bilder und Videos sollten nicht zufällig irgendwo gespeichert werden.

Ein sinnvoller Medienworkflow kann beispielsweise sein:

Originalaufnahme
↓
Bearbeitung
↓
Export
↓
Weboptimierung
↓
Dateiname
↓
Metadaten
↓
Upload
↓
Archivierung

Damit bleiben Originale erhalten und Webversionen sind nachvollziehbar.

Das wird besonders wichtig, wenn viele Medien entstehen.

Original und Webdatei sollten getrennt werden

Ein unbearbeitetes Foto kann beispielsweise:

20 Megabyte

groß sein.

Die Webversion vielleicht:

180 Kilobyte.

Wenn nur die kleine Webdatei aufgehoben wird, fehlt später möglicherweise das hochwertige Original.

Umgekehrt sollte nicht jedes riesige Original direkt an Websitebesucher ausgeliefert werden.

Deshalb:

Original
→ Archiv

optimierte Version
→ Website

Das ist ein einfaches, aber sehr nützliches Medienprinzip.

Metadaten können Informationen enthalten

Fotos können Metadaten besitzen.

Zum Beispiel:

Kameramodell,

Aufnahmezeit,

GPS-Position.

Das kann nützlich sein.

Es kann aber auch Informationen offenlegen, die nicht veröffentlicht werden sollten.

Vor allem bei privaten Fotos sollte man wissen, welche Metadaten tatsächlich in der veröffentlichten Datei verbleiben.

Damit entsteht eine direkte Verbindung zum Bereich Sicherheit & Datenschutz.

Dateinamen sollten verständlich sein

Ein Bild:

DSC_927361.jpg

sagt wenig.

Ein sinnvoller Dateiname:

wordpress-dashboard.jpg

hilft Menschen bei der Verwaltung.

Es geht nicht darum, Dateinamen mit Keywords vollzustopfen.

Ein verständlicher Name macht Medienbibliotheken einfach übersichtlicher.

Alt-Texte sind keine versteckten SEO-Felder

Ein Alternativtext beschreibt die Funktion beziehungsweise relevante Information eines Bildes für Situationen, in denen es nicht visuell wahrgenommen werden kann.

Ein sinnvolles Beispiel:

Diagramm mit sinkender Ladezeit nach Aktivierung des Page Caches

statt:

SEO WordPress Cache Performance Website schnell Optimierung

Der Alt-Text gehört zur Zugänglichkeit und inhaltlichen Beschreibung.

Nicht zum Keyword-Stuffing.

Nicht jedes Bild braucht einen langen Alt-Text

Ein rein dekoratives Gestaltungselement besitzt möglicherweise keinen eigenen Informationswert.

Ein komplexes Diagramm dagegen kann eine ausführlichere textliche Erklärung benötigen.

Die richtige Beschreibung hängt deshalb davon ab:

Welche Information würde fehlen, wenn das Bild nicht sichtbar wäre?

Diese Frage ist wesentlich hilfreicher als eine starre Zeichenlänge.

KI verändert Medienproduktion grundlegend

Generative Systeme können heute:

Bilder erstellen,

Bilder bearbeiten,

Stimmen erzeugen,

Video generieren,

Untertitel erstellen,

Hintergründe entfernen,

Material hochskalieren.

Damit sinkt die technische Einstiegshürde enorm.

Gleichzeitig steigt die Bedeutung gestalterischer Kompetenz.

Wenn jeder in Sekunden ein Bild erzeugen kann, wird die Frage:

Welches Bild ist tatsächlich gut?

noch wichtiger.

Generierung ersetzt keine Bildidee

Ein KI-System kann hundert Varianten produzieren.

Ohne klare Vorstellung von:

Motiv,

Komposition,

Stimmung,

Zweck

können daraus hundert mittelmäßige Varianten werden.

Gestaltungswissen wird durch KI nicht bedeutungslos.

Es wird vielmehr zu dem, was aus technischer Generierung ein bewusstes Ergebnis macht.

KI kann Designsysteme unterstützen

Ein definierter visueller Stil kann als Grundlage für generative Workflows dienen.

Zum Beispiel:

ähnliche Perspektiven,

wiederkehrende Farbwelten,

bestimmte Illustrationsart,

ähnliche Beleuchtung.

Das wird bei größeren Contentprojekten interessant, weil Bilder dadurch nicht wie zufällig zusammengewürfelte Einzelwerke aussehen müssen.

Die technischen Verfahren dafür behandeln wir später im KI-Bereich.

Design braucht Tests mit echten Menschen

Ein Designer kann überzeugt sein:

Dieses Menü ist vollkommen verständlich.

Ein echter Nutzer klickt fünf Minuten lang an der falschen Stelle.

Dann haben wir neue Information.

UX sollte deshalb nicht ausschließlich aus Annahmen entstehen.

Schon einfache Beobachtungen können wertvoll sein.

Zum Beispiel:

Gib jemandem die Aufgabe:

Finde heraus, wie du das Passwort ändern kannst.

Dann beobachte.

Nicht erklären.

Nicht helfen.

Die Schwierigkeiten zeigen, wo die Oberfläche möglicherweise unklar ist.

Usability-Test braucht nicht immer ein Labor

Kleine Websites können bereits aus informellen Tests viel lernen.

Ein paar Menschen aus der Zielgruppe reichen oft, um offensichtliche Probleme zu entdecken.

Zum Beispiel:

Navigation übersehen.

Button nicht erkannt.

Formularfeld falsch verstanden.

Gesuchte Information nicht gefunden.

Ein Test beantwortet damit Fragen, die eine Designbesprechung allein nicht lösen kann.

Analytics zeigt Verhalten, aber nicht automatisch den Grund

Webanalyse kann zeigen:

Viele Nutzer verlassen Seite X.

Das bedeutet noch nicht:

Buttonfarbe falsch.

Vielleicht haben sie dort einfach ihre Information gefunden.

Vielleicht ist der Inhalt schlecht.

Vielleicht führt ein technischer Fehler zum Abbruch.

Daten zeigen was passiert.

Um das warum zu verstehen, können zusätzliche Methoden nötig sein:

Tests,

Feedback,

Interviews,

Beobachtung.

Damit verbindet sich Design direkt mit Webanalyse verstehen.

Heatmaps sind ebenfalls nur Hinweise

Eine Heatmap kann zeigen, wo Menschen klicken oder wie weit sie scrollen.

Das ist interessant.

Aber auch hier darf die Interpretation nicht automatisch erfolgen.

Viele Klicks auf ein Element können bedeuten:

Es ist wichtig.

Oder:

Es ist missverständlich.

Wenig Klicks können bedeuten:

Es ist unwichtig.

Oder:

Niemand erkennt, dass es klickbar ist.

Designforschung benötigt Interpretation.

Conversion ist nicht das einzige UX-Ziel

Bei einem Shop ist ein Kauf wichtig.

Bei einem Wissensartikel kann das Ziel anders sein:

Frage beantwortet.

Thema verstanden.

Weiterführenden Artikel gefunden.

Eine Website sollte deshalb ihre UX nicht ausschließlich nach:

Buttonklicks

bewerten.

Die gewünschte Handlung hängt vom Seitentyp ab.

Dark Patterns sind das Gegenteil guter UX

Manche Designs versuchen Nutzer gezielt zu Handlungen zu drängen, die sie möglicherweise nicht beabsichtigen.

Zum Beispiel:

Abmeldung verstecken.

Zusatzprodukt automatisch auswählen.

Ablehnungsoption kaum sichtbar machen.

Solche sogenannten Dark Patterns können kurzfristig Kennzahlen verbessern.

Sie verschlechtern aber:

Vertrauen,

Transparenz,

Nutzerkontrolle.

Gute UX hilft Menschen, informierte Entscheidungen zu treffen.

Nicht sie auszutricksen.

Vertrauen wird gestaltet

Vertrauen entsteht nicht durch eine einzelne Farbe oder ein Schloss-Icon.

Es entsteht aus vielen Signalen.

Zum Beispiel:

klare Sprache,

funktionierende Links,

nachvollziehbare Informationen,

professionelle Gestaltung,

echte Kontaktmöglichkeiten,

konsistente Bedienung,

sichere Technik.

Ein beliebiges Symbol:

100 % sicher

macht eine Website nicht vertrauenswürdig.

Design kann Vertrauen unterstützen.

Es kann fehlende Substanz nicht ersetzen.

Markenidentität und Usability dürfen sich ergänzen

Eine Website soll nicht aussehen wie jede andere.

Marken können durch:

Farbe,

Typografie,

Bildsprache,

Ton,

Layoutdetails

wiedererkennbar werden.

Diese Individualität sollte grundlegende Bedienkonventionen jedoch nicht unnötig zerstören.

Ein Warenkorb darf originell aussehen.

Der Nutzer sollte ihn trotzdem erkennen.

Ein Link darf zum Markenstil passen.

Er sollte weiterhin als Link erkennbar sein.

Konventionen sind nicht automatisch langweilig

Menschen haben gelernt:

Logo oben führt oft zur Startseite.

Unterstrichener Text kann Link sein.

Lupe bedeutet Suche.

Zahnrad steht häufig für Einstellungen.

Solche Konventionen reduzieren Lernaufwand.

Man muss sie nicht immer verwenden.

Aber wer bewusst davon abweicht, sollte einen Vorteil dafür besitzen.

Originalität ist kein Selbstzweck.

Design für Inhalte braucht andere Prioritäten als Design für Apps

Ein Wissensartikel braucht vor allem:

Lesbarkeit,

Orientierung,

gute Medien,

klare Hierarchie.

Eine komplexe Webanwendung braucht vielleicht:

Dashboards,

Filter,

Zustände,

Interaktionen.

Dasselbe Designsystem kann nicht jede Produktart identisch behandeln.

Deshalb beginnen gute Designentscheidungen immer mit der Aufgabe.

Ein Wissensportal braucht besonders gute Typografie

Bei Casiopeya sollen viele Artikel sehr ausführlich werden.

Damit steigen Anforderungen an:

Textbreite,

Schriftgröße,

Zeilenhöhe,

Zwischenüberschriften,

Abstände,

Inhaltsnavigation.

Ein schönes Hero-Bild ist nett.

Wenn jemand anschließend 15 Minuten einen schlecht gesetzten Text lesen muss, ist das grundlegende Designproblem nicht gelöst.

Content-Websites sollten Lesbarkeit sehr hoch priorisieren.

Inhaltsverzeichnisse können bei langen Artikeln helfen

Ein umfangreicher Artikel kann zwanzig oder mehr Abschnitte besitzen.

Ein Inhaltsverzeichnis bietet eine zusätzliche Navigationsebene.

Besucher können:

überblicken,

springen,

zurückkehren.

Das ist besonders hilfreich bei Nachschlageartikeln, die nicht zwingend vollständig von oben nach unten gelesen werden.

Sticky Navigation kann helfen – oder Platz verschwenden

Ein dauerhaft sichtbares Inhaltsverzeichnis kann auf großen Displays sehr praktisch sein.

Auf einem Smartphone kann es dagegen viel wertvollen Raum verbrauchen.

Responsive UX bedeutet deshalb nicht nur Elemente kleiner zu machen.

Manchmal müssen Bedienkonzepte je nach verfügbarem Raum wechseln.

Lesefortschritt ist nicht immer notwendig

Ein Fortschrittsbalken kann bei langen Artikeln Orientierung geben.

Er kann aber auch einfach eine weitere visuelle Komponente sein, die keinen echten Nutzen bietet.

Das ist ein gutes Beispiel für eine allgemeine Designregel:

Nicht alles, was möglich ist, braucht eine Website.

Jedes Element sollte eine Aufgabe besitzen.

Bilder sollten den Text nicht beliebig unterbrechen

Ein Bild nach jedem zweiten Absatz macht einen Text nicht automatisch angenehmer.

Wenn jedes Bild lediglich dekorativ ist, kann es den Lesefluss sogar stören.

Besser ist:

Bild dort, wo es etwas erklärt,

zeigt

oder visuell unterstützt.

Medien sollten Inhalt ergänzen.

Nicht eine starre Veröffentlichungsquote erfüllen.

Videos brauchen eine klare Rolle

Ein Video kann einen komplexen Ablauf hervorragend erklären.

Es kann aber für eine einfache Definition ineffizient sein.

Text besitzt Vorteile:

schnell scannbar,

durchsuchbar,

kopierbar,

leicht aktualisierbar.

Video besitzt andere Vorteile:

Bewegung zeigen,

Ton,

Demonstration,

emotionale Wirkung.

Das passende Medium hängt von der Information ab.

Text und Video können sich ergänzen

Eine gute Anleitung kann beispielsweise enthalten:

Text:

Schritte und Referenz.

Video:

komplette Demonstration.

Der Nutzer entscheidet, welches Format für ihn besser funktioniert.

Das ist oft sinnvoller, als einen Text künstlich durch Video zu ersetzen.

Design sollte wartbar sein

Eine Website wird nicht nur einmal gestaltet.

Sie wird:

aktualisiert,

erweitert,

von anderen bearbeitet.

Ein Layout, das ausschließlich funktioniert, wenn ein bestimmter Designer jeden neuen Inhalt manuell korrigiert, ist schwer skalierbar.

Gute Designsysteme sind deshalb:

dokumentiert,

wiederholbar,

fehlertolerant.

Komponenten sollten reale Inhalte vertragen

Eine Karte sieht im Design perfekt aus mit:

Titel: 28 Zeichen.

Was passiert bei 90 Zeichen?

Ein Name sieht gut aus mit:

Anna Müller.

Was passiert mit:

Maximilian Alexander von Beispielhausen?

Ein Design sollte nicht nur Idealinhalt vertragen.

Es muss mit realen Daten umgehen können.

Platzhaltertexte täuschen häufig

Lorem Ipsum besitzt immer eine angenehme Gleichmäßigkeit.

Realer Inhalt nicht.

Deshalb sollten Designs früh mit echten Texten getestet werden.

Besonders:

sehr lange Titel,

kurze Titel,

fehlende Bilder,

lange Wörter,

unterschiedliche Sprachversionen

zeigen schnell Schwächen.

Mehrsprachigkeit beeinflusst Gestaltung

Ein deutscher Begriff kann länger sein als der englische.

Eine andere Sprache kann von rechts nach links geschrieben werden.

Schriftarten unterstützen nicht jedes Alphabet.

Mehrsprachige Websites brauchen deshalb nicht nur Übersetzung.

Sie benötigen ein Layout, das sprachliche Unterschiede verträgt.

Design ist deshalb ein System aus Entscheidungen

Am Ende besteht eine Website nicht aus einem einzelnen schönen Entwurf.

Sie besteht aus sehr vielen Entscheidungen.

Welche Information?
↓
welche Priorität?
↓
welches Element?
↓
welche Darstellung?
↓
welches Verhalten?
↓
welches Medium?
↓
welche technische Umsetzung?

Je besser diese Entscheidungen zusammenpassen, desto kohärenter wirkt das Ergebnis.

Der Einstieg sollte wieder ganz vorne beginnen

Wie beim Web- und KI-Bereich sollten wir auch hier nicht zuerst in Spezialthemen springen.

Der erste Grundlagenartikel sollte lauten:

Was ist Webdesign?

unter:

/wissen/was-ist-webdesign/

Dort erklären wir, aus welchen Ebenen modernes Webdesign besteht und trennen Gestaltung, Frontend-Entwicklung, UX und Content voneinander.

Danach wäre die logische Reihenfolge:

Was ist Webdesign?
↓
Was ist UX?
↓
Was ist Usability?
↓
Responsive Design
↓
visuelle Hierarchie
↓
Typografie

Damit entsteht wieder ein klarer Lernpfad.

Design & Medien verbindet alle Wissenswelten

Dieser Bereich wird besonders viele Querverbindungen erhalten.

Zu Web & WordPress, wenn es um:

Themes,

Performance,

responsive Bilder,

Core Web Vitals

geht.

Zu KI & Automatisierung, wenn es um:

Bildgeneratoren,

automatische Bildbearbeitung,

Video-KI

geht.

Zu Sicherheit & Datenschutz, wenn es um:

Bildmetadaten,

Tracking,

eingebettete Dienste,

externe Medienplattformen

geht.

Damit zeigt sich erneut, warum wir die einzelnen Artikel URL-seitig flach unter /wissen/ halten können.

Ihre fachlichen Beziehungen entstehen im Wissensnetz.

Gutes Design macht Technik verständlicher

Eine komplizierte Funktion kann durch eine gute Oberfläche einfach wirken.

Eine einfache Funktion kann durch eine schlechte Oberfläche kompliziert wirken.

Design verändert nicht die zugrunde liegende Technik.

Aber es entscheidet stark darüber, wie Menschen sie erleben.

Genau deshalb gehört Design nicht an das Ende eines digitalen Projekts.

Es ist ein Teil davon.

Design sollte Probleme reduzieren, nicht neue erzeugen

Die beste Gestaltung fällt häufig gar nicht besonders auf.

Der Nutzer:

findet die Information,

versteht den Text,

erkennt den nächsten Schritt,

füllt das Formular aus

und erreicht sein Ziel.

Er denkt nicht:

Fantastisch, diese Navigation hat eine hervorragende Informationsarchitektur.

Er benutzt sie einfach.

Gutes Design macht komplexe Dinge selbstverständlich.

Was du dir über Design & Medien merken solltest

Design ist nicht bloß die optische Oberfläche einer Website.

Es strukturiert Information, lenkt Aufmerksamkeit und beeinflusst, wie Menschen digitale Inhalte verstehen und benutzen.

Webdesign verbindet:

Layout,

Navigation,

Typografie,

Farben,

Medien,

responsive Darstellung.

UX betrachtet die gesamte Erfahrung eines Nutzers.

Usability betrachtet stärker die tatsächliche Benutzbarkeit.

Typografie beeinflusst Lesbarkeit.

Farben schaffen Hierarchie und Orientierung.

Bilder können Information, Authentizität und Atmosphäre vermitteln.

Video kann komplexe Abläufe zeigen, besitzt aber höhere technische Anforderungen.

Und all diese Entscheidungen besitzen technische Konsequenzen für:

Performance,

Barrierefreiheit,

Datenschutz,

Wartbarkeit.

Die wichtigste Grundregel lautet deshalb:

Nicht:
Wie kann ich diese Seite spektakulärer machen?

Sondern:
Was soll der Mensch hier verstehen oder tun,
und welche Gestaltung hilft ihm dabei?

Genau daraus entsteht gutes digitales Design.

Ja. Ich würde die vorhandenen Hubtexte nicht anfassen, sondern jeweils ganz unten genau so einen kompakten Themenindex ergänzen. Die URLs unten stammen aus deiner Sitemap; webanalyse-2 lasse ich natürlich weg. Dein Web-Bereich reicht in der Sitemap von den Website-/WordPress-Grundlagen bis zu SEO und Indexierung. Die KI-Seiten folgen vollständig bis zur lokalen Bild-KI, danach Design, Fotografie und Video, und schließlich die neun Sicherheits- und Datenschutzseiten.

Alle Themen im Überblick

Gute digitale Gestaltung entsteht aus mehreren Ebenen: Benutzerführung, visuelle Ordnung, Typografie und Farben gehören ebenso dazu wie hochwertige Bilder, Fotografie und Video. Hier findest du alle Grundlagen dieses Themenbereichs an einem Ort.

Webdesign und Benutzerführung

• Was ist Webdesign?
• Was ist UX Design?
• Was ist UI Design?
• Responsive Webdesign verstehen
• Visuelle Hierarchie verstehen
• Typografie im Web verstehen
• Farben im Webdesign verstehen

Digitale Bilder verstehen

• Bildformate fürs Web verstehen
• Bildauflösung verstehen
• Bildkomposition verstehen
• Bildbearbeitung verstehen

Fotografie verstehen

• Licht in der Fotografie verstehen
• Belichtung verstehen
• Schärfentiefe verstehen
• Brennweite verstehen
• Kameraobjektive verstehen
• Autofokus verstehen
• Kamerasensoren verstehen
• RAW oder JPEG: Was ist der Unterschied?

Video verstehen und bearbeiten

• Wie funktioniert digitales Video?
• Videoauflösung und Bildrate verstehen
• Video-Codecs und Container verstehen
• Videos für Websites komprimieren
• Guten Ton bei Videos verstehen
• Videobearbeitung verstehen

Design ist damit weit mehr als die Wahl schöner Farben oder eines modernen Themes. Je besser Gestaltung, Technik und Medienproduktion zusammenarbeiten, desto leichter lassen sich digitale Inhalte verstehen, benutzen und erleben.

---