Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Wie Euch allen kaum entgangen sein dürfte, flaut der Glossy-Trend im Web (zum Glück) ein wenig ab. Die Zeiten in denen selbst Stofftiere auf Hochglanz poliert wurden neigen sich vielleicht dem Ende zu.
Nichts desto trotz werden nach wie vor Objekte im Untergrund gespiegelt um einen cleanen und modernen Eindruck zu vermitteln. Dieser Effekt nennt sich übrigens „Wet-Floor“. Schade, dass gerade diese Spiegelungen so oft gnadenlos falsch gemacht werden. Ebenso schade, dass es offenbar keinem – nicht einmal den Designern – aufzufallen scheint.
Da mir dieser Zustand langsam aber sicher auf die Nerven geht folgen nun 10 Tipps zur blamagefreien Erzeugung von Spiegelungen.

Basics – 2D-Spiegelung

Der Effekt Objekte im Boden zu spiegeln nennt sich Wet-Floor. Hierbei sollten folgende Regeln immer beachtet werden:

Spiegelungen im Webdesign

Advanced – 3D-Spiegelungen

Die Spiegelung von dreidimensionalen Objekten ist schon etwas komplexer. Der häufigste Fehler tritt dadurch auf, dass versucht wird ein Objekt – z.B. von einem Foto – zu spiegeln. Sofern die Spiegelung nicht bereits im Foto vorhanden ist, muss diese am Computer nachträglich simuliert werden. An folgendem simplen Beispiel möchte ich Euch zeigen warum dies häufig nur durch aufwendige Retusche oder Illustration möglich ist.
Nehmen wir einmal an der Würfel wäre unsere Bildquelle und sollte nun gespiegelt werden. Eine simple Spiegelung an der X-Achse funktioniert nicht, da durch die Perspektive die hintere Ecke in der Spiegelung nicht die mehr die hintere Ecke im Ausgangsbild berührt und folglich beginnt zu schweben. Darüber hinaus sieht man in der Spiegelung immer noch die obere Fläche des Würfels, was perspektivisch unmöglich ist.
Die einzige Lösung in diesem Fall ist es die Spiegelung manuell zu erstellen. Bei diesem Würfel mag das noch schnell von der Hand gehen, werden jedoch komplexe Formen, beispielsweise ein Auto gespiegelt, so sollte man abwägen ob der Aufwand die erreichte Wirkung rechtfertigt. Eine falsche Spiegelung zu verwenden in der Hoffnung, dass es niemand merkt ist selbstverständlich keine Alternative…

Spiegelungen im Webdesign

Ebenso komplex ist die Spiegelung eines schwebenden, dreidimensionalen Objektes. Dadurch, dass das Objekt sich vom Boden entfernt muss der Boden des Objektes sichtbar werden. Da dieser ebenfalls selten bereits mit fotografiert wurde muss er künstlich simuliert werden.

Spiegelungen im Webdesign

Negativbeispiele

Fehler fallen erst auf, wenn man selbst weiß wie es richtig geht. Aus diesem Grund zeige ich Euch hier noch einige Negativbeispiele. Über weitere Links in den Kommentaren freue ich mich natürlich.
Auffallend finde ich, dass falsche Spiegelungen keinesfalls nur von Anfängern eingesetzt werden. Etablierte Firmen tappen hier leider ebenso oft ins Fettnäpfchen wie Start-Ups und Privatpersonen. Ob dies nun der Unkenntnis der Designer oder zu knapper Deadlines für Projekte zuzuschreiben ist bleibt ungeklärt.

Spiegelungen im Webdesign
Spiegelungen im Webdesign

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 10 Kommentare

  1. Alexander Ruch
    schrieb am 20.05.2011 um 23:50 Uhr:

    Das mit Yahoo! ist ja mal der Oberhammer :D

    Antworten
  2. HP
    schrieb am 26.10.2010 um 13:48 Uhr:

    danke, gute tips!

    eine gute online variante die das automatisch macht kann man bei http://www.blendel.com erleben.
    gute spiegelungen, auf welligem wasser oder ebenem boden, mit eigenem bild und waehlbaren farben.

    Antworten
  3. Der Wet Floor Effekt des Investmentforums Frankfurt | Wirkung von Internetwerbung
    schrieb am 31.08.2010 um 06:52 Uhr:

    […] gibts ein paar Tipps zur richtigen Spiegelung für die zuständige Agentur (obwohl ich hoffe, dass dafür kein Ged bezahlt […]

    Antworten
  4. ABL
    schrieb am 08.02.2010 um 16:07 Uhr:

    Die Tipps finde ich echt nützlich!

    Antworten
  5. Oliver
    schrieb am 08.10.2009 um 08:42 Uhr:

    Ich finde diese Tipps für mich als Neuling sehr wertvoll.
    Vielen Dank Jonas. :)

    Antworten
  6. Sven
    schrieb am 03.10.2009 um 15:27 Uhr:

    Gut gemacht, simple aber wichtige Basics.

    Das es selbst dann falsch gemacht wird wenn sich der „kreative“ bewusst Gedanken darüber macht sieht man an diesem nicht so alten Photoshop Disaster:

    http://photoshopdisasters.blogspot.com/2009/09/belgian-toy-store-hmm.html

    Antworten
  7. Twitter Trackbacks for 10 Tipps zu Spiegelungen im Webdesign | kulturbanause blog [kulturbanause.de] on Topsy.com
    schrieb am 03.10.2009 um 15:15 Uhr:

    […] 10 Tipps zu Spiegelungen im Webdesign | kulturbanause blog http://www.kulturbanause.de/2009/10/10-tipps-zu-spiegelungen-im-webdesign – view page – cached Kulturbanause – Realise your Fantasies. Privater Blog, Spielwiese und Online-Portfolio von Jonas Hellwig aus Düsseldorf, Deutschland. — From the page […]

    Antworten
  8. Flowsen
    schrieb am 03.10.2009 um 14:31 Uhr:

    Hey,

    toller Beitrag.
    Aber da hast du dir echt harte negativ-Beispiel ausgesucht.

    Man sieht aber auch gerade hier… spieglung, spieglung am Objekt, wers nicht richtig macht… verreckt. *äh* oder so.

    Ne ernsthaft… eine Spiegelung gerade an 3D Objekten ist nicht gerade einfach, und bei komplexen Objekten eher mit einem 3D Programm zu erstellen.

    Bei manchen Spiegelungen mach ich zwischen dem Objekt und der Spiegelung noch so eine weiche – ich nenne es mal schattenkante. Je nach objekt verleiht es diesem noch etwas Standhaftigkeit.

    Antworten
  9. René
    schrieb am 03.10.2009 um 13:31 Uhr:

    Zu lustig! :D Zum Glück habe ich einen solchen Fehler bisher noch nicht gemacht.
    Aber ma ganz ehrlich, dass die Spiegelungen bei den Autos falsch sind, müsste ja wohl jeder sehen o.O

    Antworten
  10. Duy
    schrieb am 03.10.2009 um 13:14 Uhr:

    Sehr cool!

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →