Art-Direction, Webdesign und Grafiker / Strategie, Kunst und Design

Blog

Web Design

Die Theorie von gutem Webdesign 1 (Layout)

Ein Artikel von .

Die Theorie von gutem Webdesign

Gutes Webdesign ist ein komplexes Thema. Es hat mit Erfahrung, Gespür und Kentniss der elementaren Design-Grundlagen zu tun. Nachfolgend möchte ich einen kleinen Überblick über die Hintergründe geben.

Teil 1: Das Layout.

Schauen wir uns zuerst das Thema Layout an:

Den Besuchern einer Website geht es vorrangig darum die relevanten Informationenschnell zu finden. Zeit ist schließlich kostbar! Es gibt ein Überangebot an Informationen. User bleiben daher nicht auf unübersichtlichen Seiten hängen, sondern surfen schnell weiter.

Informationen in Website Dokumenten müßen möglichst relevant sortiert, geordnet und gegliedert werden um dem User das Finden der gewünschten Informationen so einfach wie möglich zu machen. Dies gilt im Übrigen auch, wenn Sie über Ihre Website verkaufen möchten. Bevor der Entschluß zum Kauf eines Produktes gefasst wird informieren sich Ihre Kunden in der Regel über das angebotene Produkt oder eine Dienstleistung. Ein großer Teil der Käufer verwendet zur Recherche das Internet.

Layout von Webdesign

Es gibt eine Vielzahl möglicher Layouts um ein neues Webdesign Projekt erfolgreich zu machen. Layouts können sehr verschieden sein und trotzdem jedes für sich genommen wunderbar funktionieren. Hier gibt es keine allgemeingültige Regel.

Je einfacher ein Design ist, desto leichter ist es für den User seine Funktion intuitiv zu verstehen. Und je schneller der User den Sinn und die Funktion einer besuchten Seite versteht, desto zufriedener ist er, weil er umso schneller die gesuchten Informationen findet.

Erst wenn die Basis stimmt und eine intuitive Bedienung gewährleistet ist kommen weitere Design-Elemente dazu, welche die Seite optisch einzigartig machen und den Besuch zu einem Erlebnis werden lassen.

Wie schon gesagt, es gibt keine Musterlösung für ein gutes Layout. (Wäre auch langweilig) Trotzdem gibt es einige verbindliche Elemente, die gute Layouts gemeinsam haben:

Farbflächen

Bei der anfänglichen Aufteilung von Flächen zu einem Webdesign Layout kommt es immer vor allem auch auf die freien Flächen an. Sie geben den Elementen erst den Raum zum „atmen“. Jedes Design braucht Platz um sich zu entfalten. Je mehr Raum um ein Element ist, desto mehr Bedeutung bekommt es und umso auffälliger wird es wahrgenommen. Auch wenn man diese freien Bereiche des Layouts nicht bewusst sieht sind sie doch essentiell für ein gutes Layout. Flächen bauen Spannung auf und halten letzlich das Design zusammen. Für die richtige Anordnung ist vor allem Erfahrung und ein gutes ästhetisches Gespür notwendig.

Farbflächen geben Elementen im Design Raum zum "atmen"

Durch den Weissraum und die ungewöhnlichen Positionen entsteht ein besonderer Eindruck.

Lesefluß

Der Lesefluß eines Dokuments ist die Art und Weise wie der Besucher über das Dokument navigiert. Die wenigsten Menschen lesen einzelne Websites komplett. Der User überfliegt ein Dokument mit seinen Augen. Seine Aufmerksamkeit richtet sich dabei auf ganz bestimmte Elemente.

Dieses Verhalten kann man bereits bei seinem Webdesign Layout. Es geht natürlich darum, den User sinnvoll und schlüssig über den Seitenaufbau jeder einzelnen Seite zu leiten.

Einfluß wird dabei ausgeübt durch unterschiedliche Elemente. Z.B: die Elementgröße, Bild, Farben, Flächen, Typographie, Context usw. Wichtige Elemente werden optisch hervorgehoben. Details oder unwichtigere Informationen treten in den Hintergrund.

Der natürliche Lesefluß eines Dokuments orientiert sich an verschiedenen Faktoren. Grundsätzlich: von oben nach unten, von links nach rechts. Dieser Lesefluss wird jedoch beeinflusst durch Anordnung, Farbe, Größe, Inhalt usw. Jedes einzelne Element kann Einfluß ausüben und den natürlichen Lesefluss ablenken. Daraus ergibt sich ein neuer Lesefluß.

Mit verschiedenen Elementen steuert der Webdesigner den Lesefluß.

Ein Logischer Lesefluß leitet den Leser sinnvoll über die Website. Die aufeinander Aufbauenden Informationen werden sinnvoll wahrgenommen. Ein roter Faden führt schlüssig von einem Element zum nächsten.

Anordnung / Aufteilung

Eine optimale Anordnung der einzelnen Design-Elemente helfen dabei einen guten Lesefluß zu gewährleisten. Informationen können leicht erfasst und relevante Textpassagen einzeln gelesen werden.
In einem guten Layout lässt sich immer eine Ordnung erkennen. Manchmal erst auf den zweiten Blick. Um den Überblick zu behalten haben sich verschiedene Spaltensysteme bewährt. Eines der beliebtesten ist das „960 Grid System„.

Ordnung schaffen mit Spaltendesign. Als Beispiel, das 960 Grid System.

Seitenteilungsverhältniss – Der goldene Schnitt

Ein bewährtes Verhältniss der Seitenaufteilung ist der goldene Schnitt. Der goldene Schnitt bezeichnet eine besondere Harmonie zwischen zwei Seitenverhältnissen. Zahlreiche große Künstler vergangener Jahrhunderte verwendeten diese natürliche Ästhetik bewusst oder unbewusst in Ihren Meisterwerken aus Malerei, Bildhauerei, Architektur usw.
Die Aufteilung nach den Regeln des goldenen Schnitts findet sich sichtbar oder unsichtbar hinter zahllosen großartigen Designs. Eine Kentniss über dieses Format ist daher essentiell. Talentierte Zeichner, Fotografen, Designer oder Maler verwenden diese bestimmte Formel aber sowieso unbewusst.

Ich gehe bei einem neuen Design so vor, daß ich mir ein Design ansehe und erstmal ein paar Sekunden auf mich wirken lasse. Wenn es sich einerseites ausgewogen anfühlt und gleichzeitig eine eigene Spannung hat ist es gut für mich. In der ein oder anderen Form kommt dabei auch immer der goldene Schnitt vor. Es lohnt sich durchaus über sein eigenes Design nachzudenken und sich nicht damit abzufinden nur das Werkzeug zum Zweck zu sein.

Der goldene Schnitt.

Eine Art theoretisches Universalmaß der Ästhetik
Eine Art theoretisches Universalmaß der Ästhetik
Abgelegt in: Web Design Datum: 20. Oktober 2009 Erstellt von Stephan Bender

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Dok: Ben.design Web DesignDie Theorie von gutem Webdesign 1 (Layout)