Layout / Komposition

Wahrnehmungsgesetze

Anhand psychologischer Forschungen konnten Regeln festgestellt werden, die der menschlichen Wahrnehmung zu Grunde liegen. Folgende Grundregeln sind bei der Gestaltung zu beachten:

Figur und Grund
Was nehmen wir als Grund und was als Figur wahr? Je deutlicher die Form einer Figur gestaltet ist, umso mehr scheint sie im Vordergrund zu liegen.

Nähe / Ähnlichkeit
Elemente, die nahe beieinander liegen, werden als Einheit wahrgenommen. Diese Nähe kann aber auch entstehen, wenn die Elemente sich entweder durch Form, Farbe oder Grösse ähnlich sind.

Geschlossenheit / Erfahrung
Getrennte Formen können je nach Anordnung trotzdem als Ganzes erscheinen. Dies geschieht weil wir durch unsere Erfahrungen etwas hineininterpretieren.

Fortsetzung
Grundelemente, wie beispielsweise Linien, werden trotz Unterbrechung fortgesetzt.

Symmetrie
Symmetrische Element werden als ordentlich wahrgenommen. Können aber ebenso auch schnell langweilig wirken.


Gestaltungsregeln

Aufgrund oben aufgeführter Erkenntnisse der menschlichen Wahrnehmung können Gestaltungsregeln abgeleitet werden. Folgende werden auch beim Webdesign oft angewandt:

Goldener Schnitt
Der goldene Schnitt ist ein besonders harmonisches Verhältnis von Elementen. Das Verhältnis 1:1.618 kommt in der Natur häufig zum Zug und deshalb spricht es uns ästhetisch an. Im Webdesign hilft es eine harmonische Seitenaufteilung, beispielsweise zwischen Navigation und Inhalt, zu erzeugen.

Drittregel
Bei der Drittregel wird Inhalt in neun gleichgrosse Rechtecke geteilt. Die wichtigen Elemente werden jeweils auf den Schnittlinien dieses Rasters platziert. Dies erzeugt ein dynamisches Bild und wirkt spannender, als wenn beispielsweise alles mittig platziert wird.


Webseiten gestalten (Elemente und Zwischenraum)

Inhalte / Elemente
Eine Website besteht sicherlich immer aus folgenden drei Inhalten/Elementen, die jeweils auf einer Seite verteilt werden:
>> Navigation/Menü
>> Inhalt/Content (Titel, Fliesstext, Bilder)
>> Logo

Die Navigation beinhaltet die Verlinkung zu den Unterseiten der Webseite, fungiert als Inhaltsverzeichnis, soll logisch aufgebaut werden und gestalterisch überzeugen.
Der Inhalt des jeweiligen Themas/Kapitels ist das grösste Element der Website. Hier werden alle Informationen zu Thema platziert. Nebst Fliesstext und Titel kann dieser Teil Bilder, Multimedia und weitere Verlinkungen beinhalten. Das Logo dient als Erkennungsmerkmal und ferner als Home-Button. Anhand der Verlinkung gelangen die Website-Besuchenden immer wieder auf die Startseite / Landing page.

Zwischenraum / Weissraum
Der Raum zwischen diesen Elementen wird Weissraum/Negativraum genannt und ist ein wichtiges Gestaltungselement. Hierbei gibt es den Makroweissraum (zwischen den Hauptelementen) und den Mikroweissraum (zwischen den Abschnitten, Titeln etc.). Der Weissraum ist ein wichtiges Gestaltungselement - viel Weissraum hebt die einzelnen Elemente klarer hervor während bei zu wenig Weissraum die Übersicht schneller verloren wird und es ferner eine billige Wirkung haben kann.


Webseiten Gestaltungsraster

Anordnung der verschiedenen Elementen (Navigation, Content, Bilder etc.) können nach einem Gestaltungsraster vorgenommen werden. Raster sind klar, strukturiert und vorhersehbar - inhaltsbasierte Webseiten bauen fast immer auf einem Raster auf. Allerdings können Raster auch zu einem engen Korsett werden und teils langweilig aussehen - künstlerische Webseiten verzichten oft auf Raster.

Prinzipiell tendieren rasterlose Webseiten jedoch zu chaotischer und unübersichtlicher Darstellung. Deshalb lohnt es sich für Anfänger/innen mit einem Gestaltungsraster zu arbeiten. Wichtig bei Rastern ist, dass sie sich gut teilen lassen. In der Praxis haben sich 12er oder 16er-Raster bewährt. Ausgangsbasis ist die Grösse des Ausgabegeräts, denn inzwischen werden Webseiten auf unterschiedlichen Ausgabegeräten dargestellt (Mobile, Tablet, PC). Mit einer Auflösung von 1024x786px bedient man jedoch die meisten Desktop-Computer, deshalb empfiehlt es sich, mit einer solchen Gestaltungsrastergrösse zu beginnen. Das Gestaltungsraster kann dann ebenso für kleinere Ausgabegeräte dienen, indem man einige Rasterspalten weglässt und den Inhalt auf das reduzierte Raster verteilt.

>> Weitere Infos zu Ausgabegeräte & Responsive Design

Vorherige Seite: Links Nächste Seite: Multimedia