top of page

Die 11 größten Webdesign-Fehler und wie du sie vermeidest - Typografie Edition

Ich sehe immer wieder Selbständige und auch Webdesigner, die mit sehr viel Liebe Websites gestalten. Auf den ersten Blick sind diese Seiten wunderschön. Auf den zweiten Blick offenbaren sich oft Webdesign-Fehler, die du besser vermeiden solltest.


Mit modernen Website-Baukästen wie Wix kann heute jeder seine eigene Website gestalten. Der anwenderfreundliche Drag & Drop Editor ist so ausgelegt, dass du im Bearbeitungsmodus bereits das Endergebnis siehst - so wie es dann später online aussehen wird. Das erleichtert die Arbeit an deiner Website enorm.


Es gibt im Webdesign aber bestimmte Do´s & Dont´s, die du unbedingt beachten solltest, wenn deine Website nicht selbstgebastelt aussehen soll. In diesem Beitrag sehen wir uns die häufigsten Fehler an, wenn es um Typografie geht - Schriftarten, Abstände, Formatierungen und Co.


Frau sitzt entspannt am Bett und tippt auf dem Laptop


Hier zeige ich dir die 11 Designfehler auf Websites, die mir am häufigsten begegnen. Dein Vorteil: Fehler, die andere schon gemacht haben, brauchst du nicht mehr wiederholen.


Diese 11 häufigsten Webdesign-Fehler entlarven dich sofort als Laien


 

1. Filigrane Schriftarten


Vor allem in femininen Webdesigns sind filigrane Schriftarten sehr beliebt. Sie wirken leicht, zart, manchmal verspielt... Man muss hier aber gut aufpassen, die richtige Balance zu finden. Zu filigrane Linien sind nicht empfehlenswert. Vor allem bei Unterüberschriften und kleineren Abbildungen wie auf dem Handy wird es rasch unleserlich.


Ein klares Schriftbild ist hier eindeutig die bessere Wahl. Vielleicht gibt es die Schrift, die dir gefällt, auch in einem etwas breiteren Format?


2. Zu viele Schriftarten

Dass man auf einer Website nicht beliebig viele Schriftarten bunt kombinieren sollte, hat sich schon herumgesprochen. Für das Auge zählen jedoch auch die Schrifteinstellungen fett und kursiv ein- und derselben Schriftart als optisch eigenständige Schriften.


Für die Wiedererkennung deiner Marke ist es ebenfalls nicht empfehlenswert nach Lust und Laune Schriften zu kombinieren, das erschwert die Wiedererkennung enorm.


So machst du es besser: Wähle 2 Schriftarten und setzte die Einstellungen fett und kursiv äußerst sparsam ein.


3. Falsche Schriftgröße

12 Punkt gilt als die Standardschriftgröße. Doch das gilt nicht für deine Website! Hier musst du genau testen welche Schriftgröße für die von dir gewählte Schriftart optimal ist. Natürlich soll es optisch gut aussehen, aber auch leserlich sein.


Achte auch darauf, welche Schriftgröße du in der mobilen Version deiner Website verwendest. Für kleinere Bildschirme macht es oft Sinn, einen etwas kleineren Schriftgrad zu wählen.


4. Überschriften, die kleiner sind als der Fließtext

Durch automatische Anpassungen deiner mobilen Ansicht kann es passieren, dass längere Überschriften plötzlich kleiner angezeigt werden, als der Fließtext. Das solltest du unbedingt korrigieren, damit die Hierarchie der Texte eingehalten wird. Das trägt zur besseren Orientierung bei.


5. Blocksatz oder zentrierte Fließtexte

Blocksatz ist typisch für gedruckte Medien. Im Web sind linksbündige Texte die erste Wahl. Warum? Beim Blocksatz kann es in der mobilen Ansicht zu unschön klaffenden Lücken zwischen den Wörtern kommen, vor allem wenn lange Wörter mit im Spiel sind.


Zentriert ist auch nur bedingt geeignet, zum Beispiel für Überschriften, Zitate oder kürzere Textpassagen, die man hervorheben will. Durch die ausgefransten Ränder ist Fließtext, der zentriert formatiert ist, einfach schwieriger zu erfassen als linksbündiger Fließtext.


6. Zu lange Zeilen

Ja, wir haben auf einem Laptop-Bildschirm eine ganz schöne Breite zur Verfügung. Aber bitte fülle diese nie mit Text aus! Die Textblöcke sollten auf beiden Seiten noch einen angenehmen Abstand zum Rand haben. Längere Zeilen erschweren den Lesefluss enorm.


7. Chaotische Zeilenumbrüche

Deine Website solltest du unbedingt auf verschiedenen Bildschirmen testen. Auf dem Handy sind Überschriften, die aus einem langen Wort bestehen, manchmal problematisch. Warum? Der Text wird am Bildschirmende einfach abgeschnitten und ein oder zwei Buchstaben landen dann oft in der zweiten Zeile. Hier bitte unbedingt die Schriftgröße anpassen, damit das ganze Wort in einer Zeile Platz hat.


8. Unpassender Zeichenabstand

Buchstaben brauchen den richtigen Abstand voneinander. Kleben sie zu eng zusammen oder schweben sie zu weit auseinander, wirkt das nicht nur unschön, sondern stört auch den Lesefluss. Du kannst den Buchstabenabstand in deinem Webdesign-Tool separat einstellen.


9. Falscher Zeilenabstand

Der Zeilenabstand hat nicht nur großen Einfluss auf das optische Erscheinungsbild der Texte auf deiner Website, er ist auch wichtig für ein angenehmes Lesegefühl.


Welchen Zeilenabstand solltest du nun wählen? Das hängt ganz von der gewählten Schriftart und der Schriftgröße ab. Bewährt haben sich im Webdesign Zeilenabstände von 1,4 - 1,6. Bei zweizeiligen Überschriften kann es wegen der Schriftgröße besser sein, einen etwas kleineren Zeilenabstand (z.B. 1,2) zu wählen, damit die Zeilen nicht so weit auseinander stehen. Am besten probierst du verschiedene Einstellungen aus.


10. Zu wenig Weißraum

Manche Websites sind einfach bis zum Anschlag voll mit Inhalt. Das wirkt nicht harmonisch, die einzelnen Elemente konkurrieren miteinander und es entsteht Unruhe.


Gib deiner Seite einen gewissen Anteil an Weißraum, damit die einzelnen Elemente atmen können. Vor allem in der Desktop Variante der Website sträuben sich viele, genügend Abstände einzubauen. Keine Angst, in der mobilen Version kannst du diese Abstände dann verkleinern, damit die Besucher nicht unnötig lange scrollen müssen.


11. Zu geringer Kontrast

Vor allem pastellige Themes sind davon oft betroffen: Eine zarte Schriftfarbe auf hellem Hintergrund ist ungünstig und nicht förderlich für die Barrierefreiheit deiner Website. Wähle Schriftfarben und Hintergrundfarben so, dass ein größtmöglicher Kontrast gegeben ist.


Auch wenn du Schriften über Bilder legst musst du darauf achten, dass diese gut lesbar sind. Notfalls kannst du sie mit einem einfärbigen Feld hinterlegen oder der Schrift einen Schatten hinzufügen, damit sie sich besser vom Hintergrund abhebt.


Noch ein Tipp zum Schluss

Du siehst also: Mit etwas Know-how lassen sich diese Webdesign Fehler ganz einfach vermeiden. Doch bevor du ans Ausprobieren gehst hier noch ein wichtiger Hinweis: Es gibt lizenzfreie Schriften wie Google Fonts und es gibt lizenzpflichtige Schriften. Du hast deine Traum-Schriftarten gefunden? Dann prüfe bitte unbedingt, ob du diese auch verwenden darfst. Oft darf man Schriften zwar für den privaten Gebrauch lizenzfrei verwenden, muss sie aber für kommerzielle Zwecke lizensieren.


Du wünschst dir eine Schritt für Schritt Anleitung für den Aufbau deiner Website?

Dann bist zu in meinem Gruppenprogramm "Bau dir deine Website" genau richtig. In 8 Wochen leite ich dich Schritt für Schritt an wie du deine Website in Wix erstellst - ganz ohne Programmierkenntnisse und völlig technikfrustfrei. Versprochen!


bottom of page