Webseitengestaltung Teil 3

17. November 2019
Zuletzt aktualisiert am 2. Mai 2020 @ 14:44

3/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 letzten 2 Prinzipien auf der Liste an. 

7. SYMMETRIE


Menschen bevorzugen Symmetrien und das nicht nur in gestalterischer Form, sondern auch in anderen Lebensbereichen.

Schau dir ein Beispiel an:

Symmetrie - Wie man Text auf einem Bild platziert

So wie hier die Schrift platziert ist, wirkt es unharmonisch und nicht symmetrisch.

Webdesign Symmetrie - Wie man Text auf einem Bild platziert

So wirkt es viel harmonischer und die Anordnung von Bild und Text entspricht einer gewissen Symmetrie.

TEXT

  • Achte bei Text darauf, dass du Fließtext nicht zentrierst, denn das ist viel schlechter zu lesen, als wenn du ihn linksbündig setzt. Als Stilelement kannst du es das ein oder andere Mal gern einsetzen.
  • Benutze auf deiner Webseite niemals Blocksatz, denn das eignet sich in einem Responsive Design überhaupt nicht und reißt große Lücken im Text auf.

8. FARBE UND HELLIGKEIT

  • Mit Farben kannst die Zusammengehörigkeit von Elementen hervorheben
  • einzelne Elemente hervorheben wie z.B. Buttons, Infofenster, Hintergründe, Links, etc.

Manchmal sind wir durch ein Corporate Design eingeschränkt. Schau dir meine Farben auf meiner Webseite an: gold, blau, taubenblau. Erst viel später habe ich schweren Herzens noch ein 4. Farbe hinzugenommen. Das ist das etwas hellere Blau auf dem Foto:

Buttons in einer Akzentfarbe

Ich habe nämlich gemerkt, dass die Buttons vorher nicht wahrgenommen wurden.  Erstelle dir ein grobes Farbkonzept und vergiss dabei nicht, dass dir die Farben zwar gefallen müssen, aber letztendlich geht es nicht um dich, sondern darum, dass sie deinen Besuchern gefallen und das Thema unterstützen.

Farben haben nämlich immer eine Wirkung und du kannst damit Aufmerksamkeit erzeugen

Ein paar Regeln:
• Farbe vor Graustufe
• reine Farbe vor Mischfarbe
• intensive Farbe vor weniger gesättigten
• Kontrastfarben (blau/gelb) vor harmonischen Farben (gelb/grün)
• Buntheit vor einzelnen Farben

Mit Farben verknüpfen wir Dinge, die wir kennen:
Gelb – Briefkasten, Orange – Stadtreinigung (Berlin), Rot – Stoppschild, etc.

Rot: Warnzeichen, aber auch Leidenschaft und Liebe

Grün: Hoffnung

Blau: Ruhe, Harmonie, Zufriedenheit

Weiß: Reinheit, leicht, leer (Kulturelle Unterschiede beachten: bei uns ist die Farbe weiß rein in China: Tod und Trauer)

Gelb: Freude

Setze Farben sparsam als Eyecatcher ein, denn ein Akzent sollte als solches wahrgenommen werden. 

Ausführlicher gehe ich der Audioversion darauf ein. Hör sie dir einfach an!

SHOWNOTES

Einfachhörbar – Gratis Memberbereich mit WordPress Anfängerkurs
https://www.einfachhoerbar.de/

7 Schritte zu einer besseren Webseite
Einfach downloaden ohne Bedingung
https://mueller-macht-web.de/checkliste

Website Quickies
https://mueller-macht-web.de/checkliste

Podcast Webseite
https://www.wundersame-website-welt.de

Kontakt
assistenz@mueller-macht-web.de

Onlinekurs zur Planung einer Webseite
https://mueller-macht-web.de/onlinekurs

Soziale Medien
https://www.facebook.com/muellermachtweb
https://www.instagram.com/dwg_kerstin
https://twitter.com/dwg_kerstin
https://www.linkedin.com/in/kerstin-müller-a0b62b92/

Mein Blog
https://mueller-macht-web.de/visionaerer-blog/


 

Du bist begeistert? Dann teile gern.

Meine letzten Beiträge

0 Kommentare

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.