HTML/Tutorials/Licht und Schatten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Auch wenn mit dem Flat Design im Augenblick ein minimalistischer Gestaltungsstil modern ist, können Sie durch den Einsatz von Schatten, Highlights und Verläufen räumliche Tiefe, Perspektive und dadurch einen realistischeren Eindruck vermitteln.

Seit 2014 entwickelt Google das Flat Design mit seinem Material Design weiter, indem Schatten einen leichten Tiefeneffekt erzeugen und den Nutzer so sofort erkennen lassen, welche Bereiche wichtige Informationen enthalten.

Verläufe[Bearbeiten]

(Farb-)Verläufe sind sowohl Helligkeits- (Tonwert-) als auch Farbabstufungen, die Objekten Plastizität und damit räumliche Tiefe geben. Das menschliche Auge wird unwillkürlich zum Mittelpunkt eines radialen Verlaufs gezogen. Dies kann auf wichtige Inhalte fokussieren, genauso aber auch vom Wesentlichen ablenken.

Empfehlung:
Setzen Sie Verläufe nur sparsam und gezielt ein!
Achten Sie dabei aber harmonische und dezente Verläufe zwischen zwei sehr sehr ähnlichen Farbwerten.


Beispiele mehrerer Farbverläufe
Beispiele mehrerer Farbverläufe

Weblinks

Schattierungen[Bearbeiten]

Schattierungen entstehen durch eine Lichtquelle, die ein Objekt von einer Seite beleuchtet, deren dahinter liegende Teile aber im Schatten liegen.

Allerdings ist es mit Photoshop, CSS-box-shadow und SVG heutzutage zu einfach Schatten zu erzeugen.

Empfehlung: Setzen Sie Schattierungen nur sparsam und gezielt ein.
Schatten sollten stets
  • nur in eine Richtung zeigen
  • nicht zu scharf konturiert sein
  • so unauffällig sein, dass man sie nicht bewusst sieht, sondern dass sie nur wirken.

Siehe auch

Weblinks

Siehe auch[Bearbeiten]