Gestaltung für Decoder-Brillen, Druck und Web

Die Idee

Meine Firma, BlueHornet, sollte auf der Email Evolution Conference einen Keynote-Vortrag mit dem Titel „Email Marketing Trends für 2012“ halten, der eine Reihe überraschender Ergebnisse aus einer kürzlich durchgeführten Studie abdecken würde. Das Thema, das wir für den Rest unserer Unterlagen auf der Konferenz verwendeten, war „Fokus“, und wir mussten ein Give-away für die Teilnehmer des Keynotes entwickeln. Wir hatten einige Monate zuvor eine Infografik erstellt, die gut ankam, und mit der neuen Studie im Gepäck schien eine weitere Infografik angebracht. Aber wir mussten sie immer noch mit unserem Thema verknüpfen. Die erste Idee waren Retro-Decoder-Brillen, die dabei helfen, Teile des Posters in den Fokus zu rücken. Zugegeben, Decoder-Brillen sind meist die erste Idee, aber endlich gab es eine Situation, in der sie thematisch zu dem passten, was wir taten.

Für diejenigen, die es nicht wissen: Decoder-Brillen sind ähnlich wie die alten 3D-Brillen mit Papprahmen und einer roten und einer blauen Gelatine-Linse. Aber bei Decoder-Brillen sind beide Linsen gleichfarbig, und das Tragen ermöglicht es Ihnen, geheime Botschaften zu sehen… ein bisschen wie in dem Film „They Live“ von Rowdy Roddy Piper.

Als alle an Bord waren, legten wir los. Schritt Eins… die Brillen bestellen. Es gab zwei auf Lager zur Auswahl… entweder rote oder blaue Linsen. Wir sind BlueHornet, also war das eine einfache Entscheidung.

Das Warten ist der schwierigste Teil

Es gab nicht genug Zeit, um das Projekt vor der Konferenz fertigzustellen, es sei denn, ich würde sofort beginnen. Leider würden die Decoder-Brillen noch ein paar Tage brauchen, und da ich noch nie etwas damit entworfen hatte, wusste ich nicht genau, welche Farben ich verwenden musste oder welche Muster am besten funktionieren würden. Also würde ich vorerst mit dem Design beginnen. Ich dachte, dass Werbeanzeigen aus den 1940er und 50er Jahren gut zu Decoder-Brillen passen würden, also ging ich diesen Weg.

Ich wusste auch, dass mir die Muster in anderen dekodierbaren Designs, um die Botschaften zu verbergen, nicht gefielen… die meisten sind einfach nur verkratzte Unordnung. Ich wollte, dass das Poster auch ohne Brille scharf aussieht und dass jedes von uns verwendete Muster im Design Sinn ergibt. Dafür wollte ich Halbtonmuster verwenden, die alles schön zusammenbinden würden.

Ich tauchte ein und widmete mich zuerst den großen Teilen des Posterdesigns… arbeitete nur in Schwarzweiß, um Formen und Räume abzugrenzen, herauszufinden, wie viel Platz für Text wir haben würden und wie die Statistiken passen würden. Ich fügte eine schnelle, temporäre Farbgebung hinzu, damit der Rest des Teams sehen konnte, was ich vorhatte, und alle waren immer noch an Bord.

Decoder-Brillen, wie funktionieren sie?

Am Dienstagmorgen kamen die Brillen an. Die Aufregung, sie endlich in den Händen zu halten, und die Neuheit, sie im Büro zu tragen, verflogen schnell, als die Erkenntnis einsickerte… ich musste herausfinden, wie ich etwas damit entwerfen konnte. Als Kind war ich ein Fan von Decoder-Brillen und hatte ein grundlegendes Verständnis dafür, wie sie funktionieren. Zunächst dominierte alles Blaue im Design und war im Vordergrund, und alles Gelbe war schwer zu lesen. Aber wenn man die Brille aufsetzt, ändert sich alles… die gelben Designelemente werden zu einem wirklich dunklen Grün, wenn die Augen das Gelb mit dem Blau der Linsen kombinieren. Diese nun schwarzgrünlichen Elemente sind dann dunkler als die blauen Teile, wodurch sie in den Vordergrund treten und leicht erkennbar sind. Alles, was blau war, bleibt blau oder wird irgendwie verwaschen. Aber welche Blautöne und Gelbtöne funktionieren am besten? Welche Art von blauen Mustern funktioniert über Gelb, um sie mit Brille leicht lesbar, aber ohne sie fast unmöglich lesbar zu machen? Um dies zu lösen, müsste ich einige Tests durchführen.

Testen, Testen… 1, 2, 3.

Ich wusste, dass wir die Poster nicht im Siebdruckverfahren drucken würden, also waren Pantone-Farben ausgeschlossen. Dies alles würde in CMYK erfolgen, und der Umgang mit Farbverschiebungen vom Monitor zum Drucker könnte problematisch sein, wenn alles davon abhängt, die richtigen Blautöne und Gelbtöne zu erhalten, damit der Effekt funktioniert. Glücklicherweise hatte ich den Luxus, zu wissen, dass die endgültigen 11x17-Zoll-Poster im eigenen Haus mit unserem Xerox Phaser 7400 Farblaser-Drucker gedruckt würden, sodass ich alle Testläufe auf demselben Gerät durchführen konnte. Ich stellte eine Reihe von Blautönen in verschiedenen Mustern auf Text in allen möglichen Gelbtönen zusammen und druckte es aus. Wenn man sie mit der Brille betrachtet, stellt man schnell fest, welche funktionieren und welche nicht.

Der Gelbton, der auf unserem Drucker am besten für die Teile des Designs funktionierte, die ich verstecken wollte, war CMYK 0/0/100%/0. Verschiedene Blautöne waren effektiv, aber ich verwendete hauptsächlich CMYK 100%/75%/0%/0%, was ein sattes Königsblau ist… nicht weit vom Blau der Linsen entfernt. Eine begrenzte Farbpalette passte auch optisch zu den Epochen der Decoder-Brillen und des Illustrationsstils, also hielt ich es einfach.

Durch diesen Prozess stellte ich fest, dass die Verwendung des Adobe Photoshop Layer Multiply-Attributs… bei dem das Gelb auf das blaue Muster überlappte, um ein Grün zu erzeugen… großartig funktionierte. Ohne die Brille würde man Grün sehen, wo sich die beiden Farben überschneiden, was das Lesen erschwert, aber mit der Brille wurden sowohl das Grün als auch das Gelb zur gleichen Farbe… einem grünlich-schwarzen Ton.

In Kombination mit Layer Multiply entwickelte ich einige Ansätze. Einer war, eine Menge Wörter in Blau über das gelbe Design zu schreiben. Ohne die Brille konzentrieren sich die Augen auf die lesbaren blauen Wörter und es ist sehr schwer, diese Wörter nicht mehr zu sehen und dahinter die schwache gelbe Botschaft zu betrachten. Eine weitere Technik war die Verwendung eines ablenkenden Halbtonmusters in Blau über dem gelben Design. Es brauchte einige Versuche und Irrtümer, um die richtige Menge an Weiß im Muster zu ermitteln… zu viel oder zu wenig, und das gelbe Stück war ohne Brille leicht lesbar. Und die letzte Technik, die funktionierte, war tatsächlich, die lebhafte gelbe Botschaft über einen entsättigten gelben Hintergrund (wie CMYK 0/0/50%/0) zu legen. Das ist wahrscheinlich am einfachsten ohne Brille zu erkennen, aber es als Option zu haben, eröffnete einige Designmöglichkeiten.

Der Schlüssel zu allem war, die richtige Balance zu finden, um ohne Brille schwer lesbar, aber mit Brille immer noch leicht lesbar zu sein. Wenn es auch mit Brille noch schwer lesbar war, mag das in einer Situation, in der Geheimhaltung oberste Priorität hat, großartig sein, aber für unsere Zwecke wollte ich niemanden frustrieren.

Manchmal war das versteckte Design auf meinem Bildschirm ziemlich gut lesbar, aber beim Drucken überhaupt nicht, also kann man seinem Monitor nicht trauen… man muss es wirklich ausdrucken und sehen, wie es mit der Brille aussieht.

Eine Sache, die ich nicht erwartet hatte, war, dass das Wissen um den versteckten Inhalt im Voraus mir half, ihn zu entschlüsseln, oder zumindest mich davon überzeugte, dass ich ihn lesen konnte, wenn er nach allen anderen Anzeichen für das bloße Auge unlesbar war. Um dem entgegenzuwirken, verließ ich mich auf objektive Kollegen, die mir sagen konnten, was sie lesen konnten und was nicht.

Fertigstellung der Poster

Jetzt, da ich wusste, welche Farben und Effekte am besten funktionierten, wandte ich sie auf das laufende Design an. Es brauchte einige Versuche und Irrtümer, um alles richtig hinzubekommen, aber es verlief relativ reibungslos. Da wir diese selbst druckten und mehr Statistiken hatten, als auf das Poster passten, entschieden wir uns, einige der Abschnitte variabel zu gestalten, sodass es am Ende tatsächlich drei mögliche Iterationen gab. Wir druckten sie, verpackten sie und schickten sie zur Konferenz. Gerade als ich dachte, ich wäre fertig, wurde mir eine sehr beunruhigende Frage gestellt…

Können wir das jetzt auf unsere Website stellen?

Übertragung von Print zu Web

Das Coolste an diesem Poster war die Interaktion mit der Decoder-Brille, und ohne sie ergibt es nicht wirklich Sinn. Ich wusste, dass eine Webversion ein gewisses Maß an Beteiligung des Betrachters erfordern würde, um dem Design gerecht zu werden. Ich verbringe viel Zeit im Web, hatte aber noch nichts genau wie das gesehen, was ich versuchte. Ich bin sicher, es ist in Flash möglich, aber ich bin kein großer Fan davon und wollte, dass das Endergebnis auf iPads und Blackberries funktioniert. Es ist ziemlich sicher anzunehmen, dass Besucher unserer Website keine eigenen blauen Decoder-Brillen haben werden. Das fällt also aus.

Schließlich kam ich auf ein Konzept… ein Vordergrundbild, das das normale Poster war, ein Hintergrundbild, das die „dekodierte“ Version des Posters war, und ein Effekt, der das Hintergrundbild enthüllt, wenn Sie Ihre Maus bewegen. Das Poster in Teile zu zerlegen und diese Teile als Image-Rollover zu verwenden, schien umständlich. Und dann dachte ich an eine „Image Zoom“-Behandlung, die ich auf E-Commerce-Websites gesehen hatte und die es Ihnen ermöglicht, ein Produkt, das Sie kaufen möchten, im Detail zu sehen, indem Sie mit der Maus darüber fahren. Dies brachte mich zu CSS-Tricks.com und dem „AnythingZoomer.“

Das Konzept hinter dem Anything Zoomer war dasselbe wie meines… zwei Bilder übereinander, wobei das hintere Bild enthüllt wird, wenn man mit der Maus darüber fährt. Aber anstatt das Skript wie entworfen zu verwenden, mit dem kleinen Bild vorne und dem großen hinten, würde ich beide Bilder gleich groß machen, aber die „dekodierte“ Version anstelle des großen Bildes hinten verwenden.

Um die „dekodierte“ Version meines Designs tatsächlich zu erstellen, fügte ich in Photoshop einfach eine Ebene über dem Rest meines Kunstwerks hinzu und füllte sie mit Blau (#0100df), und fügte dann den Layer Multiply-Effekt hinzu. Von dort aus optimierte ich die Pegel des ursprünglichen Designs etwas, um es beim Dekodieren besser lesbar zu machen.

The Code

Ich würde gerne sagen, dass meine Beherrschung von CSS von hier an glänzte, aber der AnythingZoomer funktionierte für meine Zwecke ziemlich gut direkt aus der Box. Ich änderte die Standardgrößen, um sie an meine Bilder anzupassen, gestaltete den Rest der Seite darum herum, aber es war ziemlich geradlinig. Es gab wirklich nur eine Sache, die ich anpassen musste. Im ursprünglichen Skript gibt es zwischen dem kleinen und dem vergrößerten großen Bild einen gewissen Versatz. Als ich also meine beiden gleich großen Bilder verwendete, passten sie nicht zusammen. Eine leichte Fehlausrichtung sieht großartig aus, wenn das Skript für seinen beabsichtigten Zweck verwendet wird, aber für meine Zwecke habe ich den größten Teil des Versatzes durch das Hinzufügen von zusätzlichem CSS zur Klasse „large“ ausgeglichen… margin-top:50px; margin-left:50px;

Fertige Webseite

Andere Anwendungen

Nun denkst du dir wohl: „Toll, wenn ich jemals eine Webversion von etwas erstellen muss, um Decoder-Brillen zu replizieren, kann ich das jetzt.“ Und das stimmt. Aber du verstehst den Punkt nicht. Diese exakte Technik und Code-Sammlung von AnythingZoomer könnte auf vielfältige Weise verwendet werden, die nichts mit Zoomen zu tun haben. Ich hoffe, sie alle irgendwann zu nutzen, und war mir anfangs nicht sicher, ob ich sie anbieten sollte. Aber schließlich entschied ich, dass das Internet mit solchen Dingen, die überall auftauchen, ein besserer Ort sein wird.

• Röntgen
  Vordergrundbild sieht normal aus, und das Hintergrundbild ist eine Röntgenversion desselben Bildes. Eine cartoonhafte Behandlung wie das Brettspiel Operation wäre cool. Die Druckversion könnte einen leuchtenden Spotlack verwenden. Das mache ich definitiv.
• Schnitt
  Ähnlich wie beim Röntgen, aber anstelle von Knochen würde man den Schnitt des Inneren des Vordergrundbildes sehen. Man hätte das Äußere eines Autos oder Hauses, und beim Darüberfahren würde man enthüllen, was sich darin befindet.
• Lass uns feilschen
  Was ist in Kiste Nummer 2? Fahre einfach mit der Maus darüber, um es herauszufinden.
• Wo ist Walter?
  Vordergrundbild, in dem man eine Person oder einen Gegenstand zwischen Massen oder Unordnung lokalisieren soll. Wenn Walter nicht dein Ding ist, stell dir diese Spiele im Highlights Magazin vor. Das Hintergrundbild könnte alles ausgegraut haben, außer dem, wonach du suchst… wie ein interaktiver Lösungsansatz.
• Nachtsicht
  Vordergrundbild wäre größtenteils dunkel und schwer zu erkennen, aber das Hintergrundbild ist grünlich getönt, wie man es beim Tragen einer Nachtsichtbrille sehen würde.
• Wärmebild
  Du hast die „Predator“-Filme gesehen, oder?

Projektdetails

Erster Drucklauf: 500 Poster
Kosten: Decoder-Brillen ca. 0,30 $/Stück; Posterdruck wurde im eigenen Haus durchgeführt.

Zeitplan

Idee: 9. Februar 2012
Fertige Poster gedruckt: 17. Februar
Web-Version gestartet: 21. Februar