{"id":2536,"date":"2010-10-30T16:25:35","date_gmt":"2010-10-30T14:25:35","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=2536"},"modified":"2018-02-20T18:12:42","modified_gmt":"2018-02-20T16:12:42","slug":"vom-grafiker-zum-webdesigner","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2010\/10\/vom-grafiker-zum-webdesigner\/","title":{"rendered":"Vom Grafiker zum Webdesigner"},"content":{"rendered":"

\"grafikerin\"<\/a>Wer selbst\u00e4ndig 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.<\/p>\n

Von wem hier die Rede ist? Nein, hier ist nicht die Rede von der Kaffeemaschine, sondern von der Gesch\u00e4ftsaustattung<\/strong>.<\/p>\n

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.<\/p>\n

Und so passiert es nicht selten, dass Kunden, die bei einem Grafiker eine Gesch\u00e4ftsausstattung<\/strong> in Auftrag gegeben haben, auch f\u00fcr Erstellung einer Webseite angefragt werden. Nun hat zwar fast jeder Grafikmensch gute Ideen und Ans\u00e4tze f\u00fcr die Gestaltung einer Webseite<\/strong>, aber die Umsetzung ist doch f\u00fcr einige? viele? ein Buch mit sieben Siegeln.<\/p>\n

Mache ich das auch richtig? Kann ein Webdesigner \u00fcberhaupt was damit anfangen? L\u00e4sst sich das in eine Webseite umsetzen? Ohne Praxiserfahrung kann ich gut verstehen, dass so manch eine(r) respektvoll Abstand h\u00e4lt – aber ich sage: nur Mut, mit ein paar richtigen Inputs kannst auch du eine umsetzbare Webdesignvorlage erstellen und alles wird gut.<\/p>\n

Und so wie ich bei gr\u00f6\u00dferen Drucksachen immer einen professionellen Grafiker ins Boot holen w\u00fcrde, so tun es auch Grafiker, die auch bei mir zuweilen nach einer Kooperation anfragen.
\nAber gerne doch. Ich finde, dass so etwas befruchtend f\u00fcr beide Seiten sein kann und empfinde durchaus Freude an so einer Zusammenarbeit.
\nUnd damit es etwas leichter wird, hier mal ein paar Tipps vorab, wie ihr an den Entwurf einer Webseite herangehen k\u00f6nnt.<\/p>\n

Das Zauberwort hei\u00dft: Raster.<\/h3>\n

Es ist nicht auf jeder Webseite so, aber von meiner eigenen Arbeit wei\u00df ich, dass Raster einem die Arbeit ungemein erleichtern k\u00f6nnen. Modelle daf\u00fcr gibt es auch f\u00fcr Webseiten eine ganze Reihe, die besten Erfahrungen habe ich jedoch mit dem 960pixel.Grid gemacht.<\/p>\n

Das 960-Pixel-Grid<\/h4>\n

\"\"<\/a>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 \u00fcber die Kunst des ersten Augenblicks hinaus ist die gute Erfassbarkeit der Inhalte auf den meisten Webseiten wichtiger, als die Zurschaustellung eines Designersahneschnittchens, preisgekr\u00f6nt oder nicht.<\/p>\n

K\u00fcrzere Zeilenl\u00e4ngen und das wohlproportionierte Aufteilen von Inhalten sind mit einem Raster wie 960 Pixel sehr gut m\u00f6glich und von daher bin ich ein absoluter Fan von Rasterlayouts geworden.<\/p>\n

960 Pixel ist die Breite des Bereiches, der sp\u00e4ter die Inhalte aufnimmt (#wrapper). Er sitzt mittig und l\u00e4sst auch bei Monitoraufl\u00f6sungen 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\u00fcr ein 4-spaltiges Layout 960 durch 4 teilt, wei\u00df man, dass jede Spalte 240Pixel breit ist. Daraus kann man sich dann im PS ein Raster anlegen und erh\u00e4lt – unter Einhaltung des Rasters – immer gute Proportionen.<\/p>\n

960 Grid System<\/a>
\nAuf der Seite befindet sich ein Downlaod Link, welcher zahlreiche Vorlagen f\u00fcr alle m\u00f6glichen Anwendungen enth\u00e4lt als da w\u00e4ren: Illustrator (ai), Photoshop (psd), viso, indesign, coreldraw, omnigraffle, pdf und mehr.<\/p>\n

Contao und 960-Pixel-Grid<\/h4>\n

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\u00fcssen 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.<\/p>\n

Wie das Framework die Arbeit unterst\u00fctzt<\/h5>\n

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\u00f6rtlich \u00fcbersetzt schon sagt: Framework = Rahmenwerk und dashei\u00dft, 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\u00fcnschte Breite einstellen, beim 960-Pixel-Grid w\u00fcrde man also 960 Pixel eingeben und die Option „zentriert“ angeben. Und bevor jetzt ein Aufschrei kommt, man kann na\u00fcrlich auch Breitenangaben in Prozent oder em machen – wer will ;-) und manchmal auch „wer kann“.<\/p>\n

Layoutbereiche<\/h5>\n

Weiterhin gibt es feste Layoutbereiche als da w\u00e4ren:
\n– der Header (‚header) : beeinhaltet z.B. Hauptnavigation, kleine Nebennavigation, Logo, Adresse, Kundenlogin, Suchfunktion …
\n– der Container (#container) mit den drei Hauptspalten: links, rechts, Mitte (#left, #right, #main)
\n– der Fu\u00dfbereich (#footer)<\/p>\n

Auf einen Blick: die Contao-Grundlayouts<\/h5>\n

\"Contao<\/a><\/p>\n


\nVon links nach rechts:<\/strong>
\n– Ohne Kopfzeile (header), ohne Fu\u00dfzeile (footer), ohne Seitenspalten (left und right)
\n– Mit Kopf- und Fu\u00dfzeile aber ohne Seitenspalten
\n– Mit Kopf- und Fu\u00dfzeile und Seitenspalte links
\n– Mit Kopf- und Fu\u00dfzeile und Seitenspalte rechts
\n– Mit Kopf- und Fu\u00dfzeile und Seitenspalte rechts + links<\/p>\n

Und dazwischen gibt es dann noch Variationen, die wahlweise eingestellt werden k\u00f6nnen wie z.B. mit Kopfzeile aber ohne Fu\u00dfzeile, ohne Kopfzeile und ohne Fu\u00dfzeile aber mit beiden Seitenspalten usw.<\/p>\n

Eigene Layoutbereiche<\/h5>\n

Viele sagen ja, dass sie eigene Layoubereich noch nie gebraucht haben. Das kann ich f\u00fcr mich nicht best\u00e4tigen, ich mache oft davon Gebrauch und gehe manchmal sogar noch einen Schritt weiter. Eigene Layoutbereiche k\u00f6nnen ohne \u00c4nderung der zentralen Seitenvorlage angesiedelt werden:<\/p>\n

– Nach dem Header
\n– \u00dcber der Hauptspalte
\n– \u00dcber der Fu\u00dfzeile<\/p>\n

\"Contao<\/a><\/p>\n

Standardm\u00e4\u00dfig ist die Entscheidung wo eigene Layoutbereich positioniert werden sollen immer eine entweder – oder Entscheidung. Entweder ich positioniere unter der Kopfzeile oder \u00fcber der Fu\u00dfspalte oder in der Hauptspalte. Aber Contao w\u00e4re nicht Contao, wenn man nicht auch das \u00e4ndern k\u00f6nnte. \u00dcber \u00c4nderungen am Code der zentralen Seitenvorlage kann man auch ein sowohl unter der Kopfzeile als auch \u00fcber der Fu\u00dfzeile erstellen – in welcher Kombination auch immer, es geht.<\/p>\n

Exoten<\/h5>\n

Etwas CSS-Erfahrung braucht es wenn man aus dem Framework ausbrechen und z.B. Seitenspalten bis an den oberen Rand der Kopfzeile hochziehen m\u00f6chte. Aber das k\u00f6nnt ihr getrost demjenigen \u00fcberlassen, der euer Design umsetzt – oder: css lernen und selber machen.
\n\"Conato<\/a><\/p>\n

Und jetzt wieder Grid<\/h5>\n

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. \u00dcber eine der pfiffigsten Erweiterungen, die es f\u00fcr Contao gibt (subcolumns), kann das Raster auch innerhalb des Textbereiches fortgesetzt werden, so dass man praktische und lesbare Text- oder Bildp\u00e4ckchen bauen kann.<\/p>\n

Beispiel:<\/h5>\n

\"\"<\/a><\/p>\n

Downloads<\/h3>\n