Textur und Muster – Die unbesungenen Helden des visuellen Designs

Nov 26 2022
Es hat Spaß gemacht, Gemeinschaft (haha) im Ayagigs Web3 Fellowship zu haben, einem Lernprogramm, das in Zusammenarbeit mit Coinbase durchgeführt wird. Ich schätze die Arbeit von Product Design Lead, Ajiri Omafokpe, und Program Associate, Folushola Esther.

Es hat Spaß gemacht, Gemeinschaft (haha) im Ayagigs Web3 Fellowship zu haben, einem Lernprogramm, das in Zusammenarbeit mit Coinbase durchgeführt wird .

Ich schätze die Arbeit von Product Design Lead, Ajiri Omafokpe , und Program Associate, Folushola Esther . Sie haben wirklich viel getan, um das Programm einladend, lehrreich und unterhaltsam zu gestalten, und sie tragen die gesamte Gruppe mit, die Sie gerne sehen.

Wir sind mit der Gründungsphase fertig und gehen in die Hauptphase, aber davor hatten wir eine Herausforderungswoche, die am Montag, dem 21. November 2022, begann, um uns auf das zu testen, was wir während der Gründungsphase gelernt haben. Es war eine Herausforderung, alle Arten von Tests durchzuführen, einschließlich MCQs, QA, praktischer Test (Sie werden nicht glauben, dass dies in 2 Tagen erledigt wurde), wobei dieser Artikel die letzte Aufgabe für die Herausforderungswoche ist.

Ich habe viele Anfragen erhalten, über die Verwendung von Mustern und Texturen zu schreiben, also habe ich beschlossen, diese Gelegenheit zu nutzen, um mein Wissen zu diesem Thema zu teilen.

Also, fangen wir an,

Texturen und Muster sind visuelle Elemente, die im Design allgemein unverzichtbar geworden sind. Ich nenne sie unbesungene Helden, weil sie meist übersehen werden, aber von unschätzbarem Wert werden, wenn sie von dem neugierigen Designer entdeckt werden.

Es sind der Kunst entlehnte Elemente, die das digitale Design ergänzen und ein Gefühl von Tiefe vermitteln. Texturen können den Schlüsselinhalt der Webseite zeigen, indem sie die Sicht des Benutzers lenken. Muster können langweilige Räume lebendig aussehen lassen. Beide tragen wesentlich dazu bei, eine Benutzeroberfläche angenehm zu gestalten und somit die Benutzererfahrung zu verbessern.

Wenn Sie an Textur denken
Wenn Sie an Muster denken

Textur scheint jedoch lange Zeit als Design im „ GRUNGE “-Stil missverstanden worden zu sein. Auf vielen Webseiten können wir sehen, dass sie, um coole Effekte hervorzuheben, in großen Mengen verwendet und sogar des Missbrauchs verdächtigt werden. Das Ergebnis von Missbrauch ist, dass seine wirklichen Vorteile begraben werden. Um die Textur wirklich optimal zu nutzen, muss sie subtil und mit Absicht verwendet werden.

„GRUNGE“-Stil

Muster hingegen sind einfacher zu verwenden und können verwendet werden, um die Aufmerksamkeit auf bestimmte Bereiche des Bildschirms zu lenken. Wie Texturen sind Muster effektiv, wenn sie subtil verwendet werden, sie können jedoch bei Bedarf auf offensichtlichere Weise verwendet werden.

Muster, die auf offensichtliche Weise verwendet werden
Muster, die auf subtilere Weise verwendet werden

Die beiden Wörter werden manchmal vertauscht, was falsch ist. Sie teilen nur wenig Gemeinsamkeiten. Das Muster besteht normalerweise aus einigen kleinen sich wiederholenden Elementen mit einem bestimmten visuellen Rhythmus. Die Textur besteht aus größeren Elementen als das Muster, das sich nicht unbedingt wiederholt.

Anwendungsfälle von Texturen und Mustern

Texturen werden hauptsächlich beim Entwerfen für das Web und nicht für mobile Apps verwendet. Muster sind sowohl im Webdesign als auch im Design mobiler Apps beliebt. Der Grund für das Design darf nicht nur sein, dass es „ schön aussieht “, sondern sollte auf der Erfüllung einer bestimmten Funktion basieren, und der Hauptzweck der Verwendung von Texturen und Mustern während des Designs besteht darin, das Niveau und die Vision der Webseite zu verbessern. Werfen wir einen Blick auf einige ihrer Anwendungsfälle:

Ziehen Sie Benutzer zum Klicken an

Elemente wie Symbole, Schaltflächen, Titel usw. können alle texturiert werden. Es kann Benutzer dazu bringen, auf die entsprechenden Elemente zu klicken. Dies kann der Grund sein, warum die Verwendung von Texturen beliebt ist. Die Hauptanwendung von Texturen besteht darin, sie auf Elemente anzuwenden, damit sie von anderen Elementen im Web unterschieden werden können.

Die auf die Schaltfläche angewendete Textur lenkt die Aufmerksamkeit des Benutzers und hilft, sie vom Hintergrund abzuheben.
Das Muster auf dem Knopf zieht die Aufmerksamkeit des Benutzers auf sich.

Verbesserte visuelle Darstellung von Informationen

Da die Textur ebenso wie Linien, Kästchen und Kontrast zur Führung der Sichtlinie verwendet werden kann, kann sie auch für den Satz verwendet werden, um Inhalte gemäß bestimmten visuellen Regeln anzuzeigen. Gleichzeitig sollte der Textureffekt richtig verwendet und mit anderen visuellen Regeln koordiniert werden, und der endgültige Ausgabeeffekt wird großartig sein.

Großartige Verwendung von Texturen in einer Website

Gleichzeitig sollte die Textur perfekt auf den Stil und das Thema der Website abgestimmt sein. Zum Beispiel passen handgefertigte Websites zu Stoffmustern und gemalte Websites zu Papiermustern. Alle diese Elemente können den Inhalt der Website durch eine bestimmte Logikregel widerspiegeln und die gesamte Informationshierarchie stärken.

Atmosphäre schaffen und Individualität unterstreichen

Jetzt gefällt es immer mehr Kunden, dass ihre Website das Interface-Design nutzen kann, um mehr Informationen über sich selbst zu vermitteln. Sie erhoffen sich von der Website die Hervorhebung der eigenen Persönlichkeit und eine Markenwirkung. Textur und Muster sind mächtige Werkzeuge, um Individualität herzustellen.

Welcher Hintergrund vermittelt das Gefühl eines Malkurses?
Die Verwendung von Mustern trägt dazu bei, eine lustige Atmosphäre zu schaffen.

Halten Sie es lesbar

Lesbarkeit ist das Endergebnis, das eine Webseite beibehalten muss. Stellen Sie auch bei der Verwendung von Texturen sicher, dass der Inhalt leicht zu scannen und zu lesen ist. Selbst wenn es sich um eine schöne Webseite handelt, werden Benutzer sie nicht weiter verwenden, wenn die Lesbarkeit nicht gut ist. Vermeiden Sie unbedingt diese Situation, wie in der Abbildung unten gezeigt.

Achten Sie bei der Verwendung von Texturen immer auf Lesbarkeit
Es gibt keinen ausreichenden Kontrast zwischen dem Text und dem Muster, was den Text für die Benutzer weniger lesbar macht

Verwenden Sie die Textur sparsam

Wie bereits erwähnt, sollte Textur subtil verwendet und nicht missbraucht werden. Bei Webseiten müssen wir zurückhaltend sein und sie nicht in großem Umfang verwenden, um die Aufmerksamkeit der Benutzer auf den Hauptinhalt nicht zu stören.

Wenn wir die Textur missbrauchen, enden wir mit Unordnung

Übung macht den Meister

Probieren Sie mehr aus, wenn Sie Texturen und Muster verwenden. Erst nach dem Test wissen Sie das Endergebnis. Platzieren Sie die Textur an einer Stelle, an die Sie nie gedacht haben, und Sie werden möglicherweise verschiedene Dinge finden. Je mehr Sie Muster und Texturen verwenden, desto besser werden Sie.

Verwenden Sie es mit Absicht

Bei der Verwendung von Mustern und Texturen müssen Sie absichtlich vorgehen. Wie beim Design macht man es nicht um der Sache willen. Ihre Verwendung von Texturen und Mustern sollte ein Mittel zum Zweck sein.

Erkunden, erforschen, erforschen...

Es gibt Tausende von Websites, die großartige Texturen und Muster kostenlos anbieten. Verbringen Sie Zeit mit der Erkundung und Sie werden lieben, was Sie bekommen. Um beim Entwerfen viel Zeit zu sparen, glauben Sie mir, es ist die beste Lösung, in Friedenszeiten Backup-Ressourcen zu erstellen. Wenn die Zeit zum Entwerfen zum Herunterladen und Sammeln von Ressourcen verwendet wird, befürchte ich, dass Sie wenig Zeit haben werden.

Handverlesene Links zur Texturerkundung

365 Texturen zum Herunterladen (JPG, PSD, PAT, ABR) — WeGraphics

Hintergründe | GrafikBurger

Die Musterbibliothek

Ava7-Muster /// 1905 kostenlose nahtlose Hintergrundmuster

Handverlesene Links zur Mustererkundung

Kostenlose SVG-Generatoren, Farbwerkzeuge und Webdesign-Tools (fffuel.co)

Mustermonster – SVG-Mustergenerator

Subtile Muster | Kostenlose Texturen für Ihr nächstes Webprojekt (toptal.com)

Mustergenerator | Erstellen Sie nahtlose, lizenzfreie Muster (doodad.dev)

Vielen Dank fürs Lesen und einen schönen Tag!

Verweise

  • UXdesign.cc