Kontrast im Design vollständig verstehen
Üblicherweise ist das Thema Kontrast für Anfänger reserviert. Bücher werden sagen "Schwarz und Weiß haben Kontrast, Rot und Orange nicht" - aber es gibt noch so viel mehr.
Anfängerbücher berühren normalerweise nur den Farbkontrast, aber was ist mit Größe und Formkontrast? Oft ist der einfachste Weg, einem Amateur-Designer von einem professionellen Designer zu erzählen, der Kontrast zu verwenden.
Die Schaffung einer Struktur von Bedeutung mit Größe, Form und Farbe ist, was eine Seite Auswirkungen und Lesbarkeit für den Leser gibt.
In diesem Beitrag werden wir den Kontrast im Detail betrachten und große Typografie, funky Formen, klare Trennungen, Bilder und wie sie richtig zusammenpassen unter Verwendung von Kontrast für eine gute Benutzererfahrung untersuchen.
Eine Einführung in den Kontrast
Kontrast kann sein definiert als "der Unterschied in den visuellen Eigenschaften, der ein Objekt (oder seine Darstellung in einem Bild) von anderen Objekten und dem Hintergrund unterscheidbar macht." Im einfachen Englisch könnte man es auf seiner grundlegendsten Ebene als "Dinge, die sich voneinander unterscheiden" beschreiben. "
Für Designer in allen Bereichen der Praxis, vor allem aber für Webdesigner, ist Kontrast der Ursprung von allem. Wir versuchen ständig, Hierarchien von Bedeutung zu etablieren, Menschen auf bestimmte Bereiche einer Seite aufmerksam zu machen und eine klare und prägnante Botschaft zu vermitteln, die im Mittelpunkt unserer Arbeit steht. Das Erstellen von Beziehungen zwischen verschiedenen Elementen eines Designs ist nur das Wichtigste, was Sie tun können. Du hast es wahrscheinlich schon sehr oft gemacht, bewusst oder nicht.
Offensichtliche Beispiele für Kontrast sind schwarz und weiß, groß und klein, schnell und langsam, dick und dünn. Gegensätze sind der einfachste Weg zu erfassen, was Kontrast ist, aber wenn man Kontrast zu Designarbeit verwendet, ist es nie ganz so schwarz und weiß. Wenn Sie sich wundern, dann kommt das Sprichwort über eine Situation, die "schwarz und weiß" ist, was auch dazu führt, dass etwas als "Grauzone" bezeichnet wird. Im Design vergleichen wir oft Dinge, die verschieden sind, aber nicht entgegengesetzt, zum Beispiel ein H1 und ein h1, oder eine "In den Warenkorb" - und eine "Auschecken" -Schaltfläche. Hier kommen größere Kontraste ins Spiel.
Werfen wir einen Blick auf die verschiedenen Arten von Kontrast und einige Beispiele, wie sie im Webdesign verwendet werden.
Farbkontrast
Das häufigste Beispiel von allem, das ist so ziemlich alles, wo alles anfängt. Wenn zwei Farben unterschiedlich sind (etwa schwarz und weiß), haben sie einen hohen Kontrast, während sie, wenn sie sich sehr ähnlich sind (rot und orange), einen geringen Kontrast haben.
TekRoc verwendet hier einen sehr deutlichen Farbkontrast, indem ein helles und dynamisches Bild auf einen sehr dunklen Hintergrund gelegt wird. Das helle Orange und Blau hebt sich deutlich hervor und das Auge wird sofort von allen anderen Dingen auf der Seite angezogen.
Tim Van Damme nutzt den Farbkontrast im GoWalla Site Design hervorragend. Nicht nur die mehrfarbige Umrandung am oberen Rand der Seite fällt auf und erzeugt visuelles Interesse, indem sie sich von dem blassen Hintergrund unterscheidet, sondern fügt dem Text auf Knöpfen auch extrem subtile 1px-Schlagschatten hinzu. Das etwas dunklere Orange hilft wirklich, Kontrast zwischen dem weißen Text und dem orange Hintergrund zu schaffen.
Envato sind die Meister des subtilen Kontrasts und der Trend, 1px-Grenzen dafür zu verwenden, kann wahrscheinlich mehr als jeder andere auf sie zurückgeführt werden. Alle ihre Websites verfügen über mehrere einzelne Pixelränder, um einen Kontrast zwischen den Abschnitten zu erzeugen. Im obigen Screenshot könnten die beiden Inhaltsbereiche nur durch Leerzeichen oder eine einzelne Zeile getrennt sein. Durch die Verwendung von zwei Zeilen (eine dunkle, eine helle) erzeugen sie einen subtilen Kontrast zwischen den beiden Abschnitten, was äußerst effektiv ist.
Größenkontrast
Die nächste häufigste Form des Kontrasts ist die Größe. Etwas Großes neben etwas Kleinem deutet meist darauf hin, dass der größere Gegenstand viel wichtiger ist. Das stimmt, wir sagen, dass Größe zählt!
MadeByWater ist das Design-Portfolio von Jordan Vitanov. Er verwendet Größenkontrast mit extrem großer Typografie, um sofort ein Zitat von Bruce Lee zu vermitteln, das definiert, warum er sich entschieden hat, sich mit dem Namen MadeByWater zu brandmarken.
28Thiers ist eine attraktive gehobene Bar in Frankreich. Ihre Website nutzt Größenkontraste, um sofort auf das große Foto des Martini aufmerksam zu machen. Es ist sofort klar, dass dies das wichtigste Element auf der Seite ist, und der Designer möchte, dass Sie sich dieses Bild ansehen und sich von der Tatsache abstocken, dass es sich um ein äußerst nobles Lokal handelt.
SlideScreen verwendet den Größenkontrast mehrfach auf seiner Site. Ihre Produkte werden nicht nur mit einem großen Screenshot angezeigt, sondern auch mit sehr großen Schaltflächen für ihre primären Handlungsaufforderungen. Sie möchten, dass Sie sich das Video ihres Produkts in Aktion ansehen und dann möchten, dass Sie es herunterladen. Dies sind die wichtigsten Elemente der Seite, also sind sie wesentlich größer als die anderen Dinge, die sie umgeben.
Formkontrast
Formkontrast bedeutet, dass die Dinge durch ihren Unterschied in der physischen Form im Vergleich zu anderen Dingen auf der Seite bemerkenswert sind. Auf der grundlegendsten Ebene kann dies in Dingen wie abgerundete Ecken zu Tasten verwendet werden, aber auf extremere Ebenen kann es viel mehr Aufmerksamkeit auf sich ziehen.
Anebstar verwendet Formkontraste, um drei wichtige Bilder im Header darzustellen. Da die meisten Objekte im Web rechteckig sind, ist es am einfachsten, einen Kreis zu verwenden. Natürlich hat dieses Beispiel auch einen kleinen Größenkontrast, aber Sie können deutlich sehen, wie sich die kreisförmigen Elemente von allem anderen auf der Seite abheben.
Carbonmade ist eine atemberaubende Seite mit einer echten Mischung aus wunderschönen Illustrationen und gut präsentierten Inhalten. Ein einfacher Anmeldeknopf hätte hier funktioniert, aber die Größe und der Farbkontrast hätten ihn wahrscheinlich nicht genug vom Hintergrund entfernt. Das Hinzufügen eines freundlichen Oktopus hinter dem Knopf gibt ihm wirklich diesen Unterschied in der Form, um das Auge direkt darauf zu zeichnen.
WireframePlus verwendet einen einfachen, aber äußerst effektiven Formkontrast, um den Preis ihrer Dienste hervorzuheben. Sie wollen, dass Sie ihre Inhalte lesen, aber vor allem versuchen sie, Ihnen ihren großartigen Preis zu verkaufen, indem sie einen großen Kreis dahinter setzen.
Positionskontrast
Die Erstellung eines Kontrasts in der Positionierung ist eine sehr einfache Methode, um eine Hierarchie von Elementen zu erstellen, indem nur unterschiedliche Ausrichtungen verwendet werden. In letzter Zeit wurde diese Technik von Leuten wie Elliot Jay Stocks populär gemacht, die es auf seiner jüngsten Portfolio-Site bis zum Äußersten verwendeten.
Elliot Jay Stocks verwendet ein detailliertes Raster, um die Ausrichtung aller Elemente auf seiner Website zu definieren. Aufmerksamkeit wird auf bestimmte Bereiche gelenkt, indem sie nach links bzw. nach rechts eingerückt werden. In diesem Screenshot sticht der einleitende Absatz besonders hervor, da er am weitesten links ausgerichtet ist, wo das Auge zuerst etwas liest. Diese Art der Ausrichtung hat viele andere Designer in den vergangenen zwölf Monaten dazu inspiriert, Designs mit positionellem Kontrast in der gleichen Art von Stil zu erstellen.
SimpleBits ist die Marke, unter der Dan Cederholm arbeitet, Sie kennen ihn vielleicht von Projekten wie Dribbling . Bei ersten Impressionen scheint die SimpleBits-Seite keinen Positionskontrast zu haben. Wenn Sie jedoch mit dem Scrollen beginnen, wird alles klar. Wo manche Leute ein festes Hintergrundbild verwenden, um einen ordentlichen Stileffekt zu erzeugen, hat Dan sein Logo und seine Navigation komplett in Position gebracht, so dass sie unabhängig davon, wohin Sie scrollen, immer an der gleichen Stelle auf dem Bildschirm bleiben. Dies ist ein großartiges Beispiel für nicht standardmäßigen Positionskontrast.
SquaredEye ist der Design-Shop von Matthew Smith und die Fallstudien-Seiten in seinem Portfolio nutzen den Positionskontrast. Sie müssen die ganze Seite sehen, um wirklich auf die Idee zu kommen, aber im Wesentlichen hat Matthew für jeden Abschnitt der Seite eine genaue Positionierung erstellt. Dies erzeugt einen fantastischen Kontrast zwischen den Abschnitten und erzeugt ein großes visuelles Interesse für den Leser, ohne überhaupt ablenkend zu wirken.
Kontrast Fazit
Es gibt so viel mehr zu kontrastieren als nur "hell und dunkel" - es ist eines der wichtigsten Prinzipien im Design und Sie können fast nie zu viel davon haben, vorausgesetzt Sie verwenden es richtig.
Wenn Sie Ihre Entwürfe auf die nächste Ebene bringen, geht es nicht darum, den nächsten Bandwagen zu finden, in dem abgerundete Ecken und Schatten für alles verwendet werden. Es geht darum, bessere und effizientere Wege zu finden, die Botschaft hinter dem Design zu kommunizieren.
Den Kontrast im Detail zu erforschen und ihn voll auszuschöpfen, ist eine der besten Möglichkeiten, dies zu erreichen.
Was denken Sie? Wie viel Aufmerksamkeit zahlen Sie für den Kontrast in Ihren Entwürfen? Ist es etwas, an das du die ganze Zeit denkst oder ist es etwas, das natürlich kommt?