Design-Evolution III: Café Oper Wien
Teil 3 meiner „Design-Evolution“ Serie befasst sich mit dem Projekt Café Oper Wien und ist ein gutes Beispiel dafür, dass es sinnvoll sein kann, Web- und Printprodukte in einem Durchgang zu erarbeiten. Selbst wenn die Leidenschaft dem Web gilt: Wenn es um das große Ganze geht, muss man auch mal über seinen Schatten springen können und das geliebte Medium unterordnen.
Obwohl der erste Screen rein optisch sehr wenig mit der Endfassung zu tun hat, sind alle Elemente bereits vorhanden und sehr ähnlich platziert. Die Strukturierung ist also da, aber das Erscheinungsbild wirkt noch sehr flau.
Durch die Dreiteilung, die bis zum Schluss erhalten bleibt, bekommt die Seite eine sehr klare Aufteilung und starke Kontraste. Vergleicht man V1 und V2 miteinander, sieht man, wie allein das Abändern eines Hintergrunds, eine Seite verändern kann.
Jetzt meldet sich der parallel gestaltete Schriftzug zu Wort und möchte seinen verdienten Platz im Design einnehmen. Zusätzlich wird ein Artwork der Wiener Staatsoper eingebunden.
Jetzt aber tauchen die ersten Probleme auf. Während der Entwicklung der Werbemittel wird schnell klar, dass die gelbliche „Tapete“ in der Werbung nicht funktioniert …
Das samtige Rot hingegen verträgt auch großflächige Verwendung und vermittelt wesentlich deutlicher den kulturellen Hintergrund der Oper und den hochqualitativen Anspruch des Cafés. Obwohl ich mit der ersten Webversion alles andere als glücklich bin, ist die Entscheidung richtig und muss nun ausgebadet werden. Fast nebenbei wird die Oper zu einem Teil des Logos.
Licht am Ende des Tunnels. Durch das einziehen des „Teppichs“ in den unteren Kopfbereich, gesellt sich wieder einen Teil des Kontrasts zu uns. Die Menüs und das abgesegnete Logo werden einem Tuning unterzogen und erhalten eine Vergoldung. So ganz wollen Kopf und „Tapete“ aber noch nicht zueinander finden. Das dezente Licht des Spots muss sich auch über die anderen Elemente ausdehnen. Also …
… folgt die berühmte Feinkosmetik! Das Impressum wandert auf eine Linie mit „Das Café“, der Karteireiter „Karte“ kommt hinzu und aus dem Teppich wird eine goldene Bordüre mit abgelebten Charakter. Wären wir nur mit einer Website beauftragt gewesen, hätten wir bei Version 3 laut „Fertig!“ gebrüllt. Das große Ganze erforderte aber eine sinnvolle Adaption der Website, die der Marke „Café Oper Wien“ insgesamt sehr geholfen hat. Aber jetzt: „Fertig!“
Eine neugierige Frage - werden alle Eure Entwürfe gleich in (X)HTML und CSS entworfen?
Deine Beiträge erinnern mich daran, die Zwischenversionen eines Layoutprozesses aufzuheben. Wirklich spannend, sich das im Nachhinein anzuschauen. Diese Site ist wirklich besonders gelungen.
Wer Wien kennt weiß, dass Du den Charme sehr gut getroffen hast, gefällt mir ausgezeichnet. Sehr schön. Auch die Idee, Zwischenstufen einmal einzufrieren!
@Edith: Nein, ich entwerfe immer erst in Photoshop. Im Schnitt vergehen an die 30 Stunden, bis ich das erste Mal eine Zeile (X)HTML schreibe. Hier im Blog habe ich früher damit begonnen, mit dem Ergebnis, dass unnötige Container im Code sind (Merke: Das muss ich mal säubern)
@Manuela: Hebst du das nicht auf? Ich hab zig Gigabyte an Daten, die ich eigentlich nicht brauche, nur weil ich nichts löschen kann. Bin also froh, endlich einen Verwendungszweck dafür zu haben!
Wie auch bei den vorangegangenen Folgen immer wieder gern gesehene Zwischenschritte.
Markus, ich verpasse es oft, ein Stadium zu definieren und danach eine neue Datei anzulegen. Vor allem bei eigenen Projekten.
@Manuela: Guter Hinweis!
@Markus: An dieser Stelle ein grosses Lob an dich! Sehr schön geworden, dein Blog! Geföllt mir sehr. Witzig die Idee mit dem Datum und dem Artikel-Titel. Hab sowas bisher noch nicht gesehen!
@Manuela: Lustig, bei mir ist das speichern einer Version ein echter Automatismus geworden. Ist für mich eine Art Ritual um weiterdenken zu können. Abspeichern und neue Versionsnummer bedeutet: „Na komm, da geht doch noch was“!
@euch alle: Danke für die Blumen!
Markus, ich werde mir das von Dir jetzt mal »abgucken«. Zumindest hab ich heute tatsächlich die zwei bisherigen Versionen eines Projekts gespeichert. Ist ja schon ein Fortschritt ;-).
Dann bin ich aber schon sehr gespannt auf deine erste Design-Evolution!
Danke für diesen kleinen Einblick! Die Seite ist mir schon von CSSBeauty her bekannt gewesen. Glückwunsch zum Erfolg!
Kannst du vielleicht noch zwei Sätze zur Gestaltung des Schrifzuges sagen? Wie hast du die Schnörkel gebastelt? In PS? Mit nem Grafiktablett? Ich versuche mich gerade an einem Ornamentschriftzug, und weiss nicht recht, wie ich am besten vorgehe.
Vielen Dank und beste Grüsse,
Andreas
Hallo Andreas, wir haben hier eine fertige Schrift verwendet (alles andere macht wenig Sinn). Dann wurden in Illutrator ein paar Dinge adaptiert (”Caf”, “W”). Ohne Grafiktablett. Einfach mit der Maus und dem Kurvenwerkzeug!
Danke für die Infos!
)
Hast du vielleicht einen guten Tipp, wo man schöne Schreibschriften wie die hier verwendete findet (darf was kosten, muss es aber nicht
Ich kaufe meine Fonts meistens bei faces.co.uk. Die haben wirklich gute Ware!
Alo!!!
Ist zwar schon eine weile her das du den Beitrag geschrieben hast…aber es Betrifft die Cafe oper Seite!!!
Wie macht man so eine “goldene Bordüre” oder wo gibts tutorials die einem so etwas beibringen???
Diese Bordüre fasziniert mich!!!
Freut mich, dass dir die Bordüre gefällt. Darin stecken auch viele Stunden Arbeit.
Ein Großteil sind einfach einzelne Layer, in denen ich mit Photoshoppinseln (z.B. „Spritzer“) recht grob „Dreck“ male. Die Layer werden dann immer zumindest um 50% verkleinert, wodurch sie etwas weicher und realistischer werden. Wenn ich dann so um die 5 bis 10 verschiedene Ebenen habe, dupliziere ich diese mehrmals und lege sie zum Teil mit unterschiedlichen Ebeneneffekten (negativ multiplizieren, etc.) über die noch einfärbige Bordüre. Dann werden aus den Ebenen einzelne Teile mit einem weichen Radiergummi gelöscht, damit jede Ebene ihr eigenes Aussehen hat. Die „Schlaufen“ am Rand sind Typo, die entsprechend verformt und gedreht wird, bis sie passt. Auch hier arbeite ich in deutlich höherem Format, als ich es dann im Echtbetrieb brauche.
Schlussendlich kommen dann noch ein paar von Hand gezeichnete Verläufe darüber um das Komplettbild zu verfeinern. So entstehen locker an die 50 Ebenen aufwärts, die aber oft nur eine Deckkraft von 4-5 Prozent haben. Durch diese extrem vielen Überlagerungen entsteht dann ein realistisches Bild. Wichtig ist einfach, dass man wirklich Ebene für Ebene hinzufügt, als würde man ein Gemälde mahlen.
Hoffe, die Beschreibung hilft dir!
WOW….hab mir nicht gedacht das das soo viel arbeit ist!!!
Aber das hat mir sehr weiter geholfen danke!!!