Lernziel
Lernziel
Nach diesem Kapitel können Sie:
- Abstände in Wix Studio richtig einsetzen
- Weißraum bewusst nutzen
- Inhalte sauber ausrichten
- Design-Hierarchien verstehen
- überladene Bereiche vermeiden
- eine hochwertige Optik erzeugen
- häufige Layoutfehler erkennen und beheben
Warum wichtig
Warum wirken manche Websites hochwertig?
Viele Unternehmer glauben, hochwertige Websites benötigen:
- Animationen
- Videos
- besondere Effekte
In Wirklichkeit entsteht Professionalität häufig durch etwas viel Einfacheres:
Ordnung.
Professionelle Websites sind leicht verständlich.
Besucher erkennen sofort:
- Wo beginne ich?
- Was ist wichtig?
- Was soll ich als Nächstes tun?
Was ist Weißraum?
Weißraum bedeutet nicht, dass Bereiche tatsächlich weiß sein müssen.
Gemeint ist der freie Platz zwischen einzelnen Elementen.
Zum Beispiel zwischen:
- Überschriften
- Bildern
- Buttons
- Texten
- Abschnitten
Freiraum sorgt dafür, dass Inhalte besser wahrgenommen werden.
Warum wichtig
Warum Weißraum wichtig ist
Freier Platz hilft dem Besucher dabei,
Mehr Inhalte bedeuten nicht automatisch mehr Informationen.
Der häufigste Fehler
Viele Unternehmen möchten jeden freien Bereich nutzen.
Das Ergebnis:
- Texte kleben an Bildern
- Buttons stehen direkt unter Absätzen
- Bereiche wirken überladen
- Besucher fühlen sich schnell überfordert
Professionelles Design bedeutet häufig:
Mut zum Freiraum.
Abstände verstehen
Es gibt verschiedene Arten von Abständen.
Innenabstand (Padding)
Der Abstand innerhalb eines Containers.
Beispiel:
┌────────────────────────────┐
│ │
│ Überschrift │
│ │
└────────────────────────────┘
Padding sorgt dafür, dass Inhalte nicht am Rand kleben.
Außenabstand (Margin)
Der Abstand zwischen zwei Elementen.
Beispiel:
Überschrift
(Abstand)
Text
(Abstand)
Button
Margin trennt Inhalte voneinander.
Warum wichtig
Warum einheitliche Abstände wichtig sind
Vergleichen Sie:
Variante A
20 Pixel
40 Pixel
15 Pixel
70 Pixel
30 Pixel
Alles wirkt zufällig.
Variante B
40 Pixel
40 Pixel
40 Pixel
40 Pixel
Die Website wirkt sofort ruhiger.
Design-Hierarchie
Nicht alle Inhalte sind gleich wichtig.
Ein Besucher sollte sofort erkennen:
1. Hauptüberschrift 2. Unterüberschrift 3. Beschreibung 4. Button Diese Reihenfolge entsteht nicht nur durch Schriftgrößen.
Auch Abstände spielen eine wichtige Rolle.
Inhalte gruppieren
Elemente, die zusammengehören, sollten näher beieinander stehen.
Beispiel:
Überschrift
Beschreibung
Button
Danach folgt ein größerer Abstand zum nächsten Abschnitt.
Dadurch erkennt der Besucher automatisch Zusammenhänge.
Ausrichtung
Professionelle Websites arbeiten mit klaren Linien.
Elemente sollten:
Unterschiedliche Ausrichtungen wirken schnell unruhig.
Symmetrie
Menschen empfinden symmetrische Layouts oft als angenehmer.
Das bedeutet nicht, dass jede Website exakt gespiegelt sein muss.
Wichtiger ist eine ausgewogene Verteilung der Inhalte.
Konsistenz
Nutzen Sie dieselben Abstände auf der gesamten Website.
Zum Beispiel:
Zwischen Überschrift und Text:
32 Pixel
Zwischen Text und Button:
24 Pixel
Zwischen Abschnitten:
80 Pixel
So entsteht ein harmonischer Gesamteindruck.
Weißraum auf Smartphones
Gerade auf kleinen Bildschirmen ist genügend Abstand besonders wichtig.
Zu eng platzierte Elemente erschweren:
- das Lesen
- das Scrollen
- das Antippen von Buttons
Kontrollieren Sie daher jede Seite zusätzlich in der mobilen Ansicht.
Best Practice
Web by David Best Practice
Bei jedem Projekt definieren wir ein festes Abstandssystem.
Dadurch entstehen:
- saubere Layouts
- konsistente Seiten
- einfachere spätere Änderungen
Ein festes System spart langfristig Zeit und sorgt für ein professionelles Erscheinungsbild.
Aus der Praxis
Verkaufspsychologie
Ein aufgeräumtes Layout vermittelt Ruhe und Kompetenz.
Besucher müssen weniger nachdenken.
Dadurch bleibt mehr Aufmerksamkeit für Ihre Inhalte und Ihr Angebot.
Je einfacher eine Website zu erfassen ist, desto größer ist die Wahrscheinlichkeit einer Kontaktaufnahme.
Aus der Praxis
Expertenwissen
Das menschliche Gehirn gruppiert Informationen automatisch.
Elemente mit geringem Abstand werden als zusammengehörig wahrgenommen.
Dieses Prinzip stammt aus der Gestaltpsychologie und wird im professionellen Webdesign gezielt genutzt, um Inhalte verständlich zu strukturieren.
Häufige Fehler
Häufige Fehler
Zu wenig Abstand
Alles wirkt zusammengedrückt.
Unterschiedliche Abstände
Das Layout wirkt unruhig.
Zu große Leerflächen
Besucher müssen unnötig weit scrollen.
Keine Ausrichtung
Texte, Bilder und Buttons stehen nicht auf einer Linie.
Überfüllte Bereiche
Zu viele Informationen konkurrieren um Aufmerksamkeit.
Profi-Tipp
Profi-Tipp
Zoomen Sie Ihre Website auf etwa 25 % heraus oder betrachten Sie sie auf einem großen
Bildschirm.
Sie erkennen dann sofort:
- unruhige Bereiche
- ungleichmäßige Abstände
- fehlende Struktur
Designer nutzen diesen Trick häufig, um Layoutprobleme schneller zu entdecken.
Aus der Praxis
Praxis aus unserem Agenturalltag
Viele Kunden möchten nachträglich weitere Inhalte ergänzen.
Unsere Empfehlung:
Fügen Sie nicht einfach neue Elemente hinzu.
Überlegen Sie zuerst:
- Gehört die Information wirklich auf diese Seite?
- Passt sie in einen bestehenden Abschnitt?
- Oder sollte ein neuer Abschnitt erstellt werden?
So bleibt Ihre Website übersichtlich und wächst kontrolliert mit Ihrem Unternehmen.
Checkliste
Checkliste
Praxisaufgabe
Praxisaufgabe
Öffnen Sie Ihre Startseite.
Prüfen Sie jeden Abschnitt.
Beantworten Sie folgende Fragen:
- Sind die Abstände gleichmäßig?
- Gibt es Bereiche, die überladen wirken?
- Können Inhalte besser gruppiert werden?
- Ist genügend Freiraum vorhanden?
Optimieren Sie mindestens einen Abschnitt.
Mini-Projekt
Mini-Projekt
Wählen Sie eine beliebige Unterseite Ihrer Website.
Analysieren Sie:
- Abstand zwischen Überschrift und Text
- Abstand zwischen Bild und Text
- Abstand zwischen einzelnen Abschnitten
- Position der Buttons
Versuchen Sie anschließend, alle Abstände nach einem einheitlichen System zu vereinheitlichen.
Wissenscheck
Quiz
Was versteht man unter Weißraum?
Welchen Zweck erfüllt Padding?
Warum sollten zusammengehörige Inhalte nah beieinander stehen?
Warum wirken einheitliche Abstände professioneller?
Zusammenfassung
Kapitelzusammenfassung
Sie haben gelernt:
- wie Weißraum die Wirkung einer Website verbessert,
- welche Rolle Padding und Margin spielen,
- wie Sie Inhalte sinnvoll gruppieren,
- warum konsistente Abstände Professionalität vermitteln,
- und wie Sie typische Layoutfehler vermeiden.
Ausblick
Vorschau auf Kapitel 12
Responsive Design – Perfekte Darstellung auf Desktop, Tablet & Smartphone
In diesem Kapitel lernen Sie, wie Wix Studio automatisch auf verschiedene Bildschirmgrößen reagiert und welche Anpassungen Sie selbst vornehmen können. Sie erfahren, warum heute der Großteil der Besucher über Smartphones auf Websites zugreift, wie Sie mobile Layouts optimieren und welche Fehler besonders häufig zu einer schlechten Nutzererfahrung führen. Dieses Kapitel zählt zu den wichtigsten der gesamten Academy, da eine hervorragende mobile Darstellung heute entscheidend für Benutzerfreundlichkeit, Vertrauen und Conversion ist.