Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

15 inspirierende Beispiele für Transparenz im Webdesign

Transparenz-Effekte entfalten im Zusammenspiel mit eindrucksvollen Bildern und Grafiken ihre volle Wirkkraft. Wir haben eine Auswahl interessanter Beispiele gefunden und aufbereitet. Lasst euch inspirieren!

tripwire magazine hat 15 Beispiele für Transparenz-Effekte im Webdesign zusammengetragen und analysiert. Da die meisten gängigen Browser diese Effekte mittlerweile unterstützen, werden sie immer öfter eingesetzt um Akzente zu setzen und sich vom Standard abzuheben. Besonders verbreitet ist der Einsatz transparenter PNGs. Diese machen es einfacher, die Transparenz-Effekte browserübergreifend darzustellen. Ein Wandel in Richtung reiner CSS-Lösungen ist jedoch abzusehen.

Die Sammlung soll der Inspiration dienen und zeigen wie Transparenz-Effekte wirkungsvoll eingesetzt werden können. Wir haben die besten Beispiele herausgesucht und in diesem Artikel zusammengestellt.

Beispiele für Transparenz im Webdesign

Blurb Creative, eine Agentur aus Yorkshire, setzt auf der gesamten Webseite Transparenz-Effekte ein. Die dunklen Farben wirken damit besonders edel. Vereinzelt werden aber auch starke Kontraste eingesetzt, um für Aufmerksamkeit zu sorgen.

Die schottische TV-Produktionsfirma Raise the Roof setzt Transparenz besonders clever ein. Die Illustration im Header trennt Navigation und Content und verzichtet auf eine klare Linie. Dadurch wird ein freundlicher, verspielter Eindruck erzeugt.

,

Rodrigo Bressane, ein brasilianischer Fotograf und Designer, stellt seine Arbeit durch die Transparenz-Effekte in den Mittelpunkt. Dieser intensive Einsatz im Content-Bereich der Website kann jedoch negative Auswirkungen auf die Usability der Website haben. Hier ist also Vorsicht geboten.

Go4 Events aus den Niederlanden nutzt im Header ein PNG mit 1 Pixel Breite, das durch repeat-x im CSS vervielfältigt wird, um den Container #page horizontal zu füllen. Dadurch lädt die Grafik schneller, hat aber dennoch den gewünschten Transparenz-Effekt.

Die Webseite des Musikers Gavin Castleton setzt auf eindrucksvolle Hintergrundbilder. Transparenz-Effekte werden durch den Einsatz von PNGs auf fast jeder Seite genutzt, um die Wirkkraft dieser Bilder voll auszuschöpfen.

Alle 15 Beispiele findet ihr beim tripwire magazine.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Mario Steuck

Die Website von Gavin Castleton ist sehr gelungen. Das geteilete Bild vom Kopf ist eine super Idee. Auch grafisch sehr professionell umgesetzt.

Kai Uwe

Ich habe auch gesehen, dass mit HTML5 so einiges möglich ist. Sieht echt phänomenal aus :)

floriansoehl

Sehr gute Beispiele...

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst