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.

Altes und neues LogoNachdem 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

Fertiges Seitenlayout von Western-InnDer 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

18 Kommentare

Ralf

Das sieht sehr gut aus und liest sich auch verständlich. Leider lässt sich dies gar nicht so einfach übertragen. Ich denke da braucht man eben auch das richtige Gespür und die Erfahrung. Hut ab! Das Design ist sehr aufwendig und ansprechend.

H. Spalter

Hallo,
gerade erst entdeckt, aber nicht zu spät.
Die gestalterischen Elemente und die Umsetzung sprechen für sich.

Schickes Layout, Hut ab.

Jonas

‚@ Rudi: Das mit dem Lernen ist natürlich immer so eine Sache 🙂 Ein nicht unbedeutender Teil ist mit Sicherheit angeborenes Talent. Natürlich ist Interesse für das detaillierte Gestalten ohne vorher die Lust zu verlieren ebenso von enorm großer Bedeutung.
Was die Gestaltungsgesetze- und Grundlagen betrifft, so habe ich einiges noch aus der Schule (Kunst Leistungskurs) und einiges aus meiner Ausbildung zum Mediengestalter im Hinterkopf.
Zudem hilft es diverseste Bücher zum Thema Design und Webdesign zu verschlingen und in der Realität ganz genau hinzuschauen. Ich mach es bei vielen Projekten so, dass ich noch einmal drüber schlafe wenn ich denke es ist perfekt. Wenn es am nächsten Tag immer noch gefällt, dann ist alles gut.

Als kleine Hilfe kann ich dir noch folgenden Literaturvorschlag unterbreiten:

http://www.amazon.de/Modernes-Webdesign-Gestaltungsprinzipien-Webstandards-Praxis/dp/3836211092/ref=sr_1_1?ie=UTF8&s=books&qid=1219989556&sr=8-1

rudi schlosser

hi jonas,

toller text! aber wo lernt man die ganzen dinge, die für eine solche webseiten gestalltung nötig sind.
ich hab schon mal versucht eine seite zu machen bin aber immer wieder gescheitert.

gruß
rudi

Webstandard-Team

Sehr interessanter Artikel, der aufzeigt das eben doch noch ein wenig mehr dazu gehört als nur ein „wenig HTML und CSS“ können zu müssen, um eine solche Seite auf die Beine zu stellen. Kompliment!

Jonas

‚@ Klaus: Ich war (bin) selbst zugegebenermaßen mehr Asterix-Fan .. trotzdem sprudelten beim Projekt Western-Inn die Ideen so sehr, dass ich gezwungen war mich auf die „besten“ oder zumindest thematisch passendsten zu beschränken. Es freut mich, dass Dir die Seite gefällt!

@ Webstandard-Team: Vielen Dank, solch nettes Feedback hört man gerne!

Jonas

‚@ Alexander: Was das Raster angeht. Da hast du vollkommen recht, es findet hier eher im theoretischen statt. Ich arbeite jedoch bei fast jedem Layout mit einer Grid-Datei als Rastervorlage und wollte daher diesen Punkt unbedingt erwähnen. In erster Linie um aufzuzeigen, dass sowas wie ein Gestaltungsraster existiert, auch wenn diese Seite hier – zugegeben – nicht das beste Bespiel für Raster darstellt.
Was fehlenden Content und die Portalseite angeht, so hast du ebenfalls recht; leider waren mir in diesen beiden Punkten die Hände gebunden.

Alexander

Das Thema „Raster“ im Webdesign finde ich ebenfalls sehr heiß. Die Anwendung eines 60/20er-Rasters findet hier aber eher im Theoretischen statt, da auf allen Unterseiten durchgehend nur drei Spalten erkennbar sind. Die Textspalte in der Mitte bleibt immer gleich breit, ebenso die Schmuckgrafiken und die Navigationsgrafiken. Also wozu eine Einteilung in viele kleine Spalten? Das wird erst interessant, wenn ich im Content auch mal ein bißchen Abwechslung bringe. Wenn sowieso alle Seiten gleich aussehen, lege ich in Wahrheit drei gleichförmige Spalten zugrunde und Schluss.

Nächstes: Ist das eine gute Idee, auf der Startseite nichts als eine Flashdatei ohne jeden textlichen Inhalt zu setzen? Könnte zwar Kundenwunsch sein – ist trotzdem gegen jede vernünftige Usability und Accessibility.

Drittens: Schöne Grafiken zu schneidern ist viel Arbeit! Fade Standard-Texte der Anmutung der Seite anzupassen, ist offenbar noch mühevoller denn unmöglich. Wenn der Kunde schon kein Material liefert (wie bei „General Store“), sollte die Standard-Ausrede im Content wenigstens einer individuellen Ansprache weichen. Da sieht man auch, wie doof das ist, wenn man die Navi nicht bei Fehlen von Inhalt anpassen kann, weil alles halt zusammen gepixelt wurde.. sehr unangenehm!

klaus

Hallo Jonas,

ich bin schwer beeindruckt vom Design der Western-Inn Seite. Als alter Lucky Luke Leser (lange ist es her) kann ich sagen, das Westernfeeling stellt sich beim Betrachten der Seite gleich ein.

Toll gemacht!

Gruss
Klaus

Ralf

Das sieht sehr gut aus und liest sich auch verständlich. Leider lässt sich dies gar nicht so einfach übertragen. Ich denke da braucht man eben auch das richtige Gespür und die Erfahrung. Hut ab! Das Design ist sehr aufwendig und ansprechend.

H. Spalter

Hallo,
gerade erst entdeckt, aber nicht zu spät.
Die gestalterischen Elemente und die Umsetzung sprechen für sich.

Schickes Layout, Hut ab.

Jonas

‚@ Rudi: Das mit dem Lernen ist natürlich immer so eine Sache 🙂 Ein nicht unbedeutender Teil ist mit Sicherheit angeborenes Talent. Natürlich ist Interesse für das detaillierte Gestalten ohne vorher die Lust zu verlieren ebenso von enorm großer Bedeutung.
Was die Gestaltungsgesetze- und Grundlagen betrifft, so habe ich einiges noch aus der Schule (Kunst Leistungskurs) und einiges aus meiner Ausbildung zum Mediengestalter im Hinterkopf.
Zudem hilft es diverseste Bücher zum Thema Design und Webdesign zu verschlingen und in der Realität ganz genau hinzuschauen. Ich mach es bei vielen Projekten so, dass ich noch einmal drüber schlafe wenn ich denke es ist perfekt. Wenn es am nächsten Tag immer noch gefällt, dann ist alles gut.

Als kleine Hilfe kann ich dir noch folgenden Literaturvorschlag unterbreiten:

http://www.amazon.de/Modernes-Webdesign-Gestaltungsprinzipien-Webstandards-Praxis/dp/3836211092/ref=sr_1_1?ie=UTF8&s=books&qid=1219989556&sr=8-1

rudi schlosser

hi jonas,

toller text! aber wo lernt man die ganzen dinge, die für eine solche webseiten gestalltung nötig sind.
ich hab schon mal versucht eine seite zu machen bin aber immer wieder gescheitert.

gruß
rudi

Webstandard-Team

Sehr interessanter Artikel, der aufzeigt das eben doch noch ein wenig mehr dazu gehört als nur ein „wenig HTML und CSS“ können zu müssen, um eine solche Seite auf die Beine zu stellen. Kompliment!

Jonas

‚@ Klaus: Ich war (bin) selbst zugegebenermaßen mehr Asterix-Fan .. trotzdem sprudelten beim Projekt Western-Inn die Ideen so sehr, dass ich gezwungen war mich auf die „besten“ oder zumindest thematisch passendsten zu beschränken. Es freut mich, dass Dir die Seite gefällt!

@ Webstandard-Team: Vielen Dank, solch nettes Feedback hört man gerne!

Jonas

‚@ Alexander: Was das Raster angeht. Da hast du vollkommen recht, es findet hier eher im theoretischen statt. Ich arbeite jedoch bei fast jedem Layout mit einer Grid-Datei als Rastervorlage und wollte daher diesen Punkt unbedingt erwähnen. In erster Linie um aufzuzeigen, dass sowas wie ein Gestaltungsraster existiert, auch wenn diese Seite hier – zugegeben – nicht das beste Bespiel für Raster darstellt.
Was fehlenden Content und die Portalseite angeht, so hast du ebenfalls recht; leider waren mir in diesen beiden Punkten die Hände gebunden.

Alexander

Das Thema „Raster“ im Webdesign finde ich ebenfalls sehr heiß. Die Anwendung eines 60/20er-Rasters findet hier aber eher im Theoretischen statt, da auf allen Unterseiten durchgehend nur drei Spalten erkennbar sind. Die Textspalte in der Mitte bleibt immer gleich breit, ebenso die Schmuckgrafiken und die Navigationsgrafiken. Also wozu eine Einteilung in viele kleine Spalten? Das wird erst interessant, wenn ich im Content auch mal ein bißchen Abwechslung bringe. Wenn sowieso alle Seiten gleich aussehen, lege ich in Wahrheit drei gleichförmige Spalten zugrunde und Schluss.

Nächstes: Ist das eine gute Idee, auf der Startseite nichts als eine Flashdatei ohne jeden textlichen Inhalt zu setzen? Könnte zwar Kundenwunsch sein – ist trotzdem gegen jede vernünftige Usability und Accessibility.

Drittens: Schöne Grafiken zu schneidern ist viel Arbeit! Fade Standard-Texte der Anmutung der Seite anzupassen, ist offenbar noch mühevoller denn unmöglich. Wenn der Kunde schon kein Material liefert (wie bei „General Store“), sollte die Standard-Ausrede im Content wenigstens einer individuellen Ansprache weichen. Da sieht man auch, wie doof das ist, wenn man die Navi nicht bei Fehlen von Inhalt anpassen kann, weil alles halt zusammen gepixelt wurde.. sehr unangenehm!

klaus

Hallo Jonas,

ich bin schwer beeindruckt vom Design der Western-Inn Seite. Als alter Lucky Luke Leser (lange ist es her) kann ich sagen, das Westernfeeling stellt sich beim Betrachten der Seite gleich ein.

Toll gemacht!

Gruss
Klaus

Deine Antwort:

Anonymous

Folgende HTML-Tags sind erlaubt:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Zum Seitenanfang