Articles

Inspirierende Webverläufe und wo sie zu finden sind

Webverläufe kommen zurück sind ZURÜCK als Designelement für die Online-Welt. Sie sind zu einer einfachen Möglichkeit geworden, Ihre Website zum Leben zu erwecken.

Wenn sie gut angewendet werden, geben sie dem Auge ein einheitliches Gefühl, das den Benutzer einlädt, auf der Website zu bleiben. Dieses Gefühl entsteht durch das Fehlen von scharfen Kanten und Brüchen in der Seitenstruktur.

web gradients - nyc_pride Wie Sie im obigen Beispiel sehen können, beruhigt der Gradient die Aktion des Hintergrundbildes, um es als Hintergrund für dieses UI-Design geeignet zu machen.

Möchten Sie den Grund dafür wissen?

Das Geheimnis ist, dass die Harmonie, die ein Gradient ausbreitet, von Phänomenen in der Natur herrührt, bei denen meist keine scharfen Kanten auftreten. Alles hat eine organische Form oder weiche Übergänge.

Außerdem haben Menschen ein großartiges Farbsehen und genießen es, Farben zu sehen. Stellen Sie sich einen Schwarz-Weiß-Farbverlauf vor. Es hängt vom Fall ab, aber höchstwahrscheinlich sieht es nicht so toll aus und bunte Farbverläufe werden in vielen Fällen bevorzugt.

Warum schaut jeder gerne Sonnenuntergänge?

web gradients - sunset gradient

Oder einfach nur den Kopf in den Himmel?

web gradients - nature gradient

Die Verwendung von Farbverläufen im Hintergrund einer Webseite kann auch eine diskrete Möglichkeit sein, den Blick des Besuchers durch den Inhalt zu führen, ohne störende Pfeile in den Vordergrund stellen zu müssen.

Der Vordergrund sollte ohnehin für die wichtigen Informationen genutzt werden und der Hintergrund kann einen untergeordneten Zweck erfüllen.

Angewendet auf Elemente wie Schaltflächen und Symbole können Farbverläufe auch zu einem einfachen 3D-Effekt führen.

Es ist nicht immer einfach, den passenden Farbverlauf zu finden und ihn mit all diesen Vorteilen richtig anzuwenden.

Keine Sorge. Es gibt eine Lösung.

Es gibt viele Tools online, die bereits viele vorbereitete Farbverläufe anbieten, entweder nur zur Inspiration oder direkt, um sie einfach in Ihre Website zu integrieren.

Jetzt müssen Sie nur noch herausfinden, welches Tool am besten zu Ihren Anforderungen passt.

Los geht’s.

Inspirierende Webverläufe…

Webverläufe - symodd

Wie bereits erwähnt, ist symodd ein klassisches Beispiel dafür, wie gute Webverläufe als einfacher Hintergrund funktionieren können, der sowieso interessant und auffällig ist.

web gradients - qards

Verwendet Qards nicht nur als Hintergrund, sondern wird auch auf fast jedes einzelne Element angewendet, insbesondere auf die Symbole und Schaltflächen.

web gradients - gogoro

Gogoro verwendet einen Farbverlauf in einer Form, die ihn dynamischer macht und den Zweck der Marke unterstützt.

Wie Sie auf diesen Websites sehen können, geht es darum, die richtige Balance zu finden und Farben in Maßen zu verwenden.

Kein inspirierender Farbverlauf:

web gradients - badExample

Dieser Farbverlauf ist so hässlich, dass ich mich hier entschuldigen muss, weil er dem Auge so weh tut. Es hat zu viele Farben, die alle sehr unterschiedlich sind. Außerdem sieht der einfache schwarze Text im Vordergrund verschoben aus und wird durch den Farbverlauf unterdrückt.

Wenn Sie also nach diesen Beispielen immer noch nicht ganz sicher sind, ob Sie einen Farbverlauf anwenden können, der Ihr Projekt so unterstützen kann, wie es sollte, können Sie tiefer in das Web- und Grafikdesign einsteigen.

Nicht genug?

WEB DESIGN PROFESSIONAL

Erfahren Sie mehr über unseren Signaturkurs.
Wählen Sie den besten Zeitplan
ONLINE oder in der Schule zu studieren.

KURS ANSEHEN

Befolgen Sie diese Anleitung von, um ein besseres Verständnis der Verlaufstypen zu erhalten und Ratschläge zu Best Practices zu erhalten.

…und wo sie zu finden sind

Web gradients - uiGradients
web gradients - uiGradients

uiGradients ist sehr einfach zu bedienen, da es nur zwei Hauptbildschirme hat. Nach dem Laden können Sie direkt einen zufälligen Farbverlauf auf dem gesamten Bildschirm sehen.

Mit den Pfeilen an den Seiten können Sie innerhalb des großen Angebots aller Arten von Verläufen wechseln. Der zweite Bildschirm zeigt alle Verläufe als Liste zum Scrollen und Sortieren nach Farbe.

Die Atmosphäre, die die Webverläufe erzeugen, wird durch ihren individuellen Namen unterstützt. Als Besonderheit können Sie Ihren Farbverlauf auch drehen, um zu sehen, wie er aus einer anderen Perspektive aussieht.

Für Personen, die ihren erstellten Farbverlauf zur Community beitragen möchten, besteht die Möglichkeit, Ihren Farbverlauf über GitHub zur Sammlung hinzuzufügen. Dies macht die Vielfalt der Farbverläufe nahezu unbegrenzt.

uiGradients bietet drei Möglichkeiten, den gewählten Verlauf zu speichern. Wenn Sie den Farbverlauf in einer Grafikdesign-Software oder einem Code neu erstellen möchten, können Sie einfach den Hex-Farbcode kopieren.

Für eine direkte Implementierung in Ihre Website können Sie den CSS-Code erhalten.

Um den Verlauf als Inspiration zu speichern, laden Sie einfach die JPEG-Datei herunter.

WebGradients

webgradients - WebGradients

Dieses Tool zeigt zunächst die Sammlung von 180 Webgradients als lange Liste an, durch die Sie scrollen können. Sobald Sie mehr von einem Farbverlauf sehen möchten, klicken Sie einfach auf Ihre Auswahl und die Farbe wird auf Ihrem gesamten Bildschirm angezeigt.

Jeder Gradient hat einen Namen, so dass er seine mögliche Anwendung später konkreter macht.

WebGradients wird von itmeo betrieben, einem Unternehmen, das mehrere digitale Tools online anbietet. Der Verlaufsservice ist in diesem Fall kostenlos, es sei denn, Sie möchten keine Skizze oder Photoshop-Datei herunterladen.

Wie in uiGradients haben Sie auch hier drei Möglichkeiten, Ihre neu gefundene Verlaufsinspiration zu speichern.

Für jeden Farbverlauf können Sie eine große PNG-Datei speichern, um sie als Hintergrund für Ihr eigenes Grafikdesign zu verwenden.

Um die genauen Farben und den Farbverlauf in einer Grafikdesignsoftware oder einem Code zu verwenden, können Sie den Hex-Farbcode kopieren oder die CSS-Version des Farbverlaufs abrufen.

coolHue

web gradients - coolHue

Diese Sammlung von Farbverläufen wird bereits beim ersten Öffnen der Website angezeigt. Sie können innerhalb von 60 bunten Farbverläufen wählen. Scrollen Sie einfach durch jeweils sechs Kacheln in einer Reihe dieser Farbverläufe.

Leider gibt es keine Möglichkeit, den Farbverlauf in voller Größe anzuzeigen.

Die nette Ergänzung für coolHue ist die Animation, wenn Sie mit der Maus über die Verlaufskacheln fahren, die Ihnen einen greifbaren Eindruck davon vermittelt.

Die Webverläufe sollen Ihnen ihre Atmosphäre nur durch die Farben vermitteln. Deshalb haben sie in diesem Tool keine Namen. Daher haben Sie in der unteren rechten Ecke mehr Optionen für Sketch und Photoshop.

Wenn Sie den Mauszeiger über den ausgewählten Verlauf bewegen, werden zwei weitere Optionen angezeigt. Sie können den CSS-Code für eine einfache Implementierung in Ihren Code kopieren oder eine kleine PNG-Datei herunterladen.

Wenn Sie die genauen Farben verwenden möchten, können Sie einfach den Hex-Farbcode unterhalb des Farbverlaufs kopieren.

ColorSpace

colorspace

ColorSpace bietet Ihnen die Möglichkeit, einen Farbverlauf in 10 verschiedenen Richtungen auszuwählen und anzuwenden. Um eine Farbe anzuwenden, können Sie aus dem angezeigten Farbmenü auswählen, genau wie in einer Bildbearbeitungssoftware. Sie können auch einen Hex-Farbcode der Farbe einfügen, um genau die Farben zu erhalten, die Sie verwenden möchten.

Der Farbverlauf wird über den gesamten Bildschirm auf den Hintergrund angewendet. Dies gibt Ihnen ein sehr gutes Gefühl für die Stimmung der Farben und motiviert Sie, die Farbe zu wählen, die Ihrer Meinung nach am besten zu dem relevanten Thema passt, nach dem Sie suchen.

Mit ColorSpace können Sie auch die URL Ihres gewählten Farbverlaufs kopieren. Dies macht es sehr einfach, die Farboptionen zu teilen, ohne eine Datei speichern zu müssen und sie dann als Anhang zu senden oder die Spezifikationen aus der Farbe zu senden. Sie können einfach sehen, was Sie sich angesehen haben, indem Sie auf den Link klicken, den Sie gesendet haben, und sie haben alle Informationen, die sie benötigen, die Hexadezimalcodes und den CSS-Code.

Wenn Sie es jedoch vorziehen, eine Bilddatei zu speichern, bietet Ihnen diese Website diese Option leider nicht.

Ultimativer CSS Gradient Generator

web gradients - Ultimativer CSS Gradient Generator

Nun kommen wir zu den komplexeren Tools, die in diesem Fall, wie der Name schon sagt, nur für die Integration in Ihren CSS-Code verwendet werden.

Das Interface ist in vier Teile gegliedert und erinnert an eine typische Grafikdesign-Software. Sie können Voreinstellungen anpassen oder erstellen, dieses Ergebnis in einer kleinen Vorschau anzeigen und sich den vollständigen CSS-Code ansehen.

Der ultimative CSS Gradient Generator ist Teil der Browsererweiterung ColorZilla. Das Verlaufstool bietet unbegrenzte Möglichkeiten zum Erstellen von Webverläufen.

Sie können beliebig viele Farben hinzufügen, Farbton und Sättigung anpassen, wie Sie es von Ihrer Grafikdesignsoftware kennen, den Farbverlauf umkehren und die Farben, Deckkraft und Position des Farbverlaufs einstellen.

Abgesehen davon können Sie Ihren selbst erstellten Verlauf in den Voreinstellungen speichern, es gibt nur eine Möglichkeit, ihn mit dem CSS- oder SASS-Code zu exportieren.

Aber vorher können Sie die Größe des Farbverlaufs einstellen, die Ausrichtung in verschiedene Richtungen ändern und das Farbformat aus fünf gegebenen Optionen auswählen.

Probleme zu entscheiden?

uiGradients WebGradients coolHue Gradientify Gradients.io CSS Gradient Generator
Full-screen view + + +
Switch in full-screen view +
List view + + + + + +
Amount of gradients almost unlimited 180 60 45 24 unlimited
Sort gradients by colour
Named gradients + + + +
Rotate gradient (change orientation) + +
Change colour opacity +
Change colour location +
More than two colours + +
Change hue/saturation +
Reverse colours + +
Adding new gradient + +
Import image +
Import CSS code + +
Change export size +
Hex Color Code + + + + +
CSS code + + + + +
Chose colour format (CSS) +
JPEG file 1920 × 1080
PNG file 2400 × 2000 500 × 500

Welches Webgradienten-Tool am besten zu verwenden ist, hängt immer von Ihrem Projekt, der Zeit, die Sie haben, und dem Grad der Individualität oder anderen Qualitätsanforderungen ab.

Die obige Tabelle kann Ihnen bei der Entscheidung helfen, welches Tool Sie am besten für das gewünschte Ergebnis verwenden sollten.

Erinnerst du dich an das Wichtigste?

Verwenden Sie nicht zu viele Farben – die beste Praxis von heute ist es, nur zwei Farben zu verwenden, die auch nicht zu unterschiedlich sind.

Was Sie auch beachten sollten, ist das allgemeine Design Ihres Farbverlaufs, die Art und Weise, wie Sie ihn später auf Ihr Projekt anwenden und wie er in seine Umgebung passt.

uiGradients bietet alle wichtigen visuellen Funktionen, wie Sie auf der Tabelle sehen können. Mit diesem Tool können Sie sich den Verlauf für Ihr Projekt bestmöglich vorstellen.

Wenn Sie den Farbverlauf für ein hochwertiges Webprojekt genauer anpassen möchten, können Sie uiGradients mit dem Ultimate CSS Gradient Generator kombinieren, indem Sie den CSS-Code oder das heruntergeladene Bild importieren.

Jetzt sind Sie bereit, es selbst zu tun. Wenn Sie sich entscheiden, mit Farbverläufen zu arbeiten, lassen Sie es uns bitte auf Twitter wissen.

WEB DESIGN PROFESSIONAL

Erfahren Sie mehr über unseren Signaturkurs.
Wählen Sie den besten Zeitplan
ONLINE oder in der Schule zu studieren.

KURS ANSEHEN

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.