Webseiten Gestaltung – Teil 2

wordpress-websites
Kerstin-Mueller-Podcast

Webseiten Gestaltung – Teil 2

Zuletzt aktualisiert: 6. Dezember 2024 @ 15:42 Uhr

2/4-teilige Serie über das Thema Webseiten Gestaltung

Mit dieser Podcast Episode setze ich meine 4-teilige Serie über das Thema Webseiten Gestaltung fort. 

Viele haben Probleme mit der Gestaltung ihrer Webseite und können sich einen Webdesigner (noch) nicht leisten. Es gibt Wahrnehmungs- bzw. Gestaltungsprinzipien, die dir dabei helfen, deine Webseite zu gestalten. Unser Gehirn analysiert Informationen automatisch und erkennt beispielsweise Unterschiede, Hierarchien, zusammengehörende Elemente, u.v.m.

Es reicht nicht, eine Webseite nur „hübsch“ zu machen, sondern sie sollte auch funktional sein. Das oberstes Gesetz lautet: Klarheit für den Besucher schaffen. 

Ich habe die 8 wichtigsten Prinzipien der Gestaltung untersucht:

  1. Nähe
  2. Gemeinsames Schicksal
  3. Gleichheit / Ähnlichkeit
  4. Geschlossenheit
  5. Kontinuität
  6. Figur-Grund-Prinzip
  7. Symmetrie
  8. Farbe und Helligkeit

In der heutigen Episode schaue ich mir die nächsten drei Prinzipien auf der Liste an. 

4. Das Prinzip der Geschlossenheit

Unser Gehirn mag gerne geschlossene Formen und Gruppen, wie Kreise, Quadrate oder auch Dreiecke. Wir sind allerdings auch in der Lage z.B. einen Kreis als einen Kreis wahrzunehmen, auch wenn einzelne Teile des Kreises fehlen. Wir sind in der Lage, sie zu etwas Ganzem zusammenzusetzen. Dadurch können wir komplexe Designs vereinfacht darstellen. Objekte, die wir schon kennen, können wir so leichter identifizieren, ohne dass wir die vollständige Form sehen.

Das Prinzip der Geschlossenheit sagt aber auch, dass wir Abgrenzungen bevorzugen. Ein Beispiel dafür ist das Kacheldesign z. B. bei Blogs. Gut erkennbare Kanten bilden geschlossene Bereiche, die wir dann als Einheit wahrnehmen, wie z.B. bei dem Material Design von Google. Schaffe am besten abgeschlossene Informationshäppchen, so kannst du deine Webseite sehr gut strukturieren und du ermöglichst deinem Besucher ein leichteres Wahrnehmen der Inhalte.

5. Kontinuität bzw. Fortsetzungserwartung

Objekte, die entlang uns bekannter Formen angeordnet sind, nehmen wir als zusammengehörig wahr. Wenn du dir ein Koordinatensystem mit vertikalen Balken anschaust, können die dort abgebildeten Informationen besser aufgenommen werden, wenn die Balken der Größe nach sortiert werden, anstatt sie willkürlich aufzureihen. Es entsteht eine Kontinuität, die uns ein besseres Verständnis und eine tiefere Verankerung der Informationen ermöglicht. 

Das Prinzip der Kontinuität bzw. Fortsetzungserwartung greift aber auch bei der Benutzerführung einer Webseite. Wenn du einen Textausschnitt z.B. auf der Startseite schreibst und mit einem „Mehr lesen“ Button versiehst, achte darauf, dass du auch wirklich auf die Seite leitest, wo dein Besucher den Text lesen kann und nicht auf eine andere Seite verlinkst.

Achte auch darauf Buttons richtig auszuzeichnen und klare Handlungsaufforderungen zu benutzen, die bei Klick auch das erfüllen, was deine Besucher erwarten.

6. Figur-Grund-Prinzip

Es ist ein sehr altes Prinzip und kommt aus der Kunst. Menschen unterscheiden zwischen Vorder- und Hintergrund. Elemente im Vordergrund werden als wichtiger wahrgenommen.

Buttons sollten einen starken Kontrast zum Rest der Webseite aufweisen, um auch wahrgenommen zu werden. Sind sie in der Corporate Design Farbe, werden sie oft nicht als Buttons wahrgenommen und übersehen.

Soll eine Emotion im Vordergrund stehen, eignen sich dafür sehr gut große Bilder im oberen Bereich einer Webseite, sogenannte „Hero Bilder“. Der Bereich oben wird als erstes wahrgenommen und somit ein guter Ort, um die Emotion zu erzeugen. Die Emotion rückt in den Vordergrund und Text und Button, werden als zweites wahrgenommen. 

In der nächsten Episode werde ich auf die letzten beiden Themen eingehen, nämlich das Prinzip der Symmetrie und wir reden über Farbe und Helligkeit.

[et_bloom_inline optin_id=“optin_2″]

Submit a Comment

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