Erstellung deiner Website: Grundlegende Seitenlayouts

Marken mit hohem Wiedererkennungswert werden zu erfolgreichen Unternehmen, weil sie das Kundenerlebnis in den Vordergrund stellen. Jeder Berührungspunkt mit Kund:innen wird sorgfältig durchdacht, denn jede Interaktion wirkt sich darauf aus, wie Kund:innen das Unternehmen als Ganzes wahrnehmen.

Es gibt nahezu unbegrenzt viele Möglichkeiten, um die Benutzererfahrung für Kund:innen zu optimieren. Dein Website-Design sollte dabei zu deinen obersten Prioritäten zählen. Da die Website oft das Aushängeschild deines Unternehmens ist und sie meist das ist, was Kund:innen als Erstes sehen, wird dir eine schöne und reibungslos funktionierende Website dabei helfen, einen guten ersten Eindruck zu hinterlassen und dich online von anderen abzuheben.

Responsive Design und die Benutzererfahrung wirken sich nicht nur auf die SEO-Performance aus, sondern auch auf die Zeit, die Besucher:innen auf deiner Website verbringen, und auf die Wahrscheinlichkeit, dass sie bei dir kaufen. Nimm dir die Zeit, deine Customer Journey wirklich zu durchdenken: von dem Moment an, in dem Kund:innen auf deiner Website landen, bis zu der Sekunde, in der sie sich für dich entscheiden. 

Ist deinen Besucher:innen klar, was sie als Nächstes tun sollen, wenn sie auf deiner Startseite landen? Ist deine Navigation leicht verständlich? Werden User:innen reibungslos dorthin geleitet, wo du sie haben willst, wie z. B. auf der organisierten und sortierbaren Landing-Page deiner Produkte?

Ziel ist es, deine Marke von seiner besten Seite zu zeigen und deinen Kund:innen ein positives Erlebnis auf deiner Website zu bieten, das Vertrauen schafft, Interesse weckt und die Interaktionen mit deinen Onlineshop fördert. 

Wie entwirfst du also ein überzeugendes Website-Layout, das ansprechend ist und gut funktioniert?

Strategie für die Website-Funktionalität

Das Design deiner Website trägt wesentlich dazu bei, wie viele Verkäufe dein E-Commerce-Shops erzielt. Allerdings kann ein hochwertiges Design von Störfaktoren beeinträchtigt werden, die es deinen Kund:innen erschweren, den Besuch deiner Website zu genießen. Bevor du deine Designelemente komplett aktualisierst, solltest du die Grundlagen deiner Website optimieren. 

Überzeugende Website-Texte und -Inhalte verfassen

Bevor du Schriftarten auswählst und dein Seitenlayout aktualisierst, solltest du aussagekräftige Website-Texte verfassen, die deinen Kund:innen vermitteln, was dich ausmachst und warum sie bei dir einkaufen sollten. Die Botschaften auf deiner Website spiegeln die Vision, Mission und Werte deines Unternehmens wider und bilden die inhaltliche Grundlage für dein Website-Design. 

Strategien für die Gestaltung eines digitalen Logos

Wenn Kund:innen auf deine Unternehmens-Website aufmerksam werden, sehen sie als Erstes dein Logo, das entweder in der oberen linken Ecke oder direkt in der Mitte deines Navigationsmenüs platziert ist. Die Gestaltung deines Logos hängt zwar von dir ab, aber es gibt viele Best Practices und auch online kostenlose Logo-Designer, die dir dabei helfen, genau das zu gestalten, was deine Marke am besten repräsentiert. 

Wenn du jetzt ein Logo entwerfen möchtest, kannst du auch den Logo Maker von Squarespace ausprobieren.

Optimierung der Website-Navigation

Deine Website-Navigation befindet sich normalerweise im Header auf allen Seiten deiner Website. Es lohnt sich also, sich die Zeit zu nehmen und sicherzustellen, dass sie gut aussieht und gut funktioniert. Abgesehen von grundlegenden Tipps zur Benutzerfreundlichkeit und der Überprüfung, ob alle Links funktionieren, solltest du es deinen Kund:innen einfach machen, sich auf deiner Website zurechtzufinden, indem du die Navigationstitel übersichtlich und nicht zu ausgeklügelt gestaltest. Was die Optik anbelangt, solltest du am oberen Rand der Website etwas Leerraum lassen und den Blick deiner Leser:innen behutsam über die Menüoptionen lenken, indem du den Abstand zwischen den Designelementen vergrößerst. 

Was die Orientierung angeht erzielst du ein klares und direktes Benutzererlebnis, wenn du das Navigationsmenü oben links oder oben rechts auf deiner Website ansiedelst, sodass Besucher:innen sofort verstehen, wie sie auf deinen verschiedenen Seiten navigieren können. 

Wenn du einen auffälligen Button mit einer Handlungsaufforderung (auch Call to Action oder kurz CTA genannt) in deine Navigation einbaust, solltest du ihn weit weg vom Seiten-Header ausrichten und eine kräftige Farbe wählen, um den Blick der Besucher:innen nach oben zu lenken. Außerdem kannst du auf Squarespace-Websites individuelle Kopfzeilen verwenden, um deine Navigationsleiste optisch mit dem darunter liegenden Inhalt in Einklang zu bringen und das Design moderner zu gestalten.

Vorschläge für die Lesbarkeit der Schriftart

Wenn deine Website nur schwer lesbar ist, werden deine Kund:innen sie sich auch nicht durchlesen. Manche Schriftarten für Überschriften können beispielsweise außergewöhnlich aussehen, sind aber absolut nicht lesbar. Dein Farbschema oder deine Website-Animationen können mitunter dazu führen, dass ein eigentlich klarer Text schwer zu erkennen ist. Optisch gesehen mag dadurch das Erscheinungsbild der Marke aufgewertet werden, aber aus funktionaler Sicht macht ein unleserlicher Text es Kund:innen schwierig, schnell zu erkennen, was das Unternehmen anbietet. 

Gestalte deine Website einladender und effektiver, indem du Schriftart- und Grafikdesign-Kombinationen wählst, die gut lesbar sind. Wenn du das Rätselraten um eine perfekte Schriftartpaarung vermeiden möchtest, kannst du Squarespace-Templates erkunden, die über Schriftartvorschläge verfügen, die sorgfältig von Profis ausgewählt wurden. 

Wenn du eine gelungene Schriftkombination gefunden hast, kannst du sie auf deiner gesamten Website anwenden. Das geht nicht nur schneller, sondern sorgt auch für eine einheitliche Markendarstellung und ein klares, professionelles Erscheinungsbild.

Best Practices für die optische Gestaltung

So, wie du in deinem Navigationsmenü zwischen den einzelnen Elementen Platz lassen solltest, sollte auch deine gesamte Website in einzelne Abschnitte unterteilt sein, die gut lesbar und verständlich sind. Da immer mehr Menschen von unterwegs aus auf Websites zugreifen, solltest du auf kompakte Inhalte setzen, die schnell abgerufen werden können. 

Verwendung von Abschnitten

Es kommt selten vor, dass eine Website von oben bis unten in einer einzigen Farbe gehalten ist. Das liegt daran, dass farbliche Unterbrechungen und andere Designelemente, die zwischen einzelnen Bereichen eingepflegt werden, den Kund:innen als visuelle Hilfe dienen, dass ein neuer Abschnitt beginnt. Diese optische Hierarchie sorgt für einen Fluss auf deiner Website, der die Besucher:innen beim Scrollen durch deine Website-Inhalte führt. Mit Squarespace ist es ganz einfach, diese visuellen Anhaltspunkte zu schaffen. Dazu kannst du deine Website mit verschiedenen Hintergrundfarben versehen, mit Schriftarten experimentieren und dynamische Medien hinzufügen. 

Ein Drag-and-Drop-Webdesign-Toolkit wie der Kreative Editor von Squarespace ist der Schlüssel dazu, einen einzigartigen Flow auf deinen Webseiten zu schaffen. Mit dem Kreativen Editor kannst du dein gewähltes Website-Template anpassen, indem du Abschnitte und Elemente auf einem Raster-Layout hinzufügst, entfernst und neu anordnest – ganz ohne Programmierung. Du kannst sogar damit spielen, dass sich die Elemente deiner Website überlappen oder bis an den Rand der Seite reichen, um deiner Website einen einzigartigen Look zu verleihen. 

Mit dem Kreativen Editor als Leinwand kannst du Abschnitte mit so viel visueller Vielfalt erstellen, wie du möchtest. Du kannst deine Website zum Beispiel dynamischer gestalten, indem du einen Scrolling-Block an einer beliebigen Stelle des Rasters einfügst. Das ist praktisch bei Texten, auf die du besonders aufmerksam machen möchtest, wie z. B. kurze Ankündigungen von neuen Produkten oder Angeboten. Für Abschnitte, die viel Text enthalten, wie z. B. eine FAQ-Liste, kannst du auch Elemente wie Akkordeon-Blöcke zu deinem Kreativen-Editor-Raster hinzufügen und anordnen. Diese Website-Blöcke klappen deinen Text ein und aus und sorgen dafür, dass Besucher:innen deine Inhalte problemlos überfliegen können und sich nur mit dem befassen müssen, was für sie relevant ist. 

Bessere Lesbarkeit durch Ränder

Auch wenn deine Website-Texte noch so verständlich sind, kann es sein, dass der Text in seiner Gesamtheit visuell überfordert. Bei der Gestaltung des Website-Layouts solltest du darauf achten, dass der Text nicht mehr als etwa 75 % der gesamten Seitenbreite einnimmt. Das entlastet die Augen deiner Kund:innen und trägt dazu bei, dass deine Botschaft komplett gelesen wird.

Textausrichtung

Bei der Ausrichtung des Textes auf deiner Website empfiehlt es sich, die Leserichtung der Besucher zu berücksichtigen. Die Ausrichtung deines Textes sollte sich zum Beispiel danach richten, ob die Sprache, in der du schreibst, von links nach rechts, von rechts nach links oder von oben nach unten gelesen wird. 

Bei Sprachen, die von links nach rechts geschrieben werden, wie beispielsweise Englisch oder Spanisch, lesen die Augen ganz automatisch von links nach rechts. Wenn deine Website also in einer von links nach rechts geschriebenen Sprache verfasst ist, solltest du das Layout deiner Website so gestalten, dass der Text links ausgerichtet ist. 

Für Sprachen, die in anderen Richtungen gelesen werden, wie beispielsweise Arabisch oder Hebräisch, gelten die gleichen Grundsätze. In diesen Fällen solltest du das Leseverhalten deiner Besucher berücksichtigen und den Text deiner Website von rechts nach links ausrichten.

Es gibt aber auch Ausnahmen. So kannst du beispielsweise eine große Überschrift auf der Seite zentrieren, um mehr Wirkung zu erzielen, oder einen Button-Text auf dem Button selbst zentrieren. In der Regel ist es aber so, dass die Anpassung der Absätze an das Leseverhalten deiner Besucher:innen für eine bessere Benutzerfreundlichkeit und eine längere Verweildauer auf deiner Website sorgt.

Die Bedeutung eines responsiven Designs

Kund:innen greifen regelmäßig sowohl über ihren Desktop als auch über mobile Geräte auf deine Website zu. Wenn deine Website nicht für jede Geräteart optimiert ist, können funktionale und visuelle Probleme deine Zielgruppe davon abhalten, deinen E-Mail-Newsletter zu abonnieren, deine Produkte zu kaufen oder einen Termin zu vereinbaren. 
Zum Glück verfügt jede Squarespace-Website über ein responsives Design, sodass du dir sicher sein kannst, dass deine Marke auf jedem Bildschirm korrekt angezeigt wird. Ein responsives Design stellt sicher, dass sich deine Website-Elemente jederzeit an die Bildschirmgröße deiner Besucher:innen anpassen, während alle wichtigen Elemente deines Website-Designs erhalten bleiben. Mit dem Raster des Kreativen Editors kannst du sogar ein mobiles Layout erstellen und bearbeiten, das vom Desktop-Layout deiner Website komplett unabhängig ist.

Beginne mit unserem Leitfaden zu den wichtigsten Phasen des Webdesigns

Dieser Beitrag wurde am 23. Januar 2023 aktualisiert.