Webdesign: Transparenz als Gestaltungselement (mit Best Practices)

Kein Beitragsbild

Johannes Kallweit

Johannes Kallweit entschloss sich, nach seiner Ausbildung zum Mediengestalter noch ein Studium...

Transparenz ist mittlerweile ein großer Trend im Webdesign, nachdem der überwiegende Teil der Browser diese auch darstellen kann. Transparente Teile einer Website werden entweder eingesetzt, um Akzente zu setzen oder den Fokus auf einen bestimmten Bereich zu lenken. Dieses können etwa Bilder, aber auch Textpassagen sein. Leider kann man bei der Entwicklung von Webseiten mit transparenten Effekten einiges falsch machen. Daher zeigen wir Ihnen heute, worauf Sie achten sollten, damit Ihnen eine stimmige Website mit Transparenz gelingt.

transparenz-webdesign-teaser

Transparenz im Webdesign

Transparenz kann auf zwei Wegen erreicht werden, durch den Einsatz von transparenten .PNG-Dateien oder durch reines CSS. Letztere Vorgehensweise verbreitet sich immer mehr, da alle modernen Browser Transparenzen per CSS anzeigen können. Der Einsatz dieser Effekte dient dazu, bestimmte Bereiche kontrastreicher und deutlicher darzustellen und den Besucher einer Website auf vorgegebene Inhaltsblöcke zu lenken. Vielleicht ist der Einsatz von alphatransparenten PNGs einfacher, doch die besseren Ergebnisse werden zumeist mit der CSS-Lösung erzielt. Immer jedoch bleibt es Ihnen überlassen, wie Sie es realisieren möchten. Das CSS3 bietet gerade in der Entwicklungsphase eine schnellere und bessere Möglichkeit der Anpassung, da nur eine Zeile Code angefasst werden muss, um eine schnelle Änderung herbeizuführen. Eine schnelle Änderung der Transparenz geht so wesentlich einfacher vonstatten.

Vielleicht ist der Einsatz von alphatransparenten PNGs einfacher, doch die besseren Ergebnisse werden zumeist mit der CSS-Lösung erzielt. Immer jedoch bleibt es Ihnen überlassen, wie Sie es realisieren möchten. CSS3 bietet gerade in der Entwicklungsphase eine bessere Möglichkeit der Anpassung, da nur eine Zeile Code angefasst werden muss, um eine schnelle Änderung herbeizuführen.

Transparenz mittels CSS3 einsetzen

Transparenzen werden durch die Unterstützung von CSS3 mit seiner RGBA-Farbdefinition mehr und mehr üblich. Das A in RGBA steht hierbei für den transparenten Kanal. Wenn er auf 0,5 eingestellt ist, heisst dass, dass die Hintergrundfarbe zu 50% transparent ist. Hierbei muss jedoch immer auf ältere Browser geachtet werden, falls man sie noch unterstützen muss. Die Deckkraft in CSS3 kann im Übrigen auf Bilder, Texte, Hintergründe und Div-Elemente und so weiter angewendet werden. Jedoch ist der häufigste Weg zur Anwendung von Transparenzen immer noch das gute, alte alphatransparente PNG. Reine CSS-Lösungen laden aber schneller, allein deswegen sollte man sie in Betracht ziehen.

Vorsicht bei mehrfarbigen Hintergründen

Bei der Verwendung von mehrfarbigen Hintergründen kann es für Webdesign-Anfänger und manchmal sogar für Profis in diesem Bereich schwierig werden, denn es können durchaus Ergebnisse auftreten, die “suboptimal” sind. Generell eher vorsichtig sollte man mit der Transparenz von Fotos sein, dass kann mitunter schnell in die Hose gehen. Hier eine Liste mit beispielhaften Websites, die Transparenzen mal mehr, mal weniger gut einsetzen.

Transparente Elemente

Suavia

Eine Website, die es richtig macht, jedoch trotzdem noch verbesserungswürdig erscheint. Auf der Startseite haben die Designer (fast) alles richtig gemacht. Es nerven beim Herunterscrollen nur der riesige Whitespace und das nicht optimal funktionierende JavaScript, was das Scrollen verhindern sollte. Denn unterhalb des Viewports befinden sich keinerlei Inhalte mehr.

Doch kommen wir zur wunderschön gestalteten Startseite:

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Suavia

Nur auf den zweiten Blick fällt hier auf, dass der transparente Bereich einen Tick zu transparent gewählt wurde. Auf einer Unterseite jedoch ist der bereits oben angesprochene “suboptimale” Effekt zu sehen, denn es wird ein mehrfarbiger Hintergrund gewählt, ohne die Transparenzen anzupassen.

Suavia

Die Lesbarkeit der Inhalts-Box leidet doch schon etwas. Hier hätte man mit etwas weniger Tranzparenz mehr erreicht.

Interior CMS-Template

interior motocms

Dieses Template setzt nicht viele transparente Effekte ein, die wenigen jedoch sehr gut. Die Wirkung von Bild und Aussage wird unterstrichen und verdeutlicht. So soll es sein.

Blurb Creative

Blurb-Creative

Blurb ist eine Webdesign-Agenur aus dem englischen Yorkshire. Hier wurde alles richtig gemacht, die Transparenzen wurden nur als unterstützender Effekt eingesetzt, jedoch der Fokus auf die Lesbarkeit des Inhalts niemals aus den Augen gelassen.

Reichhaltige Transparenzen

Die perfekte Transparenz gibt es nicht. Jedes neue Design ist etwas  besonderes und erfordert daher eigene Einstellungen und Transparenzen. Testen Sie die Möglichkeiten durch, die Ihnen CSS3 bietet. Denn damit können Sie einmal getätigte transparente Einstellungen in Sekunden ändern und andere ausprobieren. Sie werden mit Sicherheit “Ihre” Transparenz finden. Wenn Sie mehrere Bereiche der Webseite transparent gestalten müssen, probieren Sie ruhig mehrere Stufen der Durchsichtigkeit aus, denn manche Projekte erfordern unterschiedliche Einstellungen auch bereits auf ein und derselben Seite.

Generell lässt sich sagen, dass Sie den Fokus auf Lesbarkeit und Benutzerfreundlichkeit legen sollten. Ansonsten sind die Besucher schnell brüskiert und entsagen dem Besuch auf Ihrer Website für die Zukunft. Bei einem Inhaltsbereich, welcher sich auf den Hauptinhalt legt, sollte zumeist recht wenig Transparenz gewählt werden, um den Inhalt hervorragend lesbar zu gestalten. Einige Beispiele hierfür:

Pizza-za

Resto-Hull

Hier wird alles richtig gemacht. Viele transparente Bereiche wechseln sich mit Animationen ab – witziges Konzept und gut umgesetzt.

West City Hotel

West-City-Hotel

Hier unterstützt die vorsichtig gewählte Transparenz des Hauptinhaltsbereichs die Lesbarkeit des Inhalts. Das sieht nicht nur ansprechend aus, sondern ist auch benutzerfreundlich.

Sorgfältig gewählte Transparenzen

Hier werden transparente Bereiche mit Vorsicht und sehr sorgfältig gewählt eingesetzt. Manches Mal, um etwas hervorzuheben, ein anderes Mal, um einen bestimmten Effekt zu erreichen, wie im Beispiel von GO4 Events.

GO4 Events

GO4-Events

GO4 Events hat nur eine einzige transparente Stelle in ihrer Website, den Header-Bereich um das Logo herum. Dieser Bereich fügt sich jedoch nahtlos in die “normalen” Elemente der Seite ein und unterstützt sie mit diesem kleinen Schmankerl.

Brad Colbow

Brad-Colbow

Auch der Illustrator Brad Colbow setzt transparente Elemente vorsichtig ein, er nutzt diese Bereiche nur zur Hervorhebung seiner Überschriften und er tut gut daran. Denn die Überschriftselemente betonen diesen Bereich und setzen Akzente, ohne aufdringlich zu wirken.

Body Shop ATL

Bodyshopatl

Der Body Shop ATL setzt eine Transparenz an drei Stellen ein, dem Logo und der Leiste unterhalb des Hero-Bereichs (die großen Fotos). Hinzu kommt noch der kleine Bereich in der rechten Bildhälfte mit der Telefonnummer des Unternehmens. Transparenz wird hier zum Unterstreichen und zum Betonen genutzt und nicht als Selbstzweck.

Fazit

Transparenzen im Webdesign zu nutzen, bietet sich bei den heutigen Möglichkeiten direkt an. Dabei sollten sie kein Selbstzweck sein, sondern nur unterstützend verwendet werden. Erst dann kommen die Effekte richtig zur Geltung und man erreicht das, was man erreichen möchte: eine interessante Website. Dieser Beitrag soll Ihnen einige Beispiele an die Hand gegeben, wie man es richtig macht. An einem Beispiel habe ich aufgezeigt, wie man es besser machen könnte. Ich bin mir sicher, dass Sie Ihren Mittelweg finden.

Links zum Beitrag

(dpe)

Johannes Kallweit

Johannes Kallweit entschloss sich, nach seiner Ausbildung zum Mediengestalter noch ein Studium der Betriebswirtschaftslehre anzuhängen. Er hoffte, sich als Freelancer im Medienbereich das Studium finanzieren zu können. Inzwischen hat die Realität ihn eingeholt. So ein Studium ist doch verflixt anstrengend.

wpDiscuz