Da ich oft gefragt werde, wie ich an die Erstellung eines neuen Layouts herangehe und wie man dabei vorgehen sollte, habe ich mich entschlossen, zu diesem Thema einmal einen Artikel zu verfassen.

Von der Planung bis hin zur Ausführung habe ich die einzelnen Schritte kurz beschrieben – auf die Einzelheiten, also zum Beispiel wie HTML aufgebaut ist, gehe ich dabei aber nicht ein. Dazu wirf einen Blick in die Liste der anderen Tutorials.

Back to the roots

In der Regel beginnt man die Erstellung eines Layouts nicht damit, dass man auf’s Geratewohl in Photoshop herumexperimentiert oder wild drauflos codet. Im Gegenteil – es empfiehlt sich, den Rechner erstmal Rechner sein zu lassen und sich ganz altmodisch ein Blatt Papier und einen Stift zu schnappen.
So kannst du schnell verschiedene Layouts skizzieren, ohne dich an der technischen Umsetzung aufzuhalten oder zu sehr ins Detail zu gehen.

Scribble

Als Erstes solltest du dir Gedanken darüber machen, wie dein Layout aufgeteilt werden soll. Am wichtigsten ist dabei die Frage, wie viel Platz für den Content benötigt wird – für lange Texte empfiehlt sich ein relativ großer Contentbereich, wohingegen knappe Infotexte auch problemlos in einem kleinen Feld untergebracht werden können.
Und wie viel Platz beansprucht die Navigation – hast du nur eine Handvoll Links, oder willst du eine umfangreiche Navi wie etwa hier auf dieser Seite haben?

An dritter Stelle steht die Frage nach Gestaltungselementen wie etwa Bildern – sollen sie eine eher große Fläche einnehmen, etwa als Headerbild, oder willst du sie eher dezent einsetzen? Und wie sollen sie platziert werden?

Für die Anordnung der einzelnen Elemente solltest du verschiedenste Varianten ausprobieren, indem du sie kurz aufzeichnest und so deinen „Favoriten“ auswählen kannst.

Farbwahl

Wenn du weißt, wie die Aufteilung deines Layouts aussehen soll, kannst du dir als nächstes Gedanken über die Farbwahl machen. Generell gilt, dass weniger mehr ist – ein buntes Design mit allen möglichen Farben wirkt meistens viel zu überladen und schreckt deine Besucher eher ab.
Stattdessen empfiehlt es sich, sich an ein Farbschema zu halten. Dazu kannst du entweder auf das Bild zurückgreifen, das du verwenden willst, und dir dort einige Farben heraussuchen, oder du ziehst ein sog. Colortheme zu Rate. Dies sind Farbstreifen mit ungefähr einer Handvoll verschiedenen Tönen, die aufeinander abgestimmt sind und ein harmonisches Layout ermöglichen. Du findest sie auf einigen GFX-Seiten zum Download.

welcher Layout-Typ?

Ehe es nun ins Grafikprogramm geht, musst du noch entscheiden, welchen Layout-Typ du haben möchtest. Es gibt verschiedene Möglichkeiten, ein Layout zu coden – dazu lies diesen Artikel hier.

die Grafiken erstellen

Jetzt kannst du mit der Umsetzung des Layouts beginnen – starte also das Grafikprogramm deiner Wahl (Paint empfiehlt sich jetzt nicht so unbedingt *g*, lieber Photoshop oder etwas in dieser Richtung).

Da dein Layout schließlich für all deine Besucher gut darstellbar sein soll, musst du berücksichtigen, dass nicht jeder einen riesigen Monitor besitzt. Zwar gilt eine Auflösung von 1024 x 768 Pixeln als Standard, aber viele User sind auch noch mit einem 800 x 600er Monitor unterwegs. Wenn du auf Nummer sicher gehen willst, sollte dein Layout nicht breiter als 800 Pixel sein, sofern du nicht ohnehin mit einem Layouttyp arbeitest, der sich an die jeweilige Bildschirmgröße anpasst.

Nun erstellst du also deine Layoutgrafik und slict sie gegebenenfalls – auf Details werde ich hier nicht eingehen, da dies den Rahmen dieses Tutorials sprengen würde.
Beachte, dass Grafiken länger zum Laden brauchen als Codes – wenn du also eine einfarbige Fläche hast, stellst du sie besser nicht durch Grafiken dar, sondern du legst diesen Farbton via CSS fest.

das Coding

Nun, da du die Grafiken fertig erstellt hast, geht’s ans Coden. Auch hier werde ich nicht genau beschreiben, wie man die einzelnen Layoutypen codet – dazu schau in die anderen Tutorials.

Du kannst zum Coden theoretisch den Editor nutzen – das ist ein sehr einfaches Programm, was den eingegebenen Text unformatiert speichert (das ist wichtig!! Word kannst du zum Coden beispielsweise nicht verwenden!!).

Komfortabler als der Editor, in den du allen Code von Hand eintippen musst und auch nur schwarz-weiß dargestellt bekommst, sind sogenannte WYSIWYG (what you see is what you get)-Editoren wie etwa der Dreamweaver, wo du neben der Codeansicht auch eine Anzeige-Ansicht zur Verfügung hast. Dort kannst du Farben und sonstige Formatierungen ähnlich wie in Word über Buttons festlegen, ohne den benötigten Code selber eingeben zu müssen. Beachte allerdings, dass dies oft zu unsauberem Code führt.
Ich bin immernoch der Ansicht, dass man HTML und CSS wirklich lernen sollte, wenn man eine Website erstellen will, und alles von Hand tippen sollte. Dann weiß man nicht nur, was man hat, sondern kann den Code später auch leichter modifizieren, als wenn man vor einem scheinbar undurchdringlichen Wirwarr von Zeichen und Buchstaben sitzt. Und schwer ist HTML nun wirklich nicht (; .

Überprüfen

Als letztes solltest du dein Layout überprüfen – ist der Code valide, wird die Seite in verschiedenen Browsern und bei unterschiedlicher Auflösung korrekt dargestellt?