Webseitengestaltung Teil 4

Dies ist der 4. und letzte Teil meiner Reihe zur Webseiten Gestaltung. Mach deine Website schöner!

Podcast | Webdesign

Webseitengestaltung Teil 4

Dies ist der 4. und letzte Teil meiner Reihe zur Webseiten Gestaltung. Mach deine Website schöner!

Zuletzt aktualisiert: 17. April 2024 @ 14:23 Uhr

4/4-TEILIGE SERIE ÜBER DAS THEMA WEBSEITEN GESTALTUNG

Teil 1

Teil 2

Teil 3

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:

Nähe
Gemeinsames Schicksal
Gleichheit / Ähnlichkeit
Geschlossenheit
Kontinuität
Figur-Grund-Prinzip
Symmetrie
Farbe und Helligkeit

In der heutigen Episode bekommst du nochmal eine Menge Tipps, um deine Seite schöner zu machen.

Tipp 1

Vermeide eine unkontrollierte Buntheit auf deiner Webseite. Wenngleich auch Farben etwas Wunderbares sind, um Akzente zu setzen, achte darauf, dass du farblich eine gewisse Ruhe hineinbringst und deine Seite nicht zu bunt gestaltest.

Tipp 2

Mit Hintergründen kannst du deinen Internetauftritt wunderbar auflockern, doch sollten Hintergründe auch stets Hintergründe bleiben. Möchtest du deinen Hintergrund vollflächig gestalten, dann verzichte hierbei besser auf dominante Farben, sondern verwende entsprechend dezente Hintergrundfarben. Du kannst zum Beispiel deine eigene Corporate-Farbe verwenden, die du um 70 Prozent abminderst – auf diese Weise erhältst du einen hellen und passenden Farbton, denn wird dein Hintergrund zu dominant, kann man ihn nicht mehr als Hintergrund wahrnehmen.

Tipp 3

Setze Akzente! Auf deiner Webseite brauchst du sogenannte „Stopper“; im mobilen Bereich (responsive) sogar noch mehr, denn hier wird schnell durch die Timeline mit dem rechten Daumen gewischt – auf irgendeine Weise musst du also deine Besucher dazu bringen, anzuhalten!

Kleine Akzente können etwa Farbflächen oder eine größere Schrift sein. Beides solltest du sparsam einsetzen, damit sie separat als etwas Besonderes wahrgenommen werden. Weniger ist hier in jedem Fall mehr! Du kannst auch eine Farbe auswählen, die mit dem Corporate Design weniger zu tun hat, aber dennoch farblich gut auf deine Webseite passt und du sie somit auch für weitere Interaktionen verwenden kannst.

Tipp 4

Arbeite bei Schriften mit Kontrasten – achte darauf, dass deine Texte dabei immer gut lesbar sind. Vermeide Kontraste, die das Auge ermüden lassen – z. B. Rot auf Grün oder umgekehrt. Manche Internetnutzer haben eine Rot-Grün-Sehschwäche – möchtest du deinen Text auf ein buntes Feld setzen, dann achte dabei auf einen guten und ansprechenden Farbkontrast, damit sich dein Text gut leserlich vom Hintergrund abhebt.

Tipp 5

Spiele mit den Größen! Wichtige Dinge (wie Überschriften oder Bilder) werden eher wahrgenommen, wenn du sie größer dargestellt erscheinen lässt. Alles was kleiner ist, erscheint uns eher nur beiläufig und läuft Gefahr, dass es übersehen oder nur wenig zur Kenntnis genommen wird.

Tipp 6

Bleibe konsistent – um deine Besucher nicht zu verwirren. Hast du beispielsweise deine Webseite mit roten Buttons eingerichtet, dann bleibe auch bei dieser Farbe. Ein plötzlicher grüner Button würde eher verwirrend erscheinen.

Sicherlich kannst du auch einen grünen Button gezielt als Akzent einsetzen, wenn das aber nicht dein Plan gewesen ist, dann vermeide es besser und bleibe deiner Linie treu – sonst besteht die Gefahr, dass die Besucher auf deiner Seite womöglich nicht so interagieren, wie du es gerne hättest. Konsistenz schafft Ruhe und Harmonie auf deiner Website.

Tipp 7

Zusammenrücken der Elemente – gruppieren oder nicht gruppieren? Wenn du möchtest, dass Dinge als zusammengehörig wahrgenommen werden, rücke sie zusammen. Möchtest du dies nicht, dann ziehe sie einfach auseinander – auf diese Weise werden sie nicht als zusammengehörig empfunden!

Tipp 8

Durchbreche alle Regeln und erziele Aufmerksamkeit! Aber: Hierbei musst du darauf achten, dass du (d)einen Regelbruch nur sparsam einsetzt und dir vorher gut überlegst, ob du ihn wirklich vornehmen möchtest!

Sei dir immer bewusst, dass verwirrte Besucher wahrscheinlich nicht deine Kunden werden. Einfache Regel: Aufmerksamkeit ist gut – Verwirrung ist kontraproduktiv! Hierbei gibt es tatsächlich keine Standardregel, und du musst abwägen, wie du vorgehen möchtest. Frage ruhig in deiner Community nach und lass dir Feedback geben – was gut geht, oder was du lieber verwerfen solltest.

Beachtest du diese 8 Tipps, so hast du schon viel richtig gemacht! 😊

Ein paar kleine Phänomene:

Banner-Blindness – wir sind es gewohnt, dass auf Webseiten Werbebanner aufpoppen und haben diese Art von Werbung noch richtig wahrgenommen, als sie seinerzeit aufkam. Heute sind wir diesen Bannern gegenüber blind, weil wir einfach sehr viel im Netz unterwegs sind und sie inzwischen gar nicht mehr wahrnehmen. Möchtest du selbst Standard-Werbebanner einsetzen, werden sie aller Wahrscheinlichkeit nach nicht mehr funktionieren; überlege dir also eine moderne Strategie, wie du die Aufmerksamkeit deiner Besucher gewinnst und auf bestimmte Dinge lenkst.

Anordnung „F“ – alles, was oben und links angeordnet erscheint, wird als „wichtig“ wahrgenommen – was hingegen rechts liegt, wird als „unwichtig“ erachtet. Sidebars sind meist eher rechts angeordnet, lägen sie links, würden sie wahrscheinlich zusätzlich als „verwirrend“ empfunden werden. In unserer Art des Lesens sind wir „von-rechts-nach-links-Leser“ und somit gewohnt, dass unsere Augen zunächst immer erst nach links wandern, etwa, wenn wir Headlines lesen – und den darunter stehenden Text linksseitig als relevant empfinden (nach Headline > linke Zeitungsspalte). Was du an wichtigen Dingen kommunizieren möchtest, dass setze also immer nach links.

Setze Eyecatcher – mit menschlichen Gesichtern beispielsweise kannst du viel Aufmerksamkeit erzeugen; besonders, wenn sie etwas mit deinem Thema zu tun haben. Setze von Zeit zu Zeit neue Eyecatcher, denn die menschliche Aufmerksamkeit stumpft schnell ab und gewöhnt sich an Dinge. Du kannst auch hier ruhig einmal ausbrechen, ohne inkonsistent zu werden. Mit ein bisschen Kreativität sorgst du immer wieder für Kurzweil!

Schaffe kurze Maus-Wege und sorge dafür, dass sämtliche Bedienelemente gut zu erreichen und anzuklicken sind – denn Menschen sind bequem! Im mobilen Bereich achte darauf, dass alle Buttons gut mit dem rechten Daumen zu erreichen sind, denn auf dem Smartphone agieren wir ja komplett mit dem rechten Daumen (Linkshänder mit dem linken Daumen). Alles sollte gut „per Daumendruck“ navigierbar und erreichbar sein. Teste deine Webseite am besten einmal selbst !

Emotionalität – Menschen kaufen von Menschen und Menschen kommunizieren mit Menschen. Je mehr Emotionen du auf deiner Webseite erzeugst, desto besser wird deine Seite funktionieren und umso mehr wirst du auch mit deiner Website beeindrucken können. Mit Emotionalität kannst du deine Zielgruppe, deine Kunden, wirklich erfolgreich ansprechen.

Last but not least

Zu guter Letzt möchte ich dir William Edmund Hick vorstellen – und das von ihm stammende Hick‘s-Gesetz (Hick’s-Law). In einem Satz formuliert: „Weniger ist mehr.“

Je mehr Möglichkeiten du deinen Besuchern anbietest, umso weniger werden sie sich entscheiden können – etwa, welchen Button sie klicken, was sie kaufen, ob sie kaufen, etc. Enthält deine Webseite zu viele Möglichkeiten, dann ist es ratsam, sie ein bisschen abzuspecken und kürzer und knapper zu fassen – also auf das Wesentliche zu konzentrieren (damit deine Besucher nämlich wirklich auch das machen, was du gerne hättest, was sie tun).

Beispiel: Die magische 7 – erstelle lieber maximal nur 7 Menüpunkte anstelle von 20. Je mehr du dich auf das Wesentliche fokussierst und je weniger du auf deine Webseite packst, umso besser wird sie funktionieren und deine Kunden sich bei dir melden! Nutze also das Hick’s-Law, um deine Interessenten nicht zu überfordern. 😊

Ich würde mich freuen, wenn ich dir ein wenig mit auf den Weg geben konnte, damit deine Webseite, wenn du sie neu gestaltest, gleich zu Beginn optimal wird (oder du deine bestehende Seite optimieren kannst). Wenn du möchtest, dann besuche auch gerne meinen Gratis-WordPress-Kurs unter www.einfachhoerbar.de – hier findest du all meine Podcast-Episoden, die ich zu diesem Thema geschrieben habe und mit denen du deine erste eigene Webseite bauen kannst. Bis bald!