Webdesign/Licht und Schatten
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
(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.
Setzen Sie Verläufe nur sparsam und gezielt ein!
Achten Sie dabei aber harmonische und dezente Verläufe zwischen zwei sehr sehr ähnlichen Farbwerten.
Weblinks
- hahnsinn: Verläufe in Webdesigns – Beispiele & Erläuterungen
- graphicdesign: what-effect-do-gradient-fills-have-on-the-eye
- creativecurio: Taking Design from Good to Great with Gradients
- websdesignerdepot: Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors
Schattierungen
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.
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
- Designing Beautiful Shadows in CSSvon Josh Comeau
Sehr gutes Tutorial, dass zeigt wie man realistische Schatten erzeugt - designschool.canva.com: Designing With Light and Shadow: 10 Highly Effective Tips You Should Try
- abouttech: Build a Better Drop Shadow
- pixlscript: Magisches Papier: Layout und Tiefe im Webdesign
- Smashingmagazine: 5 Simple Tricks To Bring Light and Shadow Into Your Designs
- t3n.de: Long-Shadow-Design: Flat Design wirft lange Schatten
