Die 24 Regeln des Webdesigns

Du bist nicht allein! Anfänger:innen in der Gestaltung von Websites fühlen sich manchmal überfordert, wenn es darum geht, eine attraktive, nützliche Seite zu gestalten. Denn wer will sich schon eine langweilige Seite ansehen, wenn es doch so aufregende Websites gibt?
Auf den ersten Blick mag es sehr schwierig erscheinen, aber keine Sorge, denn wir haben einige Tipps, die dir helfen können, noch heute mit deinen eigenen Designprojekten zu beginnen:

Webdesign war schon immer eine knifflige Angelegenheit. Wenn du möchtest, dass dein nächstes Projekt gut wird, habe ich diese Liste mit Regeln (oder Best Practices) zusammengestellt, damit alles reibungslos abläuft.

Wir haben für dich eine kompakte Webdesign-Checkliste erstellt. Hier gibt's alle wichtigen Punkte auf einem Blick zum abchecken!

Beginnen wir mit dem, was du unbedingt umsetzen solltest

1. Halte deine Benutzeroberfläche konsistent

Konsistenz ist eines der wichtigsten Prinzipien, um ein gutes Nutzererlebnis zu schaffen. Jede Seite sollte eine ähnliche Navigation und ein ähnliches Design haben und auch die Schriftarten sollten überall gleich sein, damit die Besucherinnen und Besucher leicht zwischen den Seiten navigieren können, ohne sich zu verirren oder nicht zu wissen, was sie gerade sehen - egal, ob sie sofort etwas kaufen oder einfach nur stöbern wollen, bis ihnen etwas ins Auge sticht!

Tipp: Konzentriere dich zunächst darauf, deine Website benutzerfreundlich zu gestalten. Konsistenz ist ein zweischneidiges Schwert. Wenn deine Website auf den ersten Blick völlig unübersichtlich ist, wirst du nur ein schlechtes Benutzererlebnis erzielen und Konsistenz wird dir dann nicht helfen. Mache also zuerst das Design benutzerfreundlich und dann konsistent.

2. Entwirf eine benutzerfreundliche Navigation

Der Grundstein für das Nutzererlebnis liegt in der Navigation. Erst sie bringt die Menschen dazu, mit deiner Website zu interagieren. Mit einer guten Navigation auf deiner Website kannst du den Besuchern helfen, das zu finden, was sie suchen.

Tipps:

• Reduziere dein Hauptmenü auf die wichtigsten Navigationspunkte. Beschränke es auf maximal sieben Auswahlmöglichkeiten und erstelle eine Unternavigation mit klarer Kategorisierung. Die Anzahl der Punkte, die sich ein durchschnittlicher Mensch in kurzer Zeit merken kann, beträgt 7 ± 2.
• Verwende klare Namen für die Navigationspunkte. Versuche, bekannte Wörter für die Menüpunkte zu wählen, sodass deine Besucher sie leichter einordnen können.
• Optimiere die Zeit, die deine Nutzer:innen brauchen, um an ihr Ziel zu gelangen. Gestalte deine Navigation so, dass deine Besucher:innen mit so wenigen Klicks wie möglich zum gewünschten Ziel gelangen können. Denke bei der Gestaltung einer Website an die Drei-Klick-Regel, die besagt, dass deine Besucher:innen nie mehr als drei Klicks von dem, was sie suchen, entfernt sein sollten.
• Binde Navigationsoptionen in die Fußzeile deiner Seite ein. Der Footer ist ein zusätzlicher Bereich, in dem deine Besucher:innen Navigationsoptionen und Kontaktinformationen erwarten.
  
  

3. Ändere die Farbe der besuchten Links

Links spielen eine wichtige Rolle für das Surfverhalten deiner Nutzer. Wenn besuchte Links ihre Farbe nicht ändern, kann es passieren, dass die Nutzer ungewollt immer wieder dieselben Seiten besuchen.

4. MACHE ES DEINEN BESUCHERN LEICHT, DEINE SEITEN ZU "SCANNEN"

Wenn jemand deine Website besucht, ist es wahrscheinlicher, dass die Person die Seite schnell überfliegt, als dass sie alles Wort für Wort lesen möchte. Wenn deine Besucher:innen zum Beispiel nach einem bestimmten Inhalt suchen oder eine bestimmte Aufgabe erledigen wollen, werden sie die Seiten einer Website so lange überfliegen, bis sie finden, was sie suchen. Und du als Gestalter kannst ihnen dabei helfen, indem du eine gute visuelle Hierarchie entwirfst. Eine visuelle Hierarchie ist die Anordnung oder Präsentation von Elementen, die eine gewisse Wichtigkeit impliziert z. B. wohin die Augen zuerst, als zweites usw. schauen sollen.

Tipps:

• Vermeide lange Textpassagen. Gliedere deine Inhalte und Informationen auf, um sie visuell leichter verdaulich zu machen. Unterbrich Textwände mit Überschriften oder Aufzählungspunkten.
• Hebe wichtige Elemente visuell hervor. Hebe wichtige Elemente wie Schaltflächen mit Handlungsaufforderungen oder Anmeldeformulare hervor, damit die Besucher sie sofort sehen können. Du kannst Elemente durch unterschiedliche Größen oder Farben hervorheben.

Contentful hebt die wichtigsten Informationen auf einer Seite hervor.

• Berücksichtige das natürliche Leseverhalten. Menschen in der westlichen Welt lesen normalerweise von links nach rechts und von oben nach unten. Ein Design, das gegen dieses Muster verstößt, macht es für deine Besucher:innen schwer, deinem Text zu folgen. Gut gestaltete Websites ordnen ihre Inhalte in der Regel in einer "F"- oder "Z"-Leseform an.
• Halte dich an ein Rasterlayout. Ein Raster-Layout ermöglicht es dir, Informationen so zu organisieren, dass die Besucher:innen die Informationen auf der Seite leichter lesen und verstehen können.

Verwende das Raster-Layout bei der Gestaltung von Webangeboten.

5. Nimm deinen Inhalt ernst

Der Text ist genauso wichtig wie das Design deiner Website. Mehr als 95 Prozent der Informationen im Internet liegen in Form von geschriebener Sprache vor. Selbst wenn deine Website schön gestaltet ist, ist sie ohne guten Inhalt nicht mehr als ein leerer Rahmen. Eine gute Website hat sowohl ein gutes Design als auch einen guten Inhalt. Die Aufgabe eines Designers ist es, dafür zu sorgen, dass das Design den Inhalt unterstützt und ergänzt.

Tipps:

• Achte darauf, dass der Text auf deiner Website relevant ist. Irrelevanter Text bringt deinen Besuchern keinen Mehrwert und kann sie sogar verwirren. Bemühe dich, wertvolle Inhalte anzubieten.
• Vermeide Fachjargon. Die Informationen auf deiner Website sollten so einfach und klar wie möglich sein, damit sie leicht zu verstehen sind. Ein Anwalt, der seine Kanzlei online vorstellt, sollte zum Beispiel Fachjargon vermeiden. Schließlich haben Menschen, die nach juristischer Hilfe suchen, in der Regel nicht Jura studiert.

6. Überprüfe deine Website auf Fehler

Gute Arbeit kann schnell durch einen kleinen Fehler getrübt werden. Hier sind ein paar häufige Probleme, auf die du achten solltest:

• Achte auf tote Links. Ein Nutzer kann schnell frustriert sein, wenn er auf einen Link klickt und als Antwort eine 404-Fehlerseite erhält.
• Überprüfe deine Website auf Tippfehler.
• Achte darauf, dass alle Medieninhalte korrekt geladen werden. Keine kaputten Bilder oder Videos.

7. MINIMIERE DIE ANZAHL DER AUSWAHLMÖGLICHKEITEN

Wie viele Möglichkeiten eine Person hat, beeinflusst ihre Entscheidungen; je mehr Möglichkeiten sie hat, desto wahrscheinlicher ist es, dass sie sich überwältigt fühlt. Wenn du dem Nutzenden zu viele Optionen präsentierst, wird er oder sie zu viel nachdenken müssen. Hilf deinen Nutzern, Entscheidungen zu treffen, indem du ihnen klare Inhalte präsentierst.

8. Bringe Nutzer zum Scrollen

Beim Scrollen tauchen deine Besucher:innen tiefer in deine Website ein, so dass sie automatisch mehr Zeit auf deiner Website verbringen. Auf diese Weise erhöhst du die Chance, dass deine Nutzer z.B. etwas kaufen, einen Newsletter abonnieren oder dich kontaktieren. Obwohl die Menschen normalerweise sofort nach dem Laden der Seite mit dem Scrollen beginnen, ist der erste Inhalt deiner Seite sehr wichtig. Was ganz oben erscheint, bestimmt den Eindruck und die Qualitätserwartung deiner Besucher:innen. Die Leute scrollen zwar, aber nur, wenn das, was am Anfang steht (Above the Fold), vielversprechend genug ist.

Praxistipp: Der Inhalt am Anfang der Seite weckt die ersten Erwartungen. Wenn deine Seite deinen Besuchern qualitativ hochwertige Inhalte bietet, werden sie bereit sein, für weitere Inhalte zu scrollen.

9. Beschrifte Schaltflächen entsprechend ihrer Funktion

Die Benennung eines Bedienelements sollte den Nutzer immer auf seine Funktion hinweisen. Die Nutzer fühlen sich sicherer, wenn sie wissen, welche Aktion eine Schaltfläche auslösen wird. Vage Beschriftungen wie "Absenden" oder abstrakte Beschriftungen geben nicht genügend Informationen über die Aktion.

10. STELLE SICHER, DAS Funktions-ELEMENTE entsprechend DARGESTELLT WERDEN.

Überlege dir, wie deine Schaltflächen und andere interaktive Elemente, wie das Design, ihre Funktion vermitteln. Erinnere dich an das alte Sprichwort "form follows function": Die Art und Weise, wie ein Objekt aussieht, sagt dem Nutzer, wie er es benutzen soll. Visuelle Elemente, die wie Links oder Schaltflächen aussehen, aber nicht anklickbar sind, wie z. B. unterstrichene Wörter, die keine Links sind, oder Elemente, die einen rechteckigen Hintergrund haben, aber keine Schaltflächen sind, können deinen Besucher leicht verwirren.

11. Mach deine Website responsive

Heute gibt es mehr als 5 Milliarden Geräte mit Webbrowsern. Das bedeutet, dass Besucher:innen deine Website von verschiedensten Geräten aus besuchen können, z. B. von einem Desktop, einem Tablet, einem Telefon, einem Musikplayer oder sogar einer Uhr. Ein wichtiger Teil des UX-Designs ist es, dafür zu sorgen, dass alle wichtigen Informationen auf den verschiedenen Bildschirmgrößen richtig angezeigt werden, egal, wie der Besucher deine Website betrachtet.

Vom Handy über die Uhr oder das Tablet bis zum Desktop, die Website sollte die Informationen übersichtlich darstellen.

Achte darauf, dass wichtige Informationen leicht zu finden sind. Im Gegensatz zu Desktop-Nutzern suchen Handy-Nutzer etwas Bestimmtes, z. B. Kontaktinformationen oder die Kosten für ein Produkt, das sie kaufen möchten. Mach es unmöglich, diese Informationen zu übersehen.

Passe die Größe deiner interaktiven Elemente an die Bildschirmgröße an. Da Handybenutzer:innen mit ihren Fingern scrollen und tippen, musst du eventuell die Größe interaktiver Elemente wie Schaltflächen anpassen.

12. Teste dein Design

Möglicherweise hast du ein großartiges Design erstellt, aber ohne das Feedback echter Nutzer:innen wirst du nie wissen, wie effektiv es ist. Du solltest herausfinden, wie potenzielle Nutzer darauf reagieren. Auch wenn du nur ein oder zwei echte, unvoreingenommene Bekannte oder Arbeitskollegen bittest, deine Website auf Herz und Nieren zu prüfen und dir dann ihre Meinung mitzuteilen, wirst du viele hilfreiche Erkenntnisse erhalten, die du ohne sie nicht hättest.

Tipp: Behalte die Analysefunktionen im Auge. Webanalysen sind leistungsstarke Werkzeuge, die dir helfen können, Bereiche auf deiner Website zu finden, die besonderer Aufmerksamkeit bedürfen.

13. Vermeide lange ladezeiten

Die Ladezeit ist extrem wichtig für das Nutzererlebnis. Mit dem technologischen Fortschritt werden wir immer ungeduldiger, und heute erwarten 47 Prozent der Nutzer:innen, dass eine Webseite in zwei Sekunden oder weniger geladen wird. Wenn eine Webseite länger braucht, um zu laden, werden deine Besucher sie höchstwahrscheinlich frustriert verlassen. Aus diesem Grund sollte die Geschwindigkeit bei der Erstellung einer Homepage oder Webanwendung Priorität haben.

Tipps:

• Versuche, eine leere Seite zu vermeiden, während sie geladen wird. Wenn die Seite einige Zeit zum Laden braucht, zeige einen Teil des Inhalts zusammen mit einer visuellen Rückmeldung an, z. B. mit einer Ladeanzeige.
• Optimiere Bilder. Bilder, vor allem große Hintergrundbilder, können sehr lange zum Laden brauchen. Du kannst die Ladezeit erheblich verkürzen, indem du deine Bilder optimierst. Dafür gibt es ein hilfreiches Tool von Google-Entwicklern: Sqoosh.
• Messe die aktuelle Leistung deiner Website. Die Google-Tools PageSpeed Insights und Think With Google helfen dir nicht nur, Leistungsprobleme auf deiner Website zu erkennen, sondern schlagen auch Lösungen für bestimmte Probleme vor.

14. Lass interne Links nicht in neuen Tabs öffnen

Die Nutzer erwarten, dass sich interne und externe Links unterschiedlich verhalten. Alle internen Links sollten im selben Tab geöffnet werden; auf diese Weise erlaubst du deinen Besuchern, den Zurück-Button zu benutzen. Wenn du dich dafür entscheidest, externe Links in einem neuen Fenster zu öffnen, könntest du eine Warnung geben, bevor du automatisch ein neues Fenster oder einen neuen Tab öffnest. Das kannst du tun, indem du dem Linktext einen kurzen Text hinzufügst. "öffnet in einem neuen Fenster".

15. Verwende nicht zu viele Schriftarten

Für viele Anfänger:innen im Webdesign kann es verlockend sein, viele verschiedene Schriftarten in ihren Designs zu verwenden. Allerdings ist es zu deinem Vorteil, dieser Versuchung zu widerstehen. Zu viele verschiedene Schriftarten können ablenken, verwirren und im schlimmsten Fall sogar lästig sein.

Eine allgemeine Empfehlung lautet, maximal zwei verschiedene Schriftarten in maximal zwei verschiedenen Stärken zu verwenden. Überlege dir bei der Gestaltung einer Website, wie du die Typografie sinnvoll einsetzen kannst.

16. Verwende nicht zu viele Farben auf deiner Website

Ähnlich wie bei den Schriftarten ist es ratsam, nicht zu viele Farben in deinem Design zu verwenden. Farbe hat viel mit Gleichgewicht zu tun, und je mehr Farben du verwendest, desto schwieriger wird es, das Gleichgewicht zu halten. Wenn du zu viele Farben in deinem Design verwendest, ist das so, als würdest du versuchen, eine Million Gefühle und Botschaften auf einmal zu vermitteln.

Es ist immer besser, dein Farbschema auf einige wenige Farben zu beschränken und es auf deiner gesamten Website einheitlich zu halten, es sei denn, du willst einen wichtigen Bereich mit Farbe hervorheben.

Tipp: Überlege dir, welche Emotionen du bei deinen Besuchern hervorrufen willst. Sobald du weißt, welche Emotionen du vermitteln willst, kannst du das richtige Farbschema wählen. Wenn du zum Beispiel auf deiner Website Produkte für Frieden und Meditation verkaufen möchtest, solltest du kein grelles und buntes Farbschema verwenden.

17. Automatische Pop-Ups nicht zu früh anzeigen

Viele Websites zeigen Pop-ups an, die dich auffordern, dich anzumelden, sobald du auf der Seite angekommen bist. Als Designer:in ist die Anzeige von Pop-ups wahrscheinlich eines der ärgerlichsten Dinge, die du jemandem antun kannst, der deine Website besucht. Pop-ups sind von Natur aus lästig. Und da sie in der Regel dazu dienen, Werbung anzuzeigen, schließen deine Nutzer sie oft, bevor sie den Inhalt überhaupt gelesen haben.

Tipp: Stelle deine Pop-ups so ein, dass sie erst nach einer bestimmten Zeit erscheinen. Bevor du deinen Besucher aufforderst, etwas zu tun, musst du zeigen, wie du ihm einen Mehrwert bieten kannst.

18. VERWENDE KEINE GENERISCHEN FOTOS VON BELIEBIGEN MENSCHEN.

Bilder mit echten menschlichen Gesichtern sind ein sehr effektiver Weg, um deine Nutzer:innen anzusprechen. Unser Gehirn ist dafür prädestiniert, Gesichtern Aufmerksamkeit zu schenken. Wenn wir die Gesichter anderer Menschen sehen, haben wir das Gefühl, uns mit ihnen zu identifizieren und nicht nur ein Produkt zu betrachten.

Viele Unternehmenswebsites sind dafür bekannt, dass sie zu viele sogenannte Stockfotos verwenden. Sie werden verwendet, um "Vertrauen aufzubauen". Usability-Tests zeigen, dass rein dekorative Fotos selten einen Mehrwert für das Design bieten, sich oft negativ auf das Nutzererlebnis und sogar auf das Google-Ranking auswirken.

19. LASS DIR NICHT VON ZU VIELen WERbe-anzeigen DIE SHOW STEHLEN

Zu viele Werbebotschaften oder Anzeigen auf einer Seite können leicht den Hauptinhalt verwässern und es für deine Besucher:innen schwierig machen, bestimmte Ziele zu erreichen. Wenn du zu viele Anzeigen auf der Seite einbaust, wetteifern sie alle um die Aufmerksamkeit deiner Leser:innen. Das führt zu einer Reizüberflutung, die letztlich die Absprungrate erhöht. Ebenfalls wichtig ist, dass alles, was wie eine Anzeige aussieht, von den Nutzern in der Regel ignoriert wird. Dieses Phänomen ist als "Bannerblindheit" bekannt.

20. keine musik oder Videos (mit Ton) automatisch abspielen lassen

Obwohl Hintergrundmusik in manchen Fällen funktionieren kann, z. B. auf einer Werbe-Website, ist sie für die meisten Websites einfach eine schlechte Idee. Unerwartete Musik oder Geräusche können ablenkend wirken oder sogar Probleme verursachen. Zum Beispiel könnte dein Besucher deine Website an seinem Arbeitsplatz, an einem öffentlichen Ort oder in der Nähe einer schlafenden Person ansehen. Unerwartete Musik könnte solche Besucher im Handumdrehen abschrecken.

Tipp: Gib deinen Besuchern die Kontrolle. Stelle die Musik standardmäßig auf stumm, aber erlaube ihnen, sie einzuschalten, wenn sie auf die Schaltflächen Play/Pause klicken.

Facebook-Videos sind so eingestellt, dass sie automatisch abgespielt werden, aber es wird kein Ton abgespielt, bis die betreffende Nutzerin oder der betreffende Nutzer deutlich signalisiert, das Video sehen zu wollen, z. B. durch Interaktion mit dem Video.

21. Blende DIE BILDLAUFLEISTE NICHT aus

"Scroll Hijacking" bedeutet, dass Designer:innen den Scrollbalken so manipulieren, dass er sich auf ihrer Website anders verhält. Versteckte Bildlaufleisten werden von vielen Nutzern als sehr störend empfunden. Sie nehmen ihnen die Kontrolle weg und machen das Scrollverhalten völlig unberechenbar. Bei der Gestaltung einer Website ist es besser, "Scroll-Hijacking" zu vermeiden und den Nutzer:innen die Kontrolle über die Seite zu überlassen.

22. VERWENDE KEINE HORIZONTALE BILDLAUFLEISTE

Wie schön ein Design auch sein mag, es sollte deinem Besucher niemals das Lesen deines Inhalts oder die Interaktion mit deiner Website erschweren. Ein typisches Beispiel für schlechte Benutzerfreundlichkeit ist die Verwendung von hellgrauem Text auf hellem Hintergrund. Diese Kombination beeinträchtigt die Lesbarkeit des Inhalts. Besser ist es, holprige Hintergründe hinter dem Text oder unzureichende Farbkontraste zu vermeiden.

Tipp: Überprüfe das Kontrastverhältnis. Das Kontrastverhältnis gibt an, wie stark sich zwei sich überschneidende Farben voneinander unterscheiden. Mit Tools wie dem Contrast Checker kannst du mit wenigen Klicks überprüfen, ob du einen ausreichenden Farbkontrast hast.

23. OPFERE DIE BENUTZERFREUNDLICHKEIT NICHT DER SCHÖNHEIT ZULIEBE

Egal wie schön ein Design auch sein mag, es sollte Ihrem Besucher niemals das Lesen Ihrer Inhalte oder die Interaktion mit Ihrer Website erschweren. Ein typisches Beispiel für eine schlechte Benutzerfreundlichkeit ist die Verwendung von hellgrauem Text auf einem hellen Hintergrund. Diese Kombination beeinträchtigt die Lesbarkeit des Inhalts. Es ist besser, holprige Hintergründe hinter dem Text oder unzureichenden Farbkontrast zu vermeiden.

Tipp: Prüfen Sie das Kontrastverhältnis. Das Kontrastverhältnis gibt an, wie stark sich zwei überlappende Farben voneinander unterscheiden. Mit Tools wie Color Contrast Checker können Sie mit wenigen Klicks überprüfen, ob Sie einen ausreichenden Farbkontrast haben.

24. Verwenden Sie keinen blinkenden Text und Anzeigen

Wenn du Anzeigen und Animationen einbinden willst, solltest du nicht einmal daran denken, flackernde Blinkeffekte zu verwenden. Inhalte, die blinken oder flackern, können bei empfindlichen Personen Krampfanfälle auslösen und werden von normalen Nutzern wahrscheinlich nur als störend oder ablenkend empfunden.

Fazit

Wenn Leute mit Websites interagieren, erwarten sie ein angenehmes Benutzererlebnis. Wenn du ihre Bedürfnisse nicht erfüllst, werden sie einfach zur Konkurrenz wechseln, die womöglich nur einen Klick entfernt ist. Deshalb solltest du bei jeder Designentscheidung daran denken, was das Beste für deine Besucher ist, und versuchen, das Erlebnis so angenehm wie möglich zu gestalten.