Dies ist keine typische Zusammenfassung von Texturen, die für Website-Hintergründe verwendet werden. Wenn Sie nach einer bestimmten Textur suchen, haben wir diese hier. Aber was ist, wenn Sie Ihre eigenen erstellen möchten? Oder eine Möglichkeit finden, eine Textur an Ihr Projekt anzupassen? Darauf konzentrieren wir uns heute.
Obwohl es viele Möglichkeiten gibt, Texturen im Webdesign zu verwenden, können Sie aus diesen Hintergründen viel mehr Kilometer ziehen, wenn Sie einen modernen Ansatz wählen und einige einfache Regeln beachten. Hier sind sieben Tipps, die Ihnen helfen, Hintergrundtexturen im Webdesign gut zu verwenden (und in Einklang mit 2018 Designmustern und Trends).
1. Gehen Sie einfach und verständlich
Eine großartige Hintergrundtextur wird von vielen Benutzern möglicherweise nicht einmal bemerkt. Es sollte ein nahezu unsichtbares Element sein, das zur allgemeinen Lesbarkeit und Benutzerfreundlichkeit beiträgt und gleichzeitig Tiefe oder visuelles Interesse schafft.
Einfache und dezente Hintergrundtexturen sind der perfekte Weg, um dies zu tun. Bei einer Veranstaltung Ende letzten Jahres verwendete die Universumskonferenz von Github ein Design, das einen einfachen schwarzen Hintergrund mit weißen Punkten enthielt. Der Nachthimmeleffekt tritt wirklich in den Hintergrund, so dass das lustige Verlaufslogo und Ereignisinformationen leicht zu finden sind.
Einfache Hintergrundtexturen tendieren zu kleinen oder engen sich wiederholenden Mustern und können fast jede Farbe haben. Die Idee ist, dass diese Hintergrundtexturen kein Schwerpunkt sind; Sie dienen dazu, die Aufmerksamkeit auf den Rest des Designs zu lenken.
2. Gehen Sie groß und fett
Vielleicht ist subtil nicht dein Ding. Wenn dies der Fall ist, entscheiden Sie sich für eine große und fette Hintergrundtextur oder ein Muster.
Diese überlebensgroßen Stile eignen sich für Designs, bei denen der Vordergrund mehr Text- oder Benutzeroberflächenelemente enthält und es keine konkurrierenden Bilder gibt, mit denen Sie sich befassen müssen. Die Verwendung dieser Art von Hintergrundtextur kann schwierig werden, vom Erstellen eines für den Benutzer unsichtbaren Kachelmusters bis zum Hintergrund, dass der Hintergrund nicht versehentlich zum Hauptschwerpunkt des gesamten Designs wird.
Um sicherzustellen, dass Ihre übergroße Hintergrundtextur funktioniert, sollten Sie einmal die Analyse- und Benutzergewohnheiten im Auge behalten, um die Änderung vorzunehmen. Ein starker Rückgang des Datenverkehrs oder der Conversions ist ein Zeichen dafür, dass Sie visuell und Benutzer möglicherweise keine Verbindung herstellen.
3. Binden Sie einen Trend ein
Eine Hintergrundtextur mit einem Trend kann dazu führen, dass sich Ihr Design supermodern und frisch anfühlt.
Mit den geometrischen Formen, die derzeit im Trend sind, ist es kein Wunder, dass die Website von Apacio ansprechend ist. Mit einer Mischung aus hell gefärbter Geometrie auf dunklem Hintergrund erzeugt das Muster eine schöne Textur und Tiefe, die dem Benutzer hilft, sich auf den großen Text zu konzentrieren und Maßnahmen zu ergreifen, da diese Elemente einen Kontrast zum Hintergrund bilden. Der Text - einfache serifenlose Beschriftung - scheint sich von den grünen Formen abzuheben.
Die Schichtung von Texturen trägt ebenfalls zu diesem Gesamteffekt bei. Beachten Sie, dass Farbe zwei Hintergrundebenen mit dunkleren Elementen hinter hellere Elemente.
4. Verwenden Sie ein Bild
Eine Hintergrundtextur muss kein sich wiederholendes Muster sein, das Sie von einer Download-Site ziehen. Einige der besten Hintergrundtexturen sind Bilder, die sich auf die Marke oder die Hauptnachrichten beziehen, um das visuelle Interesse und das Engagement zu erhöhen.
Der Trick besteht darin, das Bild effektiv in den Hintergrund zu bringen. (Und das bedeutet nicht unbedingt, dass eine Fade-Technik verwendet wird.) Wenn Sie das Bild ausblenden, wird es aus dem Hauptbildbereich heraus und in die Ferne verschoben.
Im obigen Beispiel führt Oxeva dies auf zwei Arten aus: Es verdunkelt das Foto, sodass nur Umrisse des Stadtbilds sichtbar sind, und es verwendet eine kräftige Farbbehandlung im Vordergrund, um das Auge auf natürliche Weise zu zeichnen. Das Foto hat auch eine gewisse Unschärfe, so dass das Bild erkennbar ist, jedoch nicht mit einer Detailgenauigkeit, die feine Punkte des Fotos wichtig macht.
5. Verwenden Sie Farbvariationen
Mischen und passen Sie Farbtöne und Farbtöne aus derselben Farbpalette an, um aus Buchstaben oder Formen eine mutige Textur zu erzeugen. Farbvariationen, auch solche aus derselben Familie, können Tiefe und visuelles Interesse erzeugen.
Schriftarten verwenden eine lustige Kombination von Farben mit riesigen Buchstaben, um die Hintergrundtextur zu erstellen. Auch ohne Techniken wie Farbverläufe oder Schatten stellen die Linien aus Buchstabenformen Tiefe und Ausgewogenheit her, während sie den Blick auf die Farben der Hintergrundfarbe und die Hauptüberschrift lenken.
6. Nimm einen Farbverlauf
Farbverläufe sind trendy und optisch ansprechend. Wenn Sie einen Verlauf als Hintergrundtextur verwenden möchten, können Sie ihn alleine verwenden oder mit einem Foto überlagern.
Nahezu jede Farbkombination ist möglich, daher ist die Verwendung von Farbverläufen zum Erstellen von Textur und Tiefe nicht schwierig. Sie können eine von Ihnen geliebte Farbkombination von WebGradients finden, wenn Sie nicht bereits mit Farbfeldern arbeiten möchten.
Mobipaid verwendet mehrere subtile Farbverläufe, um Tiefe und Textur im Hintergrund zu erzeugen. Animierte Animationen im Vordergrund springen fast von den Farbverläufen ab und der dunkle Handlungsaufruf ist leicht zu erkennen. Hellere und dunklere Bereiche in der Verlaufstextur helfen dem Benutzer, sich auf einen Blick durch das Design zu bewegen.
7. Animieren Sie es
Während sich viele Tipps auf statische Hintergrundelemente konzentrierten, gibt es keine Regel, die besagt, dass ein Hintergrund nicht dynamisch sein kann.
Um diese Art von Hintergrundtextur optimal zu nutzen, sollte die Bewegung subtil sein, so dass das Hauptbild oder das Messaging nicht beeinträchtigt wird. Das Hinzufügen einer gedämpften oder subtilen Farbpalette, wie z. B. das lettische Alphabet, ist ebenfalls eine gute Option.
Diese Animation kann Elemente enthalten, die sich bewegen, verdrehen oder drehen, oder ein Video. Bewegung ist eine gute Möglichkeit, die Aufmerksamkeit der Benutzer auf sich zu ziehen. Machen Sie das Beste aus einer animierten Hintergrundtextur, indem Sie sicherstellen, dass diese Bewegung den Vordergrund des Designs nicht überfordert.
Fazit
Eine großartige Hintergrundtextur kann Ihrem gesamten Website-Design Tiefe und visuelles Interesse verleihen. Während viele Designer immer noch flachere Hintergründe verwenden (z. B. einfarbig), können Sie durch Hinzufügung einer Textur das Projekt hervorheben.
Der Trick bei der Verwendung von Texturen besteht darin, dass sie subtil sein müssen und tatsächlich in den Hintergrund fallen, sodass Vordergrundelemente leicht lesbar und verständlich sind. Das kann eine ziemlich heikle Balance sein. Denken Sie daran, viel Kontrast zwischen Hintergrundtexturen und Vordergrundbildern, Benutzeroberflächenelementen und Text zu erstellen, um die Wirkung des gesamten Designs zu maximieren.
Hintergrundtexturen
Die Auswahl der richtigen Hintergrundtextur für Ihre Website oder Ihr Designprojekt kann schwierig sein. In unserer Serie lernen Sie, wie Sie mit Hintergrundtexturen arbeiten und diese integrieren, und wo Sie atemberaubende Grafiken finden, mit denen Sie arbeiten können.