Vom Grafiker zum Webdesigner

Wer selbständig ist braucht sie, wer Unternehmer ist, braucht sie und wer Freiberufler ist, braucht auch. Sie besteht im einfachsten Fall aus 3 Teilen und wenn es etwas mehr sein darf auch aus 4 oder 5. Manchmal ist sie bunt, manchmal edel, manchmal funky und immer mehr oder weniger kreativ.

Von wem hier die Rede ist? Nein, hier ist nicht die Rede von der Kaffeemaschine, sondern von der Geschäftsaustattung.

Erstellt vom Grafiker des Vertrauens und ehrlich, ich mag Print. Seit der Erfindung des Internets hat sich jedoch noch ein weiteres Medium dazu gesellt und das so erfolgreich, dass man sich die Webseite als schon gar nicht mehr wegdenken kann.

Und so passiert es nicht selten, dass Kunden, die bei einem Grafiker eine Geschäftsausstattung in Auftrag gegeben haben, auch für Erstellung einer Webseite angefragt werden. Nun hat zwar fast jeder Grafikmensch gute Ideen und Ansätze für die Gestaltung einer Webseite, aber die Umsetzung ist doch für einige? viele? ein Buch mit sieben Siegeln.

Mache ich das auch richtig? Kann ein Webdesigner überhaupt was damit anfangen? Lässt sich das in eine Webseite umsetzen? Ohne Praxiserfahrung kann ich gut verstehen, dass so manch eine(r) respektvoll Abstand hält – aber ich sage: nur Mut, mit ein paar richtigen Inputs kannst auch du eine umsetzbare Webdesignvorlage erstellen und alles wird gut.

Und so wie ich bei größeren Drucksachen immer einen professionellen Grafiker ins Boot holen würde, so tun es auch Grafiker, die auch bei mir zuweilen nach einer Kooperation anfragen.
Aber gerne doch. Ich finde, dass so etwas befruchtend für beide Seiten sein kann und empfinde durchaus Freude an so einer Zusammenarbeit.
Und damit es etwas leichter wird, hier mal ein paar Tipps vorab, wie ihr an den Entwurf einer Webseite herangehen könnt.

Das Zauberwort heißt: Raster.

Es ist nicht auf jeder Webseite so, aber von meiner eigenen Arbeit weiß ich, dass Raster einem die Arbeit ungemein erleichtern können. Modelle dafür gibt es auch für Webseiten eine ganze Reihe, die besten Erfahrungen habe ich jedoch mit dem 960pixel.Grid gemacht.

Das 960-Pixel-Grid

Raster sind aus dem Printbereich bekannt und wenn es auch kritische Stimmen gibt, die einem Raster immer Einfallslosigkeit unterstellen, einen Grund warum sie im Print seit jeher angewendet werden, wird es bestimmt haben. Webseiten sollten zwar auch grafisch ansprechend gestaltet sein, aber über die Kunst des ersten Augenblicks hinaus ist die gute Erfassbarkeit der Inhalte auf den meisten Webseiten wichtiger, als die Zurschaustellung eines Designersahneschnittchens, preisgekrönt oder nicht.

Kürzere Zeilenlängen und das wohlproportionierte Aufteilen von Inhalten sind mit einem Raster wie 960 Pixel sehr gut möglich und von daher bin ich ein absoluter Fan von Rasterlayouts geworden.

960 Pixel ist die Breite des Bereiches, der später die Inhalte aufnimmt (#wrapper). Er sitzt mittig und lässt auch bei Monitorauflösungen von 1024px noch ausreichend Luft drumherum. Aber nicht nur das, denn 960 ist eine Zahl, die durch sehr viele andere teilbar ist : 2, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 und 480. Wenn man nun z.B: für ein 4-spaltiges Layout 960 durch 4 teilt, weiß man, dass jede Spalte 240Pixel breit ist. Daraus kann man sich dann im PS ein Raster anlegen und erhält – unter Einhaltung des Rasters – immer gute Proportionen.

960 Grid System
Auf der Seite befindet sich ein Downlaod Link, welcher zahlreiche Vorlagen für alle möglichen Anwendungen enthält als da wären: Illustrator (ai), Photoshop (psd), viso, indesign, coreldraw, omnigraffle, pdf und mehr.

Contao und 960-Pixel-Grid

Als Webdesignerin, bin ich – nach einigen Um- und Irrwegen – vor 2 Jahren bei Contao (fka Typolight) gelandet und ich kann sagen, dass dieses Framework-CMS optimal mit 960Pixel arbeiten kann. Deswegen sind auf diesem Raster erstellte Designvorlagen gut umzusetzen. Grafikdesigner, die das Prinzip des Rasters verstanden haben, müssen keine Angst mehr vor Kunden haben, die nach einer Webseite fragen. Halte dich an das Raster und die meisten Probleme gibt es dann nicht mehr.

Wie das Framework die Arbeit unterstützt

Das Content-Management-System Contao ist ein Framework und als ich seinerzeit begann mich mit dem System vertraut zu machen, musste ich auch erst einmal verstehen was das ist, denn WordPress z.B. ist kein Framework. Wie der Name wörtlich übersetzt schon sagt: Framework = Rahmenwerk und dasheißt, dass das System einen stabilen Rahmen vorgibt, der das Erstellen von Webseiten einfach schneller und damit effizienter macht. Diesen Rahmen kann man im Administrationsbereich auf die gewünschte Breite einstellen, beim 960-Pixel-Grid würde man also 960 Pixel eingeben und die Option „zentriert“ angeben. Und bevor jetzt ein Aufschrei kommt, man kann naürlich auch Breitenangaben in Prozent oder em machen – wer will ;-) und manchmal auch „wer kann“.

Layoutbereiche

Weiterhin gibt es feste Layoutbereiche als da wären:
– der Header (‚header) : beeinhaltet z.B. Hauptnavigation, kleine Nebennavigation, Logo, Adresse, Kundenlogin, Suchfunktion …
– der Container (#container) mit den drei Hauptspalten: links, rechts, Mitte (#left, #right, #main)
– der Fußbereich (#footer)

Auf einen Blick: die Contao-Grundlayouts

Von links nach rechts:
– Ohne Kopfzeile (header), ohne Fußzeile (footer), ohne Seitenspalten (left und right)
– Mit Kopf- und Fußzeile aber ohne Seitenspalten
– Mit Kopf- und Fußzeile und Seitenspalte links
– Mit Kopf- und Fußzeile und Seitenspalte rechts
– Mit Kopf- und Fußzeile und Seitenspalte rechts + links

Und dazwischen gibt es dann noch Variationen, die wahlweise eingestellt werden können wie z.B. mit Kopfzeile aber ohne Fußzeile, ohne Kopfzeile und ohne Fußzeile aber mit beiden Seitenspalten usw.

Eigene Layoutbereiche

Viele sagen ja, dass sie eigene Layoubereich noch nie gebraucht haben. Das kann ich für mich nicht bestätigen, ich mache oft davon Gebrauch und gehe manchmal sogar noch einen Schritt weiter. Eigene Layoutbereiche können ohne Änderung der zentralen Seitenvorlage angesiedelt werden:

– Nach dem Header
– Über der Hauptspalte
– Über der Fußzeile

Standardmäßig ist die Entscheidung wo eigene Layoutbereich positioniert werden sollen immer eine entweder – oder Entscheidung. Entweder ich positioniere unter der Kopfzeile oder über der Fußspalte oder in der Hauptspalte. Aber Contao wäre nicht Contao, wenn man nicht auch das ändern könnte. Über Änderungen am Code der zentralen Seitenvorlage kann man auch ein sowohl unter der Kopfzeile als auch über der Fußzeile erstellen – in welcher Kombination auch immer, es geht.

Exoten

Etwas CSS-Erfahrung braucht es wenn man aus dem Framework ausbrechen und z.B. Seitenspalten bis an den oberen Rand der Kopfzeile hochziehen möchte. Aber das könnt ihr getrost demjenigen überlassen, der euer Design umsetzt – oder: css lernen und selber machen.

Und jetzt wieder Grid

Anhand der Bilder kann man sehen, dass ich bei den hier vogestellten Grundlayouts von 4 Spalten ausgegangen bin. Bei 960 Pixel ist der Abstand des Hauptrasters dann 240 Pixel und das kleinteiligere Raster entspricht 16 Spalten mit je 60 Pixeln. Du kannst aber ebensogut 960 durch 12, 15 oder 20 teilen und dir dein eigenes Raster schaffen. Über eine der pfiffigsten Erweiterungen, die es für Contao gibt (subcolumns), kann das Raster auch innerhalb des Textbereiches fortgesetzt werden, so dass man praktische und lesbare Text- oder Bildpäckchen bauen kann.

Beispiel:

Downloads

• Als erstes sei nochmal auf den Download bei 960-Grid-System hingewiesen. Der Download enthält einige Dateien, die ihr im Photoshop verwenden könnt.

So, dann hoffe ich, dass ich Grafikern, die bisher noch nicht oder nicht so gerne mit dem Web gearbeitet haben, ein paar Hilfestellungen geben konnte und vielleicht sogar ein bisschen Lust es mal auszuprobieren. Wenn man das Grid verstanden hat, kommt es nur noch auf deine Kreativität und deinem Gestaltungswillen an.

Have fun!

—

foto: istockphoto.com