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.
Wenn du eine neue Website entwirfst, kennst du vielleicht die Grundlagen dessen, was eine Website ausmacht –Bilder, Texte und Navigationslinks –, aber die Umsetzung fällt vielen Menschen schwer. Wie lang sollten deine Texte sein? Wie wählst du Bildmaterial für eine Seite aus?
Die Squarespace Templates und das Squarespace Design Kit (mit KI) bieten zwar eine gute erste Orientierung, aber wenn du einige Designregeln beherrschst, kannst du deine Website noch einzigartiger gestalten. Wir haben John Wilson, einen der Produktdesign-Experten hinter den Squarespace Templates, gefragt, was man bei den Grundlagen der Website-Gestaltung beachten muss.
Die beiden Hauptbestandteile des Designs einer Website
Die verschiedenen Elemente, die in das Design einer Website einfließen, fallen unter zwei Hauptkategorien: visuelles Design und funktionale Benutzeroberfläche (UI).
Visuelles Design: Dazu gehört alles, was du siehst, wie Farbpaletten, Schriften und Typografie, Layout, Tonalität und Bildmaterial (Symbole, Fotos, Illustrationen usw.).
Funktionale Benutzeroberfläche: Das umfasst alles, womit deine Besucher:innen auf deiner Website interagieren, wie Buttons, Navigation, Formulare oder auch Produkt-Seiten und die Kasse deines Shops.
Laut Wilson musst du, um fundierte Designentscheidungen zu treffen, erst einmal „den strategischen Zweck deiner Website definieren – dient sie der reinen Präsentation deiner Marke, soll sie Hosting-Informationen bieten, für Conversions sorgen, zum Kauf anregen, Leads erfassen oder ist sie für etwas ganz anderes bestimmt?
„Dient deine Website dazu, eingehende Leads zu unterstützen und mit deinen Kund:innen zu kommunizieren? Dann sollte der Fokus darauf liegen, Inhalte leicht zugänglich weiter oben auf der Seite zu präsentieren und sicherzustellen, dass sie die Erwartungen an Eingabefelder erfüllen, damit deine Kund:innen dich möglichst unkompliziert erreichen können."
Nutze unsere 10 wesentlichen Webdesign-Prinzipien, um dir Ziele zu setzen
„Du musst nicht für jeden Abschnitt auf jeder Seite die richtige Lösung haben.“
1. Wähle Bilder passend zum Kontext und zum Zweck
Wenn du das Bildmaterial für deine Website auswählst, versuche, dich an Bilder oder Designs zu halten, die die Energie deiner Marke oder Mission durch ihre Gestaltung, ihre Farbpaletten oder ihr Thema widerspiegeln.
Denke als Nächstes über die Funktion und Platzierung deiner Bilder nach. Das gibt dir eine Vorstellung davon, wie viele du brauchst und wo du sie platzieren musst. Was ist das primäre Ziel des jeweiligen Bildes?
Informationen übermitteln
Den Text verständlicher machen
Eine Emotion hervorrufen
Schmücken
Eine Kombination der oben genannten Ziele
Wenn du nicht weiterkommst, überlege, welche Funktion die Bilder haben. „Hauptbilder müssen zum Beispiel Aufmerksamkeit erregen, Platz für lesbaren Text bieten und effektiv die Erwartungen an die Tonalität deiner restlichen Website bestimmen“, sagt Wilson.
Bedenke, dass auch die Qualität der ausgewählten Bilder wichtig ist. „Wenn das verfügbare Bildmaterial nicht optimal ist oder du zu beschäftigt bist, um an etwas Hochwertiges zu kommen, solltest du in Betracht ziehen, es zu verkleinern", so Wilson. „Wir empfehlen außerdem, bei Inhalten mit geringerer Qualität auf eine Anzeige in voller Breite zu verzichten.“
Hol dir weitere Tipps für das Hinzufügen von Fotos zu deiner Website
2. Halte den Text klar und kurz
„Es gibt eine alte Gruppenstudie von Nielsen Norman, die besagt, dass Nutzer:innen im Durchschnitt etwa 20 % der Wörter auf einer Webseite lesen“, erläutert Wilson. „Lange Texte, mit Ausnahme redaktioneller Beiträge, können bei der Erstellung und Verarbeitung anstrengend sein.
Kurz gesagt: Wenn es um die Anzahl der Wörter auf dem Bildschirm geht, ist weniger tatsächlich mehr."
Verwende diese allgemeinen Richtlinien als Checkliste, wenn du deine Texte prüfst.
Denke an deine Zielgruppe
Reduziere Redundanz
Verwende eine klare Sprache
Gestalte den Text übersichtlich
Wenn du Handlungsaufforderungen erstellst, wie Buttons oder Text, mit dem du zur Kontaktaufnahme, zum Weiterzulesen oder zum Kauf aufforderst, mache deutlich, wohin ein Klick die Nutzer:innen führt. Handlungsaufforderungen sind kurz – oft 20 Zeichen oder weniger – und regen zum Handeln an, etwa „Jetzt kaufen“.
Sei dir bewusst, dass es keine allgemeingültige Regel für alle Websites gibt. Wie viele Worte braucht es, um deinen Standpunkt auf deine Art und Weise zu vermitteln?
Wenn du dir unsicher bist, schau dir Websites an, die deiner ähnlich sind. Achte darauf, wo mit längeren und wo mit kürzeren Texten gearbeitet wird. Stellst du an irgendeinem Punkt fest, dass du den Text nur überfliegst oder abschaltest? Der Text auf einer Startseite besteht beispielsweise aus bis zu 200 Wörtern. Auf der „Über uns“-Seite können es jedoch um die 500 Wörter sein.
Erfahre, wie dich Squarespace AI bei der Texterstellung unterstützen kann
„Es ist verlockend, für jeden Aspekt deines Unternehmens eine Seite zu erstellen und diese Seite dann in deiner Hauptnavigation zu verlinken, aber glaub uns: Halte es besser einfach.“
3. Erstelle handlungsorientierte Navigationslinks
Mit der Navigation hast du die meiste Kontrolle über die funktionalen Teile deiner Website. Um eine benutzerfreundliche Navigation zu erstellen, solltest du zwei wichtige Dinge im Hinterkopf behalten:
Den wesentlichen Zweck deiner Website
Weniger ist mehr gilt auch für die Navigation
„Ist deine Website ein Tool, das den Online-Einkauf deiner Produkte ermöglichen soll? Suchst du nach einfachen Zugangspunkten, über die deine Besucher:innen Termine mit dir vereinbaren können?“, fragt Wilson. „Indem du diese Ziele definierst, legst du fest, wie du die Sprache deiner Navigation und deiner wichtigsten Handlungsaufforderungen wie „Kaufen“ oder „Termin vereinbaren“ strukturierst.
Der Ansatz „Weniger ist mehr“ stellt sicher, dass die Besucher:innen der Website schnell und effizient finden, wonach sie suchen. Laut Wilson wird das „die Menge an Informationen reduzieren, die eine Person analysieren muss, bevor sie Links findet, die für ihre Bedürfnisse am relevantesten sind“. „Es ist verlockend, für jeden Aspekt deines Unternehmens eine Seite zu erstellen und diese Seite dann in deiner Hauptnavigation zu verlinken, aber glaub uns: Halte es besser einfach.“
Lies unseren Leitfaden zur Gestaltung deiner Navigation
4. Erstelle ein Moodboard
Wenn du dich nicht direkt in den Website-Editor stürzen möchtest, erstelle zunächst ein Moodboard mit Bildern und Websites, die dich inspirieren. Suche in deinen gespeicherten Dokumenten nach Mustern, wie z. B. bestimmte Farben, Schriftarten oder Layouts.
„Sobald du eine Sammlung von inspirierenden Layouts, Farbpaletten und anderen Designkompositionen zusammengestellt hast, ist es an der Zeit, ein paar eigene Layouts zu erstellen – und da beginnt der Spaß“, sagt Wilson. „Mit den Funktionen des Website-Editors von Squarespace kannst du verschiedene Gestaltungsmöglichkeiten ausprobieren, bis du eine Variante findest, die sich für deine Marke richtig anfühlt.“
5. Beginne im Zweifelsfall mit dem Hero
Der Hero-Abschnitt – das ist der Bereich, der unmittelbar auf dein Logo und die Hauptnavigation folgt – zählt oft zu den wichtigsten Abschnitten deiner Website.
„Deine Besucher:innen werden sich buchstäblich in Sekundenbruchteilen ein Bild von deinem Unternehmen machen, nachdem sie einen ersten Blick auf deine Website geworfen haben“, erläutert Wilson. „Deshalb sind die visuelle Gestaltung, das Layout, der Inhalt, die Botschaft und die Handlungsaufforderung im Hero-Abschnitt so wichtig. Hier hast du auch die Möglichkeit, den visuellen Grundton für den Rest deiner Website festzulegen.“
Wähle für deinen Hero ein Bild und/oder einen Text, das/der zusammenfasst, was deine Marke oder dein Unternehmen auszeichnet und was du den Besucher:innen der Website anbietest. Eine hilfreiche Ressource für Squarespace Nutzer:innen ist der Abschnittskatalog mit kuratierten Designs, die du sofort auf deine Website anwenden kannst.
„Wenn dein Unternehmen oder deine Marke zu diesem Zeitpunkt noch keinen definierten visuellen Standard hat, ist der Hero auch eine hervorragende Gelegenheit, verschiedene Kombinationen von Schriften, Farben, Bildern und Layouts zu erkunden“, fügt Wilson hinzu. „Diese Aufgabe kann zunächst unlösbar wirken, aber du solltest dir immer wieder vor Augen führen, dass es sich hier nur um einen Abschnitt der Website handelt – und niemand erwartet von dir, dass du für jeden Abschnitt auf jeder Seite die richtige Lösung hast.“
6. Sorge für eine einzigartige Note
„Ein einzigartige persönliche Note oder ‚Design-Signatur' ist eine Schlüsselkomponente, um ein unvergessliches digitales Erlebnis zu schaffen“, sagt Wilson. „Die Aufmerksamkeit deiner Zielgruppe zu erregen und dich von der Masse abzuheben, bietet die Möglichkeit, deine Marke oder dein Unternehmen ins Rampenlicht zu rücken, neue Kund:innen anzuziehen und schließlich auch für dich zu gewinnen. Sobald du den Gesamtcharakter deiner Marke definiert hast, kannst du beginnen, diese Eigenschaften durch Kreativität zu unterstreichen. Wir spielen besonders gern mit Farbe, Typografie, Layout, Grafik und dem Ton der Inhalte.“
Typografie: Durchsuche die Squarespace Bibliothek mit einzigartigen Schriftarten, um eine zu finden, die zum Charakter und zum visuellen Erscheinungsbild deiner Marke passt. Verwende Funktionen wie „Text skalieren“, um mit Kontrasten zwischen großen Überschriftentexten und dem Fließtext zu spielen.
Layout: Experimentiere mit Asymmetrie und schaffe Leerräume. Form-Blöcke und Bildformen sind großartige Möglichkeiten, um bei durch rechte Winkel definierten Formen wie Quadraten und Rechtecken für eine lebendige, verspielte Note zu sorgen.
Tonfall: Wie du über dich, deine Produkte oder Dienstleistungen und deinen geschäftlichen „Aufhänger“ sprichst, kann sehr unterschiedlich sein, je nachdem, welche emotionale Reaktion du dir von deiner Zielgruppe erhoffst.