Es gab Zeiten, da waren Verläufe in Designs verpönt: „Hat der Grafiker nix drauf, macht er schnell einen Verlauf“. Spätestens seit dem typischen web2.0-Stil, bei dem Logos und die Screendesigns mit Spiegelungen, Schatteneffekten und Verläufen versehen wurden, gehören Verläufe zu fast jedem Screendesign dazu. Aber: Verlauf ist nicht gleich Verlauf!

Die Hauptwirkung eines Verlaufes liegt vor allem in der dadurch entstehenden räumlichen Tiefe. Neben Texturen und Bildern bieten Verläufe damit eine großartige und vor allem recht einfach einzusetzende grafische Möglichkeit Webdesigns eine Haptik zu geben. Und diese Haptik sorgt entscheidend für die Wirkung des Webdesigns auf den Betrachter.

 

Gelungene Beispiele für Verläufe in Screendesigns:

 

 

Allen Beispielen gemein ist der fast unmerkliche Einsatz von Verläufen, die sich zwischen zwei sehr sehr ähnlichen Farbwerten vollziehen. Damit wird eine dezente räumliche Tiefe erreicht, welche die Webdesigns aber (dezent) lebhaft machen.
Von dieser Art Verläufe wimmelt es nur so im Netz. Man könnte fast sagen sie gehören zum modernen Webdesign-Standard.

 

 

Hier kommen die Verläufe wesentlich markanter zum Einsatz. Sie sind Gestatungsmittel, die das Design wesentlich prägen. Ohne sie wären diese Designs nicht die gleichen! Gerade diese markanten Verläufe waren lange verpönt, gezielt eingesetzt, aber eben ein schönes Stilmittel. Und – siehe die Beispiel – inzwischen absolut salonfähig.

Gelungene Beispiele für Verläufe in grafischen Elementen:

Wenn es ein grafisches Element gibt, dass seit Angebinn des Internets von und mit Verläufen lebt, dann der Button! Jeder wird sich noch an die die 90er Jahre-Buttons erinnern, denen keine Farbkombination und Effekt zuviel war:

Aber eben seit web2.0-Zeiten haben diese Art der Buttons (fast) eine Renaissance bekommen. Starke Verläufe mit entsprechenden Schatteneffekten sind wieder allgegenwärtig. Aber zu Recht! Gerade für die sogenannten „Call-to-Actions“-Links sind diese Art der Buttons inzwischen unverzichtbar:

Und dezente Verläufe finden sich auch in Navigationsleisten oder kleineren inhaltlichen Einheiten, die sich damit klarer von den anderen Inhalten abgrenzen können. Hier liegt die Verlaufsgestaltung im Detail und gerade auf die Details kommt es ja oft an:

Nicht gelungene Beispiele für Verläufe:

 

 

 

Was macht diese Beispiele zu nicht gelungenen? Schwierig, denn dass man etwas nicht schön findet zu sagen, ist ja leichter, als zu begründen warum. Aber die gezeigten Verläufe, von denen es noch viel zu viele gibt, sind vor allem handwerklich schlecht umgesetzt. Zu oft wirken die Farben im Verlauf nicht harmonisch. Zwei Farben, die als Vollfäche nebeneinander harmonieren würden, müssen noch lange keinen schönen Verlauf ergeben! Dann sind die beiden Farben, aus denen sich der Verlauf ergibt, im Farbkreis zu weit auseinander, so dass ein sehr markanter Verlauf entsteht. Im Vergleich zu oben gezeigten gelungenen Beispielen sind die Verläufe hier aber nicht wirklich Gestaltungselemente, sondern wirken mehr wie der fast schon verzweifelte Versuch, irgendwas aus der Farbfläche zu machen. Alleine um des Gestaltens Willen. Harmonie schaut anders aus!

 

Beispiele für Screendesigns ohne Verläufe:

 

 

 

 

Einfarbige Flächen wirken ja im ersten Moment flach, fast leblos. Bei der Inflation an Verläufen aber auch irgendwie angenehm. Und das Beispiel Microsoft zeigt, dass diese Art der Gestaltung zum Stilmittel erhoben werden kann, bzw. sondern einen Namen (Metro Design) bekommen kann. Microsoft setzt es als klaren Kontrast zum auch sehr von Apple geprägten Design der Verläufe und Schatten ein. Und für viele andere Unternehmen und deren Webseiten sicherlich auch ein Differenzierungselement!

Fazit

Verläufe sind ein wichtiges, fast unverzichtbares Mittel zur Gestaltung von Webdesigns. Wie bei allen anderen Gestaltungsmitteln kommt es auf den gezielten Einsatz an. Und aus eigener Erfahrung würde ich sagen, die Mischung aus Verläufen und einfarbigen Elementen machts!

 

Inspirierende Seiten für Verläufe:
71 Gradient Resources for Web Design
25 Great Examples of Using Gradient Effects in Web Designs
55 Inspiring Examples of Gradients in Web Design

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.