Für die Gestaltung und Erstellung von Webseiten also dem Webdesign existieren in der heutigen Zeit eine ganze Reihe von Gestaltungsregeln, welche einem Webdesigner das Leben deutlich erleichtern können.

Daher möchten wir im Folgenden einige dieser klassischen Regeln, die auf den Erkenntnissen von Designern und Benutzern beruhen, einmal etwas genauer vorstellen.

Klassische Regeln für die Gestaltung einer Webseite

Mit der Zeit, haben sich einige grundlegende Regeln etabliert, welche seitdem bei der Gestaltung von Webseiten berücksichtigt werden.

1. Symmetrie und Asymmetrie
   

   Im Bereich des Webdesigns spielt sowohl die Symmetrie, sowie auch die Asymmetrie mitunter eine wichtige Rolle. Während ein symmetrisches Design stets gleichmäßig aufgebaut ist und hierdurch sehr ruhig und in sich geschlossen bzw. rational wirken, sind asymmetrische Layouts deutlich interessanter. Zumeist werden asymmetrische Designs den menschlichen Lesegewohnheiten in unseren Breitengraden entsprechend, von links nach rechts angeordnet und erzeugen auf diese Weise Dynamik und Spannungen, können allerdings in manchen Fällen auch chaotisch wirken. Dagegen wirken symmetrische Designs oftmals eher ein wenig trist oder sogar langweilig. Die Asymmetrie stellte im Zuge der Design-Revolution, zwischen 1920 und 1930, einst ein zentrales Element dar.
   Heute hat sich für die Symmetrie und Asymmetrie die folgende Faustformel herauskristallisiert: Wenn die Effizienz auf einer Webseite eine Rolle spielt, dann sollte stets ein symmetrisches Design gewählt werden, da dies deutlich einfacher wahrgenommen wird und zudem deutlich ruhiger auf die jeweiligen Besucher der Webseite wirkt. Dagegen sollten Sie sich für eine asymmetrische Gestaltungsweise entscheiden, sofern Sie großen Wert auf eine spannende und interessante Komposition legen.
   So werden symmetrische Gestaltungen im Bereich des Webdesign besonders häufig für die Darstellung von Bildergalerien oder Portfolios verwendet, da hier die jeweiligen Bilder oder absolvierten Projekte im Mittelpunkt stehen sollen und der Nutzer nicht durch die Gestaltung abgelenkt werden soll.
   Nicht selten findet man heute im World Wide Web zudem auch Webseiten mit einer Mischung aus einem symmetrischen und asymmetrischen Elementen. So können zum Beispiel die Gestaltungselemente im oberen Bereich der Webseite symmetrisch angeordnet werden, während die Elemente im Content-Bereich darunter wiederum asymmetrisch gestaltet sind.

2. Die Drittelregel

   Wer sich bereits einmal mit der Fotografie beschäftigt hat, dem dürfte auch die sogenannte Drittelregel ein Begriff sein.
   Hierbei wird ein beliebiges Bild, horizontal und vertikal, in drei Bereiche unterteilt und in der Folge werden die relevanten Bildelemente in diesen Bereichen platziert.
   Dabei weist diese Regel durchaus einen Bezug zu dem sogenannten goldenen Schnitt auf, dem wir uns im Folgenden ebenfalls noch intensiver widmen werden, ist allerdings in der Praxis ein wenig einfacher anzuwenden.

3. Der Weißraum
   

   Als Weißraum bezeichnet man im Webdesign den Raum zwischen den verschiedenen vorhandenen Elementen auf dieser. Allerdings muss dieser Raum, der häufig auch als negativer Raum bezeichnet wird, keinesfalls immer weiß sein, was dennoch häufig der Fall ist.
   Dies hört sich nun im ersten Moment für den einen oder anderen zwar ein wenig unspektakulär an, ist es aber eigentlich gar nicht, denn der weiße Raum ist eines der wichtigsten Elemente auf jeder Webseite.
   Ohne diesen gäbe es nämlich überhaupt keine Formen oder Akzente auf der Webseite, die dazu in der Lage wären etwas auszusagen oder die Benutzer zu leiten.
   Zudem gibt es auch verschiedene Abstufungen des Weißraums, wie unter anderem den Makro-Weißraum, wie der Raum zwischen Hauptelementen wie Headern oder Blöcken genannt wird. Dagegen wird der Raum zwischen den einzelnen Detail-Elementen auf einer Webseite als Mikro-Weißraum bezeichnet, wie zum Beispiel der Raum zwischen einem Bild und dessen Unterzeile genannt wird. Dieser Mikro-Weißraum spielt allerdings im Bereich der Typografie eine deutlich wichtigere Rolle, weshalb sich Webdesigner in der Regel auf die Gestaltung des Makro-Weißraums beschränken.
   Ein solcher Raum kann, im Zusammenspiel mit hochwertigen Bildern und einer passenden Schriftart mitunter äußerst edel wirken und eine Marke sogar deutlich aufwerten. Denn dies wirkt auf einer Webseite in den meisten Fällen äußerst großzügig und luxuriös.
   Dagegen können zu viele Gestaltungselemente eine Webseite sogar überladen, was später von den Besuchern im schlechtesten Fall als billig und wenig ansprechend wahrgenommen werden könnte. Dies kann jedoch besonders in Branchen, in denen ein erbitterter Preiskampf herrscht, ebenfalls durchaus eine Möglichkeit darstellen, um die jeweilige Webseite mit wenig weißem Raum zu gestalten.

Die wichtigsten Forschungserkenntnisse aus der Nutzerforschung

Besonders in den vergangenen Jahren hat die Wissenschaft einige wichtige Erkenntnisse darüber gewinnen können, wie sich die Besucher auf einer Webseite verhalten. Und diese Erkenntnisse aus der Nutzerforschung können einem bei der Gestaltung einer Webseite ebenfalls von großem Nutzen sein.

Grundsätzliches zur Aufmerksamkeit im WWW

Wenn man eine Webseite gestaltet, dann sollte man stets verinnerlichen, dass kein bestimmter Automatismus in Bezug auf den Blickverlauf eines Menschen existiert. Ganz im Gegenteil, es lassen sich nämlich sogar gewaltige Unterschiede in den Rezeptionsmustern beobachten, wobei verschiedene Faktoren eine Rolle spielen.

Zum einen wird durch eine Webseite selbst beeinflusst, was die Besucher dort als erstes wahrnehmen. Hierzu dienen unter anderem verschiedene Farben, weiße Räume oder leere Flächen und auch die Größe, Position oder Bewegung der vorhandenen Gestaltungselemente. Oftmals werden diese Dinge auch mit dem Fachbegriff „Salienz“ bezeichnet, womit gemeint ist, dass ein Objekt auf einer Webseite hervorgehoben wird.

Jedoch haben immer auch die Besucher auf einer Webseite selbst, sowie zudem auch deren Interessen einen großen Einfluss darauf, was diese als erstes auf dieser wahrnehmen. Deshalb sind Aufmerksamkeitsmuster stets davon Abhängig, bei wem es sich bei den Benutzern handelt und welche Ziele diese mit ihrem Besuch auf einer Webseite verfolgen. Es gibt also im Grunde genommen keine feste Regel die besagt: „Mache dies, dann tut der Besucher das“, ganz so einfach läuft das Ganze dann doch nicht. Vielmehr sollte der Designer einer Webseite versuchen das Interesse der Benutzer, durch verschiedene Gestaltungselemente, auf die relevanten Inhalte zu lenken.

Dennoch liegt es schlussendlich immer an dem Besucher und dessen Interessen, welche den Ausschlag geben, ob dieser sich die jeweiligen Inhalte in der Folge auch wirklich anschaut oder diese links liegen lässt. Und daran kann in diesem Fall dann auch die beste Gestaltung einer Webseite nur äußerst wenig ändern.

F-Muster

Bei dem sogenannten F-Muster handelt es sich um eine Tendenz in Bezug auf das Verhalten der Besucher einer Webseite, bei der die Anwender die vorhandenen Inhalte auf einer Webseite zunächst waagerecht im oberen Bereich durchsuchen, wonach diese mit Ihrem Blick ein wenig herunter, bis zu dem nächsten relevanten Inhalt schweifen und auch dort von links nach rechts, nach den für sie interessanten Inhalten suchen und schauen dann schließlich im linken Bereich, ebenfalls nach unten, nach den dortigen relevanten Inhalten.

Dieses Muster kann selbstverständlich, je nach Besucher, mehr oder weniger stark vorhanden sein und zudem auch unterschiedlich oft wiederholt werden, dennoch lassen sich auch hieraus einige Gestaltungsregeln für die Gestaltung einer Webseite ableiten.

So sollten die relevantesten Inhalte immer möglichst weit oben stehen, weshalb es durchaus sinnvoll sein kann, Zentrale Aussagen, bereits zu Beginn zu treffen. Außerdem gehen die Besucher auf einer Webseite die dortigen Inhalte nicht der Reihe nach durch, sondern Suchen vielmehr auf dieser nach visuell auffälligen Elementen, die deren Interesse wecken.

Die Analyse der Aufmerksamkeitsmagnete

Wer sich mit der Gestaltung von Webseiten beschäftigt, der kann zudem auch mit der Hilfe von Aufmerksamkeitsmagneten versuchen, das Interesse der Besucher zu beeinflussen. Allerdings hängen diese Aufmerksamkeitsmagnete immer von einer Reihe von Faktoren ab, welche im gemeinsamen Zusammenspiel für eine Salienz sorgen.

• Position: Die Position, an der sich ein Element auf einer Webseite befindet, ist von äußerst großer Relevanz.
• Größe und Betonung: Nicht nur die Position eines Elements spielt eine große Rolle bei der Erschaffung von Aufmerksamkeitsmagneten, sondern auch die Gestaltung und Größe von diesen.
• Relation: Zudem sollte man auch immer berücksichtigen, dass sämtliche Elemente auf einer Webseite immer im Verhältnis zu anderen Seitenelementen stehen und diese den Besuchern daher deutlich schneller ins Auge springen, wenn diese sich von ihrer Umgebung deutlich abheben. Denn dies verstärkt in der Regel das Interesse der Besucher an dem jeweiligen Inhalt auf einer Webseite.Und nicht zuletzt spielen bei der Gestaltung von Gestaltungsmagneten immer auch die Typografie, Farben, Bewegungen und Interaktionen eine wichtige Rolle.

Folder – Hürden bei der Gestaltung von Webseiten

Als Viewport bezeichnet man den sichtbaren Bereich auf einer Webseite und sollten sich einmal mehr Inhalte auf der Webseite befinden, so haben Besucher die Möglichkeit auf dieser herunterzuscrollen und auf diese Weise den Viewport zu verändern.

Doch machen sich die Besucher auf einer Webseite in der heutigen Zeit überhaupt noch diese Mühe? Besonders in den frühen Tagen des World Wide Web wurde diese Frage noch häufig verneint, woraus sich lange Zeit die Gestaltungsregel ableitete, dass sämtliche wichtigen Elemente auf einer Webseite sich stets in dem sichtbaren Bereich auf dieser befinden müssen.

Allerdings findet diese Regel zumeist im Print-Design Verwendung, wohingegen die Besucher einer Webseite, im Gegensatz zu den Lesern einer Tageszeitung, nicht absehen können, was sich in dem nicht sichtbaren Bereich auf einer Webseite befindet.

Und heutige Erkenntnisse deuten zudem auch eher darauf hin, dass sich Menschen an der herunterscrollen im Internet mittlerweile gewöhnt haben. Dennoch kann man auch heute noch oftmals feststellen, dass Inhalte die sich im oberen Bereich auf einer Webseite befinden, deutlich mehr Aufmerksamkeit erhalten wie Inhalte darunter. Daher sollte man die Besucher auch innerhalb des sichtbaren Bereichs auf einer Webseite dazu animieren, auf dieser herunterzuscrollen.

Das Scrollen und andere Effekte auf einer Webseite

Moderne Effekten für die Gestaltung von Webseiten, so wie beispielsweise das Parallax Scrolling, gleichen mitunter einer richtigen Kunstform. So bewegen sich hierbei die unterschiedlichen Elemente auf einer Webseite beim runterscrollen in einer anderen Geschwindigkeit und bilden auf diese Weise immer wieder wechselnde Überlagerungen ab.

Das Scrolling lässt sich auf einer Webseite allerdings zudem auch dafür nutzen, um die Inhalte auf dieser interessanter darzustellen. Dieser Trend wird dabei oftmals als Scrollytelling bezeichnet.

Doch auch für Paralax Effekte gilt die Regel: Weniger ist in den meisten Fällen mehr und vor allem darf die Benutzererfahrung der Besucher nicht durch solche Effekte beeinträchtigt werden.

Auf die richtige Art und Weise können derartige Effekte allerdings auch zu der Entstehung einer kreativen Webseite beitragen, auf der sich die Besucher mit Sicherheit wohlfühlen werden.

Das Infinite Scrolling

Bei dem sogenannten Infinite Scrolling handelt es sich um eine Methode, bei der das Scrollen für die Besucher einer Webseite nahezu niemals endet, denn sobald man am unteren Bereich der Webseite angelangt ist, werden in der Folge stetig weitere Inhalte geladen, ohne dass man hierfür aktiv etwas tun muss.

So kann diese Methode eine sehr effiziente Möglichkeit dafür darstellen, um Zugang zu weiteren Informationen zu erhalten, ohne dass die Besucher hierzu erst auf einen Button klicken müssen, da diese Inhalte ohne Zutun von diesen nachgeladen werden.

Dies macht vor allem Sinn bei solchen Webseiten, die über eine große Menge an Content verfügen, welcher die Besucher dazu einlädt immer etwas Neues zu entdecken.

Jedoch hat diese Methode allerdings auch einige Nachteile, da hierdurch unter anderem das gezielte Ansteuern von Inhalten erschwert wird und durch den Scrollbalken zudem keine sinnvolle Auskunft über die Position und Gesamtlänge der vorhandenen Inhalte vermittelt wird.

Außerdem trägt diese Methode in manchen Fällen sogar dazu bei, dass Inhalte oder Links, die sich in dem Footer befinden, nicht mehr erreicht werden können, da diese ständig weiter nach unten geschoben werden. Aus diesem Grund sollte man den Footer auf Webseiten, welche diese Methode verwenden, auch immer mit dem CSS-Style „position:fixed;“ am unteren Ende der Webseite fixieren oder ganz einfach komplett auf diesen verzichten.

Die Verwendung von Klickstrecken

Eine Alternative zu dem runterscrollen auf einer Webseite stellt seit jeher das Klicken dar, weshalb Inhalte auf Webseiten den Besuchern auch in Form von Klickstrecken präsentiert werden können.

Hierbei werden die verfügbaren Inhalte auf mehrere Seiten aufgeteilt, durch welche sich die Besucher im Anschluss durchklicken können.

Jedoch sollte man hierbei immer berücksichtigen, dass ein Klick stets eine bewusste Entscheidung des jeweiligen Besuchers voraussetzt, wofür ein höherer kognitiver Aufwand benötigt wird, als beim Herunterscrollen auf einer Webseite.

Allerdings kann das Verteilen von Inhalten auf einer Webseite auch einige Vorteile mit sich bringen, da so eine klare Content-Struktur geschaffen wird und die Inhalte zudem auch gezielt angesteuert werden können.

Psychologische Effekte im Webdesign

Wohl jeder Webdesigner würde mit Sicherheit nur allzu gerne einmal in die Köpfe der Besucher auf dieser hineinschauen können. Doch auch ohne diese Möglichkeit existieren in der heutigen Zeit eine Reihe von Erkenntnissen darüber, wie die Gestaltung einer Webseite auf deren Besucher wirkt.

Überraschungen

Eine positive Überraschung kann auch auf einer Webseite im Internet mitunter ein gutes Gestaltungselement darstellen, da die Emotionen der Besucher auf diese Weise für einen kurzen Moment komprimiert werden.

So freuen sich Menschen beispielsweise sehr darüber, wenn diese einen Bekannten auf der Straße treffen, wobei die Freude über das Wiedersehen einen zumeist völlig unerwartet überkommt.

Und ganz ähnlich können Überraschungen auch auf einer Webseite eingesetzt werden, um den Besuchern einen kurzen Moment der unerwarteten zu bescheren. Auf diese Weise ist das Gehirn in diesem Moment nämlich dazu gezwungen eine bestimmte Situation, innerhalb eines kurzen Zeitraums, neu zu bewerten, was die Neugierde der Besucher anregt.

Die Richtung aus psychologischer Sicht

Auch die Richtung kann für den Eindruck von einer Form von entscheidender Bedeutung sein. Ist diese beispielsweise nach oben hin geschlossen, so kann man diese in etwa mit Schutz gleichsetzen. Eine nach oben hin offene Form wirkt dagegen eher schutzlos und die Dualität von links und rechts wird zumindest im westlichen Kulturkreis zumeist stark mit Anfang und Ende assoziiert, was auch den in diesem Kulturkreis üblichen Schreibgewohnheiten geschuldet sein dürfte.

Diese Regeln sollte man dabei besonders dann beachten, sofern man auf einer Webseite einen Prozess darstellen möchte.

Trennen und Verbinden von Formen

Wie ein Mensch eine Form interpretiert hängt in der Regel auch davon ab, in welchem Zusammenhang diese mit anderen Formen steht.

Durch überlappende Bereiche kann so unter anderem der Eindruck erweckt werden, dass verschiedene Elemente zusammengehören, während geschlossene Forme wie eine Abtrennung zwischen verschiedenen Bereichen wirken.

Die Neugier der Besucher anregen

Auch die Neugier der Besucher auf einer Webseite sollte sich der Webdesigner stets zunutze machen und die dortigen Inhalte so gestalten, dass diese die Neugier der Besucher wecken. So können beispielsweise Unschärfeeffekte dazu verwendet werden, um die Nutzer neugierig zu machen, was sich im Hintergrund einer Grafik verbirgt.

Dies führt in der Folge bei einem Teil der Besucher mit Sicherheit dazu, dass diese alles daransetzen werden, um mehr darüber zu erfahren, wobei diese dann gezielt zu den relevanten Inhalten auf der jeweiligen Webseite weitergeleitet werden können.

Daher sollte man immer versuchen die Neugier der Besucher auf einer Webseite soweit anzuregen, dass sich diese danach mit großer Freude den weiteren Inhalten auf dieser widmen.

Denn nur dann kann man nämlich auf Dauer auch fest davon ausgehen, in Zukunft noch viele weitere Besucher auf der jeweiligen Webseite begrüßen zu dürfen, da man bereits weiß, dass die dortigen Inhalte sich dafür eignen, um das Interesse von diesen auf sich zu ziehen.