Lade dir unser kostenloses Handbuch herunter, das dir bei der Gestaltung deiner Website helfen wird.
Die eingegebene E-Mail-Adresse ist ungültig.
Vielen Dank für deine Anmeldung.
Mit der Angabe deiner E-Mail bestätigst du, dass du unsere Datenschutzerklärung gelesen und verstanden hast und einverstanden bist, Marketing-E-Mails von Squarespace zu erhalten.
Die Designentscheidungen, die du für deine Website triffst, haben einen großen Einfluss auf das Benutzererlebnis und die Funktionalität, selbst für Besucher:innen der Website ohne Designkenntnisse. Für abgelenkte Internetnutzer:innen, die schnelle Antworten suchen, ist ein starker erster Eindruck entscheidend.
Ein effektives Webdesign bleibt oft unbemerkt, weil eine gut gestaltete Website einfach zu bedienen und zu verstehen ist. Doch bewusste Designentscheidungen machen diese Leichtigkeit erst möglich.
Hier findest du 10 wichtige Designprinzipien, die du befolgen solltest, damit du zuverlässig eine schöne und benutzerfreundliche Website erstellen kannst. Für visuelle Beispiele kannst du den vollständigen Leitfaden mit unseren wichtigsten Webdesign-Prinzipien herunterladen.
1. Organisiere Inhalte nach Wichtigkeit
Eines der Ziele jedes Website-Designs ist es, Informationen mit deinen Website-Besucher:innen zu teilen. Mit einer klaren Typografie und Schrifthierarchie kannst du deinen Besucher:innen signalisieren, welche Informationen am wichtigsten sind.
Das bedeutet, dass deine Website-Texte eindeutige Titel, Abschnittsüberschriften und einen klaren Textkörper haben sollte. Als Richtlinie solltest du versuchen, weniger als vier Schriftarten und Schriftstile pro Webseite zu verwenden.
Stelle sicher, dass die Titel und Überschriften für den jeweiligen Inhalt sinnvoll sind. Sieh dir als Beispiel den Stil dieses Blogartikels an. Hier werden unterschiedliche Größen und Schriftstile verwendet, um die Hierarchie der Informationen auf der Seite zu signalisieren, vom Titel über die wichtigsten Erkenntnisse bis hin zum Textinhalt.
Die klare Organisation deiner Website-Inhalte macht es für Besucher:innen einfacher, deine Website zu lesen und zu navigieren. Außerdem können Suchmaschinen dadurch die Struktur deiner Website leichter verstehen, was deine SEO und dein Suchranking verbessern kann.
Sieh dir unseren Leitfaden zum Verfassen von Website-Inhalten an
2. Wähle Farben für visuelle Balance, Kontrast und Ton
Die Farbpalette ist eines der besten Tools, um den Ton und die Energie deiner Website festzulegen. Bevor du dich für eine Reihe von Farben entscheidest, solltest du darüber nachdenken, wie deine Marke oder dein Unternehmen auf deine Kund:innen wirken soll.
Wenn du möchtest, dass sich dein Publikum energiegeladen fühlt, probiere helle, kräftige Farben aus. Willst du eher eine beruhigende Wirkung erzielen, solltest du dich für gedämpfte Farben entscheiden. Wende dieses Farbschema konsequent auf deine Website an, um ein einheitliches Erscheinungsbild zu erzielen. Verwende kontrastierende Farben, um wichtige Elemente hervorzuheben, und kombiniere Farben für einen ausgewogenen Look.
Jede Farbe ist in unterschiedlichen Farbtönen erhältlich. Sieh dir also unbedingt alle verfügbaren Optionen an und probiere verschiedene Kombinationen aus, bevor du eine Farbe ausschließt.
Hol dir Tipps für die Auswahl von Farben, Schriftarten und Symbolen für deine Website
3. Weise den Nutzer:innen mit deinem Layout den Weg
Stell dir deine Seiten-Layouts und die Zusammensetzung als einen Pfad vor, den du den Besucher:innen deiner Website vorgibst. Dieser Pfad sollte sie letztendlich dazu bringen, eine Aktion zu ergreifen, sei es ein Klick auf eine deiner anderen Seiten oder eine Aktion auf derselben Seite.
Unsere Augen neigen dazu, Inhalte von links nach rechts und von oben nach unten in einer „Z“- oder „F“-Form zu scannen. Behalte das im Hinterkopf, wenn du verschiedene Abschnitte in deinem Website-Design platzierst. Es ist z. B. sinnvoll, den Namen deines Unternehmens und dein Leitbild in einem sichtbaren Bereich oben auf deiner Startseite zu platzieren und dies dann mit Informationen und Fotos über dein Angebot weiter unten auf der Seite abzugleichen.
Verwende das Layout in Kombination mit Größen und Farben, um die wichtigsten Punkte auf jeder Seite hervorzuheben.
Sieh dir einige Best Practices für die Gestaltung von Seiten-Layouts an
4. Nutze Negativräume, um Inhalte hervorzuheben
Negativraum, auch Leerraum genannt, ist ein leerer Bereich, der bewusst zwischen Inhalten auf deiner Website gelassen wurde. Negativräume sind eine weitere Möglichkeit, eine visuelle Hierarchie für die Informationen auf deiner Website zu erstellen. Sie sorgen auch für ein angenehmeres, weniger überwältigendes Surferlebnis.
Wenn du beispielsweise viel Text in einen Teil einer Seite quetschst, kann dies die Lesbarkeit beeinträchtigen. Außerdem ist es schwer herauszufinden, was der wichtigste Teil des Textes ist, weshalb Besucher:innen diesen Abschnitt wahrscheinlich überfliegen oder einfach ignorieren. Wenn du visuelle Trennungen zwischen deinen Inhalten hinzufügst, kannst du ein wichtiges Verkaufsargument oder Überschriften leichter hervorheben.
Du musst kein:e Profi-Designer:in sein, um herauszufinden, wie man Negativräume platziert. Der Kreative Editor von Squarespace verfügt über ein Raster, das dir hilft, die Abstände zwischen deinen Seitenabschnitten zu visualisieren. Sieh dir eine Vorschau deiner Webseite an und überlege, wie du als neue:r Nutzer:in darin navigieren würdest. Dein Instinkt wird dir wahrscheinlich sagen, ob es Probleme mit der Lesbarkeit gibt oder ob ein Abschnitt etwas mehr Freiraum braucht.
Sieh dir Tipps zum Gestalten von Landing-Pages an
5. Mache deine Website auf jedem Gerät nutzbar
Allein in den USA kommt fast die Hälfte des Web-Traffics von Mobilgeräten. Das bedeutet, dass sich ein gutes Webdesign an verschiedene Bildschirmgrößen und Geräte anpassen muss, um wirklich effektiv zu sein.
Die meisten Website-Builder haben diese Anpassungsfähigkeit in ihr Designsystem integriert. Zum Beispiel verfügen Squarespace-Websites über ein responsives Design, d. h. die Schriftgröße und Inhalte werden automatisch an kleinere oder schmalere Bildschirme angepasst.
Teste die mobile Benutzerfreundlichkeit deiner Website, während du sie bearbeitest und bevor du sie veröffentlichst. Dein Website-Editor sollte einen Vorschaumodus für Mobilgeräte oder eine separate mobile Bearbeitung haben. Bevor du live gehst, verwende die Website auf einem Handy und Tablet, um sicherzustellen, dass das Layout, die Schriften und Links funktionieren und sinnvoll organisiert sind.
Hol dir unsere Tipps zum Mobile-First-Webdesign
6. Erläutere deine Ziele
Denke beim Aufbau deiner Website an ein klares Ziel für deine Besucher:innen. Möchtest du, dass jemand etwas in deinem E-Commerce-Shop kauft? Einen Termin mit dir vereinbart? Oder dich für eine freiberufliche Tätigkeit kontaktiert?
Dieses Endziel ist das, wohin dein Website-Design Besucher:innen führt. Nachdem du alle Hintergrundinformationen und Beweise dargelegt hast, die jemand wissen muss, sollte eine Handlungsaufforderung folgen.
Eine Handlungsaufforderung kann ein Button, ein Formular oder ein einfacher Link sein, deren Text normalerweise zum Handeln anregt. Beispiele hierfür sind „Jetzt kaufen“ oder „Registrieren“. Hebe das Design deiner Handlungsaufforderung vom Rest der Webseite ab und platziere sie unter wichtige Informationen oder Grafiken, die sich darauf beziehen, wohin die Handlungsaufforderung sie führen wird. Dadurch sticht die Option hervor und führt Besucher:innen zum Hauptzweck deiner Webseite.
Erfahre mehr über das Erstellen effektiver Handlungsaufforderungen
7. Wähle visuelle Elemente, die deinen Zweck repräsentieren
Wie deine Farbpalette sollten auch die visuellen Elemente deiner Website deine Markenidentität widerspiegeln und den Zweck deiner Website unterstützen. Das beinhaltet alles, von Fotos bis hin zu Symbolen und Akzenten, die Seitenabschnitte voneinander trennen.
Mithilfe von Bildern kannst du deine Botschaft an deine Zielgruppe genauer formulieren. Während eine gedämpfte, sanfte Farbpalette eine beruhigende Energie signalisieren kann, vermittelt ein Bild von jemandem, der meditiert, wie du diese spezifische Energie in deiner Marke oder deinem Unternehmen zum Leben erweckst.
Sofern du keine Produkte verkaufst oder ein Portfolio teilst, kannst du hochwertige Agenturbilder lizenzieren und Bildeffekte verwenden, um deine Botschaft zu vermitteln.
Hier erfährst du, wie du Fotos für deine Website auswählst
8. Teile die wichtigsten Informationen im Voraus
Website-Designer:innen sprechen oft davon, Informationen „above the fold“ (oberhalb des Falzes) zu platzieren. Der Begriff stammt aus physischen Zeitungen, wo die wichtigsten Geschichten über der Stelle gedruckt werden, an der das Papier in zwei Hälften gefaltet wird. Für ein gutes Website-Design bedeutet das, dass die wichtigsten Teile einer Webseite sichtbar sind, bevor jemand nach unten scrollen muss.
Übliche Dinge, die man über dem Falz platzieren kann, sind:
Name und Logo des Unternehmens
Navigationsmenü
Seiten- oder Artikeltitel
Ankündigungen neuer Produkte oder Events
Kurze Zusammenfassung über dich oder dein Unternehmen
Die beste Arbeit in deinem Portfolio
Teste die Wirksamkeit deiner Above-the-Fold-Inhalte, indem du auf die wichtigen Seiten deiner Website gehst. Notiere dir für jede Seite, welche Informationen du von der Seite mitnehmen kannst, ohne überhaupt zu scrollen. Erregt jede Seite deine Aufmerksamkeit, sobald du reinklickst, und verleitet dich dazu, mehr zu erfahren oder zu scrollen?
Fange mit dem Erstellen einer herausragenden Startseite an
9. Sorge für eine einfache Website-Navigation
Eine übersichtliche Navigation ist für ein gutes Website-Erlebnis notwendig. Website-Besucher:innen sollten immer eine klare Vorstellung davon haben, wohin ein Link auf deiner Website sie führt und wie sie zum gewünschten Ziel gelangen.
Eine Website mit einer guten Navigation fällt dir vielleicht nicht sofort auf. Aber denk darüber nach, wie es sich anfühlt, wenn du nicht weißt, wo du den gewünschten Inhalt auf einer Website finden sollst – ein frustrierendes Gefühl, weshalb man meistens gleich wegklickt.
Halte dein Navigationsdesign einfach. Verwende direkte Sprache und verkompliziere das Design nicht zu sehr. Teste deine eigene Website-Navigation, indem du Freund:innen bittest, zu einer bestimmten Seite oder einem bestimmten Produkt zu navigieren, oder versetze dich in ihre Lage und probiere es selbst aus.
Hol dir Tipps für die grundlegende Website-Navigation
10. Erstelle ein unverwechselbares Design
Wie bei jeder kreativen Tätigkeit kannst du, sobald du die Regeln kennst, diese biegen oder brechen, um deine einzigartige Vision zu verwirklichen.
Eine vertrauenswürdige Marke oder ein vertrauenswürdiges Unternehmen sieht professionell aus, aber eine professionelle Marke, die hervorsticht, hat einen eigenen Standpunkt. Behalte all diese Prinzipien im Hinterkopf, wenn du dein Website-Design oder die Neugestaltung planst. Aber scheue dich nicht, mit verschiedenen Designelementen zu spielen und eine eigene Perspektive und visuelle Gestaltung für deine Bedürfnisse zu entwickeln.
Lies unseren Leitfaden zu den wichtigsten Phasen der Gestaltung einer Website