Webdesign kompakt Gestaltung von Website-Komponenten - Christoph Kolloge
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Christoph Kolloge
Webdesign kompakt
Gestaltung von Website-Komponenten
Aktualisierte Auflage vom September 2021
1
Vorwort
Bei der Gestaltung von Website-Komponen- und Apple auf allgemeingültige Aussagen
ten wie Headern gibt es einiges zu beachten, überprüft. Anschließend überprüfte ich über
was nur schwer im Internet zu finden ist und 1600 Komponenten von 200 namhaften Web-
bislang in keinem Buch steht. Bislang, wohl- sites (siehe Anhang A-3) daraufhin, ob sie
gemerkt: Dieses Buch ist das Ergebnis einer diesen Aussagen sowie eigenen Erkenntnissen
dreijährigen Recherche, das Ihnen die auf- aus Webdesign-Projekten entsprechen.
wändige Suche nach hilfreichen Design Tipps
abnehmen kann. Durch den Abgleich konnte ich die Aussagen
aus Büchern und Online-Quellen herausfil-
Im vorliegenden Buch lernen Sie anhand tern, die inzwischen veraltet oder nicht all-
von Beispielen, wie Sie ansprechende und gemeingültig sind, so dass nur die relevanten
benutzerfreundliche Website-Komponenten Tipps, Empfehlungen und Gestaltungsricht-
gestalten. Zunächst werden die wichtigsten linien Eingang in dieses Buch gefunden haben.
Grundlagen des Webdesigns erklärt, unter
anderem zu den Themen Farbwahl, Respon- Das Buch richtet sich an:
sive Webdesign sowie Usability (siehe Kapitel
1). Darauf aufbauend wird beschrieben, wofür
welche Bestandteile von Internetauftritten ĵ Webdesigner & UI Designer:
eingesetzt werden und was dabei zu beachten erhalten Sie neue Erkenntnisse
ist (siehe Kapitel 2 bis 7). zur Webgestaltung und Design
Inspiration
Darüber hinaus enthält das Buch viele Infos
zum Nachschlagen, z. B. eine Übersicht zu ĵ Studierende des Mediendesigns
geeigneten Schriftarten (siehe Anhang A-1) und Interaction Designs: lernen Sie
sowie eine Sammlung empfohlener Internet- die Grundlagen zur Gestaltung von
seiten mit Design Systemen, Blogs, Ressour- Websites und deren Bestandteilen
cen und Tools (siehe Anhang A-2).
ĵ Webentwickler & Studierende der
Als Grundlage des Buchs habe ich über 600 Informatik: lernen Sie den Einsatz-
Online-Quellen und 50 Bücher nach Tipps, zweck, die Fachbegriffe und die
Empfehlungen und Richtlinien zur Gestaltung typischen Bestandteile von Website-
von Websites und Website-Komponenten Komponenten
durchsucht. Dabei habe ich unter anderem
Ergebnisse aus Usability-Studien von Firmen
wie der Nielsen Norman Group eingearbeitet Ich wünsche Ihnen viel Spaß beim Lesen und
sowie Design Systeme von Firmen wie Google einen großen Lerneffekt!
2 Vorwort
Vorgehen
Bei der Erstellung des Buchs bin ich in vier Schritten vorgegangen:
Ermittlung verbreiteter
SCHRITT Website-Komponenten
01 Auswertung von Website Buildern wie
Elementor und Website-Vorlagen
(WordPress- und HTML-Templates)
Auswertung von Design Tipps,
SCHRITT Empfehlungen und Richtlinien
02 unter anderem aus Webdesign- und
Usability-Büchern, Online-Artikeln sowie
Design Systemen
Sammlung ansprechender,
SCHRITT benutzerfreundlicher Komponenten
03 Aufbau einer nach Website-Komponenten
strukturierten Sammlung von über 1400
Screenshots
Abgleich der Tipps, Empfehlungen
SCHRITT und Richtlinien mit der Sammlung
04 Überprüfung der Aussagen auf allgemeine
Gültigkeit und Aktualität sowie Heraus-
filtern veralteter Aussagen
Webdesign kompakt 3
Inhalt
1 Grundlagen 3 Textkomponenten
1.1 Übersichtlichkeit ..................................... 7 3.1 Überschriften ......................................... 54
1.2 Ästhetik .................................................. 11 3.2 Fließtexte ............................................... 62
1.3 Lesbarkeit .............................................. 17 3.3 Listen ..................................................... 66
1.4 Usability ................................................. 18 3.4 Hinweisboxen ........................................ 70
1.5 Flexibilität .............................................. 21 3.5 Tooltips & Popovers ............................... 72
1.6 Performance .......................................... 23 3.6 Testimonials ........................................... 74
3.7 Pull Quotes ............................................. 76
3.8 Badges .................................................... 78
2 Inhaltscontainer 3.9 Counter .................................................. 80
2.1 Header ................................................... 26
2.2 Sections ................................................. 30
4 Bild- & Videokomponenten
2.3 Cards ...................................................... 32
2.4 Icon Boxes .............................................. 34 4.1 Bildergalerien ........................................ 86
2.5 Tabs ........................................................ 36 4.2 Lightboxes ............................................. 88
2.6 Accordions ............................................. 38 4.3 Image Links ........................................... 90
2.7 Modale Fenster ...................................... 40 4.4 Image Maps ........................................... 92
2.8 Carousels ............................................... 42 4.5 Video-Player .......................................... 94
2.9 Footer .................................................... 44
4
5 Navigationskomponenten 7 Infografiken
5.1 Hauptnavigation .................................... 98 7.1 Interaktive Karten ............................... 158
5.2 Hamburger-Menüs ............................... 102 7.2 Tabellen ............................................... 162
5.3 Dropdown-Menüs ................................ 104 7.3 Balkendiagramme ............................... 168
5.4 Mega-Dropdowns ................................. 106 7.4 Säulendiagramme ............................... 170
5.5 Subnavigation ...................................... 108 7.5 Liniendiagramme ................................ 172
5.6 Paginierung .......................................... 110 7.6 Kreisdiagramme .................................. 176
5.7 Brotkrumenpfade ................................ 112
5.8 Footer-Navigation ................................ 114
5.9 Buttons ................................................. 116 Anhänge & Verzeichnisse
5.10 Textlinks ............................................... 120
A-1 Empfohlene Schriftarten .................... 179
5.11 Back-to-Top-Links ................................ 124
A-2 Empfohlene Websites ......................... 180
5.12 Suchfeld-Navigation ............................ 126
Register ................................................ 182
Glossar ................................................. 184
Quellen ................................................ 187
6 Formularkomponenten
Impressum .......................................... 190
6.1 Eingabefelder ...................................... 136
6.2 Passwortfelder .................................... 140
6.3 Date Picker .......................................... 142
6.4 Buttongruppen .................................... 144
6.5 Dropdown-Felder ................................ 146
6.6 Checkboxen ......................................... 148
6.7 Radiobuttons ....................................... 150
6.8 Toggle Switches ................................... 152
6.9 Fortschrittsanzeigen ........................... 154
5
Kapitel 3 Textkomponenten 6
Schriftkategorien
Setzen Sie in Textkomponenten Schriften ein, die gut lesbar sind und zum Inhalt sowie zur
Zielgruppe des Internetauftritts passen. Für Websites bieten sich vor allem Schriften aus
folgenden Schriftkategorien an:
EIGENSCHAFTEN EINSATZGEBIETE (U. A .) BEISPIELE
A
Sans Serif
Schriften ohne Serifen
mit moderner, minima-
listischer Anmutung
Sport
Technologie
Start-ups
Montserrat
Fira Sans
Lato
A
Serif
Traditionell bzw.
klassisch wirkende
Schriften mit Serifen
Kosmetik
Bankwesen
Wissenschaft
Lora
Crimson
Alegreya
A
Slab Serif
Robust wirkende
Schriften mit
blockartigen Serifen
Werbung
Technologie
Fahrzeugindustrie
Arvo
Zilla Slab
Bitter
A
Script
Handgeschrieben
wirkende, elegante,
feminine Schriften
Mode
Hochzeitsthemen
Babythemen
Olivier
Cookie
Pacifico
A
Decorative
Schriften mit hochstili-
sierten, exzentrischen
Buchstabenformen
Produkte für Kinder
Nahrungsmittel
Baloo
Chewy
Medula One
Schriften aus den Kategorien Sans Serif und Serif sind sowohl für Fließtexte als auch für
Überschriften gut geeignet. Schriften aus den Kategorien Slab Serif, Script und Decorative
eignen sich in erster Linie für Überschriften. Aufgrund ihrer guten Lesbarkeit sind Sans-
Serif-Schriften auf Internetseiten am weitesten verbreitet.
Webdesign kompakt 51
7
Beispiele für geeignete Schriftkombinationen
Schriften aus derselben
Yoga Schriftfamilie
Schriften aus derselben
10 Übungen für
Schriftfamilie haben diesel-
Fortgeschrittene
be oder ähnliche Anatomie
und können daher gut zu-
sammen eingesetzt werden,
z. B. Museo 700 und Museo
Sans 700.
Serifenschrift mit
serifenloser Schrift
Blasenkorallen
Eine weitere gut geeignete
Schriftkombination besteht
aus einer Serifenschrift wie
Plerogyra sinuosa TheSerif mit einer serifen-
losen Schriftart wie Source
Sans Pro.
Geschwungene mit
zurückhaltender
Finde Schrift
dein Geschwungene Schriftarten
wie Playball können gut mit
Glück
zurückhaltenden Schriftar-
ten wie Calisto MT kombi-
niert werden.
8 Textkomponenten
52
Breite Schrift mit
schmaler Schrift
Entdecke
Breite Schriften wie Mont-
serrat liefern einen anspre-
chenden Kontrast zu eher
die Bergwelt schmalen Schriften wie
Source Sans Pro
Schriften mit gleich-
mäßiger Strichstärke
MENORCA
Auch Schriften mit einer
gleichmäßigen Strichstärke
wie die DIN Engschrift und
Das Urlaubsparadies der Balearen die Schriftart Segoe UI las-
sen sich gut kombinieren.
Schriften mit
ähnlichen x-Höhen
Je ähnlicher die Höhe der
BioHonig
Kleinbuchstaben ohne Ober-
und Unterlänge (x-Höhe) ist,
desto besser passen Schriften
zusammen. Ähnliche x-Höhen
haben z. B. Helvetica Neue
und Playfair Display.
Webdesign kompakt 53
9
3.1 Überschriften
Typographische Elemente, die in exponierter Weise dem Inhaltstext
vorangestellt sind
1 EIGENHEIM
2
Smarthome
Lösungen
3 Auf Ihr Zuhause zugeschnittene
flexible Smarthome Lösungen
PROJEKTANFRAGE
Einsatzzweck Typische Bestandteile
Überschriften (Headlines) können eingesetzt 1 Eyebrow Headline/Overline (optional):
werden zur Hervorhebung eines Themas
ĵ zum Leiten des Lesers zum gesuchten 2 Main Headline: Hauptüberschrift
Inhalt
3 Subheading/Subline (optional):
ĵ zur Steigerung der Lesbarkeit und
zum Auslagern weniger wichtiger
Verständlichkeit von Texten
Wörter der Main Headline bzw. um die
ĵ um die Neugier des Lesers zu wecken
ĵ um längere Fließtexte in handliche
Main Headline kurz zu halten
Abschnitte zu unterteilen
ĵ als Blickfang
10 Textkomponenten
54Techniken für kurze Überschriften
Kurze Überschriften eignen sich besser als Blickfang, sehen besser aus und können den
Leser effektiver zum gesuchten Inhalt leiten als lange Überschriften. Folgende Techniken
können eingesetzt werden, um Überschriften kurz zu halten:
Schmale Schrift und/oder Ersetzen von Konjunktionen
verringerter Buchstaben- durch kürzere Zeichen
abstand
Verwenden Sie z. B. ein &-Zeichen
Ein schmaler Schriftschnitt bietet sich anstelle der Konjunktion „und“ oder
gerade bei längeren Überschriften an, einen Schrägstrich anstelle der Kon-
um Platz zu sparen. Auch ein verringer- junktion „oder“.
ter Buchstabenabstand reduziert den
Platzbedarf. Mit einem solchen kann
zudem ein übersichtlicheres Wortbild Für immer
erreicht werden. & ewig
SPORTARTEN IM
LIVESTREAM Weglassen oder kleinere
Gestaltung weniger wichtiger
Wörter
Artikel (der, die, das; ein, eine, einer)
sollten in Überschriften vermieden
Auslagerung von Wörtern in werden. Falls auf Artikel nicht ver-
Overline oder Subheading zichtet werden kann, können diese in
kleinerer Schrift gesetzt werden. Das-
selbe gilt für Präpositionen wie „in“
Sommerangebote: 60 %
und sonstige weniger wichtige Wörter
günstigere Sonnenbrillen
wie Zusätze in Klammern.
SOMMERANGEBOTE
60 % günstigere FRÜHE VOGEL
DER
Sonnenbrillen LABRADOR / Retriever
Webdesign kompakt 11
55Tipps zu Main Headlines und Subheadings
Verringerter Einheitliche Satzkante
Buchstabenabstand
Achten Sie bei linksbündigen Main
Verringern Sie bei Main Headlines den Headlines auf eine einheitliche Satz-
Buchstabenabstand (Zeichenabstand), kante. Rücken Sie sehr große Headlines
damit die Wörter kompakter wirken leicht nach links, um die Satzkante an
und deutlicher als zusammengehö- die Folgezeilen anzugleichen.
rend wahrgenommen werden. Mit
einem normalen Buchstabenabstand
wirken Main Headlines meist zu luftig,
gerade bei einer sehr großen Schrift.
Main Headline
Folgezeile
Überschrift Main Headline
Folgezeile
Überschrift
Dezente Gestaltung von
Subheadings
Kein Blocksatz Gestalten Sie gerade längere Subhea-
dings dezenter als Headlines, damit
Verzichten Sie auf Blocksatz, um sie die Aufmerksamkeit nicht zu stark
unregelmäßige Abstände zwischen von der Headline weglenken. In der
Wörtern der Überschrift zu vermeiden. Regel bietet sich eine deutlich kleinere
Schrift als bei der Headline an.
Überschrift mit Blocksatz und
unregelmäßigen Abständen
Schwimmen
mit Haien
Reisebericht von einem Schnorcheltrip einige
Überschrift ohne Blocksatz mit
Kilometer vor der Küste von Oahu bei Hawaii
regelmäßigen Abständen
56 Textkomponenten
12Große Schrift Kurze Main Headline
Gestalten Sie die Main Headline Halten Sie aus den auf Seite 55
in einer großen Schrift, damit sie genannten Gründen Main Head-
sich deutlich von den umgebenden lines möglichst kurz. Laut Nielsen &
Elementen absetzt und das Auge des Loranger (2006) sollten Überschriften
Lesers auf sich zieht. maximal 60 Zeichen enthalten, damit
sie den Leser effektiv zum gesuchten
Inhalt leiten können.
Die schönsten
Aquarien Main Headline,
Wir haben die zehn schönsten die mehr als 60 Main Headline
Schau-Aquarien der Welt ausgewählt
Zeichen enthält mit unter 60
und dadurch zu Zeichen
lang ist
Tipps zu Seitentiteln
Auffällige Gestaltung Nennung im Browser-Tab-Titel
Gestalten Sie den Seitentitel auffällig, Nehmen Sie den Seitentitel in den Ti-
damit er als eines der ersten Seiten- tel des Browser-Tabs auf, um Nutzern
elemente wahrgenommen wird und die Navigation zwischen Browser-
um zu vermeiden, dass er mit Zwi- Tabs zu erleichtern. Stellen Sie den
schenüberschriften verwechselt wird. Seitentitel im Browser-Tab voran,
Unterlegen Sie den Seitentitel dafür wenn darin auch der Website-Titel
z. B. mit einem Foto. genannt wird. Dadurch kann ver-
mieden werden, dass der Seitentitel
Wasserwelt.info
ganz oder teilweise ausgeblendet ist,
wenn Nutzer eine Vielzahl von Tabs
Unterwasserwelt im Browser geöffnet haben.
Tauchen Sie ein Webdesign kompakt Webdesign kompakt
Aktuelles - Webdesig Kontakt - Webdesign
Webdesign kompakt 13
57Tipps zu Eyebrow Headlines
Herausstellen eines Themas Kleinere Schrift als bei Headline
oder einer Kategorie
Setzen Sie Eyebrow Headlines kleiner
Setzen Sie Eyebrow Headlines bei als die Headline. Achten Sie darauf,
langen Main Headlines ein, die keine dass die Schrift trotzdem gut erkenn-
Schlüsselbegriffe des zugehörigen bar ist und sich ausreichend von der
Textes enthalten, um ein Thema Headline unterscheidet, z. B. durch
oder eine Kategorie herauszustellen.
Dadurch müssen Nutzer nur die Eye-
brow Headline und nicht die gesamte Fette Schrift
Headline oder gar den ganzen Text
GROSSBUCHSTABEN
lesen, um die Kategorie oder das
Thema herauszufinden. Verzichten Sie Farbige Schrift
auf eine Eyebrow Headline, wenn die
FARBFLÄCHE
Main Headline kurz ist und mehrere
Schlüsselbegriffe enthält.
SMARTHOME
Dein smartes Zuhause
Vergrößerter Zeichenabstand
bei Großbuchstaben
Verwenden Sie bei Eyebrow Head-
lines in Großbuchstaben einen ver-
Kurze Eyebrow Headline größerten Zeichenabstand. Dadurch
erhalten die Kanten jedes Wortes
Halten Sie die Eyebrow Headline kurz.
eine Zahnform anstelle einer geraden
Ideal ist ein einzelnes Wort.
Linie, wodurch sie laut UX Movement
(2016) besser lesbar sind.
HOCHWERTIGE KOCHKUNST
Haute Cuisine
ABSTAND
KOCHKUNST
Haute Cuisine
ABSTAND
14 Textkomponenten
58Tipps zu Zwischenüberschriften
Eindeutige Zuordnung Platzierung nah am
zugehörigen Abschnitt
Sorgen Sie für eine eindeutige Zu-
ordnung von Absätzen. Wählen Sie Platzieren Sie Zwischenüberschriften
zwischen der Zwischenüberschrift und nah am zugehörigen Textabschnitt.
dem folgenden Text einen identischen Indem eine Zwischenüberschrift näher
oder etwas größeren Abstand als zwi- am zugehörigen Textabschnitt als am
schen den Absätzen. Dadurch wirken vorangehenden Abschnitt platziert
die Überschrift und Absätze eines Text- wird, ist klar, zu welchem Abschnitt
abschnitts zusammengehörig. die Zwischenüberschrift gehört. Es
wird ein 2-3 Mal größerer Abstand über
einer Zwischenüberschrift gegenüber
Zwischenüberschrift dem Abstand darunter empfohlen.
2-3x
Zwischenüberschrift
Zwischenüberschrift
Vermeidung von
Wortwiederholungen
Vermeiden Sie Wortwiederholungen
in aufeinanderfolgenden Zwischen-
überschriften wie „Fazit zum Thema
Fette/halbfette Schrift
1“ und „Fazit zum Thema 2“, da Über-
Formatieren Sie Zwischenüberschrif- schriften dadurch schlechter scannbar
ten in einem fetten oder halbfetten sind. Benutzer erhalten hierbei z. B.
Schriftschnitt, damit sich diese eindeu- erst neue Informationen beim Lesen
tig vom Fließtext absetzen. des vierten Wortes.
Webdesign kompakt 15
59Verzicht auf Farbstreifen Linksbündige Ausrichtung
Vermeiden Sie Farbstreifen hinter Zwi- Richten Sie Zwischenüberschriften
schenüberschriften, da Zwischenüber- linksbündig aus. Eine linksbündige
schriften und zugehörige Texte durch Ausrichtung hilft Nutzern aufgrund der
unterschiedliche Hintergrundfarben einheitlichen Kanten der Textblöcke,
wie separate Elemente wirken. eine Seite schnell nach relevanten
Wörtern zu durchsuchen.
Zwischenüberschrift 1
Zwischenüberschrift
Zwischenüberschrift 2
Zwischenüberschrift 1
Zwischenüberschrift
Zwischenüberschrift 2
Maximal vier
Nummerierungsstufen
Vermeidung von
Worttrennungen
Verwenden Sie maximal vier Numme-
rierungsstufen. Mehr Stufen überfor-
Vermeiden Sie in Zwischenüberschrif- dern laut Willberg & Forssmann (2010)
ten Worttrennungen. Diese sind nur den Leser. Die DIN-Norm 1421 legt
dann zulässig, wenn die Wortteile für fest, dass Nummerierungen maximal
sich bestehen können, z. B. bei Wort- 4 Stufen haben sollten.
zusammensetzungen.
1.1.1.1.1 Überschrift
Das Fußballsta- Das Fußball-
dion stadion 1.1.1.1 Überschrift
16 Textkomponenten
60Tipps zur Schriftgröße
Verwenden Sie für Überschriften grundsätzlich erstellen und hierbei die Schriftgröße jeder
eine größere Schrift als für den Fließtext, damit nächstgrößeren Überschriftenebene mit
sich diese vom Fließtext absetzen und das Auge einem bestimmten Faktor zu multiplizieren.
stärker auf sich ziehen. Es bietet sich an, eine Wie von Joseph Mueller (2018) empfohlen,
Überschriftenhierarchie auf der Basis eines Type sollten sich die Hierarchiestufen am Website-
Scale Kalkulators wie auf type-scale.com zu typ orientieren:
Marketingseiten
H1 Bei Marketingseiten sollte es einen großen Kontrast zwischen den
Hierarchiestufen geben, z. B. indem die nächstgrößere Überschrift
H2 jeweils nach dem Goldenen Schnitt 1,618 Mal größer formatiert wird.
H3 Die großen Überschriften helfen dabei, die Benutzer durch die Seite zu
führen und sie auf die wichtigsten Informationen zu lenken.
Informations-Websites und Blogs
H1 Für Informations-Websites und Blogs wird ein mittleres Kontrastver-
hältnis empfohlen, z. B. mit dem Faktor 1,333. Damit können unnötige
H2 Zeilenumbrüche vermieden werden und es kann Platz eingespart wer-
H3 den. Durch eine kleinere Schrift passen z. B. bei einer Überschrift eines
Artikels mehr Wörter in eine Zeile.
Produktseiten und Dashboards
H1
Bei Produktseiten und Dashboards (Benutzeroberflächen zur Daten-
H2 Visualisierung oder Systemverwaltung) werden eine Vielzahl an
H3 Schriftgrößen benötigt, deshalb bietet sich hierbei ein vergleichswei-
H4 se geringer Größenkontrast zwischen den Hierarchiestufen an,
z. B. mit dem Faktor 1,125.
Webdesign kompakt 17
61Chrome Browser Mockup
3.2 Fließtexte
Fortlaufende Texte eines Artikels ohne Überschriften, Abbildungen,
Tabellen und Ähnliches
Typographie Tipps New Tab
http://www.typographietipps.info
ermeiden Sie lange Textzeilen mit mehr als 75
1 Zeichen, weil es den Lesern sonst schwer fällt, in
der richtigen Zeile zu bleiben. Vermeiden Sie auch
2
kurze Textzeilen mit weniger als 30 Zeichen, weil das Auge
hierbei zu oft zu Zeilen zurückkehren muss und der Lesefluss
unterbrochen wird. Die Textzeilen dieses Textes sind etwa 60
Zeichen lang.
Einsatzzweck Typische Bestandteile
Als Fließtext wird durchgängiger Text forma- 1 Initiale (optional): zur Kennzeichnung
tiert, soweit dieser in einem Stück und ohne eines neuen Abschnittes bzw. zur Bereit-
Unterbrechungen durch Überschriften, Abbil- stellung von Einstiegspunkten für den
dungen, Tabellen und Ähnliches gesetzt wird. Leser
2 Textabschnitt/Absatz: zur Verbesserung
der Lesbarkeit und um den Eindruck einer
Bleiwüste zu vermeiden, sollten längere
Texte in kleine Textabschnitte aufgeteilt
werden. Die ShoutEx Inc. (2017) empfiehlt
Abschnitte mit jeweils zwei oder drei Sät-
zen. Nielsen & Loranger (2006) empfehlen
max. fünf Sätze pro Textabschnitt bzw.
Absatz.
18 Textkomponenten
62Tipps zur Optimierung der Lesbarkeit
Angemessene Zeilenlänge
Vermeiden Sie sehr kurze oder sehr lange Textzeilen. Sehr lange Textzeilen erschweren es,
in der richtigen Zeile zu bleiben. Bei sehr kurzen Textzeilen muss das Auge zu oft zu Zeilen
zurückkehren und der Lesefluss wird unterbrochen. Auf Desktop-PCs und Tablet-PCs wird
daher eine Zeilenlänge zwischen 50 und 75 Zeichen empfohlen. Auf Smartphones sollten
die Textzeilen von Fließtexten zwischen 30 bis 50 Zeichen lang sein.
0 30 50 75 90
Zu kurz Lorem ipsum dolor sit amet,
consectetuer adipising elit.
Etiam bibendum elit eget erat.
Ideal für Lorem ipsum dolor sit amet, consectetuer
Smartphones adipising elit. Etiam bibendum elit eget erat.
Etiam dui sem. fermentum vitae, sagittis id.
Ideal für Lorem ipsum dolor sit amet, consectetuer adipising elit. Etiam
Desktop-PCs bibendum elit eget erat. Etiam dui sem. fermentum vitae, sagittis id,
malesuda in, quam. fermentum vitae, sagittis id, malesuda in, quam.
Zu lang Lorem ipsum dolor sit amet, consectetuer adipising elit. Etiam bibendum elit eget erat.
Etiam dui sem. fermentum vitae, sagittis id, malesuda in, quam. Lorem ipsum dolor sit amet,
consectetuer adipising elit. Etiam bibendum elit eget erat. Etiam dui sem. fermentum vitae.
Gut lesbare Schriftart sowie Kein Blocksatz
angemessener Zeilenabstand
Vermeiden Sie Blocksatz. Durch Block-
und Farbkontrast
satz ohne Silbentrennung können
Verwenden Sie eine gut lesbare, neut- große, unschöne Lücken in Textblö-
rale Schriftart, z. B. eine der mit einem cken entstehen.
Sternchen gekennzeichneten Schriften
in Anhang A-1. Achten Sie auf einen
ausreichenden Farbkontrast der Schrift Dies ist ein etwas längerer Bei-
spieltext, der den Einfluss des
zum Hintergrund (siehe Seite 17). Set- Blocksatzes auf die Lesbar-
zen Sie einen Zeilenabstand zwischen keit eines Textes demonstriert.
140 und 170 % der Schriftgröße ein.
Webdesign kompakt 19
63Ausreichend große Schrift Keine maximalen Schwarz-
Weiß-Kontraste
Setzen Sie eine ausreichend große
Schrift ein. Vor dem Hintergrund fol- Vermeiden Sie maximale Schwarz-
gender Vorgaben wird eine Schriftgrö- Weiß-Kontraste. Verwenden Sie
ße zwischen 13 und 18 pt empfohlen. stattdessen abgemilderte Varianten,
z. B. dunkelgrauen statt tiefschwarzen
QUELLE SCHRIFTGRÖSSE
Text auf weißem Hintergrund oder
schwarzen Text auf hellgrauem Hinter-
Material Design Standard: 16 pt grund. Durch diese Abmilderung des
(Google) Klein: 14 pt Kontrastes ist der Text am Bildschirm
gleichzeitig gut lesbar und angenehm
Human Inter- Standard für iOS:
face Guidelines 17 pt; Standard für für die Augen.
(Apple) macOS: 13 pt
Tiefschwarz Dunkelgrau
WCAG 2.0 18 pt
#000000 #252525
Standards
Keine langen Texte in
Linkbündige Ausrichtung Großbuchstaben
Richten Sie gerade längere Fließtexte Vermeiden Sie eine Darstellung langer
linksbündig aus. Vermeiden Sie lange Texte komplett in Großbuchstaben.
zentrierte Fließtexte, da diese auf- Solche Texte sind schlechter lesbar
grund der uneinheitlichen Kanten des und wirken leicht aufdringlich.
Textblocks schwerer zu lesen sind und
unordentlich aussehen können.
DIES IST EIN BEISPIELTEXT, DER DEN
EINFLUSS VON GROSSBUCHSTABEN
AUF DIE LESBARKEIT EINES TEXTES
DEMONSTRIERT.
Dies ist ein Beispieltext, der
den Einfluss von Groß- und
Kleinschreibung auf die Lesbarkeit
eines Textes demonstriert.
20 Textkomponenten
64Sonstige Tipps
Lange Texte nur in PDF-Version Wenige Wörter in fetter Schrift
Aufgrund von Faktoren wie Bild- Betonen Sie nur wenige Wörter eines
schirmabstand und Hintergrund- Fließtextes durch fette Schrift. Auf
beleuchtung sind Texte leichter in diese Weise lenken die Wörter nicht
Papierform lesbar als am Bildschirm. beim Lesen ab und stören nicht den
Stellen Sie sehr lange Texte daher als Textfluss.
PDF-Datei bereit – möglichst im DIN
A4-Format, damit die PDF-Datei ohne Betonen Sie nur wenige Wörter eines Fließtextes
Seitenanpassung gedruckt werden durch fette Schrift, um nicht den Textfluss zu
stören.
kann.
Druckversion
Textteil mit Stand 2020
(PDF, 12 MB)
DOWNLOAD
Auflockerung langer Texte
Lockern Sie längere Texte auf, damit
sie einladender wirken und der Ein-
druck einer Bleiwüste vermieden wird,
z. B. durch Abbildungen, Listen oder
Initialen. Falls auflockernde visuelle
Elemente nicht in Frage kommen,
Keine Unterstreichungen
lässt sich der Eindruck einer Bleiwüste
Verwenden Sie keine Unterstreichun- auch vermeiden, indem längere Texte
gen in Fließtexten. Von einer Verwen- standardmäßig nach ein paar Zeilen
dung nicht verlinkter, unterstrichener abgeschnitten und erst beim Klick auf
Wörter in Fließtexten wird abgeraten, einen Textlink wie „Mehr lesen“ voll-
weil diese mit Links verwechselt wer- ständig angezeigt werden.
den können.
Dieses Beispiel zeigt einen Text, der nach einigen
Zeilen abgeschnitten ist. Erst durch einen Klick
Unterstrichene Wörter können leicht auf den unten stehenden Textlink wird der
vollständige Text angezeigt. Dadurch kann der
mit Links verwechselt werden, gerade
Eindruck einer Bleiwüste vermieden werden.
farbige Wörter.
MEHR LESEN
Webdesign kompakt 21
653.3 Listen
Aufzählungen oder Nummerierungen zur Darstellung
aufeinanderfolgender Schritte oder Begriffe
1
3 Website Leicht Responsive Integrierter
2
Layouts anzupassen Webdesign Online-Shop
Einsatzzweck Typische Bestandteile
Aufzählungen sollten laut Nielsen & Loranger 1 Icons: beim Einsatz von Icons ist
(2006) zum Herausstellen von vier oder mehr Folgendes zu beachten:
Aufzählungspunkten ohne feste Reihenfol-
ĵ Verwendung von Icons, deren Bedeutung
ge verwendet werden. Sie haben folgende
schneller als beim Lesen von Text erkenn-
Zwecke:
bar ist
ĵ leichteres Verständnis von Inhalten ĵ einheitliche Form, Farbe und Größe, damit
ĵ leichteres Herauspicken relevanter Stellen die Icons als zusammengehörig wahrge-
durch Nutzer nommen werden (z. B. aus dem gleichen
ĵ visuelle Auflockerung von Texten Icon Set; siehe Seite 79)
ĵ Aufbereitung für Nutzer, die die Website ĵ zur Website passende Formen und Farben
überwiegend überfliegen statt zu lesen ĵ klar unterscheidbare Icons
Wenn die Reihenfolge oder Anzahl der Ele- 2 Texte/Listenelemente
mente wichtig ist (z. B. bei Schritt-für- Schritt-
Anleitungen), sollten stattdessen Nummerie-
rungen eingesetzt werden.
22 Textkomponenten
66Tipps zu Listen
Verwendung von Icons Großzügige Abstände
zwischen Listenelementen
Setzen Sie Icons anstelle von Auf-
zählungszeichen ein, wenn es zu den Sorgen Sie für großzügige Abstände
Themen der Liste passende, verständ- zwischen Listenelementen, um über-
nisfördernde Icons gibt. Dadurch sichtliche und gut lesbare Listen zu
wird der Inhalt von Listen betont. erreichen und die Listenelemente
Auch können Icons dafür sorgen, dass optisch voneinander abzugrenzen.
sich Listen besser von Fließtexten Setzen Sie einen größeren Zeilenab-
absetzen. stand als bei Fließtext ein.
Farbe Farbe Design
Helligkeit Helligkeit Design
Marketing Marketing
Kontrast Kontrast
Support Support
Statistik
Statistik
Farbe Helligkeit Kontrast
Vermeidung langer Listen
Vermeiden Sie sehr lange Listen. Grant
(2018) empfiehlt, Listen mit über 7
Hängende Einzüge
Punkten in kleinere Gruppen aufzu-
Verwenden Sie bei vertikalen Listen teilen, da sich die meisten Nutzer
hängende Einzüge. Bei einem hängen- maximal 7 Punkte merken können.
den Einzug ist die erste Zeile links-
bündig mit der Zeile ausgerichtet und
die restlichen Absatzzeilen sind etwas
nach rechts eingerückt.
Ohne hängen- Mit hängendem
den Einzug Einzug
Webdesign kompakt 23
67Separierte Nummern/Icons Ähnliche Zeilenlängen
Sorgen Sie dafür, dass sich Nummern Achten Sie auf ähnliche Zeilenlängen,
oder Icons von den Listenelementen um ein ruhiges, einheitlich erschei-
absetzen. Dies können Sie bei Num- nendes Schriftbild zu erreichen. Jeder
mern z. B. durch eine Unterlegung Listeneintrag sollte zudem gleich
mit einer farbigen Form, durch eine strukturiert werden, z. B. indem jedes
größere Schrift oder eine andere Farbe Listenelement mit einem Nomen oder
erreichen. Verb beginnt.
Überschrift
01 Dies ist ein beispielhafter Text.
Schlafsack
Badeanzug für unseren
Ausflug zu den Wasserfällen
01.
Sonnencreme
Zweizeilige
Überschrift
Schlafsack
01 Einzeilige Überschrift Badeanzug
Sonnencreme
Großgeschriebenes erstes Wort
Verzicht auf Artikel
Schreiben Sie in Listenelementen das
erste Wort groß. Dadurch können Sie Verzichten Sie auf Artikel. Dadurch
das Scannen durch Nutzer erleichtern. sind Aufzählungspunkte leichter
Diese Formatierung empfiehlt unter unterscheidbar und lassen sich besser
anderem Loranger (2017b). überfliegen bzw. scannen.
schreiben Schreiben die Stadt Stadt
telefonieren Telefonieren das Land Land
besuchen Besuchen der Fluss Fluss
24 Textkomponenten
68Tipps zu Icons in Listen
Einheitliche Formen Optische Ausrichtung
Achten Sie bei Icons auf einheitliche Richten Sie Icons in Hintergrund-
Formen. Schließen Sie Icons mit unter- formen optisch aus, wenn eine
schiedlichen Grundformen ggf. in eine mathematisch exakte, zentrierte
Hintergrundform ein, damit sie ein- Ausrichtung nicht ausbalanciert wirkt.
heitlich und proportional zueinander Verschieben Sie z. B. ein dreieckiges
aussehen. Icon in einer Hintergrundform leicht
nach rechts, damit dieses ausbalan-
ciert und harmonisch wirkt.
E-Mail
Schreiben Sie uns eine E-Mail
Besuchen
Besuchen Sie uns
E-Mail
Schreiben Sie uns eine E-Mail
Besuchen Großzügige Abstände
Besuchen Sie uns
zwischen Icons und Texten
Sorgen Sie für einen ausreichenden
Abstand der Icons zum Text, um
Benutzern ein einfaches Überfliegen
von Listen zu ermöglichen. Vermei-
Platzierung links oder oben
den Sie eine zu dichte Platzierung
Platzieren Sie Icons links neben dem von Texten neben Icons.
Text oder darüber. Dadurch sehen
Nutzer erst das Icon und dann den zu-
gehörigen Text. Design Design
Marketing Marketing
Support Support
Überschrift
Statistik Statistik
Webdesign kompakt 25
693.4 Hinweisboxen
Textboxen mit Benachrichtigungen
1 Erfolg: Sie haben sich erfolgreich registriert. 6
2 3 4 5
Einsatzzweck Typische Bestandteile
Hinweisboxen werden eingesetzt, um eine 1 Accent Border (optional): Akzentuie-
Rückmeldung zu geben, die sich auf eine ge- rungsstreifen in einer Akzentfarbe, der
samte Seite oder Website bezieht. Sie können bei wichtigen Hinweisboxen eingesetzt
verwendet werden, wenn werden kann, damit diese mehr Aufmerk-
samkeit auf sich ziehen
ĵ ein Fehler aufgetreten ist
2 Icon: um den Typ der Nachricht bzw. die
ĵ ein Systemzustand in Zukunft zu einem Hinweisklasse schneller zu kommunizieren
Fehler führen könnte (ob es sich beispielsweise um einen Fehler
ĵ Benutzer im Offline-Modus sind oder einen Hinweis handelt)
ĵ eine Aktion abgeschlossen wurde 3 Hinweisklasse: z. B. Fehler, Warnung,
Erfolg oder Information
ĵ ergänzende Informationen
verfügbar sind oder auf etwas 4 Nachricht: 1-2 Sätze oder Stichwörter
hingewiesen werden soll
5 Textbox: in der Regel farblich unterlegt,
ĵ nutzerbezogene Hinweise damit sich diese von den umgebenden
gezeigt werden sollen Elementen absetzt
ĵ wartungsbedingte Hinweise 6 Schließfunktion: zum Ausblenden der
gezeigt werden sollen Hinweisbox
26 Textkomponenten
70Design Tipps
Prominente Platzierung Farbkodierung
Platzieren Sie Hinweisboxen an Setzen Sie eine Farbkodierung ein,
prominenter Stelle, um zu vermeiden, um den Typ der Nachricht schnell zu
dass Nutzer sie übersehen. Blenden kommunizieren. Verwenden Sie hier-
Sie Hinweisboxen z. B. zwischen dem bei Farben, die zum Typ der Nachrich-
Seitentitel und dem Seiteninhalt ein. ten passen:
Setzen Sie hierbei eine Animation
ĵ Blau für Hinweise
ein, die den Seiteninhalt nach unten
ĵ Orange oder Gelb für Warnungen
schiebt. Zeigen Sie Hinweise alternativ
ĵ Rot für Fehlermeldungen
in einem Overlay über der Website.
ĵ Grün für Bestätigungen
Logo
Info: Benutzerabhängige Aktion
Seitentitel
Fehler: Interner Server-Fehler Warnung: Fehlende Berechtigungen
Überschrift
Fehler: Interner Server-Fehler
Erfolg: Ihr Flug wurde gebucht.
Logo
Fehler
Interner Server-Fehler
Anzeige einer einzigen
Hinweisbox zur selben Zeit
Blenden Sie nur eine Hinweisbox zur
selben Zeit ein. Mehrere Hinweisboxen
Kurze Nachricht
machen eine Seite unübersichtlich.
Halten Sie die Nachricht kurz, um zu
vermeiden, dass Nutzer die relevan- Logo
ten Informationen in der Nachricht
Warnung: Verbindungsabbruch
übersehen und damit die Hinweisbox
wenig Platz auf der Seite einnimmt.
Webdesign kompakt 71
273.5 Tooltips & Popovers
Kurze zusätzliche Informationen zu einem Element, die per Klick,
per Tap oder beim Überfahren mit der Maus angezeigt werden
2 Aparrel Strickschal 4
Dieser angenehm breite Strickschal hat 5
einen besonders weichen Baumwoll-
garn. Den Schal kannst du als Halswär-
mer nutzen oder ihn stilvoll über deiner
3 Winterjacke drapieren.
1
Einsatzzweck Typische Bestandteile
Tooltips, die sich per Mouseover öffnen, 1 Tooltip/Popover Trigger: Link, der per
können eingesetzt werden, um ergänzende Mouseover einen Tooltip oder per Klick/
Informationen oder kurze Erläuterungen zu Tap einen Popover öffnet
Elementen wie Formularfeldern, Icons, But-
tons oder Labels bereitzustellen, z. B. Hinwei- 2 Überschrift (optional)
se zum Ausfüllen eines Formularfeldes. Auch 3 Inhalt: bei Tooltip kurzer Text; bei Po-
können sie zur Anzeige von Werten in einem povers interaktive Elemente wie Links,
Diagramm eingesetzt werden. Popovers, die längere Texte, Listen oder Fotos
sich per Klick oder Tap öffnen, können zur Ein-
blendung interaktiver Elemente wie Links und 4 Funktion zum Schließen des
umfangreicherer Inhalte verwendet werden. Inhaltscontainers: wird nur bei
Popovers verwendet
Tooltips und Popovers tragen dazu bei, dass
eine Seite weniger überladen wirkt, da sie erst 5 Inhaltscontainer: in der Regel mit einem
angezeigt werden, wenn Nutzer sie benötigen. Pfeil, der auf den Tooltip/Popover Trigger
Ihre Vorteile gegenüber modalen Dialogen zeigt
sind, dass sie weniger störend sind und eine
enge Beziehung zu einem einzelnen Element
haben, auf das sie sich beziehen.
28 Textkomponenten
72Design Tipps
Kompakte Ausmaße Anzeige eines einzigen Tool-
tips/Popovers zur selben Zeit
Binden Sie in Tooltips nur kurze Sätze
oder Stichwörter ein, weil längere Tex- Zeigen Sie nie mehr als einen Tooltip
te darin schwer zu lesen sind. Agrawal oder ein Popover zur selben Zeit an,
(2019) empfiehlt unter 150 Zeichen. weil Seiten sonst überladen und un-
Atlassian (2017a) empfiehlt maximal 2 übersichtlich wirken.
kurze Sätze. In Popovers können auch
längere Texte eingebunden werden.
Sorgen Sie aber dafür, dass Popovers
nicht mehr als ein Drittel des Bild-
schirms überdecken, damit die Ver- Eindeutige Zuordnung
bindung zu dem Element, auf das sie
Sorgen Sie für eine klare Zuordnung
sich beziehen, erkennbar ist.
von Tooltips/Popovers zu dem Ele-
ment, auf das sich diese beziehen. Zei-
Hinweis zum Ausfüllen des Feldes
gen Sie den Tooltip oder das Popover
daher nahe am zugehörigen Element
Label an. Versehen Sie diese mit einem Pfeil,
Platzhaltertext wenn sich mehrere Elemente in der
Nähe befinden.
Wichtiges nicht überdecken Neues Element Neues Element
Positionieren Sie Tooltips und Popo-
vers so, dass sie keine Informationen
überdecken, die für die Nutzer relevant
sind.
Tooltip
Fade-in- und Fade-out-Effekt
Blenden Sie Tooltips und Popovers
Tooltip mit einem Fade-in-Effekt ein und mit
einem Fade-out-Effekt aus, um eine
ruckartige Wirkung zu vermeiden.
Webdesign kompakt 29
733.6 Testimonials
Zu Werbezwecken verwendete Aussagen von Personen, die sich für
ein Produkt oder eine Dienstleistung aussprechen
2
Ich bin mit der Unternehmensberatung 53
der Firma sehr zufrieden. Wir konnten
für unser Portfolio mehrere neue
1 Absatzmärkte erschließen.
Akira Wang
Projektmanagerin
4
Einsatzzweck Typische Bestandteile
Testimonials werden eingesetzt, um die 1 Porträtfoto (optional)
Glaubwürdigkeit einer Website, eines Produk-
tes oder einer Dienstleistung zu steigern. Auf 2 Schließendes Anführungszeichen
einer Landing Page können Sie Kunden z. B. (optional): oft vergrößert dargestellt
zusätzlich darin bestärken, eine angebotene,
3 Zitat: sollte sich auf eine zentrale
kostenlose Demoversion herunterzuladen.
Leistung des Produktes oder der
Dienstleistung beziehen; wird in der Regel
Testimonials können beschreiben, wie ein
linksbündig ausgerichtet
Produkt ein bestimmtes Problem gelöst hat
oder wie es bei der Problemlösung geholfen 4 Vollständiger Name und Berufsbezeich-
hat. Dadurch kann der Leser sich nicht nur nung der zitierten Person: kann um eine
emotional in die Lage des Kunden versetzen, Berufsbranche, Firma oder Internetadresse
sondern erfährt auch mehr über die Leistun- ergänzt werden
gen des Produkts.
30 Textkomponenten
74Design Tipps
Authentisches Porträtfoto Echtheit beweisen
Verwenden Sie ein Porträtfoto, das Beweisen Sie den Nutzern möglichst
folgende Eigenschaften aufweist: durch die Darstellung des vollständi-
gen Namens und ein Porträtfoto die
ĵ authentisches Foto für eine
Echtheit des Testimonials, um die
glaubwürdige Wirkung
Glaubwürdigkeit des Zitats zu stärken.
ĵ Blick in die Kamera, damit sich die
Durch die Berufsbezeichnung kann
Nutzer angesprochen fühlen
die Glaubwürdigkeit zusätzlich ge-
ĵ zufriedener Gesichtsausdruck, um
stärkt werden.
die Zufriedenheit mit dem Produkt
oder der Dienstleistung auszudrü-
cken
ĵ kontrastarmer oder freigestellter “
Mit dem Produkt bekommt man ein
professionelles Webdesign-Tool zu einem
Hintergrund, um den Fokus auf die Bruchteil des Preises, der für andere
Systeme auf dem Markt verlangt wird.
Person zu lenken Svenja Mustermann
Webdesignerin
Kurzer Textauszug
Verwenden Sie für eine ansprechen-
de Gestaltung einen Textauszug mit
Passende Gestaltung maximal zwei bis drei Sätzen. Längere
Passen Sie die Gestaltung des Zitats an Testimonials sollten erst per Klick auf
den Stil der Website und die Tonlage einen Textlink eingeblendet werden.
des Inhalts an.
Patrick Meier
Geschäftsführer Firma xy
Die Software ist wegen ihrer Seit dem Website-Relaunch unseres Online-
benutzerfreundlichen und Shops haben sich unsere Umsätze um 200
modernen Benutzeroberfläche % gesteigert. Diesen Umsatzgewinn konnten
die richtige Wahl für mich. wir über die Analyse-Tools eindeutig dem
Relaunch des Online-Shops zuordnen.
MEHR LESEN
Peter Mustermann
Webdesigner
Webdesign kompakt 31
753.7 Pull Quotes
Hervorgehobene wichtige Textauszüge
Das Hobby zum Beruf machen
Viele Menschen warten darauf, herauszufinden, was ihr wahrer
Lebenszweck sein soll. Es gibt ganze Bücher zu diesem Thema,
in denen es darum geht, der Leidenschaft nachzugehen.
Wählen Sie einen Beruf, den Sie lieben, und
1 Sie müssen keinen einzigen Tag in Ihrem 2
Leben arbeiten.
Wenn Sie Arbeit nicht mehr wie Arbeit wahrnehmen möchten,
sollten Sie herausfinden, wie Sie Ihr Hobby mit Ihrem Beruf
verbinden können und darauf hinarbeiten.
Einsatzzweck Typische Bestandteile
Pull Quotes sind kurze Textauszüge, die ver- 1 Akzentuierungsstreifen und/oder
wendet werden, um wichtige Gedanken eines farblich unterlegte Textbox (optional):
Textes mit typographischen Mitteln wie größe- zur Betonung des Pull Quotes
rer Schrift hervorzuheben. Pull Quotes können
zu folgenden Zwecken eingesetzt werden: 2 Zitat:
ĵ in der Regel in größerer Schrift
ĵ um Leser auf Texte neugierig zu machen
als der Fließtext formatiert
ĵ um Lesern das visuelle Scannen der Seite
zu erleichtern ĵ für eine ansprechende Gestaltung sollte
ĵ um lange Texte aufzulockern ein kurzer Textauszug verwendet werden;
ĵ um die Botschaft eines Textes besser Scott (2015) und Pilcher (2013) empfehlen
zu vermitteln einen Textauszug mit bis zu zwei Sätzen,
Bear (2019) empfiehlt maximal fünf Zeilen
32 Textkomponenten
76Design Tipps
Ausreichend Weißraum Einheitliche Ausrichtung
Sorgen Sie dafür, dass sich das Zitat Verzichten Sie bei linksbündigen Pull
ausreichend vom Fließtext absetzt. Am Quotes im Textkörper auf öffnende
wichtigsten ist ausreichend Weißraum Anführungszeichen, damit die Aus-
um den Textauszug herum. Tilda Pub- richtung einheitlich wirkt. Binden Sie
lishing (2018) empfiehlt 75–120 Pixel ggf. ein schließendes Anführungszei-
Abstand vom umgebenden Fließtext. chen vor dem Textkörper ein, um es
Zusätzlich können folgende Mittel ein- als Zitat zu kennzeichnen.
gesetzt werden:
ĵ große und/oder farbige Schrift „Ein Logo ist dann gut, wenn
man es mit dem großen Zeh
ĵ andere Schriftart
in den Sand kratzen kann.“
ĵ große Anführungszeichen
Kurt Weidemann, Typograph, Gestalter
ĵ Texteinzug
ĵ farblich unterlegte Box
Ein Logo ist dann gut, wenn
man es mit dem großen Zeh
The details are not the details. in den Sand kratzen kann.
They make the design. Kurt Weidemann, Typograph, Gestalter
Platzierung innerhalb eines
Wenige Pull Quotes auf einer Absatzes
Seite
Platzieren Sie Pull Quotes innerhalb
Verwenden Sie nicht zu viele Pull Quo- eines Absatzes (siehe Abbildung auf
tes auf einer Seite. Pull Quotes verlie- Seite 76). Vermeiden Sie eine Platzie-
ren sonst an Attraktivität und der Inhalt rung am Anfang eines Textes oder Ab-
ist schwerer zu scannen. Die University satzes, damit das Zitat nicht mit einer
of Minnesota (2019) empfiehlt maximal Überschrift oder Zwischenüberschrift
zwei Pull Quotes pro Seite. verwechselt wird.
Webdesign kompakt 33
773.8 Badges
Auszeichnungen zum Hervorheben wichtiger kurzer Informationen
NAME GEHALT STANDORT STATUS
Svenja Müller
35.000 € Bremen Bestätigt
Grafik-Designerin
Patrick Meier
Programmier
48.000 € Hamburg Bestätigt
Peter Beck
Illustrator
28.000 € Köln Ausstehend
1 2
Einsatzzweck Bestandteile
Badges werden verwendet, um wichtige Infor- 1 Inhaltscontainer mit Füllfarbe
mationen hervorzuheben und ein schnelles
Überfliegen zu ermöglichen. Sie können als 2 Beschriftung oder Zahl (optional):
reine Kreisform ohne Text oder Zahl eingesetzt in der Regel in fetter/halbfetter Schrift und
werden, um die Verfügbarkeit neuer oder un- Großbuchstaben
gelesener Elemente zu signalisieren.
Badges mit Beschriftungen werden unter
anderem in Tabellen eingesetzt, um Statusin-
formationen oder sonstige wichtige kontext-
bezogene Informationen zu betonen.
Auch Zahlen können in Badges angezeigt
werden. Badges können z. B. die Anzahl neuer
oder ungelesener Elemente oder die Anzahl
von Produkten, die in den Warenkorb gelegt
wurden, hervorheben.
34 Textkomponenten
78Design Tipps
Kurzes Wort oder kurze Zahl Angepasste Form
Binden Sie in Badges idealerweise nur Passen Sie die Form und Größe von
ein einziges Wort mit wenigen Buch- Badges an den Inhalt an. Verwenden
staben oder eine Zahl ein, maximal 2 Sie bei einer einstelligen Zahl eine
Wörter. Langgezogene oder mehrzeilige Kreisform und bei mehrstelligen Zah-
Badges sehen nicht ansprechend aus. len eine Pillenform. Bei Texten kann
eine pillenförmige, abgerundete oder
Aktiviertes Element AKTIV eckige Form eingesetzt werden.
123
3
Zahl
Minimierung der Verwechs-
lungsgefahr mit Buttons
Platzieren Sie Badges nicht an Stellen, Text AKTIV AKTIV
an denen man mit Buttons rechnet
und gestalten Sie sie kleiner, damit sie
nicht mit Buttons verwechselt werden.
METHODEN
Farbkodierung
12 Tipps für bessere Meetings 12 Tipps für bessere Meetings
METHODEN 5. April Setzen Sie bei Badges mit mehreren
Kategorien eine Farbkodierung ein.
Dadurch können Nutzer die Kategorien
besser auseinanderhalten und neue
oder geänderte Elemente schon beim
Klare Abgrenzung von Icons Überfliegen wahrnehmen.
Sorgen Sie für eine klare Abgrenzung,
wenn Badges über Icons dargestellt Matches +53
werden, damit das Icon als eigenstän-
dige Form erkennbar ist. Favoriten +99
Blockiert +3
3 3
Webdesign kompakt 35
793.9 Counter
Zur Betonung wichtiger Zahlen eingesetzte animierte Module
1 2 3
1350+ 1500+ 2000+
QUADS UND ATVS TÄGLICHE BESUCHER BEWERTUNGEN
4
Einsatzzweck Typische Bestandteile
Counter können eingesetzt werden, um die
1 Icons (optional): können zur besseren
Aufmerksamkeit auf wichtige Zahlen zu len-
Scanbarkeit und Erkennung von Inhalten
ken:
eingesetzt werden, wenn es zu den
ĵ Unternehmenserfolg in Zahlen, Themen des Counters passende,
z. B. Anzahl an verständnisfördernde Icons gibt
ĵ Kunden 2 Zahlen
ĵ Mitarbeitern
3 Zusatz (optional): z. B. Prozentzeichen,
ĵ Auszeichnungen
Währung oder Pluszeichen
ĵ Projekten
ĵ Jahren an Berufserfahrung 4 Titel und/oder ergänzende Texte:
in der Regel zentriert
ĵ Werbewirksame Zahlen zu Produkten,
Dienstleistungen oder Veranstaltungen,
z. B. Anzahl an
ĵ Bewertungen
ĵ Auszeichnungen
ĵ Downloads/Verkäufen
36 Textkomponenten
80Design Tipps
Ähnliche Zeilenlängen Bis zu 6 Zahlen
Sorgen Sie für ähnliche Zeilenlängen Betonen Sie mit Countern nur wenige,
bei den Zahlen und Titeln, um ein wichtige Zahlen. Empfohlen werden
ansprechendes, harmonisches Design bis zu 6 Zahlen. Vermeiden Sie Counter
zu erreichen. Dafür kann z. B. die Zahl mit mehr Zahlen, weil hierbei Nutzer
100.000 als „100K“ formatiert werden. in der Ansicht auf Smartphones viel
scrollen müssen, um alle Zahlen und
zugehörigen Texte zu lesen.
1600 100.000
TÄGLICHE BESUCHER BEWERTUNGEN
AUF DER WEBSITE 1350+ 1500+ 2000+ 1500
QUADS UND ATVS TÄGLICHE BESUCHER BEWERTUNGEN VERKÄUFER
600 450 100 220
AUSZEICHNUNGEN ONLINE SHOPS MITARBEITER KUNDEN
1600 100K
TÄGLICHE BESUCHER BEWERTUNGEN
1350+ 1500+ 2000+ 1500
QUADS UND ATVS TÄGLICHE BESUCHER BEWERTUNGEN VERKÄUFER
Große Zahlen Animierte Zahlen
Gestalten Sie die Zahlen in einer Realisieren Sie Counter so, dass beim
größeren Schrift als die zugehörigen Aktualisieren der Seite die Zahlen von
Texte, damit diese vor den Texten einer Startzahl (in der Regel 0) bis zu
wahrgenommen werden und um die einer Endzahl (dem eigentlichen Wert)
Wahrscheinlichkeit zu erhöhen, dass in einer Animation hochzählen. Emp-
die Zahlen bei den Website-Nutzern in fohlen wird hierbei eine Animations-
Erinnerung bleiben. dauer von rund 2 Sekunden.
200
TEMPLATES
200 34 6
7 347
TEMPLATES
KUNDEN KUNDEN
Webdesign kompakt 81
37Register
60-30-10-Regel 16 Dropdown-Liste 145, 146 H
Dropdown-Menü 104 Hamburger-Menü 102
A Hängender Einzug 67
Accent Border 70, 76 E Hauptnavigation 98
Accordion 38 Eingabefeld 136 Header 26
Akzentuierungsstreifen 70, 76 Expandable Search Box 128 Headerbild 28
Analoge Farbe 12 Eyebrow Headline 54 Headline 54
Aufklappliste 146 Hell-Dunkel-Kontrast 52
Ausrichtung 11 F
FAQ 39 Hintergrundkarte 158
Autocomplete 127 Hinweisbox 70
Farbkodierung 71, 79
B Farbkombination 12 Horizontal Bar Chart 168
Back-to-Top-Link 124 Farbrad 12 I
Badge 78, 80 Farbschema 12 Icon 67, 69, 120, 168
Balkendiagramm 168 Farbübergang 16 Icon Box 34
Benutzerfreundlichkeit 18 Farbwirkung 16, 179, 180, 181 Image Link 90
Bildergalerie 86 Figur-Umfeld-Beziehung 19 Image Navigation 88
Bildüberlegenheitseffekt 18 File Uploader 23 Inhaltsbereich 45
Blur-Effekt 85 Fitts' Gesetz 18 Initiale 62
Brotkrumenpfad 112 Fixe Navigation 100 Inline Link 120, 122
Bunt-Unbunt-Kontrast 52 Fließtext 62 Interaktive Farbe 117
Button 116 Footer 44
Buttongruppe 144 Footer-Navigation 114 J
Fußzeile 44, 114 Jakobs Gesetz 18
C Justified Grid 87
Call-to-Action-Button 116 G
Card 32 Gesetz der Ähnlichkeit 20 K
Carousel 42, 89 Gesetz der gemeinsamen Kalender-Dropdown 142
Checkbox 148 Region 20 Kalt-Warm-Kontrast 52
Contentbereich 45 Gesetz der Geschlossenheit 19 Kartenbild 161
Current Page Indicator 98, 108, Gesetz der Kontinuität 20 Kategoriebild
112 Gesetz der Nähe 19 Kippschalter 152
Gesetz der Symmetrie 20 Kombinationsfeld 146
D Gesetz des gemeinsamen Komplementärfarbe 12
Daten-Marker 170, 171, 172 Schicksals 19 Kontrollkästchen 148
Date Picker 142 Gestaltgesetz 19 Kreisdiagramm 176
Design System 3 Ghost Button 116, 119
Donut-Diagramm 177 Google Maps 158 L
Download-Link 123 Ladeanzeige 23
181 Register
38Ladezeit 23 Platzhaltertext 133, 146 Suchergebnis 129
Landing Page 74 Popover 72 Suchfeld-Navigation 126
Layering 10 Primärnavigation 98 Symmetrie 20
Lightbox 88 Prinzip der Vertrautheit 18
Line Chart 172 T
Progress Stepper 154
Liniendiagramm 172 Tab 36
Pull Quote 76
Liste 66 Teilkomplementäre Farbe 13
Login-Link 8 Q Testimonial 74
Logo 29 Quilted Image List 87 Tetradische Farbe 13
Lokale Subnavigation 108 Textlink 120
R Thumbnail 86
M Radial Stepper 155 Thumbnail Navigation 88
Main Headline 56 Radiobutton 150 Toggle/Toggle Switch 152
Map Marker 158 Registerkarte 36 Tooltip 72, 73, 167
Map Switcher 160 Responsive Webdesign 21 Triadische Farbe 13
Map Tip 159 Rot-Grün-Sehschwäche 177
Marker-Cluster 161 U
S Überschrift 54
Markersymbol 158 Schriftart 17, 179
Masonry Image List 87 Überschriftenhierarchie 61
Scroll-to-Top-Link 124 Usability 18
Mega-Dropdown-Menü 106 Section 30
Menüpunkt 97 Usability-Gesetz 18
Segment 176 Utility Navigation 27
Millers Gesetz 18 Segmented Control 144
Modaler Dialog 40 Seitennavigation 110 V
Monochromatische Farbe 12 Sidebar-Navigation 109 Validierung 139
O Skeleton 23 Vertical Bar Chart 170
Optionsfeld 150 Slider 42 Video 94, 159
Outline Button 116 Social Media Link 27, 49 Video-Player 94
Overlap 10 Sortierfunktion 162, 164 Visuelle Hierarchie 2, 7
Overline 54 Spinner 23 Vorwärtsnavigation 110
Stammwort-Reduktion 131
P Z
Standalone Link 120, 122
Paginierung 110 Zeichenabstand 17
Stepper 147
Passwortfeld 140 Zeilenabstand 17
Sticky Navigation 109
Persistent Search 128 Zeilenlänge 17
Subheading 54
Phonetische Suchfunktion 131 Zoomfunktion 158
Subline 54
Pie Chart 176 Zwischenüberschrift 59
Subnavigation 108
Webdesign kompakt 182
39Glossar
Accent Border Breakpoints FAQ
Linie zur Betonung eines Elements Vordefinierte Webseiten-Breiten Am häufigsten gestellte Fragen
bzw. Umbruchpunkte, bei denen (frequently asked questions);
Akzentfarbe in Abhängigkeit der Bildschirm- wird auf Websites meistens ver-
Gesättigte Farbe zur Lenkung der breite eine Veränderung des öffentlicht, um den Support von
Aufmerksamkeit auf wichtige Layouts veranlasst wird immer gleich gestellten Fragen zu
Elemente entlasten
Browser
Analoge Farben Software zum Darstellen von Fade-in-Effekt
Farben, die auf dem Farbrad Websites Effekt, bei dem ein Element lang-
nebeneinander angeordnet sind sam über einen gewissen Zeit-
(siehe Seite 12) Bunt-Unbunt-Kontrast raum eingeblendet wird
Kontrast zwischen zwei oder meh-
Autocomplete reren Farben mit unterschiedlich Fade-out-Effekt
Selbsttätiges Anbieten der Ver- großer Strahlkraft Effekt, bei dem ein Element lang-
vollständigung der Suchanfrage sam über einen gewissen Zeit-
schon während der Eingabe Call-to-Action-Button raum ausgeblendet wird
Button mit einer Handlungsauf-
Bildschirmknick forderung an den Nutzer, z. B. zum Favicon (Favorite Icon)
Unterste, sichtbare Kante des Bestellen eines Produktes oder Vereinfachte Form eines Logos,
Bildschirms Abonnieren eines Newsletters die in einem Browser-Tab links
neben dem Titel einer Webseite
Blocksatz Delimiter angezeigt wird und die beim
Methode, mit der Texte so gesetzt Trennzeichen zur Abgrenzung ein- Abspeichern der Seite als Lese-
werden, dass die Zeilen eine glei- zelner Elemente in einem Design zeichen dem Eintrag vorangestellt
che Länge haben wird
Design System
Blog Sammlung von wiederverwend- Ghost Button
Website oder Teil einer Website baren Komponenten mit klaren Auf ein Minimum reduzierter But-
mit regelmäßig veröffentlichten, Regeln, Prinzipien und Einschrän- ton ohne Hintergrundfarbe und
nach Datum sortierten Beiträgen kungen für die Designentwicklung ohne Effekte, der meist nur einen
eines Unternehmens dünnen Rand besitzt
Brandingfarben
Farben, die in Verbindung mit der Elementor Gestaltungsraster
Schrift und/oder Form einer Marke Drag & Drop Page Builder Plugin Dient dazu, Elemente auf einer
bei Konsumenten zu einem hohen für WordPress, welches die Be- Seite einfacher anzuordnen; hier-
Wiedererkennungswert führen arbeitung der Inhalte und die bei wird eine Seite in gleich große
sollen Erstellung eigener Elemente im Spalten eingeteilt; Elemente
Frontend ermöglicht werden immer reihenweise ange-
ordnet, dabei können sich die ein-
zelnen Elemente über eine oder
mehrere Rasterspalten erstrecken;
183 Glossar
40Sie können auch lesen
