Leitfaden: Was ist gutes Design?

Bei der Erstellung unserer Webdesigns halten wir uns an die Web Content Accessibility Guidelines (WCAG), einer Richtlinie für barrierefreies Webdesign, die von einer Arbeitsgruppe des W3C (World Wide Web Consortium) entwickelt und stetig weiterentwickelt wird.
Folgende Themen werden wir näher betrachten:
  • Was macht Webdesign besonders?
  • Wie beeinflusst das Design die User Experience?
  • Häufige Fehler im Webdesign
  • Tipps: die Schrift
  • Tipps: User Experience
  • Wodurch wird mein Design zeitlos?
  • Gibt es gesetzliche Vorgaben für mein Design?
  • Worauf muss ich beim Arbeiten im Web mit meinem Design achten?

Was macht Webdesign besonders?

Webdesign ist interaktiv, ganz im Gegensatz zum Design eines Flyers oder einer Broschüre. Es muss funktional und benutzbar sein und nicht nur schön aussehen. Außerdem muss es je nach Gerät des Betrachters angepasst werden und ist nicht auf eine bestimmte Größe festgelegt. Heutzutage surfen viele Leute nur noch mit dem Smartphone im Internet. Im privaten Rahmen ersetzt dieses den Laptop und den Desktop-PC nahezu komplett.
Aus diesem Grund ist Webdesign heutzutage oftmals “mobile first”. Ausgehend vom kleinsten und am häufigsten genutzten Betrachtungsgerät, dem Smartphone, wird das Design aufgebaut und ausgebaut.

Wie beeinflusst das Design die User Experience?

Gutes Webdesign macht eine Webseite für den Besucher verständlich. Er muss nicht überlegen, wie die Webseite funktioniert und wo er klicken muss, um an sein gewünschtes Ziel zu kommen. Das Design erklärt die Webseite für ihn.
Ein gutes Webdesign ist wie ein Witz. Wenn man es erklären muss, ist es nicht gut.

Häufige Fehler im Webdesign

Mit technischen Spielereien protzen und zeigen, welche tollen Animation man basteln kann ist laut vielen Webdesignern State of the Art. Das ist aber häufig ein sehr großer Fehler, denn mit eben diesem Schnickschnack lenkt man vom eigentlich Wichtigen ab: dem Inhalt.
Elemente, die den Besucher vom eigentlichen Inhalt der Webseite ablenken, sind bspw.:
  • Wackelnde Elemente
  • Animationen
  • Großflächige Bilder
  • Buttons, die in die Webseite einfliegen
  • Bereiche mit farbigen Hintergründen
Manchmal behindern sie sogar die Konzentration und stören uns beim Lesen. Das wären dann fatale Fehler, wenn potenzielle Kunden zu sehr abgelenkt werden und sich nicht darauf einlassen können, was sie eigentlich wollten: Kontakt aufnehmen, ein Angebot einholen oder gar einkaufen.
Außerdem zu beachten ist, dass viele solcher Elemente die Ladezeit und Performance Ihrer Webseite negativ beeinflussen. Zudem sind vollflächige Bilder auch schwer zu handhaben, wenn man möglichst viele Bildschirmgrößen beliefern möchte. Für einen großen Monitor muss ein solches Bild bspw. auch sehr groß sein, da es sonst verpixelt und verschwommen erscheint. Bilder in dieser Größe werden langsamer geladen als normale Bilder.

Tipps: die Schrift

Auf die Schriftart, die Schriftgrößen und den Zeilenabstand sollte bei der Erstellung des Webdesigns besonderes Augenmerk gelegt werden. Nichts ist wichtiger als eine gute Lesbarkeit Ihrer Texte.
Als gute Grundlage gilt:
  • Serifenlose, schnörkelfreie Schrift für den Fließtext In Überschriften sind Schmuckschriften in Ordnung
  • Nicht mehr als zwei Schriftarten verwenden
  • Schriftgröße für den Fließtext: 18 – 20px
  • Zeilenabstand ca. 150%
  • Überschriften und wichtige Informationen sollen hervorgehoben werden
Die Schriftfarbe und der Kontrast zum Hintergrund sind ebenso wichtig wie die Schrift an sich. Je höher dieser Kontrast ist, desto besser lesbar ist Ihr Text.
Auch die passende Länge der Textzeilen unterstützt Ihre Besucher beim Erfassen der Texte. Empfohlen sind Zeilenlängen von 50 – 80 Zeichen.

Tipps: User Experience

Faktoren, die User Experience beeinflussen:
  • Lesbarkeit
  • Kontraste
  • Ablenkende Effekte
  • Einheitliche Sprache
  • Responsive Webdesign
  • Ladezeit
  • Struktur der Webseite
Es ist wichtig, dass Ihre Besucher Ihre Webseite auch verstehen und Inhalte erkennen.  
  • Wichtige Inhalte sollen nicht am Seitenende stehen, sondern im Optimalfall bereits ohne Scrollen sichtbar sein (Ähnlich wie bei einer gefalteten Tageszeitung, bei der das Titelthema auch sofort ersichtlich ist).
  • Schnelle Erfassbarkein und Erkennbarkeit von wichtigen Inhalten.
  • Akkordeons bzw. das Verbergen von Inhalten ist zu vermeiden (z. B. in einem Akkordeon) (https://www.brain-at-work.de/Wie-SEO-schaedlich-sind-ausklappbare-Texte).
  • Klickbare Elemente müssen auch als solche erkennbar und korrekt benannt sein.
  • Bilder, Überschriften und Texte müssen thematisch zueinander passen.

Wodurch wird mein Design zeitlos?

Ein Design, das über viele Jahre bestehen bleiben kann, richtet sich nicht zwingend nach den aktuellen Trends und lässt sich nicht von der neuesten Mode beeinflussen.
Ein zeitloses Design
  • ist simpel gehalten
  • richtet sich gänzlich nach seiner Funktion
  • verzichtet auf Schnickschnack
  • konzentriert sich allein auf seine Aussage
  • ist frei von aktuellen Einflüssen

Gibt es gesetzliche Vorgaben für mein Design?

Momentan sind die Web Content Accessibility Guidelines (WCAG) 2.1 ein Bestandteil der harmonisierten Europäischen Norm EN 301 549 (https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf). Die Norm wird derzeit für die Umsetzung des European Accessibility Acts überarbeitet.
Es ist anzunehmen, dass die Veröffentlichung der neuen EN 301 549 Ende 2025 / Anfang 2026 stattfindet. Damit wird die Norm dann zur harmonisierten Norm und damit für Betreiber von Webseiten, die über Bundes- oder Landesgesetzte harmonisierten Normen verpflichtet sind, bindend.
Aber selbst, wenn es keine gesetzliche Vorgäbe wäre, ist es wünschenswert, das Internet für alle zugänglich zu machen.

Worauf muss ich beim Arbeiten im Web mit meinem Design achten?

Wir achten beim Erstellen des Designs und Ihrer Webseite bereits darauf, dass Ihr CI korrekt eingebracht wurde. Dennoch gibt es ein paar Dinge, die auch Sie beim Arbeiten im Backoffice beachten können und sollten:
  • Keine selbst gewählten Farben im Texteditor verwenden Manuell farbig markierte Textstellen bergen die Gefahr, dass sie nicht konsequent gleich gewählt werden. Außerdem müssen diese Texte bei einem Relaunch alle nachbehandelt werden.
  • Keine unnötigen Ablenkugen einfügen Die einzigen Ablenkungen, die Ihre Seite bieten sollte, sind absichtliche Ablenkungen in Form von Störern o. ä.
  • Auf ein gesundes Text-Bild-Verhältnis achten Seiten mit wenig Text und vielen Bildern bieten i. d. R. kaum einen Mehrwert für den Besucher.

Weitere Informationen

Sie können Ihr bestehendes Webdesign auch auf diese Ansätze hin selbst testen. Es gibt verschiedene Tools, die auch die Barrierefreiheit kritisieren können:

Weitere Hilfeseiten

Vielen Dank für Ihre Anfrage

wir werden uns in Kürze bei Ihnen melden, um Ihnen ein passendes Angebot zukommen zu lassen.

Angebot anfordern

Schreiben Sie uns eine E-Mail an:
info@baw.gmbh | Angebot anfordern

Oder rufen Sie uns an:
+49 75 61 . 98 51 23

Oder nutzen Sie unser Formular zu Ihrem Angebot:
Mit Stern (*) markierte Felder sind Pflichtfelder!
Die wichtigsten Informationen
Firmendaten
Ansprechpartner
Webseiten-Infos
Bitte verwenden Sie nur JPG oder PDF-Dateien.
Hier können Sie Dateien anfügen, z.B. Strategiepapier, Konzept oder CI-Guide (pdf oder jpg, max. 5 Dateien):
Datenschutz + Absenden

Kostenfreie 20 Minuten Profi-Beratung

wir werden uns in Kürze bei Ihnen melden, um mit Ihnen einen Beratungstermin zu vereinbaren

Kostenfreie 20 Minuten Profi-Beratung anfordern

brainatwork gf thomas fiener
Wie erreichen Sie mehr Online-Sichtbarkeit, mehr Anfragen, mehr Umsatz? Wie erreichen Sie Ihr individuelles Ziel? Nehmen Sie sich ein wenig Zeit – oder gerne auch mehr – für ein unverbindliches Telefonat mit uns. Sie werden in jedem Fall davon profitieren.

Schreiben Sie uns einfach eine E-Mail:
info@baw.gmbh | Beratung anfordern

Oder rufen Sie uns an:
+49 75 61 . 98 51 23

Beratung anfordern:

Ihre Profi-Beratungsanfrage

wir werden uns in Kürze bei Ihnen melden, um mit Ihnen einen Beratungstermin zu vereinbaren

Bevor Sie gehen...

brainatwork gf thomas fiener
Wollen Sie mehr zur Webseiten Erstellung, Webshop Erstellung erfahren? Oder benötigen Sie Hilfe bei der Inhalts-Pflege und Suchmaschinenoptimierung?

Dann rufen Sie uns an:
+49 75 61 . 98 51 23

Oder schreiben eine E-Mail:
info@baw.gmbh

Kostenfreie Beratung:

Vielen Dank

Wir prüfen Ihre Anforderung und werden, sofern die Anforderungen erfüllt sind, unser kostenfreies Magazin zukommen lassen.

brain at work Magazin anfordernKostenfrei via PDF oder Post

baw magazin 02a
In dieser Ausgabe:
❱ Wie Sie mit Online-Analysen neue Absatzpotentiale entdecken
❱ So steigert Google die Maschinenauslastung
❱ Mit individuellem Onlineshop zurück zum Erfolg
❱ Top Service bieten trotz Personalmangel
und noch vieles mehr!

Ihre Kontaktdaten