Praktische Version der Marketing-Website-Webseitendesign-Techniken

Das Design einer Seite entscheidet direkt über die Nutzererfahrung beim Browsen. Worauf sollte man also beim Webdesign achten?

Dieser Artikel teilt praktische Techniken zur Verbesserung des Webdesigns. Ohne weitere Worte kommen wir direkt zum Inhalt.

1. Farbüberlagerung auf Fotos mit Text verwenden

Beim Webdesign muss man manchmal mit unansehnlichen Bildern umgehen. Versuchen Sie, sie als Hintergrundtextur statt als Hauptfokus zu behandeln, indem Sie Markenfarben auf halbtransparenten Einstellungen überlagern. Durch Erhöhung des Kontrasts wird der überlagerte Text besser lesbar. Im folgenden Beispiel wurde dem Text ein dunkelblauer Schatten hinzugefügt, um den Kontrast weiter zu verstärken.

Bild

2. Negative Räume nicht übermäßig nutzen

Designer scheinen negative Räume zu lieben, und viele online raten zu mehr davon. Aber wenn zu viel negativer Raum zwischen Elementen besteht, verlieren sich die Blicke in Leere, und die Verbindung zwischen den Elementen wird unterbrochen.

3. „Weniger ist mehr“

Viele Menschen haben keine Geduld, lange Textblöcke zu lesen, was bedeutet, dass Ihre Webseite nur wenig Zeit hat, Aufmerksamkeit zu erregen. Daher muss der Inhalt prägnant sein und Schwerpunkte hervorheben – „Weniger ist mehr“.

4. Auch textlastige Layouts benötigen visuelle Anziehungskraft

Die reinen Textbereiche einer Landing Page können schwer zu gestalten sein, besonders wenn keine Ressourcen für Optimierungen mit Illustrationen, Grafiken oder Fotos zur Verfügung stehen.

Hier können Markenfarben und Detailpräsentation genutzt werden, um die visuelle Wirkung zu verbessern.

5. Kleine Symbole, große Bilder

Symbole sind zwar wichtig, sollten aber angemessen präsentiert werden. Manche Elemente eignen sich besser als „Nebendarsteller“ – vergrößert wirken sie oft unharmonisch.

Wenn Symbole als „Nebendarsteller“ für Überschriften dienen, treten die Überschriftentexte stärker hervor und wirken ausgewogener.

6. Buchstabenabstände reduzieren

Es gibt viele Möglichkeiten, Buchstabenabstände für subtile Verbesserungen zu nutzen. Ohne viel Erfahrung sollte man bei Großschriftüberschriften leicht erhöhte Abstände verwenden. Zusätzliche Abstände in Kleinbuchstabentexten können jedoch Lesbarkeitsprobleme verursachen und den natürlichen Rhythmus der Schriftgestaltung stören.

7. Auf die Länge in FAQ-Abschnitten achten

FAQ-Abschnitte sind oft wichtige Bestandteile von Webseiten. Die optimale Zeilenlänge liegt zwischen 45 und 75 Zeichen, inklusive Leerzeichen und Satzzeichen.

8. Gesellschaftlichen Wert demonstrieren

In diesem Beispiel verbirgt sich die eigentliche Wertaussage in einem fast unbemerkten Untertitel.

Hier können echte Nutzergesichter hinzugefügt werden, um die Glaubwürdigkeit sozialer Beweise zu erhöhen.

9. Niemand mag zu kleine Schrift

In diesem Beispiel wurde mit responsivem Webdesign in CSS eine Haupttextgröße von 11px und Navigationslinks von 9px erstellt.

Die Standard-Browserschriftgröße von 16px gibt es seit 20 Jahren – moderne Bildschirmschriften sollten zwischen 18-20px liegen.

10. Die Drittelregel anwenden

Lassen Sie Seitenlayouts eine ungerade Anzahl von Elementen enthalten. Bei vier anzuzeigenden Punkten können zwei kombiniert werden, um drei Punkte zu zeigen.

Falls schwer umsetzbar, priorisieren Sie den wichtigsten Aspekt und entfernen den schwächsten.

Im folgenden Beispiellayout würden vier Punkte kognitiv überfordern.

11. Text möglichst kürzen

Verschmelzen und reduzieren Sie Textinhalte wo möglich. Schaffen Sie Größenkontraste zwischen Überschriften und Untertexten für visuelle Hierarchie. Bei viel Inhalt nutzen Sie negativen Raum für ein aufgeräumtes Erlebnis.

12. Helle Farben zur Hervorhebung nutzen

Großflächige helle Farben können Kontrastprobleme verursachen und den Fokus auf Textinhalte mindern. Bei kleineren Elementen wie Buttons sollte weißer Text möglichst vermieden werden.

13. Kontrast von Grautext prüfen

Grauer Text ist beliebt, um Hierarchien zwischen Textelementen zu schaffen. Oft fehlt jedoch ausreichender Kontrast, was die Lesbarkeit mindert. Nutzen Sie Online-Tools zur Kontrastprüfung. Für klarere visuelle Hierarchie können Sie Schriftgrößenkontraste erhöhen.

Dies sind 13 Techniken für Marketing-Website-Designs, die Ihnen hoffentlich weiterhelfen.