Drop-Shadows und Farbverläufe: Seien Sie konsistent in Ihren visuellen Metaphern
Schlagschatten und Farbverläufe sind zwei der häufigsten Designelemente im Internet.
Sie werden sie in vielen verschiedenen Stilen finden. Sie sind praktische Effekte für Webdesigner, da sie attraktiv, nützlich und einfach mit jedem Grafikprogramm zu erstellen sind. Aber sie haben eine dunkle Seite: Sie werden häufig missbraucht .
Amateurhafte Schlagschatten oder Farbverläufe zu verwenden, ist fast so schlimm wie das Anbringen eines scharlachroten Buchstabens an Ihrem Hemd, um die Welt wissen zu lassen, dass Sie ein Anfänger oder ein Hack sind. Selbst subtile, kaum wahrnehmbare Fehler können Spannungen erzeugen, die ansonsten schöne und wirkungsvolle Designs untergraben.
In diesem Artikel werden wir uns ansehen, wie Schlagschatten und Farbverläufe aussehen. Wir werden darüber sprechen, wie man sie effektiv einsetzt, und wir werden uns einige Beispiele für Fehler ansehen und sie beheben.
Was tun Drop-Shadows und Farbverläufe?
Die Aufgabe eines Webdesigners besteht darin, Farbmuster für leuchtende zweidimensionale Bildschirme zu erzeugen. (Es gibt einige Ausnahmen: Websites können beispielsweise auf einem Kindle-Bildschirm angezeigt werden, der nicht leuchtet, und Websites können auf Papier ausgedruckt werden.) Diese Bildschirme spiegeln nicht die reale Welt wider; Sie sind nicht wirklich wie die reale Welt. Aus diesem Grund haben wir keine wirkliche Notwendigkeit, die Muster auf unseren Websites in Beziehung zu Objekten in der dreidimensionalen Welt zu bringen, in der wir leben.
Betriebssysteme wie Unix und DOS haben eine Schnittstelle, die nichts anderes als farbiger Text auf einem Bildschirm ist. Andere, wie Windows und Mac OS X, sind voller Illusionen von realen Objekten. OS X hat zum Beispiel ein Dock, das aussieht wie ein Tisch mit einer glänzenden Oberfläche, die in der Ferne verschwindet, eine Menüleiste, deren abgeschrägte Kanten es aussehen lassen, als ob sie sich leicht wölbt, und Rollbalken, die durchscheinende Rauten zu haben scheinen.
All diese Effekte sind Metaphern. Sie behandeln bestimmte Elemente, mit denen wir interagieren können, auf dem Bildschirm, als wären sie dreidimensionale Objekte, die mit Lichtquellen interagieren, so wie es Objekte in der nicht-digitalen Welt tun. Es ist eine lustige Sache, in gewisser Weise: all diese Lichtquellen und Kanten und Formen sind reine Fantasie. Da die Objekte auf dem Bildschirm imaginär sind, warum sollten wir sie auf die Objekte in der realen Welt beziehen?
Die Illusion von Raum verbindet das Imaginäre mit einer Welt, in der wir uns wohlfühlen.
Der wichtigste Grund, warum wir imaginäre Objekte mit realen Objekten in Beziehung setzen, ist, dass wir Experten darin sind, mit Objekten in unserer dreidimensionalen Welt zu interagieren. Wir haben Erfahrung im Umgang mit dreidimensionalen Objekten und haben Wissen über den visuellen Code angesammelt, der uns über die Beziehungen von Objekten zueinander im Raum erzählt.
Zum Teil deshalb, weil die Kunst, Licht zu interpretieren, so bemerkenswert ist, dass wir uns an der Illusion erfreuen oder die Erscheinung von Objekten erschaffen. Wir sind oft mehr von dramatisch lebensnahen Gemälden gewöhnlicher Objekte wie Häusern und Äpfeln beschäftigt, als von den Objekten selbst. Wir Menschen haben seit Jahrtausenden Zeichnungen geschaffen, die die Ideen von Objekten darstellen sollen. Illusorische Rauten und Tische auf dem Bildschirm sind nichts anderes als die jüngste Manifestation dieser langen Tradition.
Es ist mehr als nur Vergnügen. Form und Position geben uns Informationen darüber, wie Objekte miteinander in Beziehung stehen. Die lange vertikale Rautenform der Bildlaufleiste im Safari-Fenster erzeugt zum Beispiel die Illusion, dass sie "höher" oder näher bei mir sitzt als die umgebenden Elemente. Dies verleiht dem Design eine größere Bedeutung, da die Bildlaufleiste ein wesentliches Element zum Navigieren auf der Seite ist.
Visuelle Metaphern schaffen wahrgenommene Affordanz.
Wenn Sie als Objekt erscheinen, erzeugt die Bildlaufleiste "wahrgenommen" Affordanz . "Das heißt, es verbindet sich metaphorisch mit den Eigenschaften realer Objekte, die sich für bestimmte Zwecke eignen. Eine abgeschrägte Schaltfläche auf einer Webseite teilt beispielsweise mit, dass sie Druck bietet . Wir können alles auf einer Seite klickbar machen, aber die Verknüpfung eines klickbaren Elements mit dem Bild von etwas Pressbarem lässt seine Funktion klar, offensichtlich und sogar angenehm erscheinen.
Schlagschatten und Farbverläufe sind grundlegende Werkzeuge, um die Illusion von Raum zu erzeugen.
Schlagschatten und Farbverläufe sind zwei Werkzeuge, die helfen, die Illusion von Dreidimensionalität zu erzeugen und die räumlichen Beziehungen von Objekten auf der Seite vorzuschlagen. Wenn es gut gemacht wird, macht diese dreidimensionale Information ein Design schöner und verständlicher.
In der realen Welt werden Schlagschatten erzeugt, wenn ein Objekt eine Lichtquelle daran hindert, auf eine Oberfläche zu treffen, die sich dahinter befindet . Dies ist einer der Gründe, warum Leute sagen, dass Schlagschatten zweidimensionale Designs "knallen lassen": weil sie Objekte erscheinen lassen, die über andere Elemente hinausragen oder darüber schweben.
Farbverläufe werden angezeigt, wenn ein Teil eines Objekts näher an einer Lichtquelle liegt als ein anderer Teil. Als Ergebnis erscheint der nähere Teil heller und der entferntere Teil erscheint dunkler. (Farbverläufe werden natürlich komplexer, wenn mehrere Lichtquellen interagieren oder wenn Lichtquellen unterschiedliche Farben haben.)
Indem sie die Auswirkungen von Licht in der realen Welt nachahmen, kommunizieren Drop-Shadows und Farbverläufe Informationen über metaphorische Objekte, imaginäre Lichtquellen und ihre Beziehungen.
Wie man Schlagschatten und Farbverläufe effektiv einsetzt
Hier ist eine Möglichkeit: Verwenden Sie keine Schlagschatten oder Farbverläufe.
Ich meine das ernst. Dies ist der sicherste Weg, um Schattenwurf- und Verlaufsfehler zu vermeiden, und die Option sollte immer in Betracht gezogen werden.
Da das Werfen von Schlagschatten auf zufällige Objekte so einfach ist, können sie eine Entschuldigung sein, um einfachere, bessere Lösungen für Probleme zu vermeiden. Für Textabschnitte, die mehr hervorgehoben werden müssen, vernachlässigen Designer zum Beispiel häufig Farbe, Größe, Gewicht des Typs und viele andere Elemente zugunsten eines Schlagschattens.
In ähnlicher Weise verwenden Designer häufig Gradienten, um ein Farbfeld weniger langweilig erscheinen zu lassen, ohne herauszufinden, warum die Gesamtzusammensetzung nicht dynamisch ist.
Wenn Sie an einer Komposition für eine Website arbeiten, speichern Sie möglichst dreidimensionale Effekte wie Schlagschatten und Farbverläufe für das Ende . Verwenden Sie Abstand, Platzierung und Farbe, um das Design wirksam zu machen, bevor Sie die letzte Schicht der Politur hinzufügen. Wenn Sie sich darauf konzentrieren, dass Ihre Designs ohne diese Tricks funktionieren, werden Sie feststellen, dass Sie sie nicht so oft benötigen und dass sie effektiver sind, wenn Sie sie verwenden.
Bevor Sie in einen Schlagschatten oder einen Farbverlauf fallen, fragen Sie sich: " Ist für diesen Entwurf eine dreidimensionale Metapher erforderlich?" Füge ich damit nützliche Informationen über die Art und Weise ein, wie Objekte miteinander in Beziehung stehen oder ein effektiver Bestandteil eines Klangs sind ästhetische Annäherung, oder verwende ich es als Ausrede? "
Der Subtler, der Bessere
Verwenden Sie für Schlagschatten fast nie die Standardeinstellungen von Photoshop. Der Standard-Schlagschatten von Photoshop ist sehr dunkel und wird in die untere rechte Ecke eines Objekts geworfen (die standardmäßige globale Lichtquelle ist 120 °, oben links).
Schatten erzählen von dem Licht in Ihrer Umgebung. Angenommen, Sie sind in einem dunklen Raum ohne Fenster und schalten eine Taschenlampe ein. Jedes Objekt, auf das du es anmeldest, wirft einen Schatten, der fast schwarz ist. Das liegt daran, dass das Objekt Licht von der einzigen Lichtquelle blockiert, was bedeutet, dass kein anderes Licht von irgendwoher kommt, um diesen Bereich aufzuhellen.
Jetzt wird der Schatten wegen des reflektierten Lichts nicht vollständig schwarz sein. Ein Teil des Lichts von Ihrer Taschenlampe wird von den Wänden reflektiert und trifft den Schattenbereich aus einer Richtung, die nicht durch das Objekt blockiert wird. Und wenn Sie eine Lampe in einer anderen Ecke des Raumes anschalten, wird der Schatten deutlich heller. Das Objekt wird einen zweiten Schatten werfen: Der neue Schatten wird erscheinen, wo das Licht von der Lampe blockiert ist, aber wird mit dem Licht von der Taschenlampe gefüllt, während der Bereich des ersten Schattens immer noch durch das Licht von der Taschenlampe blockiert wird wird mit dem Licht von der Lampe gefüllt werden.
Wenn wir unseren Entwürfen Schlagschatten hinzufügen, empfehlen wir eine imaginäre Umgebung für unsere Webseite. Dunkle, scharfkantige Schlagschatten lassen auf einen dunklen Raum mit einer einzigen Lichtquelle schließen. Helle, weichkantige Schlagschatten lassen auf einen Raum mit diffusem Licht schließen.
Ein gut beleuchteter Raum ist für die Benutzer die angenehmste Umgebung, da er der Umgebung ähnelt, in der wir unsere Computer benutzen: ein Büro oder ein Arbeitszimmer. Wenn wir diese Komfortzone nicht bewusst vermeiden wollen, sollten wir die Drop-Shadow-Einstellungen in Photoshop weit von den Standardeinstellungen entfernen. Bringe die Deckkraft auf 30 oder 40% oder noch weniger.
Halten Sie die Dinge auch einfach, damit die Leute die Metapher verstehen, ohne darüber nachzudenken. Eine Lichtquelle bei 120 ° macht wenig Sinn. Mac OS X zum Beispiel stellt seine Lichtquelle auf 90 ° oder gerade darüber, was logischer erscheint. Ich möchte es noch einfacher machen und die Lichtquelle direkt senkrecht auf den Bildschirm stellen. Setzen Sie dazu die Entfernungseinstellung für Ihren Schlagschatten auf Null (dies entspricht der Entfernung von dem Objekt, das den Schlagschatten auf das darunter liegende Objekt überträgt). An diesem Punkt spielt globales Licht keine Rolle: Es ist einfach so, als ob eine große diffuse Lichtquelle von hinten kommt, um das Design zu beleuchten.
Dieser Effekt ist sehr häufig bei "Trompe-l'œil" -Designs, von denen das häufigste das Hintergrundbild oder den Rahmen einer Schreibtischoberfläche darstellt, als ob man es von oben betrachtet. Filmregisseure wie Alfred Hitchcock, Martin Scorcese und Wes Anderson Verwenden Sie den gleichen Effekt für ihre Unterschrift Gottesaugenansichten. Solche Webdesigns haben eine Art mühelose Verständlichkeit, und die Aufrechterhaltung der Konsistenz in einem Design wird für den Designer einfacher.
Wenn Sie die Entfernungseinstellung auf 0 und die Deckkraft auf etwa 30% reduziert haben, haben Sie einen guten Ausgangspunkt für einen Schlagschatten. Spielen Sie mit der Größe herum, um zu ändern, wie weit die Oberfläche des Objekts von dem Hintergrund entfernt ist, auf dem es sich befindet. Wenn Sie die Größe beispielsweise auf 1 Pixel setzen, erhalten Sie einen schönen Effekt, der fast unsichtbar, aber sehr angenehm ist. Designer Dan Cederholm hat kleine, einfache Effekte wie diesen zu einem integralen Bestandteil seines Stils gemacht (wie in seinem bahnbrechenden A List Apart Artikel über " Bergspitzen-Ecken ").
Sie können die Opazität sicherlich erhöhen, wenn der Effekt unsichtbar ist, aber subtil zu beginnen und dann zu wählen, ist viel besser als das Gegenteil. Der Effekt sollte nicht im Geringsten offen sein, als es sein muss.
Für Farbverläufe hat Photoshop viele Standardeinstellungen. Diese können einige gute Anwendungen haben, aber sie haben sicherlich unbegrenzte schlechte Verwendung, so dass es ratsam ist, sich von ihnen fern zu halten.
Wählen Sie stattdessen den Standard-Schwarz-Weiß-Farbverlauf. Wählen Sie dann sowohl das Schwarz als auch das Weiß und machen Sie beide zur Grundfarbe Ihres Elements. Jetzt, wo du eine Basis hast, wähle entweder die dunkle Seite oder die helle Seite und stelle sie etwas dunkler oder heller ein. Je subtiler, desto besser . (Einige der besten Farbverläufe, die mir begegnet sind, musste ich mit dem Pipettenwerkzeug in Photoshop überprüfen, um sicherzugehen, dass sie überhaupt da waren!)
Je größer der Kontrast zwischen Hell und Dunkel ist, desto runder wird die Oberfläche erscheinen. Für einige Dinge wie Navigationsmenüs und Schaltflächen ist eine gewisse Rundheit angemessen. Bei Objekten, die flach erscheinen sollten, sollten Sie den Kontrast niedrig halten.
Und denken Sie daran, die hellere Seite sollte in die Richtung Ihrer Lichtquelle weisen.
Diese Art von Gradienten ist wunderbar, weil sie die Gradienten nachahmt, die wir ständig um uns herum sehen. Nichts in der realen Welt ist wirklich ein einziges Farbfeld, weil es immer eine Art von Beziehung zu einer Lichtquelle hat. Schauen Sie sich die Seiten in einem Buch oder an der Decke um Ihr Deckenlicht genau an: Überall finden Sie Farbverläufe.
Beispiele für Fehler und wie man sie beheben kann
Das Web hat viele offensichtlich hässliche Farbverläufe, aber diese werden normalerweise nicht von professionellen Designern gemacht. Anstatt grandiose Fehler zu zeigen, werde ich einige Wege aufzeigen, in denen subtile Fehler Spannungen in ansonsten exzellenten Designs hervorrufen können.
Uniform Shadows für überlappende Objekte
Überlappende Objekte implizieren einen Unterschied in ihrer Entfernung von Ihnen (teilweise durch ihre Dicke bestimmt). Designer verwenden jedoch häufig identische Schlagschatten für überlappende Objekte. Die Information, die durch die Schlagschatten vermittelt wird, kollidiert mit der Information, die durch die Überlappung vermittelt wird, und untergräbt damit die Illusion der Dimensionalität.
Konflikte wie diese zu sehen macht mich unruhig, und je mehr ich mich auf sie konzentriere, desto mehr schmerzt mein Kopf. Benutzer sollten Freude an Ihrem Design haben, keine Schmerzen fühlen!
Sie können mehr über dieses Problem lesen in " Baue einen besseren Schlagschatten "Eine Anleitung von Jacci Howard Bär auf About.com.
Abrupte Kanten
Die Ecken von echten Schlagschatten hätten keine harten Kanten, außer wenn sie absolut kein reflektiertes Licht hätten - was eine sehr ungewöhnliche Situation wäre. Vielmehr sind ihre Ecken in der Regel durch die Lichtstrahlen abgerundet, die sie umschlingen.
Hier ist ein Schlagschatten mit einer unrealistisch harten Kante:
Dieses sonst so schöne Design hat fast keine dimensionale Illusion, hat aber einen Drop-Shadow entlang der rechten Seitenleiste. Der Designer wollte vielleicht die Hierarchie der Seitenleiste auf der Seite absenken, ein Effekt, den der blaue Hintergrund unterstützt. Es ist nicht nur unnötig dunkel, sondern die unplausibel harte Kante starrt den Besucher ins Gesicht.
Am unteren Rand der Seitenleiste können Sie einen abgerundeten Übergang sehen, wo der Designer einen plausibleren Effekt erzeugt hat. Aber Sie können sehen, warum er es oben nicht wiederholt hat, weil es mit der sauberen horizontalen Linie, die von den gut ausgerichteten oberen Elementen gesetzt wird, krachte. Anstatt den Realismus dieses abgerundeten Übergangs zu fordern, sollten wir es beheben, indem wir den Schlagschatten so weit wie möglich abschwächen.
Hier habe ich den Schlagschatten so leicht gemacht, dass er kaum mehr bedeutet, als dass er weiter hinten sitzt. Weil es so leicht ist, ist die klare Linie des Übergangs nicht hässlich oder störend.
Was zum Teufel geht hinter diesem Objekt vor?
Manchmal verfällt ein Schlagschatten ohne ersichtlichen Grund, wie bei der blauen Box, die das W3C-Logo umgibt.
Warum ist der Schlagschatten so weit vom Objekt entfernt und so abgerundet? Je mehr ich versuche, die Geschichte dieses Schlagschattens zu verstehen, desto verwirrter werde ich. Meine Vermutung ist, dass der Designer dem Logo, das der Drop-Shadow hilft, mehr Gewicht verleihen sollte, aber es stört die Harmonie der Seite so sehr, dass es sich nicht lohnt.
Lassen Sie nicht zu, dass Ihre Farbverläufe unterschiedliche Lichtquellen anzeigen.
In diesem ansonsten exzellenten Design für WolframAlpha haben Objekte auf der Seite Farbverläufe von weiß bis blass orange. Das Problem ist, dass der Farbverlauf im Kopfbereich oben weiß ist und Licht von oben zulässt, während die unteren Seitenelemente unten weiß sind, was Licht von unten impliziert.
Man könnte argumentieren, dass ich das überdenke, dass Farbverläufe nicht mit Lichtquellen übereinstimmen müssen. Das ist möglich, aber subtile Gradienten wie diese haben eine inhärente metaphorische Beziehung zu den Gradienten, die wir in der realen Welt sehen. Lassen Sie die Richtung der Farbverläufe auf der Seite nach unten ändern, so dass sie eine Lichtquelle von oben implizieren:
Und wir bekommen Lichtquellenharmonie.
Letztendlich kannst du tun, was du willst.
Da sich die Objekte auf einer Webseite nur durch Metapher auf reale Objekte beziehen, ist ihre Effektivität im Wesentlichen subjektiv. Die Verbindung zwischen einem Bild einer Schaltfläche und einer tatsächlichen Schaltfläche hat keine Realität, die über den Verstand des Benutzers hinausgeht.
Wir Designer sind nicht verpflichtet, unsere Metaphern mit der Realität in Einklang zu bringen, aber durchdacht und vorsichtig über die vielen Ebenen der Kommunikation in einem Design hilft uns, unsere Websites harmonischer zu gestalten.
Und unsere Sorgfalt und Konsistenz trägt dazu bei, dass die Benutzerfreundlichkeit der Website angenehm und angenehm ist.
Geschrieben exklusiv für WDD von Nate Adler . Er studierte Philosophie am College, eine Ausbildung, die ihn perfekt auf das Design und die Entwicklung von Webseiten für PBS KIDS vorbereitet hat. Sie können mehr von ihm und seinen PBS-Mitarbeitern lesen Design.PBS .
Denken Sie, dass diese Detailgenauigkeit beim Entwurf von Schlagschatten und Farbverläufen wichtig ist? Haben Sie Ihr eigenes Haustier ärgert darüber, wie Schlagschatten und Farbverläufe verwendet werden?