Von Judith: Projekt Western-Inn: Von der Idee zum individuellen Design.

Wie entsteht eigentlich das Layout einer modernen Internetseite? Hinter Layout und Programmierung einer modernen Website verbirgt sich mehr Arbeit als der spätere Seitenbesucher vermutet; der Weg zum benutzerfreundlichen und zugleich individuellen Endprodukt ist lang. In diesem Beitrag gebe ich einen kleinen Einblick in meine alltägliche Arbeit als Designer und zeige gestalterische Schikanen und Hintergrundgedanken am Beispiel des Hotel-Restaurants »Western Inn« in Klipphausen.

Gestalterische Vorgaben und Grundüberlegungen

Jedem Projekt liegt eine Dokumentation zugrunde, in welcher einer unserer »Webhunter« (Webdesigner im Außendienst) im Gespräch mit unserem Geschäftspartner die Rahmenbedingungen für die entsprechende Seite schriftlich festgehalten hat. Diese Dokumentation beinhaltet auch eine Seite mit Gestaltungsvorgaben und Anregungen zum Design.

Beim Projekt »Western Inn« waren diese Vorgaben recht detailliert, ließen mir jedoch genug Raum für gestalterische Freiheiten. Neben bildhafter Gestaltung und einer erdigen, rötlichen Farbgebung wurden verschiedene grafische Elemente festgehalten: Ein Saloon, Kakteen, Geier, Wegweiser, ein Wagenrad etc. Meine ersten Assoziationen mit dem Thema waren eine Marlboro-typische Kulisse bei Sonnenuntergang und eine Navigation, die optimal auf dem gewünschten Wegweiser Platz findet. Obwohl eigentlich eine High-Noon-Stimmung (Mittag) gewünscht war, sprach aus gestalterischer Sicht einiges für einen niedrigeren Sonnenstand. Die Mittagszeit hätte unweigerlich einen blauen Himmel provoziert, der meiner Ansicht nach (trotz Komplementärkontrast) überhaupt nicht ins farbliche Konzept passte. Zudem wäre somit das Gefühl der Hitze reduziert worden. Des Weiteren hatte ich einen einladend beleuchteten Saloon geplant, der zur Mittagszeit einfach aus logischen Gründen nicht in die Kulisse passt.

Neben Saloon, Wegweiser und Kulisse fand ich recht schnell weitere passende Gestaltungselemente. In Gedanken an alte (und zuhause leider verstaubende) Lucky Luke Comics war die Lore einer alten Goldmine schnell mit von der Partie. Um die gewünschte leblose Atmosphäre zu verstärken, plante ich kreisende Geier im Hintergrund ein. Abschließend einen skelettierten Gnuschädel. Die Idee dazu entstand übrigens in Anlehnung an das Playmobil-Skelett aus der Wild West Serie. Auf Grundlage dieser Vorgaben entwickelte ich eine Bleistiftskizze, um die ersten Eindrücke und Ideen bildlich festzuhalten.

Logo und »Digitale Skizze«

Zu diesem Punkt war es Zeit, die Ideen mit unserem Geschäftspartner persönlich zu besprechen, Fragen zu stellen, die bisherigen Ideen abzuklären, um so nicht später in die »falsche Richtung« zu arbeiten. Unter anderem wollte ich wissen, ob das bisher vernachlässigte Thema »Indianer« im Layout Anklang finden sollte oder nicht. Es sollte nicht.

Nachdem die Grundüberlegungen – zu meiner Zufriedenheit- auch beim Ansprechpartner auf Zustimmung stießen, konnte die Arbeit am Computer beginnen. Auf Grundlage des bestehenden Schriftzuges »Western-Inn« entwickelte ich in Anlehnung an das Namensschild eines Saloons das überarbeitete Logo mit Stierhörnern. Anschließend fertigte ich eine »digitale Skizze« auf Grundlage der Bleistiftzeichnung an, in welcher bereits Position und Farbe der Elemente berücksichtigt wurden. Sinn der Sache ist es, die mir sehr wichtige Atmosphäre einer solch bildhaften Seite zu testen. Die Atmosphäre stimmte, es konnte mit der Feinausführung begonnen werden.

Gestaltungsraster und Blickführung

Jedem Web-Layout liegt ein unsichtbares, mehr oder weniger komplexes Raster zugrunde. Das so genannte Gestaltungsraster. Innerhalb dieses Rasters werden die verschiedenen Seitenelemente positioniert und fügen sich später zu einem harmonischen und übersichtlichen Gesamtbild zusammen.

Bei diesem Layout entschied ich mich für ein gängiges 60/20-Raster. Dieses Raster teilt die Seite vertikal in Spalten á 60 Pixel und Zwischenräume á 20 Pixel. Mehrere Spalten können zu einer breiteren zusammengefasst werden. Bei einer maximalen Gesamtbreite von 980 Pixeln (durchschnittlicher horizontaler Sichtbereich bei einer durchschnittlichen Monitorauflösung von 1024×768 Pixeln) wurden die Gestaltungselemente passgenau im Raster ausgerichtet. Als nächstes galt es, den Falz zu berücksichtigen. Der Falz ist der Punkt einer Website, der in der jeweiligen Zielauflösung (hier 1024×768 Pixel) bei ungescrollter Seite die horizontale Grundlinie des sichtbaren Bereichs bildet. Bei unserer Zielauflösung liegt der Falz etwa bei 610 Pixeln, sofern davon ausgegangen wird, dass der Seitenbesucher geöffnete Browsertabs und mindestens eine so genannte »Toolbar« aktiviert hat.

Für den Laien ist wichtig: Alles was oberhalb des Falzes liegt, wird beim Aufrufen der Seite sofort und ohne Scrollen gesehen. Dementsprechend müssen alle wichtigen Seiteninhalte, wie beispielsweise die Navigation, und mindestens der erste Absatz des Inhalts oberhalb des Falzes liegen. Abschließend habe ich die Seitenelemente so positioniert, dass für Seitenanfang und Seitenende je ein »optisches Dreieck« zwischen den Bildbereichen entsteht. Dieses Dreieck dient der Blickführung: Der Blick des Betrachters wandert zwischen den Eckpunkten hin und her; im Innenraum der Form befindliche Inhalte werden unweigerlich wahrgenommen.

Digitale Ausarbeitung

Der konzeptionelle Teil ist überstanden, nun geht es an die gestalterische Umsetzung. Mittels einer Holztextur und diversen Skizzen habe ich in Photoshop alle Bildelemente einzeln erstellt und schließlich zur geplanten Szene zusammengefasst. Dieser Part des Entstehungsprozesses ist der gestalterisch Anspruchsvollste, lässt sich jedoch nur schwer erklären. Zusammenfassend kann gesagt werden, dass ich die jeweiligen Elemente grob mit der Maus vorgezeichnet und anschließend immer weiter verfeinert habe. Wichtig ist hier die Beachtung einer gleich bleibenden Lichtquelle sowie eines einheitlichen Gesamteindrucks.

Was nach der Gestaltung geschieht

Auch wenn dieser Beitrag vornehmlich die Entstehung des Layouts behandelt, so möchte ich doch kurz erläutern welche Produktionsschritte eine Seite nach Abschluss der Gestaltung durchläuft. Nachdem das Seitenlayout fertig gestellt, mit Teamkollegen diskutiert und vom Geschäftpartner abgenommen ist, beginnt die eigentliche Umsetzung der Seite. Anhand des Layouts wird ein Grundgerüst (das so genannte Template) mittels XHTML und CSS realisiert. Diese Vorlage beinhaltet nur Seitenelemente, die auf allen Unterseiten identisch sind. Anschließend werden aus diesem Template alle entsprechenden Unterseiten generiert und mit individuellen Inhalten gefüllt.

Beim Projekt »Western-Inn« war zudem explizit eine Portalseite (Eingangsseite) gewünscht. Hier hielt ich die ebenfalls gewünschte kleine Animation für angemessen und erstellte daher einen rollenden Busch sowie dezent fliegende Geier. Ebenso entschied ich mich dazu, die Lampen im Inneren des Saloons erst dann aufflammen zu lassen, wenn der Seitenbesucher diesen mit der Maus überfährt, den Saloon also betritt. Nachdem Layout, Programmierung, Content und eventuelle Animationen der Seite abgeschlossen sind, folgen umfangreiche Korrekturen durch Dritte.

Wenn die Seite den Überprüfungen standgehalten hat, folgt die Anmeldung bei den Suchmaschinen sowie der Upload ins Internet.

Seite besuchen: www.western-inn.de

Jonas Hellwig