Designtipps zur Gestaltung Ihrer Webseite mit LivePages


Die Popularität und der Erfolg Ihrer Webseite hängen von vielen unterschiedlichen Faktoren ab. Ein nicht unerheblicher Faktor ist das Design und die Benutzerfreundlichkeit Ihrer Webseite. Daher ist es sinnvoll, sich hier bereits vor dem gestalten der Seite einige grundlegende Gedanken über das Design und die Menüführung zu machen. Behalten Sie dabei auch immer die gewünschte Zielgruppe Ihrer Seite im Blickfeld und versuchen Sie Ihre Seite auch aus dem Blickwinkel Ihres Besuchers zu betrachten.

Bei der Gestaltung Ihrer Webseite ist eine gewisse Konsequenz ratsam. Legen Sie sich daher vor dem erstellen Ihrer Webseite einige persönliche Designrichtlinien (Styleguide) fest. Diese bedeutet, dass Sie sich beispielsweise hinsichtlich der verwendeten Schriftart und Schriftgröße festlegen und diese einheitlich auf allen Seiten verwenden. Die folgenden Punkte verstehen sich als Empfehlung müssen von Ihnen nicht umgesetzt werden, die grafische Gestaltung Ihrer Seite obliegt Ihnen selbst. 


Schrift

Wie eingangs erwähnt ist bei der Gestaltung Ihrer Webseite eine gewisse Konsequenz ratsam. In Bezug auf die Schrift Ihrer Webseite bedeutet dies, dass Sie auf all Ihren Unterseiten, in puncto Schriftgröße, Schriftart und Schriftfarbe einen einheitlichen Stil verwenden. Beschränken Sie die Verwendung unterschiedlicher Schriftarten auf ein bis zwei.

Verwenden Sie eine allgemein übliche Schriftart. Häufig finden die Schriftarten Arial, Times New Roman und Verdana im Internet Verwendung, da diese Schriftarten auf nahezu allen Rechnern installiert sind, ist eine fehlerfreie Darstellung gewährleistet.  Würden Sie eine Schriftart wählen, welche zwar auf Ihrem, nicht aber auf dem Rechner des Webseitenbesuchers installiert ist, kommt es zu einer fehlerhaften Darstellung der Schrift.

Auch sollten keine schwer lesbaren, verschnörkelten Schriftarten, verwendet werden. Dies führt im allgemeinen dazu, dass der Besucher Ihrer Webseite Ihre Texte nicht zu Ende liest oder nur oberflächlich überfliegt.

Diese Schriftarten stehen Ihnen innerhalb von LivePages zur Verfügung.


Nach der Auswahl einer geeigneten Schriftart ist es nun Zeit sich Gedanken über die verwendete Schriftgröße zu machen. Hier sollte weder eine extrem große, noch extrem kleine Schriftgröße gewählt werden. Das lesen von sehr kleinen Schriftarten wird von vielen Webseitenbesuchern als anstrengend empfunden und  wird dazu führen, dass Ihre Webinhalte weniger gelesen werden. Für den Text Ihrer Webseite sollten Sie daher eine Schriftgröße zwischen 12 und 16 Punkten, für Überschriften eine etwa 2-4 Punkten größere Darstellung wählen. Innerhalb von LivePages können Sie die Schriftgröße über das Bearbeitungsmenü festlegen, die Auswahl der Schriftgröße 12 entspricht der Auswahl von 12 Punkten.

Beispiele für Schriftgrößen in der Schriftart Verdana


Die Wahl der Schriftfarbe ist abhängig von der gewählten Hintergrundfarbe, generell sollten Sie hier auf gute Lesbarkeit achten und die Schriftfarbe passend zum Hintergrund wählen. Beachten Sie in diesem Zusammenhang bitte auch den Punkt: "farbliche Gestaltung Ihrer Webseite".

Achten Sie darauf, dass im Sinne eines einheitlichen und professionellen Erscheinungsbilds Ihrer  Webseite auf allen Unterseiten das Schriftbild identisch gewählt wird. Seien Sie sparsam in der Verwendung von Stilmitteln wie Fett- oder Kursivschrift. Nutzen Sie diese beispielsweise um Besonderheiten im Text herauszustellen.

Die Auswahl der Schriftart und die Festlegung der Größe und Farbe nehmen Sie innerhalb von LivePages unter dem Menüpunkt 4. Inhalte vor. Ihnen stehen im Bearbeitungsmenü verschiedene Optionen zur Verfügung.

 

Farbliche Gestaltung Ihrer Webseite

Wählen Sie die Farben für Ihre Webseite mit Bedacht aus. Ein Webseitenbesucher bewertet in der Regel innerhalb der ersten Sekunden Ihre Webseite und entscheidet ob er sie weiterhin betrachtet. Ein grelles Farbenspiel kann dazu dienen kurzfristig Aufmerksamkeit zu erregen, wird aber kaum dazu führen, dass der Webseitenbesucher länger auf Ihrer Webseite verweilt.

Wählen Sie daher keine zu hellen, grelle Farben, die wenigsten Webseitenbesucher haben Vergnügen daran eine Webseite in beispielsweise neongrün oder pink aufzurufen. Auch nach längerem lesen oder betrachten Ihrer Webseite sollte sich keine Farbe aufdrängen. Achten Sie auch auf den Kontrast zwischen Schriftfarbe und dem gewähltem Hintergrund. Die Schrift muss auf dem gewählten Hintergrund noch gut lesbar sein und sich von diesem abzeichnen.

Bedenken Sie bitte auch, dass es unter Ihren Webseitenbesuchern auch einige mit einer Farbschwäche geben könnte. Daher sollten Rot/Grün Kontraste generell vermeiden werden.

Verwenden Sie daher als Hintergrund eine möglichst neutrale, wenig aufdringliche, auch bei längerer Betrachtung augenfreundliche Farbe. Im Sinne eines einheitlichen Erscheinungsbildes empfiehlt es sich auch bei der Farbgebung diese auf allen Unterseiten identisch zu gestalten. Vermeiden Sie die Verwendung eines Bildes als Hintergrundgrafik, da sich oftmals durch den Farbverlauf eines Bildes eine teilweise schlechte Lesbarkeit des Textes ergibt.


Innerhalb von LivePages haben sie die Möglichkeit sich die verfügbaren Designs nach Farben sortiert anzeigen zu lassen. In der Designauswahl unter dem Menüpunkt 2. Designwählen Sie dazu die Option „nach Farbe“. Über die Schaltflächen „vorheriges“ und „nächstes“ können Sie dann zusätzlich weiterschalten.

 


Die Wahl der Schriftfarbe nehmen Sie innerhalb von LivePages über den Menüpunkt 4. Inhalte vor, dort steht Ihnen der Punkt Textfarbe zur Verfügung.


Der Aufbau Ihrer Webseite

  Bevor Sie mit dem Erstellen Ihrer Webseite beginnen, ist es sinnvoll sich Gedanken darüber zu machen wie Sie Ihre Webseite organisieren möchten. Hierzu gehört beispielsweise die Menüführung Ihrer Seite. Entscheiden Sie welche Menüpunkte Ihnen wichtig sind und welche Sie mit Inhalt füllen können. Es ist sinnvoller mit 10 Menüpunkten zu arbeiten unter denen Sie auch Inhalt für Ihren Webseitenbesucher anbieten, als mit 50 Menüpunkten hinter denen sich jeweils nur zwei Zeilen verbergen. Eine gut durchdachte Navigationsstruktur hilft den Besuchern sich auf Ihrer Seite zurechtzufinden. Binden Sie wichtige Inhalte in Ihrer Menüstruktur auf der ersten Ebende ein und verstecken Sie diese nicht auf Unterseiten.

Hinterlassen Sie keine leeren Seiten. Dies wirkt auf viele Webseitenbesucher wenig vertrauenerweckend und hinterlässt einen unprofessionellen Eindruck. Bei der Gestaltung Ihrer Webseite mit LivePages haben Sie die Möglichkeit unfertige Seiten zunächst auszublenden. Dies können Sie ganz einfach über den Menüpunkt 3. Gliederung vornehmen. Klicken Sie die gewünschte Seite dort mit der rechten Maustaste an und wählen Seite ausblenden an. Die Seite wird dann nicht mehr angezeigt. Sobald Sie die Seite mit Inhalt füllen möchten, können Sie diese auf dem gleichen Wege wieder einblenden lassen.

 


Sofern Sie auf einer Seite viel Text unterbringen möchten, lockern Sie diesen auf. Eine Webseite welche auf den ersten Blick nur aus einem langen Text besteht lädt Besucher dazu ein diese zu überspringen. Webseitenbesucher suchen Informationen schnell und in komprimierter Form, lange Texte werden selten intensiv gelesen.

Lockern Sie lange Texte daher mit Bildern, Absätzen und Überschriften auf. Durch das entzerren eines langen Textes wirkt dieser weniger überwältigend für den Besucher und er wird diesen eher lesen als eine reine Textseite. Nutzen Sie aussagekräftige Überschriften um Absätze zu trennen und den Besucher neugierig auf den weiteren Text zu machen. Schreiben Sie Ihre Texte in einfacher Form, der Leser hat möglicherweise geringere Kenntnisse über das jeweilige Thema als Sie selbst. Vermeiden Sie die daher auch die Verwendung von erklärungsbedürftigen Fach- oder Fremdwörtern und schreiben stattdessen einfach und verständlich.


Verwenden von Fotos und Videos

Fotos und Videos können Sie wie im vorangegangen Punkt beschrieben gut verwenden um Texte aufzulockern. Beim Einstellen von Fotos und Videos empfiehlt es sich die Größe und das Format der jeweiligen Datei im Blick zu behalten und gegebenenfalls webseitenfreundlicher zu gestalten. Originalfotos von Digitalkameras beispielsweise sind aufgrund der Auflösung und der damit verbunden Dateigröße nicht geeignet um direkt in eine Webseite eingebunden zu werden. Ein einzelnes Foto kann hier durchaus eine Größe von mehreren Megabyte haben. Dies kann beim abrufen Ihrer Webseite zu Verzögerungen führen und der Besucher muss warten bis er diese betrachten kann.

Gegenüberstellung der Dateigröße verschiedener, nicht optmierter Bilder im Vergleich zu einem optimierten Bild.


Daher ist es sinnvoll Bilder für die Anwendung auf einer Internetseite zu optimieren. Dies bedeutet, dass die Größe des Bildes und das Dateiformat angepasst werden. Zur Nutzung innerhalb von LivePages können Sie die Bildformate .gif, .jpg und .png verwenden, in Verbindung mit einer entsprechenden Bildgröße lässt sich die Größe eines einzelnen Bildes auf wenige KB reduzieren.

Ähnlich verhält sich dies beim Einstellen von Videos. Hier macht es wenig Sinn, ein Video in HD-Qualität einzustellen wenn dieses dann in geringer Pixelanzahl eingebunden wird. Auch hier ist es sinnvoller das Video zu optimieren und so für kurze Ladezeiten zu sorgen.

Hinweis Die Größe Ihrer verwendeten Bilder können Sie direkt im LivePages Mediapool einsehen.

Der Qualitätsverlust und der Speicherbedarf sollten bei der Reduzierung in einem ausgewogenem Verhältnis stehen. Viele Bildbearbeitungsprogramme bieten hier bereits eine automatisierte Funktion um Bilder für die Verwendung auf einer Homepage zu optimieren.

Weboptimierte Bilder können Sie mittels Adobe Photoshop / Adobe Photoshop Elements über diese Option erstellen.

Auf der Startseite, also der Seite die als erstes angezeigt wird wenn Sie Ihre Domain aufrufen, sollten Sie auf große Bilder und Grafiken verzichten. Hierdurch erreichen Sie, dass diese Seite schnell angezeigt wird. Lange Wartezeiten beim Aufrufen der ersten Seite wird von vielen Besuchern nicht in Kauf genommen. 


In den nachfolgend genannten Artikeln finden Sie weiterführende Informationen die Ihnen den Einstieg mit unserem Homepage-Baukastensystem LivePages vereinfachen:

Beachte auchLivePages: Schnellstart als PDF
Beachte auchWas ist der LivePages MediaPool?
Beachte auchWie kann ich in LivePages meine Hauptgrafik selbst erstellen?
Beachte auchWelche Möglichkeiten zur Layout-Gestaltung meiner Seiten stehen mir in LivePages zur Verfügung?

 

War dieser Artikel hilfreich?    Ja / Nein