Design: Warum gutes Webdesign mehr ist als nur Optik

Hi und willkommen in der Kategorie Design!

Stell Dir vor: Ein Besucher landet auf Deiner Website, schaut sich kurz um, und nach wenigen Sekunden ist der Tab wieder zu.

Warum?

Das muss gar nicht am Inhalt liegen. Vielleicht sah die Seite einfach austauschbar aus, oder der Text ließ sich kaum lesen.

Genau hier setzt Design an. Für mich ist Design nicht die Frage, ob Blau schöner ist als Grün. Es ist die Frage, ob Deine Website einen bleibenden Eindruck hinterlässt und ob Deine Besucher überhaupt Lust haben, weiterzulesen.

info

In dieser Kategorie zeige ich Dir, worin sich ein individuelles Design von einem Standard-Template unterscheidet und mit welchen Typografie-Prinzipien Du Deine Texte für alle Besucher gut lesbar machst.

Warum Design mehr ist als Geschmack

„Design? Das ist doch Geschmackssache.“

Vielleicht denkst Du das gerade auch. Und ja, ein Teil davon ist Geschmack.

Der größere Teil ist aber Handwerk.

Deine Website ist oft der erste Kontaktpunkt mit potenziellen Kunden. Ob ein Besucher bleibt oder schnell wieder abspringt, entscheidet sich häufig in genau diesen ersten Momenten. Die Kennzahl dahinter heißt übrigens Absprungrate.

Deshalb gestalte ich eine Website nicht einfach drauflos. In meinen Projekten entsteht zuerst ein Designsystem mit Schriften, Farben und Abständen, das die Marke widerspiegelt. Danach plane ich Struktur und Nutzererlebnis als Prototyp in Figma.

Beispiel eines Designsystems für INDI-MELT

Denk daran: Alles muss zusammenpassen. Wenn Deine Kunden Deine Schriftart, Deine Farben oder Dein Logo sehen, sollen sie sofort wissen, dass es von Dir kommt.

In dieser Kategorie beantworte ich Dir unter anderem diese Fragen:

• Was bekommst Du bei einer günstigen Website und was bei einer teuren?
• Wann reicht ein Template und wann lohnt sich ein individuelles Design?
• Welche Schriftart, Schriftgröße und welcher Kontrast machen einen Text gut lesbar?
• Wie prüfst Du, ob Deine Texte wirklich verständlich sind?

Was Dich in dieser Kategorie erwartet

Aktuell findest Du hier zwei Artikel. Zusammen decken sie beide Seiten von Design ab: den Gesamteindruck Deiner Website und die Details im Text.

Der Gesamteindruck: Template oder individuelles Design?

Günstige Websites greifen häufig auf Standard-Templates und vorgefertigte Bausteine zurück. Das geht schnell. Nur sieht Deine Website dann womöglich genauso aus wie viele andere.

Bei einer individuell gestalteten Website wird dagegen jedes Detail auf Deine Marke abgestimmt. Oft entsteht dabei gleich eine Brand Identity mit Logo, Farben und Schriftarten.

Aber keine Sorge: Günstig heißt nicht automatisch schlecht. Wenn Du gerade erst startest, ein begrenztes Budget hast und nur eine einfache Online-Präsenz brauchst, kann eine günstige Website völlig ausreichen.

• Teure vs. günstige Website: Was ist der Unterschied?: Ich vergleiche beide Varianten in vier Kategorien, nämlich Features, Design, Strategie und Service. Lies den Artikel, bevor Du ein Angebot annimmst, damit Du weißt, wofür Du eigentlich bezahlst und wann die einfachere Lösung genügt.

Die Details: Typografie und Lesbarkeit

Das schönste Layout bringt Dir nichts, wenn sich der Text darin nicht lesen lässt.

Schon kleine Stellschrauben machen hier einen großen Unterschied: eine Basisschriftgröße von 16 bis 20 px, ein Kontrast von mindestens 4.5:1, 50 bis 75 Zeichen pro Zeile und linksbündiger Text statt Blocksatz.

Gut lesbare Texte halten Deine Leser länger auf der Seite, Stichwort Verweildauer. Sie sorgen dafür, dass Deine Call-to-Actions eher wahrgenommen werden, was sich positiv auf Deine Conversion-Rate auswirken kann.

Und sie sind ein zentraler Bestandteil der digitalen Barrierefreiheit. Menschen mit Sehbehinderungen, kognitiven Einschränkungen oder Dyslexie sind auf klar gestaltete Texte angewiesen.

• Lesbarkeit: Praxis-Guide für Typografie und Barrierefreiheit: Sieben Typografie-Prinzipien von der Schriftart über Zeilenlänge und Zeilenabstand bis zur Textausrichtung, dazu Prüfmethoden wie den Flesch-Reading-Ease, Wortliga und Feedback von echten Lesern. Lies ihn, wenn Besucher Deine Seite schnell wieder verlassen oder wenn Du Deine Texte barrierefreier machen willst.

tipp

Du planst gerade eine neue Website? Dann starte mit dem Vergleich teuer vs. günstig. Du hast schon eine Website? Dann nimm Dir zuerst den Lesbarkeits-Guide vor: Die Checkliste darin kannst Du direkt an Deinen bestehenden Seiten abhaken.

Für wen diese Kategorie besonders spannend ist

• Geschäftsführer und Selbstständige, die eine neue Website planen und Angebote besser einschätzen wollen
• Marketing-Verantwortliche, die Texte für die Website schreiben und wollen, dass sie auch gelesen werden
• Webdesigner und Entwickler, die klare Typografie-Regeln für ihre Projekte suchen
• Unternehmen, die sich mit Barrierefreiheit beschäftigen, denn Lesbarkeit ist ein Teil davon

Also für alle, deren Website nicht nur gut aussehen, sondern auch funktionieren soll.

Was Du als Nächstes tun solltest

Dafür musst Du nicht gleich Dein komplettes Design umkrempeln. So gehst Du am besten vor:

1. Lies den Vergleich zwischen teuren und günstigen Websites und überlege Dir, welche der vier Kategorien für Dein Projekt am wichtigsten ist.
2. Prüf Deine Texte mit der Checkliste aus dem Lesbarkeits-Guide: Schriftwahl, Schriftgröße, Kontrast, Zeilenlänge, Zeilenabstand, Absatzlänge und Textausrichtung.
3. Schau Dir Design in der Praxis an: In meinen Fallstudien zu Celestical und INDI-MELT zeige ich Dir, wie ich Designsysteme und Figma-Prototypen für echte Projekte entwickelt habe.
4. Planst Du einen Relaunch? Dann hilft Dir meine Website Relaunch Checkliste, in der das Design einer der Schritte ist.

Ob sich eine neue Website für Dich lohnt, rechnest Du mit meiner ROI-Berechnung nach.

Und falls Du unsicher bist, welche Variante zu Deinem Projekt passt, buche Dir gerne eine kostenlose 1:1-Beratung bei mir oder trag Dir direkt einen Termin in meinen Kalender ein.

Danach kannst Du Angebote für Webdesign besser einschätzen und weißt, wie Du Deine Texte so gestaltest, dass sie gerne gelesen werden.

Design hängt eng mit anderen Themen zusammen. Stöbere deshalb gerne auch in Barrierefreiheit, Strategie, Fallstudien, Web-Dev, HTML-Semantik, SEO & SEA, IT-Compliance, WordPress oder in der Übersicht aller Artikel.